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

[Peoples]

Hi Leute,

ich gebe einem Html-Widget die Höhe dynamisch (berechnet druch ein Binding). Das seltsame ist, das Widget wird zwar "länger" aber es verlängert sich nach unten und nicht wie gewünscht nach oben.

Hat einer von euch eine idee wie ich das hin bekommen könnte?

Hier mal mein Binding:

{vb:javascript.0.Photovoltaik.Momentan_Verbrauch;pr:sma-em.0.XxXxXxXxXx.pregard;pr > 0 ? (vb*0.0008)*pr +'px': '0px'}

[OliverIO]

das koordinatensystem von html fängt oben links an und wird dan auf der x und y achse nach unten und nach rechts größer.
wenn du das binding bei höhe definiert hast (wovon ich ausgehe, dann bleibt der ursprung deines widgets (oben/links bzw. top/left ja unverändert, daher verändert sich die höhe immer nur nach unten.
wenn du das widget nur nach oben wachsen lassen möchtest, musst du 2 eigenschaften berechnen: top und heigth bzw. oben und höhe

beispiel wenn das untere ende deines widgets auf 200px liegen soll (nicht getestet)
height/höhe: {vb:javascript.0.Photovoltaik.Momentan_Verbrauch;pr:sma-em.0.XxXxXxXxXx.pregard;pr > 0 ? (vb*0.0008)pr +'px': '0px'}
top/oben: {vb:javascript.0.Photovoltaik.Momentan_Verbrauch;pr:sma-em.0.XxXxXxXxXx.pregard;pr > 0 ? (200-(vb0.0008)*pr) +'px': '200px'}

[Peoples]

@OliverW
Super Sache daran hab ich gar nicht geachtet habe die ganze Zeit nur den Fehler gesucht

Probiere ich dann gleich Mal

Dank dir!

[Peoples]

Also um hier mal noch eine Rückmeldung zu geben das ganze hat mit der Dynamischen Höhenangabe dann tatsächlich funktioniert!

Hier ein Bildchen

[liv-in-sky]

danke fürs posten - ganz verstehe ich es noch nicht - ihr schreibt das direkt im widget in width oder hight unter css-allgemein

vb und pr sind variablen, die aus einem datenpunkt ausgelesen werden ?
(vb*0.0008)pr +'px': '0px'}: da werden die werte berechnet - kann man eine zahl plus einen string einfach so einbinden ?

kann man sich das irgendwo anlesen ?

[Peoples]

@liv-in-sky

• Ihr schreibt das direkt im widget in width oder hight unter css-allgemein -> Richtig

• vb und pr sind variablen, die aus einem datenpunkt ausgelesen werden -> Richtig

• (vb*0.0008)pr +'px': '0px'}: da werden die werte berechnet - kann man eine zahl plus einen string einfach so einbinden -> das + und dann den String in Anführungszeichen

• kann man sich das irgendwo anlesen ? -> Kann ich nicht sagen

Es ist ziemlich viel gebastel, mit verschiedenen Bindings und ein bisschen CSS für die Rundungen.

Am einfachsten erklärt sich das Ganze wenn du einfach mal folgenden View-Export bei dir importierst:

