Show a colored dot on webpage

50013921 · Eric Duminil · 6f313488 · 50013921
Commit 50013921 authored Dec 20, 2020 by Eric Duminil
--- a/web_server.cpp
+++ b/web_server.cpp
 #include "web_server.h"

-//TODO: Add link to repos
-
 namespace config {
  // Values should be defined in config.h
 #ifdef HTTP_USER
@@ -57,13 +55,19 @@ namespace web_server {
            "</head>\n"
            "<body>\n"

-            "<div class='pure-g'><div class='pure-u-1'><div class='pure-menu'><p class='pure-menu-heading'>HfT-Stuttgart CO<sub>2</sub> sensor</p></div></div>\n"
+            "<div class='pure-g'><div class='pure-u-1'><div class='pure-menu'><p class='pure-menu-heading'>HfT-Stuttgart CO<sub>2</sub> Ampel</p></div></div>\n"
            "<div class='pure-u-1'><ul class='pure-menu pure-menu-horizontal pure-menu-list'>\n"
            "<li class='pure-menu-item'><a href='#graph' class='pure-menu-link'>Graph</a></li>\n"
            "<li class='pure-menu-item'><a href='#table' class='pure-menu-link'>Info</a></li>\n"
            "<li class='pure-menu-item'><a href='#log' class='pure-menu-link'>Log</a></li>\n"
            "<li class='pure-menu-item'><a href='./%s' class='pure-menu-link'>Download CSV</a></li>\n"
-            "</ul></div></div>\n");
+            "<li class='pure-menu-item' id='led'>&#11044;</li>\n"// LED
+            "</ul></div></div>\n"
+            "<script>\n"
+            // 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;\n"
+            "document.getElementById('led').style.color=['hsl(',hue,',100%%,50%%)'].join('');\n"
+            "</script>\n");

    body_template =
        PSTR("<div class='pure-g'>\n"
@@ -101,8 +105,6 @@ namespace web_server {
            "<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");

-    //TODO: Show PPM Color
-
    script_template = PSTR("<script>\n"
        "document.body.style.cursor = 'default';\n"
        "fetch('./%s',{credentials:'include'})\n"
@@ -179,7 +181,7 @@ namespace web_server {

    //NOTE: Splitting in multiple parts in order to use less RAM
    char content[2000]; // Update if needed
-    // Header size : 1384 - Body size : 1652 - Script size : 1688
+    // Header size : 1611 - Body size : 1652 - Script size : 1688

    // Header
    snprintf_P(content, sizeof(content), header_template, sensor::co2, SENSOR_ID.c_str(),