working on webpage

2 months ago · 125157d859
parent 266fe09282
commit 125157d859
2 changed files with 19 additions and 16 deletions
--- a/www/default.css
+++ b/www/default.css
@ -3,7 +3,11 @@ body {
    color: #BBB;
 }

-table, th, td {
+.noborder {
+    border: none;
+}
+
+.withborder {
    border: thin solid;
    border-collapse: collapse;
 }
@ -13,3 +17,4 @@ table, th, td {
    padding: 10px;
    border: thin solid;
 }
+
--- a/www/index.html
+++ b/www/index.html
@ -7,13 +7,12 @@

 <body>
        
-        <div class="float">
+        <table class="noborder"><tr><td>
        <label>Filter Processing<input id="floatimage" type="checkbox"></label>
-        </div>
-        <div class="float">
+        </td><td>            
        <label>Auto Brightness<input id="autobright" type="search" list="autobrightlist"><datalist id="autobrightlist"></datalist></label>
-        </div>
-        
+        </td></tr>
+        </table>
    <br>
    
        <div class="webcamimage">
@ -24,11 +23,11 @@
    
        <div class="float">
            <h2>Controls</h2><hr>
-            <table id="controls"></table>
+            <table id="controls" class="withborder"></table>
        </div>
        <div class="float">
            <h2>Infos</h2><hr>
-            <table id="variables"></table>
+            <table id="variables" class="withborder"></table>
        </div>

    <br>
@ -36,7 +35,6 @@
        <div id="debug">
        </div>
    
-    
 </body>

 <script>
@ -67,10 +65,10 @@ function refreshCtrls() {
            
            ctrls = JSON.parse(response);
            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) {
-                t += "<tr><td>"+elm.name+"</td><td>"+elm.min+"</td>"+
-                     "<td>"+elm.max+"</td><td>" +
+                t += "<tr class=\"withborder\"><td class=\"withborder\">"+elm.name+"</td><td class=\"withborder\">"+elm.min+"</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>";
                datalist.innerHTML += "<option value=\""+elm.id + " " + elm.name+"\">";     
            });
@ -97,11 +95,11 @@ function refreshVariables() {
            
            variables = JSON.parse(response);
            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) {
-                t += "<tr><td>"+elm.name+"</td>"+
-                    "<td><input class=\"variablevalue\" dataid=\""+elm.name+"\" value=\""+elm.value+"\" size=\"6\" inputmode=\"search\"></td>"+
-                    "<td>"+elm.desc+"</td></tr>";
+                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>";
            table.innerHTML = t;