Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[LubuBroker]

Hallo zusammen
Ich möchte ein einfaches Pumpensymbol (Kreis mit einem Dreieck), das die Füllfarbe ändert, wenn die Pumpe läuft.
Ich habe nichts passendes für mich gefunden, und habe stattdessen einfach ein HTML Widget genommen.

Wieso habe ich z.B. kein SVG Shape genommen und für den Kreis und das Dreieck eine Gruppe gemacht werdet Ihr euch vielleicht fragen. Ich möchte, das das Symbol automatisch anhand der Bildschirmauflösung skaliert. Das heisst, das dann die Leitung auch immer in der Mitte der Pumpe ist. Und das Dreieck immer in der Mitte des Dreieck.

Da ich mich nicht so auskenne habe ich zugegebener maßen ChatGPT gefragt.
Ich hatte dann ungefähr diesen Code bekommen

<div style="width:100%; aspect-ratio: 1 / 1;">
  <svg viewBox="0 0 100 100" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
    <!-- Kreis -->
    <circle id="statusCircle" cx="50" cy="50" r="49"
      fill="gray"
      stroke="black"
      stroke-width="3" />

    <!-- Zentriertes Dreieck -->
    <polygon 
      points="50,2 10,74 90,74" 
      fill="none"
      stroke="black"
      stroke-width="3"
    />
  </svg>
</div>

<script>
  // Dein Datenpunkt
  const datapoint = {alias.0.Heizung.Speicherladepumpe.Schaltbefehl};

  // Farbe ändern je nach Wert
  function updateCircleColor(value) {
    const color = value ? "green" : "gray";
    document.getElementById("statusCircle").setAttribute("fill", color);
  }

  // Startwert lesen
  vis.binds.basic.getValue(datapoint, function (val) {
    updateCircleColor(val);
  });

  // Auf Änderungen reagieren
  vis.states.bind(datapoint + ".val", function (e, newVal) {
    updateCircleColor(newVal);
  });
</script>

Ich habe Ihn bereits ein wenig angepasst, damit es für mich passen würde.
Leider funktioniert das mit der Füllfarbe aber nicht.
Anscheinend funktionieren keine JS funktionen im HTML Widget.

Ich habe es dan noch so Probiert

<div style="width:100%; aspect-ratio: 1 / 1;">
  <svg viewBox="0 0 100 100" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
    <!-- Kreis -->
    <circle id="statusCircle" cx="50" cy="50" r="49"
      fill={Wert:alias.0.Heizung.Speicherladepumpe.Schaltbefehl; wert==true? "green":"grey"}
      stroke="black"
      stroke-width="3" />

    <!-- Zentriertes Dreieck -->
    <polygon 
      points="50,2 10,74 90,74" 
      fill="none"
      stroke="black"
      stroke-width="3"
    />
  </svg>
</div>

Da ist der Kreis dann aber einfach Schwarz
Was funktioniert ist, wenn ich direkt einen Datenpunkt mit dem Füllfarbentext hineinschreibe.
Aber ich möchte eigentlich umgehen dafür extra wieder zusätzliche datenpunkte anzulegen.

Hat vielleicht jemand einen Tipp für mich.

Vilen Dank

[MCU]

@lububroker sagte in Basic HTML Widget JS Funktion:

fill={Wert:alias.0.Heizung.Speicherladepumpe.Schaltbefehl; wert==true? "green":"grey"}

Nicht Wert sondern wert?

fill={wert:alias.0.Heizung.Speicherladepumpe.Schaltbefehl; wert==true? "green":"grey"}

[LubuBroker]

@mcu Ach ja das war ein Fehler.
Jetzt ist es so, das es grau angezeigt wird.
Aber bei True wird es immer noch nicht grün

Mit 1 statt true habe ich es auch schon probiert

[MCU]

@lububroker

wert == "true"

fill={wert:alias.0.Heizung.Speicherladepumpe.Schaltbefehl; wert=="true" ? "green":"grey"}

[LubuBroker]

@mcu sagte in Basic HTML Widget JS Funktion:

wert == "true"

Nein bleibt leider Grau

[MCU]

@lububroker vis oder vis2

[LubuBroker]

@mcu Vis 2

[MCU]

@lububroker Da funktioniert es mit

fill={wert:alias.0.Heizung.Speicherladepumpe.Schaltbefehl; wert==true ? "green":"grey"}

Welchen Type hat der DP?

[LubuBroker]

@mcu sagte in Basic HTML Widget JS Funktion:

fill={wert:alias.0.Heizung.Speicherladepumpe.Schaltbefehl; wert==true ? "green":"grey"}

Boolean
habe es jetzt nochmals so eingefügt. Aber es funktioniert nicht.

Das ist der Datenpunkt

{
  "type": "state",
  "common": {
    "name": "Schalten",
    "role": "switch",
    "type": "boolean",
    "read": true,
    "write": true,
    "alias": {
      "id": {
        "read": "openknx.0.Aussenbereich.Verbraucher.Bewässerung_Pumpe_Status",
        "write": "openknx.0.Aussenbereich.Verbraucher.Bewässerung_Pumpe_Schalten"
      }
    }
  },
  "_id": "alias.0.Garten.Bewaesserung.Pumpe.Schalten",
  "native": {},
  "from": "system.adapter.admin.0",
  "user": "system.user.admin",
  "ts": 1744870870221,
  "acl": {
    "object": 1636,
    "state": 1636,
    "file": 1632,
    "owner": "system.user.admin",
    "ownerGroup": "system.group.administrator"
  }
}

[MCU]

@lububroker Zeig mal bitte die Objektdaten vom DP

[MCU]

@LubuBroker

alias.0.Heizung.Speicherladepumpe.Schaltbefehl /* ist ja auch nicht der DP */


// alias.0.Garten.Bewaesserung.Pumpe.Schalten
// -> also
fill={wert:alias.0.Garten.Bewaesserung.Pumpe.Schalten; wert==true ? "green":"grey"}

[LubuBroker]

@mcu Ou man
Das ist ja peinlich :face_with_rolling_eyes:
Die Speicherladepumpe kann ich nicht beschreiben.
Drum habe ich mal die zisternenpumpe genommen. Aber im anderen HTML Objekt nicht getauscht.

Funktioniert.
Vielen Dank

[MCU]

@lububroker Muss Dir nicht peinlich sein. Passiert jedem Mal. Ok, dann als gelöst im ersten Post setzen.