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 14:07:00 +03:00
Code Issues Packages Projects Releases Wiki Activity

nightly

Browse Source
This commit is contained in:
jomjol
2020-08-23 20:15:11 +02:00
parent 34dde05741
commit 78e3256493
6 changed files with 1473 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

419
sd-card/html/alignment.html Normal file
View File

@@ -0,0 +1,419 @@
<!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>Define Alignment Structure in Reference Image</h3>
<div style="padding-left: 30px">
<table>
<tr>
<td>
<canvas id="canvas" crossorigin></canvas>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<tr>
<td>
<select id="index" name="reference" onchange="ChangeSelection()">
<option value="0" selected>Reference 0</option>
<option value="1" >Reference 1</option>
</select>
Storage path/name: <input type="text" name="name" id="name">
</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="valuemanualchanged()">
</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>
<tr>
<td>
<input type="button" value="Update Reference" onclick="CutOutReference()">
</td>
</tr>
</table>
</td>
</tr>
<table>
<tr>
<td>
Original Image
</td>
<td>
Reference Image
</td>
</tr>
<tr>
<td>
<img id="img_ref_org" src = "/img_tmp/ref_zw_org.jpg">
</td>
<td>
<img id="img_ref" src = "/img_tmp/ref_zw.jpg">
</td>
<td>
<input type="button" value="Enhance Contrast" onclick="EnhanceContrast()">
</td>
</tr>
</table>
<tr>
<td>
<input type="submit" name="saveroi" onclick="SaveToConfig()" value="Save to Config.ini">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
<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,
refInfo,
enhanceCon = false;
basepath = "http://192.168.178.26";
basepath = "";
function ChangeSelection(){
aktindex = parseInt(document.getElementById("index").value);
UpdateReference();
}
function SaveToConfig(){
refInfo["name"] = document.getElementById("name").value;
refInfo["x"] = document.getElementById("refx").value;
refInfo["y"] = document.getElementById("refy").value;
refInfo["dx"] = document.getElementById("refdx").value;
refInfo["dy"] = document.getElementById("refdy").value;
UpdateConfig(refInfo, aktindex, enhanceCon, basepath);
// location.reload();
}
function EnhanceContrast(){
refInfo["name"] = document.getElementById("name").value;
refInfo["x"] = document.getElementById("refx").value;
refInfo["y"] = document.getElementById("refy").value;
refInfo["dx"] = document.getElementById("refdx").value;
refInfo["dy"] = document.getElementById("refdy").value;
enhanceCon = true;
MakeContrastImageZW(refInfo, enhanceCon, basepath);
var url = basepath + "/fileserver" + "/img_tmp/ref_zw.jpg?" + Date.now();
document.getElementById("img_ref").src = url;
var url = basepath + "/fileserver" + "/img_tmp/ref_zw_org.jpg?" + Date.now();
document.getElementById("img_ref_org").src = url;
}
function UpdateReference(){
refInfo = GetCoordinates(aktindex, basepath);
document.getElementById("img_ref").onload = function () {
document.getElementById("refdx").value = this.width;
document.getElementById("refdy").value = this.height;
refInfo["dx"] = this.width;
refInfo["dy"] = this.height;
rect.w = document.getElementById("refdx").value;
rect.h = document.getElementById("refdy").value;
draw();
}
var url = basepath + "/fileserver" + "/img_tmp/ref_zw_org.jpg?" + Date.now();
document.getElementById("img_ref_org").src = url;
var url = basepath + "/fileserver" + "/img_tmp/ref_zw.jpg?" + Date.now();
document.getElementById("img_ref").src = url;
document.getElementById("name").value = refInfo["name"];
document.getElementById("refx").value = refInfo["x"];
document.getElementById("refy").value = refInfo["y"];
rect.startX = document.getElementById("refx").value;
rect.startY = document.getElementById("refy").value;
draw();
}
function ParseIni(_basepath) {
loadConfigJS(_basepath);
ParseReference();
UpdateReference();
}
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 \"reference.jpg\"?")) {
var xhttp = new XMLHttpRequest();
/* first delete the old firmware */
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4) {
if (xhttp.status == 200) {
/* keine Reaktion, damit sich das Dokument nicht ändert */
} else if (xhttp.status == 0) {
alert("Server closed the connection abruptly!");
location.reload()
} else {
alert(xhttp.status + " Error!\n" + xhttp.responseText);
location.reload()
}
}
};
xhttp.open("POST", basepath + "/delete/config/reference.jpg", false);
xhttp.send();
/* ----------------------------- */
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4) {
if (xhttp.status == 200) {
alert("Update \"reference.jpg\" successfull!\n\nTo make it active you need to reboot.")
document.reload();
} else if (xhttp.status == 0) {
alert("Server closed the connection abruptly!");
location.reload()
} else {
alert(xhttp.status + " Error!\n" + xhttp.responseText);
location.reload()
}
}
};
upload_path = basepath + "/upload/config/reference.jpg";
var canvas = document.getElementById("canvas");
var JPEG_QUALITY=0.5;
var dataUrl = canvas.toDataURL('image/jpeg', JPEG_QUALITY);
var rtn = dataURLtoBlob(dataUrl);
xhttp.open("POST", upload_path, true);
xhttp.send(rtn);
}
}
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() {
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 CutOutReference(){
refInfo["x"] = document.getElementById("refx").value;
refInfo["y"] = document.getElementById("refy").value;
refInfo["dx"] = document.getElementById("refdx").value;
refInfo["dy"] = document.getElementById("refdy").value;
MakeRefZW(refInfo, basepath);
var url = basepath + "/fileserver" + "/img_tmp/ref_zw.jpg?" + Date.now();
document.getElementById("img_ref_org").src = url;
var url = basepath + "/fileserver" + "/img_tmp/ref_zw_org.jpg?" + Date.now();
document.getElementById("img_ref").src = url;
draw();
}
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 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);
}
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)
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;
rect.startX = document.getElementById("refx").value;
rect.startY = document.getElementById("refy").value;
draw();
}
}
init();
</script>
</div>
</body>
</html>

