NEWS
[gelöst] Basic HTML Widget JS Funktion
-
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
@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 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"}@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ünMit 1 statt true habe ich es auch schon probiert
-
@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ünMit 1 statt true habe ich es auch schon probiert
wert == "true" fill={wert:alias.0.Heizung.Speicherladepumpe.Schaltbefehl; wert=="true" ? "green":"grey"} -
wert == "true" fill={wert:alias.0.Heizung.Speicherladepumpe.Schaltbefehl; wert=="true" ? "green":"grey"} -
@lububroker vis oder vis2
-
@lububroker vis oder vis2
@mcu Vis 2
-
@mcu Vis 2
@lububroker Da funktioniert es mit
fill={wert:alias.0.Heizung.Speicherladepumpe.Schaltbefehl; wert==true ? "green":"grey"}
Welchen Type hat der DP?
-
@lububroker Da funktioniert es mit
fill={wert:alias.0.Heizung.Speicherladepumpe.Schaltbefehl; wert==true ? "green":"grey"}
Welchen Type hat der DP?
@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 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" } }@lububroker Zeig mal bitte die Objektdaten vom DP
-
@lububroker Zeig mal bitte die Objektdaten vom DP
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"} -
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"}@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 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@lububroker Muss Dir nicht peinlich sein. Passiert jedem Mal. Ok, dann als gelöst im ersten Post setzen.
Support us
544
Online32.6k
Benutzer82.2k
Themen1.3m
Beiträge