working on webpage

main^2
Steffen Pohle 2 months ago
parent 266fe09282
commit 125157d859

@ -3,7 +3,11 @@ body {
color: #BBB; color: #BBB;
} }
table, th, td { .noborder {
border: none;
}
.withborder {
border: thin solid; border: thin solid;
border-collapse: collapse; border-collapse: collapse;
} }
@ -13,3 +17,4 @@ table, th, td {
padding: 10px; padding: 10px;
border: thin solid; border: thin solid;
} }

@ -7,13 +7,12 @@
<body> <body>
<div class="float"> <table class="noborder"><tr><td>
<label>Filter Processing<input id="floatimage" type="checkbox"></label> <label>Filter Processing<input id="floatimage" type="checkbox"></label>
</div> </td><td>
<div class="float">
<label>Auto Brightness<input id="autobright" type="search" list="autobrightlist"><datalist id="autobrightlist"></datalist></label> <label>Auto Brightness<input id="autobright" type="search" list="autobrightlist"><datalist id="autobrightlist"></datalist></label>
</div> </td></tr>
</table>
<br> <br>
<div class="webcamimage"> <div class="webcamimage">
@ -24,11 +23,11 @@
<div class="float"> <div class="float">
<h2>Controls</h2><hr> <h2>Controls</h2><hr>
<table id="controls"></table> <table id="controls" class="withborder"></table>
</div> </div>
<div class="float"> <div class="float">
<h2>Infos</h2><hr> <h2>Infos</h2><hr>
<table id="variables"></table> <table id="variables" class="withborder"></table>
</div> </div>
<br> <br>
@ -36,7 +35,6 @@
<div id="debug"> <div id="debug">
</div> </div>
</body> </body>
<script> <script>
@ -67,10 +65,10 @@ 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+"\" size=\"6\" inputmode=\"search\"></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+"\">"; datalist.innerHTML += "<option value=\""+elm.id + " " + elm.name+"\">";
}); });
@ -97,11 +95,11 @@ function refreshVariables() {
variables = JSON.parse(response); variables = JSON.parse(response);
let table = document.getElementById("variables"); let table = document.getElementById("variables");
let t = "<thead><tr><th>Name</th><th>Value</th><th>Description</th></thead><tbody>"; 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) { variables.variables.forEach(function (elm, idx) {
t += "<tr><td>"+elm.name+"</td>"+ t += "<tr class=\"withborder\"><td class=\"withborder\">"+elm.name+"</td>"+
"<td><input class=\"variablevalue\" dataid=\""+elm.name+"\" value=\""+elm.value+"\" size=\"6\" inputmode=\"search\"></td>"+ "<td class=\"withborder\"><input class=\"variablevalue\" dataid=\""+elm.name+"\" value=\""+elm.value+"\" size=\"6\" inputmode=\"search\"></td>"+
"<td>"+elm.desc+"</td></tr>"; "<td class=\"withborder\">"+elm.desc+"</td></tr>";
}); });
t += "</tbody>"; t += "</tbody>";
table.innerHTML = t; table.innerHTML = t;

Loading…
Cancel
Save