lumini_p30_control/firmware/firmware.ino

#include <ESP8266WiFi.h>
#include <ESP8266mDNS.h>
#include <ESP8266HTTPUpdateServer.h>
#include <ESP8266WebServer.h>
#include <WiFiManager.h>
#include <ArduinoJson.h>
#include <EEPROM.h>

#include "config.h"

//********* Config block *********//
// blue, warmwhite, purple, white&red&green
// blau, schwarz, rot, weiß
// ch1, ch2, ch3, ch4
// D1, D2, D7, D5
uint8_t pins[LIGHTS_COUNT] = { 5, 4, 13, 14 };

IPAddress strip_ip(192, 168, 0, 26);   // choose an unique IP Adress
IPAddress gateway_ip(192, 168, 0, 1);  // Router IP
IPAddress subnet_mask(255, 255, 255, 0);
IPAddress dns(192, 168, 0, 1);

//********************************//

#define LIGHT_VERSION 2.1

#define LAST_STATE_STARTUP_LIGHT_LAST_STATE 0
#define LAST_STATE_STARTUP_LIGHT_ON_STATE   1
#define LAST_STATE_STARTUP_LIGHT_OFF_STATE  2

#define LIGHT_STATE_ON  1
#define LIGHT_STATE_OFF 0

#define TIMING_CONTROL_ENABLED  1
#define TIMING_CONTROL_DISABLED 0

#define SCENE_RELEAX  0
#define SCENE_BRIGHT  1
#define SCENE_NIGHTLY 2

// 10 bit PWM
#define PWM_OFF             0 // 0V
#define PWM_MIN             0 // 0V - minimum light amount (~1%)
#define PWM_MAX           255 // 24V - maximum light amount (100%)
#define BRI_TO_PWM_FACTOR 1.0 // 24V-0V = 24V range

//********************************//

uint8_t scene;
uint8_t tc_enabled;

bool light_state[LIGHTS_COUNT];
bool in_transition;

int default_transitiontime = 4; // 4 seconds

int transitiontime[LIGHTS_COUNT];
int bri[LIGHTS_COUNT];
uint16_t current_pwm[LIGHTS_COUNT];

float step_level[LIGHTS_COUNT];
float current_bri[LIGHTS_COUNT];
byte mac[6];

ESP8266WebServer server(80);
ESP8266HTTPUpdateServer httpUpdateServer;

uint32_t last_lightengine_activity = 0;

//********************************//

void apply_scene(uint8_t new_scene, uint8_t light) {
  if (new_scene == SCENE_RELEAX) {
    bri[light] = 144;
  } else if (new_scene == SCENE_BRIGHT) {
    bri[light] = 254;
  } else if (new_scene == SCENE_NIGHTLY) {
    bri[0] = 25;
    bri[1] = 0;
    bri[2] = 0;
    bri[3] = 0;
  }
}

//********************************//

void process_lightdata(uint8_t light, float tt)
{
  if (light_state[light])
  {
    step_level[light] = (bri[light] - current_bri[light]) / tt;

  } else {
    step_level[light] = current_bri[light] / tt;
  }
}

//********************************//

void lightEngine()
{

  if (millis() < (last_lightengine_activity + TIME_LIGHTENGINE_INTERVAL_MS)) {
    // abort processing, the transition setting is a delay of seconds
    return;
  }

  last_lightengine_activity = millis();

  for (int i = 0; i < LIGHTS_COUNT; i++)
  {

    if (light_state[i])
    {
      if (bri[i] != current_bri[i])
      {
        in_transition = true;
        current_bri[i] += step_level[i] / BRI_MOD_STEPS_PER_SEC;
        if ((step_level[i] > 0.0 && current_bri[i] > bri[i]) || (step_level[i] < 0.0 && current_bri[i] < bri[i]))
        {
          current_bri[i] = bri[i];
          //Serial.println("Reached target bri[" + (String)i + "] = " + (String)bri[i]);
        }

        uint16_t tmp_pwm = calcPWM(current_bri[i]);
        current_pwm[i] = tmp_pwm;
        //Serial.println("lon: pin" + (String)i + " = PWM(" + (String)tmp_pwm + ")");
        analogWrite(pins[i], tmp_pwm);
      }
    } else {

      if (current_bri[i] != 0)
      {
        in_transition = true;
        current_bri[i] -= step_level[i] / BRI_MOD_STEPS_PER_SEC;
        if (current_bri[i] < 0)
        {
          current_bri[i] = 0;
          //Serial.println("Reached target bri[" + (String)i + "] = " + (String)bri[i]);
        }

        uint16_t tmp_pwm = calcPWM(current_bri[i]);
        current_pwm[i] = tmp_pwm;
        //Serial.println("loff: pin" + (String)i + " = PWM(" + (String)tmp_pwm + ")");
        analogWrite(pins[i], tmp_pwm);
      }
    }

  }  // for loop end

  if (in_transition)
  {
    delay(6);
    in_transition = false;
  }
}

//********************************//

uint16_t calcPWM(float tbri)
{
  uint16_t tmp_pwm = PWM_OFF;
  if (tbri > 0.0)
  {
    tmp_pwm = PWM_MIN + (int)(tbri * BRI_TO_PWM_FACTOR);
  }
  if (tmp_pwm > PWM_MAX) {
    tmp_pwm = PWM_MAX;
  }

  return tmp_pwm;
}

