mirror of
https://github.com/jomjol/AI-on-the-edge-device.git
synced 2025-12-11 05:56:57 +03:00
Enhance ROI pages (#2161)
* Check if the ROIs are equidistant. Only if not, untick the checkbox * renaming * Check if the ROIs have same y, dy and dx. If so, tick the sync checkbox * only allow editing space when box is checked * fix sync check * show inner frame on all ROIs * cleanup * Check if the ROIs have same dy and dx. If so, tick the sync checkbox * checkbox position * renaming * renaming * show inner frame and cross hairs on all ROIs * update ROIs on ticking checkboxes * show timezone hint * fix deleting last ROI * cleanup --------- Co-authored-by: CaCO3 <caco@ruinelli.ch>
This commit is contained in:
CaCO3
@@ -85,9 +85,6 @@ th, td {
|
||||
<tr>
|
||||
<class id="Numbers_text" style="color:black;"><b>Number: </b></class>
|
||||
<select id="Numbers_value1" onchange="numberChanged()">
|
||||
<option value="0" selected>default</option>
|
||||
<option value="1" >NT</option>
|
||||
<option value="2" >HT</option>
|
||||
</select>
|
||||
<input class="move" type="submit" id="renameNumber" name="renameNumber" onclick="renameNumber()" value="Rename">
|
||||
<input class="move" type="submit" id="newNumber" name="newNumber" onclick="newNumber()" value="New">
|
||||
@@ -105,8 +102,6 @@ th, td {
|
||||
<tr>
|
||||
<td>
|
||||
<select id="index" name="index" onchange="ChangeSelection()" tabindex=1>
|
||||
<option value="0" selected>ROI 0</option>
|
||||
<option value="1" >ROI 1</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
@@ -120,16 +115,16 @@ th, td {
|
||||
<tr>
|
||||
<td>x: <input type="number" name="refx" id="refx" step=1 onchange="valuemanualchanged()" tabindex=2></td>
|
||||
<td>Δx: <input type="number" name="refdx" id="refdx" step=1 onchange="valuemanualchangeddx()" tabindex=4></td>
|
||||
<td><label for="lockAR"> Lock aspect ratio: </label><input type="checkbox" id="lockAR" name="lockAR" value="1" onclick="changelockAR()" checked tabindex=6></td>
|
||||
<td><input type="checkbox" id="lockAspectRatio" name="lockAspectRatio" value="1" onclick="changelockAspectRatio()" checked tabindex=6><label for="lockAspectRatio"> Lock aspect ratio</label></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>y: <input type="number" name="refy" id="refy" step=1 onchange="valuemanualchanged()" tabindex=3></td>
|
||||
<td>Δy: <input type="number" name="refdy" id="refdy" step=1 onchange="valuemanualchanged()" tabindex=5></td>
|
||||
<td><label for="lockSizes"> Synchronize Δx and Δy between ROIs</label><input type="checkbox" id="lockSizes" name="lockSizes" value="1" onclick="changelockSizes()" checked tabindex=7></td>
|
||||
<td><input type="checkbox" id="lockSizes" name="lockSizes" value="1" onclick="changelockSizes()" checked tabindex=7><label for="lockSizes"> Synchronize Δx and Δy between ROIs</label></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"></td>
|
||||
<td><label for="CCW"> Counter-Clockwise Rotation: </label><input type="checkbox" id="CCW" name="CCW" value="0" onclick="changeCCW()" unchecked tabindex=8></td>
|
||||
<td><input type="checkbox" id="CCW" name="CCW" value="0" onclick="changeCCW()" unchecked tabindex=8><label for="CCW"> Counter-Clockwise Rotation: </label></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
@@ -159,8 +154,8 @@ th, td {
|
||||
cofcat,
|
||||
param,
|
||||
enhanceCon = false;
|
||||
lockAR = true;
|
||||
lockSizes = true;
|
||||
lockAspectRatio = true;
|
||||
lockSizes = false;
|
||||
domainname = getDomainname();
|
||||
|
||||
|
||||
@@ -222,6 +217,7 @@ function deleteROI(){
|
||||
aktindex = ROIInfo.length - 1;
|
||||
}
|
||||
UpdateROIs();
|
||||
draw();
|
||||
}
|
||||
|
||||
function newROI(){
|
||||
@@ -259,12 +255,13 @@ function moveNext(){
|
||||
UpdateROIs();
|
||||
}
|
||||
|
||||
function changelockAR(){
|
||||
lockAR = document.getElementById("lockAR").checked;
|
||||
function changelockAspectRatio(){
|
||||
lockAspectRatio = document.getElementById("lockAspectRatio").checked;
|
||||
}
|
||||
|
||||
function changelockSizes(){
|
||||
lockSizes = document.getElementById("lockSizes").checked;
|
||||
UpdateROIs();
|
||||
}
|
||||
|
||||
function changeCCW(){
|
||||
@@ -283,7 +280,7 @@ function changeCCW(){
|
||||
|
||||
function ChangeSelection(){
|
||||
aktindex = parseInt(document.getElementById("index").value);
|
||||
// lockAR = true;
|
||||
// lockAspectRatio = true;
|
||||
UpdateROIs();
|
||||
}
|
||||
|
||||
@@ -317,6 +314,7 @@ function UpdateROIs(_sel){
|
||||
document.getElementById("newROI").disabled = false;
|
||||
document.getElementById("deleteROI").disabled = true;
|
||||
document.getElementById("index").disabled = true;
|
||||
document.getElementById("saveroi").disabled = true;
|
||||
document.getElementById("renameROI").disabled = true;
|
||||
document.getElementById("moveNext").disabled = true;
|
||||
document.getElementById("movePrevious").disabled = true;
|
||||
@@ -361,7 +359,7 @@ function UpdateROIs(_sel){
|
||||
document.getElementById("moveNext").disabled = true;
|
||||
}
|
||||
|
||||
document.getElementById("lockAR").checked = lockAR;
|
||||
document.getElementById("lockAspectRatio").checked = lockAspectRatio;
|
||||
document.getElementById("lockSizes").checked = lockSizes;
|
||||
|
||||
document.getElementById("refx").value = ROIInfo[aktindex]["x"];
|
||||
@@ -419,6 +417,29 @@ function UpdateROIs(_sel){
|
||||
param = getConfigParameters();
|
||||
cofcat = getConfigCategory();
|
||||
UpdateNUMBERS();
|
||||
|
||||
/* Check if the ROIs have same dy and dx. If so, tick the sync checkbox */
|
||||
var all_dx_dy_Identical = true;
|
||||
if (ROIInfo.length > 1) {
|
||||
for (var i = 1; i < (ROIInfo.length); ++i) { // 2nd .. last ROI
|
||||
if (parseInt(ROIInfo[i].dx) != parseInt(ROIInfo[0].dx) ||
|
||||
parseInt(ROIInfo[i].dy) != parseInt(ROIInfo[0].dy)) {
|
||||
all_dx_dy_Identical = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (all_dx_dy_Identical) {
|
||||
lockSizes = true;
|
||||
console.log("All ROI have the same dX and dY, ticking the sync checkbox!");
|
||||
document.getElementById("lockSizes").checked = lockSizes;
|
||||
}
|
||||
else {
|
||||
console.log("Not all ROI have the same dX and dY, unticking the sync checkbox!");
|
||||
}
|
||||
|
||||
|
||||
drawImage();
|
||||
draw();
|
||||
}
|
||||
@@ -510,11 +531,17 @@ function drawTextBG(context, txt, x, y, padding) {
|
||||
if (typeof ROIInfo === 'undefined') { // During init, ROIInfo is not defined yet
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
|
||||
var canvas = document.getElementById('canvas');
|
||||
var context = canvas.getContext('2d');
|
||||
context.drawImage(imageObj, 0, 0);
|
||||
|
||||
if (ROIInfo.length == 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
context.font = "15px Arial";
|
||||
context.fillStyle = "red";
|
||||
context.textAlign = "center";
|
||||
@@ -540,7 +567,7 @@ function drawTextBG(context, txt, x, y, padding) {
|
||||
{
|
||||
if (_nb != _number)
|
||||
{
|
||||
lw = 1;
|
||||
lw = 2;
|
||||
context.lineWidth = lw;
|
||||
context.strokeStyle = "#990000";
|
||||
var x0 = parseInt(ROIInfo[_nb].x) - parseInt(lw/2);
|
||||
@@ -549,12 +576,24 @@ function drawTextBG(context, txt, x, y, padding) {
|
||||
var dy = parseInt(ROIInfo[_nb].dy) + parseInt(lw);
|
||||
context.strokeRect(x0, y0, dx, dy);
|
||||
drawTextBG(context, ROIInfo[_nb]["name"], x0+dx/2-0.5, y0-13, 5);
|
||||
|
||||
lw = 1;
|
||||
var x0 = parseInt(ROIInfo[_nb].x) - parseInt(lw/2);
|
||||
var y0 = parseInt(ROIInfo[_nb].y) - parseInt(lw/2);
|
||||
var dx = parseInt(ROIInfo[_nb].dx) + parseInt(lw);
|
||||
var dy = parseInt(ROIInfo[_nb].dy) + parseInt(lw);
|
||||
context.strokeRect(x0, y0, dx, dy);
|
||||
context.lineWidth = lw;
|
||||
context.beginPath();
|
||||
context.arc(x0+dx/2, y0+dy/2, dx/2, 0, 2 * Math.PI);
|
||||
context.moveTo(x0+dx/2, y0);
|
||||
context.lineTo(x0+dx/2, y0+dy);
|
||||
context.moveTo(x0, y0+dy/2);
|
||||
context.lineTo(x0+dx, y0+dy/2);
|
||||
context.stroke();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
lw = 4
|
||||
context.lineWidth = lw;
|
||||
context.strokeStyle = "#FF0000";
|
||||
@@ -622,7 +661,7 @@ function drawTextBG(context, txt, x, y, padding) {
|
||||
zw = getCoords(this)
|
||||
|
||||
|
||||
if (lockAR) {
|
||||
if (lockAspectRatio) {
|
||||
rect.h = (e.pageY - zw.top) - rect.startY;
|
||||
rect.w = Math.round(rect.h * ROIInfo[aktindex]["ar"]); }
|
||||
else {
|
||||
@@ -657,7 +696,7 @@ function drawTextBG(context, txt, x, y, padding) {
|
||||
if (!drag) {
|
||||
rect.w = document.getElementById("refdx").value;
|
||||
rect.h = document.getElementById("refdy").value;
|
||||
if (lockAR) {
|
||||
if (lockAspectRatio) {
|
||||
rect.w = Math.round(rect.h * ROIInfo[aktindex]["ar"]);
|
||||
document.getElementById("refdx").value = rect.w;
|
||||
}
|
||||
@@ -672,7 +711,7 @@ function drawTextBG(context, txt, x, y, padding) {
|
||||
if (!drag) {
|
||||
rect.w = document.getElementById("refdx").value;
|
||||
rect.h = document.getElementById("refdy").value;
|
||||
if (lockAR) {
|
||||
if (lockAspectRatio) {
|
||||
rect.h = Math.round(rect.w / ROIInfo[aktindex]["ar"]);
|
||||
document.getElementById("refdy").value = rect.h;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user