{
  "settings": {
    "style": {
      "background-color": "",
      "background_class": ""
    },
    "theme": "redmond",
    "sizex": "",
    "sizey": "",
    "gridSize": "",
    "useBackground": false,
    "snapType": null
  },
  "widgets": {
    "e00001": {
      "tpl": "tplHtml",
      "data": {
        "g_fixed": false,
        "g_visibility": false,
        "g_css_font_text": true,
        "g_css_background": false,
        "g_css_shadow_padding": false,
        "g_css_border": false,
        "g_gestures": false,
        "g_signals": false,
        "visibility-cond": "==",
        "visibility-val": 1,
        "visibility-groups-action": "hide",
        "refreshInterval": "0",
        "signals-cond-0": "==",
        "signals-val-0": true,
        "signals-icon-0": "/vis/signals/lowbattery.png",
        "signals-icon-size-0": 0,
        "signals-blink-0": false,
        "signals-horz-0": 0,
        "signals-vert-0": 0,
        "signals-hide-edit-0": false,
        "signals-cond-1": "==",
        "signals-val-1": true,
        "signals-icon-1": "/vis/signals/lowbattery.png",
        "signals-icon-size-1": 0,
        "signals-blink-1": false,
        "signals-horz-1": 0,
        "signals-vert-1": 0,
        "signals-hide-edit-1": false,
        "signals-cond-2": "==",
        "signals-val-2": true,
        "signals-icon-2": "/vis/signals/lowbattery.png",
        "signals-icon-size-2": 0,
        "signals-blink-2": false,
        "signals-horz-2": 0,
        "signals-vert-2": 0,
        "signals-hide-edit-2": false,
        "html": "PV-</br>Erzeugung:",
        "lc-type": "last-change",
        "lc-is-interval": true,
        "lc-is-moment": false,
        "lc-format": "",
        "lc-position-vert": "top",
        "lc-position-horz": "right",
        "lc-offset-vert": 0,
        "lc-offset-horz": 0,
        "lc-font-size": "12px",
        "lc-font-family": "",
        "lc-font-style": "",
        "lc-bkg-color": "",
        "lc-color": "",
        "lc-border-width": "0",
        "lc-border-style": "",
        "lc-border-color": "",
        "lc-border-radius": 10,
        "lc-zindex": 0
      },
      "style": {
        "left": "27px",
        "top": "159px",
        "width": "80px",
        "height": "52px",
        "z-index": "2",
        "text-align": "center",
        "color": "white",
        "font-size": "15px"
      },
      "widgetSet": "basic"
    },
    "e00002": {
      "tpl": "tplValueFloat",
      "data": {
        "oid": "javascript.0.Photovoltaik.Momentan_Verbrauch",
        "g_fixed": false,
        "g_visibility": false,
        "g_css_font_text": true,
        "g_css_background": false,
        "g_css_shadow_padding": false,
        "g_css_border": false,
        "g_gestures": false,
        "g_signals": false,
        "g_last_change": false,
        "visibility-cond": "==",
        "visibility-val": 1,
        "visibility-groups-action": "hide",
        "is_comma": false,
        "factor": "0.001",
        "signals-cond-0": "==",
        "signals-val-0": true,
        "signals-icon-0": "/vis/signals/lowbattery.png",
        "signals-icon-size-0": 0,
        "signals-blink-0": false,
        "signals-horz-0": 0,
        "signals-vert-0": 0,
        "signals-hide-edit-0": false,
        "signals-cond-1": "==",
        "signals-val-1": true,
        "signals-icon-1": "/vis/signals/lowbattery.png",
        "signals-icon-size-1": 0,
        "signals-blink-1": false,
        "signals-horz-1": 0,
        "signals-vert-1": 0,
        "signals-hide-edit-1": false,
        "signals-cond-2": "==",
        "signals-val-2": true,
        "signals-icon-2": "/vis/signals/lowbattery.png",
        "signals-icon-size-2": 0,
        "signals-blink-2": false,
        "signals-horz-2": 0,
        "signals-vert-2": 0,
        "signals-hide-edit-2": false,
        "lc-type": "last-change",
        "lc-is-interval": true,
        "lc-is-moment": false,
        "lc-format": "",
        "lc-position-vert": "top",
        "lc-position-horz": "right",
        "lc-offset-vert": 0,
        "lc-offset-horz": 0,
        "lc-font-size": "12px",
        "lc-font-family": "",
        "lc-font-style": "",
        "lc-bkg-color": "",
        "lc-color": "",
        "lc-border-width": "0",
        "lc-border-style": "",
        "lc-border-color": "",
        "lc-border-radius": 10,
        "lc-zindex": 0,
        "digits": "2",
        "html_append_plural": "</br> kW"
      },
      "style": {
        "left": "160px",
        "top": "221px",
        "width": "80px",
        "height": "40px",
        "text-align": "center",
        "color": "white",
        "z-index": "2",
        "font-size": "20px"
      },
      "widgetSet": "basic"
    },
    "e00003": {
      "tpl": "tplHtml",
      "data": {
        "g_fixed": false,
        "g_visibility": false,
        "g_css_font_text": true,
        "g_css_background": false,
        "g_css_shadow_padding": false,
        "g_css_border": false,
        "g_gestures": false,
        "g_signals": false,
        "visibility-cond": "==",
        "visibility-val": 1,
        "visibility-groups-action": "hide",
        "refreshInterval": "0",
        "signals-cond-0": "==",
        "signals-val-0": true,
        "signals-icon-0": "/vis/signals/lowbattery.png",
        "signals-icon-size-0": 0,
        "signals-blink-0": false,
        "signals-horz-0": 0,
        "signals-vert-0": 0,
        "signals-hide-edit-0": false,
        "signals-cond-1": "==",
        "signals-val-1": true,
        "signals-icon-1": "/vis/signals/lowbattery.png",
        "signals-icon-size-1": 0,
        "signals-blink-1": false,
        "signals-horz-1": 0,
        "signals-vert-1": 0,
        "signals-hide-edit-1": false,
        "signals-cond-2": "==",
        "signals-val-2": true,
        "signals-icon-2": "/vis/signals/lowbattery.png",
        "signals-icon-size-2": 0,
        "signals-blink-2": false,
        "signals-horz-2": 0,
        "signals-vert-2": 0,
        "signals-hide-edit-2": false,
        "html": "Gesamt</br>\nVerbrauch:",
        "lc-type": "last-change",
        "lc-is-interval": true,
        "lc-is-moment": false,
        "lc-format": "",
        "lc-position-vert": "top",
        "lc-position-horz": "right",
        "lc-offset-vert": 0,
        "lc-offset-horz": 0,
        "lc-font-size": "12px",
        "lc-font-family": "",
        "lc-font-style": "",
        "lc-bkg-color": "",
        "lc-color": "",
        "lc-border-width": "0",
        "lc-border-style": "",
        "lc-border-color": "",
        "lc-border-radius": 10,
        "lc-zindex": 0
      },
      "style": {
        "left": "160px",
        "top": "159px",
        "width": "80px",
        "height": "52px",
        "z-index": "2",
        "text-align": "center",
        "color": "white",
        "font-size": "15px"
      },
      "widgetSet": "basic"
    },
    "e00004": {
      "tpl": "tplHtml",
      "data": {
        "g_fixed": false,
        "g_visibility": false,
        "g_css_font_text": true,
        "g_css_background": false,
        "g_css_shadow_padding": false,
        "g_css_border": false,
        "g_gestures": false,
        "g_signals": false,
        "g_last_change": false,
        "visibility-cond": "==",
        "visibility-val": 1,
        "visibility-groups-action": "hide",
        "refreshInterval": "0",
        "signals-cond-0": "==",
        "signals-val-0": true,
        "signals-icon-0": "/vis/signals/lowbattery.png",
        "signals-icon-size-0": 0,
        "signals-blink-0": false,
        "signals-horz-0": 0,
        "signals-vert-0": 0,
        "signals-hide-edit-0": false,
        "signals-cond-1": "==",
        "signals-val-1": true,
        "signals-icon-1": "/vis/signals/lowbattery.png",
        "signals-icon-size-1": 0,
        "signals-blink-1": false,
        "signals-horz-1": 0,
        "signals-vert-1": 0,
        "signals-hide-edit-1": false,
        "signals-cond-2": "==",
        "signals-val-2": true,
        "signals-icon-2": "/vis/signals/lowbattery.png",
        "signals-icon-size-2": 0,
        "signals-blink-2": false,
        "signals-horz-2": 0,
        "signals-vert-2": 0,
        "signals-hide-edit-2": false,
        "lc-type": "last-change",
        "lc-is-interval": true,
        "lc-is-moment": false,
        "lc-format": "",
        "lc-position-vert": "top",
        "lc-position-horz": "right",
        "lc-offset-vert": 0,
        "lc-offset-horz": 0,
        "lc-font-size": "12px",
        "lc-font-family": "",
        "lc-font-style": "",
        "lc-bkg-color": "",
        "lc-color": "",
        "lc-border-width": "0",
        "lc-border-style": "",
        "lc-border-color": "",
        "lc-border-radius": 10,
        "lc-zindex": 0,
        "html": "{pv:sma-em.0.3002852993.psurplus;netz:sma-em.0.3002852993.pregard;pv > netz ? \"Netz</br>einspeißung:\" : \"Netz</br>Bezug:\"}"
      },
      "style": {
        "left": "292px",
        "top": "159px",
        "width": "80px",
        "height": "45px",
        "text-align": "center",
        "z-index": "2",
        "color": "white",
        "font-size": "15px"
      },
      "widgetSet": "basic"
    },
    "e00005": {
      "tpl": "tplHtml",
      "data": {
        "g_fixed": false,
        "g_visibility": false,
        "g_css_font_text": false,
        "g_css_background": false,
        "g_css_shadow_padding": false,
        "g_css_border": false,
        "g_gestures": false,
        "g_signals": false,
        "g_last_change": false,
        "visibility-cond": "==",
        "visibility-val": 1,
        "visibility-groups-action": "hide",
        "refreshInterval": "0",
        "signals-cond-0": "==",
        "signals-val-0": true,
        "signals-icon-0": "/vis/signals/lowbattery.png",
        "signals-icon-size-0": 0,
        "signals-blink-0": false,
        "signals-horz-0": 0,
        "signals-vert-0": 0,
        "signals-hide-edit-0": false,
        "signals-cond-1": "==",
        "signals-val-1": true,
        "signals-icon-1": "/vis/signals/lowbattery.png",
        "signals-icon-size-1": 0,
        "signals-blink-1": false,
        "signals-horz-1": 0,
        "signals-vert-1": 0,
        "signals-hide-edit-1": false,
        "signals-cond-2": "==",
        "signals-val-2": true,
        "signals-icon-2": "/vis/signals/lowbattery.png",
        "signals-icon-size-2": 0,
        "signals-blink-2": false,
        "signals-horz-2": 0,
        "signals-vert-2": 0,
        "signals-hide-edit-2": false,
        "lc-type": "last-change",
        "lc-is-interval": true,
        "lc-is-moment": false,
        "lc-format": "",
        "lc-position-vert": "top",
        "lc-position-horz": "right",
        "lc-offset-vert": 0,
        "lc-offset-horz": 0,
        "lc-font-size": "12px",
        "lc-font-family": "",
        "lc-font-style": "",
        "lc-bkg-color": "",
        "lc-color": "",
        "lc-border-width": "0",
        "lc-border-style": "",
        "lc-border-color": "",
        "lc-border-radius": 10,
        "lc-zindex": 0,
        "html": "{ps:sma-em.0.3002852993.psurplus;pr:sma-em.0.3002852993.pregard;ps > 0 ? (Math.round(ps)/1000).toFixed(2)+'<br>kW': (Math.round(pr)/1000).toFixed(2)+'<br>kW'}"
      },
      "style": {
        "left": "291px",
        "top": "220px",
        "text-align": "center",
        "width": "80px",
        "height": "40px",
        "z-index": "2",
        "color": "white",
        "font-size": "20px"
      },
      "widgetSet": "basic"
    },
    "e00006": {
      "tpl": "tplHtml",
      "data": {
        "g_fixed": false,
        "g_visibility": false,
        "g_css_font_text": false,
        "g_css_background": true,
        "g_css_shadow_padding": false,
        "g_css_border": true,
        "g_gestures": false,
        "g_signals": false,
        "g_last_change": false,
        "visibility-cond": "==",
        "visibility-val": 1,
        "visibility-groups-action": "hide",
        "refreshInterval": "0",
        "signals-cond-0": "==",
        "signals-val-0": true,
        "signals-icon-0": "/vis/signals/lowbattery.png",
        "signals-icon-size-0": 0,
        "signals-blink-0": false,
        "signals-horz-0": 0,
        "signals-vert-0": 0,
        "signals-hide-edit-0": false,
        "signals-cond-1": "==",
        "signals-val-1": true,
        "signals-icon-1": "/vis/signals/lowbattery.png",
        "signals-icon-size-1": 0,
        "signals-blink-1": false,
        "signals-horz-1": 0,
        "signals-vert-1": 0,
        "signals-hide-edit-1": false,
        "signals-cond-2": "==",
        "signals-val-2": true,
        "signals-icon-2": "/vis/signals/lowbattery.png",
        "signals-icon-size-2": 0,
        "signals-blink-2": false,
        "signals-horz-2": 0,
        "signals-vert-2": 0,
        "signals-hide-edit-2": false,
        "lc-type": "last-change",
        "lc-is-interval": true,
        "lc-is-moment": false,
        "lc-format": "",
        "lc-position-vert": "top",
        "lc-position-horz": "right",
        "lc-offset-vert": 0,
        "lc-offset-horz": 0,
        "lc-font-size": "12px",
        "lc-font-family": "",
        "lc-font-style": "",
        "lc-bkg-color": "",
        "lc-color": "",
        "lc-border-width": "0",
        "lc-border-style": "",
        "lc-border-color": "",
        "lc-border-radius": 10,
        "lc-zindex": 0
      },
      "style": {
        "left": "17px",
        "top": "20px",
        "background-color": "{pv:modbus.0.inputRegisters.30775_SMA_PVLeistung_Aktuell; pv > 0 ? 'green' : 'gray'}",
        "z-index": "0",
        "width": "100px",
        "height": "260px",
        "border-width": "0px",
        "border-style": "none",
        "border-radius": "10px"
      },
      "widgetSet": "basic"
    },
    "e00007": {
      "tpl": "tplHtml",
      "data": {
        "g_fixed": false,
        "g_visibility": false,
        "g_css_font_text": false,
        "g_css_background": true,
        "g_css_shadow_padding": false,
        "g_css_border": true,
        "g_gestures": false,
        "g_signals": false,
        "g_last_change": false,
        "visibility-cond": "==",
        "visibility-val": 1,
        "visibility-groups-action": "hide",
        "refreshInterval": "0",
        "signals-cond-0": "==",
        "signals-val-0": true,
        "signals-icon-0": "/vis/signals/lowbattery.png",
        "signals-icon-size-0": 0,
        "signals-blink-0": false,
        "signals-horz-0": 0,
        "signals-vert-0": 0,
        "signals-hide-edit-0": false,
        "signals-cond-1": "==",
        "signals-val-1": true,
        "signals-icon-1": "/vis/signals/lowbattery.png",
        "signals-icon-size-1": 0,
        "signals-blink-1": false,
        "signals-horz-1": 0,
        "signals-vert-1": 0,
        "signals-hide-edit-1": false,
        "signals-cond-2": "==",
        "signals-val-2": true,
        "signals-icon-2": "/vis/signals/lowbattery.png",
        "signals-icon-size-2": 0,
        "signals-blink-2": false,
        "signals-horz-2": 0,
        "signals-vert-2": 0,
        "signals-hide-edit-2": false,
        "lc-type": "last-change",
        "lc-is-interval": true,
        "lc-is-moment": false,
        "lc-format": "",
        "lc-position-vert": "top",
        "lc-position-horz": "right",
        "lc-offset-vert": 0,
        "lc-offset-horz": 0,
        "lc-font-size": "12px",
        "lc-font-family": "",
        "lc-font-style": "",
        "lc-bkg-color": "",
        "lc-color": "",
        "lc-border-width": "0",
        "lc-border-style": "",
        "lc-border-color": "",
        "lc-border-radius": 10,
        "lc-zindex": 0
      },
      "style": {
        "left": "151px",
        "top": "20px",
        "background-color": "green",
        "z-index": "0",
        "width": "100px",
        "height": "260px",
        "border-width": "0px",
        "border-style": "none",
        "border-radius": "10px"
      },
      "widgetSet": "basic"
    },
    "e00008": {
      "tpl": "tplHtml",
      "data": {
        "g_fixed": false,
        "g_visibility": false,
        "g_css_font_text": false,
        "g_css_background": true,
        "g_css_shadow_padding": false,
        "g_css_border": true,
        "g_gestures": false,
        "g_signals": false,
        "g_last_change": false,
        "visibility-cond": "==",
        "visibility-val": 1,
        "visibility-groups-action": "hide",
        "refreshInterval": "0",
        "signals-cond-0": "==",
        "signals-val-0": true,
        "signals-icon-0": "/vis/signals/lowbattery.png",
        "signals-icon-size-0": 0,
        "signals-blink-0": false,
        "signals-horz-0": 0,
        "signals-vert-0": 0,
        "signals-hide-edit-0": false,
        "signals-cond-1": "==",
        "signals-val-1": true,
        "signals-icon-1": "/vis/signals/lowbattery.png",
        "signals-icon-size-1": 0,
        "signals-blink-1": false,
        "signals-horz-1": 0,
        "signals-vert-1": 0,
        "signals-hide-edit-1": false,
        "signals-cond-2": "==",
        "signals-val-2": true,
        "signals-icon-2": "/vis/signals/lowbattery.png",
        "signals-icon-size-2": 0,
        "signals-blink-2": false,
        "signals-horz-2": 0,
        "signals-vert-2": 0,
        "signals-hide-edit-2": false,
        "lc-type": "last-change",
        "lc-is-interval": true,
        "lc-is-moment": false,
        "lc-format": "",
        "lc-position-vert": "top",
        "lc-position-horz": "right",
        "lc-offset-vert": 0,
        "lc-offset-horz": 0,
        "lc-font-size": "12px",
        "lc-font-family": "",
        "lc-font-style": "",
        "lc-bkg-color": "",
        "lc-color": "",
        "lc-border-width": "0",
        "lc-border-style": "",
        "lc-border-color": "",
        "lc-border-radius": 10,
        "lc-zindex": 0
      },
      "style": {
        "left": "282px",
        "top": "20px",
        "background-color": "{pv:sma-em.0.3002852993.psurplus;netz:sma-em.0.3002852993.pregard;pv > netz ? 'green' : 'red'}",
        "z-index": "0",
        "width": "100px",
        "height": "260px",
        "border-width": "0px",
        "border-style": "none",
        "border-radius": "10px"
      },
      "widgetSet": "basic"
    },
    "e00009": {
      "tpl": "tplHtml",
      "data": {
        "g_fixed": false,
        "g_visibility": false,
        "g_css_font_text": true,
        "g_css_background": false,
        "g_css_shadow_padding": false,
        "g_css_border": false,
        "g_gestures": false,
        "g_signals": false,
        "g_last_change": false,
        "visibility-cond": "==",
        "visibility-val": 1,
        "visibility-groups-action": "hide",
        "refreshInterval": "0",
        "signals-cond-0": "==",
        "signals-val-0": true,
        "signals-icon-0": "/vis/signals/lowbattery.png",
        "signals-icon-size-0": 0,
        "signals-blink-0": false,
        "signals-horz-0": 0,
        "signals-vert-0": 0,
        "signals-hide-edit-0": false,
        "signals-cond-1": "==",
        "signals-val-1": true,
        "signals-icon-1": "/vis/signals/lowbattery.png",
        "signals-icon-size-1": 0,
        "signals-blink-1": false,
        "signals-horz-1": 0,
        "signals-vert-1": 0,
        "signals-hide-edit-1": false,
        "signals-cond-2": "==",
        "signals-val-2": true,
        "signals-icon-2": "/vis/signals/lowbattery.png",
        "signals-icon-size-2": 0,
        "signals-blink-2": false,
        "signals-horz-2": 0,
        "signals-vert-2": 0,
        "signals-hide-edit-2": false,
        "lc-type": "last-change",
        "lc-is-interval": true,
        "lc-is-moment": false,
        "lc-format": "",
        "lc-position-vert": "top",
        "lc-position-horz": "right",
        "lc-offset-vert": 0,
        "lc-offset-horz": 0,
        "lc-font-size": "12px",
        "lc-font-family": "",
        "lc-font-style": "",
        "lc-bkg-color": "",
        "lc-color": "",
        "lc-border-width": "0",
        "lc-border-style": "",
        "lc-border-color": "",
        "lc-border-radius": 10,
        "lc-zindex": 0,
        "html": "{pv:modbus.0.inputRegisters.30775_SMA_PVLeistung_Aktuell; pv > 0 ? (Math.round(pv)/1000).toFixed(2)+' <br> kW': '0<br>kW'}"
      },
      "style": {
        "left": "27px",
        "top": "220px",
        "text-align": "center",
        "width": "80px",
        "height": "40px",
        "z-index": "2",
        "color": "white",
        "font-size": "20px"
      },
      "widgetSet": "basic"
    },
    "e00010": {
      "tpl": "tplHtml",
      "data": {
        "g_fixed": true,
        "g_visibility": false,
        "g_css_font_text": false,
        "g_css_background": true,
        "g_css_shadow_padding": false,
        "g_css_border": true,
        "g_gestures": false,
        "g_signals": false,
        "g_last_change": false,
        "visibility-cond": "==",
        "visibility-val": 1,
        "visibility-groups-action": "hide",
        "refreshInterval": "0",
        "signals-cond-0": "==",
        "signals-val-0": true,
        "signals-icon-0": "/vis/signals/lowbattery.png",
        "signals-icon-size-0": 0,
        "signals-blink-0": false,
        "signals-horz-0": 0,
        "signals-vert-0": 0,
        "signals-hide-edit-0": false,
        "signals-cond-1": "==",
        "signals-val-1": true,
        "signals-icon-1": "/vis/signals/lowbattery.png",
        "signals-icon-size-1": 0,
        "signals-blink-1": false,
        "signals-horz-1": 0,
        "signals-vert-1": 0,
        "signals-hide-edit-1": false,
        "signals-cond-2": "==",
        "signals-val-2": true,
        "signals-icon-2": "/vis/signals/lowbattery.png",
        "signals-icon-size-2": 0,
        "signals-blink-2": false,
        "signals-horz-2": 0,
        "signals-vert-2": 0,
        "signals-hide-edit-2": false,
        "lc-type": "last-change",
        "lc-is-interval": true,
        "lc-is-moment": false,
        "lc-format": "",
        "lc-position-vert": "top",
        "lc-position-horz": "right",
        "lc-offset-vert": 0,
        "lc-offset-horz": 0,
        "lc-font-size": "12px",
        "lc-font-family": "",
        "lc-font-style": "",
        "lc-bkg-color": "",
        "lc-color": "",
        "lc-border-width": "0",
        "lc-border-style": "",
        "lc-border-color": "",
        "lc-border-radius": 10,
        "lc-zindex": 0,
        "class": " {vb:javascript.0.Photovoltaik.Momentan_Verbrauch;pr:sma-em.0.3002852993.pregard;(200/Math.round(vb))*Math.round(pr) <195? 'PV_Pegel_kleiner90' : 'PV_Pegel_90'}"
      },
      "style": {
        "left": "151px",
        "top": "{vb:javascript.0.Photovoltaik.Momentan_Verbrauch;pr:sma-em.0.3002852993.pregard;pr > 0 ? 280-(260/Math.round(vb))*Math.round(pr) +'px': '0px'}",
        "background-color": "red",
        "z-index": "1",
        "width": "100px",
        "height": "{vb:javascript.0.Photovoltaik.Momentan_Verbrauch;pr:sma-em.0.3002852993.pregard;pr > 0 ? (260/Math.round(vb))*Math.round(pr) +'px': '0px'}",
        "border-width": "",
        "border-style": "",
        "border-radius": ""
      },
      "widgetSet": "basic"
    },
    "e00011": {
      "tpl": "tplImage",
      "data": {
        "g_fixed": false,
        "g_visibility": false,
        "g_css_font_text": false,
        "g_css_background": false,
        "g_css_shadow_padding": false,
        "g_css_border": false,
        "g_gestures": false,
        "g_signals": false,
        "g_last_change": false,
        "visibility-cond": "==",
        "visibility-val": 1,
        "visibility-groups-action": "hide",
        "refreshInterval": "0",
        "signals-cond-0": "==",
        "signals-val-0": true,
        "signals-icon-0": "/vis/signals/lowbattery.png",
        "signals-icon-size-0": 0,
        "signals-blink-0": false,
        "signals-horz-0": 0,
        "signals-vert-0": 0,
        "signals-hide-edit-0": false,
        "signals-cond-1": "==",
        "signals-val-1": true,
        "signals-icon-1": "/vis/signals/lowbattery.png",
        "signals-icon-size-1": 0,
        "signals-blink-1": false,
        "signals-horz-1": 0,
        "signals-vert-1": 0,
        "signals-hide-edit-1": false,
        "signals-cond-2": "==",
        "signals-val-2": true,
        "signals-icon-2": "/vis/signals/lowbattery.png",
        "signals-icon-size-2": 0,
        "signals-blink-2": false,
        "signals-horz-2": 0,
        "signals-vert-2": 0,
        "signals-hide-edit-2": false,
        "lc-type": "last-change",
        "lc-is-interval": true,
        "lc-is-moment": false,
        "lc-format": "",
        "lc-position-vert": "top",
        "lc-position-horz": "right",
        "lc-offset-vert": 0,
        "lc-offset-horz": 0,
        "lc-font-size": "12px",
        "lc-font-family": "",
        "lc-font-style": "",
        "lc-bkg-color": "",
        "lc-color": "",
        "lc-border-width": "0",
        "lc-border-style": "",
        "lc-border-color": "",
        "lc-border-radius": 10,
        "lc-zindex": 0,
        "src": "/vis.0/Wandtablet/img/images/other/PV_Haus.png"
      },
      "style": {
        "left": "163px",
        "top": "37px",
        "width": "73px",
        "height": "68px",
        "z-index": "5"
      },
      "widgetSet": "basic"
    },
    "e00012": {
      "tpl": "tplImage",
      "data": {
        "g_fixed": false,
        "g_visibility": false,
        "g_css_font_text": false,
        "g_css_background": false,
        "g_css_shadow_padding": false,
        "g_css_border": false,
        "g_gestures": false,
        "g_signals": false,
        "g_last_change": false,
        "visibility-cond": "==",
        "visibility-val": 1,
        "visibility-groups-action": "hide",
        "refreshInterval": "0",
        "signals-cond-0": "==",
        "signals-val-0": true,
        "signals-icon-0": "/vis/signals/lowbattery.png",
        "signals-icon-size-0": 0,
        "signals-blink-0": false,
        "signals-horz-0": 0,
        "signals-vert-0": 0,
        "signals-hide-edit-0": false,
        "signals-cond-1": "==",
        "signals-val-1": true,
        "signals-icon-1": "/vis/signals/lowbattery.png",
        "signals-icon-size-1": 0,
        "signals-blink-1": false,
        "signals-horz-1": 0,
        "signals-vert-1": 0,
        "signals-hide-edit-1": false,
        "signals-cond-2": "==",
        "signals-val-2": true,
        "signals-icon-2": "/vis/signals/lowbattery.png",
        "signals-icon-size-2": 0,
        "signals-blink-2": false,
        "signals-horz-2": 0,
        "signals-vert-2": 0,
        "signals-hide-edit-2": false,
        "lc-type": "last-change",
        "lc-is-interval": true,
        "lc-is-moment": false,
        "lc-format": "",
        "lc-position-vert": "top",
        "lc-position-horz": "right",
        "lc-offset-vert": 0,
        "lc-offset-horz": 0,
        "lc-font-size": "12px",
        "lc-font-family": "",
        "lc-font-style": "",
        "lc-bkg-color": "",
        "lc-color": "",
        "lc-border-width": "0",
        "lc-border-style": "",
        "lc-border-color": "",
        "lc-border-radius": 10,
        "lc-zindex": 0,
        "src": "/vis.0/Wandtablet/img/images/other/PV_Sonne.png"
      },
      "style": {
        "left": "31px",
        "top": "31px",
        "width": "73px",
        "height": "80px",
        "z-index": "5"
      },
      "widgetSet": "basic"
    },
    "e00013": {
      "tpl": "tplImage",
      "data": {
        "g_fixed": false,
        "g_visibility": false,
        "g_css_font_text": false,
        "g_css_background": false,
        "g_css_shadow_padding": false,
        "g_css_border": false,
        "g_gestures": false,
        "g_signals": false,
        "g_last_change": false,
        "visibility-cond": "==",
        "visibility-val": 1,
        "visibility-groups-action": "hide",
        "refreshInterval": "0",
        "signals-cond-0": "==",
        "signals-val-0": true,
        "signals-icon-0": "/vis/signals/lowbattery.png",
        "signals-icon-size-0": 0,
        "signals-blink-0": false,
        "signals-horz-0": 0,
        "signals-vert-0": 0,
        "signals-hide-edit-0": false,
        "signals-cond-1": "==",
        "signals-val-1": true,
        "signals-icon-1": "/vis/signals/lowbattery.png",
        "signals-icon-size-1": 0,
        "signals-blink-1": false,
        "signals-horz-1": 0,
        "signals-vert-1": 0,
        "signals-hide-edit-1": false,
        "signals-cond-2": "==",
        "signals-val-2": true,
        "signals-icon-2": "/vis/signals/lowbattery.png",
        "signals-icon-size-2": 0,
        "signals-blink-2": false,
        "signals-horz-2": 0,
        "signals-vert-2": 0,
        "signals-hide-edit-2": false,
        "lc-type": "last-change",
        "lc-is-interval": true,
        "lc-is-moment": false,
        "lc-format": "",
        "lc-position-vert": "top",
        "lc-position-horz": "right",
        "lc-offset-vert": 0,
        "lc-offset-horz": 0,
        "lc-font-size": "12px",
        "lc-font-family": "",
        "lc-font-style": "",
        "lc-bkg-color": "",
        "lc-color": "",
        "lc-border-width": "0",
        "lc-border-style": "",
        "lc-border-color": "",
        "lc-border-radius": 10,
        "lc-zindex": 0,
        "src": "/vis.0/Wandtablet/img/images/other/PV_Strommast.png"
      },
      "style": {
        "left": "296px",
        "top": "37px",
        "width": "73px",
        "height": "88px",
        "z-index": "5"
      },
      "widgetSet": "basic"
    },
    "e00014": {
      "tpl": "tplImage",
      "data": {
        "g_fixed": false,
        "g_visibility": true,
        "g_css_font_text": false,
        "g_css_background": false,
        "g_css_shadow_padding": false,
        "g_css_border": true,
        "g_gestures": false,
        "g_signals": false,
        "g_last_change": false,
        "visibility-cond": ">",
        "visibility-val": "0",
        "visibility-groups-action": "hide",
        "refreshInterval": "0",
        "signals-cond-0": "==",
        "signals-val-0": true,
        "signals-icon-0": "/vis/signals/lowbattery.png",
        "signals-icon-size-0": 0,
        "signals-blink-0": false,
        "signals-horz-0": 0,
        "signals-vert-0": 0,
        "signals-hide-edit-0": false,
        "signals-cond-1": "==",
        "signals-val-1": true,
        "signals-icon-1": "/vis/signals/lowbattery.png",
        "signals-icon-size-1": 0,
        "signals-blink-1": false,
        "signals-horz-1": 0,
        "signals-vert-1": 0,
        "signals-hide-edit-1": false,
        "signals-cond-2": "==",
        "signals-val-2": true,
        "signals-icon-2": "/vis/signals/lowbattery.png",
        "signals-icon-size-2": 0,
        "signals-blink-2": false,
        "signals-horz-2": 0,
        "signals-vert-2": 0,
        "signals-hide-edit-2": false,
        "lc-type": "last-change",
        "lc-is-interval": true,
        "lc-is-moment": false,
        "lc-format": "",
        "lc-position-vert": "top",
        "lc-position-horz": "right",
        "lc-offset-vert": 0,
        "lc-offset-horz": 0,
        "lc-font-size": "12px",
        "lc-font-family": "",
        "lc-font-style": "",
        "lc-bkg-color": "",
        "lc-color": "",
        "lc-border-width": "0",
        "lc-border-style": "",
        "lc-border-color": "",
        "lc-border-radius": 10,
        "lc-zindex": 0,
        "src": "/vis.0/Wandtablet/img/images/other/pv_rechts_links.gif",
        "visibility-oid": "sma-em.0.3002852993.pregard"
      },
      "style": {
        "left": "293px",
        "top": "135px",
        "width": "80px",
        "height": "16px",
        "border-width": "1px",
        "border-style": "solid",
        "border-color": "grey",
        "border-radius": "10px",
        "z-index": "5"
      },
      "widgetSet": "basic"
    },
    "e00015": {
      "tpl": "tplImage",
      "data": {
        "g_fixed": false,
        "g_visibility": true,
        "g_css_font_text": false,
        "g_css_background": false,
        "g_css_shadow_padding": false,
        "g_css_border": true,
        "g_gestures": false,
        "g_signals": false,
        "g_last_change": false,
        "visibility-cond": ">",
        "visibility-val": "0",
        "visibility-groups-action": "hide",
        "refreshInterval": "0",
        "signals-cond-0": "==",
        "signals-val-0": true,
        "signals-icon-0": "/vis/signals/lowbattery.png",
        "signals-icon-size-0": 0,
        "signals-blink-0": false,
        "signals-horz-0": 0,
        "signals-vert-0": 0,
        "signals-hide-edit-0": false,
        "signals-cond-1": "==",
        "signals-val-1": true,
        "signals-icon-1": "/vis/signals/lowbattery.png",
        "signals-icon-size-1": 0,
        "signals-blink-1": false,
        "signals-horz-1": 0,
        "signals-vert-1": 0,
        "signals-hide-edit-1": false,
        "signals-cond-2": "==",
        "signals-val-2": true,
        "signals-icon-2": "/vis/signals/lowbattery.png",
        "signals-icon-size-2": 0,
        "signals-blink-2": false,
        "signals-horz-2": 0,
        "signals-vert-2": 0,
        "signals-hide-edit-2": false,
        "lc-type": "last-change",
        "lc-is-interval": true,
        "lc-is-moment": false,
        "lc-format": "",
        "lc-position-vert": "top",
        "lc-position-horz": "right",
        "lc-offset-vert": 0,
        "lc-offset-horz": 0,
        "lc-font-size": "12px",
        "lc-font-family": "",
        "lc-font-style": "",
        "lc-bkg-color": "",
        "lc-color": "",
        "lc-border-width": "0",
        "lc-border-style": "",
        "lc-border-color": "",
        "lc-border-radius": 10,
        "lc-zindex": 0,
        "src": "/vis.0/Wandtablet/img/images/other/pv_links_rechts.gif",
        "visibility-oid": "modbus.0.inputRegisters.30775_SMA_PVLeistung_Aktuell"
      },
      "style": {
        "left": "26px",
        "top": "134px",
        "width": "80px",
        "height": "16px",
        "border-width": "1px",
        "border-style": "solid",
        "border-color": "grey",
        "border-radius": "10px",
        "z-index": "5"
      },
      "widgetSet": "basic"
    },
    "e00016": {
      "tpl": "tplImage",
      "data": {
        "g_fixed": false,
        "g_visibility": true,
        "g_css_font_text": false,
        "g_css_background": false,
        "g_css_shadow_padding": false,
        "g_css_border": true,
        "g_gestures": false,
        "g_signals": false,
        "g_last_change": false,
        "visibility-cond": ">",
        "visibility-val": "0",
        "visibility-groups-action": "hide",
        "refreshInterval": "0",
        "signals-cond-0": "==",
        "signals-val-0": true,
        "signals-icon-0": "/vis/signals/lowbattery.png",
        "signals-icon-size-0": 0,
        "signals-blink-0": false,
        "signals-horz-0": 0,
        "signals-vert-0": 0,
        "signals-hide-edit-0": false,
        "signals-cond-1": "==",
        "signals-val-1": true,
        "signals-icon-1": "/vis/signals/lowbattery.png",
        "signals-icon-size-1": 0,
        "signals-blink-1": false,
        "signals-horz-1": 0,
        "signals-vert-1": 0,
        "signals-hide-edit-1": false,
        "signals-cond-2": "==",
        "signals-val-2": true,
        "signals-icon-2": "/vis/signals/lowbattery.png",
        "signals-icon-size-2": 0,
        "signals-blink-2": false,
        "signals-horz-2": 0,
        "signals-vert-2": 0,
        "signals-hide-edit-2": false,
        "lc-type": "last-change",
        "lc-is-interval": true,
        "lc-is-moment": false,
        "lc-format": "",
        "lc-position-vert": "top",
        "lc-position-horz": "right",
        "lc-offset-vert": 0,
        "lc-offset-horz": 0,
        "lc-font-size": "12px",
        "lc-font-family": "",
        "lc-font-style": "",
        "lc-bkg-color": "",
        "lc-color": "",
        "lc-border-width": "0",
        "lc-border-style": "",
        "lc-border-color": "",
        "lc-border-radius": 10,
        "lc-zindex": 0,
        "src": "/vis.0/Wandtablet/img/images/other/pv_links_rechts.gif",
        "visibility-oid": "sma-em.0.3002852993.psurplus"
      },
      "style": {
        "left": "162px",
        "top": "134px",
        "width": "80px",
        "height": "16px",
        "border-width": "1px",
        "border-style": "solid",
        "border-color": "grey",
        "border-radius": "10px",
        "z-index": "5"
      },
      "widgetSet": "basic"
    }
  },
  "name": "Photovoltaik_Aktuell",
  "filterList": []
}

