Startseite Erkunden Hilfe
Anmelden
dyadmisha
/
AI-on-the-edge-device
Mirror von https://github.com/jomjol/AI-on-the-edge-device
1
0
Fork 0
Dateien Issues 0 Wiki
Quellcode durchsuchen

enhance data pages (#2088)

* enhance data pages

* add checkbox to show relative values

* remove static entries, they get overwritten by dynamic oes

---------

Co-authored-by: CaCO3 <caco@ruinelli.ch>
CaCO3 vor 2 Jahren
Ursprung
9a9aa68a65
Commit
53ff190860
4 geänderte Dateien mit 123 neuen und 77 gelöschten Zeilen
Gesamtansicht Diff-Statistik anzeigen
  1. 12 8
      sd-card/html/data.html
  2. 0 6
      sd-card/html/edit_config_param.html
  3. 110 63
      sd-card/html/graph.html
  4. 1 0
      sd-card/html/index.html

+ 12 - 8
sd-card/html/data.html
Datei anzeigen 

@@ -5,6 +5,7 @@
 
             body {
 
             body {
 
                 height: 100%;
 
                 height: 100%;
 
                 margin: 2px;
 
                 margin: 2px;
 
+                font-family: Arial, Helvetica, sans-serif;
 
             }
 
             }
 
 
 
             .box {
 
             .box {
 
@@ -33,19 +34,22 @@
 
         <script type="text/javascript" src="common.js?v=$COMMIT_HASH"></script> 
         <script type="text/javascript" src="common.js?v=$COMMIT_HASH"></script> 
     </head>
 
     </head>
 
     <body>
 
     <body>
 
+            <h3>Todays Data</h3>
 
+            <h4>Last part of Todays Data</h4>
 
         <div class="box">
 
         <div class="box">
 
             <div class="row header">
 
             <div class="row header">
 
-                <button onClick="reload();">Reload</button>
 
-                <button onClick="window.open(getDomainname() + '/datafileact');">Show full data</button>
 
-                <button onClick="window.location.href = getDomainname() + '/fileserver/log/data/'">Show older data files</button>
 
-                <button onClick="window.location.href = 'graph.html?v=$COMMIT_HASH'">Show graph</button>
 
+                <button onClick="reload();">Refresh</button>
 
+                <button onClick="window.open(getDomainname() + '/datafileact');">Show Full File</button>
 
+                <button onClick="window.location.href = getDomainname() + '/fileserver/log/data/'">Show Data Files</button>
 
+                <button onClick="window.location.href = 'graph.html?v=$COMMIT_HASH'">Show Graph</button>
 
             </div>
 
             </div>
 
             <div class="row content" id="data"><br><br><br><b>Loading Data file, please wait...</b></div>
 
             <div class="row content" id="data"><br><br><br><b>Loading Data file, please wait...</b></div>
 
             <div class="row footer">
 
             <div class="row footer">
 
-                <button onClick="reload();">Reload</button>
 
-                <button onClick="window.open(getDomainname() + '/datafileact');">Show full data</button>
 
-                <button onClick="window.location.href = getDomainname() + '/fileserver/log/data/'">Show older data files</button>
 
-                <button onClick="window.location.href = 'graph.html?v=$COMMIT_HASH'">Show graph</button>
 
+                <button onClick="reload();">Refresh</button>
 
+                <button onClick="window.open(getDomainname() + '/datafileact');">Show Full File</button>
 
+                <button onClick="window.location.href = getDomainname() + '/fileserver/log/data/'">Show Data Files</button>
 
+                <button onClick="window.location.href = 'graph.html?v=$COMMIT_HASH'">Show Graph</button>
 
+                <p></p>
 
             </div>
 
             </div>
 
           </div>
 
           </div>
 
     </body>
 
     </body>

+ 0 - 6
sd-card/html/edit_config_param.html
Datei anzeigen 

@@ -462,9 +462,6 @@ textarea {
 
 				<br>
 
 				<br>
 
 				<b>Postprocessing Individual Parameters: 
 				<b>Postprocessing Individual Parameters: 
                 <select id="Numbers_value1" onchange="numberChanged()">
 
                 <select id="Numbers_value1" onchange="numberChanged()">
 
-                    <option value="0" selected>default</option>
 
-                    <option value="1" >NT</option>
 
-                    <option value="2" >HT</option>
 
                 </select></b>
 
                 </select></b>
 
 			</td>
 
 			</td>
 
 		</tr>
 
 		</tr>
 
@@ -786,9 +783,6 @@ textarea {
 
 				<br>
 
 				<br>
 
 				<b>Postprocessing Individual Parameters: 
 				<b>Postprocessing Individual Parameters: 
                 <select id="NumbersInfluxDB_value1" onchange="numberInfluxDBChanged()">
 
                 <select id="NumbersInfluxDB_value1" onchange="numberInfluxDBChanged()">
 
-                    <option value="0" selected>default</option>
 
-                    <option value="1" >NT</option>
 
-                    <option value="2" >HT</option>
 
                 </select></b>
 
                 </select></b>
 
 			</td>
 
 			</td>
 
 		</tr>
 
 		</tr>

+ 110 - 63
sd-card/html/graph.html
Datei anzeigen 

@@ -5,17 +5,115 @@
 
     <script type="text/javascript" src="common.js?v=$COMMIT_HASH"></script> 
     <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="readconfigcommon.js?v=$COMMIT_HASH"></script>  
     <script type="text/javascript" src="readconfigparam.js?v=$COMMIT_HASH"></script>  
     <script type="text/javascript" src="readconfigparam.js?v=$COMMIT_HASH"></script>  
-
 
     <style>
 
     <style>
 
-        textarea {
 
-            width: 600px;
 
-            height: 300px;
 
+        body {
 
+            font-family: Arial, Helvetica, sans-serif;
 
         }
 
         }
 
     </style>
 
     </style>
 
+  
     <script>
 
     <script>
 
     function run() {
 
     function run() {
 
-      var el = document.getElementById('cnsl');
 
-      el && eval(el.value);
 
+        datefile = document.getElementById("datafiles").value;
 
+        numbername = document.getElementById("numbers").value;
 
+        showRrelativeValues = document.getElementById("showRrelativeValues").checked;
 
+        //alert("Auslesen: " + datefile + " " + numbername);
 
+
 
+        _domainname = getDomainname();
 
+        fetch(_domainname + '/fileserver/log/data/' + datefile)
 
+        .then(response => {
 
+            // handle the response
 
+            if (response.status == 404) {
 
+                firework.launch("No log data available for " + dateString, 'warning', 10000);
 
+            }
 
+            response.text()
 
+            .then( result => {
 
+                var lines = result.split("\n");
 
+                var traceValue =          { x: [], y: [], type: 'scatter', line: {width: 6}, name: 'Value'};
 
+                var tracePreValue =       { x: [], y: [], type: 'scatter', line: {width: 2}, name: 'Previous Value', visible: 'legendonly'};
 
+                var traceChangeRate =     { x: [], y: [], type: 'bar', yaxis: 'y2', opacity: 0.2, name: 'Change Rate'};
 
+                var traceChangeAbsolute = { x: [], y: [], type: 'bar', yaxis: 'y2', opacity: 0.2, name: 'Change Absolute', visible: 'legendonly'};
 
+
 
+                var timex = 1;
 
+                for (let line of lines) {
 
+                    {
 
+                        //console.log(line);
 
+                        if (line.split(",")[1] == numbername)
 
+                        {
 
+                            var value = line.split(",")[3];
 
+                            var preValue = line.split(",")[4];
 
+                            var changeRate = line.split(",")[5];
 
+                            var changeAbsolute = line.split(",")[6];
 
+                            var time  = line.split(",")[0];
 
+                            //console.log("> "+time+" "+value+"\n");
 
+
 
+                            traceValue.x.push(time);
 
+
 
+                            traceValue.y.push(value);
 
+                            tracePreValue.y.push(preValue);
 
+                            traceChangeRate.y.push(changeRate);
 
+                            traceChangeAbsolute.y.push(changeAbsolute);
 
+                        }
 
+                    }
 
+                }
 
+                //console.log(trace);
 
+
 
+                // Copy time to all traces
 
+                tracePreValue.x = traceValue.x;
 
+                traceChangeRate.x = traceValue.x;
 
+                traceChangeAbsolute.x = traceValue.x;
 
+
 
+                //console.log(traceValue.y);
 
+
 
+                var offsetValue = traceValue.y[0];
 
+                var offsetPreValue = tracePreValue.y[0];
 
+
 
+                if (showRrelativeValues) {
 
+                    traceValue.y.forEach(function(part, index, arr) {
 
+                        arr[index] = arr[index] - offsetValue;
 
+                    });
 
+
 
+                    tracePreValue.y.forEach(function(part, index, arr) {
 
+                        arr[index] = arr[index] - offsetPreValue;
 
+                    });
 
+                }
 
+
 
+              //  console.log(traceValue.x)
 
+
 
+                var data = [traceValue, tracePreValue, traceChangeRate, traceChangeAbsolute];
 
+
 
+                var layout = {
 
+                    showlegend: true,
 
+                    colorway: ['green', 'black', 'blue', 'black'],
 
+
 
+                    yaxis: {title: 'Value'},
 
+                    yaxis2: {
 
+                        title: 'Change',
 
+                        overlaying: 'y',
 
+                        side: 'right'
 
+                    },
 
+
 
+                    margin: {
 
+                        l: 50,
 
+                        r: 50,
 
+                        b: 50,
 
+                        t: 50,
 
+                        pad: 4
 
+                    },
 
+
 
+                    legend: {
 
+                        x: 0.2,
 
+                        y: 0.9,
 
+                        xanchor: 'right'
 
+                    }
 
+                };
 
+
 
+                document.getElementById("chart").innerHTML = "";
 
+                Plotly.newPlot('chart', data, layout, {displayModeBar: true});
 
+            });
 
+        }).catch((error) => {
 
+            // handle the error
 
+            console.log(error);
 
+        });
 
     }
 
     }
 
     </script>
 
     </script>
 
     <link href="firework.css?v=$COMMIT_HASH" rel="stylesheet">
 
     <link href="firework.css?v=$COMMIT_HASH" rel="stylesheet">
 
@@ -23,67 +121,16 @@
 
     <script type="text/javascript" src="firework.js?v=$COMMIT_HASH"></script>
 
     <script type="text/javascript" src="firework.js?v=$COMMIT_HASH"></script>
 
     </head>
 
     </head>
 
     <body>
 
     <body>
 
-    <div id='chart'></div>
 
+        <h3>Data Graph</h3>
 
+        <div id='chart'><p>Loading...<br></p></div>
 
         <select id="datafiles" onchange="run();"></select>
 
         <select id="datafiles" onchange="run();"></select>
 
         <select id="numbers" onchange="run();"></select>
 
         <select id="numbers" onchange="run();"></select>
 
-        <select id="datatype" onchange="run();">
 
-            <option value="3">Value</option>
 
-            <option value="4">PreValue</option>
 
-            <option value="5">Change-Rate</option>
 
-            <option value="6">Change-Absolut</option>
 
-        </select>
 
-        
+        <input type="checkbox" id="showRrelativeValues" onclick = 'run();' unchecked ><label for="showRrelativeValues">Show relative values</label>
 
+        <button onclick="run();">Refresh</button>
 
+        &nbsp;&nbsp;|&nbsp;&nbsp;
 
+        <button onClick="window.location.href = 'data.html?v=$COMMIT_HASH'">Show data</button>
 
         <button onClick="window.location.href = getDomainname() + '/fileserver/log/data/'">Show data files</button>
 
         <button onClick="window.location.href = getDomainname() + '/fileserver/log/data/'">Show data files</button>
 
 
 
-  <!-- <button onclick="document.getElementById('editor').hidden = false; this.hidden = true;" >Editor</button> -->
 
-    <div id='editor' hidden='true'>
 
-    <textarea id="cnsl">
 
-datefile = document.getElementById("datafiles").value;
 
-numbername = document.getElementById("numbers").value;
 
-datatype = document.getElementById("datatype").value;
 
-//alert("Auslesen: " + datefile + " " + numbername);
 
-
 
-_domainname = getDomainname(); 
-fetch(_domainname + '/fileserver/log/data/' + datefile)
 
-.then(response => {
 
-    // handle the response
 
-    if (response.status == 404) {
 
-        firework.launch("No log data available for " + dateString, 'warning', 10000);
 
-    }
 
-    response.text()
 
-    .then( result => {
 
-        var lines = result.split("\n");
 
-        var trace = {
 
-        x: [],
 
-        y: [],
 
-        type: 'scatter'
 
-        };
 
-
 
-        var timex = 1;
 
-        for (let line of lines) {
 
-            {
 
-                console.log(line);
 
-                if (line.split(",")[1] == numbername)
 
-                {
 
-                    var value = line.split(",")[datatype];
 
-                    var time  = line.split(",")[0];
 
-                    console.log("> "+time+" "+value+"\n");
 
-                    trace.x.push(time);
 
-//                    timex += 1;
 
-                    trace.y.push(value);
 
-                }
 
-            }
 
-        }
 
-        console.log(trace);
 
-        var data = [trace];
 
-        Plotly.newPlot('chart', data);
 
-    });
 
-}).catch((error) => {
 
-    // handle the error
 
-    console.log(error);
 
-});        
-</textarea><br />
 
-<button onclick="run();">run</button>
 
 </div>
 
 </div>
 
 
 
 <script>
 
 <script>

+ 1 - 0
sd-card/html/index.html
Datei anzeigen 

@@ -89,6 +89,7 @@
 
             <li><a href="#" onclick="loadPage(getDomainname() + '/value?full');">Recognition</a></li>
 
             <li><a href="#" onclick="loadPage(getDomainname() + '/value?full');">Recognition</a></li>
 
             <li><a href="#" onclick="loadPage('graph.html?v=$COMMIT_HASH');">Data Graph</a></li>
 
             <li><a href="#" onclick="loadPage('graph.html?v=$COMMIT_HASH');">Data Graph</a></li>
 
             <li><a href="#" onclick="loadPage('data.html?v=$COMMIT_HASH');">Data Viewer</a></li>
 
             <li><a href="#" onclick="loadPage('data.html?v=$COMMIT_HASH');">Data Viewer</a></li>
 
+            <li><a href="#" onclick="loadPage(getDomainname() + '/fileserver/log/data/');">Data Files</a></li>
 
         </ul>
 
         </ul>
 
     </li>
 
     </li>