SOLVED Dynamische Höhe durch Binding wechselt nach unten

[Peoples]

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

[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'}

[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
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

[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: