Monatsrückblick Januar/Februar 2026 ist online!

[Bostil]

Hallo Community,

mal wieder so ein Gedanke, aber Probleme bei der Umsetzung: Würde gerne in mein VIS ein View integrieren, wo ich per "Image"-Widget Bilder von Lebensmitteln einblende. Sobald eine der zahlreichen Grafiken (z. B. ein Apfel) per Touchscreen angeklickt wird, sollte das Bild irgendwie geändert werden: ggf. von schwarz-/weiß auf farbig, oder einfach einen leuchtenden Rahmen drumherum. Habt ihr eine Idee, wie man dies mit Bordmitteln ggf. umsetzen kann, dass bei einem einfachen Anklicken des Bildes sich die Formatierung ändert.

Vielen Dank euch.

LG

[skokarl]

@Bostil

Du legst zwei Bilder übereinander, oder legst einen Rahmen darum
Über "Sichtbarkeit" schaltest Du den Rahmen oder das andere Bild sichtbar.

[Bostil]

Danke dir - dies habe ich bereits per Objekt ID gemacht: Sobald Wert > 0 z. B., dann Bild 1 sonst Bild 2. Aber hier ist ja der Auslöser kein Wert in einer Object ID, sondern ein Mausklick / Touch. Gilt deine Anweisung auch dafür ?

Dankeschön.

[Bostil]

Hat noch jemand eine Idee, wie man ein Bild per Klick mit einem Rahmen versehen kann / oder einfach optisch anders darstellen kann. Gerne arbeite ich auch mit dem Überlagern, aber einen Bezug auf eine Object ID wird es nicht geben.

Danke euch.

[sigi234]

@Bostil

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":"108px","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"},{"tpl":"tplImage","data":{"g_fixed":true,"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,"refreshInterval":"0","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,"src":"/admin.admin/admin.png","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,"name":"Admin_Bild","visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide"},"style":{"left":"32px","top":"111px","width":"45px","height":"45px","background":"#424242","border-radius":"10px","background-color":"#424242","border-style":"solid","border-width":"2px","z-index":"10","border-color":"#424242"},"widgetSet":"basic"}]

[Bostil]

Danke @sigi234 - ich denke sogar, dass ich zufällig auf eine noch einfachere Methode gestoßen bin:

• und zwar der "jqui - Icon Toggle" ist in der Lage in Abhängigkeit einer Object ID (dann eben doch ... war aber kein größerer Aufwand) entsprechend die Bilder je nach EIN / AUS separat zu schalten
• klappt auch ganz gut

[sigi234]

@Bostil

Gut. Dann bitte auf [gelöst] im TITEL setzen.

[Chaot]

@Bostil Einkaufsliste ?!?
--- Interessant! ---

[Bostil]

Genau ... wenn man(n) sonst keine Hobbies hat .... ;-)))

[Chaot]

@Bostil Wo hast du die Bilder her.
Ich habe jetzt ne Woche Urlaub. das wäre genau das Passende ......

[Bostil]

Das IconPack habe ich hier gefunden: https://speckyboy.com/freebie-colored-food-drink-icon-set/

Um fehlende Icons ausfinding zu machen, hatte mir https://www.flaticon.com/de geholfen. Erfreulicherweise kann man hier schnell & kostenlos herunterladen.

[Bostil]

Jetzt habe ich doch noch eine Krux.

• wie gesagt: über einen Klick auf Symbol schalte ich über den Icon-Toggle zwei Bilder um (farbig wenn markiert und eingekauft werden soll, ansonsten schwarz-weiß)
• am PC über den Browser klappt dies auch per Mauscklick einwandfrei
• allerdings betreige ich Vis eigentlich auf einem MiniPC direkt an einem Touchscreen über den Opera-Browser (das funkt dann zu einem Raspi4 mit IOBroker)
• wenn ich aber hier an der Vis per Touchscreen auf das Icon klicke, springt es gleich wieder von farbig zurück auf schwarz-weiß
• erst bei einem erneuten Touch bleibt es dauerhaft auf farbig stehen
• hat jemand eine Idee?

Unterhalb die passenden Screens dazu, sowohl von der VIS und auch von den Objekten, die über die Grafiken gesteuert werden.