@ -7,10 +7,12 @@
< body > < body >
< div class = "toggle" >
< table class = "noborder" > < tr > < td >
< label > Filter Processing< input id = "floatimage" type = "checkbox" > < span class = "slider" > < / span > < / label >
< label > Filter Processing< input id = "floatimage" type = "checkbox" > < / label >
< / div >
< / td > < td >
< label > Auto Brightness< input id = "autobright" type = "search" list = "autobrightlist" > < datalist id = "autobrightlist" > < / datalist > < / label >
< / td > < / tr >
< / table >
< br >
< br >
< div class = "webcamimage" >
< div class = "webcamimage" >
@ -19,20 +21,27 @@
< br >
< br >
< table id = "controls" > < / table >
< div class = "float" >
< h2 > Controls< / h2 > < hr >
< table id = "controls" class = "withborder" > < / table >
< / div >
< div class = "float" >
< h2 > Infos< / h2 > < hr >
< table id = "variables" class = "withborder" > < / table >
< / div >
< br >
< br >
< div id = "debug" >
< div id = "debug" >
< / div >
< / div >
< / body > < / body >
< script > < script >
let ctrls;
let ctrls;
let variables;
function reloadImage() {
function reloadImage() {
const img1 = document.getElementById('webcamimage');
const img1 = document.getElementById('webcamimage');
const filterimage1 = document.getElementById('floatimage');
const filterimage1 = document.getElementById('floatimage');
@ -44,7 +53,8 @@ function reloadImage() {
function refreshCtrls() {
function refreshCtrls() {
let debug = document.getElementById("debug");
let debug = document.getElementById("debug");
let datalist = document.getElementById("autobrightlist");
datalist.innerHTML = "";
$.ajax({
$.ajax({
type: "POST",
type: "POST",
url: 'get/ctrls',
url: 'get/ctrls',
@ -55,11 +65,41 @@ function refreshCtrls() {
ctrls = JSON.parse(response);
ctrls = JSON.parse(response);
let table = document.getElementById("controls");
let table = document.getElementById("controls");
let t = "< thead > < tr > < th > Name< / th > < th > Min< / th > < th > Max< / th > < th > Value< / th > < / thead > < tbody > ";
let t = "< thead class = \"withborder\" > < tr class = \"withborder\" > < th class = \"withborder\" > Name< / th > < th class = \"withborder\" > Min< / th > < th class = \"withborder\" > Max< / th > < th class = \"withborder\" > Value< / th > < / thead > < tbody > ";
ctrls.ctrls.forEach(function (elm, idx) {
ctrls.ctrls.forEach(function (elm, idx) {
t += "< tr > < td > "+elm.name+"< / td > < td > "+elm.min+"< / td > "+
t += "< tr class = \"withborder\" > < td class = \"withborder\" > "+elm.name+"< / td > < td class = \"withborder\" > "+elm.min+"< / td > "+
"< td > "+elm.max+"< / td > < td > " +
"< td class = \"withborder\" > "+elm.max+"< / td > < td class = \"withborder\" > " +
"< input class = \"ctrlvalue\" dataid = \""+elm.id+"\" value = \""+elm.value+"\" > < / td > < / tr > ";
"< input class = \"ctrlvalue\" dataid = \""+elm.id+"\" value = \""+elm.value+"\" size = \"6\" inputmode = \"search\" > < / td > < / tr > ";
datalist.innerHTML += "< option value = \""+elm.id + " " + elm . name + " \ " > ";
});
t += "< / tbody > ";
table.innerHTML = t;
},
error: function(error) {
debug.innerHTML = "ERROR";
}
});
}
function refreshVariables() {
let debug = document.getElementById("debug");
$.ajax({
type: "POST",
url: 'get/variables',
data: "",
success: function(response)
{
let jsonData = {};
variables = JSON.parse(response);
let table = document.getElementById("variables");
let t = "< thead > < tr class = \"withborder\" > < th class = \"withborder\" > Name< / th > < th class = \"withborder\" > Value< / th > < th class = \"withborder\" > Description< / th > < / thead > < tbody > ";
variables.variables.forEach(function (elm, idx) {
t += "< tr class = \"withborder\" > < td class = \"withborder\" > "+elm.name+"< / td > "+
"< td class = \"withborder\" > < input class = \"variablevalue\" dataid = \""+elm.name+"\" value = \""+elm.value+"\" size = \"6\" inputmode = \"search\" > < / td > "+
"< td class = \"withborder\" > "+elm.desc+"< / td > < / tr > ";
});
});
t += "< / tbody > ";
t += "< / tbody > ";
table.innerHTML = t;
table.innerHTML = t;
@ -70,12 +110,14 @@ function refreshCtrls() {
});
});
}
}
function setCtrl(id, value) {
function setCtrl(id, value) {
let debug = document.getElementById("debug");
let debug = document.getElementById("debug");
$.ajax({
$.ajax({
type: "POST",
type: "POST",
url: 'set/ctrl/'+id+"/ "+value,
url: 'set/ctrl/'+id+"= "+value,
data: "",
data: "",
success: function(response)
success: function(response)
{
{
@ -86,9 +128,40 @@ function setCtrl(id, value) {
}
}
});
});
}
}
setInterval(reloadImage, 500);
function setVariable(id, value) {
let debug = document.getElementById("debug");
$.ajax({
type: "POST",
url: 'set/var/'+id+"="+value,
data: "",
success: function(response)
{
refreshCtrls();
},
error: function(error) {
debug.innerHTML = "ERROR";
}
});
}
let cyclecnt = 0;
function refresh() {
reloadImage();
if (((cyclecnt++) % 25) == 0) {
refreshCtrls();
refreshVariables();
}
}
setInterval(refresh, 500);
refreshCtrls();
refreshCtrls();
refreshVariables();
$(document).on('keypress', '.ctrlvalue', function(e) {
$(document).on('keypress', '.ctrlvalue', function(e) {
if (e.key === 'Enter' || e.keyCode === 13) {
if (e.key === 'Enter' || e.keyCode === 13) {
@ -102,6 +175,18 @@ $(document).on('keypress', '.ctrlvalue', function(e) {
}
}
});
});
$(document).on('keypress', '.variablevalue', function(e) {
if (e.key === 'Enter' || e.keyCode === 13) {
// Hier deine Funktion einfügen
let id = this.getAttribute('dataid');
let value = this.value;
setVariable(id, value);
// Verhindert das Standard-Verhalten (z. B. Formular absenden)
e.preventDefault();
}
});
< / script > < / script >
< / html > < / html >