418
sd-card/html/alignment_define.html Normal file
View File

@@ -0,0 +1,418 @@
<!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>Define Alignment Structure in Reference Image</h3>
<div style="padding-left: 30px">
<table>
<tr>
<td>
<canvas id="canvas" crossorigin></canvas>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<tr>
<td>
<select id="index" name="reference" onchange="ChangeSelection()">
<option value="0" selected>Reference 0</option>
<option value="1" >Reference 1</option>
</select>
Storage path/name: <input type="text" name="name" id="name">
</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="valuemanualchanged()">
</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>
<tr>
<td>
<input type="button" value="Update Reference" onclick="CutOutReference()">
</td>
</tr>
</table>
</td>
</tr>
<table>
<tr>
<td>
Original Image
</td>
<td>
Reference Image
</td>
</tr>
<tr>
<td>
<img id="img_ref_org" src = "/img_tmp/ref_zw_org.jpg">
</td>
<td>
<img id="img_ref" src = "/img_tmp/ref_zw.jpg">
</td>
<td>
<input type="button" value="Enhance Contrast" onclick="EnhanceContrast()">
</td>
</tr>
</table>
<tr>
<td>
<input type="submit" name="saveroi" onclick="SaveToConfig()" value="Save to Config.ini">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
<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,
refInfo,
enhanceCon = false;
basepath = "http://192.168.178.26";
function ChangeSelection(){
aktindex = parseInt(document.getElementById("index").value);
UpdateReference();
}
function SaveToConfig(){
refInfo["name"] = document.getElementById("name").value;
refInfo["x"] = document.getElementById("refx").value;
refInfo["y"] = document.getElementById("refy").value;
refInfo["dx"] = document.getElementById("refdx").value;
refInfo["dy"] = document.getElementById("refdy").value;
UpdateConfig(refInfo, aktindex, enhanceCon, basepath);
// location.reload();
}
function EnhanceContrast(){
refInfo["name"] = document.getElementById("name").value;
refInfo["x"] = document.getElementById("refx").value;
refInfo["y"] = document.getElementById("refy").value;
refInfo["dx"] = document.getElementById("refdx").value;
refInfo["dy"] = document.getElementById("refdy").value;
enhanceCon = true;
MakeContrastImageZW(refInfo, enhanceCon, basepath);
var url = basepath + "/fileserver" + "/img_tmp/ref_zw.jpg?" + Date.now();
document.getElementById("img_ref").src = url;
var url = basepath + "/fileserver" + "/img_tmp/ref_zw_org.jpg?" + Date.now();
document.getElementById("img_ref_org").src = url;
}
function UpdateReference(){
refInfo = GetCoordinates(aktindex, basepath);
document.getElementById("img_ref").onload = function () {
document.getElementById("refdx").value = this.width;
document.getElementById("refdy").value = this.height;
refInfo["dx"] = this.width;
refInfo["dy"] = this.height;
rect.w = document.getElementById("refdx").value;
rect.h = document.getElementById("refdy").value;
draw();
}
var url = basepath + "/fileserver" + "/img_tmp/ref_zw_org.jpg?" + Date.now();
document.getElementById("img_ref_org").src = url;
var url = basepath + "/fileserver" + "/img_tmp/ref_zw.jpg?" + Date.now();
document.getElementById("img_ref").src = url;
document.getElementById("name").value = refInfo["name"];
document.getElementById("refx").value = refInfo["x"];
document.getElementById("refy").value = refInfo["y"];
rect.startX = document.getElementById("refx").value;
rect.startY = document.getElementById("refy").value;
draw();
}
function ParseIni(_basepath) {
loadConfigJS(_basepath);
ParseReference();
UpdateReference();
}
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 \"reference.jpg\"?")) {
var xhttp = new XMLHttpRequest();
/* first delete the old firmware */
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4) {
if (xhttp.status == 200) {
/* keine Reaktion, damit sich das Dokument nicht ändert */
} else if (xhttp.status == 0) {
alert("Server closed the connection abruptly!");
location.reload()
} else {
alert(xhttp.status + " Error!\n" + xhttp.responseText);
location.reload()
}
}
};
xhttp.open("POST", basepath + "/delete/config/reference.jpg", false);
xhttp.send();
/* ----------------------------- */
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4) {
if (xhttp.status == 200) {
alert("Update \"reference.jpg\" successfull!\n\nTo make it active you need to reboot.")
document.reload();
} else if (xhttp.status == 0) {
alert("Server closed the connection abruptly!");
location.reload()
} else {
alert(xhttp.status + " Error!\n" + xhttp.responseText);
location.reload()
}
}
};
upload_path = basepath + "/upload/config/reference.jpg";
var canvas = document.getElementById("canvas");
var JPEG_QUALITY=0.5;
var dataUrl = canvas.toDataURL('image/jpeg', JPEG_QUALITY);
var rtn = dataURLtoBlob(dataUrl);
xhttp.open("POST", upload_path, true);
xhttp.send(rtn);
}
}
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() {
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 CutOutReference(){
refInfo["x"] = document.getElementById("refx").value;
refInfo["y"] = document.getElementById("refy").value;
refInfo["dx"] = document.getElementById("refdx").value;
refInfo["dy"] = document.getElementById("refdy").value;
MakeRefZW(refInfo, basepath);
var url = basepath + "/fileserver" + "/img_tmp/ref_zw.jpg?" + Date.now();
document.getElementById("img_ref_org").src = url;
var url = basepath + "/fileserver" + "/img_tmp/ref_zw_org.jpg?" + Date.now();
document.getElementById("img_ref").src = url;
draw();
}
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 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);
}
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)
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;
rect.startX = document.getElementById("refx").value;
rect.startY = document.getElementById("refy").value;
draw();
}
}
init();
</script>
</div>
</body>
</html>

