Mirror/AI-on-the-edge-device
1
0
Fork 0
mirror of https://github.com/jomjol/AI-on-the-edge-device.git synced 2025-12-11 22:16:56 +03:00
Code Issues Packages Projects Releases Wiki Activity

Update edit_alignment.html

Browse Source
This commit is contained in:
michael
2024-09-26 14:41:25 +02:00
committed by GitHub
parent ebcec97d1d
commit 2b7da5b44e
1 changed files with 503 additions and 514 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
sd-card/html/edit_alignment.html
View File

@@ -1,8 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" xml:lang="en"> <html lang="en" xml:lang="en">
<head> <head>
<title>Alignment markers</title>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Alignment markers</title>
<style> <style>
h1 {font-size: 2em;} h1 {font-size: 2em;}
@@ -79,9 +80,13 @@
-ms-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%);
} }
</style> </style>
<link href="firework.css?v=$COMMIT_HASH" rel="stylesheet"> <link href="firework.css?v=$COMMIT_HASH" rel="stylesheet">
<script type="text/javascript" src="common.js?v=$COMMIT_HASH"></script>
<script type="text/javascript" src="jquery-3.6.0.min.js?v=$COMMIT_HASH"></script> <script type="text/javascript" src="jquery-3.6.0.min.js?v=$COMMIT_HASH"></script>
<script type="text/javascript" src="firework.js?v=$COMMIT_HASH"></script> <script type="text/javascript" src="firework.js?v=$COMMIT_HASH"></script>
</head> </head>
<body style="font-family: arial; padding: 0px 10px;"> <body style="font-family: arial; padding: 0px 10px;">
@@ -164,12 +169,11 @@
</tr> </tr>
</table> </table>
<script type="text/javascript" src="common.js?v=$COMMIT_HASH"></script> <script type="text/javascript" src="readconfigparam.js?v=$COMMIT_HASH"></script>
<script type="text/javascript" src="readconfigcommon.js?v=$COMMIT_HASH"></script> <script type="text/javascript" src="readconfigcommon.js?v=$COMMIT_HASH"></script>
<script type="text/javascript" src="readconfigparam.js?v=$COMMIT_HASH"></script>
<script language="JavaScript"> <script type="text/javascript">
var canvas = document.getElementById('canvas'), var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'), ctx = canvas.getContext('2d'),
imageObj = new Image(), imageObj = new Image(),
rect = {}, rect = {},
@@ -183,7 +187,7 @@ var canvas = document.getElementById('canvas'),
cofcat, cofcat,
param; param;
function doReboot() { function doReboot() {
if (confirm("Are you sure you want to reboot? Did you save your changes?")) { if (confirm("Are you sure you want to reboot? Did you save your changes?")) {
var stringota = domainname + "/reboot"; var stringota = domainname + "/reboot";
window.location = stringota; window.location = stringota;
@@ -191,9 +195,9 @@ function doReboot() {
window.location.assign(stringota); window.location.assign(stringota);
window.location.replace(stringota); window.location.replace(stringota);
} }
} }
function ChangeSelection(){ function ChangeSelection(){
aktindex = parseInt(document.getElementById("index").value); aktindex = parseInt(document.getElementById("index").value);
if (aktindex == 0 && neueref1 == 1) { if (aktindex == 0 && neueref1 == 1) {
@@ -202,13 +206,12 @@ function ChangeSelection(){
else if (aktindex == 1 && neueref2 == 1) { else if (aktindex == 1 && neueref2 == 1) {
UpdateReference(); UpdateReference();
} }
else else {
{
LoadReference(); LoadReference();
} }
} }
function SaveToConfig() { function SaveToConfig() {
document.getElementById("overlay").style.display = "block"; document.getElementById("overlay").style.display = "block";
document.getElementById("overlaytext").innerHTML = "Save Alignment Marker..."; document.getElementById("overlaytext").innerHTML = "Save Alignment Marker...";
@@ -256,9 +259,9 @@ function SaveToConfig() {
else { else {
document.getElementById("overlay").style.display = "none"; document.getElementById("overlay").style.display = "none";
} }
} }
function EnhanceContrast() { function EnhanceContrast() {
document.getElementById("overlay").style.display = "block"; document.getElementById("overlay").style.display = "block";
document.getElementById("overlaytext").innerHTML = "Enhancing Image Contrast..."; document.getElementById("overlaytext").innerHTML = "Enhancing Image Contrast...";
@@ -319,9 +322,9 @@ function EnhanceContrast() {
// Delay so the overlay gets shown // Delay so the overlay gets shown
task(); task();
}, 1); }, 1);
} }
function UpdateReference(){ function UpdateReference(){
document.getElementById("img_ref").onload = function () { document.getElementById("img_ref").onload = function () {
document.getElementById("refdx").value = this.width; document.getElementById("refdx").value = this.width;
document.getElementById("refdy").value = this.height; document.getElementById("refdy").value = this.height;
@@ -346,23 +349,9 @@ function UpdateReference(){
rect.startX = document.getElementById("refx").value; rect.startX = document.getElementById("refx").value;
rect.startY = document.getElementById("refy").value; rect.startY = document.getElementById("refy").value;
draw(); draw();
}
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
} }
return new Blob([u8arr], {type:mime}); function loadCanvas(dataURL) {
}
function loadCanvas(dataURL) {
var canvas = document.getElementById('canvas'); var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d'); var context = canvas.getContext('2d');
@@ -373,9 +362,9 @@ function loadCanvas(dataURL) {
}; };
imageObj.src = dataURL; imageObj.src = dataURL;
} }
function getCoords(elem) { // crossbrowser version function getCoords(elem) { // crossbrowser version
var box = elem.getBoundingClientRect(); var box = elem.getBoundingClientRect();
var body = document.body; var body = document.body;
var docEl = document.documentElement; var docEl = document.documentElement;
@@ -386,19 +375,19 @@ function getCoords(elem) { // crossbrowser version
var top = box.top + scrollTop - clientTop; var top = box.top + scrollTop - clientTop;
var left = box.left + scrollLeft - clientLeft; var left = box.left + scrollLeft - clientLeft;
return { top: Math.round(top), left: Math.round(left) }; return { top: Math.round(top), left: Math.round(left) };
} }
/* hash #description open the details part of the page */ /* hash #description open the details part of the page */
function openDescription() { function openDescription() {
if(window.location.hash) { if(window.location.hash) {
var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
if(hash == 'description') { if(hash == 'description') {
document.getElementById("desc_details").open = false; document.getElementById("desc_details").open = false;
} }
} }
} }
function LoadReference(){ function LoadReference(){
document.getElementById("img_ref").onload = function () { document.getElementById("img_ref").onload = function () {
document.getElementById("refdx").value = this.width; document.getElementById("refdx").value = this.width;
document.getElementById("refdy").value = this.height; document.getElementById("refdy").value = this.height;
@@ -423,9 +412,9 @@ function LoadReference(){
rect.startX = document.getElementById("refx").value; rect.startX = document.getElementById("refx").value;
rect.startY = document.getElementById("refy").value; rect.startY = document.getElementById("refy").value;
draw(); draw();
} }
function init() { function init() {
openDescription(); openDescription();
document.getElementById("updatemarker").disabled = false; document.getElementById("updatemarker").disabled = false;
@@ -454,9 +443,9 @@ function init() {
LoadReference(); LoadReference();
drawImage(); drawImage();
draw(); draw();
} }
function drawImage(){ function drawImage(){
var canvas = document.getElementById('canvas'); var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d'); var context = canvas.getContext('2d');
@@ -464,9 +453,9 @@ function drawImage(){
context.save(); context.save();
context.drawImage(imageObj, 0, 0); context.drawImage(imageObj, 0, 0);
// context.restore(); // context.restore();
} }
function CutOutReference(){ function CutOutReference(){
document.getElementById("overlay").style.display = "block"; document.getElementById("overlay").style.display = "block";
document.getElementById("overlaytext").innerHTML = "Updating marker..."; document.getElementById("overlaytext").innerHTML = "Updating marker...";
@@ -534,9 +523,9 @@ function CutOutReference(){
// Delay so the overlay gets shown // Delay so the overlay gets shown
task(); task();
}, 1); }, 1);
} }
function drawGrid(){ function drawGrid(){
var canvas = document.getElementById('canvas'); var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d'); var ctx = canvas.getContext('2d');
var w = canvas.width; var w = canvas.width;
@@ -562,9 +551,9 @@ function drawGrid(){
ctx.stroke(); ctx.stroke();
} }
// ctx.restore(); // ctx.restore();
} }
function draw() { function draw() {
var canvas = document.getElementById('canvas'); var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d'); var context = canvas.getContext('2d');
context.drawImage(imageObj, 0, 0); context.drawImage(imageObj, 0, 0);
@@ -576,18 +565,18 @@ function draw() {
var dx = parseInt(rect.w) + parseInt(lw); var dx = parseInt(rect.w) + parseInt(lw);
var dy = parseInt(rect.h) + parseInt(lw); var dy = parseInt(rect.h) + parseInt(lw);
context.strokeRect(x0, y0, dx, dy); context.strokeRect(x0, y0, dx, dy);
} }
function mouseDown(e) { function mouseDown(e) {
var zw = getCoords(this) var zw = getCoords(this)
rect.startX = e.pageX - zw.left; rect.startX = e.pageX - zw.left;
rect.startY = e.pageY - zw.top; rect.startY = e.pageY - zw.top;
document.getElementById("refx").value = rect.startX; document.getElementById("refx").value = rect.startX;
document.getElementById("refy").value = rect.startY; document.getElementById("refy").value = rect.startY;
drag = true; drag = true;
} }
function EnDisableItem(_status, _name, _optional) { function EnDisableItem(_status, _name, _optional) {
_color = "rgb(122, 122, 122)"; _color = "rgb(122, 122, 122)";
if (_status) { if (_status) {
@@ -600,9 +589,9 @@ function EnDisableItem(_status, _name, _optional) {
} }
document.getElementById(_name).style.color = _color; document.getElementById(_name).style.color = _color;
} }
function mouseUp() { function mouseUp() {
drag = false; drag = false;
if (rect.w < 0) { if (rect.w < 0) {
@@ -619,9 +608,9 @@ function mouseUp() {
document.getElementById("refdy").value = rect.h; document.getElementById("refdy").value = rect.h;
document.getElementById("refx").value = rect.startX; document.getElementById("refx").value = rect.startX;
document.getElementById("refy").value = rect.startY; document.getElementById("refy").value = rect.startY;
} }
function mouseMove(e) { function mouseMove(e) {
if (drag) { if (drag) {
var zw = getCoords(this) var zw = getCoords(this)
rect.w = (e.pageX - zw.left) - rect.startX; rect.w = (e.pageX - zw.left) - rect.startX;
@@ -648,14 +637,14 @@ function mouseMove(e) {
context.lineTo(x, canvas.height); context.lineTo(x, canvas.height);
context.stroke(); context.stroke();
} }
} }
function namechanged() { function namechanged() {
_name = document.getElementById("name").value; _name = document.getElementById("name").value;
refInfo[aktindex]["name"] = _name; refInfo[aktindex]["name"] = _name;
} }
function valuemanualchanged(){ function valuemanualchanged(){
if (!drag) { if (!drag) {
rect.w = document.getElementById("refdx").value; rect.w = document.getElementById("refdx").value;
rect.h = document.getElementById("refdy").value; rect.h = document.getElementById("refdy").value;
@@ -663,9 +652,9 @@ function valuemanualchanged(){
rect.startY = document.getElementById("refy").value; rect.startY = document.getElementById("refy").value;
draw(); draw();
} }
} }
init(); init();
</script> </script>
</body> </body>
</html> </html>