Dazu noch folgende CSS:

    
/*CSS für Photovoltaik */
.PV_Pegel_kleiner90{
    border:0px solid red;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.PV_Pegel_90{
    border:0px solid red;
    border-radius: 10px;
}

Importiere dir das mal, wichtig keine Objekte in der Höhe verschieben, da diese ja mit eingerechnet werden muss. Wenn du dann deine Datenpunkte anpasst sollte es gehen.

Bei Fragen einfach melden!

[Peoples]

Wenn die 5 Bilder auch noch gewünscht sind stell ich sie gerne mit ein

[liv-in-sky]

@Peoples - erstnmal danke für deine mühe!

also das mit der farben änderung kann ich schon mal nachmachen ! {pv:sma-em.0.3002852993.psurplus;netz:sma-em.0.3002852993.pregard;pv > netz ? 'green' : 'red'}

bei mir: {wert:controll-own.0.TemperaturWidget;wert=4 ? "#6585f6":"transparent"} -> ich nutze das anders - kann man in diese zeile auch mehrere vergleiche schreiben ? das TemperaturWidget bringt die werte 1,2,3,4 oder 5. ich würde gerne für jeden wert eine andere farbe nutzen - hast du da noch einen tipp?

was ich garnicht verstehe:

warum steht in der cssklasse :

 {vb:javascript.0.Photovoltaik.Momentan_Verbrauch;pr:sma-em.0.3002852993.pregard;(200/Math.round(vb))*Math.round(pr) <195? 'PV_Pegel_kleiner90' : 'PV_Pegel_90'}

reicht die "PV_Pegel_90" angabe allein nicht ?

[liv-in-sky]

@Peoples

jetzt verstehe ich - du berechnest, welche css klasse du benutzen willst - cool !

kanns tdu meine andere frage beantworten ?

[OliverIO]

das nennt sich binding.
erklärt wird es (einigermaßen) hier
https://github.com/ioBroker/ioBroker.vis

in der basis ist es eine notation, wie verschiedene (rechen-) operationen der reihe nach ausgführt wird.

das folgende wäre dann wie folgt zu interpretieren:
{vb:javascript.0.Photovoltaik.Momentan_Verbrauch;pr:sma-em.0.3002852993.pregard;(200/Math.round(vb))*Math.round(pr) <195? 'PV_Pegel_kleiner90' : 'PV_Pegel_90'}

Wert aus
datenpunkt javascript.0.Photovoltaik.Momentan_Verbrauch
in Variable vb

Wert aus
datenpunkt sma-em.0.3002852993.pregard
in Variable pr

das folgende ist dann ein tertiärer operator wie es in viele programmiersprachen gibt,
über den man verkürzt if/then/else darstellen kann

(200/Math.round(vb))*Math.round(pr) <195? 'PV_Pegel_kleiner90' : 'PV_Pegel_90'

das wäre dann
if (200/Math.round(vb))*Math.round(pr) <195 {
'PV_Pegel_kleiner90'
} else {
'PV_Pegel_90'
}

wenn das dann im feld für die css-klasse steht, wird abhängig von der berechnung (wahr/falsch) der eine oder der andere css klassennamen verwendet und die entsprechende formatierung auf das html element angewendet.

[liv-in-sky]

@OliverW danke dir - so ungefähr habe ich es verstanden. das mit dem tertiären operator habe ich schon mal irgendwo gesehen.

weißt du, ob mehrere abfragen möglich sind - ähnlich wie bei case:

wenn 1 dann gelb
wenn 2 dann rot
wenn 3 dann blau ... bis 5

ich arbeite momentan mit 5 widgets, die über die sichbarkeit arbeiten. könnte ich das in ein widget packen ? vielleicht so:

lt. der anleitung, müßte man befehle hintereinander eingeben können und mit strich-punkt getrennt. ein anderer threat hat es so geschrieben:

{wert:controll-own.0.TemperaturWidget;wert > 0 ? "#6585f6" :: wert > 1 ? "#820816" :: wert > 2 ? "#f7ea3b" :: wert > 3 ? "#eea72b" ::  wert > 4 ? "#135e0d" :"#000000"}

oder:

{wert:controll-own.0.TemperaturWidget;wert = 1 ? "#6585f6" :: wert = 2 ? "#820816" :: wert = 3 ? "#f7ea3b" :: wert = 4 ? "#eea72b" :: "#135e0d"}

irgendwie bekomme ich es nicht hin - hast du noch einen tipp

[OliverIO]

{a==1?"gelb";a==2?"rot";a==3?"blau";a==4?"xxx";a==5?"yyy";"kein treffer"}
direkt nicht getestet, aber den false-part muss man nicht angeben oder nur einmal
wenn es aber komplexer wird, würde ich mir im view eine funktion bauen und diese dann im binding
einbauen. dass lässt sich dann in chrome oder firefox besser debuggen.

javascript wäre generell besser, da diese notation ja dynamisch interpretiert werden muss und dass auch performance kostet
dann würde das nur so aussehen:
{meineTestfunktion(a)}

und in skripte
function meineTestfunktion(a) {
if (a==1) {
return "gelb";
}
if (a==2) {
return "rot";
}
if (a==3) {
return "blau";
}
if (a==4) {
return "xxx";
}
if (a==5) {
return "yyy";
}
return "irgendwas";
}

auch hier nur aus dem kopf zusammengeschrieben.
javascript kann mancham mit dem funktions und variabel-scope tückisch sein.
aber das grundprinzip müsste es klar machen.

[liv-in-sky]

@OliverW

also funktioniert so nicht - ich kann mit max. 3 werten arbeiten

{v:controll-own.0.TemperaturWidget;v < 2 ? "#FFEB3B" :: v < 4 ? "#4CAF50" ::  "#F44336"}

{a==1?"gelb";a==2?"rot";a==3?"blau";a==4?"xxx";a==5?"yyy";"kein treffer"} -> geht leider nicht - habe tausende variationen probiert :-(

{wert:controll-own.0.TemperaturWidget;wert==1 ? "#15830c";wert==2 ? "#820816";wert==3 ? "#f7ea3b";wert==4 ? "#eea72b";wert==5 ? "#000000"}

danke für deine ausführlichen beschreibungen - werde wohl mit einem extra script arbeiten müssen.

[OliverIO]

Werd das mal selbst probieren, eigentlich müsste das so funktionieren

[Peoples]

@liv-in-sky

Hab das gerade mal so versucht dann gehts:

{wert:javascript.0.test.wert;wert==1 ? "#15830c" :: wert==2 ? "#820816" :: wert==3 ? "#f7ea3b" :: wert==4 ? "#eea72b":: "#000000"} 

Die Formatierung war nur falsch

[liv-in-sky]

@Peoples @OliverW

es gibt tage - 1,5 stunden habe ich an dieser einen zeile herumprobiert (ich war teilweise nah dran)

jetzt funktioniert es - vielen dank - an euch beide - für die unterstützung

[Peoples]

@liv-in-sky
Ich habe gelernt, wenn es nur 1,5 Stunden sind dann wärst du ja Recht zügig :sweat_smile:
Es kommt vor dass ich den ganzen Tag an einem Script sitze das nicht funktioniert um am nächsten fest zu stellen dass ich eine Klammer falsch gesetzt habe :joy:

[liv-in-sky]

für andere interessierte - habe das ganze auch noch mit gradient verschmolzen - sieh sieht schöner aus - wird zwar nicht im editor angezeigt aber unter chrome und der vis-app funktioniert es

{wert:controll-own.0.TemperaturWidget;wert==1 ? "linear-gradient(to top, #bfceed 2px, #a5aebe 60px )" :: wert==2 ? "linear-gradient(to top, #66b8ea 2px, #8cdced 60px )" :: wert==3 ? "linear-gradient(to top, #d0a82f 2px, #ebe22d 60px )" :: wert==4 ? "linear-gradient(to top, #e2bcd7e2 5px, #b34e97 60px )":: "linear-gradient(to top, #e8b4c3 2px, #de124d 60px )"}

eingetragen unter: