SOLVED [gelöst] Lösung für wechselde Border Farbe gesucht
-
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?
-
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"} -
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
-
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.
-
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
-
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.
-
Mit CSS geht es nicht? Habe so mein Design bg Farbe über Objekt gesteuert.
Gesendet von meinem SM-G930F mit Tapatalk
-
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
-
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
-
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
-
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"} -
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!
-
@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
-
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
-
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…
-
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.
-
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"}]
