Dynamische Höhe durch Binding wechselt nach unten

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:

Image 1.png

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:

Image 1.png

Image 4.png Image 2.png Image 3.png

Community Forum

NEWS

Dynamische Höhe durch Binding wechselt nach unten

Support us

580

32.7k

82.4k

1.3m