mirror of
https://github.com/jomjol/AI-on-the-edge-device.git
synced 2025-12-06 19:46:54 +03:00
273 lines
9.4 KiB
HTML
273 lines
9.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Make Reference</title>
|
|
<meta charset="utf-8"/>
|
|
|
|
<style>
|
|
h1 {font-size: 2em;}
|
|
h2 {font-size: 1.5em; margin-block-start: 0.0em; margin-block-end: 0.2em;}
|
|
h3 {font-size: 1.2em;}
|
|
p {font-size: 1em;}
|
|
|
|
input[type=number] {
|
|
width: 100px;
|
|
margin-right: 10px;
|
|
padding: 3px 5px;
|
|
display: inline-block;
|
|
border: 1px solid #ccc;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.button {
|
|
padding: 5px 10px;
|
|
width: 210px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
table {
|
|
padding: 5px;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body style="font-family: arial; padding: 0px 10px;">
|
|
<h2>Create Reference out of Raw Image</h2>
|
|
|
|
<table>
|
|
<tr>
|
|
<td><input class="button" type="button" value="Show Actual Reference" onclick="showReference()"></td>
|
|
<td><input class="button" type="button" value="Create New Reference" onclick="loadRawImage()"></td>
|
|
<td><input class="button" type="submit" id="take" onclick="doTake()" value="Take Image"></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding-top: 10px"><label for="mirror">Mirror Image:</label></td>
|
|
<td style="padding-top: 10px"><input type="checkbox" id="mirror" name="mirror" value="1" onchange="drawRotated()"></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="mirror">Pre-rotate Angle:</label></td>
|
|
<td><input type="number" id="prerotateangle" name="prerotateangle" value=0 min="-360" max="360" onchange="drawRotated()">Degrees</td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="mirror">Fine Alignment:</label></td>
|
|
<td><input type="number" id="finerotate" name="finerotate" value=0.0 min="-1" max="1" step="0.2" onchange="drawRotated()">Degrees</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<table>
|
|
<tr>
|
|
<td><canvas id="canvas"></canvas></td>
|
|
</tr>
|
|
<tr>
|
|
<td><input class="button" type="button" id="updatereferenceimage" value="Update Reference Image" onclick="SaveReference()"></td>
|
|
</tr>
|
|
</table>
|
|
|
|
|
|
<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()
|
|
basepath = "http://192.168.178.26";
|
|
isActReference = false;
|
|
|
|
function doTake(){
|
|
var xhttp = new XMLHttpRequest();
|
|
url = basepath + "/editflow.html?task=test_take";
|
|
if (basepath.length > 0){
|
|
url = url + "&host=" + basepath;
|
|
}
|
|
xhttp.open("GET", url, false);
|
|
xhttp.send();
|
|
loadRawImage();
|
|
}
|
|
|
|
function loadRawImage(){
|
|
url = basepath + "/img_tmp/raw.jpg" + "?session=" + Math.floor((Math.random() * 1000000) + 1);
|
|
document.getElementById("finerotate").value = 0;
|
|
document.getElementById("prerotateangle").value = getPreRotate();
|
|
document.getElementById("mirror").checked = getMirror();
|
|
document.getElementById("finerotate").disabled = false;
|
|
document.getElementById("prerotateangle").disabled = false;
|
|
document.getElementById("updatereferenceimage").disabled = false;
|
|
document.getElementById("take").disabled = false;
|
|
document.getElementById("mirror").disabled = false;
|
|
|
|
// document.getElementById("ButtonRotate").disabled = false;
|
|
isActReference = false;
|
|
loadCanvas(url);
|
|
drawRotated();
|
|
}
|
|
|
|
function showReference(){
|
|
url = basepath + "/fileserver/config/reference.jpg" + "?session=" + Math.floor((Math.random() * 1000000) + 1);;
|
|
document.getElementById("finerotate").value = 0;
|
|
document.getElementById("prerotateangle").value = 0;
|
|
document.getElementById("finerotate").disabled = true;
|
|
document.getElementById("prerotateangle").disabled = true;
|
|
document.getElementById("updatereferenceimage").disabled = true;
|
|
document.getElementById("take").disabled = true;
|
|
document.getElementById("mirror").disabled = true;
|
|
|
|
isActReference = true;
|
|
loadCanvas(url);
|
|
ParseConfig();
|
|
drawRotated();
|
|
}
|
|
|
|
function dataURLtoBlob(dataurl) {
|
|
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
|
|
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
|
|
while(n--){
|
|
u8arr[n] = bstr.charCodeAt(n);
|
|
}
|
|
return new Blob([u8arr], {type:mime});
|
|
}
|
|
|
|
function SaveReference(){
|
|
if (confirm("Are you sure you want to update the reference image?")) {
|
|
setPreRotate(document.getElementById("prerotateangle").value);
|
|
setMirror(document.getElementById("mirror").checked);
|
|
UpdateConfigFileReferenceChange(basepath);
|
|
var canvas = document.getElementById("canvas");
|
|
drawRotated(false);
|
|
SaveCanvasToImage(canvas, "/config/reference.jpg", true, basepath);
|
|
showReference();
|
|
UpdatePage();
|
|
}
|
|
}
|
|
|
|
function loadCanvas(dataURL) {
|
|
var canvas = document.getElementById('canvas');
|
|
var context = canvas.getContext('2d');
|
|
|
|
imageObj.onload = function() {
|
|
canvas.width = this.width;
|
|
canvas.height = this.height;
|
|
drawRotated();
|
|
};
|
|
|
|
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() {
|
|
canvas.addEventListener('mousemove', mouseMove, false);
|
|
basepath = getbasepath();
|
|
loadConfig(basepath);
|
|
ParseConfig();
|
|
showReference();
|
|
}
|
|
|
|
function drawRotated(_grid = true){
|
|
finerot= parseFloat(document.getElementById("finerotate").value);
|
|
prerot = parseFloat(document.getElementById("prerotateangle").value);
|
|
mirror = document.getElementById("mirror").checked;
|
|
|
|
if (finerot == 1) {
|
|
prerot+=1
|
|
finerot = 0
|
|
}
|
|
if (finerot == -1) {
|
|
prerot-=1
|
|
finerot = 0
|
|
}
|
|
degrees = finerot + prerot;
|
|
document.getElementById("finerotate").value = finerot;
|
|
document.getElementById("prerotateangle").value = prerot;
|
|
|
|
var canvas = document.getElementById('canvas');
|
|
var context = canvas.getContext('2d');
|
|
|
|
context.clearRect(0,0,imageObj.width,imageObj.height);
|
|
context.save();
|
|
|
|
if (mirror) {
|
|
context.scale(-1, 1);
|
|
context.translate(-imageObj.width/2,imageObj.height/2);
|
|
context.rotate(-degrees*Math.PI/180);
|
|
context.drawImage(imageObj, imageObj.width/2,-imageObj.height/2, -imageObj.width, imageObj.height);
|
|
}
|
|
else {
|
|
context.translate(imageObj.width/2,imageObj.height/2);
|
|
context.rotate(degrees*Math.PI/180);
|
|
context.drawImage(imageObj,-imageObj.width/2,-imageObj.height/2);
|
|
}
|
|
|
|
context.restore();
|
|
if (_grid == true && !isActReference){
|
|
drawGrid();
|
|
}
|
|
|
|
}
|
|
|
|
function drawGrid(){
|
|
var canvas = document.getElementById('canvas');
|
|
var ctx = canvas.getContext('2d');
|
|
w = canvas.width;
|
|
h = canvas.height;
|
|
ctx.save();
|
|
ctx.strokeStyle = '#00FF00';
|
|
|
|
for (i = h/2; i < h; i += 100)
|
|
{
|
|
ctx.moveTo(0, i);
|
|
ctx.lineTo(w, i);
|
|
ctx.stroke();
|
|
ctx.moveTo(0, h-i);
|
|
ctx.lineTo(w, h-i);
|
|
ctx.stroke();
|
|
}
|
|
for (i = w/2; i < w; i += 100)
|
|
{
|
|
ctx.moveTo(i, 0);
|
|
ctx.lineTo(i, h);
|
|
ctx.stroke();
|
|
ctx.moveTo(w-i, 0);
|
|
ctx.lineTo(w-i, h);
|
|
ctx.stroke(); }
|
|
ctx.restore();
|
|
}
|
|
|
|
function mouseMove(e) {
|
|
drawRotated();
|
|
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();
|
|
}
|
|
|
|
|
|
init();
|
|
</script>
|
|
|
|
</body>
|
|
</html> |