mirror of
https://github.com/jomjol/AI-on-the-edge-device.git
synced 2025-12-06 11:36:51 +03:00
392 lines
14 KiB
HTML
392 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<title>Make Alignment</title>
|
|
</head>
|
|
|
|
<div class="body-content">
|
|
|
|
<div id="createrefernce">
|
|
<div style="padding-left: 30px">
|
|
<h3>Edit Digits</h3>
|
|
|
|
<div style="padding-left: 30px">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<canvas id="canvas" crossorigin></canvas>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<input type="submit" name="newROI" onclick="newROI()" value="New ROI (after current)">
|
|
<input type="submit" name="deleteROI" onclick="deleteROI()" value="Delete ROI">
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<tr>
|
|
<td>
|
|
<select id="index" name="index" onchange="ChangeSelection()">
|
|
<option value="0" selected>ROI 0</option>
|
|
<option value="1" >ROI 1</option>
|
|
</select>
|
|
name: <input type="text" name="name" id="name" onchange="onNameChange()">
|
|
<input type="submit" id="moveNext" onclick="moveNext()" value="move Next">
|
|
<input type="submit" id="movePrevious" onclick="movePrevious()" value="move Previous">
|
|
</td>
|
|
</tr>
|
|
|
|
<td>
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
x: <input type="number" name="refx" id="refx" step=1 onchange="valuemanualchanged()">
|
|
</td>
|
|
<td>
|
|
dx: <input type="number" name="refdx" id="refdx" step=1 onchange="valuemanualchangeddx()">
|
|
</td>
|
|
<td>
|
|
<input type="checkbox" id="lockAR" name="lockAR" value="1" onclick="changelockAR()" checked>
|
|
<label for="lockAR"> lock aspect ratio</label><br>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
y: <input type="number" name="refy" id="refy" step=1 onchange="valuemanualchanged()">
|
|
</td>
|
|
<td>
|
|
dy: <input type="number" name="refdy" id="refdy" step=1 onchange="valuemanualchanged()">
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<input type="submit" name="saveroi" onclick="SaveToConfig()" value="Save all to Config.ini">
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="./gethost.js"></script>
|
|
<script type="text/javascript" src="./readconfig.js"></script>
|
|
|
|
<script language="JavaScript">
|
|
var canvas = document.getElementById('canvas'),
|
|
ctx = canvas.getContext('2d'),
|
|
imageObj = new Image(),
|
|
rect = {},
|
|
drag = false,
|
|
aktindex = 0,
|
|
ROIInfo,
|
|
enhanceCon = false;
|
|
lockAR = true;
|
|
basepath = "http://192.168.178.26";
|
|
|
|
function onNameChange(){
|
|
ROIInfo[aktindex]["name"] = document.getElementById("name").value;
|
|
UpdateROIs();
|
|
}
|
|
|
|
function deleteROI(){
|
|
ROIInfo.splice(aktindex, 1);
|
|
if (aktindex > ROIInfo.length - 1){
|
|
aktindex = ROIInfo.length - 1;
|
|
}
|
|
UpdateROIs();
|
|
}
|
|
|
|
function newROI(){
|
|
var zw = ROIInfo[ROIInfo.length-1];
|
|
ROIInfo.push(zw);
|
|
for (var i = ROIInfo.length-2; i > aktindex + 1; --i){
|
|
ROIInfo[i] = ROIInfo[i-1];
|
|
}
|
|
aktindex++;
|
|
ROIInfo[aktindex] = new Object;
|
|
ROIInfo[aktindex]["pos_ref"] = -1;
|
|
ROIInfo[aktindex]["name"] = "ROI" + aktindex;
|
|
ROIInfo[aktindex]["x"] = 1;
|
|
ROIInfo[aktindex]["y"] = 1;
|
|
ROIInfo[aktindex]["dx"] = ROIInfo[aktindex-1]["dx"];
|
|
ROIInfo[aktindex]["dy"] = ROIInfo[aktindex-1]["dy"];
|
|
ROIInfo[aktindex]["ar"] = ROIInfo[aktindex-1]["ar"];
|
|
UpdateROIs();
|
|
}
|
|
|
|
function movePrevious(){
|
|
var zw = ROIInfo[aktindex];
|
|
ROIInfo[aktindex] = ROIInfo[aktindex-1];
|
|
ROIInfo[aktindex-1] = zw;
|
|
aktindex--;
|
|
UpdateROIs();
|
|
}
|
|
|
|
function moveNext(){
|
|
var zw = ROIInfo[aktindex];
|
|
ROIInfo[aktindex] = ROIInfo[aktindex+1];
|
|
ROIInfo[aktindex+1] = zw;
|
|
aktindex++;
|
|
UpdateROIs();
|
|
}
|
|
|
|
function changelockAR(){
|
|
lockAR = document.getElementById("lockAR").checked;
|
|
}
|
|
|
|
function ChangeSelection(){
|
|
aktindex = parseInt(document.getElementById("index").value);
|
|
// lockAR = true;
|
|
UpdateROIs();
|
|
}
|
|
|
|
function SaveToConfig(){
|
|
SaveROIToConfig(ROIInfo, "[Digits]", basepath);
|
|
// location.reload();
|
|
// parent.window.location.reload(true);
|
|
// window.location = location.href + '?session=' + Math.floor((Math.random() * 1000000) + 1);
|
|
UpdatePage();
|
|
}
|
|
|
|
|
|
function UpdateROIs(){
|
|
if (ROIInfo.length == 0){
|
|
alert("There are no ROIs defined.\nPlease first define minimum one ROI in the config.ini by hand.\n");
|
|
return;
|
|
}
|
|
|
|
var _index = document.getElementById("index");
|
|
while (_index.length){
|
|
_index.remove(0);
|
|
}
|
|
|
|
for (var i = 0; i < ROIInfo.length; ++i){
|
|
var option = document.createElement("option");
|
|
option.text = "ROI " + (i + 1);
|
|
option.value = i;
|
|
_index.add(option);
|
|
}
|
|
_index.selectedIndex = aktindex;
|
|
|
|
|
|
document.getElementById("movePrevious").disabled = false;
|
|
if (aktindex == 0){
|
|
document.getElementById("movePrevious").disabled = true;
|
|
}
|
|
|
|
document.getElementById("moveNext").disabled = false;
|
|
if (aktindex == (ROIInfo.length-1)){
|
|
document.getElementById("moveNext").disabled = true;
|
|
}
|
|
|
|
document.getElementById("lockAR").checked = lockAR;
|
|
|
|
document.getElementById("name").value = ROIInfo[aktindex]["name"];
|
|
document.getElementById("refx").value = ROIInfo[aktindex]["x"];
|
|
document.getElementById("refy").value = ROIInfo[aktindex]["y"];
|
|
document.getElementById("refdx").value = ROIInfo[aktindex]["dx"];
|
|
document.getElementById("refdy").value = ROIInfo[aktindex]["dy"];
|
|
rect.startX = ROIInfo[aktindex]["x"];
|
|
rect.startY = ROIInfo[aktindex]["y"];
|
|
rect.w = ROIInfo[aktindex]["dx"];
|
|
rect.h = ROIInfo[aktindex]["dy"];
|
|
draw();
|
|
}
|
|
|
|
function ParseIni(_basepath) {
|
|
loadConfig(_basepath);
|
|
ParseConfig();
|
|
ROIInfo = getROIInfo("[Digits]");
|
|
|
|
UpdateROIs();
|
|
}
|
|
|
|
|
|
function loadCanvas(dataURL) {
|
|
var canvas = document.getElementById('canvas');
|
|
var context = canvas.getContext('2d');
|
|
|
|
imageObj.onload = function() {
|
|
canvas.width = this.width;
|
|
canvas.height = this.height;
|
|
drawImage();
|
|
};
|
|
|
|
imageObj.src = dataURL;
|
|
}
|
|
|
|
|
|
function getCoords(elem) { // crossbrowser version
|
|
var box = elem.getBoundingClientRect();
|
|
var body = document.body;
|
|
var docEl = document.documentElement;
|
|
var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
|
|
var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
|
|
var clientTop = docEl.clientTop || body.clientTop || 0;
|
|
var clientLeft = docEl.clientLeft || body.clientLeft || 0;
|
|
var top = box.top + scrollTop - clientTop;
|
|
var left = box.left + scrollLeft - clientLeft;
|
|
return { top: Math.round(top), left: Math.round(left) };
|
|
}
|
|
|
|
|
|
|
|
function init() {
|
|
basepath = getbasepath();
|
|
canvas.addEventListener('mousedown', mouseDown, false);
|
|
canvas.addEventListener('mouseup', mouseUp, false);
|
|
canvas.addEventListener('mousemove', mouseMove, false);
|
|
loadCanvas(basepath + "/fileserver/config/reference.jpg");
|
|
ParseIni(basepath);
|
|
drawImage();
|
|
}
|
|
function drawImage(){
|
|
var canvas = document.getElementById('canvas');
|
|
var context = canvas.getContext('2d');
|
|
|
|
context.clearRect(0,0,imageObj.width,imageObj.height);
|
|
context.save();
|
|
context.drawImage(imageObj, 0, 0);
|
|
// context.restore();
|
|
}
|
|
|
|
|
|
function draw() {
|
|
var canvas = document.getElementById('canvas');
|
|
var context = canvas.getContext('2d');
|
|
context.drawImage(imageObj, 0, 0);
|
|
lw = 4
|
|
context.lineWidth = lw;
|
|
context.strokeStyle = "#FF0000";
|
|
var x0 = parseInt(rect.startX) - parseInt(lw/2);
|
|
var y0 = parseInt(rect.startY) - parseInt(lw/2);
|
|
var dx = parseInt(rect.w) + parseInt(lw);
|
|
var dy = parseInt(rect.h) + parseInt(lw);
|
|
context.strokeRect(x0, y0, dx, dy);
|
|
ROIInfo[aktindex]["x"] = rect.startX;
|
|
ROIInfo[aktindex]["y"] = rect.startY;
|
|
ROIInfo[aktindex]["dx"] = rect.w;
|
|
ROIInfo[aktindex]["dy"] = rect.h;
|
|
}
|
|
|
|
function getCoords(elem) { // crossbrowser version
|
|
var box = elem.getBoundingClientRect();
|
|
var body = document.body;
|
|
var docEl = document.documentElement;
|
|
var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
|
|
var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
|
|
var clientTop = docEl.clientTop || body.clientTop || 0;
|
|
var clientLeft = docEl.clientLeft || body.clientLeft || 0;
|
|
var top = box.top + scrollTop - clientTop;
|
|
var left = box.left + scrollLeft - clientLeft;
|
|
return { top: Math.round(top), left: Math.round(left) };
|
|
}
|
|
|
|
function mouseDown(e) {
|
|
zw = getCoords(this)
|
|
rect.startX = e.pageX - zw.left;
|
|
rect.startY = e.pageY - zw.top;
|
|
document.getElementById("refx").value = rect.startX;
|
|
document.getElementById("refy").value = rect.startY;
|
|
drag = true;
|
|
}
|
|
|
|
function mouseUp() {
|
|
drag = false;
|
|
if (rect.w < 0) {
|
|
rect.w = -rect.w
|
|
rect.startX-=rect.w
|
|
}
|
|
if (rect.h < 0) {
|
|
rect.h = -rect.h
|
|
rect.startY-=rect.h
|
|
}
|
|
document.getElementById("refdx").value = rect.w;
|
|
document.getElementById("refdy").value = rect.h;
|
|
document.getElementById("refx").value = rect.startX;
|
|
document.getElementById("refy").value = rect.startY;
|
|
}
|
|
|
|
function mouseMove(e) {
|
|
if (drag) {
|
|
zw = getCoords(this)
|
|
|
|
|
|
if (lockAR) {
|
|
rect.h = (e.pageY - zw.top) - rect.startY;
|
|
rect.w = Math.round(rect.h * ROIInfo[aktindex]["ar"]); }
|
|
else {
|
|
rect.w = (e.pageX - zw.left) - rect.startX;
|
|
rect.h = (e.pageY - zw.top) - rect.startY;
|
|
}
|
|
document.getElementById("refdx").value = rect.w;
|
|
document.getElementById("refdy").value = rect.h;
|
|
draw();
|
|
}
|
|
else {
|
|
draw();
|
|
var canvas = document.getElementById('canvas');
|
|
var context = canvas.getContext('2d');
|
|
|
|
zw = getCoords(this);
|
|
x = e.pageX - zw.left;
|
|
y = e.pageY - zw.top;
|
|
|
|
context.lineWidth = 2;
|
|
context.strokeStyle = "#00FF00";
|
|
context.beginPath();
|
|
context.moveTo(0,y);
|
|
context.lineTo(canvas.width, y);
|
|
context.moveTo(x, 0);
|
|
context.lineTo(x, canvas.height);
|
|
context.stroke();
|
|
}
|
|
}
|
|
|
|
function valuemanualchanged(){
|
|
if (!drag) {
|
|
rect.w = document.getElementById("refdx").value;
|
|
rect.h = document.getElementById("refdy").value;
|
|
if (lockAR) {
|
|
rect.w = Math.round(rect.h * ROIInfo[aktindex]["ar"]);
|
|
document.getElementById("refdx").value = rect.w;
|
|
}
|
|
|
|
rect.startX = document.getElementById("refx").value;
|
|
rect.startY = document.getElementById("refy").value;
|
|
draw();
|
|
}
|
|
}
|
|
|
|
function valuemanualchangeddx(){
|
|
if (!drag) {
|
|
rect.w = document.getElementById("refdx").value;
|
|
rect.h = document.getElementById("refdy").value;
|
|
if (lockAR) {
|
|
rect.h = Math.round(rect.w / ROIInfo[aktindex]["ar"]);
|
|
document.getElementById("refdy").value = rect.h;
|
|
}
|
|
|
|
rect.startX = document.getElementById("refx").value;
|
|
rect.startY = document.getElementById("refy").value;
|
|
draw();
|
|
}
|
|
}
|
|
|
|
|
|
init();
|
|
</script>
|
|
|
|
</div>
|
|
</body>
|
|
</html> |