Javascript | Button Hintergrundfarbe nach Wert

[MCU]

@mcu Meinst du den Widget-Export?

Widget Basic number

[{"tpl":"tplValueFloat","data":{"oid":"0_userdata.0.Zahl_SEL","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"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":"true","factor":"1","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":"1002px","top":"145px","background":"{0_userdata.0.Zahl_SONOS}"},"widgetSet":"basic"}]

[TG70]

@mcu .. merci das Widget ist auch nicht schlecht. So komme ich vllt. eher auf das Problem-

Ich meinte den "javascript" exportieren

[MCU]

@tg70 Da ist kein Script. Schick mir mal ein Beispiel vom inventwo-universal ausgefüllt mit den Werten als Export. Danke.

[TG70]

Also ich dachte ich löse das mit einem javascript und dem entsprechenden Link im
Hintergrund Feld. Das ist das Java was dazu gehört:

var idFarbe = "javascript.0.VIS.Corona";
var idAktor = "coronavirus-statistics.0.Germany.Kreis.Roth.cases7_per_100k";
 
createState(idFarbe, 'white', {
    def: 'white',
    type: 'string',
    role: 'text'
});
 
on(idAktor, function (data) {
    if (data.state.val > 1 && data.state.val <= 49) setState(idFarbe, 'green');
    else if (data.state.val >= 50 && data.state.val <= 99) setState(idFarbe, 'yellow');
    else if (data.state.val >= 100 && data.state.val <= 1000) setState(idFarbe, 'red');
});

Mein Button enthält eigentlich nur den Verweis im "background" Feld

{javascript.0.VIS.Corona}

Spoiler

[{"tpl":"i-vis-universal","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","iUniversalWidgetType":"State","iValueType":"boolean","iValueComparison":"equal","iStateResponseTime":"0","iStateResetValueTime":"0","iNavWait":"100","iPopUpBackground":"#666666","iPopUpPreventClickOutside":"","iPopUpShowTitle":"true","iPopUpTitle":"","iPopUpTitleColor":"#ffffff","iPopUpCloseBtnColor":"#dc2e2e","iPopUpWidth":"800px","iPopUpHeight":"500px","iPopUpPosition":"center","iPopUpCornerRadiusUL":"12","iPopUpCornerRadiusUR":"0","iPopUpCornerRadiusLR":"12","iPopUpCornerRadiusLL":"0","iPopUpShadowXOffset":"2","iPopUpShadowYOffset":"2","iPopUpShadowBlur":"2","iPopUpShadowSpread":"1","iPopUpShadowColor":"#111111","iButtonCol":"{javascript.0.VIS.Corona}","iButtonActive":"{javascript.0.VIS.Corona}","iButtonColHover":"","iOpacityBack":"1","iCornerRadiusUL":"12","iCornerRadiusUR":"0","iCornerRadiusLR":"12","iCornerRadiusLL":"0","iContentFlexDirection":"vertical","iContentVertAlign":"iSpace-between","iContentOrder":"orderImgText","iOpacityCtn":"1","iTextColor":"#ffffff","iTextSize":"12","iTextAlign":"iStart","iTextSpaceTop":"0","iTextSpaceBottom":"0","iTextSpaceLeft":"0","iTextSpaceRight":"0","iIconSize":"35","iImgAlign":"iCenter","iImgSpaceTop":"5","iImgSpaceBottom":"0","iImgSpaceLeft":"0","iImgSpaceRight":"0","iImgRotation":"0","iImgBlinkFalse":"0","iImgBlinkTrue":"0","iImgColorFalse":"","iImgColorTrue":"","iShadowXOffset":"2","iShadowYOffset":"2","iShadowBlur":"2","iShadowSpread":"1","iShadowColor":"#111111","iShadowColorActive":"#111111","iShadowColorHover":"","iShadowInnerXOffset":"0","iShadowInnerYOffset":"0","iShadowInnerBlur":"0","iShadowInnerSpread":"0","iShadowInnerColor":"#111111","iShadowInnerColorActive":"#111111","iShadowInnerColorHover":"","iBorderSize":"0","iBorderStyle":"none","iBorderColor":"#ffffff","iBorderColorActive":"#ffffff","iBorderColorHover":"","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,"oid":"coronavirus-statistics.0.Germany.Kreis.Roth.cases7_per_100k"},"style":{"left":"664px","top":"459px"},"widgetSet":"vis-inventwo"}]

[MCU]

@tg70 Das javascript benötigst du, um die Hintergrund-Farbe zu ermitteln. Das Script ist aber nicht in der VIS. Dort wird nur mit Hilfe von sogenannten Bindings ({javascript.0.VIS.Corona}) der Wert der Farbe genutzt.

[TG70]

genau so war mein Plan .... über das Script die Farbe ermitteln und in der VIS dann setzen.

Erst wollte ich es mit einem Value-List probieren, aber da kriege ich die Eingrenzungen nicht hin.
Da schaffe ich es immer nur mit 2 Werten.

Über die Bedingungen hatte ich auch nachgedacht.

Danach wollte ich einfach im "background" (genauer Code von gestern finde ich
gerade nicht mehr)

{v:adapter; (v<0) ? "green" : (v<35) ? "yellow" : (v<50) ? "red" : "grey"} 

[MCU]

@tg70 Das funktioniert doch mit dem Hintergrund und dem letzten Binding. Oder hast du da jetzt noch Probleme?

[TG70]

@mcu
Nein funktioniert nicht ... es wird "kein" Hintegrund angezeigt.
Deshalb habe ich es mit dem u.g. Weg probiert. (Java/Binding)

[MCU]

@tg70 Hast du das Update auf 1.3.8 gemacht?
Bei mir funktionieren beide Wege.

[TG70]

@mcu sagte in Javascript | Button Hintergrundfarbe nach Wert: 1. 3.8

bisher noch nicht ... kann ich den updaten? Auf "Beta" bin ich - wird kein Update Symbol angezeigt. Oder geht das nur über die Console?

[MCU]

@tg70 Erst die Adapter updaten:

[TG70]

genau dieses Symbol ist beim VIS (Visualisierung) nicht vorhanden.
Nur beim etlichen anderen Adaptern, da ich ja keine Betas installiert habe

[MCU]

@TG70

[TG70]

Ok ich habs über die Konsole gemacht. Die restlichen Adapter lasse ich mal vorerst nicht
auf Beta

[MCU]

@tg70 Und funktioniert es jetzt?

[TG70]

@mcu .. leider nein ... was ist bei mir falsch

VIS

[MCU]

@tg70 Nimm doch mal das Widget was ich dir geschickt habe. Wie sieht es da aus?
Und schick mir das, was du da gerade nutzt als Export.

[TG70]

@MCU erklärst du mir bitte kurz was dein Widget macht, du hast ja zwei Datensätze in 0_userdata**** angelegt. Was passiert da.
Woher kommt der Wert 4 in "Zahl_SEL" deiner Ojekt ID?
.... der zweite Datensatz "Zahl_SONOS" mit dem Wert "green", auf den du dann in der VIS über "background" zugreifst?

Edit: so würde das bestimmt funktionieren, dass eben die Zahl 4 mit grünen Hintergrund angezeigt wird

[MCU]

@tg70 Das sind Beispielwerte, die ich selbst angelegt habe.
Hier mit corona....

TPL mit Corona-Bezug

[{"tpl":"tplValueFloat","data":{"oid":"coronavirus-statistics.0.Germany.todayDeaths","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"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":"true","factor":"1","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":"1001px","top":"145px","background":"{v:coronavirus-statistics.0.Germany.todayDeaths;(v<0)? \"green\": (v<35)? \"yellow\": (v<50)? \"red\": \"grey\"}","width":"104px","height":"72px"},"widgetSet":"basic"}]

Hast du im CSS-Bereich was drin?

[TG70]

Also das funktioniert.

Im CSS habe ich nur folgendes:

.rotate90{
    transform: rotate(90deg);
}
.rotate180{
    transform: rotate(180deg);
}
.rotate270{
    transform: rotate(270deg);
}

Habe es jetzt auf den Ort umgeschrieben dann funktioniert das auch, warum jetzt?

{v:coronavirus-statistics.0.Germany.Kreis.Erding.cases7_per_100k; (v<50)? "green": (v<100)? "yellow": (v>100)? "red": "grey"}