Monatsrückblick Januar/Februar 2026 ist online!

[amg_666]

Hallo,

ich möchte in meine vis gerne eine Uhr im "iobroker-look", wie die Uhr, die im info Adapter angezeigt wird.
Kann mir jemand sagen, wie ich das umsetze?

[Feuersturm]

@amg_666 Meine erste Idee wäre gewesen sich z.b. das widget "Svg clock" zu nehmen und dann über CSS Hintergrund -image ein Bild zu hinterlegen.
Habe es gerade einmal mit diesem Eintrag probiert, wie es @crunchip hier https://forum.iobroker.net/topic/31717/vis-adapter-css-hintergrund-image/3 vorgeschlagen hatte

url(http://192.168.178.54:8082/vis.0/Hintergrundbild/wallpaper-170391.jpg)

aber leider ohne Erfolg.

Vielleicht weiß jemand, ob man noch weitere Parameter setzen muss. Hab auch einmal verschiedene Widgets getestet und dort versucht einen sichtbaren Hintergrund zu hinterlegen. Aber Erfolglos.
Vielleicht ist es ein Lösungsansatz

Wenn dieser Weg nicht zielführend ist kannst du dir ja auch einfach die Uhr nehmen und ein passendes ioBroker Bild hinter die Uhr legen (z-index vom Bild kleiner als von der Uhr).

[crunchip]

@feuersturm sagte in Uhrendarstellung für vis gesucht:

Habe es gerade einmal mit diesem Eintrag probiert,

wenn du es bei background einträgst, wird das Bild angezeigt, allerdings stimmt die Größe nicht

weiss nicht was man eintragen muss um das Bild zu verkleinern

[Chaot]

@crunchip
Wenn du die Uhr jetzt so groß ziehst dass das Bild in die Uhrenmitte kommt musst du dann nur noch über den Punkt "transform" die Größe anpassen. z.B.

scale(0.5)

dann bekommst du das in die Größe die du benötigst ohne die Größe vom Hintergrundbild zu ändern.

[crunchip]

@chaot jep, wäre eine Möglichkeit, dachte aber eher man kann da was bei size eintragen
aber ich bin mit vis aktuell nicht so bewandert, hab schon lange nichts mehr daran gemacht
alternativ könnte man sich ja auch das logo in der "passenden" Größe hochladen

[Glasfaser]

.timerbackground { 
   background-image: url(/vis.0/Home/Background/images.png);
   background-size: cover;
}

Widget

[{"tpl":"i-vis-universal","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","iUniversalWidgetType":"Background","iValueType":"value","iValueComparison":"equal","iStateResponseTime":"0","iStateResetValueTime":"0","iNavWait":"100","iPopUpBackground":"#666666","iPopUpPreventClickOutside":"","iPopUpShowTitle":"true","iPopUpTitle":"","iPopUpTitleColor":"#ffffff","iPopUpCloseBtnColor":"#dc2e2e","iPopUpWidth":"800px","iPopUpHeight":"500px","iPopUpHeightTitle":"50","iPopUpTitleSize":"28","iPopUpPosition":"center","iPopUpPositionX":"0","iPopUpPositionY":"0","iPopUpCloseAfterSeconds":"0","iPopUpCornerRadiusUL":"12","iPopUpCornerRadiusUR":"0","iPopUpCornerRadiusLR":"12","iPopUpCornerRadiusLL":"0","iPopUpShadowXOffset":"2","iPopUpShadowYOffset":"2","iPopUpShadowBlur":"2","iPopUpShadowSpread":"1","iPopUpShadowColor":"#111111","iButtonCol":"","iButtonActive":"","iButtonColHover":"","iOpacityBack":"0","iCornerRadiusUL":"0","iCornerRadiusUR":"0","iCornerRadiusLR":"0","iCornerRadiusLL":"0","iContentFlexDirection":"vertical","iContentVertAlign":"iSpace-between","iContentOrder":"orderImgText","iOpacityCtn":"1","iContentType":"clock_analog","iTextColor":"#ffffff","iTextSize":"0","iTextAlign":"iStart","iTextSpaceTop":"0","iTextSpaceBottom":"0","iTextSpaceLeft":"0","iTextSpaceRight":"0","iIconSize":"72","iImgAlign":"iCenter","iImgSpaceTop":"0","iImgSpaceBottom":"0","iImgSpaceLeft":"0","iImgSpaceRight":"0","iImgRotation":"0","iImgBlinkFalse":"0","iImgBlinkTrue":"0","iImgColorFalse":"","iImgColorTrue":"","iImgClockFace":"02","iImgClockHands":"02","iImgClockShowBorder":false,"iImgColorClockFace":"#ffffff","iImgColorHands":"#383bff","iImgColorHandSecond":"#bf1818","iClockShowSeconds":true,"iClockTimezone":"Europe/Berlin","iHtmlTextFieldFalse":"","iHtmlTextFieldTrue":"","iShadowXOffset":"2","iShadowYOffset":"2","iShadowBlur":"2","iShadowSpread":"1","iShadowColor":"#111111","iShadowColorActive":"#111111","iShadowColorHover":"","iShadowInnerXOffset":"0","iShadowInnerYOffset":"0","iShadowInnerBlur":"0","iShadowInnerSpread":"0","iShadowInnerColor":"#111111","iShadowInnerColorActive":"#111111","iShadowInnerColorHover":"","iShadowTextXOffset":"0","iShadowTextYOffset":"0","iShadowTextBlur":"0","iShadowTextColor":"#111111","iShadowTextColorActive":"#111111","iBorderSize":"0","iBorderStyle":"none","iBorderColor":"#ffffff","iBorderColorActive":"#ffffff","iBorderColorHover":"","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":"Uhr","views":["Alarm","Alexa","Anrufmonitor","BackItup","Corona","Coronavirus_Statistics","Drucker","ECharts","FB_Checkpresence","Geschirrspüler","Heizung","Kalender","Led","LG_TV","Licht","Meteoalarm","Multimedia","Netzwerk","Pegelalarm","Sprinkle_Control","Wetter","Wetter_Detail","Yamaha"],"iHttpType":"iSend","iTextColorActive":"#ffffff","iTextDecoration":"none","iTextFalse":"","iValueTrue":"","class":"timerbackground","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},"style":{"left":"686px","top":"99px","width":"82px","height":"83px","z-index":"5"},"widgetSet":"vis-inventwo"},{"tpl":"tplSvgClock","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","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,"class":"timerbackground","quadSize":"100","isSeconds":true},"style":{"left":"264px","top":"62px","width":"256px","height":"253px"},"widgetSet":"timeandweather"}]

