druggable camera elements

server.js

@@ -2852,7 +2852,19 @@ app.put('/device-parameters', async (req, res) => {
     VE,
     SE,
     GE,
-    DE
+    DE,
+    TX,
+    TY,
+    SX,
+    SY,
+    VX,
+    VY,
+    GX,
+    GY,
+    NX,
+    NY,
+    DX,
+    DY
   } = requestData;
 
 
@@ -2868,23 +2880,23 @@ app.put('/device-parameters', async (req, res) => {
       "GM": parseInt(GEOMOD, 10)
     },
     "EOSD": [
-      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE },
+      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE, "TX": TX, "TY": TY, "SX": SX, "SY": SY, "VX": VX, "VY": VY, "GX": GX, "GY": GY, "NX": NX, "NY": NY, "DX": DX, "DY": DY },
-      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE },
+      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE, "TX": TX, "TY": TY, "SX": SX, "SY": SY, "VX": VX, "VY": VY, "GX": GX, "GY": GY, "NX": NX, "NY": NY, "DX": DX, "DY": DY },
-      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE },
+      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE, "TX": TX, "TY": TY, "SX": SX, "SY": SY, "VX": VX, "VY": VY, "GX": GX, "GY": GY, "NX": NX, "NY": NY, "DX": DX, "DY": DY },
-      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE },
+      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE, "TX": TX, "TY": TY, "SX": SX, "SY": SY, "VX": VX, "VY": VY, "GX": GX, "GY": GY, "NX": NX, "NY": NY, "DX": DX, "DY": DY },
-      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE },
+      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE, "TX": TX, "TY": TY, "SX": SX, "SY": SY, "VX": VX, "VY": VY, "GX": GX, "GY": GY, "NX": NX, "NY": NY, "DX": DX, "DY": DY },
-      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE },
+      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE, "TX": TX, "TY": TY, "SX": SX, "SY": SY, "VX": VX, "VY": VY, "GX": GX, "GY": GY, "NX": NX, "NY": NY, "DX": DX, "DY": DY },
-      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE },
+      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE, "TX": TX, "TY": TY, "SX": SX, "SY": SY, "VX": VX, "VY": VY, "GX": GX, "GY": GY, "NX": NX, "NY": NY, "DX": DX, "DY": DY },
-      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE },
+      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE, "TX": TX, "TY": TY, "SX": SX, "SY": SY, "VX": VX, "VY": VY, "GX": GX, "GY": GY, "NX": NX, "NY": NY, "DX": DX, "DY": DY },
-      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE },
+      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE, "TX": TX, "TY": TY, "SX": SX, "SY": SY, "VX": VX, "VY": VY, "GX": GX, "GY": GY, "NX": NX, "NY": NY, "DX": DX, "DY": DY },
-      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE },
+      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE, "TX": TX, "TY": TY, "SX": SX, "SY": SY, "VX": VX, "VY": VY, "GX": GX, "GY": GY, "NX": NX, "NY": NY, "DX": DX, "DY": DY },
-      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE },
+      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE, "TX": TX, "TY": TY, "SX": SX, "SY": SY, "VX": VX, "VY": VY, "GX": GX, "GY": GY, "NX": NX, "NY": NY, "DX": DX, "DY": DY },
-      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE },
+      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE, "TX": TX, "TY": TY, "SX": SX, "SY": SY, "VX": VX, "VY": VY, "GX": GX, "GY": GY, "NX": NX, "NY": NY, "DX": DX, "DY": DY },
-      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE },
+      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE, "TX": TX, "TY": TY, "SX": SX, "SY": SY, "VX": VX, "VY": VY, "GX": GX, "GY": GY, "NX": NX, "NY": NY, "DX": DX, "DY": DY },
-      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE },
+      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE, "TX": TX, "TY": TY, "SX": SX, "SY": SY, "VX": VX, "VY": VY, "GX": GX, "GY": GY, "NX": NX, "NY": NY, "DX": DX, "DY": DY },
-      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE },
+      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE, "TX": TX, "TY": TY, "SX": SX, "SY": SY, "VX": VX, "VY": VY, "GX": GX, "GY": GY, "NX": NX, "NY": NY, "DX": DX, "DY": DY },
-      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE },
+      { "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE, "TX": TX, "TY": TY, "SX": SX, "SY": SY, "VX": VX, "VY": VY, "GX": GX, "GY": GY, "NX": NX, "NY": NY, "DX": DX, "DY": DY },
-  ]
+    ]
   };
 
   // Отправляем GET запрос с JSON BODY

static/scripts/draggable.js

