osiris86 / cxt-heatmap

CXT Heatmap

Der geneigte Besucher der Convention-X-Treme LAN-Party in Karlsdorf-Neuthard weiß, dass es vor Ort gerne mal heiß her geht.

Um zu analysieren wie sich die Temperaturen über das LAN-Party-Wochenende entwickeln, wurde dieses Projekt geboren. Es besteht insgesamt aus vier Repositories:

• cxt-heatmap (dieses Repository)
• cxt-heatmap-fe
• cxt-heatmap-sensor
• cxt-heatmap-data

CXT Heatmap Backend

Das Backend ist eine auf NestJS basierende Implementierung. Es stellt vier unterschiedliche Endpunkte zur Verfügung:

1. / - Unter root wird das Frontend bereitgestellt, welches im cxt-heatmap-fe Repository liegt.
2. /png - Hier gibt das Backend eine PNG Datei mit der aktuellen Heatmap zurück.
3. /metrics - Hier gibt der Server Prometheus Informationen zurück
4. /graphql - Um die Daten für das Frontend bereitszustellen, gibt es auch einen GraphQL Endpunkt, der auch Subscriptions erlaubt. Diese ermöglicht eine dynamische Aktualisierung des Frontends, sobald neue Daten vorliegen

Funktionsweise

MQTT

Die Sensoren senden ihre Daten per MQTT. Das Backend abonniert das entsprechende MQTT-Topic (cxt/temperature). Wenn neue Daten ankommen, werden diese zusammen mit dem Zeitstempel in eine Influx-Datenbank geschrieben, so dass auch die historischen Daten im Nachgang zur Verfügung stehen. Die Sensoren übertragen dabei die eigene ID sowie die gemessene Temperatur. Die ID wird über eine Konfigurationsdatei (idMap.json) einem Sitzplatz zugeordnet.

/png

Der Worker holt sich alle 30 Sekunden für jeden Sitzplatz die zuletzt gemessenen Temperaturen und überträgt diese auf die Karte. Dabei wurde die (temperatureMap)[https://github.com/optimisme/javascript-temperatureMap] Implementierung verwendet und geringfürig angepasst. Die Anpassungen beinhalten:

• Farben zum Temperaturbereich
• Farbbereich wird bis zum Bildrand gemalt

Die fertig erstellte Karte wird als png-Datei im Dateisystem abgelegt und der /png-Endpunkt spielt diese aus. Der Endpunkt ist bspw. für einen Discord-Bot gedacht, der ggf. vom CXT-Team noch entwickelt wird.

/metrics

Für jeden Platz, welcher in der Konfigurationsdatei (idMap.json) konfiguriert ist, erstellt der Prometheus-Service eine Metric. Unter dem o.g. Endpunkt stellt das Backend dann einen Prometheus-Endpunkt bereit, mit den zuletzt gemessenen Daten an den jeweiligen Plätzen.

/graphql

Mittels Apollo wird ein GraphQL Endpunkt bereitgestellt, der zum Einen über ein Query die Abfrage der aktuell gemessenen Temperaturen erlaubt und zum Anderen eine Subscription-Abfrage zur Verfügung stellt, die den Client über Temperaturveränderungen an den Plätzen informiert. Dieser Entpunkt wird vom Frontend verwendet.

Discord Bot

Das Backend beinhaltet auch einen Discord-Bot, welcher eine DM versendet, sobald ein Sensor seit mehr als 15 Minuten keine Daten mehr gesendet hat. Sobald der Sensor wieder Daten sendet, wird ebenfalls eine Information per Discord-DM versendet.

cxt-heatmap's Issues

Sensoren, die nicht mehr senden, aus der Grafik nehmen

Platznummern umdrehen

Platz 1 ist bei der Küche, Platz 20 bei der Bühne

Malen der Heatmap auf andere Lösung umstellen

Die canvas-Lösung braucht viele Abhängigkeiten. Hoffentlich gibt es hier eine bessere Lösung.

Malen der Heatmap sollte auch Nachkommastellen berücksichtigen

Eine Temperaturskala hinzufügen

Bauen des Dockerimages überarbeiten

Malen der Heatmap als Bibliothek auslagern

Idealerweise sollte diese dann auch vom Frontend verwendbar sein

Außentemperatur mitloggen

Wäre cool, wenn man zusätzlich zur Temperatur in der Halle auch die Außentemperatur erfassen könnte.

In der Nähe der Halle befindet sich eine Netatmo Wetterstation: Link

Weather API

Beispiel-Aufruf:
https://api.netatmo.com/api/getpublicdata?lat_ne=49.13139&lon_ne=8.5341481&lat_sw=49.130148&lon_sw=8.5287784&required_data=temperature&filter=false

Beispiel-Response:

{
  "status": "ok",
  "time_server": 1717772547,
  "body": [
    {
      "_id": "70:ee:50:2f:2a:0c",
      "place": {
        "location": [
          8.52863,
          49.131718
        ],
        "timezone": "Europe/Berlin",
        "country": "DE",
        "altitude": 111,
        "city": "Neuthard",
        "street": "Im Pfad"
      },
      "mark": 10,
      "measures": {
        "02:00:00:9b:57:76": {
          "res": {
            "1717771949": [
              28.1,
              37
            ]
          },
          "type": [
            "temperature",
            "humidity"
          ]
        },
        "70:ee:50:2f:2a:0c": {
          "res": {
            "1717771986": [
              1021
            ]
          },
          "type": [
            "pressure"
          ]
        },
        "05:00:00:04:74:e6": {
          "rain_60min": 0,
          "rain_24h": 0,
          "rain_live": 0,
          "rain_timeutc": 1717771981
        },
        "06:00:00:02:a1:70": {
          "wind_strength": 3,
          "wind_angle": 359,
          "gust_strength": 16,
          "gust_angle": 359,
          "wind_timeutc": 1717771981
        }
      },
      "modules": [
        "05:00:00:04:74:e6",
        "06:00:00:02:a1:70",
        "02:00:00:9b:57:76"
      ],
      "module_types": {
        "05:00:00:04:74:e6": "NAModule3",
        "06:00:00:02:a1:70": "NAModule2",
        "02:00:00:9b:57:76": "NAModule1"
      }
    }
  ]
}