Shelly's schalten, direkt aus Grafana Dashboards heraus.

Beitrag von **Ulrich** » Di 12. Aug 2025, 11:08

Oft gibt es den Wunsch, aus dem Grafana Dashboard direkt Shelly-Relais zu schalten. Hier ist eine Anleitung dazu, wie man so etwas mit einem HTML Button machen kann. Es können so sehr viele Buttons erstellt werden, wenn man sein eigenes "Schaltpult" erstellen möchte.
Eure Ideen sind willkommen.

Beitrag von **Ulrich** » So 17. Aug 2025, 11:11

Hier ist eine Möglichkeit, wie man die Farbe des Buttons bei jedem Klick ändern kann:

Was muss geändert werden gegenüber der 1. Beschreibung?

In jeder "Button" Zeile muss der Eintrag: class = "Buttonx" onclick = "changeColor(this)" ergänzt werden. x = eine fortlaufende Zahl also Button1, Button2 usw.
Der <script> ... </script> Block muss als Erstes, vor die Button Zeilen platziert werden!

Dadurch ändert sich die Farbe des Buttons abwechselnd. Das hat jetzt nichts mit dem Zustand des Kontaktes zu tun, sondern man kann nur erkennen, ob der Button gedrückt wurde oder nicht. Es ist ein kleiner Schritt in die richtige Richtung. Es fällt uns bestimmt noch etwas Besseres ein.

Schwarzermann · Beitrag von **Schwarzermann** » So 17. Aug 2025, 11:24

Das ist ja zumindest mal ein Anfang, alles andere wird sich zeigen.

Beitrag von **Ulrich** » So 17. Aug 2025, 12:27

1. Test:
So sieht das auf einem Handy aus: Die ersten beiden Zeilen sind Fenster in Zimmern. Der rote Balken in der unteren Grafik ist das Licht auf dem Balkon. (Bewegungsmelder)

Schwarzermann · Beitrag von **Schwarzermann** » So 17. Aug 2025, 16:50

Ok du hast Fensterkontakte das ist auch noch so ein Nice to have welche hast du da genommen?
Ja finde das auf dem Handy ebenfalls so vor Da bin ich am rum probieren ob man auf dem Handy nicht 2 nebeneinander angezeigt bekommt, auf der anderen Seite kann man Gut Raum für Raum abgehen.

Beitrag von **Ulrich** » So 17. Aug 2025, 16:55

2 nebeneinander lässt Grafana auf dem Handy nicht zu. Zumindest habe ich noch keinen Trick gefunden. Die Fensterkontakte sind die Shelly BLU Door/window. Die sind preiswert.

Schwarzermann · Beitrag von **Schwarzermann** » So 17. Aug 2025, 17:09

Ok du hast Fensterkontakte das ist auch noch so ein Nice to have welche hast du da genommen?
Ja finde das auf dem Handy ebenfalls so vor Da bin ich am rum probieren ob man auf dem Handy nicht 2 nebeneinander angezeigt bekommt, auf der anderen Seite kann man Gut Raum für Raum abgehen.

Und ich habe noch etwas gefunden und das funktioniert sogar

: Screenshot 2025-08-17 170454.png (18.94 KiB) 41 mal betrachtet

erst wenn man den Kontakt schaltet erscheint dann oben einmal ein und einmal aus lässt sich damit etwas machen?

Hab den Support offen dann kannst du darauf zugreifen und wenn ich selbst über die shelly browser das relais schalte wird es in der Solaranzeige angezeigt ob ein oder aus.

Schwarzermann · Beitrag von **Schwarzermann** » Di 19. Aug 2025, 09:31

Code: Alles auswählen

