diff --git a/web_server.cpp b/web_server.cpp
index 48906281e153971b1e50fb4df881a84817f5da5a..812dbcce40e8e6c730f43e035a99242c2ae9875b 100644
--- a/web_server.cpp
+++ b/web_server.cpp
@@ -78,25 +78,30 @@ namespace web_server {
"<div class='pure-g'>\n"
//Sensor table
"<table id='table' class='pure-table-striped pure-u-1 pure-u-md-1-2'>\n"
- "<tr><th>Sensor</th><th>%s</th></tr>\n"
+ "<tr><th colspan='2'>%s</th></tr>\n"
"<tr><td>CO<sub>2</sub> concentration</td><td>%5d ppm</td></tr>\n"
"<tr><td>Temperature</td><td>%.1f℃</td></tr>\n"
"<tr><td>Humidity</td><td>%.1f%%</td></tr>\n"
"<tr><td>Last measurement</td><td>%s</td></tr>\n"
"<tr><td>Measurement timestep</td><td>%5d s</td></tr>\n"
#ifdef CSV_WRITER
- "<tr><td>Last CSV write</td><td>%s</td></tr>\n"
- "<tr><td>CSV timestep</td><td>%5d s</td></tr>\n"
+ "<tr><th colspan='2'>CSV</th></tr>\n"
+ "<tr><td>Last write</td><td>%s</td></tr>\n"
+ "<tr><td>Timestep</td><td>%5d s</td></tr>\n"
#endif
#ifdef MQTT
- "<tr><td>Last MQTT publish</td><td>%s</td></tr>\n"
- "<tr><td>MQTT publish timestep</td><td>%5d s</td></tr>\n"
+ "<tr><th colspan='2'>MQTT</th></tr>\n"
+ "<tr><td>Last publish</td><td>%s</td></tr>\n"
+ "<tr><td>Timestep</td><td>%5d s</td></tr>\n"
#endif
#if defined(LORAWAN) && defined(ESP32)
- "<tr><td>Connected to LoRaWAN?</td><td>%s</td></tr>\n"
- "<tr><td>Last LoRaWAN transmission</td><td>%s</td></tr>\n"
- "<tr><td>LoRaWAN publish timestep</td><td>%5d s</td></tr>\n"
+ "<tr><th colspan='2'>LoRaWAN</th></tr>\n"
+ "<tr><td>Connected?</td><td>%s</td></tr>\n"
+ "<tr><td>Frequency</td><td>%s MHz</td></tr>\n"
+ "<tr><td>Last transmission</td><td>%s</td></tr>\n"
+ "<tr><td>Timestep</td><td>%5d s</td></tr>\n"
#endif
+ "<tr><th colspan='2'>Sensor</th></tr>\n"
"<tr><td>Temperature offset</td><td>%.1fK</td></tr>\n" //TODO: Read it from sensor?
"<tr><td>Local address</td><td><a href='http://%s.local/'>%s.local</a></td></tr>\n"
"<tr><td>Local IP</td><td><a href='http://%s'>%s</a></td></tr>\n"
@@ -112,54 +117,55 @@ namespace web_server {
"<input type='submit' value='Delete CSV'/>"
"</form>\n"
#endif
- "</div>\n"
- "<a href='https://transfer.hft-stuttgart.de/gitlab/co2ampel/ampel-firmware' target='_blank'>Source code</a>\n"
- "<a href='https://transfer.hft-stuttgart.de/gitlab/co2ampel/ampel-documentation' target='_blank'>Documentation</a>\n");
+ "</div>\n");
- script_template = PSTR(
+ script_template =
+ PSTR(
+ "<a href='https://transfer.hft-stuttgart.de/gitlab/co2ampel/ampel-firmware' target='_blank'>Source code</a>\n"
+ "<a href='https://transfer.hft-stuttgart.de/gitlab/co2ampel/ampel-documentation' target='_blank'>Documentation</a>\n"
#ifdef CSV_WRITER
- "<script>\n"
- "document.body.style.cursor = 'default';\n"
- "fetch('./%s',{credentials:'include'})\n"
- // Get CSV, fill table and fill diagram
- ".then(response=>response.text())\n"
- ".then(csvText=>csvToTable(csvText))\n"
- ".then(htmlTable=>addLogTableToPage(htmlTable))\n"
- ".then(_=>Plotly.newPlot('graph',data,layout,{displaylogo:false}))\n"
- ".catch(e=>console.error(e));\n"
- "xs=[];\n"
- "data=[{x:xs,y:[],type:'scatter',name:'CO<sub>2</sub>',line:{color:'#2ca02c'}},\n"
- "{x:xs,y:[],type:'scatter',name:'Temperature',yaxis:'y2',line:{color:'#ff7f0e',dash:'dot'}},\n"
- "{x:xs,y:[],type:'scatter',name:'Humidity',yaxis:'y3',line:{color:'#1f77b4',dash:'dot'}}];\n"
- "layout={height:600,title:'%s',legend:{xanchor:'right',x:0.2,y:1.0},\n"
- "xaxis:{domain:[0.0,0.85]},yaxis:{ticksuffix:'ppm',range:[0,2000],dtick:200},\n"
- "yaxis2:{overlaying:'y',side:'right',ticksuffix:'°C',position:0.9,anchor:'free',range:[0,30],dtick:3},\n"
- "yaxis3:{overlaying:'y',side:'right',ticksuffix:'%%',position:0.95,anchor:'free',range:[0,100],dtick:10}\n"
- "};\n"
- "function csvToTable(csvText) {\n"
- "csvText=csvText.trim();\n"
- "lines=csvText.split('\\n');\n"
- "table=document.createElement('table');\n"
- "table.className='pure-table-striped';\n"
- "n=lines.length;\n"
- "lines.forEach((line,i)=>{\n"
- "fields=line.split(';');\n"
- "xs.push(fields[0]);\n"
- "data[0]['y'].push(fields[1]);\n"
- "data[1]['y'].push(fields[2]);\n"
- "data[2]['y'].push(fields[3]);\n"
- "if(i>4 && i<n-12){if(i==5){fields=['...','...','...','...']}else{return;}}\n"
- "row=document.createElement('tr');\n"
- "fields.forEach((field,index)=>{\n"
- "cell=document.createElement(i<2?'th':'td');\n"
- "cell.appendChild(document.createTextNode(field));\n"
- "row.appendChild(cell);});\n"
- "table.appendChild(row);});\n"
- "return table;}\n"
- "function addLogTableToPage(table){document.getElementById('log').appendChild(table);}\n"
- "</script>\n"
+ "<script>\n"
+ "document.body.style.cursor = 'default';\n"
+ "fetch('./%s',{credentials:'include'})\n"
+ ".then(response=>response.text())\n"
+ ".then(csvText=>csvToTable(csvText))\n"
+ ".then(htmlTable=>addLogTableToPage(htmlTable))\n"
+ ".then(_=>Plotly.newPlot('graph',data,layout,{displaylogo:false}))\n"
+ ".catch(e=>console.error(e));\n"
+ "xs=[];\n"
+ "data=[{x:xs,y:[],type:'scatter',name:'CO<sub>2</sub>',line:{color:'#2ca02c'}},\n"
+ "{x:xs,y:[],type:'scatter',name:'Temperature',yaxis:'y2',line:{color:'#ff7f0e',dash:'dot'}},\n"
+ "{x:xs,y:[],type:'scatter',name:'Humidity',yaxis:'y3',line:{color:'#1f77b4',dash:'dot'}}];\n"
+ "layout={height:600,title:'%s',legend:{xanchor:'right',x:0.2,y:1.0},\n"
+ "xaxis:{domain:[0.0,0.85]},yaxis:{ticksuffix:'ppm',range:[0,2000],dtick:200},\n"
+ "yaxis2:{overlaying:'y',side:'right',ticksuffix:'°C',position:0.9,anchor:'free',range:[0,30],dtick:3},\n"
+ "yaxis3:{overlaying:'y',side:'right',ticksuffix:'%%',position:0.95,anchor:'free',range:[0,100],dtick:10}\n"
+ "};\n"
+ "function csvToTable(csvText) {\n"
+ "csvText=csvText.trim();\n"
+ "lines=csvText.split('\\n');\n"
+ "table=document.createElement('table');\n"
+ "table.className='pure-table-striped';\n"
+ "n=lines.length;\n"
+ "lines.forEach((line,i)=>{\n"
+ "fields=line.split(';');\n"
+ "xs.push(fields[0]);\n"
+ "data[0]['y'].push(fields[1]);\n"
+ "data[1]['y'].push(fields[2]);\n"
+ "data[2]['y'].push(fields[3]);\n"
+ "if(i>4 && i<n-12){if(i==5){fields=['...','...','...','...']}else{return;}}\n"
+ "row=document.createElement('tr');\n"
+ "fields.forEach((field,index)=>{\n"
+ "cell=document.createElement(i<2?'th':'td');\n"
+ "cell.appendChild(document.createTextNode(field));\n"
+ "row.appendChild(cell);});\n"
+ "table.appendChild(row);});\n"
+ "return table;}\n"
+ "function addLogTableToPage(table){document.getElementById('log').appendChild(table);}\n"
+ "</script>\n"
#endif
- "</body>\n" "</html>");
+ "</body>\n"
+ "</html>");
// Web-server
http.on("/", handleWebServerRoot);
@@ -196,7 +202,7 @@ namespace web_server {
//NOTE: Splitting in multiple parts in order to use less RAM
char content[2000]; // Update if needed
- // Header size : 1611 - Body size : 1652 - Script size : 1688
+ // Header size : 1611 - Body size : 1800 - Script size : 1920
// Header
snprintf_P(content, sizeof(content), header_template, sensor::co2, SENSOR_ID.c_str(),
@@ -215,7 +221,8 @@ namespace web_server {
mqtt::last_successful_publish.c_str(), config::sending_interval,
#endif
#if defined(LORAWAN) && defined(ESP32)
- lorawan::connected ? "Yes" : "No", lorawan::last_transmission.c_str(), config::lorawan_sending_interval,
+ lorawan::connected ? "Yes" : "No", LMIC_FREQUENCY_PLAN, lorawan::last_transmission.c_str(),
+ config::lorawan_sending_interval,
#endif
config::temperature_offset, SENSOR_ID.c_str(), SENSOR_ID.c_str(), WiFi.localIP().toString().c_str(),
WiFi.localIP().toString().c_str(), get_free_heap_size(), available_fs_space, max_loop_duration, BOARD, hh, mm,