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

Schuko80 · 21 May 2018, 14:27

Im Forum habe ich leider nichts passendes dazu gefunden, ich suche eine Lösung, um bei den Werten true/false die Rahmenfarbe eines Objekts zu ändern.

1. Versuch:

justGage: Min Wert auf false - Max Wert auf true -> geht nicht

justGage: Min Wert auf 0 - Max Wert auf 1 -> geht nicht

2. Versuch:

Bool HTML: Innenbereich läßt sich ändern, aber die Rahmenfarbe läßt sich über true/false nicht ändern

3. Versuch:

2 Objekte übereinander legen (unschön), oberstes Red Number: Innenbereich transparent- Rahmen farbig - funktioniert, aber im Innenbereich wird dann Text mit NaN angezeigt

Mir gehen gerade die Ideen aus, evtl. habe ich auch nur einen Fehler gemacht … hat einer vielleicht eine Lösung parat?

pix · 20 May 2018, 18:17

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"}

pix · 20 May 2018, 12:24

Hallo,

bin unterwegs und das Tippen von Code in Tapatalk macht gar keinen Spaß.

Aber versuche mal Vis Bindings. Die ID des Boolean Objektes in das Border-Color Feld eintragen, natürlich mit Zustandsabfrage.

{z:instanzname.0.objekt;(z === true)?“red“ : „green“}

Auf die Häkchen achten bei Copy and Paste.

Übersetzung: Wenn ID true, dann rot sonst grün.

Gruß

Pix

klassisch · 20 May 2018, 14:54

Mit "basic - Bool HTML" schalte ich sowohl Hintergrund als auch Text um.

Und zwar steht dann in den Feldern "HTML bei 'false' " und "HTML bei 'true' " der HTML Code, der auch das Aussehen gestaltet. Incl Hintergrund und farbig hinterlegter Überschrift.

Vielleicht kann man per HTML den Rahmen definieren. Dann die Definition in beide Felder schreiben aber jeweils mit einer anderen Farbe.

Schuko80 · 20 May 2018, 15:00

~~@klassisch:~~

Mit "basic - Bool HTML" schalte ich sowohl Hintergrund als auch Text um.

Und zwar steht dann in den Feldern "HTML bei 'false' " und "HTML bei 'true' " der HTML Code, der auch das Aussehen gestaltet. Incl Hintergrund und farbig hinterlegter Überschrift.

Vielleicht kann man per HTML den Rahmen definieren. Dann die Definition in beide Felder schreiben aber jeweils mit einer anderen Farbe. `

Das funktioniert leider nicht, hatte ich schon probiert

Vis Bindings, funktioniert leider auch nicht, habe jetzt folgende Versionen ausprobiert:

{z:hm-rpc.0.OEQ0426934.1.STATE;(z === true)?“red“  : „green“ }
{z:hm-rpc.0.OEQ0426934.1.STATE;(z === true)?“red“ !important : „green“ !important}
{z:hm-rpc.0.OEQ0426934.1.STATE;(z == true)?“red“ !important : „green“ !important}

der Rahmen bleibt in allen fällen einfach schwarz

Schuko80 · 20 May 2018, 15:51

Ok, eine Lösung habe ich gefunden, man kann zwei Objekte übereinander legen und lässt diese dann im Bereich "Sichtbarkeit" bei 'true' oder 'false' einblenden - das funktioniert wunderbar, trotzdem muss es doch auch irgendwie mit einem Objekt möglich sein!

Immer zwei zu pflegen, ist nicht die schöne Art.

kmxak · 20 May 2018, 15:54

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

Gesendet von meinem SM-G930F mit Tapatalk

Schuko80 · 20 May 2018, 15:59

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 · 20 May 2018, 16:13

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 · 20 May 2018, 17:24

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 · 20 May 2018, 18:17

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 · 20 May 2018, 18:42

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 · 21 May 2018, 14:26

~~@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 · 22 May 2018, 11:51

~~@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 · 22 May 2018, 17:56

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 · 13 Oct 2019, 18:22

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 · 13 Oct 2019, 18:16

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"}]

NEWS

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

Support us

986
Online

31.4k
Users

79.0k
Topics

1.3m
Posts

NEWS

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

Support us

986Online

31.4kUsers

79.0kTopics

1.3mPosts

986
Online

31.4k
Users

79.0k
Topics

1.3m
Posts