diff --git a/ampel-firmware/web_server.cpp b/ampel-firmware/web_server.cpp index 07901a845afce1bcf31601918f08227b5b610d09..98a12d4edf590c8f27c2bc016bcbefb1b5bc6cfd 100644 --- a/ampel-firmware/web_server.cpp +++ b/ampel-firmware/web_server.cpp @@ -65,11 +65,35 @@ namespace web_server { body1_template = PSTR( - "<li class='pure-menu-item'><a href='%s' class='pure-menu-link'>Download CSV</a></li>" "<li class='pure-menu-item' id='led'>⬤</li>" // LED - "</ul></div></div>" "<script>" + "<li class='pure-menu-item'><a href='%s' class='pure-menu-link'>Download CSV</a></li>" + "<li class='pure-menu-item' id='led'>⬤</li>" // LED + "</ul></div></div>" + "<script>" // Show a colored dot on the webpage, with a similar color than on LED Ring. - "hue=(1-(Math.min(Math.max(parseInt(document.title),500),1600)-500)/1100)*120;" "document.getElementById('led').style.color=['hsl(',hue,',100%%,50%%)'].join('');" "</script>" "<div class='pure-g'>" "<div class='pure-u-1' id='graph'></div>"// Graph placeholder - "</div>" "<div class='pure-g'>" "<table id='table' class='pure-table-striped pure-u-1 pure-u-md-1-2'>" "<tr><th colspan='2'>%s</th></tr>" "<tr><td>CO<sub>2</sub></td><td>%5d ppm</td></tr>" "<tr><td>Temperature</td><td>%.1f℃</td></tr>" "<tr><td>Humidity</td><td>%.1f%%</td></tr>" "<tr><td>Last measurement</td><td>%s</td></tr>" "<tr><td>Timestep</td><td>%5d s</td></tr>" "<tbody %s>" "<tr><th colspan='2'>CSV</th></tr>" "<tr><td>Last write</td><td>%s</td></tr>" "<tr><td>Interval</td><td>%5d s</td></tr>" "<tr><td>Available space</td><td>%d kB</td></tr>" "</tbody>" "<tbody %s>" "<tr><th colspan='2'>MQTT</th></tr>" "<tr><td>Connected?</td><td>%s</td></tr>" "<tr><td>Last publish</td><td>%s</td></tr>" "<tr><td>Interval</td><td>%5d s</td></tr>" "</tbody>" + "hue=(1-(Math.min(Math.max(parseInt(document.title),500),1600)-500)/1100)*120;" + "document.getElementById('led').style.color=['hsl(',hue,',100%%,50%%)'].join('');" + "</script>" + "<div class='pure-g'>" + "<div class='pure-u-1' id='graph'></div>"// Graph placeholder + "</div>" + "<div class='pure-g'>" + "<table id='table' class='pure-table-striped pure-u-1 pure-u-md-1-2'>" + "<tr><th colspan='2'>%s</th></tr>" + "<tr><td>CO<sub>2</sub></td><td>%5d ppm</td></tr>" + "<tr><td>Last measurement</td><td>%s</td></tr>" + "<tr><td>Timestep</td><td>%5d s</td></tr>" + "<tbody %s>" + "<tr><th colspan='2'>CSV</th></tr>" + "<tr><td>Last write</td><td>%s</td></tr>" + "<tr><td>Interval</td><td>%5d s</td></tr>" + "<tr><td>Available space</td><td>%d kB</td></tr>" + "</tbody>" + "<tbody %s>" + "<tr><th colspan='2'>MQTT</th></tr>" + "<tr><td>Connected?</td><td>%s</td></tr>" + "<tr><td>Last publish</td><td>%s</td></tr>" + "<tr><td>Interval</td><td>%5d s</td></tr>" + "</tbody>" #if defined(ESP32) "<tbody %s>" "<tr><th colspan='2'>LoRaWAN</th></tr>" @@ -84,7 +108,6 @@ namespace web_server { body2_template = PSTR( "<tr><th colspan='2'>Sensor</th></tr>" - "<tr><td>Temperature offset</td><td>%.1fK</td></tr>" "<tr><td>Auto-calibration?</td><td>%s</td></tr>" "<tr><td>Local address</td><td><a href='http://%s.local/'>%s.local</a></td></tr>" "<tr><td>Local IP</td><td><a href='http://%s'>%s</a></td></tr>" @@ -116,16 +139,13 @@ namespace web_server { ".then(t=>document.getElementById('log').appendChild(t))" ".then(_=>Plotly.newPlot('graph',data,layout,{displaylogo:false}))" ".catch(console.error);" - "xs=[];y1=[];y2=[];y3=[];" + "xs=[];y1=[];" "d={x:xs,type:'scatter',mode:'lines+markers',marker:{size:3}};" // circle marker (symbol 0), from https://plotly.com/python/marker-style/ "data=[" "{...d,...{y:y1,name:'CO<sub>2</sub>',line:{color:'#2ca02c'}}}," - "{...d,...{y:y2,name:'Temperature',yaxis:'y2',line:{color:'#ff7f0e',dash:'dot'}}}," - "{...d,...{y:y3,name:'Humidity',yaxis:'y3',line:{color:'#1f77b4',dash:'dot'}}}];" + "];" "layout={height:600,title:'%s',legend:{xanchor:'right',x:0.2,y:1.0}," "xaxis:{domain:[0.0,0.85]},yaxis:{ticksuffix:'ppm',range:[0,2000],dtick:200}," - "yaxis2:{overlaying:'y',side:'right',ticksuffix:'°C',position:0.9,anchor:'free',range:[0,30],dtick:3}," - "yaxis3:{overlaying:'y',side:'right',ticksuffix:'%%',position:0.95,anchor:'free',range:[0,100],dtick:10}" "};" "function c2t(t){" "t=t.trim();" @@ -143,14 +163,10 @@ namespace web_server { "if(d-ld>36e5){" "xs.push(NaN);" "y1.push(NaN);" - "y2.push(NaN);" - "y3.push(NaN);" "}" "ld=d;" "xs.push(fs[0]);" "y1.push(fs[1]);" - "y2.push(fs[2]);" - "y3.push(fs[3]);" "if(i>4&&i<n-12){if(i==5){fs=['...','...','...','...']}else{return;}}" "r=document.createElement('tr');" "fs.forEach((f,_)=>{" @@ -203,7 +219,7 @@ namespace web_server { // Body snprintf_P(content, sizeof(content), body1_template, csv_writer::filename, config::ampel_name(), sensor::co2, - sensor::temperature, sensor::humidity, sensor::timestamp, config::measurement_timestep, + sensor::timestamp, config::measurement_timestep, showHTMLIf(config::is_csv_active()), csv_writer::last_successful_write, config::csv_interval, csv_writer::getAvailableSpace() / 1024, showHTMLIf(config::is_mqtt_active()), yesOrNo(mqtt::connected), mqtt::last_successful_publish, config::mqtt_sending_interval @@ -217,7 +233,7 @@ namespace web_server { Serial.print(strlen(content)); web_config::http.sendContent(content); - snprintf_P(content, sizeof(content), body2_template, sensor::getTemperatureOffset(), + snprintf_P(content, sizeof(content), body2_template, yesOrNo(config::auto_calibrate_sensor), config::ampel_name(), config::ampel_name(), wifi::local_ip, wifi::local_ip, ampel.macAddress, ESP.getFreeHeap(), esp_get_max_free_block_size(), esp_get_heap_fragmentation(), ampel.max_loop_duration, ampel.board, ampel.sensorId, ampel.version, dd, hh, mm,