SOLVED [gelöst] Lösung für wechselde Border Farbe gesucht

[kmxak]

Mit CSS geht es nicht? Habe so mein Design bg Farbe über Objekt gesteuert.

Gesendet von meinem SM-G930F mit Tapatalk

[pix]

Hallo,

die Darstellung mit Bindings funktioniert definitiv:

[{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":true,"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,"html":"{javascript.0.Status.Fernbedienung.Urlaub}"},"style":{"left":"956px","top":"216px","z-index":"25","color":"black","text-align":"center","background":"yellow","border-color":"{b:javascript.0.Status.Fernbedienung.Urlaub;b==\"true\" ? \"green\" : \"red\"}","border-width":"5px","border-style":"solid"},"widgetSet":"basic"}]

Es gibt nur ein paar Dinge zu beacheten.

Ich hatte auf die Häkchen hingewiesen. Bei Copy & Paste aus dem Code aus meinem ersten Post werden die falsch gesetzt. Es gibt in VIS kein Häkchen unten, dass kommt aus tapatalk.

Ein Fehler von mir war die falsche Definition der Abfrage. Da muss die Bedingung true ebenfalls in Häkchen. Einfach mal den Widget Code oben einfügen und die ID ändern. Randbreite und -art sind auch festgelegt, sonst geht natürlich auch nix.

Ach ja: die korrekte Darstellung funktioniert nicht im Editor, nur in der Runtime-Version der View.

Pix

EDIT:

Für die Vollständigkeit:````
{b:javascript.0.Status.Fernbedienung.Urlaub;b=="true" ? "green" : "red"}

[Schuko80]

Background ist kein Problem, ich bekomme aber die Border nicht angepasst - hast du CSS im Reiter CSS verwendet?

Dann zeig mir mal bitte die Formulierung, bisher habe ich es direkt unter 'Color' bzw. 'true' oder 'false' versucht

[kmxak]

Bin gerade im Urlaub bis do. Hab's gerade per vpn probiert aber ich finde es nicht.

Probiere es mal zu erklären. Bin aber kein Profi und weiß nicht ob das mit dem Widget geht.

Border eine css klasse zuweisen dann habe ich die Farben in CSS definiert und lese mit Script ein Objekt Wert aus und schalte so die klasse. Hoffe die Begriffe sind richtig gewählt.

Gesendet von meinem SM-G930F mit Tapatalk

[Schuko80]

Ok, das bedeutet es geht dann nur der Umweg über JavaScript - hatte gehofft, mir das sparen zu können - in 1-2 Jahren such ich mir dann einen Wolf.

Da wäre der Weg mit zwei Objekten dann glaube ich doch besser

[pix]

Hallo,

die Darstellung mit Bindings funktioniert definitiv:

[{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":true,"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,"html":"{javascript.0.Status.Fernbedienung.Urlaub}"},"style":{"left":"956px","top":"216px","z-index":"25","color":"black","text-align":"center","background":"yellow","border-color":"{b:javascript.0.Status.Fernbedienung.Urlaub;b==\"true\" ? \"green\" : \"red\"}","border-width":"5px","border-style":"solid"},"widgetSet":"basic"}]

Es gibt nur ein paar Dinge zu beacheten.

Ich hatte auf die Häkchen hingewiesen. Bei Copy & Paste aus dem Code aus meinem ersten Post werden die falsch gesetzt. Es gibt in VIS kein Häkchen unten, dass kommt aus tapatalk.

Ein Fehler von mir war die falsche Definition der Abfrage. Da muss die Bedingung true ebenfalls in Häkchen. Einfach mal den Widget Code oben einfügen und die ID ändern. Randbreite und -art sind auch festgelegt, sonst geht natürlich auch nix.

Ach ja: die korrekte Darstellung funktioniert nicht im Editor, nur in der Runtime-Version der View.

Pix

EDIT:

Für die Vollständigkeit:````
{b:javascript.0.Status.Fernbedienung.Urlaub;b=="true" ? "green" : "red"}

[Schuko80]

Spitze, werde das morgen mal ausprobieren … unter dem Begriff Häkchen kannte ich die Anführungszeichen noch gar nicht

Jetzt sehe ich auch den Fehler im oberen Code. Morgen Abend gibt es Rückmeldung, ob es funktioniert hat - Danke schon mal!

[Schuko80]

@pix:

Für die Vollständigkeit:{b:javascript.0.Status.Fernbedienung.Urlaub;b=="true" ? "green" : "red"} `

DANKE pix, genau so hat es funktioniert, ich wusste ursprünglich gar nicht, das solche Abfragen funktionieren - wieder etwas gelernt

EDIT:

Kleiner Tip an alle, ich habe die Elemente nach dem ersten Anlegen per Copy & Paste eingefügt und trotz der Tatsache, das ich noch keinen neuen Datenpunkt eingefügt habe, änderte sich das Element nicht mehr - nach 3x Copy Paste vom original Element ging es dann mit einem mal wieder.

Vielleicht habe ich nur das Problem, wenn nicht, nicht aufgeben, es funktioniert auf jeden Fall

[Walkinlarge2010]

@Schuko80:

Kleiner Tip an alle, ich habe die Elemente nach dem ersten Anlegen per Copy & Paste eingefügt und trotz der Tatsache, das ich noch keinen neuen Datenpunkt eingefügt habe, änderte sich das Element nicht mehr - nach 3x Copy Paste vom original Element ging es dann mit einem mal wieder.

Vielleicht habe ich nur das Problem, wenn nicht, nicht aufgeben, es funktioniert auf jeden Fall `

Das selbe Problem habe ich auch mit den bindings. Hab es inzwischen aufgegeben, da es total nervig ist immer zu prüfen ob es jetzt klappt oder wieder nicht. Lösung hatte hier bisher niemand, bzw. es gab kein Feedback auf meine Post

Gesendet von iPad mit Tapatalk

[Schuko80]

Ich vermute, das beim Copy & Paste irgendwo ein Querverweis entsteht, das interessante ist nämlich, das man die Farbe im Binding ändern kann, wie man will, sie bleibt so, wie sie beim Copy & Paste war…

[fritzimollo]

Also, ich habe dafür eine einfache Lösung:

• Boot HTML und dem Widget eine CSS-Klasse (cssname) geben.
• html bei false einen Style einfügen mit der entsprechenden Rahmenfarbe:

<style> .cssname {border: 3px solid red} </style>

• html bei true einen Style einfügen mit der entsprechenden anderen Rahmenfarbe:

<style> .cssname {border: 3px solid green} </style>

upps, funktioniert leider nicht. entschuldigt, im VIS-Editor funktionert es, aber leider werden die Einstellungen im Browseer nicht übernommen. Werde es löschen.

[sigi234]

Widget:

[{"tpl":"tplValueListHtml8","data":{"oid":"system.adapter.admin.0.connected","count":"1","value0":"","value1":"","style1":"background-color: #02c908","style0":"background-color: #ff0000","value2":"333","style2":"background-color: orange","test_list":"0","gestures-offsetX":0,"gestures-offsetY":0,"signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis.0/VIS/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.0/VIS/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.0/VIS/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,"name":"Admin_Hintergrund","g_visibility":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide"},"style":{"left":"30px","top":"97px","color":"white","text-align":"left","font-family":"Arial, Helvetica, sans-serif","font-style":"normal","font-variant":"normal","font-weight":"bold","font-size":"large","width":"54px","height":"54px","z-index":"10","overflow-x":"","border-radius":"12px","box-shadow":"2px 2px 3px rgba(20, 20, 20, 50)"},"widgetSet":"basic"}]