PNG Bild was ich für den Test genommen habe :

[Chaot]

@feuersturm
Vielleicht hilft dir das Widget so weiter:
Uhr.txt
Und Anpassen wie gerade geschrieben über Scale

[Chaot]

@amg_666 Habe das Widget nochmal etwas geändert.
Uhr.txt
Die URL musst du dir noch anpassen und der Info Adapter muss installiert sein. Von da habe ich den Hintergrund geklaut :eyes:

[Glasfaser]

@chaot sagte in Uhrendarstellung für vis gesucht:

Die URL musst du dir noch anpassen

wäre dann so , ohne IP / Port Anpassung

url(/info.admin/lib/img/clock/clockface.png)

[Glasfaser]

[Chaot]

@glasfaser :sunglasses: Bastelstunde :sweat_smile:

[amg_666]

@chaot Wenn ich das widget importiere passiert nix, wird auch nix angezeigt. Bei dem Widget oben von @Glasfaser funktionierts, kann es sein, dass dein geändertes Widget nicht korrekt ist?

[Chaot]

@amg_666 Was meinst du mit "passiert nix"?
Ist bei dir SVG Clock verfügbar?
Ist der Info Adapter installiert?
Uhr.txt

Im Grunde kannst du das auch selbst bauen:
SVG Clock Widget einfügen
Größe: 158 x 158 px
Background: url(/info.admin/lib/img/clock/clockface.png)
Repeat: no-repeat

Dann noch die Farben der Zeiger anpassen und bei Vierteltextgröße und Minutentextgröße jeweils "0" eintragen

Wenn du dann die Größe ändern willst gehst du über

transform: scale(0.7)

wobei der Wert 0.7 dann soweit geändert wird bis es eben passt in der Darstellung. Es funktionieren dabei auch mehrere Kommastellen.

[amg_666]

@chaot sagte in Uhrendarstellung für vis gesucht:

Was meinst du mit "passiert nix"?

Damit meinte ich, dass ich nach Widget importieren nichts in meiner vis gesehen habe.
Also, info adapter ist natürlich installiert (sonst wäre ich ja gar nicht auf die Idee mit der Uhr gekommen :-) ), aber SVG clock hat anscheinend gefehlt, keine Ahznung warum. Ich hab jetzt die time&weather nochmal neu installiert, jetzt läufts.

Danke an euch für den Input...

[Glasfaser]

@amg_666 sagte in Uhrendarstellung für vis gesucht:

aber SVG clock hat anscheinend gefehlt,

@amg_666 sagte in Uhrendarstellung für vis gesucht:
Bei dem Widget oben von @Glasfaser funktionierts,

Zur Info , ich hatte auch die rechte kleine Uhr im Screeshot ( Vorlage ) auch mit inventwo zusätzlich erstellt .