78
sd-card/html/edit_config_neu.html Normal file
View File

@@ -0,0 +1,78 @@
<html>
<body>
<table>
<tr><td>Config.ini:</td></tr>
<tr>
<td colspan="3">
<textarea id="inputTextToSave" cols="80" rows="25"></textarea>
</td>
</tr>
<tr>
<td><button onclick="saveTextAsFile()">Update Config.ini</button></td>
</tr>
</table>
<script type="text/javascript" src="./readconfig.js"></script>
<script type="text/javascript">
function LoadConfigNeu() {
loadConfigJS();
document.getElementById("inputTextToSave").value = getConfig();
}
function saveTextAsFile()
{
if (confirm("Are you sure you want to update \"config.ini\"?")) {
var xhttp = new XMLHttpRequest();
/* first delete the old firmware */
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4) {
if (xhttp.status == 200) {
/* keine Reaktion, damit sich das Dokument nicht ändert */
} else if (xhttp.status == 0) {
alert("Server closed the connection abruptly!");
location.reload()
} else {
alert(xhttp.status + " Error!\n" + xhttp.responseText);
location.reload()
}
}
};
xhttp.open("POST", "/delete/config/config.ini", false);
xhttp.send();
/* ----------------------------- */
var textToSave = document.getElementById("inputTextToSave").value;
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4) {
if (xhttp.status == 200) {
alert("Update \"config.ini\" successfull!\n\nTo make it active you need to reboot.")
document.reload();
} else if (xhttp.status == 0) {
alert("Server closed the connection abruptly!");
location.reload()
} else {
alert(xhttp.status + " Error!\n" + xhttp.responseText);
location.reload()
}
}
};
upload_path = "/upload/config/config.ini";
xhttp.open("POST", upload_path, true);
xhttp.send(textToSave);
}
}
LoadConfigNeu();
</script>
</body>
</html>

