Interactive map device

Author: radoslavirha

.gitignore

@@ -0,0 +1,5 @@
+# Gitignore settings for ESPHome
+# This is an example and may include too much for your use-case.
+# You can modify this file to suit your needs.
+.esphome
+secrets.yaml

Readme.md

@@ -0,0 +1,11 @@
+# ESPHome configurations
+
+Create `secrets.yaml` file `wifi_ssid` and `wifi_password` variables.
+
+## Dashboard
+
+Run `esphome dashboard .` from within this repository.
+
+## Install
+
+Install code from ESPHome dashboard.

interactive-map.yaml

@@ -0,0 +1,172 @@
+esp32:
+  board: esp32dev
+  framework:
+    type: esp-idf
+
+esphome:
+  name: iot-interactive-map
+  friendly_name: Interactive Map
+  min_version: 2025.9.0
+  name_add_mac_suffix: false
+  on_boot:
+    then:
+      - light.turn_on:
+          id: map
+          brightness: 100%
+          effect: "Border Chase"
+
+# Enable logging
+logger:
+  level: DEBUG
+
+api:
+
+# Allow Over-The-Air updates
+ota:
+- platform: esphome
+
+wifi:
+  ssid: !secret wifi_ssid
+  password: !secret wifi_password
+  on_connect:
+    then:
+      - delay: 2s
+      - script.execute: fetch_data
+
+globals:
+  - id: API_RESPONSE
+    type: std::vector<std::array<int, 4>>
+    restore_value: no
+
+interval:
+  - interval: 10s
+    then:
+      - script.execute: fetch_data
+
+http_request:
+  id: http_client
+
+light:
+  - platform: esp32_rmt_led_strip
+    rgb_order: GRB
+    chipset: WS2812
+    pin: GPIO25
+    num_leds: 72
+    name: "Map"
+    id: map
+    default_transition_length: 
+      seconds: 0
+    effects:
+      - addressable_lambda:
+          name: "Cities from API"
+          update_interval: 1s
+          lambda: |-
+            if (id(API_RESPONSE).empty()) {
+              it.all() = Color::BLACK;
+              return;
+            }
+
+            it.all() = Color::BLACK;
+            for (const auto &city : id(API_RESPONSE)) {
+              int led_index = city[0];
+              int r = city[1];
+              int g = city[2];
+              int b = city[3];
+
+              if (led_index < 0 || led_index >= it.size()) {
+                continue;
+              }
+              it[led_index] = Color(r, g, b);
+            }         
+      - addressable_lambda:
+          name: Border Chase
+          update_interval: 200ms
+          lambda: |-
+            // W=>E north 24, 19, 16, 10,  9,  6,  3,  0,  4,  1,  2,  5,  7, 12, 21, 29, 31, 17, 25, 30, 36, 35
+            // E=>W south 42, 56, 61, 65, 68, 71, 69, 64, 67, 70, 66, 60, 54, 50, 37
+            static const std::vector<int> north_path = { 19, 16, 10,  6,  0,  4,  1,  2,  5,  7, 12, 21, 29, 31, 17, 25, 30, 36 };
+            static const std::vector<int> south_path = { 35, 42, 44, 56, 61, 65, 68, 71, 69, 64, 67, 70, 66, 60, 54, 50, 37, 24 };
+            static size_t north_pos = 0;
+            static size_t south_pos = 0;
+
+            it.all() = Color::BLACK;
+
+            auto set_dot = [&](const std::vector<int> &path, size_t pos, Color color) {
+              if (path.empty()) return;
+              int idx = path[pos % path.size()];
+              if (idx >= 0 && idx < it.size()) it[idx] = color;
+            };
+
+            set_dot(north_path, north_pos++, Color(0, 0, 255));
+            set_dot(south_path, south_pos++, Color(255, 0, 0));
+
+script:
+  - id: fetch_data
+    then:
+      - logger.log: 
+          level: INFO
+          format: "Fetching remote data"
+      - http_request.get:
+          url: "http://api.server.home/iot/interactive-map-feeder/v1/data-sources/radar/cities/iot"
+          capture_response: true
+          max_response_buffer_size: 15000
+          request_headers:
+            Content-Type: application/json
+            # Important, without this body is empty. Related to Traefik.
+            Accept-Encoding: identity
+          on_response:
+            - if:
+                condition:
+                  lambda: return response->status_code == 200;
+                then:
+                  - lambda: |-
+                      json::parse_json(body, [&](JsonObject res) -> bool {
+                        if (!res["cities"]) {
+                          ESP_LOGI("log", "No 'cities' key in this json!");
+                          return false;
+                        }
+
+                        JsonArray cities = res["cities"].as<JsonArray>();
+                        if (cities.isNull()) {
+                          ESP_LOGW("log", "'cities' key exists but is not an array");
+                          return false;
+                        }
+                        ESP_LOGI("log", "Received %u cities", cities.size());
+
+                        id(API_RESPONSE).clear();
+                        id(API_RESPONSE).reserve(cities.size());
+
+                        for (JsonObject city : cities) {
+                          if (!city["id"].is<int>() || !city["color"] || !city["color"].is<JsonObject>()) {
+                            ESP_LOGI("log", "City %u is invalid", city["id"].as<int>());
+                            continue;
+                          }
+
+                          JsonObject color = city["color"].as<JsonObject>();
+                          std::array<int, 4> entry = {
+                            city["id"].as<int>(),
+                            color["r"].as<int>(),
+                            color["g"].as<int>(),
+                            color["b"].as<int>()
+                          };
+
+                          id(API_RESPONSE).push_back(entry);
+                        }
+
+                        ESP_LOGI("log", "Stored %u cities in API_RESPONSE", id(API_RESPONSE).size());
+                        return true;
+                      });
+                  - light.turn_on:
+                      id: map
+                      brightness: 100%
+                      effect: "Cities from API"
+                else:
+                  - logger.log:
+                      level: "WARN"
+                      format: "Error: Response status: %d, message %s"
+                      args: [ 'response->status_code', 'body.c_str()' ]
+          on_error:
+            then:
+              - logger.log:
+                  level: "INFO"
+                  format: "Request failed!"