mirror of
https://github.com/jomjol/AI-on-the-edge-device.git
synced 2025-12-06 11:36:51 +03:00
7b2a80a13d
* enhance pages * . * . * . * . * . * . --------- Co-authored-by: CaCO3 <caco@ruinelli.ch>
781 lines
25 KiB
HTML
781 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link rel="icon" href="favicon.ico?v=$COMMIT_HASH" type="image/x-icon">
|
|
<meta charset="utf-8"/>
|
|
<title>Digit ROI's</title>
|
|
|
|
<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;
|
|
}
|
|
|
|
input[type=text] {
|
|
padding: 3px 5px;
|
|
display: inline-block;
|
|
border: 1px solid #ccc;
|
|
font-size: 16px;
|
|
}
|
|
|
|
select {
|
|
padding: 3px 5px;
|
|
display: inline-block;
|
|
border: 1px solid #ccc;
|
|
font-size: 16px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.button {
|
|
padding: 5px 10px;
|
|
width: 210px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.move {
|
|
padding: 4px 4px;
|
|
width: 100px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
th, td {
|
|
padding: 5px 5px 5px 0px;
|
|
}
|
|
</style>
|
|
<link href="firework.css?v=$COMMIT_HASH" rel="stylesheet">
|
|
<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;">
|
|
|
|
<h2>Digit ROI's</h2>
|
|
<p>On this page you define ROI's for the digits.
|
|
See <a href=https://jomjol.github.io/AI-on-the-edge-device-docs/ROI-Configuration/ target=_blank>https://jomjol.github.io/AI-on-the-edge-device-docs/ROI-Configuration/</a> for explanations.</p>
|
|
|
|
<p><input type="checkbox" id="Category_Digits_enabled" value="1" onclick = 'EnDisableDigits()' checked><label for="Category_Digits_enabled">Enable Digit ROI's</label></p>
|
|
|
|
<p>After saving the digit ROI's, you can define the <a href=edit_analog.html>analog</a> ROI's if your meter has analog counters.<br>
|
|
Only after those steps a reboot is required.</p>
|
|
|
|
|
|
<div id="div1">
|
|
|
|
<table>
|
|
<tr>
|
|
<canvas id="canvas" crossorigin></canvas>
|
|
</tr>
|
|
</table>
|
|
|
|
<p>
|
|
<table>
|
|
<tr>
|
|
<class id="Numbers_text" style="color:black;"><b>Number:</b> </class>
|
|
<select id="Numbers_value1" onchange="numberChanged()">
|
|
<option value="0" selected>default</option>
|
|
<option value="1" >NT</option>
|
|
<option value="2" >HT</option>
|
|
</select>
|
|
<input class="move" type="submit" id="renameNumber" name="renameNumber" onclick="renameNumber()" value="Rename">
|
|
<input class="move" type="submit" id="newNumber" name="newNumber" onclick="newNumber()" value="New">
|
|
<input class="move" type="submit" id="removeNumber" name="removeNumber" onclick="removeNumber()" value="Remove">
|
|
</tr>
|
|
</table>
|
|
</p>
|
|
|
|
<table>
|
|
<tr>
|
|
<td><input class="button" type="submit" id="newROI" name="newROI" onclick="newROI()" value="New ROI (after current)"></td>
|
|
<td><input class="button" type="submit" id="deleteROI" name="deleteROI" onclick="deleteROI()" value="Delete ROI"></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<select id="index" name="index" onchange="ChangeSelection()" tabindex=1>
|
|
<option value="0" selected>ROI 0</option>
|
|
<option value="1" >ROI 1</option>
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<input class="button" type="submit" id="renameROI" name="renameROI" onclick="renameROI()" value="Rename">
|
|
<td>
|
|
<input class="move" type="submit" id="moveNext" onclick="moveNext()" value="move Next">
|
|
<input class="move" type="submit" id="movePrevious" onclick="movePrevious()" value="move Previous">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>x: <input type="number" name="refx" id="refx" step=1 onchange="valuemanualchanged()" tabindex=2></td>
|
|
<td>Δx: <input type="number" name="refdx" id="refdx" step=1 onchange="valuemanualchangeddx()" tabindex=4></td>
|
|
<td><input type="checkbox" id="lockAR" name="lockAR" value="1" onclick="changelockAR()" checked tabindex=6><label for="lockAR"> Lock aspect ratio </label></td>
|
|
</tr>
|
|
<tr>
|
|
<td>y: <input type="number" name="refy" id="refy" step=1 onchange="valuemanualchanged()" tabindex=3></td>
|
|
<td>Δy: <input type="number" name="refdy" id="refdy" step=1 onchange="valuemanualchanged()" tabindex=5></td>
|
|
<td><input type="checkbox" id="lockSizes" name="lockSizes" value="1" onclick="changelockSizes()" checked tabindex=7><label for="lockSizes"> Synchronize y, Δx and Δy between ROIs</label></td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2"></td>
|
|
<td ><input type="checkbox" id="lockSpaceEquidistant" name="lockSpaceEquidistant" value="1" onclick="changeLockSpaceEquidistant()" checked tabindex=9>
|
|
<label for="lockSpaceEquidistant">Keep equidistance of <input type="number" name="space" id="space" step=1 onchange="valuemanualchangedspace()" tabindex=8> between all ROIs</label></td>
|
|
</tr>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
<table>
|
|
<tr>
|
|
<td><input class="button" type="submit" id="saveroi" name="saveroi" onclick="SaveToConfig()" value="Save" tabindex=10>
|
|
<p>Proceed to update the <a href=edit_analog.html>analog</a> ROI's when you are done or <a href=reboot_page.html>reboot</a> if there are no analogue counters.</p></td>
|
|
</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="jquery-3.6.0.min.js?v=$COMMIT_HASH"></script>
|
|
|
|
<script language="JavaScript">
|
|
var canvas = document.getElementById('canvas'),
|
|
imageObj = new Image(),
|
|
rect = {},
|
|
drag = false,
|
|
aktindex = 0,
|
|
ROIInfo,
|
|
cofcat,
|
|
param,
|
|
enhanceCon = false;
|
|
lockAR = true;
|
|
lockSizes = true;
|
|
lockSpaceEquidistant = true;
|
|
space = 3;
|
|
domainname = getDomainname();
|
|
|
|
function doReboot() {
|
|
if (confirm("Are you sure you want to reboot? Did you save your changes?")) {
|
|
var stringota = getDomainname() + "/reboot";
|
|
window.location = stringota;
|
|
window.location.href = stringota;
|
|
window.location.assign(stringota);
|
|
window.location.replace(stringota);
|
|
}
|
|
}
|
|
|
|
function EnDisableDigits() {
|
|
isEnabled = document.getElementById("Category_Digits_enabled").checked;
|
|
|
|
$("#div2").attr("disabled", "disabled").off('click');
|
|
var x1=$("#div2").hasClass("disabledDiv");
|
|
|
|
if (isEnabled)
|
|
{
|
|
$("#div2").removeClass("disabledDiv");
|
|
}
|
|
else
|
|
{
|
|
$("#div2").addClass("disabledDiv");
|
|
}
|
|
|
|
sah1(document.getElementById("div1"), !isEnabled);
|
|
|
|
cofcat["Digits"]["enabled"] = isEnabled;
|
|
|
|
if (isEnabled)
|
|
{
|
|
UpdateROIs();
|
|
}
|
|
}
|
|
|
|
function sah1(el, _target) {
|
|
try {
|
|
el.disabled = _target;
|
|
} catch (E) {}
|
|
if (el.childNodes && el.childNodes.length > 0) {
|
|
for (var x = 0; x < el.childNodes.length; x++) {
|
|
sah1(el.childNodes[x], _target);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
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();
|
|
draw();
|
|
}
|
|
|
|
function newROI() {
|
|
var sel = document.getElementById("Numbers_value1");
|
|
var _number= sel.options[sel.selectedIndex].text;
|
|
sel = document.getElementById("index");
|
|
var _roialt= sel.options[sel.selectedIndex].text;
|
|
|
|
var _roinew = prompt("Please enter name of new ROI", "name");
|
|
|
|
if (ROIInfo.length > 0) {
|
|
if (ROIInfo.length > 1) {
|
|
space = ROIInfo[1].x - parseInt(ROIInfo[0].x) - parseInt(ROIInfo[0].dx);
|
|
}
|
|
erg = CreateROI(_number, "digit", sel.selectedIndex, _roinew, parseInt(ROIInfo[sel.selectedIndex].x) + parseInt(ROIInfo[sel.selectedIndex].dx) + space,
|
|
parseInt(ROIInfo[sel.selectedIndex].y), ROIInfo[aktindex]["dx"], ROIInfo[aktindex]["dy"], 0);
|
|
}
|
|
else
|
|
erg = CreateROI(_number, "digit", sel.selectedIndex, _roinew, 1, 1, 30, 51, 0);
|
|
|
|
if (erg != "")
|
|
firework.launch(erg, 'danger', 30000);
|
|
else {
|
|
UpdateROIs(_roinew);
|
|
// Shift all ROIs on right side to the right
|
|
for (var _nb = sel.selectedIndex + 1; _nb < ROIInfo.length; _nb++) {
|
|
ROIInfo[_nb].x = parseInt(ROIInfo[_nb].x) + parseInt(ROIInfo[_nb].dx) + space;
|
|
}
|
|
draw();
|
|
}
|
|
}
|
|
|
|
function movePrevious(){
|
|
var zw = ROIInfo[aktindex];
|
|
ROIInfo[aktindex] = ROIInfo[aktindex-1];
|
|
ROIInfo[aktindex-1] = zw;
|
|
aktindex--;
|
|
UpdateROIs();
|
|
valuemanualchanged();
|
|
}
|
|
|
|
function moveNext(){
|
|
var zw = ROIInfo[aktindex];
|
|
ROIInfo[aktindex] = ROIInfo[aktindex+1];
|
|
ROIInfo[aktindex+1] = zw;
|
|
aktindex++;
|
|
UpdateROIs();
|
|
valuemanualchanged();
|
|
}
|
|
|
|
function changelockAR(){
|
|
lockAR = document.getElementById("lockAR").checked;
|
|
}
|
|
|
|
function changelockSizes(){
|
|
lockSizes = document.getElementById("lockSizes").checked;
|
|
|
|
if (!lockSizes) {
|
|
firework.launch("For best results it is in most cases advised to keep the y, Δx and Δy identical!", 'warning', 10000);
|
|
}
|
|
}
|
|
|
|
function changeLockSpaceEquidistant(){
|
|
lockSpaceEquidistant = document.getElementById("lockSpaceEquidistant").checked;
|
|
}
|
|
|
|
function ChangeSelection(){
|
|
aktindex = parseInt(document.getElementById("index").value);
|
|
// lockAR = true;
|
|
UpdateROIs();
|
|
}
|
|
|
|
function SaveToConfig(){
|
|
// _zwcat = getConfigCategory();
|
|
cofcat["Digits"]["enabled"] = document.getElementById("Category_Digits_enabled").checked;
|
|
WriteConfigININew();
|
|
SaveConfigToServer(domainname);
|
|
firework.launch('Configuration got updated. It will get applied after the next reboot!', 'success', 5000);
|
|
}
|
|
|
|
|
|
function UpdateROIs(_sel){
|
|
document.getElementById("Category_Digits_enabled").checked = true;
|
|
var sel = document.getElementById("Numbers_value1");
|
|
var _number = sel.options[sel.selectedIndex].text;
|
|
|
|
ROIInfo = getROIInfo("digit", _number);
|
|
// _catzw = getConfigCategory();
|
|
|
|
if (cofcat["Digits"]["enabled"] == false)
|
|
{
|
|
document.getElementById("Category_Digits_enabled").checked = false;
|
|
EnDisableDigits();
|
|
firework.launch('Digital ROIs are disabled - please enable first (Check box top left)', 'warning', 10000);
|
|
return;
|
|
}
|
|
|
|
if (ROIInfo.length == 0){
|
|
firework.launch('There are no ROIs defined. Please first create a new ROI ("New ROIs ...")', 'danger', 10000);
|
|
document.getElementById("newROI").disabled = false;
|
|
document.getElementById("deleteROI").disabled = true;
|
|
document.getElementById("index").disabled = true;
|
|
document.getElementById("saveroi").disabled = true;
|
|
document.getElementById("renameROI").disabled = true;
|
|
document.getElementById("moveNext").disabled = true;
|
|
document.getElementById("movePrevious").disabled = true;
|
|
return;
|
|
}
|
|
else
|
|
{
|
|
document.getElementById("newROI").disabled = false;
|
|
document.getElementById("deleteROI").disabled = false;
|
|
document.getElementById("renameROI").disabled = false;
|
|
document.getElementById("index").disabled = false;
|
|
document.getElementById("saveroi").disabled = false;
|
|
}
|
|
|
|
var _index = document.getElementById("index");
|
|
while (_index.length){
|
|
_index.remove(0);
|
|
}
|
|
|
|
if (aktindex > ROIInfo.length)
|
|
aktindex = ROIInfo.length;
|
|
|
|
for (var i = 0; i < ROIInfo.length; ++i){
|
|
var option = document.createElement("option");
|
|
option.text = ROIInfo[i]["name"];
|
|
option.value = i;
|
|
_index.add(option);
|
|
if (typeof _sel !== 'undefined') {
|
|
if (option.text == _sel)
|
|
aktindex = i;
|
|
}
|
|
}
|
|
_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("lockSizes").checked = lockSizes;
|
|
document.getElementById("lockSpaceEquidistant").checked = lockSpaceEquidistant;
|
|
document.getElementById("space").value = space;
|
|
|
|
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 loadCanvas(dataURL) {
|
|
var canvas = document.getElementById('canvas');
|
|
var context = canvas.getContext('2d');
|
|
|
|
imageObj.onload = function() {
|
|
canvas.width = this.width;
|
|
canvas.height = this.height;
|
|
drawImage();
|
|
draw();
|
|
};
|
|
|
|
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() {
|
|
domainname = getDomainname();
|
|
canvas.addEventListener('mousedown', mouseDown, false);
|
|
canvas.addEventListener('mouseup', mouseUp, false);
|
|
canvas.addEventListener('mousemove', mouseMove, false);
|
|
loadCanvas(domainname + "/fileserver/config/reference.jpg");
|
|
loadConfig(domainname);
|
|
ParseConfig();
|
|
param = getConfigParameters();
|
|
cofcat = getConfigCategory();
|
|
UpdateNUMBERS();
|
|
|
|
space = ROIInfo[1].x - parseInt(ROIInfo[0].x) - parseInt(ROIInfo[0].dx);
|
|
document.getElementById("space").value = space;
|
|
|
|
drawImage();
|
|
draw();
|
|
}
|
|
|
|
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 UpdateNUMBERS(_sel){
|
|
zw = getNUMBERInfo();
|
|
|
|
index = 0;
|
|
|
|
var _index = document.getElementById("Numbers_value1");
|
|
while (_index.length){
|
|
_index.remove(0);
|
|
}
|
|
|
|
for (var i = 0; i < zw.length; ++i){
|
|
var option = document.createElement("option");
|
|
option.text = zw[i]["name"];
|
|
option.value = i;
|
|
_index.add(option);
|
|
|
|
if (typeof _sel !== 'undefined') {
|
|
if (zw[i]["name"] == _sel)
|
|
index = i
|
|
}
|
|
}
|
|
_index.selectedIndex = index;
|
|
|
|
UpdateROIs();
|
|
}
|
|
|
|
function renameNumber(){
|
|
var sel = document.getElementById("Numbers_value1");
|
|
var _delte= sel.options[sel.selectedIndex].text;
|
|
var _numbernew = prompt("Please enter new name", _delte);
|
|
|
|
erg = RenameNUMBER(_delte, _numbernew);
|
|
if (erg != "")
|
|
firework.launch(erg, 'danger', 30000);
|
|
else
|
|
UpdateNUMBERS(_numbernew);
|
|
}
|
|
|
|
function newNumber(){
|
|
var _numbernew = prompt("Please enter name of new number", "name");
|
|
|
|
erg = CreateNUMBER(_numbernew);
|
|
if (erg != "")
|
|
firework.launch(erg, 'danger', 30000);
|
|
else
|
|
UpdateNUMBERS(_numbernew);
|
|
}
|
|
|
|
|
|
function removeNumber(){
|
|
if (confirm("This will remove the number complete (analog and digital).\nIf you only want to remove the digital ROIs, please use \"Delete ROIs\".\nDo you want to proceed?")) {
|
|
var sel = document.getElementById("Numbers_value1");
|
|
var _delte= sel.options[sel.selectedIndex].text;
|
|
erg = DeleteNUMBER(_delte);
|
|
if (erg != "")
|
|
firework.launch(erg, 'danger', 30000);
|
|
UpdateNUMBERS();
|
|
}
|
|
}
|
|
|
|
|
|
function drawTextBG(context, txt, x, y, padding) {
|
|
context.font = "15px Arial";
|
|
context.textAlign = "center";
|
|
|
|
context.fillStyle = 'rgba(255, 0, 0, 0.5)';
|
|
var width = context.measureText(txt).width;
|
|
context.fillRect(x-(width+padding)/2, y-12, width + padding*2, parseInt(context.font, 10) + padding);
|
|
|
|
context.fillStyle = "black";
|
|
context.fillText(txt, x + padding / 2, y + padding / 2);
|
|
}
|
|
|
|
|
|
function draw() {
|
|
if (typeof ROIInfo === 'undefined') { // During init, ROIInfo is not defined yet
|
|
return;
|
|
}
|
|
|
|
var canvas = document.getElementById('canvas');
|
|
var context = canvas.getContext('2d');
|
|
context.drawImage(imageObj, 0, 0);
|
|
|
|
if (ROIInfo.length == 0) {
|
|
return;
|
|
}
|
|
|
|
if (document.getElementById("Category_Digits_enabled").checked)
|
|
{
|
|
var sel = document.getElementById("index");
|
|
var _number = sel.selectedIndex;
|
|
|
|
if (lockSizes) {
|
|
// Synchronize Y, dx and dy
|
|
for (var _nb = 0; _nb < ROIInfo.length; _nb++)
|
|
{
|
|
if (_nb != _number)
|
|
{
|
|
ROIInfo[_nb].y = rect.startY;
|
|
ROIInfo[_nb].dy = rect.h;
|
|
ROIInfo[_nb].dx = rect.w;
|
|
}
|
|
}
|
|
}
|
|
|
|
for (var _nb = 0; _nb < ROIInfo.length; _nb++)
|
|
{
|
|
if (_nb != _number)
|
|
{
|
|
lw = 2;
|
|
context.lineWidth = lw;
|
|
context.strokeStyle = "#990000";
|
|
var x0 = parseInt(ROIInfo[_nb].x) - parseInt(lw/2);
|
|
var y0 = parseInt(ROIInfo[_nb].y) - parseInt(lw/2);
|
|
var dx = parseInt(ROIInfo[_nb].dx) + parseInt(lw);
|
|
var dy = parseInt(ROIInfo[_nb].dy) + parseInt(lw);
|
|
context.strokeRect(x0, y0, dx, dy);
|
|
drawTextBG(context, ROIInfo[_nb]["name"], x0+dx/2, y0-12, 5);
|
|
}
|
|
|
|
}
|
|
|
|
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);
|
|
drawTextBG(context, ROIInfo[aktindex]["name"], x0+dx/2, y0-11, 5);
|
|
context.lineWidth = 1;
|
|
context.strokeRect(x0+dx*0.2, y0+dy*0.2, dx*0.6, dy*0.6);
|
|
|
|
|
|
context.lineWidth = 2;
|
|
context.beginPath();
|
|
context.moveTo(x0, y0+dy/2);
|
|
context.lineTo(x0+dx, y0+dy/2);
|
|
context.stroke();
|
|
|
|
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 (ROIInfo.length == 0) {
|
|
return;
|
|
}
|
|
|
|
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 (ROIInfo.length == 0) {
|
|
return;
|
|
}
|
|
|
|
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();
|
|
if (lockSpaceEquidistant) {
|
|
makeX_SpaceEquidistant();
|
|
}
|
|
draw();
|
|
}
|
|
}
|
|
|
|
function valuemanualchangeddx(){
|
|
if (ROIInfo.length == 0) {
|
|
return;
|
|
}
|
|
|
|
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;
|
|
|
|
if (lockSpaceEquidistant) {
|
|
makeX_SpaceEquidistant();
|
|
}
|
|
|
|
draw();
|
|
}
|
|
}
|
|
|
|
function valuemanualchangedspace(){
|
|
if (!drag) {
|
|
space = document.getElementById("space").value;
|
|
valuemanualchanged();
|
|
draw();
|
|
}
|
|
}
|
|
|
|
// Make all X spaces equidistant
|
|
function makeX_SpaceEquidistant() {
|
|
if (ROIInfo.length <= 1) { // Only one or no number
|
|
return;
|
|
}
|
|
|
|
var sel = document.getElementById("index");
|
|
var _number = sel.selectedIndex;
|
|
|
|
if (_number == 0) { // First number
|
|
for (var _nb = 1; _nb < ROIInfo.length; _nb++) {
|
|
ROIInfo[_nb].x = parseInt(ROIInfo[_nb-1].x) + parseInt(ROIInfo[_nb-1].dx) + parseInt(space);
|
|
}
|
|
}
|
|
else { // In between
|
|
for (var _nb = _number - 1; _nb >= 0 ; _nb--) { // left side
|
|
ROIInfo[_nb].x = parseInt(ROIInfo[_nb+1].x) - parseInt(ROIInfo[_nb].dx) - parseInt(space);
|
|
}
|
|
|
|
for (var _nb = _number + 1; _nb < ROIInfo.length; _nb++) { // right side
|
|
ROIInfo[_nb].x = parseInt(ROIInfo[_nb-1].x) + parseInt(ROIInfo[_nb-1].dx) + parseInt(space);
|
|
}
|
|
}
|
|
}
|
|
|
|
function renameROI(){
|
|
var sel = document.getElementById("Numbers_value1");
|
|
var _number= sel.options[sel.selectedIndex].text;
|
|
sel = document.getElementById("index");
|
|
var _roialt= sel.options[sel.selectedIndex].text;
|
|
|
|
|
|
var _roinew = prompt("Please enter new name", _roialt);
|
|
|
|
erg = RenameROI(_number, "digit", _roialt, _roinew);
|
|
if (erg != "")
|
|
firework.launch(erg, 'danger', 30000);
|
|
else
|
|
UpdateROIs(_roinew);
|
|
}
|
|
|
|
function numberChanged()
|
|
{
|
|
UpdateROIs();
|
|
}
|
|
|
|
|
|
|
|
init();
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|