249
sd-card/html/image_ref.html Normal file
View File

@@ -0,0 +1,249 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Make refernce</title>
<link rel="stylesheet" type="text/css" href="/static/configurator/site.css"/>
</head>
<body onScroll="document.cookie='ypos=' + window.pageYOffset">
<div class="body-content">
<div id="createrefernce">
<script language="JavaScript">
function createscroll(){
var zw = document.cookie
var n1 = zw.indexOf('ypos=')
var n2 = zw.indexOf(";", n1)
var a = zw.substr(n1+5, n2-n1-5)
//window.alert(zw + " -- "+ a + " -- " + + n1 + " -- " + n2)
window.scrollTo(0, a)
}
</script>
<div style="padding-left: 30px">
<h3>Create Reference out of Raw Image</h3>
<div style="padding-left: 30px">
<form method="post">
<input type="hidden" name="csrfmiddlewaretoken" value="lxUFaiYFqzjTUDz63phwtZsErDkz9WjIHPsw56IM1nOYkkvljkwbA2TuKvP97GJy">
<table>
<tr>
<td>
<table>
<tr>
<td>
<h4>Pre-rotate Angle</h4>
</td>
<td>
<input type="number" id="prerotateangle" name="prerotateangle" value=179.0 min="-360" max="360">°
<input type="button" value="Rotate" onclick="drawRotated()">
</td>
</tr>
<tr>
<td>
<h4>Fine Alignment</h4>
</td>
<td>
<input type="number" id="finerotate" name="finerotate" value=0.0 min="-1" max="1" step="0.2" onchange="drawRotated()">°
</td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<tr>
<td>
<canvas id="canvas"></canvas>
</td>
<td>
<input type="hidden" name="degree" id="degree" value="0">
<input type="button" value="Save Reference Image" onclick="SaveReference()">
</td>
</tr>
</table>
</form>
</div>
</div>
<script language="JavaScript">
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
imageObj = new Image();
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 \"reference2.jpg\"?")) {
var xhttp = new XMLHttpRequest();
/* first delete the old firmware */
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4) {
if (xhttp.status == 200) {
/* keine Reaktion, damit sich das Dokument nicht ändert */
} else if (xhttp.status == 0) {
alert("Server closed the connection abruptly!");
location.reload()
} else {
alert(xhttp.status + " Error!\n" + xhttp.responseText);
location.reload()
}
}
};
xhttp.open("POST", "http://192.168.178.22/delete/config/reference2.jpg", false);
xhttp.send();
/* ----------------------------- */
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4) {
if (xhttp.status == 200) {
alert("Update \"reference2.jpg\" successfull!\n\nTo make it active you need to reboot.")
document.reload();
} else if (xhttp.status == 0) {
alert("Server closed the connection abruptly!");
location.reload()
} else {
alert(xhttp.status + " Error!\n" + xhttp.responseText);
location.reload()
}
}
};
upload_path = "http://192.168.178.22/upload/config/reference2.jpg";
var canvas = document.getElementById("canvas");
var JPEG_QUALITY=0.5;
var dataUrl = canvas.toDataURL('image/jpeg', JPEG_QUALITY);
var rtn = dataURLtoBlob(dataUrl);
xhttp.open("POST", upload_path, true);
xhttp.send(rtn);
}
}
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();
createscroll();
};
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() {
// alert("load image");
loadCanvas("http://192.168.178.22/fileserver/img_tmp/raw.jpg");
drawRotated();
}
function drawRotated(){
finerot= parseFloat(document.getElementById("finerotate").value);
prerot = parseFloat(document.getElementById("prerotateangle").value);
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;
document.getElementById("degree").value = degrees;
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.clearRect(0,0,imageObj.width,imageObj.height);
context.save();
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();
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();
}
init();
</script>
<hr/>
</div>
</body onScroll="document.cookie='ypos=' + window.pageYOffset">
</html>

6
sd-card/html/prevalue_set.html
View File

