|
1 | 1 | <!DOCTYPE html>
|
2 | 2 | <title>RPId View</title>
|
3 | 3 | <head>
|
| 4 | + <!-- for testing on local machine --> |
| 5 | + <base href="http://mini.local:8095/"> |
4 | 6 | <link href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAbAAACnAUBJ98BAASnAAAAIwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMAAABxAAAC5DIEvf9FBP3/NwTP/wIACukAAAByAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABACAAm/IQKH/w4BSv8LAUP/HwKF/xMCWf8MAUX/IwKN/wMAF9EAAAAhAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGALAOt/0wF//8eAn3/HAJ6/zoE2P8kA5T/HgJ//0sE//81BMj/AQAEpwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA0j8E6v81BMv/BQEn/0ME9v9CBPX/RwT//xMCWv82BM3/RwT//wMBFN4AAAAAAAAAAAAAAAAAAAAAAAAARw4CSf8OAkz/AwEX/wUBJP8rA6b/QgT0/zMDxP8FAST/BQEp/x4CgP8LAUT9AAAAQwAAAAAAAAAAAAAAAAAAAaA9BOL/CgE//ykDo/9CBPX/JgOa/wUBKf8bAnP/PgTn/ywDrf8IATf/OwTc/wAAAZ0AAAAAAAAAAAAAAAAAAAGCMQO8/x0Cev8+BOT/QgTz/0ME+f8JATr/PATe/0IE9v9ABO7/IgOL/zMEw/8AAAGHAAAAAAAAAAAAAAAAAAAAFQMAFdMFASn/IwKO/0YE//88BOD/BAEd/zYEzf9HBP//KwOn/woBO/8EAR/aAAAAGwAAAAAAAAAAAAAAAAAAAAAAAABrJgOb/xsCdv8QAk//GgJw/xsCdf8hA4b/FgJl/yECh/8lA5j/AAAAZwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGwcANN83AM//DgBH/y8Ct/9LBP//OAPU/xQAWv81AMr/BgAt3gAAABYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAQC2AFEy/wRmTP8EBh7/DwBP/wQCHf8DWkX/AF81/wAEAMsAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB/AHA2/wDIWP8AulD/AFId/wAGAP8APAv/AK9M/wDJWf8AjEL/AQMCrQAAAAAAAAAAAAAAAAAAAAAAAAAKAR8K6QDCXP8Aq1H/AJBF/wC6V/8ANRf/ALBQ/wCVRP8Ao0z/AMle/wBAHf8AAAAkAAAAAAAAAAAAAAAAAAAAGAEkDv8AoEv/AKlQ/wCvUf8AdDb/AAIBvwBcKf8ArFD/AKtR/wClT/8AQR7/AAAAPAAAAAAAAAAAAAAAAAAAAAIAAABSAQICngISBtMBBwS6AAAAbwAAAAQAAABXAQQDsQITB9MBBAOrAAAAZAAAAAkAAAAA/j8AAPwfAADwBwAA4AMAAOADAADgAwAAwAEAAMABAADgAwAA8AcAAPAHAADwBwAA8AMAAOADAADgAwAA8ccAAA==" rel="icon" type="image/x-icon" />
|
5 | 7 | <!-- Doc: https://plotly.com/javascript/line-charts/pi -->
|
6 | 8 | <!-- Dark theme derived from: https://jsfiddle.net/3hfq7ast/ -->
|
|
16 | 18 |
|
17 | 19 | <body>
|
18 | 20 | <div id='main'><!-- CPU temp and fan RPM chart --></div>
|
19 |
| - <div id='la5m'><!-- 5 minute load average chart --></div> |
20 |
| - <div id='bmp280'><!-- atmospheric pressure chart --></div> |
21 |
| - <div id='smc768'><!-- atmospheric pressure chart --></div> |
22 | 21 | <!-- theme switch -->
|
23 | 22 | <div id="theme-switch" style="position: absolute; top: 0; left: 0; padding: 4px; font-size: small; background-color: rgba(0,0,0,0.5); color: white; cursor: pointer;">
|
24 | 23 | <span id="theme-switch-text">Dark/Light</span>
|
|
48 | 47 | }
|
49 | 48 | }
|
50 | 49 |
|
| 50 | +function createChartElement(chartId) { |
| 51 | + if (document.getElementById(chartId) == null) { |
| 52 | + var chartDiv = document.createElement('div'); |
| 53 | + chartDiv.id = chartId; |
| 54 | + document.body.appendChild(chartDiv); |
| 55 | + } |
| 56 | +} |
| 57 | + |
51 | 58 | async function loadMain() {
|
52 | 59 | let data = await getData("main");
|
53 | 60 |
|
|
56 | 63 | return;
|
57 | 64 | }
|
58 | 65 |
|
59 |
| - for (var key in data["temp"]) { |
60 |
| - data["temp"][key] = parseInt(data["temp"][key]); |
61 |
| - } |
62 |
| - |
63 | 66 | var temp = {
|
64 | 67 | x: Object.keys(data["temp"]),
|
65 |
| - y: Object.values(data["temp"]), |
| 68 | + y: Object.values(data["temp"]).map(Number), |
66 | 69 | type: 'scatter',
|
67 | 70 | name: 'CPU, m˚C'
|
68 | 71 | };
|
|
81 | 84 | // check if there rpm data
|
82 | 85 | if (data["rpm"] != null) {
|
83 | 86 |
|
84 |
| - for (var key in data["rpm"]) { |
85 |
| - data["rpm"][key] = parseInt(data["rpm"][key]); |
86 |
| - } |
87 |
| - |
88 | 87 | var rpm = {
|
89 | 88 | x: Object.keys(data["rpm"]),
|
90 |
| - y: Object.values(data["rpm"]), |
| 89 | + y: Object.values(data["rpm"]).map(Number), |
91 | 90 | type: 'scatter',
|
92 | 91 | name: 'Fan RPM',
|
93 | 92 | yaxis: 'y2',
|
|
112 | 111 | return;
|
113 | 112 | }
|
114 | 113 |
|
115 |
| - for (var key in data["TC0C"]) { |
116 |
| - data["TC0C"][key] = parseInt(data["TC0C"][key]); |
117 |
| - } |
| 114 | + createChartElement('smc768'); |
118 | 115 |
|
119 | 116 | var temp = {
|
120 | 117 | x: Object.keys(data["TC0C"]),
|
121 |
| - y: Object.values(data["TC0C"]), |
| 118 | + y: Object.values(data["TC0C"]).map(Number), |
122 | 119 | type: 'scatter',
|
123 | 120 | name: 'CPU, m˚C'
|
124 | 121 | };
|
|
137 | 134 | // check if there rpm data
|
138 | 135 | if (data["Exhaust"] != null) {
|
139 | 136 |
|
140 |
| - for (var key in data["Exhaust"]) { |
141 |
| - data["Exhaust"][key] = parseInt(data["Exhaust"][key]); |
142 |
| - } |
143 |
| - |
144 | 137 | var rpm = {
|
145 | 138 | x: Object.keys(data["Exhaust"]),
|
146 |
| - y: Object.values(data["Exhaust"]), |
| 139 | + y: Object.values(data["Exhaust"]).map(Number), |
147 | 140 | type: 'scatter',
|
148 | 141 | name: 'Fan RPM',
|
149 | 142 | yaxis: 'y2',
|
|
168 | 161 | return;
|
169 | 162 | }
|
170 | 163 |
|
171 |
| - for (var key in data["la5m"]) { |
172 |
| - data["la5m"][key] = parseFloat(data["la5m"][key]); |
173 |
| - } |
| 164 | + createChartElement('la5m'); |
174 | 165 |
|
175 | 166 | var chartData = {
|
176 | 167 | x: Object.keys(data["la5m"]),
|
177 |
| - y: Object.values(data["la5m"]), |
| 168 | + y: Object.values(data["la5m"]).map(parseFloat), |
178 | 169 | type: 'scatter',
|
179 | 170 | name: 'CPU LA 5m',
|
180 | 171 | yaxis: 'y',
|
|
215 | 206 | return;
|
216 | 207 | }
|
217 | 208 |
|
218 |
| - for (var key in data["pressure"]) { |
219 |
| - data["pressure"][key] = parseFloat(data["pressure"][key]); |
220 |
| - } |
| 209 | + createChartElement('bmp280'); |
221 | 210 |
|
222 | 211 | var press = {
|
223 | 212 | x: Object.keys(data["pressure"]),
|
224 |
| - y: Object.values(data["pressure"]), |
| 213 | + y: Object.values(data["pressure"]).map(parseFloat), |
225 | 214 | type: 'scatter',
|
226 | 215 | name: 'Pressure, hPa'
|
227 | 216 | };
|
|
0 commit comments