Neuer ioBroker-Blog online: Monatsrückblick März/April 2026

[Meistertr]

@Knallochse du kannst bei dem Bild direkt unten unter Ränder border radius auf 50 Prozent stellen dann wird das Bild Kreisrund..

[Knallochse]

@Meistertr Dankeschön für deine Hilfe. Das mit Radius hatte ich schon einmal eingestellt. Mein Bild (Webcam - Wasseruhr) ist aber rechteckig, und da funktioniert das leider nicht zufriedenstellend. Der Kreis wird da immer oval. Verwendetes Widget basig-img. Möchte aber gern nur den Kreisausschnitt in der Mitte.

[Glasfaser]

@Knallochse

Versuche mal :

Spoiler

[{"tpl":"tplImage","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"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},"style":{"left":"109px","top":"321px","z-index":"10","border-radius":"180px","border-width":"1px","width":"233px","height":"213px"},"widgetSet":"basic"}]

[Knallochse]

@Glasfaser sieht genau so aus wie bei dem Tip von @Meistertr (oval) liegt bestimmt an der rechteckigen Form des Widgets, aber das Bild der Kamera ist halt in diesen Maßen. Aber wenn das halt nicht geht, ist auch nicht schlimm.

[Glasfaser]

@Knallochse

das war nur auf die schnelle ein Beispiel Widget ,
du kannst es doch rechts/links noch verändern , das es Rund wird

[Knallochse]

@Glasfaser das Problem ist ja, wenn ich die Maße des Widget (width: oder hight:) ändere, dann passt sich ja das Bild an
und ein Kreis wird es nur bei quadratischem Maßen

[Glasfaser]

@Knallochse

Nimm mal das Widget und lege es darüber :

Spoiler

[{"tpl":"tplHqCircle","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":true,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","oid":"","displayPrevious":"true","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,"g_center":true,"descriptionLeft":"active media progress","hideNumber":true,"angleOffset":"","thickness":"0.4","color":"#202020","bgcolor":"#202020","linecap":false,"anticlockwise":false,"oid-working":"","caption":"","oid-battery":"","oid-signal":"","g_value":false,"min":"0","max":"100","digits":"0","step":"1","is_comma":"true","cursor":""},"style":{"left":"215px","top":"86px","width":"316px","height":"296px","z-index":"100","box-shadow":"","border-radius":"270px","background":"","background-color":"","border-color":"#202020","border-width":"66px","border-style":""},"widgetSet":"hqwidgets"}]

Hier kannst du es verändern :

[Knallochse]

@Glasfaser

habe dein Widget als Ausgangssituation genommen (Riesenkreis in Widgetfarbe) und dann mit 4 Rechteckwigets in Hindergrundfarbe die Ränder abgedeckt. Noch ein Rahmen mit Schatten darüber. Vielen Dank und schönes Wochenende

[Glasfaser]

@Knallochse

Freut mich ... Sieht doch gut aus ;)

[Knallochse]

@Glasfaser Aber wie wir hier bei uns sagen : von hinten, durch die Brust, ins Auge

[Knallochse]

Im ganzen sieht es dann so aus:

[Glasfaser]

@Knallochse

Das sieht sehr gut aus

Sehr Übersichtlich aufgebaut dein VIS

[Knallochse]

@Glasfaser Danke dir. Meistens ernte ich zu Hause Kopfschütteln