@@ -25,7 +25,7 @@
</tr> </tr>
<tr> <tr>
Result:<p> Result:<p>
<iframe name="maincontent" id ="maincontent" src="" title="fileserver" allowfullscreen></iframe> <iframe name="result" id ="result" src="" title="fileserver" allowfullscreen></iframe>
</tr> </tr>
</table> </table>
@@ -35,8 +35,8 @@ function setprevalue() {
var inputVal = document.getElementById("myInput").value; var inputVal = document.getElementById("myInput").value;
inputVal = inputVal.replace(",", "."); inputVal = inputVal.replace(",", ".");
_value = "/setPreValue.html?value="+inputVal; _value = "/setPreValue.html?value="+inputVal;
document.getElementById('maincontent').src = _value; document.getElementById('result').src = _value;
location.reload(); // location.reload();
} }
</script> </script>

306
sd-card/html/readconfig.js Normal file
View File

@@ -0,0 +1,306 @@
var config_gesamt;
var config_split;
var ref = new Array(2);
function MakeRefZW(zw, _basepath){
url = _basepath + "/editflow.html?task=cutref&in=/config/reference.jpg&out=/img_tmp/ref_zw_org.jpg&x=" + zw["x"] + "&y=" + zw["y"] + "&dx=" + zw["dx"] + "&dy=" + zw["dy"];
var xhttp = new XMLHttpRequest();
try {
xhttp.open("GET", url, false);
xhttp.send(); }
catch (error)
{
// alert("Deleting Config.ini failed");
}
FileCopyOnServer("/img_tmp/ref_zw_org.jpg", "/img_tmp/ref_zw.jpg", _basepath);
}
function GetCoordinates(index, _basepath){
FileCopyOnServer(ref[index]["name"], "/img_tmp/ref_zw.jpg", _basepath);
FileDeleteOnServer("/img_tmp/ref_zw_org.jpg", _basepath);
var namezw = ref[index]["name"].replace(".jpg", "_org.jpg");
FileCopyOnServer(namezw, "/img_tmp/ref_zw_org.jpg", _basepath);
return ref[index];
}
function ParseReference() {
config_split = config_gesamt.split("\n");
var i = 0;
for (var i in config_split) {
if (config_split[i].trim() == "[Alignment]")
break;
}
if (i >= config_split.length){
return;
}
var akt_ref = 0;
++i;
while ((akt_ref < 2) && (i < config_split.length) && (config_split[i][0] != "[")) {
var linesplit = ZerlegeZeile(config_split[i]);
if (linesplit.length == 3)
{
ref[akt_ref] = new Object();
ref[akt_ref]["pos_ref"] = i;
ref[akt_ref]["name"] = linesplit[0];
ref[akt_ref]["x"] = linesplit[1];
ref[akt_ref]["y"] = linesplit[2];
akt_ref++;
}
++i;
}
}
function UpdateConfig(zw, _index, _enhance, _basepath){
var zeile = zw["name"] + " " + zw["x"] + ", " + zw["y"];
var _pos = ref[_index]["pos_ref"];
config_split[_pos] = zeile;
FileDeleteOnServer("/config/config.ini", _basepath);
var config_gesamt = "";
for (var i = 0; i < config_split.length; ++i)
{
config_gesamt = config_gesamt + config_split[i] + "\n";
}
var rtn = new Blob([config_gesamt], {type: 'mime'});
FileSendContent(config_gesamt, "/config/config.ini", _basepath);
var namezw = zw["name"];
FileCopyOnServer("/img_tmp/ref_zw.jpg", namezw, _basepath);
var namezw = zw["name"].replace(".jpg", "_org.jpg");
FileCopyOnServer("/img_tmp/ref_zw_org.jpg", namezw, _basepath);
}
function MakeContrastImageZW(zw, _enhance, _basepath){
url = _basepath + "/editflow.html?task=cutref&in=/config/reference.jpg&out=/img_tmp/ref_zw.jpg" + "&x=" + zw["x"] + "&y=" + zw["y"] + "&dx=" + zw["dx"] + "&dy=" + zw["dy"];
if (_enhance == true){
url = url + "&enhance=true";
}
var xhttp = new XMLHttpRequest();
try {
xhttp.open("GET", url, false);
xhttp.send(); }
catch (error)
{
// alert("Deleting Config.ini failed");
}
}
function createReader(file) {
var image = new Image();
reader.onload = function(evt) {
var image = new Image();
image.onload = function(evt) {
var width = this.width;
var height = this.height;
alert (width); // will produce something like 198
};
image.src = evt.target.result;
};
reader.readAsDataURL(file);
}
function GetReferenceSize(name){
img = new Image();
var xhttp = new XMLHttpRequest();
url = "http://192.168.178.22/fileserver" + name;
xhttp.open("GET", url, false);
xhttp.send();
var response = xhttp.responseText;
var binary = ""
for (var responseText = xhttp.responseText, responseTextLen = responseText.length, binary = "", i = 0; i < responseTextLen; ++i) {
binary += String.fromCharCode(responseText.charCodeAt(i) & 255)
}
img.src = 'data:image/jpeg;base64,'+ window.btoa(binary);
return [img.width, img.height];
}
function ZerlegeZeile(input)
{
var Output = Array(0);
delimiter = " =,";
input = trim(input, delimiter);
var pos = findDelimiterPos(input, delimiter);
var token;
while (pos > -1) {
token = input.substr(0, pos);
token = trim(token, delimiter);
Output.push(token);
input = input.substr(pos+1, input.length);
input = trim(input, delimiter);
pos = findDelimiterPos(input, delimiter);
}
Output.push(input);
return Output;
}
function findDelimiterPos(input, delimiter)
{
var pos = -1;
var zw;
var akt_del;
for (var anz = 0; anz < delimiter.length; ++anz)
{
akt_del = delimiter[anz];
zw = input.indexOf(akt_del);
if (zw > -1)
{
if (pos > -1)
{
if (zw < pos)
pos = zw;
}
else
pos = zw;
}
}
return pos;
}
function trim(istring, adddelimiter)
{
while ((istring.length > 0) && (adddelimiter.indexOf(istring[0]) >= 0)){
istring = istring.substr(1, istring.length-1);
}
while ((istring.length > 0) && (adddelimiter.indexOf(istring[istring.length-1]) >= 0)){
istring = istring.substr(0, istring.length-1);
}
return istring;
}
function loadConfigJS(_basepath) {
var xhttp = new XMLHttpRequest();
try {
url = _basepath + '/fileserver/config/config.ini';
xhttp.open("GET", url, false);
xhttp.send();
config_gesamt = xhttp.responseText;
}
catch (error)
{
// alert("Deleting Config.ini failed");
}
}
function getConfig() {
return config_txt;
}
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 FileCopyOnServer(_source, _target, _basepath = ""){
url = _basepath + "/editflow.html?task=copy&in=" + _source + "&out=" + _target;
var xhttp = new XMLHttpRequest();
try {
xhttp.open("GET", url, false);
xhttp.send(); }
catch (error)
{
// alert("Deleting Config.ini failed");
}
}
function FileDeleteOnServer(_filename, _basepath = ""){
var xhttp = new XMLHttpRequest();
var okay = false;
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4) {
if (xhttp.status == 200) {
okay = true;
} else if (xhttp.status == 0) {
// alert("Server closed the connection on delete abruptly!");
location.reload()
} else {
// alert(xhttp.status + " Error!\n" + xhttp.responseText);
location.reload()
}
}
};
try {
var url = _basepath + "/delete" + _filename;
xhttp.open("POST", url, false);
xhttp.send();
}
catch (error)
{
// alert("Deleting Config.ini failed");
}
return okay;
}
function FileSendContent(_content, _filename, _basepath = ""){
var xhttp = new XMLHttpRequest();
var okay = false;
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4) {
if (xhttp.status == 200) {
okay = true;
} else if (xhttp.status == 0) {
alert("Server closed the connection abruptly!");
} else {
alert(xhttp.status + " Error!\n" + xhttp.responseText);
}
}
};
try {
upload_path = _basepath + "/upload" + _filename;
xhttp.open("POST", upload_path, false);
xhttp.send(_content);
}
catch (error)
{
// alert("Deleting Config.ini failed");
}
return okay;
}
function SaveReferenceImage(_id_canvas, _filename, _doDelete, _basepath = ""){
if (_doDelete){
FileDeleteOnServer(_filename, _basepath);
}
var canvas = document.getElementById(_id_canvas);
var JPEG_QUALITY=0.8;
var dataUrl = canvas.toDataURL('image/jpeg', JPEG_QUALITY);
var rtn = dataURLtoBlob(dataUrl);
if (!FileSendContent(rtn, _filename, _basepath)){
alert("Error on saving reference image (" + _filename + ")!\nPlease retry.");
location.reload();
};
}