<!DOCTYPE html>  
<html lang="de">  
<head>  
  <meta charset="utf-8" />  
  <title>Relais-Steuerung</title>  
  <style>  
    .btn {  
      background: #FF6600;  
      color: white;  
      width: 95%;  
      height: 50px;  
      margin: 6px 0;  
      border: none;  
      border-radius: 6px;  
      cursor: pointer;  
      font-size: 16px;  
      text-align: center;  
    }  
    .btn.on { background: #28a745; }  /* grün */  
    .btn.off { background: #dc3545; } /* rot */  
    .frame { display: none; } /* Hidden frame kann entfernt oder belassen werden */  
  </style>  
</head>  
<body>  

  <!-- Konfigurierbare Relais-IP-Adressen -->  
  <div>  
    <label>IP Relais 0: <input id="ip0" type="text" value="192.168.178.87" /></label>  
  </div>  
  <div>  
    <label>IP Relais 1: <input id="ip1" type="text" value="192.168.178.87" /></label>  
  </div>  
  <div>  
    <label>IP Relais 2: <input id="ip2" type="text" value="192.168.178.87" /></label>  
  </div>  
  <div>  
    <label>IP Relais 3: <input id="ip3" type="text" value="192.168.178.87" /></label>  
  </div>  

  <!-- Steuerbuttons (je Relais) -->  
  <button class="btn" id="btn0" data-id="0" data-ip="ip0">Werkstatt Licht on/off</button>  
  <button class="btn" id="btn1" data-id="1" data-ip="ip1">Werkstatt Steckdose on/off</button>  
  <button class="btn" id="btn2" data-id="2" data-ip="ip2">Grube/Garage Licht on/off</button>  
  <button class="btn" id="btn3" data-id="3" data-ip="ip3">Aussen Licht on/off</button>  

  <iframe src="about:blank" name="hiddenframe" height="0" width="0" frameborder="0" class="frame"></iframe>  

  <h3>Live-Status</h3>  
  <div>Relay 0: <span id="0">--</span></div>  
  <div>Relay 1: <span id="1">--</span></div>  
  <div>Relay 2: <span id="2">--</span></div>  
  <div>Relay 3: <span id="3">--</span></div>  

  <script>  
    // Zentrale Konfigurationsdaten  
    const relays = [  
      { id: 0, ipInputId: 'ip0', statusElemId: 'sw0', btnId: 'btn0' },  
      { id: 1, ipInputId: 'ip1', statusElemId: 'sw1', btnId: 'btn1' },  
      { id: 2, ipInputId: 'ip2', statusElemId: 'sw2', btnId: 'btn2' },  
      { id: 3, ipInputId: 'ip3', statusElemId: 'sw3', btnId: 'btn3' }  
    ];  

    // Hilfsfunktion: Liefert die aktuelle IP für ein Relais  
    function getRelayIP(relay) {  
      const el = document.getElementById(relay.ipInputId);  
      const v = el && el.value ? el.value.trim() : '';  
      return v || '192.168.178.87';  
    }  

    // Status-UI aktualisieren  
    function updateStatusUI(relayIndex, is

Also soweit bin ich mit chat gpt schon gekommen leider lassen sich die Buttons nicht schalten dazu feheln mir einfch die Kenntnisse

Aber das layout gefällt mir bis auf die IP Adressen oben die braucht niemand.

Beitrag von **Ulrich** » Di 19. Aug 2025, 09:43

Der gepostete Code ist nur die Hälfte. Da kann man nicht heraus erkennen wie es funktionieren soll.
So kann es auf jeden Fall nicht funktionieren.

Schwarzermann · Beitrag von **Schwarzermann** » Di 19. Aug 2025, 14:08

Code: Alles auswählen

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial, sans-serif; }
    .device {
      margin-bottom: 25px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 10px;
      box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    }
    .device h3 { margin: 5px 0 15px 0; }
    .btn {
      color: white;
      width: 95%;
      height: 50px;
      margin: 5px 0;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
    }
    .btn-on { background: green; }
    .btn-off { background: red; }
  </style>
</head>
<body>
  <h2>Shelly Steuerung</h2>
  <div id="devices"></div>

  <script>
    // ===== KONFIGURATION =====
    const devices = [
      {
        ip: "192.168.178.58",
        name: "Heizungskeller",
        relays: [
          { id: 0, name: "Wärmepumpe" },
          { id: 1, name: "Heißwasser" }
        ]
      },
      {
        ip: "192.168.178.87",
        name: "Garage",
        relays: [
          { id: 0, name: "Licht Garage" },
          { id: 1, name: "Tor Antrieb" },
          { id: 2, name: "Werkbank Steckdosen" },
          { id: 3, name: "Reserve" }
        ]
      }
    ];
    // ==========================

    const devicesDiv = document.getElementById("devices");

    // Buttons pro Gerät erzeugen
    devices.forEach(device => {
      let devDiv = document.createElement("div");
      devDiv.className = "device";

      let title = document.createElement("h3");
      title.innerText = `${device.name} @ ${device.ip}`;
      devDiv.appendChild(title);

      device.relays.forEach(relay => {
        let btn = document.createElement("button");
        btn.id = `relay_${device.ip}_${relay.id}`;
        btn.className = "btn btn-off";
        btn.innerText = relay.name + " AUS";
        btn.onclick = function() {
          fetch(`http://${device.ip}/rpc/switch.toggle?id=${relay.id}`)
            .then(() => setTimeout(() => updateDevice(device), 1000)); // 1 Sek. warten
        };
        devDiv.appendChild(btn);
      });

      devicesDiv.appendChild(devDiv);
    });

    // Status für ein Gerät laden
    async function updateDevice(device) {
      try {
        let res = await fetch(`http://${device.ip}/rpc/Shelly.GetStatus`);
        let data = await res.json();

        device.relays.forEach(relay => {
          let sw = data[`switch:${relay.id}`];
          if (sw && sw.output !== undefined) {
            updateButton(device.ip, relay, sw.output);
          }
        });
      } catch (err) {
        console.error(`Shelly ${device.ip} nicht erreichbar:`, err);
      }
    }

    // Button anpassen
    function updateButton(ip, relay, isOn) {
      let btn = document.getElementById(`relay_${ip}_${relay.id}`);
      if (isOn) {
        btn.className = "btn btn-on";
        btn.innerText = relay.name + " EIN";
      } else {
        btn.className = "btn btn-off";
        btn.innerText = relay.name + " AUS";
      }
    }

    // Alle Geräte aktualisieren
    function updateAll() {
      devices.forEach(device => updateDevice(device));
    }

    // Status alle 3 Sekunden abrufen
    setInterval(updateAll, 3000);
    updateAll();
  </script>
</body>
</html>

Und dass kommt nun dabei raus es lässt sich schalten und in der grafana .ini musste

Code: Alles auswählen

[security]
allow_embedding = true
disable_sanitize_html = true

noch umgesetzt werden.
Leider funktioniert der Staus nicht mal schaun ob mir da gpt weiter helfen kann oder woran es liegt

Shelly's schalten, direkt aus Grafana Dashboards heraus.

Shelly's schalten, direkt aus Grafana Dashboards heraus.

Re: Shelly's schalten, direkt aus Grafana Dashboards heraus.

Re: Shelly's schalten, direkt aus Grafana Dashboards heraus.

Re: Shelly's schalten, direkt aus Grafana Dashboards heraus.

Re: Shelly's schalten, direkt aus Grafana Dashboards heraus.

Re: Shelly's schalten, direkt aus Grafana Dashboards heraus.

Re: Shelly's schalten, direkt aus Grafana Dashboards heraus.

Re: Shelly's schalten, direkt aus Grafana Dashboards heraus.

Re: Shelly's schalten, direkt aus Grafana Dashboards heraus.

Re: Shelly's schalten, direkt aus Grafana Dashboards heraus.

Wer ist online?