chore(format): initial formatting

README.md

@@ -21,9 +21,9 @@
 
 ## 📱 Implemented microcontrollers
 
--   [x] Lolin S2 mini
--   [ ] ESP 32 WROOM
--   [ ] ESP 32 C3
+- [x] Lolin S2 mini
+- [ ] ESP 32 WROOM
+- [ ] ESP 32 C3
 
 > For other microcontrollers you may need to adjust the `platformio.ini`
 

components/dmx/include/dmx.h

@@ -1,8 +1,7 @@
 #pragma once
 
 #ifdef __cplusplus
-extern "C"
-{
+extern "C" {
 #endif
 
 #ifdef __cplusplus

components/storage/include/storage.h

@@ -4,23 +4,22 @@
 #include "esp_err.h"
 
 #ifdef __cplusplus
-extern "C"
-{
+extern "C" {
 #endif
 
-  /**
-   * @brief Initialize and mount LittleFS filesystem
-   *
-   * @return ESP_OK on success, error code otherwise
-   */
-  esp_err_t storage_init(void);
+/**
+ * @brief Initialize and mount LittleFS filesystem
+ *
+ * @return ESP_OK on success, error code otherwise
+ */
+esp_err_t storage_init(void);
 
-  /**
-   * @brief Get the mount point for the LittleFS filesystem
-   *
-   * @return Pointer to the mount point string (e.g., "/data")
-   */
-  const char *storage_get_mount_point(void);
+/**
+ * @brief Get the mount point for the LittleFS filesystem
+ *
+ * @return Pointer to the mount point string (e.g., "/data")
+ */
+const char *storage_get_mount_point(void);
 
 #ifdef __cplusplus
 }

components/storage/src/storage.c

@@ -7,8 +7,7 @@
 static const char *TAG = "STORAGE";
 static const char *LITTLEFS_MOUNT_POINT = "/data";
 
-esp_err_t storage_init(void)
-{
+esp_err_t storage_init(void) {
   esp_vfs_littlefs_conf_t conf = {
       .base_path = LITTLEFS_MOUNT_POINT,
       .partition_label = "storage",
@@ -18,18 +17,12 @@ esp_err_t storage_init(void)
 
   esp_err_t ret = esp_vfs_littlefs_register(&conf);
 
-  if (ret != ESP_OK)
-  {
-    if (ret == ESP_FAIL)
-    {
+  if (ret != ESP_OK) {
+    if (ret == ESP_FAIL) {
       ESP_LOGE(TAG, "Failed to mount LittleFS or format filesystem");
-    }
-    else if (ret == ESP_ERR_INVALID_STATE)
-    {
+    } else if (ret == ESP_ERR_INVALID_STATE) {
       ESP_LOGE(TAG, "ESP_ERR_INVALID_STATE");
-    }
-    else
-    {
+    } else {
       ESP_LOGE(TAG, "Failed to initialize LittleFS: %s", esp_err_to_name(ret));
     }
     return ret;
@@ -37,20 +30,14 @@ esp_err_t storage_init(void)
 
   size_t total = 0, used = 0;
   ret = esp_littlefs_info(conf.partition_label, &total, &used);
-  if (ret == ESP_OK)
-  {
+  if (ret == ESP_OK) {
     ESP_LOGI(TAG, "LittleFS mounted at %s. Total: %d bytes, Used: %d bytes",
              LITTLEFS_MOUNT_POINT, total, used);
-  }
-  else
-  {
+  } else {
     ESP_LOGE(TAG, "Failed to get LittleFS information");
   }
 
   return ESP_OK;
 }
 
-const char *storage_get_mount_point(void)
-{
-  return LITTLEFS_MOUNT_POINT;
-}
+const char *storage_get_mount_point(void) { return LITTLEFS_MOUNT_POINT; }

components/web_server/include/web_server.h

@@ -1,6 +1,7 @@
 /**
  * @file web_server.h
- * @brief Simple HTTP web server component for ESP32 with async FreeRTOS support.
+ * @brief Simple HTTP web server component for ESP32 with async FreeRTOS
+ * support.
  */
 
 #pragma once
@@ -8,50 +9,50 @@
 #include "esp_http_server.h"
 
 #ifdef __cplusplus
-extern "C"
-{
+extern "C" {
 #endif
 
-  /**
-   * @brief Web server configuration structure.
-   */
-  typedef struct
-  {
-    uint16_t port;             ///< HTTP server port (default: 80)
-    size_t max_uri_handlers;   ///< Maximum number of URI handlers
-    size_t stack_size;         ///< FreeRTOS task stack size
-    UBaseType_t task_priority; ///< FreeRTOS task priority
-  } webserver_config_t;
+/**
+ * @brief Web server configuration structure.
+ */
+typedef struct {
+  uint16_t port;             ///< HTTP server port (default: 80)
+  size_t max_uri_handlers;   ///< Maximum number of URI handlers
+  size_t stack_size;         ///< FreeRTOS task stack size
+  UBaseType_t task_priority; ///< FreeRTOS task priority
+} webserver_config_t;
 
-  /**
-   * @brief Initialize and start the HTTP web server.
-   *
-   * This function creates a FreeRTOS task that manages the HTTP server.
-   * It serves static files from the data/ folder and supports dynamic handler registration.
-   *
-   * @param config Configuration structure. If NULL, default values are used.
-   * @return HTTP server handle on success, NULL on failure.
-   */
-  httpd_handle_t webserver_start(const webserver_config_t *config);
+/**
+ * @brief Initialize and start the HTTP web server.
+ *
+ * This function creates a FreeRTOS task that manages the HTTP server.
+ * It serves static files from the data/ folder and supports dynamic handler
+ * registration.
+ *
+ * @param config Configuration structure. If NULL, default values are used.
+ * @return HTTP server handle on success, NULL on failure.
+ */
+httpd_handle_t webserver_start(const webserver_config_t *config);
 
-  /**
-   * @brief Stop the web server and cleanup resources.
-   *
-   * @param server HTTP server handle returned by webserver_start().
-   *                Safe to pass NULL.
-   */
-  void webserver_stop(httpd_handle_t server);
+/**
+ * @brief Stop the web server and cleanup resources.
+ *
+ * @param server HTTP server handle returned by webserver_start().
+ *                Safe to pass NULL.
+ */
+void webserver_stop(httpd_handle_t server);
 
-  /**
-   * @brief Register a custom URI handler.
-   *
-   * This allows dynamic registration of API endpoints and other custom handlers.
-   *
-   * @param server HTTP server handle.
-   * @param uri_handler Pointer to httpd_uri_t structure.
-   * @return ESP_OK on success, error code otherwise.
-   */
-  esp_err_t webserver_register_handler(httpd_handle_t server, const httpd_uri_t *uri_handler);
+/**
+ * @brief Register a custom URI handler.
+ *
+ * This allows dynamic registration of API endpoints and other custom handlers.
+ *
+ * @param server HTTP server handle.
+ * @param uri_handler Pointer to httpd_uri_t structure.
+ * @return ESP_OK on success, error code otherwise.
+ */
+esp_err_t webserver_register_handler(httpd_handle_t server,
+                                     const httpd_uri_t *uri_handler);
 
 #ifdef __cplusplus
 }

components/web_server/include/wifi.h

@@ -3,12 +3,12 @@
 #include "esp_err.h"
 
 #ifdef __cplusplus
-extern "C"
-{
+extern "C" {
 #endif
 
-  esp_err_t wifi_start_ap(const char *ssid, const char *password, uint8_t channel, uint8_t max_connections);
-  void wifi_stop_ap(void);
+esp_err_t wifi_start_ap(const char *ssid, const char *password, uint8_t channel,
+                        uint8_t max_connections);
+void wifi_stop_ap(void);
 
 #ifdef __cplusplus
 }

components/web_server/src/web_server.c

@@ -25,240 +25,219 @@ static TaskHandle_t s_server_task_handle = NULL;
 /**
  * @brief Get MIME type based on file extension
  */
-static const char *get_mime_type(const char *filename)
-{
-    const char *dot = strrchr(filename, '.');
-    if (!dot)
-        return "application/octet-stream";
-
-    if (strcmp(dot, ".html") == 0)
-        return "text/html";
-    if (strcmp(dot, ".css") == 0)
-        return "text/css";
-    if (strcmp(dot, ".js") == 0)
-        return "application/javascript";
-    if (strcmp(dot, ".json") == 0)
-        return "application/json";
-    if (strcmp(dot, ".png") == 0)
-        return "image/png";
-    if (strcmp(dot, ".jpg") == 0 || strcmp(dot, ".jpeg") == 0)
-        return "image/jpeg";
-    if (strcmp(dot, ".gif") == 0)
-        return "image/gif";
-    if (strcmp(dot, ".svg") == 0)
-        return "image/svg+xml";
-    if (strcmp(dot, ".ico") == 0)
-        return "image/x-icon";
-    if (strcmp(dot, ".txt") == 0)
-        return "text/plain";
-    if (strcmp(dot, ".xml") == 0)
-        return "application/xml";
-    if (strcmp(dot, ".wav") == 0)
-        return "audio/wav";
-    if (strcmp(dot, ".mp3") == 0)
-        return "audio/mpeg";
-
+static const char *get_mime_type(const char *filename) {
+  const char *dot = strrchr(filename, '.');
+  if (!dot)
     return "application/octet-stream";
+
+  if (strcmp(dot, ".html") == 0)
+    return "text/html";
+  if (strcmp(dot, ".css") == 0)
+    return "text/css";
+  if (strcmp(dot, ".js") == 0)
+    return "application/javascript";
+  if (strcmp(dot, ".json") == 0)
+    return "application/json";
+  if (strcmp(dot, ".png") == 0)
+    return "image/png";
+  if (strcmp(dot, ".jpg") == 0 || strcmp(dot, ".jpeg") == 0)
+    return "image/jpeg";
+  if (strcmp(dot, ".gif") == 0)
+    return "image/gif";
+  if (strcmp(dot, ".svg") == 0)
+    return "image/svg+xml";
+  if (strcmp(dot, ".ico") == 0)
+    return "image/x-icon";
+  if (strcmp(dot, ".txt") == 0)
+    return "text/plain";
+  if (strcmp(dot, ".xml") == 0)
+    return "application/xml";
+  if (strcmp(dot, ".wav") == 0)
+    return "audio/wav";
+  if (strcmp(dot, ".mp3") == 0)
+    return "audio/mpeg";
+
+  return "application/octet-stream";
 }
 
 /**
  * @brief HTTP handler for static files from LittleFS
  */
-static esp_err_t static_file_handler(httpd_req_t *req)
-{
-    // Build the file path
-    char filepath[1024];
-    snprintf(filepath, sizeof(filepath), "%s%s", storage_get_mount_point(), req->uri);
+static esp_err_t static_file_handler(httpd_req_t *req) {
+  // Build the file path
+  char filepath[1024];
+  snprintf(filepath, sizeof(filepath), "%s%s", storage_get_mount_point(),
+           req->uri);
 
-    // Handle root path
-    if (strcmp(req->uri, "/") == 0)
-    {
-        snprintf(filepath, sizeof(filepath), "%s/index.html", storage_get_mount_point());
-    }
+  // Handle root path
+  if (strcmp(req->uri, "/") == 0) {
+    snprintf(filepath, sizeof(filepath), "%s/index.html",
+             storage_get_mount_point());
+  }
 
-    FILE *f = fopen(filepath, "r");
-    if (!f)
-    {
-        ESP_LOGW(TAG, "File not found: %s", filepath);
-        httpd_resp_send_404(req);
-        return ESP_OK;
-    }
-
-    // Get MIME type and set content type
-    const char *mime_type = get_mime_type(filepath);
-    httpd_resp_set_type(req, mime_type);
-
-    // Send file in chunks
-    char buf[1024];
-    size_t read_len;
-    while ((read_len = fread(buf, 1, sizeof(buf), f)) > 0)
-    {
-        if (httpd_resp_send_chunk(req, buf, read_len) != ESP_OK)
-        {
-            ESP_LOGW(TAG, "Failed to send data chunk for %s", filepath);
-            break;
-        }
-    }
-
-    fclose(f);
-    httpd_resp_send_chunk(req, NULL, 0); // Send end marker
+  FILE *f = fopen(filepath, "r");
+  if (!f) {
+    ESP_LOGW(TAG, "File not found: %s", filepath);
+    httpd_resp_send_404(req);
     return ESP_OK;
+  }
+
+  // Get MIME type and set content type
+  const char *mime_type = get_mime_type(filepath);
+  httpd_resp_set_type(req, mime_type);
+
+  // Send file in chunks
+  char buf[1024];
+  size_t read_len;
+  while ((read_len = fread(buf, 1, sizeof(buf), f)) > 0) {
+    if (httpd_resp_send_chunk(req, buf, read_len) != ESP_OK) {
+      ESP_LOGW(TAG, "Failed to send data chunk for %s", filepath);
+      break;
+    }
+  }
+
+  fclose(f);
+  httpd_resp_send_chunk(req, NULL, 0); // Send end marker
+  return ESP_OK;
 }
 
 /**
  * @brief HTTP handler for API health check (GET /api/health)
  */
-static esp_err_t health_check_handler(httpd_req_t *req)
-{
-    httpd_resp_set_type(req, "application/json");
-    httpd_resp_sendstr(req, "{\"status\":\"ok\"}");
-    return ESP_OK;
+static esp_err_t health_check_handler(httpd_req_t *req) {
+  httpd_resp_set_type(req, "application/json");
+  httpd_resp_sendstr(req, "{\"status\":\"ok\"}");
+  return ESP_OK;
 }
 
 /**
  * @brief FreeRTOS task function for the HTTP server.
  * Allows non-blocking server operation and future extensibility.
  */
-static void webserver_task(void *arg)
-{
-    (void)arg; // Unused parameter
-    ESP_LOGI(TAG, "Web server task started");
+static void webserver_task(void *arg) {
+  (void)arg; // Unused parameter
+  ESP_LOGI(TAG, "Web server task started");
 
-    // Keep task alive - the server runs in the background
-    while (s_server_handle != NULL)
-    {
-        vTaskDelay(pdMS_TO_TICKS(10000)); // 10 second check interval
-    }
+  // Keep task alive - the server runs in the background
+  while (s_server_handle != NULL) {
+    vTaskDelay(pdMS_TO_TICKS(10000)); // 10 second check interval
+  }
 
-    ESP_LOGI(TAG, "Web server task ending");
-    vTaskDelete(NULL);
+  ESP_LOGI(TAG, "Web server task ending");
+  vTaskDelete(NULL);
 }
 
-httpd_handle_t webserver_start(const webserver_config_t *config)
-{
-    if (s_server_handle != NULL)
-    {
-        ESP_LOGW(TAG, "Web server already running");
-        return s_server_handle;
-    }
-
-    // Initialize LittleFS
-    esp_err_t ret = storage_init();
-    if (ret != ESP_OK)
-    {
-        ESP_LOGE(TAG, "Failed to initialize storage");
-        return NULL;
-    }
-
-    // Use provided config or defaults
-    uint16_t port = WEBSERVER_DEFAULT_PORT;
-    size_t max_handlers = WEBSERVER_DEFAULT_MAX_HANDLERS;
-    size_t stack_size = WEBSERVER_DEFAULT_STACK_SIZE;
-    UBaseType_t task_priority = WEBSERVER_DEFAULT_TASK_PRIORITY;
-
-    if (config)
-    {
-        port = config->port;
-        max_handlers = config->max_uri_handlers;
-        stack_size = config->stack_size;
-        task_priority = config->task_priority;
-    }
-
-    // Create HTTP server configuration
-    httpd_config_t http_config = HTTPD_DEFAULT_CONFIG();
-    http_config.server_port = port;
-    http_config.max_uri_handlers = max_handlers;
-    http_config.stack_size = stack_size;
-    http_config.uri_match_fn = httpd_uri_match_wildcard;
-
-    // Start HTTP server
-    ret = httpd_start(&s_server_handle, &http_config);
-    if (ret != ESP_OK)
-    {
-        ESP_LOGE(TAG, "Failed to start HTTP server: %s", esp_err_to_name(ret));
-        s_server_handle = NULL;
-        return NULL;
-    }
-
-    ESP_LOGI(TAG, "HTTP server started on port %d", port);
-
-    // Register default handlers
-    // Health check endpoint
-    httpd_uri_t health_uri = {
-        .uri = "/api/health",
-        .method = HTTP_GET,
-        .handler = health_check_handler,
-        .user_ctx = NULL,
-    };
-    httpd_register_uri_handler(s_server_handle, &health_uri);
-
-    // Wildcard handler for static files from LittleFS (must be last)
-    httpd_uri_t file_uri = {
-        .uri = "/*",
-        .method = HTTP_GET,
-        .handler = static_file_handler,
-        .user_ctx = NULL,
-    };
-    httpd_register_uri_handler(s_server_handle, &file_uri);
-
-    // Create FreeRTOS task for the server
-    // This allows other tasks to continue running and makes the server async-ready
-    BaseType_t task_ret = xTaskCreate(
-        webserver_task,
-        "webserver",
-        stack_size,
-        (void *)s_server_handle,
-        task_priority,
-        &s_server_task_handle);
-
-    if (task_ret != pdPASS)
-    {
-        ESP_LOGE(TAG, "Failed to create web server task");
-        httpd_stop(s_server_handle);
-        s_server_handle = NULL;
-        return NULL;
-    }
-
-    ESP_LOGI(TAG, "Web server initialized successfully");
+httpd_handle_t webserver_start(const webserver_config_t *config) {
+  if (s_server_handle != NULL) {
+    ESP_LOGW(TAG, "Web server already running");
     return s_server_handle;
-}
+  }
 
-void webserver_stop(httpd_handle_t server)
-{
-    if (server == NULL)
-    {
-        return;
-    }
+  // Initialize LittleFS
+  esp_err_t ret = storage_init();
+  if (ret != ESP_OK) {
+    ESP_LOGE(TAG, "Failed to initialize storage");
+    return NULL;
+  }
 
-    httpd_stop(server);
+  // Use provided config or defaults
+  uint16_t port = WEBSERVER_DEFAULT_PORT;
+  size_t max_handlers = WEBSERVER_DEFAULT_MAX_HANDLERS;
+  size_t stack_size = WEBSERVER_DEFAULT_STACK_SIZE;
+  UBaseType_t task_priority = WEBSERVER_DEFAULT_TASK_PRIORITY;
+
+  if (config) {
+    port = config->port;
+    max_handlers = config->max_uri_handlers;
+    stack_size = config->stack_size;
+    task_priority = config->task_priority;
+  }
+
+  // Create HTTP server configuration
+  httpd_config_t http_config = HTTPD_DEFAULT_CONFIG();
+  http_config.server_port = port;
+  http_config.max_uri_handlers = max_handlers;
+  http_config.stack_size = stack_size;
+  http_config.uri_match_fn = httpd_uri_match_wildcard;
+
+  // Start HTTP server
+  ret = httpd_start(&s_server_handle, &http_config);
+  if (ret != ESP_OK) {
+    ESP_LOGE(TAG, "Failed to start HTTP server: %s", esp_err_to_name(ret));
     s_server_handle = NULL;
+    return NULL;
+  }
 
-    // Wait for task to finish
-    if (s_server_task_handle != NULL)
-    {
-        vTaskDelay(pdMS_TO_TICKS(100));
-        s_server_task_handle = NULL;
-    }
+  ESP_LOGI(TAG, "HTTP server started on port %d", port);
 
-    ESP_LOGI(TAG, "Web server stopped");
+  // Register default handlers
+  // Health check endpoint
+  httpd_uri_t health_uri = {
+      .uri = "/api/health",
+      .method = HTTP_GET,
+      .handler = health_check_handler,
+      .user_ctx = NULL,
+  };
+  httpd_register_uri_handler(s_server_handle, &health_uri);
+
+  // Wildcard handler for static files from LittleFS (must be last)
+  httpd_uri_t file_uri = {
+      .uri = "/*",
+      .method = HTTP_GET,
+      .handler = static_file_handler,
+      .user_ctx = NULL,
+  };
+  httpd_register_uri_handler(s_server_handle, &file_uri);
+
+  // Create FreeRTOS task for the server
+  // This allows other tasks to continue running and makes the server
+  // async-ready
+  BaseType_t task_ret = xTaskCreate(webserver_task, "webserver", stack_size,
+                                    (void *)s_server_handle, task_priority,
+                                    &s_server_task_handle);
+
+  if (task_ret != pdPASS) {
+    ESP_LOGE(TAG, "Failed to create web server task");
+    httpd_stop(s_server_handle);
+    s_server_handle = NULL;
+    return NULL;
+  }
+
+  ESP_LOGI(TAG, "Web server initialized successfully");
+  return s_server_handle;
 }
 
-esp_err_t webserver_register_handler(httpd_handle_t server, const httpd_uri_t *uri_handler)
-{
-    if (server == NULL || uri_handler == NULL)
-    {
-        return ESP_ERR_INVALID_ARG;
-    }
+void webserver_stop(httpd_handle_t server) {
+  if (server == NULL) {
+    return;
+  }
 
-    esp_err_t ret = httpd_register_uri_handler(server, uri_handler);
-    if (ret == ESP_OK)
-    {
-        ESP_LOGI(TAG, "Registered handler: %s [%d]", uri_handler->uri, uri_handler->method);
-    }
-    else
-    {
-        ESP_LOGE(TAG, "Failed to register handler %s: %s", uri_handler->uri, esp_err_to_name(ret));
-    }
+  httpd_stop(server);
+  s_server_handle = NULL;
 
-    return ret;
+  // Wait for task to finish
+  if (s_server_task_handle != NULL) {
+    vTaskDelay(pdMS_TO_TICKS(100));
+    s_server_task_handle = NULL;
+  }
+
+  ESP_LOGI(TAG, "Web server stopped");
+}
+
+esp_err_t webserver_register_handler(httpd_handle_t server,
+                                     const httpd_uri_t *uri_handler) {
+  if (server == NULL || uri_handler == NULL) {
+    return ESP_ERR_INVALID_ARG;
+  }
+
+  esp_err_t ret = httpd_register_uri_handler(server, uri_handler);
+  if (ret == ESP_OK) {
+    ESP_LOGI(TAG, "Registered handler: %s [%d]", uri_handler->uri,
+             uri_handler->method);
+  } else {
+    ESP_LOGE(TAG, "Failed to register handler %s: %s", uri_handler->uri,
+             esp_err_to_name(ret));
+  }
+
+  return ret;
 }

components/web_server/src/wifi.c

@@ -11,32 +11,28 @@
 static const char *TAG = "WIFI";
 static bool s_wifi_started = false;
 
-esp_err_t wifi_start_ap(const char *ssid, const char *password, uint8_t channel, uint8_t max_connections)
-{
-  if (s_wifi_started)
-  {
+esp_err_t wifi_start_ap(const char *ssid, const char *password, uint8_t channel,
+                        uint8_t max_connections) {
+  if (s_wifi_started) {
     return ESP_OK;
   }
 
-  if (!ssid || strlen(ssid) == 0 || strlen(ssid) > 32)
-  {
+  if (!ssid || strlen(ssid) == 0 || strlen(ssid) > 32) {
     return ESP_ERR_INVALID_ARG;
   }
 
   const bool has_password = password && strlen(password) > 0;
-  if (has_password && strlen(password) < 8)
-  {
+  if (has_password && strlen(password) < 8) {
     return ESP_ERR_INVALID_ARG;
   }
 
   esp_err_t err = nvs_flash_init();
-  if (err == ESP_ERR_NVS_NO_FREE_PAGES || err == ESP_ERR_NVS_NEW_VERSION_FOUND)
-  {
+  if (err == ESP_ERR_NVS_NO_FREE_PAGES ||
+      err == ESP_ERR_NVS_NEW_VERSION_FOUND) {
     ESP_ERROR_CHECK(nvs_flash_erase());
     err = nvs_flash_init();
   }
-  if (err != ESP_OK)
-  {
+  if (err != ESP_OK) {
     return err;
   }
 
@@ -48,22 +44,24 @@ esp_err_t wifi_start_ap(const char *ssid, const char *password, uint8_t channel,
   ESP_ERROR_CHECK(esp_wifi_init(&cfg));
 
   wifi_config_t wifi_config = {
-      .ap = {
-          .channel = channel,
-          .max_connection = max_connections,
-          .authmode = has_password ? WIFI_AUTH_WPA2_PSK : WIFI_AUTH_OPEN,
-          .pmf_cfg = {
-              .required = false,
+      .ap =
+          {
+              .channel = channel,
+              .max_connection = max_connections,
+              .authmode = has_password ? WIFI_AUTH_WPA2_PSK : WIFI_AUTH_OPEN,
+              .pmf_cfg =
+                  {
+                      .required = false,
+                  },
           },
-      },
   };
 
   strlcpy((char *)wifi_config.ap.ssid, ssid, sizeof(wifi_config.ap.ssid));
   wifi_config.ap.ssid_len = strlen(ssid);
 
-  if (has_password)
-  {
-    strlcpy((char *)wifi_config.ap.password, password, sizeof(wifi_config.ap.password));
+  if (has_password) {
+    strlcpy((char *)wifi_config.ap.password, password,
+            sizeof(wifi_config.ap.password));
   }
 
   ESP_ERROR_CHECK(esp_wifi_set_mode(WIFI_MODE_AP));
@@ -75,10 +73,8 @@ esp_err_t wifi_start_ap(const char *ssid, const char *password, uint8_t channel,
   return ESP_OK;
 }
 
-void wifi_stop_ap(void)
-{
-  if (!s_wifi_started)
-  {
+void wifi_stop_ap(void) {
+  if (!s_wifi_started) {
     return;
   }
 

data/index.html

@@ -1,328 +1,313 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Konfiguration</title>
-        <link rel="stylesheet" href="/style.css" />
-        <script type="module" src="/input-visibility.js" defer></script>
-        <script type="module" src="/loading-screen.js" defer></script>
-        <script type="module" src="/load-data.js" defer></script>
-        <script type="module" src="/networks.js" defer></script>
-        <script type="module" src="/submit.js" defer></script>
-        <script type="module" src="/reset.js" defer></script>
-        <script type="module" src="/range-input.js" defer></script>
-        <script type="module" src="/status.js" defer></script>
-        <script type="module" src="/websocket.js" defer></script>
-    </head>
-    <body>
-        <main>
-            <section class="loading-screen">
-                <div class="spinner-container">
-                    <!-- h2 is filled dynamically -->
-                    <h2></h2>
-                    <div class="spinner"></div>
-                    <button
-                        class="reload"
-                        type="button"
-                        onclick="window.location.reload()"
-                    >
-                        Seite neu laden
-                    </button>
-                </div>
-            </section>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Konfiguration</title>
+    <link rel="stylesheet" href="/style.css" />
+    <script type="module" src="/input-visibility.js" defer></script>
+    <script type="module" src="/loading-screen.js" defer></script>
+    <script type="module" src="/load-data.js" defer></script>
+    <script type="module" src="/networks.js" defer></script>
+    <script type="module" src="/submit.js" defer></script>
+    <script type="module" src="/reset.js" defer></script>
+    <script type="module" src="/range-input.js" defer></script>
+    <script type="module" src="/status.js" defer></script>
+    <script type="module" src="/websocket.js" defer></script>
+  </head>
+  <body>
+    <main>
+      <section class="loading-screen">
+        <div class="spinner-container">
+          <!-- h2 is filled dynamically -->
+          <h2></h2>
+          <div class="spinner"></div>
+          <button
+            class="reload"
+            type="button"
+            onclick="window.location.reload()"
+          >
+            Seite neu laden
+          </button>
+        </div>
+      </section>
 
-            <section class="content hidden">
-                <div class="status">
-                    <!-- placeholder for wifi icon -->
-                    <img class="connection-icon" src="" alt="" />
-                    <span>Temp.: <span class="cpu-temp"></span> °C</span>
-                    <span>Heap: <span class="heap-percentage"></span> %</span>
-                    <span>PSRAM: <span class="psram-percentage"></span> %</span>
-                    <span>Uptime: <span class="uptime"></span></span>
+      <section class="content hidden">
+        <div class="status">
+          <!-- placeholder for wifi icon -->
+          <img class="connection-icon" src="" alt="" />
+          <span>Temp.: <span class="cpu-temp"></span> °C</span>
+          <span>Heap: <span class="heap-percentage"></span> %</span>
+          <span>PSRAM: <span class="psram-percentage"></span> %</span>
+          <span>Uptime: <span class="uptime"></span></span>
 
-                    <button type="button" class="expand-status icon-button">
-                        <img src="/icons/open.svg" alt="Mehr" />
-                    </button>
-                </div>
+          <button type="button" class="expand-status icon-button">
+            <img src="/icons/open.svg" alt="Mehr" />
+          </button>
+        </div>
 
-                <dialog class="dialog-status">
-                    <div class="dialog-header">
-                        <h2 class="model"></h2>
-                        <form method="dialog">
-                            <button type="submit" class="icon-button">
-                                <img src="/icons/close.svg" alt="Schließen" />
-                            </button>
-                        </form>
-                    </div>
+        <dialog class="dialog-status">
+          <div class="dialog-header">
+            <h2 class="model"></h2>
+            <form method="dialog">
+              <button type="submit" class="icon-button">
+                <img src="/icons/close.svg" alt="Schließen" />
+              </button>
+            </form>
+          </div>
 
-                    <div class="dialog-status-content">
-                        <div class="card">
-                            <span>Signalstärke</span>
-                            <span class="centered-vertical">
-                                <img
-                                    class="connection-icon small"
-                                    src=""
-                                    alt=""
-                                />
-                                <span><span class="rssi"></span> dBm</span>
-                            </span>
-                        </div>
+          <div class="dialog-status-content">
+            <div class="card">
+              <span>Signalstärke</span>
+              <span class="centered-vertical">
+                <img class="connection-icon small" src="" alt="" />
+                <span><span class="rssi"></span> dBm</span>
+              </span>
+            </div>
 
-                        <div class="card">
-                            <span>Uptime</span>
-                            <span class="uptime"></span>
-                        </div>
+            <div class="card">
+              <span>Uptime</span>
+              <span class="uptime"></span>
+            </div>
 
-                        <div class="card">
-                            <span>CPU-Temperatur</span>
-                            <span><span class="cpu-temp"></span> °C</span>
-                        </div>
+            <div class="card">
+              <span>CPU-Temperatur</span>
+              <span><span class="cpu-temp"></span> °C</span>
+            </div>
 
-                        <div class="card">
-                            <span>CPU Cycle Count</span>
-                            <span class="cpu-cycle-count"></span>
-                        </div>
+            <div class="card">
+              <span>CPU Cycle Count</span>
+              <span class="cpu-cycle-count"></span>
+            </div>
 
-                        <div class="card">
-                            <span>Heap</span>
-                            <span><span class="heap-percentage"></span> %</span>
-                            <span
-                                ><span class="heap-used"></span> /
-                                <span class="heap-total"></span
-                            ></span>
-                        </div>
+            <div class="card">
+              <span>Heap</span>
+              <span><span class="heap-percentage"></span> %</span>
+              <span
+                ><span class="heap-used"></span> /
+                <span class="heap-total"></span
+              ></span>
+            </div>
 
-                        <div class="card">
-                            <span>PSRAM</span>
-                            <span
-                                ><span class="psram-percentage"></span> %</span
-                            >
-                            <span
-                                ><span class="psram-used"></span> /
-                                <span class="psram-total"></span
-                            ></span>
-                        </div>
+            <div class="card">
+              <span>PSRAM</span>
+              <span><span class="psram-percentage"></span> %</span>
+              <span
+                ><span class="psram-used"></span> /
+                <span class="psram-total"></span
+              ></span>
+            </div>
 
-                        <div class="card">
-                            <span>CPU-Taktfrequenz</span>
-                            <span><span class="cpu-freq"></span> MHz</span>
-                        </div>
+            <div class="card">
+              <span>CPU-Taktfrequenz</span>
+              <span><span class="cpu-freq"></span> MHz</span>
+            </div>
 
-                        <div class="card">
-                            <span>MAC-Adresse</span>
-                            <span class="mac"></span>
-                        </div>
+            <div class="card">
+              <span>MAC-Adresse</span>
+              <span class="mac"></span>
+            </div>
 
-                        <div class="card">
-                            <span>Script-Hash</span>
-                            <span class="hash"></span>
-                        </div>
+            <div class="card">
+              <span>Script-Hash</span>
+              <span class="hash"></span>
+            </div>
 
-                        <div class="card">
-                            <span>SDK-Version</span>
-                            <span class="sdk-version"></span>
-                        </div>
-                    </div>
-                </dialog>
+            <div class="card">
+              <span>SDK-Version</span>
+              <span class="sdk-version"></span>
+            </div>
+          </div>
+        </dialog>
 
-                <form class="config">
-                    <h1>Konfiguration</h1>
-                    <fieldset>
-                        <legend>Verbindung</legend>
-                        <label>
-                            <span>IP-Zuweisung:</span>
-                            <select
-                                name="ip-method"
-                                id="input-ip-method"
-                                title="IP-"
-                                required
-                            >
-                                <option value="0">Statisch</option>
-                                <option value="1">DHCP</option>
-                            </select>
-                        </label>
-                        <div data-field="input-ip-method" data-values="0">
-                            <label>
-                                <span>IP-Adresse:</span>
-                                <input
-                                    type="text"
-                                    name="ip"
-                                    id="input-ip"
-                                    placeholder="IP-Adresse"
-                                    required
-                                />
-                            </label>
-                            <label>
-                                <span>Subnetzmaske:</span>
-                                <input
-                                    type="text"
-                                    name="subnet"
-                                    id="input-subnet"
-                                    placeholder="Subnetzmaske"
-                                    required
-                                />
-                            </label>
-                            <label>
-                                <span>Gateway:</span>
-                                <input
-                                    type="text"
-                                    name="gateway"
-                                    id="input-gateway"
-                                    placeholder="Gateway"
-                                    required
-                                />
-                            </label>
-                        </div>
-                        <label>
-                            <span>Verbindungsmethode:</span>
-                            <select
-                                name="connection"
-                                id="input-connection"
-                                title="Verbindung"
-                                required
-                            >
-                                <option value="0">WiFi-Station</option>
-                                <option value="1">WiFi-AccessPoint</option>
-                                <option value="2">Ethernet</option>
-                            </select>
-                        </label>
-                        <div data-field="input-connection" data-values="1">
-                            <label>
-                                <span>SSID:</span>
-                                <input
-                                    type="text"
-                                    name="ssid"
-                                    id="input-ssid"
-                                    placeholder="SSID"
-                                    required
-                                />
-                            </label>
-                        </div>
-                        <div data-field="input-connection" data-values="0">
-                            <label>
-                                <span>Netzwerk:</span>
-                                <select
-                                    name="ssid"
-                                    id="select-network"
-                                    title="Netzwerk"
-                                    required
-                                ></select>
-                                <button
-                                    type="button"
-                                    id="refresh-networks"
-                                    class="icon-button"
-                                >
-                                    <img
-                                        src="/icons/refresh.svg"
-                                        alt="Neu laden"
-                                    />
-                                </button>
-                            </label>
-                        </div>
-                        <div data-field="input-connection" data-values="0|1">
-                            <label>
-                                <span>Password:</span>
-                                <input
-                                    type="password"
-                                    name="password"
-                                    id="input-password"
-                                    placeholder="Passwort"
-                                />
-                            </label>
-                        </div>
-                    </fieldset>
-                    <fieldset>
-                        <legend>Input/Output 1</legend>
-                        <label class="switch">
-                            <span>Output</span>
-                            <input
-                                type="checkbox"
-                                name="direction-1"
-                                id="input-direction-1"
-                                data-value-not-checked="0"
-                                data-value-checked="1"
-                            />
-                            <span class="slider"></span>
-                            <span>Input</span>
-                        </label>
-                        <label>
-                            ArtNet-Universe:
-                            <input
-                                type="number"
-                                name="universe-1"
-                                id="universe-1"
-                                placeholder="Universe"
-                                min="0"
-                                max="15"
-                            />
-                        </label>
-                    </fieldset>
-                    <fieldset>
-                        <legend>Input/Output 2</legend>
-                        <label class="switch">
-                            <span>Output</span>
-                            <input
-                                type="checkbox"
-                                name="direction-2"
-                                id="input-direction-2"
-                                data-value-not-checked="0"
-                                data-value-checked="1"
-                            />
-                            <span class="slider"></span>
-                            <span>Input</span>
-                        </label>
-                        <label>
-                            ArtNet-Universe:
-                            <input
-                                type="number"
-                                name="universe-2"
-                                id="universe-2"
-                                placeholder="Universe"
-                                min="0"
-                                max="15"
-                            />
-                        </label>
-                    </fieldset>
-                    <fieldset>
-                        <legend>Sonstiges</legend>
-                        <label>
-                            LED-Helligkeit
-                            <div>
-                                <input
-                                    type="range"
-                                    name="led-brightness"
-                                    id="led-brightness"
-                                    min="0"
-                                    max="255"
-                                    class="range"
-                                />
-                                <span class="range-value"></span>
-                            </div>
-                        </label>
-                        <label>
-                            <span>Aktion bei Knopfdruck:</span>
-                            <select
-                                name="button-action"
-                                id="input-button-action"
-                                title="Aktion bei Knopfdruck"
-                                required
-                            >
-                                <option value="0">Nichts</option>
-                                <option value="1">
-                                    Konfiguration zurücksetzen
-                                </option>
-                                <option value="2">Neustart</option>
-                            </select>
-                        </label>
-                    </fieldset>
+        <form class="config">
+          <h1>Konfiguration</h1>
+          <fieldset>
+            <legend>Verbindung</legend>
+            <label>
+              <span>IP-Zuweisung:</span>
+              <select
+                name="ip-method"
+                id="input-ip-method"
+                title="IP-"
+                required
+              >
+                <option value="0">Statisch</option>
+                <option value="1">DHCP</option>
+              </select>
+            </label>
+            <div data-field="input-ip-method" data-values="0">
+              <label>
+                <span>IP-Adresse:</span>
+                <input
+                  type="text"
+                  name="ip"
+                  id="input-ip"
+                  placeholder="IP-Adresse"
+                  required
+                />
+              </label>
+              <label>
+                <span>Subnetzmaske:</span>
+                <input
+                  type="text"
+                  name="subnet"
+                  id="input-subnet"
+                  placeholder="Subnetzmaske"
+                  required
+                />
+              </label>
+              <label>
+                <span>Gateway:</span>
+                <input
+                  type="text"
+                  name="gateway"
+                  id="input-gateway"
+                  placeholder="Gateway"
+                  required
+                />
+              </label>
+            </div>
+            <label>
+              <span>Verbindungsmethode:</span>
+              <select
+                name="connection"
+                id="input-connection"
+                title="Verbindung"
+                required
+              >
+                <option value="0">WiFi-Station</option>
+                <option value="1">WiFi-AccessPoint</option>
+                <option value="2">Ethernet</option>
+              </select>
+            </label>
+            <div data-field="input-connection" data-values="1">
+              <label>
+                <span>SSID:</span>
+                <input
+                  type="text"
+                  name="ssid"
+                  id="input-ssid"
+                  placeholder="SSID"
+                  required
+                />
+              </label>
+            </div>
+            <div data-field="input-connection" data-values="0">
+              <label>
+                <span>Netzwerk:</span>
+                <select
+                  name="ssid"
+                  id="select-network"
+                  title="Netzwerk"
+                  required
+                ></select>
+                <button type="button" id="refresh-networks" class="icon-button">
+                  <img src="/icons/refresh.svg" alt="Neu laden" />
+                </button>
+              </label>
+            </div>
+            <div data-field="input-connection" data-values="0|1">
+              <label>
+                <span>Password:</span>
+                <input
+                  type="password"
+                  name="password"
+                  id="input-password"
+                  placeholder="Passwort"
+                />
+              </label>
+            </div>
+          </fieldset>
+          <fieldset>
+            <legend>Input/Output 1</legend>
+            <label class="switch">
+              <span>Output</span>
+              <input
+                type="checkbox"
+                name="direction-1"
+                id="input-direction-1"
+                data-value-not-checked="0"
+                data-value-checked="1"
+              />
+              <span class="slider"></span>
+              <span>Input</span>
+            </label>
+            <label>
+              ArtNet-Universe:
+              <input
+                type="number"
+                name="universe-1"
+                id="universe-1"
+                placeholder="Universe"
+                min="0"
+                max="15"
+              />
+            </label>
+          </fieldset>
+          <fieldset>
+            <legend>Input/Output 2</legend>
+            <label class="switch">
+              <span>Output</span>
+              <input
+                type="checkbox"
+                name="direction-2"
+                id="input-direction-2"
+                data-value-not-checked="0"
+                data-value-checked="1"
+              />
+              <span class="slider"></span>
+              <span>Input</span>
+            </label>
+            <label>
+              ArtNet-Universe:
+              <input
+                type="number"
+                name="universe-2"
+                id="universe-2"
+                placeholder="Universe"
+                min="0"
+                max="15"
+              />
+            </label>
+          </fieldset>
+          <fieldset>
+            <legend>Sonstiges</legend>
+            <label>
+              LED-Helligkeit
+              <div>
+                <input
+                  type="range"
+                  name="led-brightness"
+                  id="led-brightness"
+                  min="0"
+                  max="255"
+                  class="range"
+                />
+                <span class="range-value"></span>
+              </div>
+            </label>
+            <label>
+              <span>Aktion bei Knopfdruck:</span>
+              <select
+                name="button-action"
+                id="input-button-action"
+                title="Aktion bei Knopfdruck"
+                required
+              >
+                <option value="0">Nichts</option>
+                <option value="1">Konfiguration zurücksetzen</option>
+                <option value="2">Neustart</option>
+              </select>
+            </label>
+          </fieldset>
 
-                    <div class="buttons">
-                        <button type="reset">Zurücksetzen</button>
-                        <button type="submit">Speichern</button>
-                    </div>
-                </form>
-            </section>
-        </main>
-    </body>
+          <div class="buttons">
+            <button type="reset">Zurücksetzen</button>
+            <button type="submit">Speichern</button>
+          </div>
+        </form>
+      </section>
+    </main>
+  </body>
 </html>

data/input-visibility.js

@@ -4,20 +4,20 @@ const dynamicInputs = form.querySelectorAll("[data-field][data-values]");
 document.addEventListener("change", updateVisibility);
 
 function updateVisibility() {
-    dynamicInputs.forEach((element) => {
-        const input = form.querySelector(`#${element.dataset.field}`);
-        if (element.dataset.values.split("|").includes(input.value)) {
-            element.classList.remove("hidden");
-            element
-                .querySelectorAll("input, select, button, textarea")
-                .forEach((childInput) => (childInput.disabled = false));
-        } else {
-            element.classList.add("hidden");
-            element
-                .querySelectorAll("input, select, button, textarea")
-                .forEach((childInput) => (childInput.disabled = true));
-        }
-    });
+  dynamicInputs.forEach(element => {
+    const input = form.querySelector(`#${element.dataset.field}`);
+    if (element.dataset.values.split("|").includes(input.value)) {
+      element.classList.remove("hidden");
+      element
+        .querySelectorAll("input, select, button, textarea")
+        .forEach(childInput => (childInput.disabled = false));
+    } else {
+      element.classList.add("hidden");
+      element
+        .querySelectorAll("input, select, button, textarea")
+        .forEach(childInput => (childInput.disabled = true));
+    }
+  });
 }
 
 updateVisibility();

data/load-data.js

@@ -1,7 +1,7 @@
 import {
-    showLoadingScreen,
-    showError,
-    hideLoadingScreen,
+  showLoadingScreen,
+  showError,
+  hideLoadingScreen,
 } from "./loading-screen.js";
 
 const form = document.querySelector("form.config");
@@ -9,46 +9,46 @@ const form = document.querySelector("form.config");
 export let data = {};
 
 export async function loadData(timeout = null) {
-    const req = await fetch("/config", {
-        method: "GET",
-        signal: timeout !== null ? AbortSignal.timeout(timeout) : undefined,
-    });
-    if (!req.ok) {
-        throw new Error(`Response status: ${req.status}`);
-    }
+  const req = await fetch("/config", {
+    method: "GET",
+    signal: timeout !== null ? AbortSignal.timeout(timeout) : undefined,
+  });
+  if (!req.ok) {
+    throw new Error(`Response status: ${req.status}`);
+  }
 
-    const json = await req.json();
-    console.log(json);
-    return json;
+  const json = await req.json();
+  console.log(json);
+  return json;
 }
 
 export function writeDataToInput(data) {
-    console.log("write data");
-    for (const [key, value] of Object.entries(data)) {
-        const element = document.querySelector(`[name=${key}]`);
-        console.log(key, element);
+  console.log("write data");
+  for (const [key, value] of Object.entries(data)) {
+    const element = document.querySelector(`[name=${key}]`);
+    console.log(key, element);
 
-        if (element.type === "checkbox") {
-            element.checked = value;
-        } else {
-            element.value = value;
-        }
-
-        if (element.type === "range") {
-            // update text next to the slider by sending an event
-            element.dispatchEvent(new Event("input", { bubbles: true }));
-        }
+    if (element.type === "checkbox") {
+      element.checked = value;
+    } else {
+      element.value = value;
     }
-    // send "change" event
-    form.dispatchEvent(new Event("change", { bubbles: true }));
+
+    if (element.type === "range") {
+      // update text next to the slider by sending an event
+      element.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+  }
+  // send "change" event
+  form.dispatchEvent(new Event("change", { bubbles: true }));
 }
 
 showLoadingScreen("Konfiguration wird geladen...");
 try {
-    data = await loadData();
-    hideLoadingScreen();
-    writeDataToInput(data);
+  data = await loadData();
+  hideLoadingScreen();
+  writeDataToInput(data);
 } catch (error) {
-    console.log(error.message);
-    showError("Die Konfiguration konnte nicht geladen werden.");
+  console.log(error.message);
+  showError("Die Konfiguration konnte nicht geladen werden.");
 }

data/loading-screen.js

@@ -5,36 +5,36 @@ const spinner = loadingScreen.querySelector(".spinner");
 const reloadBtn = loadingScreen.querySelector(".reload");
 
 export function showLoadingScreen(msg) {
-    hide(content, reloadBtn);
-    show(loadingScreen, spinner);
-    loadingMsg.classList.remove("error");
-    loadingMsg.textContent = msg;
+  hide(content, reloadBtn);
+  show(loadingScreen, spinner);
+  loadingMsg.classList.remove("error");
+  loadingMsg.textContent = msg;
 }
 
 export function showError(msg) {
-    showLoadingScreen(msg);
-    loadingMsg.innerHTML +=
-        "<br/>Stelle sicher, dass du mit dem DMX-Interface verbunden bist und die IP-Adresse stimmt.";
-    show(reloadBtn);
-    hide(spinner);
-    loadingMsg.classList.add("error");
+  showLoadingScreen(msg);
+  loadingMsg.innerHTML +=
+    "<br/>Stelle sicher, dass du mit dem DMX-Interface verbunden bist und die IP-Adresse stimmt.";
+  show(reloadBtn);
+  hide(spinner);
+  loadingMsg.classList.add("error");
 }
 
 export function hideLoadingScreen() {
-    hide(loadingScreen, reloadBtn);
-    show(content);
-    loadingMsg.classList.remove("error");
-    loadingMsg.textContent = "";
+  hide(loadingScreen, reloadBtn);
+  show(content);
+  loadingMsg.classList.remove("error");
+  loadingMsg.textContent = "";
 }
 
 function show(...elements) {
-    for (const element of elements) {
-        element.classList.remove("hidden");
-    }
+  for (const element of elements) {
+    element.classList.remove("hidden");
+  }
 }
 
 function hide(...elements) {
-    for (const element of elements) {
-        element.classList.add("hidden");
-    }
+  for (const element of elements) {
+    element.classList.add("hidden");
+  }
 }

data/networks.js

@@ -7,67 +7,67 @@ const refreshIcon = refreshButton.querySelector("img");
 let isLoading = false;
 
 refreshButton.addEventListener("click", async () => {
-    // check if interface is in WiFi-AccessPoint mode
-    if (data.connection == 1) {
-        alert(
-            "Beim WLAN-Scan wird die Verbindung hardwarebedingt kurzzeitig" +
-                "unterbrochen.\n" +
-                "Möglicherweise muss das Interface neu verbunden werden."
-        );
-    }
-    updateNetworks();
+  // check if interface is in WiFi-AccessPoint mode
+  if (data.connection == 1) {
+    alert(
+      "Beim WLAN-Scan wird die Verbindung hardwarebedingt kurzzeitig" +
+        "unterbrochen.\n" +
+        "Möglicherweise muss das Interface neu verbunden werden."
+    );
+  }
+  updateNetworks();
 });
 
 // check if connected via WiFi-Station
 if (data.connection === 0) {
-    // show currently connected WiFi
-    insertNetworks([data.ssid]);
+  // show currently connected WiFi
+  insertNetworks([data.ssid]);
 }
 
 function insertNetworks(networks) {
-    networkDropdown.textContent = ""; // clear dropdown
+  networkDropdown.textContent = ""; // clear dropdown
 
-    for (const ssid of networks) {
-        const option = document.createElement("option");
-        option.value = ssid;
-        option.innerText = ssid;
-        networkDropdown.appendChild(option);
-    }
+  for (const ssid of networks) {
+    const option = document.createElement("option");
+    option.value = ssid;
+    option.innerText = ssid;
+    networkDropdown.appendChild(option);
+  }
 }
 
 async function loadNetworks() {
-    if (isLoading) return;
+  if (isLoading) return;
 
-    isLoading = true;
-    refreshButton.classList.remove("error-bg");
-    refreshIcon.classList.add("spinning");
+  isLoading = true;
+  refreshButton.classList.remove("error-bg");
+  refreshIcon.classList.add("spinning");
 
-    try {
-        const res = await fetch("/networks", {
-            method: "GET",
-        });
+  try {
+    const res = await fetch("/networks", {
+      method: "GET",
+    });
 
-        if (!res.ok) {
-            throw Error(`response status: ${res.status}`);
-        }
-
-        const networks = await res.json();
-
-        refreshIcon.classList.remove("spinning");
-        isLoading = false;
-        // remove duplicate values
-        return Array.from(new Set(networks));
-    } catch (e) {
-        refreshIcon.classList.remove("spinning");
-        refreshButton.classList.add("error-bg");
-        isLoading = false;
-        return [];
+    if (!res.ok) {
+      throw Error(`response status: ${res.status}`);
     }
+
+    const networks = await res.json();
+
+    refreshIcon.classList.remove("spinning");
+    isLoading = false;
+    // remove duplicate values
+    return Array.from(new Set(networks));
+  } catch (e) {
+    refreshIcon.classList.remove("spinning");
+    refreshButton.classList.add("error-bg");
+    isLoading = false;
+    return [];
+  }
 }
 
 async function updateNetworks() {
-    const networks = await loadNetworks();
-    if (networks) {
-        insertNetworks(["", ...networks]);
-    }
+  const networks = await loadNetworks();
+  if (networks) {
+    insertNetworks(["", ...networks]);
+  }
 }

data/range-input.js

@@ -1,14 +1,14 @@
-document.querySelector("form.config").addEventListener("input", (event) => {
-    if (event.target.classList.contains("range")) {
-        updateValue(event.target);
-    }
+document.querySelector("form.config").addEventListener("input", event => {
+  if (event.target.classList.contains("range")) {
+    updateValue(event.target);
+  }
 });
 
 function updateValue(slider) {
-    const percentage = Math.round((slider.value / slider.max) * 100);
-    slider.nextElementSibling.innerText = `${percentage}%`;
+  const percentage = Math.round((slider.value / slider.max) * 100);
+  slider.nextElementSibling.innerText = `${percentage}%`;
 }
 
-document.querySelectorAll("input[type='range'].range").forEach((element) => {
-    updateValue(element);
+document.querySelectorAll("input[type='range'].range").forEach(element => {
+  updateValue(element);
 });

data/reset.js

@@ -2,15 +2,15 @@ import { updateConfig } from "/submit.js";
 
 const form = document.querySelector("form.config");
 
-form.addEventListener("reset", async (event) => {
-    event.preventDefault();
+form.addEventListener("reset", async event => {
+  event.preventDefault();
 
-    const ok = confirm(
-        "Sicher, dass du alle Einstellungen zurücksetzen möchtest?"
-    );
-    if (ok) {
-        updateConfig({
-            method: "DELETE",
-        });
-    }
+  const ok = confirm(
+    "Sicher, dass du alle Einstellungen zurücksetzen möchtest?"
+  );
+  if (ok) {
+    updateConfig({
+      method: "DELETE",
+    });
+  }
 });

data/status.js

@@ -5,108 +5,105 @@ const statusDialog = document.querySelector(".dialog-status");
 const expandButton = document.querySelector(".expand-status");
 
 expandButton.addEventListener("click", () => {
-    statusDialog.showModal();
+  statusDialog.showModal();
 });
 
 registerCallback("status", setStatus);
 initWebSocket();
 
 function setStatus(status) {
-    setValue("model", status.chip.model);
-    setValue("mac", formatMac(status.chip.mac));
-    setValue("sdk-version", status.sdkVersion);
+  setValue("model", status.chip.model);
+  setValue("mac", formatMac(status.chip.mac));
+  setValue("sdk-version", status.sdkVersion);
 
-    setValue("rssi", status.connection.signalStrength);
-    const icon = selectConnectionIcon(status.connection.signalStrength);
-    document.querySelectorAll(".connection-icon").forEach((img) => {
-        img.src = `/icons/${icon}`;
-    });
+  setValue("rssi", status.connection.signalStrength);
+  const icon = selectConnectionIcon(status.connection.signalStrength);
+  document.querySelectorAll(".connection-icon").forEach(img => {
+    img.src = `/icons/${icon}`;
+  });
 
-    setValue("cpu-freq", status.chip.cpuFreqMHz);
-    setValue("cpu-cycle-count", status.chip.cycleCount);
-    setValue("cpu-temp", status.chip.tempC);
+  setValue("cpu-freq", status.chip.cpuFreqMHz);
+  setValue("cpu-cycle-count", status.chip.cycleCount);
+  setValue("cpu-temp", status.chip.tempC);
 
-    const usedHeap = status.heap.total - status.heap.free;
-    setValue("heap-used", formatBytes(usedHeap));
-    setValue("heap-total", formatBytes(status.heap.total));
-    setValue(
-        "heap-percentage",
-        Math.round((usedHeap / status.heap.total) * 100)
-    );
+  const usedHeap = status.heap.total - status.heap.free;
+  setValue("heap-used", formatBytes(usedHeap));
+  setValue("heap-total", formatBytes(status.heap.total));
+  setValue("heap-percentage", Math.round((usedHeap / status.heap.total) * 100));
 
-    const usedPsram = status.psram.total - status.psram.free;
-    setValue("psram-used", formatBytes(usedPsram));
-    setValue("psram-total", formatBytes(status.psram.total));
-    setValue(
-        "psram-percentage",
-        Math.round((usedPsram / status.psram.total) * 100)
-    );
+  const usedPsram = status.psram.total - status.psram.free;
+  setValue("psram-used", formatBytes(usedPsram));
+  setValue("psram-total", formatBytes(status.psram.total));
+  setValue(
+    "psram-percentage",
+    Math.round((usedPsram / status.psram.total) * 100)
+  );
 
-    setValue("uptime", parseDuration(status.uptime));
+  setValue("uptime", parseDuration(status.uptime));
 
-    setValue("hash", parseHash(status.sketch.md5));
+  setValue("hash", parseHash(status.sketch.md5));
 }
 
 function setValue(className, value) {
-    document.querySelectorAll("." + className).forEach((element) => {
-        element.innerText = value;
-    });
+  document.querySelectorAll("." + className).forEach(element => {
+    element.innerText = value;
+  });
 }
 
 function parseDuration(ms) {
-    const date = new Date(ms);
-    const time =
-        date.getUTCHours().toString().padStart(2, "0") +
-        ":" +
-        date.getUTCMinutes().toString().padStart(2, "0") +
-        " h";
-    const days = Math.floor(date.getTime() / (1000 * 60 * 60 * 24));
+  const date = new Date(ms);
+  const time =
+    date.getUTCHours().toString().padStart(2, "0") +
+    ":" +
+    date.getUTCMinutes().toString().padStart(2, "0") +
+    " h";
+  const days = Math.floor(date.getTime() / (1000 * 60 * 60 * 24));
 
-    return days !== 0 ? `${days} Tage, ${time}` : time;
+  return days !== 0 ? `${days} Tage, ${time}` : time;
 }
 
 function parseHash(hash) {
-    return hash.toUpperCase().substring(0, 16);
+  return hash.toUpperCase().substring(0, 16);
 }
 
 function formatBytes(bytes) {
-    const units = ["Bytes", "KB", "MB", "GB"];
+  const units = ["Bytes", "KB", "MB", "GB"];
 
-    let value = bytes;
-    let index = 0;
-    while (value >= 1000) {
-        value /= 1000;
-        index++;
-    }
+  let value = bytes;
+  let index = 0;
+  while (value >= 1000) {
+    value /= 1000;
+    index++;
+  }
 
-    return `${Math.round(value * 10) / 10} ${units[index]}`;
+  return `${Math.round(value * 10) / 10} ${units[index]}`;
 }
 
 function formatMac(decimalMac) {
-    const octets = decimalMac.toString(16).toUpperCase().match(/../g) || [];
-    return octets.reverse().join(":");
+  const octets = decimalMac.toString(16).toUpperCase().match(/../g) || [];
+  return octets.reverse().join(":");
 }
 
 function selectConnectionIcon(signalStrength) {
-    // access point
-    if (data.connection == 1) {
-        return "hotspot.svg";
-    }
+  // access point
+  if (data.connection == 1) {
+    return "hotspot.svg";
+  }
 
-    // ethernet
-    if (data.connection == 2) {
-        return "lan.svg";
-    }
+  // ethernet
+  if (data.connection == 2) {
+    return "lan.svg";
+  }
 
-    // station
-    if (signalStrength >= -50) {
-        return "signal4.svg";
-    }
-    if (signalStrength >= -60) {
-        return "signal3.svg";
-    }
-    if (signalStrength >= -70) {
-        return "signal2.svg";
-    }
-    return "signal1.svg";
+  // station
+  if (signalStrength >= -50) {
+    return "signal4.svg";
+  }
+  if (signalStrength >= -60) {
+    return "signal3.svg";
+  }
+  if (signalStrength >= -70) {
+    return "signal2.svg";
+  }
+  return "signal1.svg";
 }

data/style.css

@@ -1,330 +1,330 @@
 :root {
-    --color-primary: #087e8b;
-    --color-on-primary: white;
-    --color-background: #222;
-    --color-surface: #333;
-    --color-danger: #fa2b58;
-    --appended-item-size: 2.5rem;
+  --color-primary: #087e8b;
+  --color-on-primary: white;
+  --color-background: #222;
+  --color-surface: #333;
+  --color-danger: #fa2b58;
+  --appended-item-size: 2.5rem;
 
-    color-scheme: dark;
+  color-scheme: dark;
 }
 
 body {
-    margin: 0;
-    padding: 0;
-    background: linear-gradient(to left, #065760, black, black, #065760);
-    color: white;
-    font-family: Arial, Helvetica, sans-serif;
-    overflow: hidden;
+  margin: 0;
+  padding: 0;
+  background: linear-gradient(to left, #065760, black, black, #065760);
+  color: white;
+  font-family: Arial, Helvetica, sans-serif;
+  overflow: hidden;
 }
 
 main {
-    background-color: var(--color-background);
-    max-width: 700px;
-    padding: 8px max(5%, 8px);
-    margin: 0 auto;
-    height: 100vh;
-    overflow: auto;
+  background-color: var(--color-background);
+  max-width: 700px;
+  padding: 8px max(5%, 8px);
+  margin: 0 auto;
+  height: 100vh;
+  overflow: auto;
 }
 
 h1 {
-    text-align: center;
+  text-align: center;
 }
 
 form > * {
-    margin-bottom: 16px;
+  margin-bottom: 16px;
 }
 
 fieldset {
-    border-radius: 8px;
-    border-color: white;
+  border-radius: 8px;
+  border-color: white;
 }
 
 label {
-    display: block;
-    display: flex;
-    gap: 8px;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
+  display: block;
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
 }
 
 label span {
-    flex-grow: 1;
+  flex-grow: 1;
 }
 
 input,
 select,
 label div {
-    width: clamp(200px, 100%, 400px);
+  width: clamp(200px, 100%, 400px);
 }
 
 input,
 select {
-    background-color: var(--color-background);
-    color: white;
-    border: 1px solid white;
-    border-radius: 8px;
-    padding: 8px;
-    box-sizing: border-box;
+  background-color: var(--color-background);
+  color: white;
+  border: 1px solid white;
+  border-radius: 8px;
+  padding: 8px;
+  box-sizing: border-box;
 }
 
 input:focus,
 select:focus {
-    outline: none;
-    border-color: var(--color-primary);
+  outline: none;
+  border-color: var(--color-primary);
 }
 
 select:has(+ .icon-button),
 label div input[type="range"] {
-    width: calc(clamp(200px, 100%, 400px) - var(--appended-item-size) - 8px);
+  width: calc(clamp(200px, 100%, 400px) - var(--appended-item-size) - 8px);
 }
 
 input[type="range"] {
-    accent-color: var(--color-primary);
+  accent-color: var(--color-primary);
 }
 
 button {
-    border: none;
-    inset: none;
-    border-radius: 8px;
-    background-color: var(--color-primary);
-    color: var(--color-on-primary);
-    padding: 8px 16px;
+  border: none;
+  inset: none;
+  border-radius: 8px;
+  background-color: var(--color-primary);
+  color: var(--color-on-primary);
+  padding: 8px 16px;
 }
 
 button[type="reset"] {
-    background-color: var(--color-danger);
+  background-color: var(--color-danger);
 }
 
 :is(div:has(:is(input, select)), input, select, label)
-    + :is(div:has(:is(input, select)), input, select, label) {
-    margin-top: 8px;
+  + :is(div:has(:is(input, select)), input, select, label) {
+  margin-top: 8px;
 }
 
 .hidden {
-    display: none !important;
+  display: none !important;
 }
 
 label.switch {
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 8px;
-    -webkit-user-select: none;
-    user-select: none;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  -webkit-user-select: none;
+  user-select: none;
 }
 
 label.switch input {
-    display: none;
+  display: none;
 }
 
 label.switch .slider {
-    display: inline-block;
-    position: relative;
-    height: 1em;
-    width: 2em;
-    background-color: #444;
-    border-radius: 1em;
-    border: 4px solid #444;
+  display: inline-block;
+  position: relative;
+  height: 1em;
+  width: 2em;
+  background-color: #444;
+  border-radius: 1em;
+  border: 4px solid #444;
 }
 
 label.switch .slider::before {
-    content: "";
-    position: absolute;
-    height: 100%;
-    aspect-ratio: 1 / 1;
-    border-radius: 50%;
-    top: 50%;
-    background-color: white;
-    transition: all 0.1s linear;
+  content: "";
+  position: absolute;
+  height: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: 50%;
+  top: 50%;
+  background-color: white;
+  transition: all 0.1s linear;
 }
 
 label.switch:active .slider::before {
-    transform: scale(1.3);
-    transform-origin: 50% 50%;
+  transform: scale(1.3);
+  transform-origin: 50% 50%;
 }
 
 label.switch input:not(:checked) + .slider::before {
-    left: 0%;
-    translate: 0 -50%;
+  left: 0%;
+  translate: 0 -50%;
 }
 
 label.switch input:checked + .slider::before {
-    left: 100%;
-    translate: -100% -50%;
+  left: 100%;
+  translate: -100% -50%;
 }
 
 dialog {
-    width: 80%;
-    max-width: 500px;
-    max-height: 80%;
-    overflow: auto;
-    background-color: var(--color-background);
-    color: white;
-    border: none;
-    border-radius: 8px;
-    padding: 16px;
+  width: 80%;
+  max-width: 500px;
+  max-height: 80%;
+  overflow: auto;
+  background-color: var(--color-background);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 16px;
 }
 
 dialog::backdrop {
-    background-color: #000a;
+  background-color: #000a;
 }
 
 .dialog-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
 
-    & button {
-        margin: 0;
-    }
+  & button {
+    margin: 0;
+  }
 }
 
 .card {
-    background-color: var(--color-surface);
-    padding: 8px;
-    border-radius: 8px;
+  background-color: var(--color-surface);
+  padding: 8px;
+  border-radius: 8px;
 }
 
 .card > * {
-    display: block;
+  display: block;
 }
 
 .card > :first-child {
-    color: var(--color-primary);
-    margin-bottom: 8px;
+  color: var(--color-primary);
+  margin-bottom: 8px;
 }
 
 .buttons {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    gap: 8px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 8px;
 }
 
 .loading-screen {
-    display: grid;
-    justify-content: center;
+  display: grid;
+  justify-content: center;
 }
 
 .error {
-    color: var(--color-danger);
+  color: var(--color-danger);
 }
 
 .error-bg {
-    background-color: var(--color-danger) !important;
+  background-color: var(--color-danger) !important;
 }
 
 button.reload {
-    display: block;
-    margin: 0 auto;
+  display: block;
+  margin: 0 auto;
 }
 
 .spinner-container {
-    width: min(max-content, 100%);
+  width: min(max-content, 100%);
 }
 
 .spinner {
-    position: relative;
-    margin: 10px auto;
-    background: conic-gradient(transparent 150deg, var(--color-primary));
-    --outer-diameter: 50px;
-    width: var(--outer-diameter);
-    height: var(--outer-diameter);
-    border-radius: 50%;
+  position: relative;
+  margin: 10px auto;
+  background: conic-gradient(transparent 150deg, var(--color-primary));
+  --outer-diameter: 50px;
+  width: var(--outer-diameter);
+  height: var(--outer-diameter);
+  border-radius: 50%;
 
-    animation-name: spin;
-    animation-duration: 1s;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
+  animation-name: spin;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
 }
 
 .spinner::after {
-    position: absolute;
-    content: "";
-    display: block;
-    --spinner-border: 5px;
-    top: var(--spinner-border);
-    left: var(--spinner-border);
+  position: absolute;
+  content: "";
+  display: block;
+  --spinner-border: 5px;
+  top: var(--spinner-border);
+  left: var(--spinner-border);
 
-    --inner-diameter: calc(var(--outer-diameter) - 2 * var(--spinner-border));
-    width: var(--inner-diameter);
-    height: var(--inner-diameter);
+  --inner-diameter: calc(var(--outer-diameter) - 2 * var(--spinner-border));
+  width: var(--inner-diameter);
+  height: var(--inner-diameter);
 
-    background-color: var(--color-background);
-    border-radius: 50%;
+  background-color: var(--color-background);
+  border-radius: 50%;
 }
 
 @keyframes spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .icon-button {
-    padding: 8px;
-    font-size: 0;
-    width: var(--appended-item-size);
-    height: var(--appended-item-size);
+  padding: 8px;
+  font-size: 0;
+  width: var(--appended-item-size);
+  height: var(--appended-item-size);
 }
 
 .spinning {
-    animation-name: spin;
-    animation-duration: 0.5s;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
+  animation-name: spin;
+  animation-duration: 0.5s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
 }
 
 div:has(.range-value) {
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
 }
 
 .range-value {
-    width: var(--appended-item-size);
-    height: var(--appended-item-size);
-    text-align: center;
-    line-height: var(--appended-item-size);
+  width: var(--appended-item-size);
+  height: var(--appended-item-size);
+  text-align: center;
+  line-height: var(--appended-item-size);
 }
 
 .status {
-    background-color: var(--color-surface);
-    padding: 8px;
-    border-radius: 8px;
+  background-color: var(--color-surface);
+  padding: 8px;
+  border-radius: 8px;
 
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: center;
-    gap: 16px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
 }
 
 .dialog-status-content {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 8px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
 }
 
 .connection-icon {
-    width: 24px;
-    height: 24px;
-    padding: 8px;
+  width: 24px;
+  height: 24px;
+  padding: 8px;
 }
 
 .connection-icon.small {
-    padding: 0;
-    height: 1em;
+  padding: 0;
+  height: 1em;
 }
 
 .centered-vertical {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 8px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
 }

data/submit.js

@@ -1,74 +1,74 @@
 import { loadData, writeDataToInput } from "./load-data.js";
 import {
-    showLoadingScreen,
-    hideLoadingScreen,
-    showError,
+  showLoadingScreen,
+  hideLoadingScreen,
+  showError,
 } from "./loading-screen.js";
 
 const form = document.querySelector("form.config");
 
 function parseValue(input) {
-    if (input.type === "checkbox") {
-        return input.checked
-            ? input.dataset.valueChecked
-            : input.dataset.valueNotChecked;
-    }
+  if (input.type === "checkbox") {
+    return input.checked
+      ? input.dataset.valueChecked
+      : input.dataset.valueNotChecked;
+  }
 
-    if (input.value === "") {
-        return null;
-    }
+  if (input.value === "") {
+    return null;
+  }
 
-    if (input.type === "number" || input.type === "range") {
-        const number = Number(input.value);
-        return Number.isNaN(number) ? null : number;
-    }
+  if (input.type === "number" || input.type === "range") {
+    const number = Number(input.value);
+    return Number.isNaN(number) ? null : number;
+  }
 
-    return input.value;
+  return input.value;
 }
 
-form.addEventListener("submit", (event) => {
-    event.preventDefault();
-    const inputFields = document.querySelectorAll(
-        "form :is(input, select, textarea):not(:disabled)"
-    );
+form.addEventListener("submit", event => {
+  event.preventDefault();
+  const inputFields = document.querySelectorAll(
+    "form :is(input, select, textarea):not(:disabled)"
+  );
 
-    const data = Array.from(inputFields).reduce((data, input) => {
-        data[input.name] = parseValue(input);
-        return data;
-    }, {});
-    console.log(data);
+  const data = Array.from(inputFields).reduce((data, input) => {
+    data[input.name] = parseValue(input);
+    return data;
+  }, {});
+  console.log(data);
 
-    updateConfig({
-        method: "PUT",
-        headers: {
-            "Content-Type": "application/json",
-        },
-        body: JSON.stringify(data),
-    });
+  updateConfig({
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(data),
+  });
 });
 
 export async function updateConfig(fetchOptions) {
-    showLoadingScreen("Konfiguration anwenden und ESP neustarten...");
+  showLoadingScreen("Konfiguration anwenden und ESP neustarten...");
 
+  try {
+    const res = await fetch("/config", fetchOptions);
+    if (!res.ok) {
+      throw new Error(`Response status: ${res.status}`);
+    }
+  } catch (error) {
+    console.error(error.message);
+    showError(error.message);
+  }
+
+  for (let i = 0; i < 10; i++) {
     try {
-        const res = await fetch("/config", fetchOptions);
-        if (!res.ok) {
-            throw new Error(`Response status: ${res.status}`);
-        }
+      const data = await loadData(5000);
+      writeDataToInput(data);
+      hideLoadingScreen();
+
+      break;
     } catch (error) {
-        console.error(error.message);
-        showError(error.message);
-    }
-
-    for (let i = 0; i < 10; i++) {
-        try {
-            const data = await loadData(5000);
-            writeDataToInput(data);
-            hideLoadingScreen();
-
-            break;
-        } catch (error) {
-            // retry loading config until successful
-        }
+      // retry loading config until successful
     }
+  }
 }

data/websocket.js

@@ -4,34 +4,34 @@ let ws;
 let callbacks = {};
 
 export function initWebSocket() {
-    if (ws) return;
+  if (ws) return;
 
-    ws = new WebSocket(gateway);
+  ws = new WebSocket(gateway);
 
-    ws.onopen = () => {
-        console.info("WebSocket connection opened");
-    };
+  ws.onopen = () => {
+    console.info("WebSocket connection opened");
+  };
 
-    ws.onclose = (event) => {
-        console.info("WebSocket connection closed, reason:", event.reason);
-        ws = null;
-    };
+  ws.onclose = event => {
+    console.info("WebSocket connection closed, reason:", event.reason);
+    ws = null;
+  };
 
-    ws.onerror = (event) => {
-        console.warn("WebSocket encountered error, closing socket.", event);
-        ws.close();
-        ws = null;
-    };
+  ws.onerror = event => {
+    console.warn("WebSocket encountered error, closing socket.", event);
+    ws.close();
+    ws = null;
+  };
 
-    ws.onmessage = (event) => {
-        const message = JSON.parse(event.data);
-        console.log("received websocket data", message);
-        if (message.type in callbacks) {
-            callbacks[message.type](message.data);
-        }
-    };
+  ws.onmessage = event => {
+    const message = JSON.parse(event.data);
+    console.log("received websocket data", message);
+    if (message.type in callbacks) {
+      callbacks[message.type](message.data);
+    }
+  };
 }
 
 export function registerCallback(type, callback) {
-    callbacks[type] = callback;
+  callbacks[type] = callback;
 }

main/dmx-interface.c

@@ -9,21 +9,18 @@
 
 static const char *TAG = "MAIN";
 
-void app_main(void)
-{
+void app_main(void) {
   ESP_LOGI(TAG, "DMX Interface starting...");
 
   esp_err_t wifi_err = wifi_start_ap("DMX", "mbgmbgmbg", 1, 4);
-  if (wifi_err != ESP_OK)
-  {
+  if (wifi_err != ESP_OK) {
     ESP_LOGE(TAG, "Failed to start WiFi AP: %s", esp_err_to_name(wifi_err));
     return;
   }
 
   // Start HTTP web server
   httpd_handle_t server = webserver_start(NULL);
-  if (server == NULL)
-  {
+  if (server == NULL) {
     ESP_LOGE(TAG, "Failed to start web server!");
     return;
   }
@@ -32,8 +29,7 @@ void app_main(void)
   ESP_LOGI(TAG, "Open http://192.168.4.1 in your browser");
 
   // Keep the app running
-  while (1)
-  {
+  while (1) {
     vTaskDelay(pdMS_TO_TICKS(1000));
   }
 }

main/idf_component.yml

@@ -1,7 +1,7 @@
 ## IDF Component Manager Manifest File
 dependencies:
   idf:
-    version: '>=4.1.0'
+    version: ">=4.1.0"
   joltwallet/littlefs: ==1.20.2
   someweisguy/esp_dmx:
     git: https://github.com/davispolito/esp_dmx.git