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

Funktioniert.
Vielen Dank

@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 Vis 2

@mcu sagte in Basic HTML Widget JS Funktion:

wert == "true"

Nein bleibt leider Grau

@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

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
Ja das ist natürlich auch eine. Werde ich wahrscheinlich so umsetzen.
Vielen Dank

@mcu
Nein ich möchte ja den Hintergrund nicht transparent, sondern das Theme verwenden.
Nur bei Alarm, soll sich der Hintergrund in rot ändern.
Aber ich denke das ist wahrscheinlich gar nicht möglich.

Trotzdem vielen Dank für deine Unterstützung

Das währe sonst noch der Export

[
  {
    "tpl": "tplMaterial2Blinds",
    "data": {
      "bindings": [
        "class"
      ],
      "sashCount": 2,
      "g_common": true,
      "ratio": 1,
      "borderWidth": 2.3,
      "oid": "",
      "oid_stop": "",
      "showValue": false,
      "slideSensor_oid1": null,
      "slideHandle_oid1": "0_userdata.0.Zentral.Zentral_Fenster_Status",
      "slideType1": "left",
      "slideRatio1": 1,
      "slidePos_oid1": null,
      "slideStop_oid1": null,
      "slideMin1": null,
      "slideMax1": null,
      "slideInvert1": null,
      "g_sashes-1": true,
      "widgetTitle": "Alle Fenster und Türen",
      "slideSensor_oid2": null,
      "slideHandle_oid2": "0_userdata.0.Zentral.Zentral_Fenster_Status",
      "slideType2": "right",
      "slideRatio2": 1,
      "slidePos_oid2": null,
      "slideStop_oid2": null,
      "slideMin2": null,
      "slideMax2": null,
      "slideInvert2": null,
      "g_sashes-2": true,
      "name": null,
      "comment": null,
      "class": "{wert:0_userdata.0.Zentral.Fenster_Alarm; wert==\"1\" ? \"blink\":\"\"}",
      "filterkey": null,
      "multi-views": null,
      "locked": null,
      "g_fixed": true,
      "noCard": false,
      "visibility-oid": null,
      "visibility-cond": "==",
      "visibility-val": 1,
      "visibility-groups": null,
      "visibility-groups-action": "hide",
      "g_visibility": true,
      "g_css_background": true
    },
    "style": {
      "bindings": [],
      "left": "485px",
      "top": "592px",
      "width": "100%",
      "height": "220",
      "position": "relative",
      "newLine": false,
      "background": null,
      "background-color": "",
      "background-image": null,
      "background-repeat": null,
      "background-attachment": null,
      "background-position": null,
      "background-size": null,
      "background-clip": null,
      "background-origin": null
    },
    "widgetSet": "vis-2-widgets-material",
    "_id": "i000001"
  }
]

@mcu
Es ist in Vis 2 gemacht
Von der Materials-Widgets Palette das Jalousie Widget. Aber ich habe den Blinker auch schon auf die anderen Materials Widgets angewendet, und ist bei allen das gleiche Ergebnis.