playground for root page, build chart table with javascript
This commit is contained in:
parent
1cc01bba9b
commit
929d677127
3 changed files with 134 additions and 63 deletions
playground/html/root
1
playground/html/root/chart.json
Normal file
1
playground/html/root/chart.json
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"chart":[{"id":0,"name":"BME280","descr":"Temperature","unit":"°C","data":[41.35,44.11,39.02,39.71,39.29,38.94,38.55,39.24,39.19,39.02],"timestamp":[1744225501,1744226401,1744231166,1744232065,1744232965,1744233865,1744234765,1744235665,1744236565,1744237465],"datapoints":10},{"id":1,"name":"BME280","descr":"Temperature","unit":"°C","datapoints":0},{"id":2,"name":"BME280","descr":"Humidity","unit":"%","datapoints":0},{"id":3,"name":"BME280","descr":"Pressure","unit":"Pa","datapoints":0},{"id":4,"name":"BME280","descr":"Altitude","unit":"m","datapoints":0},{"id":5,"name":"CCS811","descr":"Parts per million","unit":"ppm","datapoints":0}]}
|
||||
70
playground/html/root/chart_pretty.json
Normal file
70
playground/html/root/chart_pretty.json
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
{
|
||||
"chart": [
|
||||
{
|
||||
"id": 0,
|
||||
"name": "BME280",
|
||||
"descr": "Temperature",
|
||||
"unit": "°C",
|
||||
"data": [
|
||||
41.35,
|
||||
44.11,
|
||||
39.02,
|
||||
39.71,
|
||||
39.29,
|
||||
38.94,
|
||||
38.55,
|
||||
39.24,
|
||||
39.19,
|
||||
39.02
|
||||
],
|
||||
"timestamp": [
|
||||
1744225501,
|
||||
1744226401,
|
||||
1744231166,
|
||||
1744232065,
|
||||
1744232965,
|
||||
1744233865,
|
||||
1744234765,
|
||||
1744235665,
|
||||
1744236565,
|
||||
1744237465
|
||||
],
|
||||
"datapoints": 10
|
||||
},
|
||||
{
|
||||
"id": 1,
|
||||
"name": "BME280",
|
||||
"descr": "Temperature",
|
||||
"unit": "°C",
|
||||
"datapoints": 0
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "BME280",
|
||||
"descr": "Humidity",
|
||||
"unit": "%",
|
||||
"datapoints": 0
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"name": "BME280",
|
||||
"descr": "Pressure",
|
||||
"unit": "Pa",
|
||||
"datapoints": 0
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"name": "BME280",
|
||||
"descr": "Altitude",
|
||||
"unit": "m",
|
||||
"datapoints": 0
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"name": "CCS811",
|
||||
"descr": "Parts per million",
|
||||
"unit": "ppm",
|
||||
"datapoints": 0
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -3,25 +3,25 @@
|
|||
<head>
|
||||
<meta charset='UTF-8'>
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
||||
<title>Ruderalis 2G - CanGrow v0.2-dev3</title>
|
||||
<title>CanGrow Devboard - CanGrow v0.2-dev3</title>
|
||||
<link rel='stylesheet' href='cangrow.css'>
|
||||
<script type='text/javascript' src='cangrow.js'></script>
|
||||
</head>
|
||||
<body>
|
||||
<ul class='nav'><li><a href='/'>🌱 Ruderalis 2G</a></li>
|
||||
<ul class='nav'><li><a href='/'>🌱 CanGrow Devboard</a></li>
|
||||
<li><a class='' href='/grow/' >🔆 Grow settings</a></li>
|
||||
<li><a class='' href='/system/' >⚙ System settings</a></li>
|
||||
<li><a class='' href='/wifi/' >📡 WiFi settings</a></li>
|
||||
<li><a class='' href='/help' >❓ Help</a></li>
|
||||
<li><span class='navTime'>12:46:45</span></li>
|
||||
<li><span class='navTime'>23:03:31</span></li>
|
||||
<li><a href='https://git.la10cy.net/DeltaLima/CanGrow' target='_blank'>CanGrow v0.2-dev3</a></li>
|
||||
</ul>
|
||||
<div class='center'>
|
||||
|
||||
<h2>🌱 Ruderalis 2G</h2>
|
||||
<h2>🌱 CanGrow Devboard</h2>
|
||||
<a href='/api/sensor/'>Sensor data -> /api/sensor/</a>
|
||||
|
||||
<div class='gaugeWrapper'><div class='gauge gauge--liveupdate spacer' id='gauge_1_0_0' style='float:left; margin-right: 10px;'><div class='gaugeLabel'>Temperature<br><span class='gaugeLabelSub'>BME280</span></div>
|
||||
<div class='gaugeWrapper'><div class='gauge gauge--liveupdate spacer' id='gauge_1_0_0' style='float:left; margin-right: 10px;'><div class='gaugeLabel'>Soilmoisture<br><span class='gaugeLabelSub'>ADC int</span></div>
|
||||
|
||||
<div class='gauge__container'>
|
||||
<div class='gauge__background'></div>
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
<span class='gauge__label--high'></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='gauge gauge--liveupdate spacer' id='gauge_2_0_1' style='float:left; margin-right: 10px;'><div class='gaugeLabel'>Humidity<br><span class='gaugeLabelSub'>BME280</span></div>
|
||||
<div class='gauge gauge--liveupdate spacer' id='gauge_2_1_0' style='float:left; margin-right: 10px;'><div class='gaugeLabel'>Temperature<br><span class='gaugeLabelSub'>BME280</span></div>
|
||||
|
||||
<div class='gauge__container'>
|
||||
<div class='gauge__background'></div>
|
||||
|
|
@ -49,7 +49,50 @@
|
|||
<span class='gauge__label--high'></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='gauge gauge--liveupdate spacer' id='gauge_3_1_0' style='float:left; '><div class='gaugeLabel'>Soilmoisture<br><span class='gaugeLabelSub'>Analog Soilmoisture</span></div>
|
||||
<div class='gauge gauge--liveupdate spacer' id='gauge_3_1_1' style='float:left; '><div class='gaugeLabel'>Humidity<br><span class='gaugeLabelSub'>BME280</span></div>
|
||||
|
||||
<div class='gauge__container'>
|
||||
<div class='gauge__background'></div>
|
||||
<div class='gauge__center'></div>
|
||||
<div class='gauge__data'></div>
|
||||
<div class='gauge__needle'></div>
|
||||
</div>
|
||||
<div class='gauge__labels mdl-typography__headline'>
|
||||
<span class='gauge__label--low'></span>
|
||||
<span class='gauge__label--spacer'></span>
|
||||
<span class='gauge__label--high'></span>
|
||||
</div>
|
||||
</div>
|
||||
</div><div style='clear: both;'></div>
|
||||
<div class='gaugeWrapper'><div class='gauge gauge--liveupdate spacer' id='gauge_4_1_2' style='float:left; margin-right: 10px;'><div class='gaugeLabel'>Pressure<br><span class='gaugeLabelSub'>BME280</span></div>
|
||||
|
||||
<div class='gauge__container'>
|
||||
<div class='gauge__background'></div>
|
||||
<div class='gauge__center'></div>
|
||||
<div class='gauge__data'></div>
|
||||
<div class='gauge__needle'></div>
|
||||
</div>
|
||||
<div class='gauge__labels mdl-typography__headline'>
|
||||
<span class='gauge__label--low'></span>
|
||||
<span class='gauge__label--spacer'></span>
|
||||
<span class='gauge__label--high'></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='gauge gauge--liveupdate spacer' id='gauge_5_1_3' style='float:left; margin-right: 10px;'><div class='gaugeLabel'>Altitude<br><span class='gaugeLabelSub'>BME280</span></div>
|
||||
|
||||
<div class='gauge__container'>
|
||||
<div class='gauge__background'></div>
|
||||
<div class='gauge__center'></div>
|
||||
<div class='gauge__data'></div>
|
||||
<div class='gauge__needle'></div>
|
||||
</div>
|
||||
<div class='gauge__labels mdl-typography__headline'>
|
||||
<span class='gauge__label--low'></span>
|
||||
<span class='gauge__label--spacer'></span>
|
||||
<span class='gauge__label--high'></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='gauge gauge--liveupdate spacer' id='gauge_6_2_0' style='float:left; '><div class='gaugeLabel'>Parts per million<br><span class='gaugeLabelSub'>CCS811</span></div>
|
||||
|
||||
<div class='gauge__container'>
|
||||
<div class='gauge__background'></div>
|
||||
|
|
@ -65,64 +108,21 @@
|
|||
</div>
|
||||
</div><div style='clear: both;'></div>
|
||||
<script>var gaugeJS_1_0_0 = new Gauge(document.getElementById('gauge_1_0_0'));
|
||||
gaugeJS_1_0_0.value('23.65', 35, ' °C');
|
||||
var gaugeJS_2_0_1 = new Gauge(document.getElementById('gauge_2_0_1'));
|
||||
gaugeJS_2_0_1.value('31.72', 100, ' %');
|
||||
var gaugeJS_3_1_0 = new Gauge(document.getElementById('gauge_3_1_0'));
|
||||
gaugeJS_3_1_0.value('95.00', 100, ' %');
|
||||
gaugeJS_1_0_0.value('9.00', 2, ' %');
|
||||
var gaugeJS_2_1_0 = new Gauge(document.getElementById('gauge_2_1_0'));
|
||||
gaugeJS_2_1_0.value('20.80', 2, ' °C');
|
||||
var gaugeJS_3_1_1 = new Gauge(document.getElementById('gauge_3_1_1'));
|
||||
gaugeJS_3_1_1.value('38.73', 2, ' %');
|
||||
var gaugeJS_4_1_2 = new Gauge(document.getElementById('gauge_4_1_2'));
|
||||
gaugeJS_4_1_2.value('101.54', 2, ' Pa');
|
||||
var gaugeJS_5_1_3 = new Gauge(document.getElementById('gauge_5_1_3'));
|
||||
gaugeJS_5_1_3.value('-17.87', 2, ' m');
|
||||
var gaugeJS_6_2_0 = new Gauge(document.getElementById('gauge_6_2_0'));
|
||||
gaugeJS_6_2_0.value('497.00', 2, ' ppm');
|
||||
</script>
|
||||
|
||||
<br>
|
||||
|
||||
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css'>
|
||||
<style>#chart0 { width: 100%; max-width: 640px; margin: 0 auto;}
|
||||
.minwidth { min-width: 140px; max-width: 320px; background: #3c3c3c; border-radius: 3px; padding: 5px; text-align: center; }</style>
|
||||
<div id='chart0'><table class='charts-css line show-data-on-hover'>
|
||||
<tr><td style='--start: calc( 0.00 / 100); --end: calc( 62.71 / 100);'><span class='data minwidth'>2025-04-09 12:00<br>62 °C</span></td>
|
||||
<td style='--start: calc( 0.00 / 100); --end: calc( 99.71 / 100);'><span class='data minwidth'>2025-04-09 12:00<br>99 °C</span></td>
|
||||
</tr>
|
||||
<tr><td style='--start: calc( 62.71 / 100); --end: calc( 63.39 / 100);'><span class='data minwidth'>2025-04-09 12:01<br>63 °C </span></td>
|
||||
<td style='--start: calc( 99.71 / 100); --end: calc( 88.22 / 100);'><span class='data minwidth'>2025-04-09 12:00<br>44 °C</span></td>
|
||||
</tr>
|
||||
<tr><td style='--start: calc( 63.39 / 100); --end: calc( 63.95 / 100);'><span class='data minwidth'>2025-04-09 12:02<br>64 $ </span></td></tr>
|
||||
<tr><td style='--start: calc( 63.95 / 100); --end: calc( 64.57 / 100);'><span class='data minwidth'> 65 % </span></td></tr>
|
||||
<tr><td style='--start: calc( 64.57 / 100); --end: calc( 64.84 / 100);'><span class='data minwidth'>62</span></td></tr>
|
||||
<tr><td style='--start: calc( 64.84 / 100); --end: calc( 65.11 / 100);'><span class='data minwidth'>62</span></td></tr>
|
||||
<tr><td style='--start: calc( 65.11 / 100); --end: calc( 65.02 / 100);'><span class='data minwidth'>62</span></td></tr>
|
||||
<tr><td style='--start: calc( 65.02 / 100); --end: calc( 64.87 / 100);'><span class='data minwidth'>62</span></td></tr>
|
||||
<tr><td style='--start: calc( 64.87 / 100); --end: calc( 64.82 / 100);'><span class='data minwidth'>62</span></td></tr>
|
||||
<tr><td style='--start: calc( 64.82 / 100); --end: calc( 65.01 / 100);'><span class='data minwidth'>62</span></td></tr>
|
||||
<tr><td style='--start: calc( 65.01 / 100); --end: calc( 64.95 / 100);'><span class='data minwidth'>62</span></td></tr>
|
||||
<tr><td style='--start: calc( 64.95 / 100); --end: calc( 64.10 / 100);'><span class='data minwidth'>62</span></td></tr>
|
||||
<tr><td style='--start: calc( 64.10 / 100); --end: calc( 63.75 / 100);'><span class='data minwidth'>62</span></td></tr>
|
||||
<tr><td style='--start: calc( 63.75 / 100); --end: calc( 63.68 / 100);'><span class='data minwidth'>62</span></td></tr>
|
||||
<tr><td style='--start: calc( 63.68 / 100); --end: calc( 64.59 / 100);'></td></tr>
|
||||
<tr><td style='--start: calc( 64.59 / 100); --end: calc( 62.19 / 100);'></td></tr>
|
||||
<tr><td style='--start: calc( 62.19 / 100); --end: calc( 50.92 / 100);'></td></tr>
|
||||
<tr><td style='--start: calc( 50.92 / 100); --end: calc( 42.91 / 100);'></td></tr>
|
||||
<tr><td style='--start: calc( 42.91 / 100); --end: calc( 41.79 / 100);'></td></tr>
|
||||
<tr><td style='--start: calc( 41.79 / 100); --end: calc( 41.70 / 100);'></td></tr>
|
||||
<tr><td style='--start: calc( 41.70 / 100); --end: calc( 40.67 / 100);'></td></tr>
|
||||
<tr><td style='--start: calc( 40.67 / 100); --end: calc( 41.14 / 100);'></td></tr>
|
||||
<tr><td style='--start: calc( 41.14 / 100); --end: calc( 40.85 / 100);'></td></tr>
|
||||
<tr><td style='--start: calc( 40.85 / 100); --end: calc( 40.65 / 100);'></td></tr>
|
||||
<tr><td style='--start: calc( 40.65 / 100); --end: calc( 40.60 / 100);'></td></tr>
|
||||
<tr><td style='--start: calc( 40.60 / 100); --end: calc( 40.27 / 100);'></td></tr>
|
||||
<tr><td style='--start: calc( 40.27 / 100); --end: calc( 39.51 / 100);'></td></tr>
|
||||
<tr><td style='--start: calc( 39.51 / 100); --end: calc( 40.20 / 100);'></td></tr>
|
||||
<tr><td style='--start: calc( 40.20 / 100); --end: calc( 40.27 / 100);'></td></tr>
|
||||
<tr><td style='--start: calc( 40.27 / 100); --end: calc( 40.49 / 100);'></td></tr>
|
||||
<tr><td style='--start: calc( 40.49 / 100); --end: calc( 40.31 / 100);'></td></tr>
|
||||
<tr><td style='--start: calc( 40.31 / 100); --end: calc( 40.12 / 100);'></td></tr>
|
||||
<tr><td style='--start: calc( 40.12 / 100); --end: calc( 40.47 / 100);'></td></tr>
|
||||
<tr><td style='--start: calc( 40.47 / 100); --end: calc( 39.90 / 100);'></td></tr>
|
||||
<tr><td style='--start: calc( 39.90 / 100); --end: calc( 40.40 / 100);'></td></tr>
|
||||
<tr><td style='--start: calc( 40.40 / 100); --end: calc( 39.78 / 100);'></td></tr>
|
||||
<tr><td style='--start: calc( 39.78 / 100); --end: calc( 40.26 / 100);'></td></tr>
|
||||
<tr><td style='--start: calc( 40.26 / 100); --end: calc( 31.96 / 100);'></td></tr>
|
||||
<tr><td style='--start: calc( 31.96 / 100); --end: calc( 36.64 / 100);'></td></tr>
|
||||
<tr><td style='--start: calc( 36.64 / 100); --end: calc( 31.33 / 100);'></td></tr>
|
||||
<tr><td style='--start: calc( 31.33 / 100); --end: calc( 33.16 / 100);'></td></tr>
|
||||
</table></div>
|
||||
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css'><style>#chart0 { width: 100%; max-width: 640px; margin: 0 auto; .minw { min-width: 140px; max-width: 320px; text-align: center; }}</style><div id='chart0'><table class='charts-css line multiple show-data-on-hover show-heading show-primary-axis show-data-axes show-10-secondary-axes'><caption>Linechart</caption><tr><td style='--start: calc( 0.00 / 100); --end: calc( 41.35 / 100);'><span class='data minw'>2025-04-09<br>41.35</span></td></tr><tr><td style='--start: calc( 41.35 / 100); --end: calc( 44.11 / 100);'><span class='data minw'>2025-04-09<br>44.11</span></td></tr><tr><td style='--start: calc( 44.11 / 100); --end: calc( 39.02 / 100);'><span class='data minw'>2025-04-09<br>39.02</span></td></tr><tr><td style='--start: calc( 39.02 / 100); --end: calc( 39.71 / 100);'><span class='data minw'>2025-04-09<br>39.71</span></td></tr><tr><td style='--start: calc( 39.71 / 100); --end: calc( 39.29 / 100);'><span class='data minw'>2025-04-09<br>39.29</span></td></tr><tr><td style='--start: calc( 39.29 / 100); --end: calc( 38.94 / 100);'><span class='data minw'>2025-04-09<br>38.94</span></td></tr><tr><td style='--start: calc( 38.94 / 100); --end: calc( 38.55 / 100);'><span class='data minw'>2025-04-09<br>38.55</span></td></tr><tr><td style='--start: calc( 38.55 / 100); --end: calc( 39.24 / 100);'><span class='data minw'>2025-04-09<br>39.24</span></td></tr><tr><td style='--start: calc( 39.24 / 100); --end: calc( 39.19 / 100);'><span class='data minw'>2025-04-09<br>39.19</span></td></tr><tr><td style='--start: calc( 39.19 / 100); --end: calc( 39.02 / 100);'><span class='data minw'>2025-04-09<br>39.02</span></td></tr></table></div>
|
||||
|
||||
<div class='footer'><span>Build: d3d5809-esp8266_d1_mini_clone-20250409032354</span></div></div></body></html>
|
||||
<div class='footer'><span>Build: 1cc01bb-esp8266_d1_mini_clone-20250410010138</span></div></div></body></html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue