KRBL/ArgusSite
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

druggable camera elements

Browse Source
This commit is contained in:
Ivan 2023-09-30 16:10:56 +03:00
parent f5f0171a6c
commit b78843875c
Signed by untrusted user who does not match committer: ppechenkoo
GPG Key ID: 0C191B86D9582583
5 changed files with 206 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
server.js
View File

@ -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 },
{ "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE },
{ "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE },
{ "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE },
{ "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE },
{ "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE },
{ "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE },
{ "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE },
{ "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE },
{ "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE },
{ "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE },
{ "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE },
{ "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE },
{ "GE": GE, "NE": NE, "SE": SE, "TE": TE, "VE": VE, "DE": DE },
{ "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, "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, "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, "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, "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, "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, "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, "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, "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, "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, "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, "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, "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, "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, "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, "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

35
static/scripts/draggable.js Normal file
View File

@ -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);
});

2
static/scripts/parameters-form.js
View File

@ -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;

24
static/styles/main.css
View File

@ -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);

116
static/templates/devices/system.html
View File

@ -109,6 +109,8 @@
</div>
</section>
<div class="name">
<span>{{Serial}}</span>
</div>
@ -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>
@ -241,6 +243,36 @@
<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>
</div>
@ -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);