DeltaLima/CanGrow
DeltaLima/CanGrow
0
0
Fork 0
Code Issues26 Pull requests Projects1 Releases7 Packages Wiki Activity

playing around with chartscss

Browse source
This commit is contained in:
DeltaLima 2025-04-09 20:06:28 +02:00
parent 6cad9ae107
commit c0e1e43811
2 changed files with 36 additions and 30 deletions
include/Webserver
Page_root.h
playground/html/root
index.html

30
include/Webserver/Page_root.h
View file

@ -153,10 +153,10 @@ String Proc_WebPage_root(const String& var) {
String html;
/* FOR TESTING ONLY - INCLUDE EXTERNAL CSSCHARTS*/
html += F("<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;}</style>");
html += F("<div id='chart0'><table class='charts-css line'>");
html += F("<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>");
html += F("<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>");
byte i = 0;
if(config.grow.dashboard.chartConfigured[i] == true) {
if(config.grow.dashboard.chartConfigured[i] == 3) {
char chartDirPath[10];
snprintf(chartDirPath, sizeof(chartDirPath), "%s%d", CHART_BASE_PATH, i);
@ -197,21 +197,21 @@ String Proc_WebPage_root(const String& var) {
//html += F("<span class='data'>");
//html += dataPoint;
//html += F("</span>");
html += F("<span class='tooltip'>");
html += F("<span class='data minw'>");
html += Str_Epoch2Date(timestamp);
html += F("<br>");
html += dataPoint;
html += F(" ");
String unit; // = FPSTR(Sensor_Read_unit[SensorIndex[config.system.sensor.type[config.grow.dashboard.chartSensor[0]]].read[config.grow.dashboard.chartRead[0]]]);
if((SensorIndex[config.system.sensor.type[config.grow.dashboard.gaugeSensor[i]]].read[config.grow.dashboard.gaugeRead[i]] == SENSOR_READ_TYPE_RAW) && (config.system.sensor.rawConvert[config.grow.dashboard.gaugeSensor[i]][config.grow.dashboard.gaugeRead[i]] > 0)) {
//html += FPSTR(Sensor_Convert_Raw_descr[config.system.sensor.rawConvert[config.grow.dashboard.gaugeSensor[i]][config.grow.dashboard.gaugeRead[i]]]);
unit = FPSTR(Sensor_Convert_Raw_unit[config.system.sensor.rawConvert[config.grow.dashboard.gaugeSensor[i]][config.grow.dashboard.gaugeRead[i]]]); //FPSTR(Sensor_Read_unit[SensorIndex[config.system.sensor.type[config.grow.dashboard.gaugeSensor[i]]].read[config.grow.dashboard.gaugeRead[i]]]);
} else {
//html += FPSTR(Sensor_Read_descr[SensorIndex[config.system.sensor.type[config.grow.dashboard.gaugeSensor[i]]].read[config.grow.dashboard.gaugeRead[i]]]);
unit = FPSTR(Sensor_Read_unit[SensorIndex[config.system.sensor.type[config.grow.dashboard.gaugeSensor[i]]].read[config.grow.dashboard.gaugeRead[i]]]);
}
unit.replace(F("%"), F("%%"));
html += unit;
//html += F(" ");
//String unit; // = FPSTR(Sensor_Read_unit[SensorIndex[config.system.sensor.type[config.grow.dashboard.chartSensor[0]]].read[config.grow.dashboard.chartRead[0]]]);
//if((SensorIndex[config.system.sensor.type[config.grow.dashboard.gaugeSensor[i]]].read[config.grow.dashboard.gaugeRead[i]] == SENSOR_READ_TYPE_RAW) && (config.system.sensor.rawConvert[config.grow.dashboard.gaugeSensor[i]][config.grow.dashboard.gaugeRead[i]] > 0)) {
////html += FPSTR(Sensor_Convert_Raw_descr[config.system.sensor.rawConvert[config.grow.dashboard.gaugeSensor[i]][config.grow.dashboard.gaugeRead[i]]]);
//unit = FPSTR(Sensor_Convert_Raw_unit[config.system.sensor.rawConvert[config.grow.dashboard.gaugeSensor[i]][config.grow.dashboard.gaugeRead[i]]]); //FPSTR(Sensor_Read_unit[SensorIndex[config.system.sensor.type[config.grow.dashboard.gaugeSensor[i]]].read[config.grow.dashboard.gaugeRead[i]]]);
//} else {
////html += FPSTR(Sensor_Read_descr[SensorIndex[config.system.sensor.type[config.grow.dashboard.gaugeSensor[i]]].read[config.grow.dashboard.gaugeRead[i]]]);
//unit = FPSTR(Sensor_Read_unit[SensorIndex[config.system.sensor.type[config.grow.dashboard.gaugeSensor[i]]].read[config.grow.dashboard.gaugeRead[i]]]);
//}
//unit.replace(F("%"), F("%%"));
//html += unit;
html += F("</span>");
//html += fileRead.readStringUntil('\n').toFloat();
html += F("</td></tr>");

36
playground/html/root/index.html
View file

@ -75,21 +75,27 @@ gaugeJS_3_1_0.value('95.00', 100, ' %');
<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;}</style><div id='chart0'><table class='charts-css line'>
<tr><td style='--start: calc( 0.00 / 100); --end: calc( 62.71 / 100);'><span class="tooltip"> asd </span></td></tr>
<tr><td style='--start: calc( 62.71 / 100); --end: calc( 63.39 / 100);'></td></tr>
<tr><td style='--start: calc( 63.39 / 100); --end: calc( 63.95 / 100);'></td></tr>
<tr><td style='--start: calc( 63.95 / 100); --end: calc( 64.57 / 100);'></td></tr>
<tr><td style='--start: calc( 64.57 / 100); --end: calc( 64.84 / 100);'></td></tr>
<tr><td style='--start: calc( 64.84 / 100); --end: calc( 65.11 / 100);'></td></tr>
<tr><td style='--start: calc( 65.11 / 100); --end: calc( 65.02 / 100);'></td></tr>
<tr><td style='--start: calc( 65.02 / 100); --end: calc( 64.87 / 100);'></td></tr>
<tr><td style='--start: calc( 64.87 / 100); --end: calc( 64.82 / 100);'></td></tr>
<tr><td style='--start: calc( 64.82 / 100); --end: calc( 65.01 / 100);'></td></tr>
<tr><td style='--start: calc( 65.01 / 100); --end: calc( 64.95 / 100);'></td></tr>
<tr><td style='--start: calc( 64.95 / 100); --end: calc( 64.10 / 100);'></td></tr>
<tr><td style='--start: calc( 64.10 / 100); --end: calc( 63.75 / 100);'></td></tr>
<tr><td style='--start: calc( 63.75 / 100); --end: calc( 63.68 / 100);'></td></tr>
<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>