//********************************//

void read_eeprom_config()
{
  for (uint8_t light = 0; light < LIGHTS_COUNT; light++)
  {
    apply_scene(EEPROM.read(EEPROM_SCENE_ADDRESS), light);
    step_level[light] = bri[light] / 150.0;

    if (EEPROM.read(EEPROM_LAST_STATE_STARTUP_ADDRESS) == LAST_STATE_STARTUP_LIGHT_LAST_STATE ||
        (EEPROM.read(EEPROM_LAST_STATE_STARTUP_ADDRESS) == LAST_STATE_STARTUP_LIGHT_ON_STATE &&
         EEPROM.read(EEPROM_LAST_STATE_ADDRESS + light) == LIGHT_STATE_ON))
    {
      light_state[light] = true;  // set the light state to on
    }
    Serial.println("light[" + (String)light + "] = " + (String)light_state[light]);
  }

  uint8_t tmp = EEPROM.read(EEPROM_TIMING_CONTROL_ENABLED_ADDRESS);
  if (tmp == TIMING_CONTROL_DISABLED)
  {
    tc_enabled = TIMING_CONTROL_DISABLED;

  } else if (tmp == TIMING_CONTROL_ENABLED)
  {
    tc_enabled = TIMING_CONTROL_ENABLED;

  } else {

    EEPROM.write(EEPROM_TIMING_CONTROL_ENABLED_ADDRESS, TIMING_CONTROL_DISABLED);
    EEPROM.commit();
    tc_enabled = TIMING_CONTROL_DISABLED;
  }

  Serial.println("tc_enabled = " + (String)tc_enabled);

  if (EEPROM.read(EEPROM_LAST_STATE_STARTUP_ADDRESS) == 255)
  {
    // set the default value on uninitialized EEPROM
    EEPROM.write(EEPROM_LAST_STATE_STARTUP_ADDRESS, 0);
    EEPROM.commit();
  }

#ifdef USE_STATIC_IP
  if (EEPROM.read(EEPROM_DYNAMIC_IP_ADDRESS) == 255)
  {
    EEPROM.write(EEPROM_DYNAMIC_IP_ADDRESS, 0);
    EEPROM.commit();
  }
#else
  if (EEPROM.read(EEPROM_DYNAMIC_IP_ADDRESS) == 255)
  {
    EEPROM.write(EEPROM_DYNAMIC_IP_ADDRESS, 1);
    EEPROM.commit();
  }
#endif

}

//********************************//

void setup()
{
  EEPROM.begin(256);

  Serial.begin(SERIAL_BAUD_RATE);

  if (EEPROM.read(EEPROM_DYNAMIC_IP_ADDRESS) == 0)
  {
    WiFi.config(strip_ip, gateway_ip, subnet_mask, dns);
  }

  read_eeprom_config();

  for (int j = 0; j < 200; j++)
  {
    lightEngine();
  }

  WiFi.mode(WIFI_STA);
  WiFiManager wifiManager;
  wifiManager.setConfigPortalTimeout(120);
  wifiManager.autoConnect(light_name);

  IPAddress myIP = WiFi.localIP();
  Serial.print("IP: ");
  Serial.println(myIP);

  if (!light_state[0])
  {
    // Show that we are connected
    analogWrite(pins[0], 100);
    delay(500);
    analogWrite(pins[0], 0);
  }

  WiFi.macAddress(mac);

  pinMode(LED_BUILTIN, OUTPUT);     // Initialize the LED_BUILTIN pin as an output
  digitalWrite(LED_BUILTIN, HIGH);  // Turn the LED off by making the voltage HIGH

  httpUpdateServer.setup(&server);  // start http server

  init_webserver();

  tc_init();

  server.begin();
}  // end of setup

//********************************//

void loop()
{
  server.handleClient();
  lightEngine();

  if (tc_enabled == TIMING_CONTROL_ENABLED)
  {
    //Serial.println("tc_enabled = " + (String)tc_enabled);
    tc_update_loop();
  }
}

//********************************//

void handleNotFound()
{
  String message = "File Not Found\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET) ? "GET" : "POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";

  for (uint8_t i = 0; i < server.args(); i++)
  {
    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  }
  server.send(404, "text/plain", message);
}

//********************************//

