Javascript | Button Hintergrundfarbe nach Wert

[TG70]

Hallo,
ich versuche gerade die Hintergrundfarbe eines Button´s je nach Wert
in den Farben grün, orange und rot zu setzen.

Was mache ich falsch, die Farbe ist immer weiß.

var idFarbe = "javascript.0.VIS.Corona";
var idAktor = "coronavirus-statistics.0.Germany.Kreis.1234.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, 'orange');
    else if (data.state.val >= 100 && data.state.val <= 1000) setState(idFarbe, 'red');
});

[MCU]

@tg70
direkt in background:

[TG70]

@mcu .. Hi ... Mist habe ich übersehen, dass es noch falsch steht. Ich habe es natürlich auch
direkt im Background gesetzt, beides usw. zum Test....

.. funktioniert leider auch im background nicht? .. hier wird überhaupt kein Hintergrund angezeigt?

[MCU]

@tg70 Welches widget ist das? Welche Vis Version?

[TG70]

• BasicNumber oder iventwo-universal

• VIS 1.3.4

Hat das was mit der VIS-Version zu tun ??? Ich denke eher das ich einfach noch was
falsch gemacht habe.?

Würde gerne auch den Wert mit im Widget haben?

[MCU]

@tg70
Ich habe VIS: 1.3.8
Bei mir funktioniert Basic number:

Bei dem anderen sieht man auch eine grüne Ecke, ich kenne mich damit nicht aus. Schick mal bitte ein Beispiel:

[TG70]

... ich dachte ich bin auf der aktuellen VIS
Kannst du bitte mal dein Script online stellen, damit ich mal vergleichen kann

[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