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