void init_webserver()
{

#ifndef DISABLE_WEB_CONTROL
  server.on("/state", HTTP_PUT, []()
  {  // HTTP PUT request used to set a new light state
    DynamicJsonDocument root(1024);
    DeserializationError error = deserializeJson(root, server.arg("plain"));

    if (error) {
      server.send(404, "text/plain", "FAIL. " + server.arg("plain"));
    } else {

      for (JsonPair state : root.as<JsonObject>())
      {
        const char* key = state.key().c_str();
        int light = atoi(key) - 1;
        JsonObject values = state.value();

        uint8_t tmp = EEPROM.read(EEPROM_LAST_STATE_STARTUP_ADDRESS);
        if (values.containsKey("on"))
        {
          if (values["on"])
          {
            light_state[light] = true;
            if (tmp == LAST_STATE_STARTUP_LIGHT_LAST_STATE && EEPROM.read(EEPROM_LAST_STATE_ADDRESS + light) == LIGHT_STATE_OFF)
            {
              EEPROM.write(EEPROM_LAST_STATE_ADDRESS + light, LIGHT_STATE_ON);
            }
          } else {
            light_state[light] = false;
            if (tmp == LAST_STATE_STARTUP_LIGHT_LAST_STATE && EEPROM.read(EEPROM_LAST_STATE_ADDRESS + light) == LIGHT_STATE_ON)
            {
              EEPROM.write(EEPROM_LAST_STATE_ADDRESS + light, LIGHT_STATE_OFF);
            }
          }
        }

        if (values.containsKey("bri"))
        {
          bri[light] = values["bri"];
        }

        if (values.containsKey("bri_inc"))
        {
          bri[light] += (int)values["bri_inc"];
          if (bri[light] > 255) bri[light] = 255;
          else if (bri[light] < 1) bri[light] = 1;
        }

        if (values.containsKey("transitiontime"))
        {
          default_transitiontime = values["transitiontime"];
          if (tc_enabled == TIMING_CONTROL_DISABLED)
          {
            for (uint8_t i = 0 ; i < LIGHTS_COUNT; i++)
            {
              // set the default transition time for all lights
              process_lightdata(i, default_transitiontime);
            }
          }
        }

      }
      String output;
      serializeJson(root, output);
      server.send(200, "text/plain", output);
    }
  });

  server.on("/state", HTTP_GET, []()
  {  // HTTP GET request used to fetch current light state
    uint8_t light = server.arg("light").toInt() - 1;
    DynamicJsonDocument root(1024);
    root["on"] = light_state[light];
    root["bri"] = bri[light];
    root["curbri"] = (int)current_bri[light];
    root["curpwm"] = current_pwm[light];
    String output;
    serializeJson(root, output);
    server.send(200, "text/plain", output);
  });

  server.on("/detect", []()
  {  // HTTP GET request used to discover the light type
    char macString[32] = { 0 };
    sprintf(macString, "%02X:%02X:%02X:%02X:%02X:%02X", mac[0], mac[1], mac[2], mac[3], mac[4], mac[5]);
    DynamicJsonDocument root(1024);
    root["name"] = light_name;
    root["lights"] = LIGHTS_COUNT;
    root["protocol"] = "native_multi";
    root["modelid"] = "LWB010";
    root["type"] = "dimmable_light";
    root["mac"] = String(macString);
    root["version"] = LIGHT_VERSION;
    String output;
    serializeJson(root, output);
    server.send(200, "text/plain", output);
  });

  server.on("/tc_data_blocks", []()
  {
    String output = tc_getJsonData();

    server.send(200, "application/json", output);
  });

#endif  // DISABLE_WEB_CONTROL

  server.on("/", []()
  {

#ifndef DISABLE_WEB_CONTROL

    if (server.hasArg("transition"))
    {
      default_transitiontime = server.arg("transition").toFloat();
      if (tc_enabled == TIMING_CONTROL_DISABLED)
      {
        for (uint8_t i = 0 ; i < LIGHTS_COUNT; i++)
        {
          // set the default transition time for all lights
          process_lightdata(i, default_transitiontime);
        }
      }
    }

    // startup behavior switch handling
    if (server.hasArg("startup"))
    {
      int startup = server.arg("startup").toInt();
      if (EEPROM.read(EEPROM_LAST_STATE_STARTUP_ADDRESS) != startup)
      {
        EEPROM.write(EEPROM_LAST_STATE_STARTUP_ADDRESS, startup);

        for (uint8_t i = 0; i < LIGHTS_COUNT; i++) {
          uint8_t tmp = (light_state[i] == true ? LIGHT_STATE_ON : LIGHT_STATE_OFF);
          if (EEPROM.read(EEPROM_LAST_STATE_ADDRESS + i) != tmp)
          {
            EEPROM.write(EEPROM_LAST_STATE_ADDRESS + i, tmp);
          }
        }

        EEPROM.commit();
        Serial.print("Startup behavior set to ");
        Serial.println(EEPROM.read(EEPROM_LAST_STATE_STARTUP_ADDRESS));
      }
    }
#endif  // DISABLE_WEB_CONTROL

    // timing controller switch handling
    if (server.hasArg("tc"))
    {
      if (server.arg("tc") == "true")
      {
        if (tc_enabled == TIMING_CONTROL_DISABLED)
        {
          if (EEPROM.read(EEPROM_TIMING_CONTROL_ENABLED_ADDRESS) != TIMING_CONTROL_ENABLED)
          {
            tc_enabled = TIMING_CONTROL_ENABLED;
            EEPROM.write(EEPROM_TIMING_CONTROL_ENABLED_ADDRESS, TIMING_CONTROL_ENABLED);
            EEPROM.commit();
            Serial.print("Timing control = ");
            Serial.println(EEPROM.read(EEPROM_TIMING_CONTROL_ENABLED_ADDRESS));
            tc_update_main(); // call the main update function to read data and set the light states
          }
        }

      } else {  // tc is set to false or something else

        if (tc_enabled == TIMING_CONTROL_ENABLED)
        {
          tc_enabled = TIMING_CONTROL_DISABLED;
          if (EEPROM.read(EEPROM_TIMING_CONTROL_ENABLED_ADDRESS) != TIMING_CONTROL_DISABLED)
          {
            EEPROM.write(EEPROM_TIMING_CONTROL_ENABLED_ADDRESS, TIMING_CONTROL_DISABLED);
            EEPROM.commit();
            Serial.print("Timing control = ");
            Serial.println(EEPROM.read(EEPROM_TIMING_CONTROL_ENABLED_ADDRESS));

            for (uint8_t i = 0 ; i < LIGHTS_COUNT; i++)
            {
              // set the default transition time for all lights
              process_lightdata(i, default_transitiontime);
            }
          }
        }
      }
    }

#ifndef DISABLE_WEB_CONTROL

    // scene switch handling
    if (server.hasArg("scene")) {
      scene = server.arg("scene").toInt();
      if (EEPROM.read(EEPROM_SCENE_ADDRESS) != scene) {
        EEPROM.write(EEPROM_SCENE_ADDRESS, scene);
        EEPROM.commit();
        Serial.print("Scene set to ");
        Serial.println(EEPROM.read(EEPROM_SCENE_ADDRESS));
      }
    }

    if (server.hasArg("dip")) {
      uint8_t tmp = EEPROM.read(EEPROM_DYNAMIC_IP_ADDRESS);
      uint8_t tmp2 = (server.arg("dip") == "true" ? 1 : 0);
      if (tmp != tmp2) {
        EEPROM.write(EEPROM_DYNAMIC_IP_ADDRESS, tmp2);
        EEPROM.commit();
        Serial.print("Set dynamic IP to ");
        Serial.println(EEPROM.read(EEPROM_DYNAMIC_IP_ADDRESS));
      }
    }

    // process the received data for every light
    for (int light = 0; light < LIGHTS_COUNT; light++)
    {

      if (server.hasArg("bri" + (String)light))
      {
        bri[light] = (int)server.arg("bri" + (String)light).toInt();
        Serial.print("Brightness ");
        Serial.print(light);
        Serial.print(" set to ");
        Serial.println(bri[light]);
      }

      if (server.hasArg("on" + (String)light))
      {
        uint8_t tmp = EEPROM.read(EEPROM_LAST_STATE_STARTUP_ADDRESS);
        if (server.arg("on" + (String)light) == "true" && light_state[light] == false)
        {
          light_state[light] = true;
          if (tmp == 0 && EEPROM.read(EEPROM_LAST_STATE_ADDRESS + light) == 0)
          {
            EEPROM.write(EEPROM_LAST_STATE_ADDRESS + light, LIGHT_STATE_ON);
          }
          Serial.print("Light ");
          Serial.print(light);
          Serial.print(" state set to ");
          Serial.println(light_state[light]);

        } else if (server.arg("on" + (String)light) == "false" && light_state[light] == true)
        {
          light_state[light] = false;
          if (tmp == 0 && EEPROM.read(EEPROM_LAST_STATE_ADDRESS + light) == 1)
          {
            EEPROM.write(EEPROM_LAST_STATE_ADDRESS + light, LIGHT_STATE_OFF);
          }
          Serial.print("Light ");
          Serial.print(light);
          Serial.print(" state set to ");
          Serial.println(light_state[light]);
        }

        EEPROM.commit();

        if (tc_enabled == TIMING_CONTROL_DISABLED)
        {
          process_lightdata(light, default_transitiontime);
        }
      } else {
        // light is off
        if (tc_enabled == TIMING_CONTROL_DISABLED)
        {
          process_lightdata(light, default_transitiontime);
        }
      }

      // start alerting for every light
      if (server.hasArg("alert"))
      {
        if (light_state[light])
        {
          current_bri[light] = 0;
        } else {
          current_bri[light] = 255;
        }
      }

    }  // process all lights

#endif  // DISABLE_WEB_CONTROL

    if (server.hasArg("resettc")) {  // reqrite the tc config and reboot
      tc_write_default();
      ESP.reset();
    }

    if (server.hasArg("reset")) {
      ESP.reset();
    }

    // Generate HTML page
    String http_content = "<!doctype html>";
    http_content += "<html>";
    http_content += "<head>";
    http_content += "<style></style>";
    http_content += "<meta charset=\"utf-8\">";
    http_content += "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">";
    //http_content += "<meta http-equiv=\"refresh\" content=\"15\">";  // Reload the page every 15 seconds automatically
    http_content += "<title>Light Setup</title>";
    http_content += "<script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>";
    http_content += "<script src=\"https://cdn.plot.ly/plotly-latest.min.js\"></script>";
    http_content += "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js\"></script>";
    http_content += "<link rel=\"stylesheet\" href=\"https://unpkg.com/purecss@0.6.2/build/pure-min.css\">";
    http_content += "</head>";
    http_content += "<body>";
    http_content += "<fieldset>";
    http_content += "<h3>" + (String)light_name + "</h3>";

    http_content += "<div class=\"pure-form pure-form-aligned\">";

    http_content += "<div class=\"pure-controls\">";
    http_content += "<span class=\"pure-form-message\"><a href=\"/?alert=1\">alert</a> &nbsp; <a href=\"/?reset=1\">reset</a> &nbsp; <a href=\"/?resettc\">reset timing control data</a> &nbsp; <a href=\"/update\">update</a></span>";
    http_content += "<label for=\"cb\" class=\"pure-checkbox\">";
    http_content += "</label>";
    http_content += "</div>";

    // timing control button
    http_content += "<br>";
    http_content += "<div class=\"pure-control-group\">";
    http_content += "<label for=\"tc_on\"><strong>Timing control</strong></label>";
    int tc_val = EEPROM.read(EEPROM_TIMING_CONTROL_ENABLED_ADDRESS);
    http_content += "<a id=\"tc_on\" class=\"pure-button";
    if (tc_val == TIMING_CONTROL_ENABLED) http_content += "  pure-button-primary";
    http_content += "\" href=\"#\">ON</a>";
    http_content += "<a id=\"tc_off\" class=\"pure-button";
    if (tc_val == TIMING_CONTROL_DISABLED) http_content += "  pure-button-primary";
    http_content += "\" href=\"#\">OFF</a>";
    http_content += "</div>";
    http_content += "<script>"
                    // Suche nach allen tc Links auf der Seite mit IDs tc_on
                    "var links = document.querySelectorAll('[id^=\"tc_on\"]');"
                    // Füge einen Klick-Listener zu jedem Link hinzu
                    "links.forEach(function(link) {"
                    "link.addEventListener('click', function(event) {"
                    // Verhindere, dass der Link die Seite neu lädt
                    "event.preventDefault();"
                    // Erstelle eine neue Anfrage an die entsprechende URL
                    "var xhr = new XMLHttpRequest();"
                    "xhr.open('GET', 'http://192.168.0.26/?tc=true', true);"
                    // Sende die Anfrage im Hintergrund
                    "xhr.send();"
                    "console.log('tc=true call');"
                    "document.getElementById('tc_on').classList.add('pure-button-primary');"
                    "document.getElementById('tc_off').classList.remove('pure-button-primary');"
                    "});"
                    "});"
                    // Suche nach allen tc Links auf der Seite mit IDs tc_off
                    "var links = document.querySelectorAll('[id^=\"tc_off\"]');"
                    // Füge einen Klick-Listener zu jedem Link hinzu
                    "links.forEach(function(link) {"
                    "link.addEventListener('click', function(event) {"
                    // Verhindere, dass der Link die Seite neu lädt
                    "event.preventDefault();"
                    // Erstelle eine neue Anfrage an die entsprechende URL
                    "var xhr = new XMLHttpRequest();"
                    "xhr.open('GET', 'http://192.168.0.26/?tc=false', true);"
                    // Sende die Anfrage im Hintergrund
                    "xhr.send();"
                    "console.log('tc=false call');"
                    "document.getElementById('tc_off').classList.add('pure-button-primary');"
                    "document.getElementById('tc_on').classList.remove('pure-button-primary');"
                    "});"
                    "});"
                    "</script>";
    http_content += "<br>";

    http_content += "<div class=\"pure-control-group\">";
    http_content += "<label for=\"transition\">Transition time (s)</label>";
    http_content += "<input id=\"transition\" name=\"transition\" type=\"text\" placeholder=\"10\" value=\"" + (String)default_transitiontime + "\">";
    http_content += "</div>";
    http_content += "<br>";

    http_content += "<script>"
                    "let timeoutId;" // slider value change submit to server
                    "function sendSliderValue(x) {"
                    "x = x - 1;"
                    "clearTimeout(timeoutId);"
                    "timeoutId = setTimeout(() => {"
                    "var value = document.getElementById(`bri${x}`).value;"
                    "var url = `http://192.168.0.26/?bri${x}=${value}`;"
                    "fetch(url).then(response => {"
                    "if (!response.ok) {"
                    "throw new Error(`HTTP error! status: ${response.status}`);"
                    "}"
                    "console.log(`Sent slider value ${value} to ${url}`);"
                    "}).catch(error => {"
                    "console.error(`Error sending slider value to ${url}: ${error}`);"
                    "});"
                    "}, 500);"
                    "}</script>";

#ifndef DISABLE_WEB_CONTROL
    http_content += "<br><table border=0><tr><td>";
    // Light control
    for (uint8 light_num = 0; light_num < LIGHTS_COUNT; light_num++)
    {
      // on/off buttons
      http_content += "<h4>Light " + (String)(light_num + 1) + "</h4>";
      http_content += "<div class=\"pure-control-group\">";
      http_content += "<label for=\"power\"><strong>Power</strong></label>";
      http_content += "<a id=\"on" + (String)light_num + "_on\" class=\"pure-button\" href=\"#\">ON</a>";
      http_content += "<a id=\"on" + (String)light_num + "_off\" class=\"pure-button\" href=\"#\">OFF</a>";
      http_content += "</div>";

      // slider for brightness
      http_content += "<div class=\"pure-control-group\">";
      http_content += "<label for=\"bri" + (String)light_num + "\">Bri</label>";
      http_content += "<input id=\"bri" + (String)light_num + "\" onchange=\"sendSliderValue(" + (String)(light_num+1) + ")\" name=\"bri" + (String)light_num + "\" type=\"range\" min=\"0\" max=\"255\" value=\"" + (String)bri[light_num] + "\">";
      http_content += "&nbsp;<span id=\"bri" + (String)light_num + "_val\" name=\"bri" + (String)light_num + "\">" + (String)(int)(bri[light_num] * 100.0 / 255.0) + "</span>%";
      http_content += "<br><label for=\"light" + (String)light_num + "_pwm\">PWM-Wert</label>";
      http_content += "<input type=\"range\" min=\"0\" max=\"100\" value=\"0\" id=\"light" + (String)light_num + "_pwm\" disabled>";
      http_content += "&nbsp;<span id=\"light" + (String)light_num + "_pwm_txt\"></span>%";
      http_content += "<script>";
      http_content += "var slider" + (String)light_num + " = document.getElementById(\"bri" + (String)light_num + "\");";
      http_content += "var output" + (String)light_num + " = document.getElementById(\"bri" + (String)light_num + "\_val\");";
      http_content += "output" + (String)light_num + ".innerHTML = (Math.round((slider" + (String)light_num + ".value * 100.0 / 255.0) * 100) / 100).toFixed(2);";
      http_content += "slider" + (String)light_num + ".oninput = function() {";
      http_content += "output" + (String)light_num + ".innerHTML = (Math.round((this.value * 100.0 / 255.0) * 100) / 100).toFixed(2);";
      http_content += "}";
      http_content += "</script>";

      http_content += "</div>";

    }
    http_content += "<script>"
                    // Suche nach allen Links auf der Seite mit IDs von on0_off bis on3_off
                    "var links = document.querySelectorAll('[id^=\"on\"][id$=\"_off\"]');"
                    // Füge einen Klick-Listener zu jedem Link hinzu
                    "links.forEach(function(link) {"
                    "link.addEventListener('click', function(event) {"
                    // Verhindere, dass der Link die Seite neu lädt
                    "event.preventDefault();"
                    // Extrahiere die Zahl aus der ID des Links
                    "var id = this.id.replace('on', '').replace('_off', '');"
                    // Erstelle eine neue Anfrage an die entsprechende URL
                    "var xhr = new XMLHttpRequest();"
                    "xhr.open('GET', 'http://192.168.0.26/?on' + id + '=false', true);"
                    // Sende die Anfrage im Hintergrund
                    "xhr.send();"
                    "updateLightState();"
                    "});"
                    "});"
                    // Suche nach allen Links auf der Seite mit IDs von on0_off bis on3_off
                    "var links = document.querySelectorAll('[id^=\"on\"][id$=\"_on\"]');"
                    // Füge einen Klick-Listener zu jedem Link hinzu
                    "links.forEach(function(link) {"
                    "link.addEventListener('click', function(event) {"
                    // Verhindere, dass der Link die Seite neu lädt
                    "event.preventDefault();"
                    // Extrahiere die Zahl aus der ID des Links
                    "var id = this.id.replace('on', '').replace('_on', '');"
                    // Erstelle eine neue Anfrage an die entsprechende URL
                    "var xhr = new XMLHttpRequest();"
                    "xhr.open('GET', 'http://192.168.0.26/?on' + id + '=true', true);"
                    // Sende die Anfrage im Hintergrund
                    "xhr.send();"
                    "updateLightState();"
                    "});"
                    "});"
                    "</script>";

    http_content += "<form class=\"pure-form pure-form-aligned\" action=\"/\" method=\"post\">";

    // startup state and scene for all of the lights
    http_content += "</td><td>";
    http_content += "<div id=\"plot_chart\"></div>";
    http_content += "</td></tr></table><br>";
    http_content += "<h3>Config</h3>";
    http_content += "<div class=\"pure-control-group\">";
    http_content += "<label for=\"startup\"><strong>Startup</strong></label>";
    http_content += "<select onchange=\"this.form.submit()\" id=\"startup\" name=\"startup\">";
    int ls_val = EEPROM.read(EEPROM_LAST_STATE_STARTUP_ADDRESS);
    http_content += "<option ";
    if (ls_val == LAST_STATE_STARTUP_LIGHT_LAST_STATE) http_content += "selected=\"selected\"";
    http_content += " value=\"0\">Last state</option>";
    http_content += "<option ";
    if (ls_val == LAST_STATE_STARTUP_LIGHT_ON_STATE) http_content += "selected=\"selected\"";
    http_content += " value=\"1\">On</option>";
    http_content += "<option ";
    if (ls_val == LAST_STATE_STARTUP_LIGHT_OFF_STATE) http_content += "selected=\"selected\"";
    http_content += " value=\"2\">Off</option>";
    http_content += "</select>";
    http_content += "</div>";

    // scene
    http_content += "<div class=\"pure-control-group\">";
    http_content += "<label for=\"scene\"><strong>Scene</strong></label>";
    http_content += "<select onchange = \"this.form.submit()\" id=\"scene\" name=\"scene\">";
    int sc_val = EEPROM.read(EEPROM_SCENE_ADDRESS);
    http_content += "<option ";
    if (sc_val == SCENE_RELEAX) http_content += "selected=\"selected\"";
    http_content += " value=\"0\">Relax</option>";
    http_content += "<option ";
    if (sc_val == SCENE_BRIGHT) http_content += "selected=\"selected\"";
    http_content += " value=\"1\">Bright</option>";
    http_content += "<option ";
    if (sc_val == SCENE_NIGHTLY) http_content += "selected=\"selected\"";
    http_content += " value=\"2\">Night</option>";
    http_content += "</select>";
    http_content += "</div>";

    // Wifi settings
    http_content += "<br>";
    http_content += "<h3>Wifi</h3>";
    http_content += "<div class=\"pure-control-group\">";
    http_content += "<label for=\"ip\">SSID</label>";
    http_content += "<input id=\"ssid\" name=\"ssid\" type=\"text\" value=\"" + WiFi.SSID() + "\">";
    http_content += "</div>";
    http_content += "<div class=\"pure-control-group\">";
    http_content += "<label for=\"wpw\">Passphrase</label>";
    http_content += "<input id=\"wpw\" name=\"wpw\" type=\"text\" placeholder=\"1234password\">";
    http_content += "</div>";

    // Network settings
    uint8_t dip = EEPROM.read(EEPROM_DYNAMIC_IP_ADDRESS);
    http_content += "<br>";
    http_content += "<h3>Network</h3>";
    http_content += "<div class=\"pure-control-group\">";
    http_content += "<label for=\"dip\"><strong>Dynamic-IP</strong></label>";
    http_content += "<a class=\"pure-button";
    if (dip) http_content += " pure-button-primary";
    http_content += "\" href=\"/?dip=true\">ON</a>";
    http_content += "<a class=\"pure-button";
    if (!dip) http_content += " pure-button-primary";
    http_content += "\" href=\"/?dip=false\">OFF</a>";
    http_content += "</div>";

    // ip config
    if (dip == 0) {
      http_content += "<div class=\"pure-control-group\">";
      http_content += "<label for=\"ip\">IP</label>";
      http_content += "<input id=\"ip\" name=\"ip\" type=\"text\" value=\"" + WiFi.localIP().toString() + "\">";
      http_content += "</div>";
      http_content += "<div class=\"pure-control-group\">";
      http_content += "<label for=\"gwip\">Gateway IP</label>";
      http_content += "<input id=\"gwip\" name=\"gwip\" type=\"text\" value=\"" + WiFi.gatewayIP().toString() + "\">";
      http_content += "</div>";
      http_content += "<div class=\"pure-control-group\">";
      http_content += "<label for=\"ip\">Netmask</label>";
      http_content += "<input id=\"netmask\" name=\"netmas\" type=\"text\" value=\"" + WiFi.subnetMask().toString() + "\">";
      http_content += "</div>";
    }

    // The save button
    http_content += "<div class=\"pure-controls\">";
    http_content += "<button type=\"submit\" class=\"pure-button pure-button-primary\">Save</button>";
    http_content += "</div>";

    http_content += "<script>"
                    "function loadData() {" // load tc data and generate graph
                    "console.log('----> generate graph <----');"
                    "$.getJSON('/tc_data_blocks', function(data) {"
                    "var currenttime = [];"
                    "var time = [];"
                    "var channel1 = [];"
                    "var channel2 = [];"
                    "var channel3 = [];"
                    "var channel4 = [];"
                    "for (var i = 0; i < data['tcdata'].length; i++) {"
                    "time.push(data['tcdata'][i]['hour'] + ':' + (data['tcdata'][i]['min'] < 10 ? '0' : '') + data['tcdata'][i]['min']);"
                    "channel1.push(data['tcdata'][i]['ch1']);"
                    "channel2.push(data['tcdata'][i]['ch2']);"
                    "channel3.push(data['tcdata'][i]['ch3']);"
                    "channel4.push(data['tcdata'][i]['ch4']);"
                    "}"
                    "currenttime.push(data['currenttime']['hour']);"
                    "currenttime.push(data['currenttime']['min']);"
                    "console.log(currenttime);"

                    // index suche für die vertikale linie
                    "var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1];"
                    "var index = time.indexOf(currentTimeStr);"
                    "if (index === -1) {"
                    "var lowerIndex = -1;"
                    "var upperIndex = -1;"
                    "for (var i = 0; i < time.length - 1; i++) {"
                    "console.log(time[i] + ' <= ' + currentTimeStr + ' >= ' + time[i+1]);"

                    "const currentDate = new Date();"
                    "const year = currentDate.getFullYear();"
                    "const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');"
                    "const day = currentDate.getDate().toString().padStart(2, '0');"
                    "const dateString = `${year}-${month}-${day}`;"
                    //"console.log(dateString);" // 2023-04-28

                    "const start = moment(dateString+' '+time[i], 'YYYY-MM-DD HH:mm');"
                    "const curr = moment(dateString+' '+currentTimeStr, 'YYYY-MM-DD HH:mm');"
                    "const end = moment(dateString+' '+time[i+1], 'YYYY-MM-DD HH:mm');"
                    "console.log(start.format('YYYY-MM-DD HH:mm') + ' <= ' + curr.format('YYYY-MM-DD HH:mm') + ' >= ' + end.format('YYYY-MM-DD HH:mm'));"

                    "console.log(curr.isBetween(start, end));"
                    "if (curr.isBetween(start, end)) {"
                    "lowerIndex = i;"
                    "upperIndex = i + 1;"
                    "break;"
                    "}"
                    "}"

                    "console.log('lowerIndex='+lowerIndex);"
                    "console.log('upperIndex='+upperIndex);"
                    "if (lowerIndex === -1 || upperIndex === -1) {"
                    "console.log(\"Error: Current time not found in time array and not between two elements in time array.\");"
                    "lowerIndex = 0;"
                    "upperIndex = 1;"
                    "var tmp1 = time[0].split(':');"
                    "console.log('tmp1 = ' + tmp1);"
                    "currenttime[0] = tmp1[0];"
                    "currenttime[1] = tmp1[1];"
                    "}"
                    "var lowerTime = time[lowerIndex].split(\":\");"
                    "var upperTime = time[upperIndex].split(\":\");"
                    "var timeDiff = (currenttime[0] - lowerTime[0]) + ((currenttime[1] - lowerTime[1]) / 60);"
                    "var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));"
                    "console.log(\"Index (float): \" + indexFloat);"
                    "} else {"
                    "console.log(\"Index (integer): \" + index);"
                    "console.log(\"Index (float): \" + index);"
                    "}"
                    "if (indexFloat > index) {"
                    "index = indexFloat;"
                    "}"
                    "console.log(\"index in graph >>>\" + index);"

                    // TODO in array dynamisch erzeugt umschreiben
                    "var trace1 = {"
                    "x: time,"
                    "y: channel1,"
                    "name: 'Channel 1',"
                    "type: 'scatter',"
                    "mode: 'lines+markers',"
                    "};"
                    "var trace2 = {"
                    "x: time,"
                    "y: channel2,"
                    "name: 'Channel 2',"
                    "type: 'scatter',"
                    "mode: 'lines+markers',"
                    "};"
                    "var trace3 = {"
                    "x: time,"
                    "y: channel3,"
                    "name: 'Channel 3',"
                    "type: 'scatter',"
                    "mode: 'lines+markers',"
                    "};"
                    "var trace4 = {"
                    "x: time,"
                    "y: channel4,"
                    "name: 'Channel 4',"
                    "type: 'scatter',"
                    "mode: 'lines+markers',"
                    "};"

                    "var layout = {"
                    "title: 'Timing Control Data Blocks',"
                    "xaxis: {"
                    "title: 'Time',"
                    "tickangle: -45,"
                    "},"
                    "yaxis: {"
                    "title: 'Brightness',"
                    "range: [0, 255],"
                    "},"
                    "shapes: [{"
                    "type: 'line',"
                    "x0: index,"
                    "y0: 0,"
                    "x1: index,"
                    "y1: 255,"
                    "line: {"
                    "color: 'lightgrey',"
                    "width: 3,"
                    "dash: 'dot'"
                    "}"
                    "}]"
                    "};"
                    "Plotly.newPlot('plot_chart', [trace1, trace2, trace3, trace4], layout);" // TODO array der traces dynamisch erzeugen
                    "});"
                    "}"
                    "setInterval(loadData, 10000);"
                    "loadData();"

                    "function updateLightState() {" // load the light data from server and set on state and brightness
                    "console.log('----> setting bri and power switch <----');"
                    "for (let i = 1; i <= 4; i++) {"
                    "const lightURL = `http://192.168.0.26/state?light=${i}`;"
                    "fetch(lightURL)"
                    ".then(response => response.json())"
                    ".then(data => {"
                    "const briSlider = document.getElementById(`bri${i - 1}`);"
                    "const briSliderVal = document.getElementById(`bri${i - 1}_val`);"
                    "const onLinkOn = document.getElementById(`on${i - 1}_on`);"
                    "const onLinkOff = document.getElementById(`on${i - 1}_off`);"
                    "briSlider.value = data.bri;"
                    "briSliderVal.innerHTML = (Math.round((data.bri * 100.0 / 255.0) * 100) / 100).toFixed(2);"
                    "console.log('data.on ' + i + ' = ' + data.on);"
                    "if (data.on == true) {"
                    //"console.log('true');"
                    "onLinkOn.classList.add('pure-button-primary');"
                    "onLinkOff.classList.remove('pure-button-primary');"
                    "} else {"
                    //"console.log('false');"
                    "onLinkOn.classList.remove('pure-button-primary');"
                    "onLinkOff.classList.add('pure-button-primary');"
                    "}"
                    "})"
                    ".catch(error => console.error(error));"
                    "}"
                    "}"
                    "setInterval(updateLightState, 10000);"
                    "updateLightState();"

                    // show pwm values in webinterface
                    "function updatePWMValues() {"
                    "console.log('----> setting pwm data <----');"
                    "for (let i = 0; i < " + (String)LIGHTS_COUNT + "; i++) {"
                    "const lightID = i + 1;"
                    "const pwmElement = document.getElementById(`light${i}_pwm`);"
                    "const pwmElementTxt = document.getElementById(`light${i}_pwm_txt`);"
                    "if (pwmElement) {"
                    "const url = `http://192.168.0.26/state?light=${lightID}`;"
                    "fetch(url)"
                    ".then(response => response.json())"
                    ".then(data => {"
                    "const pwmValue = ((Math.round((data.curpwm - ((data.curpwm >= " + (String)PWM_MIN+ ") ? " + (String)PWM_MIN + " : 0)) / " + (String)PWM_MAX + " * 10000) / 100).toFixed(2));"// pwm as % PWM_MIN to PWM_MAX
                    "console.log('curpwm[' + i + '] = ' + data.curpwm + ' = ' + pwmValue);"
                    "pwmElement.innerText = pwmValue.toString();"
                    "pwmElement.value = pwmValue;"
                    "pwmElementTxt.innerText = pwmValue.toString();"
                    "})"
                    ".catch(error => console.error(error));"
                    "}"
                    "}"
                    "}"
                    "updatePWMValues();"
                    "setInterval(updatePWMValues, 5000);"
                    "</script>";

#endif  // DISABLE_WEB_CONTROL

    http_content += "</form>";
    http_content += "</div>";
    http_content += "</fieldset>";
    http_content += "</body>";
    http_content += "</html>";

    server.send(200, "text/html", http_content);
  });

  server.on("/reset", []() {  // trigger manual reset
    server.send(200, "text/html", "reset");
    delay(1000);
    ESP.restart();
  });

  server.onNotFound(handleNotFound);
}