@@ -0,0 +1,35 @@
+$(function () {
+    var initialOffsetX1, initialOffsetY1;
+    var initialOffsetX2, initialOffsetY2;
+    var initialOffsetX3, initialOffsetY3;
+    var initialOffsetX4, initialOffsetY4;
+    var initialOffsetX5, initialOffsetY5;
+    var initialOffsetX6, initialOffsetY6;
+
+        function makeDraggable($element, posX, posY) {
+            $element.draggable({
+                containment: ".container",
+                cursor: "crosshair",
+                start: function (event, ui) {
+                    var offset = $element.offset();
+                    var containerOffset = $(".container").offset();
+                    posX = offset.left - ui.position.left - containerOffset.left;
+                    posY = offset.top - ui.position.top - containerOffset.top;
+                },
+                drag: function (event, ui) {
+                    $('#posY' + $element.attr('id')).val((ui.position.top + posY) * 3);
+                    $('#posX' + $element.attr('id')).val((ui.position.left + posX) * 3);
+                }
+            });
+
+        
+        }
+    
+        makeDraggable($("#boxTime"), initialOffsetX1, initialOffsetY1);
+        makeDraggable($("#boxSpeed"), initialOffsetX2, initialOffsetY2);
+        makeDraggable($("#boxNumber"), initialOffsetX3, initialOffsetY3);
+        makeDraggable($("#boxGPS"), initialOffsetX4, initialOffsetY4);
+        makeDraggable($("#boxName"), initialOffsetX5, initialOffsetY5);
+        makeDraggable($("#boxID"), initialOffsetX6, initialOffsetY6);
+    
+});

static/scripts/parameters-form.js

