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

[ChristianM]

Hallo,

wie kann ich einen einfachen Schalter/Taster erstellen. Ich suche eine Möglichkeit wie die "Valuelist HTML Style" nur halt mit Bedienung einer Variable.

Es soll ein einfaches Ein / Aus Schaltfeld werden.

Danke schon mal

Christian

[ruhr70]

je nachdem, was Du "stylen" willst, reicht ggf ein: basic - bool html

Zu mindestens für den Inhalt des "Schalters"

Das Beispiel zeigt damit einen Schalter, mit der grauen Schrift "ist: " und dann entweder in grün "ein" oder in rot "aus", je nach Wert des Objekts (true/false).

[
  {
    "tpl": "tplValueBoolCtrl",
    "data": {
      "oid": "node-red.0.fritzbox.config.infoEmail",
      "visibility-cond": "==",
      "visibility-val": 1,
      "html_false": "ist: aus",
      "html_true": "ist: ein"
    },
    "style": {
      "left": "215px",
      "top": "355px",
      "width": "88.77777767181396px",
      "height": "23.77777767181396px",
      "z-index": "30",
      "color": "rgb(68, 68, 68)",
      "text-align": "center",
      "text-shadow": "none",
      "font-family": "'Lucida Grande', 'Lucida Sans', Arial, sans-serif",
      "font-style": "normal",
      "font-variant": "normal",
      "font-weight": "bold",
      "font-size": "14px",
      "line-height": "23.9999980926514px",
      "background": "rgb(204, 204, 204) none repeat scroll 0% 0% / auto padding-box border-box",
      "background-color": "rgb(204, 204, 204)",
      "background-origin": "padding-box",
      "border-width": "1.11111116409302px",
      "border-style": "solid",
      "border-color": "rgb(68, 68, 68)",
      "border-radius": "0px",
      "box-shadow": "rgb(68, 68, 68) 0px 0px 1px 1px"
    },
    "widgetSet": "basic"
  }
]

[ChristianM]

Hallo und danke erst mal.

das meiste funktioniert auch schon nur die eigentliche Funktion des Schalter/Tasters funktioniert leider nicht.

Wie hast du eigentlich den kompletten HTML Code heraus kopiert.

Gruß Christian

[ruhr70]

Du meinst das JSON für das Widget?

Wenn Du im VIS Editor im Tab Widgets bist, kannst Du oben rechts "Widget exportieren" und "Widget importieren" auswählen. Das funktioniert auch für eine Gruppe markierter Widgets.

Der Schalter geht nicht? Wenn Du ihn anklickst änder er denn Wert der Objekt IP zwischen true und false. Was passiert denn, wenn Du den Schalter drückst und Du in den Objekten oder Zuständen nachsiehst?

Du kannst übrigens die wildesten Sachen dynamisch "stylen", z.B. mit dem Javascript Adapter. Jeden beliebigen Wert, außer der Objekt ID kannst Du wiederum über ein anderes Objekt verändern. Wenn Du z.B. ein Javascript-Apapter Objekt mit dem Namen javascript.0.fontsize hast, kannst Du dieses mit {javascript.0.fontsize} irgendwo bei den Werten im Widget einsetzen (z.B. bei Fontsize). Wenn Du nun den Wert im Objekt ändest, ändert sich die eingestellte Schriftgröße. Ist ein schlechtes Beispiel. Soll aber zeigen, dass man extrem flexibel ist.

[ChristianM]

Sehr schön,

danke jetzt funktioniert es nachdem ich einfach deinen HTML Code importiert und abgeändert habe. Ich hatte wohl das falsche Widget ausgewählt. Bin leider in Sachen HTML noch ein absoluter Anfänger. Gibt es vielleicht irgendwo Demo Seite wo man sich diverse Sachen anschauen kann bzw "klauen" kann ?

Gruß Christian

[ruhr70]

Es wird für Deinen Fall wahrscheinlich bessere Widgets geben. Das war es, was mir auf die Schelle eingefallen ist. Schön, wenn es passt.

Es ist eine Demoseite mit Beispielen in Arbeit, siehe http://forum.iobroker.org/viewtopic.php … line#p6485. Momentan ist der Link nicht aktiv. Da wird aber was kommen :-)