Hi @ all and good evening, I’m struggeling since days to create a very simple widget to show an vector graphic picture containing some item values. In the past I managed this with an existing svg in the hab panel. But now I want to try the main Ui because many say this is better customizable. Can …

[image] Hansen11: @Alien is it possible to do the positioning with exact coordinates where the origing is the top left corner for example of the svg picture? Hi, Yes, that’s how it’s done now, instead of pixels there are percentages to make the widget responsive. [image] [image]

If you already have an image in a location OH has access to, then all you need to do is to put the address of the image in the url property of an oh-image (or oh-image-card). [image] oh-image - Image Displays an image from a URL or an item

Good Morning and many thanks for your reply. The svg shows up but place holders are not replaced by the current value of the items. I tried two aproaches: {{itemState(‘Solarthermie_S1_Vorlauf’)}} for example - worked in the hab panel long time ago =(items.Solarthermie_S1_Vorlauf.state) hint from t…

Hi, Try text: =items\[props.Solarthermie_S1_Vorlauf\].displayState || items\[props.Solarthermie_S1_Vorlauf\].state Best Regards Rafal

[image] Hansen11: Good Morning and many thanks for your reply. The svg shows up but place holders are not replaced by the current value of the items. I tried two aproaches: Please show the configuration you are trying to use. The old habPanel configurations will not work in MainUI at all, th…

@ JustinG , of course. This is the very simple code of the widget: component: oh-image-card config: url: /static/Solarthermie-Heizung_II.svg and this is the code of the svg I’m using: <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xm…

Ok, I think I understand. You have been trying to add something to the svg file that will respond to values from OH. That will not work with the MainUI (using the oh-image container). =items.Solarthermie_S1_Vorlauf.state is a correct form for accessing the state of that item in a widget, but that m…

This is my widget displaying the heat recovery unit temperatures. You need to define your own fields with values, if I’m not mistaken openHAB doesn’t support fields in SVG, or at least I couldn’t get it to work. I did it this way. uid: Rekuperator_Temps_Widget_V2 tags: - diagram - temperature …

Thank you so much JustinG and Alien Rafał Różynek . I’m very new to all the Yaml stuff. And I’m just stepping very slowly into it. As far as I understood your explanations and what was written in these threads. I have to use a svg bare of any place holders and add these place holders later. Like this: …

Exactly, - component: Label config: text: =items[props.wywiew].displayState || items[props.wywiew].state style: position: absolute background: rgba(255, 255, 255, 0.9) border:…

[image] Hansen11: As far as I understood your explanations and what was written in these threads. I have to use a svg bare of any place holders and add these place holders later. We have described two fundamentally different approaches: @Alien ’s example displays your static svg and then pos…

Simple Widget to show a svg with value of an item

Setup, Configuration and Use Widgets

Alien (Rafał Różynek) December 8, 2025, 3:28pm 14

Hi,
Yes, that’s how it’s done now, instead of pixels there are percentages to make the widget responsive.