@@ -124,6 +124,8 @@ for (let radioButton of radioButtons) {
 
             console.log(data.DATA);
 
+            draggItems(data.DATA.EOSD[1])
+
             document.getElementById('system-date').value = data.DATA.TIMEP.DATEM;
             document.getElementById('system-time').value = data.DATA.TIMEP.TIMEM;
             document.getElementById('system-language').value = data.DATA.GSP.LANT;

static/styles/main.css

@@ -1405,6 +1405,30 @@ tr:nth-child(even) {
   filter: brightness(0.9);
 }
 
+.container{
+  width: 420px;
+  height: 265px;
+  background-color: rgba(245, 245, 250, 1);
+  margin-bottom: 20px;
+  position: relative;
+}
+.box{
+  width: fit-content;
+  height: 18px !important;
+  padding: 1px;
+  border: solid 1px white;
+  background-color: #8086f9;
+  font-size: 16px;
+  font-weight: lighter;
+  color: white;
+  cursor: move;
+  white-space: nowrap;
+}
+
+.box-inputs {
+  display: none;
+}
+
 .upload-input {
   margin-top: 5px;
   background: rgba(128, 134, 249, 0.05);

static/templates/devices/system.html

@@ -108,6 +108,8 @@
                 <button id="closeButton" style="display: none;" onclick="hideMessage()">Закрыть</button>
         </div>
     </section>
+
+    
   
     <div class="name">
       <span>{{Serial}}</span>
@@ -232,7 +234,7 @@
           
                   <h2 style="margin-bottom: 5px;">Отметьте то, что должно отображаться на трансляции</h2>
           
-                  <input type="checkbox" id="TE" class="checkbox-input" hidden><label for="TE" class="checkbox-label"><div class="checkmark"></div>Время</label>
+                  <input type="checkbox" id="TE" class="checkbox-input" hidden><label for="TE" class="checkbox-label"><div class="checkmark"></div>Дата и время</label>
                   <input type="checkbox" id="SE" class="checkbox-input" hidden><label for="SE" class="checkbox-label"><div class="checkmark"></div>Скорость</label>
                   <input type="checkbox" id="VE" class="checkbox-input" hidden><label for="VE" class="checkbox-label"><div class="checkmark"></div>Номер ТС</label>
                   <input type="checkbox" id="GE" class="checkbox-input" hidden><label for="GE" class="checkbox-label"><div class="checkmark"></div>Координаты</label>
@@ -240,6 +242,36 @@
                   <input type="checkbox" id="DE" class="checkbox-input" hidden><label for="DE" class="checkbox-label"><div class="checkmark"></div>ID регистратора</label>
           
                   <div class="horizontal-line"></div>
+
+                  <h2 style="margin-bottom: 15px;">Расположение элементов на трансляции</h2>
+
+                  <div class="container">
+                    <div class="box" style="width: 175px;" id="boxTime">Дата и время</div>
+                    <div class="box" id="boxSpeed">Скорость</div>
+                    <div class="box" id="boxNumber">Номер ТС</div>
+                    <div class="box" id="boxGPS">Координаты</div>
+                    <div class="box" id="boxName">Название</div>
+                    <div class="box" id="boxID">ID</div>
+                  </div>
+
+                  <div class="horizontal-line"></div>
+
+                  <div class="box-inputs">
+
+                    <input type="number" id="posXboxTime" hidden>
+                    <input type="number" id="posYboxTime" hidden>
+                    <input type="number" id="posXboxSpeed" hidden>
+                    <input type="number" id="posYboxSpeed" hidden>
+                    <input type="number" id="posXboxNumber" hidden>
+                    <input type="number" id="posYboxNumber" hidden>
+                    <input type="number" id="posXboxGPS" hidden>
+                    <input type="number" id="posYboxGPS" hidden>
+                    <input type="number" id="posXboxName" hidden>
+                    <input type="number" id="posYboxName" hidden>
+                    <input type="number" id="posXboxID" hidden>
+                    <input type="number" id="posYboxID" hidden>
+
+                  </div>
           
                   <button onclick="sendPutRequest('parameters');" type="button">Сохранить</button>
           
@@ -846,7 +878,9 @@ afterAlarmDurationField.addEventListener('blur', function() {
     </section>
 
     <script src="../../../scripts/jquery.min.js"></script>
+    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
     <script src="https://rawgit.com/RobinHerbots/Inputmask/5.x/dist/jquery.inputmask.js"></script>
+    <script src="../../../scripts/draggable.js"></script>
 
     <script>
       function addServer(data) {
@@ -993,6 +1027,58 @@ afterAlarmDurationField.addEventListener('blur', function() {
 
   return `${year}-${month}-${day}`;
 }
+
+function draggItems(item) {
+  $('#posXboxID').val(item.DX);
+  $('#posYboxID').val(item.DY);
+
+  $('#posXboxGPS').val(item.GX);
+  $('#posYboxGPS').val(item.GY);
+
+  $('#posXboxName').val(item.NX);
+  $('#posYboxName').val(item.NY);
+
+  $('#posXboxSpeed').val(item.SX);
+  $('#posYboxSpeed').val(item.SY);
+
+  $('#posXboxTime').val(item.TX);
+  $('#posYboxTime').val(item.TY);
+
+  $('#posXboxNumber').val(item.VX);
+  $('#posYboxNumber').val(item.VY);
+
+
+  $("#boxTime").css({
+    left: item.TX / 3,
+    top: item.TY / 3
+  });
+
+  $("#boxSpeed").css({
+    left: item.SX / 3,
+    top: item.SY / 3 - 22
+  });
+
+  $("#boxNumber").css({
+    left: item.VX / 3,
+    top: item.VY / 3 - 44
+  });
+
+  $("#boxGPS").css({
+    left: item.GX / 3,
+    top: item.GY / 3 - 66
+  });
+
+  $("#boxName").css({
+    left: item.NX / 3,
+    top: item.NY / 3 - 88
+  });
+
+  $("#boxID").css({
+    left: item.DX / 3,
+    top: item.DY / 3 - 110
+  });
+}
+
 const serial = "{{Serial}}";
 const requestBody = {
             "serial": serial
@@ -1018,6 +1104,8 @@ const requestBody = {
 
             console.log(data.DATA);
 
+            draggItems(data.DATA.EOSD[1])
+
             document.getElementById('system-date').value = data.DATA.TIMEP.DATEM;
             document.getElementById('system-time').value = data.DATA.TIMEP.TIMEM;
             document.getElementById('system-language').value = data.DATA.GSP.LANT;
@@ -1064,6 +1152,20 @@ const requestBody = {
       const GE = document.getElementById('GE').checked ? 1 : 0;
       const DE = document.getElementById('DE').checked ? 1 : 0;
 
+      const TX = parseInt(document.getElementById('posXboxTime').value);
+      const TY = parseInt(document.getElementById('posYboxTime').value);
+      const SX = parseInt(document.getElementById('posXboxSpeed').value);
+      const SY = parseInt(document.getElementById('posYboxSpeed').value);
+      const VX = parseInt(document.getElementById('posXboxNumber').value);
+      const VY = parseInt(document.getElementById('posYboxNumber').value);
+      const GX = parseInt(document.getElementById('posXboxGPS').value);
+      const GY = parseInt(document.getElementById('posYboxGPS').value);
+      const NX = parseInt(document.getElementById('posXboxName').value);
+      const NY = parseInt(document.getElementById('posYboxName').value);
+      const DX = parseInt(document.getElementById('posXboxID').value);
+      const DY = parseInt(document.getElementById('posYboxID').value);
+
+
 
       const requestData = {
         DATEMOD,
@@ -1077,6 +1179,18 @@ const requestBody = {
         SE,
         GE,
         DE,
+        TX,
+        TY,
+        SX,
+        SY,
+        VX,
+        VY,
+        GX,
+        GY,
+        NX,
+        NY,
+        DX,
+        DY,
       };
 
       console.log(requestData);