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 anybody spend a working code snipped?
I have a svg and I can access it via th browser by: {localIP}/static/Solarthermie-Heizung_II.svg
Many thanks in advance
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).
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:
But both didn’t work. How should the place holder look like in a vector graphic that OH5 can render it and insert the item values?
Hi,
Try
text: =items\[props.Solarthermie_S1_Vorlauf\].displayState || items\[props.Solarthermie_S1_Vorlauf\].state
Best Regards
Rafal
Please show the configuration you are trying to use.
The old habPanel configurations will not work in MainUI at all, they are based on a completely different system. But, withouth seeing the actual widget configuration you are trying to use, it is impossible for us to know where the errors are.
@ 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/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="464.73914"
height="306.45386"
viewBox="0 0 122.96223 81.082584"
version="1.1"
id="svg8"
inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"
sodipodi:docname="Solarthermie-Heizung_II.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.2276171"
inkscape:cx="356.74557"
inkscape:cy="152.57053"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
inkscape:document-rotation="0"
showgrid="true"
units="px"
inkscape:window-width="1920"
inkscape:window-height="1017"
inkscape:window-x="522"
inkscape:window-y="892"
inkscape:window-maximized="1"
fit-margin-top="0.5"
fit-margin-right="0.5"
fit-margin-bottom="0.5"
fit-margin-left="0.5">
<inkscape:grid
type="xygrid"
id="grid849"
originx="16.435496"
originy="17.200285" />
</sodipodi:namedview>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(16.435496,17.200285)">
<g
id="g1100">
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="M 62.177082,-10.583333 56.885416,-2.6461317e-7"
id="path1058" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="M 63.499999,-10.583333 58.208332,-2.6461317e-7"
id="path1060" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="M 64.822916,-10.583333 59.531249,-2.6461317e-7"
id="path1062" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="M 66.145832,-10.583333 60.854166,-2.6461317e-7"
id="path1064" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="M 67.468749,-10.583333 62.177082,-2.6461317e-7"
id="path1066" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="M 63.499999,-2.6461317e-7 68.791666,-10.583333"
id="path1068" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="M 70.114582,-10.583333 64.822916,-2.6461317e-7"
id="path1070" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="m 56.356249,-1.3229169 h 10.31875"
id="path1072" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="M 67.468749,-2.6458336 H 56.885416"
id="path1074" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 57.679166,-3.9687502 10.478154,0"
id="path1076"
sodipodi:nodetypes="cc" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="M 58.208332,-5.2916669 H 68.791666"
id="path1078" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="m 59.002082,-6.6145835 h 10.31875"
id="path1080" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="M 70.114582,-7.9375002 H 59.531249"
id="path1082" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="m 60.324999,-9.2604168 h 10.31875"
id="path1084" />
</g>
<rect
style="fill:none;stroke:#6ab0d4;stroke-width:0.500001;stroke-miterlimit:1;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect833"
width="21.777416"
height="41.01226"
x="2.0350831"
y="22.487738"
ry="9.0812864" />
<text
xml:space="preserve"
style="font-size:2.11667px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#6ab0d4;fill-opacity:1;stroke:none;stroke-width:0.264584;stroke-opacity:1"
x="5.9877143"
y="31.748732"
id="text837"
transform="scale(1.0000707,0.9999293)"><tspan
sodipodi:role="line"
id="tspan835"
x="5.9877143"
y="31.748732"
style="font-size:2.11667px;fill:#6ab0d4;fill-opacity:1;stroke:none;stroke-width:0.264584;stroke-opacity:1">=(items.Pufferspeicher_1_1.state)</tspan></text>
<text
xml:space="preserve"
style="font-size:2.11667px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#6ab0d4;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-opacity:1"
x="6.0257449"
y="39.815041"
id="text837-0"
transform="scale(1.0000707,0.99992931)"><tspan
sodipodi:role="line"
id="tspan835-9"
x="6.0257449"
y="39.815041"
style="font-size:2.11667px;fill:#6ab0d4;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-opacity:1">=(items.Pufferspeicher_1_2.state)</tspan></text>
<text
xml:space="preserve"
style="font-size:2.11667px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#6ab0d4;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-opacity:1"
x="5.9140964"
y="56.927246"
id="text837-0-7"
transform="scale(1.0000707,0.99992931)"><tspan
sodipodi:role="line"
id="tspan835-9-1"
x="5.9140964"
y="56.927246"
style="font-size:2.11667px;fill:#6ab0d4;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-opacity:1">=(items.Pufferspeicher_1_1.state)</tspan></text>
<text
xml:space="preserve"
style="font-size:2.11667px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#6ab0d4;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-opacity:1"
x="5.9785018"
y="48.272854"
id="text837-0-9"
transform="scale(1.0000707,0.99992931)"><tspan
sodipodi:role="line"
id="tspan835-9-2"
x="5.9785018"
y="48.272854"
style="font-size:2.11667px;fill:#6ab0d4;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-opacity:1">=(items.Pufferspeicher_1_3.state)</tspan></text>
<rect
style="fill:none;stroke:#6ab0d4;stroke-width:0.500002;stroke-miterlimit:1;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect833-0"
width="21.777416"
height="41.01226"
x="36.430916"
y="22.487741"
ry="9.0812864" />
<text
xml:space="preserve"
style="font-size:2.11667px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#6ab0d4;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-opacity:1"
x="40.381111"
y="31.748735"
id="text837-9"
transform="scale(1.0000707,0.9999293)"><tspan
sodipodi:role="line"
id="tspan835-3"
x="40.381111"
y="31.748735"
style="font-size:2.11667px;fill:#6ab0d4;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-opacity:1">=(items.Pufferspeicher_2_1.state)</tspan></text>
<text
xml:space="preserve"
style="font-size:2.11667px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#6ab0d4;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-opacity:1"
x="40.419144"
y="39.815041"
id="text837-0-6"
transform="scale(1.0000707,0.99992931)"><tspan
sodipodi:role="line"
id="tspan835-9-26"
x="40.419144"
y="39.815041"
style="font-size:2.11667px;fill:#6ab0d4;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-opacity:1">=(items.Pufferspeicher_2_2.state)</tspan></text>
<text
xml:space="preserve"
style="font-size:2.11667px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#6ab0d4;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-opacity:1"
x="40.307495"
y="56.92725"
id="text837-0-7-8"
transform="scale(1.0000707,0.99992931)"><tspan
sodipodi:role="line"
id="tspan835-9-1-0"
x="40.307495"
y="56.92725"
style="font-size:2.11667px;fill:#6ab0d4;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-opacity:1">=(items.Pufferspeicher_2_4.state)</tspan></text>
<text
xml:space="preserve"
style="font-size:2.11667px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#6ab0d4;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-opacity:1"
x="40.371902"
y="48.272854"
id="text837-0-9-5"
transform="scale(1.0000707,0.99992931)"><tspan
sodipodi:role="line"
id="tspan835-9-2-3"
x="40.371902"
y="48.272854"
style="font-size:2.11667px;fill:#6ab0d4;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-opacity:1">=(items.Pufferspeicher_2_3.state)</tspan></text>
<rect
style="fill:none;stroke:#6ab0d4;stroke-width:0.499999;stroke-miterlimit:1;stroke-opacity:1"
id="rect879"
width="35.71875"
height="3.4395852"
x="-9.2604179"
y="-11.377084"
ry="0.79374981"
rx="0.79374981" />
<rect
style="fill:none;stroke:#6ab0d4;stroke-width:0.499999;stroke-miterlimit:1;stroke-opacity:1"
id="rect881"
width="1.3229166"
height="17.197916"
x="-7.9375014"
y="-7.937501"
ry="0.66145831" />
<rect
style="fill:none;stroke:#6ab0d4;stroke-width:0.499999;stroke-miterlimit:1;stroke-opacity:1"
id="rect881-2"
width="1.3229166"
height="17.197916"
x="-5.2916679"
y="-7.9375005"
ry="0.66145831" />
<rect
style="fill:none;stroke:#6ab0d4;stroke-width:0.499999;stroke-miterlimit:1;stroke-opacity:1"
id="rect881-4"
width="1.3229166"
height="17.197916"
x="-2.6458342"
y="-7.937501"
ry="0.66145831" />
<rect
style="fill:none;stroke:#6ab0d4;stroke-width:0.499999;stroke-miterlimit:1;stroke-opacity:1"
id="rect881-2-7"
width="1.3229166"
height="17.197916"
x="-3.1789145e-07"
y="-7.937501"
ry="0.66145831" />
<rect
style="fill:none;stroke:#6ab0d4;stroke-width:0.499999;stroke-miterlimit:1;stroke-opacity:1"
id="rect881-6"
width="1.3229166"
height="17.197916"
x="2.6458309"
y="-7.9375005"
ry="0.66145831" />
<rect
style="fill:none;stroke:#6ab0d4;stroke-width:0.499999;stroke-miterlimit:1;stroke-opacity:1"
id="rect881-2-2"
width="1.3229166"
height="17.197916"
x="5.2916646"
y="-7.9374995"
ry="0.66145831" />
<rect
style="fill:none;stroke:#6ab0d4;stroke-width:0.499999;stroke-miterlimit:1;stroke-opacity:1"
id="rect881-4-4"
width="1.3229166"
height="17.197916"
x="7.9374986"
y="-7.9375005"
ry="0.66145831" />
<rect
style="fill:none;stroke:#6ab0d4;stroke-width:0.499999;stroke-miterlimit:1;stroke-opacity:1"
id="rect881-2-7-8"
width="1.3229166"
height="17.197916"
x="10.583333"
y="-7.9375005"
ry="0.66145831" />
<rect
style="fill:none;stroke:#6ab0d4;stroke-width:0.499999;stroke-miterlimit:1;stroke-opacity:1"
id="rect881-1"
width="1.3229166"
height="17.197916"
x="13.229167"
y="-7.9375"
ry="0.66145831" />
<rect
style="fill:none;stroke:#6ab0d4;stroke-width:0.499999;stroke-miterlimit:1;stroke-opacity:1"
id="rect881-2-4"
width="1.3229166"
height="17.197916"
x="15.875001"
y="-7.9374995"
ry="0.66145831" />
<rect
style="fill:none;stroke:#6ab0d4;stroke-width:0.499999;stroke-miterlimit:1;stroke-opacity:1"
id="rect881-4-7"
width="1.3229166"
height="17.197916"
x="18.520834"
y="-7.9375"
ry="0.66145831" />
<rect
style="fill:none;stroke:#6ab0d4;stroke-width:0.499999;stroke-miterlimit:1;stroke-opacity:1"
id="rect881-2-7-82"
width="1.3229166"
height="17.197916"
x="21.166666"
y="-7.9375"
ry="0.66145831" />
<rect
style="fill:none;stroke:#6ab0d4;stroke-width:0.499999;stroke-miterlimit:1;stroke-opacity:1"
id="rect881-2-7-82-7"
width="1.3229166"
height="17.197916"
x="23.812498"
y="-7.9375005"
ry="0.66145831" />
<rect
style="fill:none;stroke:#6ab0d4;stroke-width:0.499999;stroke-miterlimit:1;stroke-opacity:1"
id="rect879-6"
width="35.71875"
height="1.8520831"
x="-9.2604179"
y="9.5249996"
ry="0.79374981"
rx="0.79374981" />
<text
xml:space="preserve"
style="font-size:2.11667px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#6ab0d4;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-opacity:1"
x="27.782072"
y="7.2260327"
id="text837-1"
transform="scale(1.0000707,0.99992931)"><tspan
sodipodi:role="line"
id="tspan835-8"
x="27.782072"
y="7.2260327"
style="font-size:2.11667px;fill:#6ab0d4;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-opacity:1">=(items.Solarthermie_S2_Ruecklauf.state)</tspan></text>
<text
xml:space="preserve"
style="font-size:3.52777px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#6ab0d4;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-opacity:1"
x="-16.743023"
y="-14.388922"
id="text837-1-2"
transform="scale(1.0000707,0.99992931)"><tspan
sodipodi:role="line"
id="tspan835-8-4"
x="-16.743023"
y="-14.388922"
style="font-size:3.52777px;fill:#6ab0d4;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-opacity:1">=(items.Solarthermie_S1_Vorlauf.state)</tspan></text>
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.465;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="M 60.854166,-10.583333 55.562499,-2.6461317e-7 H 66.145832 L 71.437499,-10.583333 Z"
id="path1056" />
<g
id="g1100-1"
transform="translate(11.906251)">
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 62.177082,-10.583333 56.885416,-2.6461317e-7"
id="path1058-6" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 63.499999,-10.583333 58.208332,-2.6461317e-7"
id="path1060-6" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 64.822916,-10.583333 59.531249,-2.6461317e-7"
id="path1062-7" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 66.145832,-10.583333 60.854166,-2.6461317e-7"
id="path1064-7" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 67.468749,-10.583333 62.177082,-2.6461317e-7"
id="path1066-6" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 63.499999,-2.6461317e-7 68.791666,-10.583333"
id="path1068-2" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 70.114582,-10.583333 64.822916,-2.6461317e-7"
id="path1070-6" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 56.356249,-1.3229169 h 10.31875"
id="path1072-8" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 67.468749,-2.6458336 H 56.885416"
id="path1074-0" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 57.679166,-3.9687502 H 68.15732"
id="path1076-7"
sodipodi:nodetypes="cc" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 58.208332,-5.2916669 H 68.791666"
id="path1078-3" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 59.002082,-6.6145835 h 10.31875"
id="path1080-5" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 70.114582,-7.9375002 H 59.531249"
id="path1082-8" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 60.324999,-9.2604168 h 10.31875"
id="path1084-6" />
</g>
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.465;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 72.760419,-10.583334 67.468752,-7.8435855e-7 H 78.052085 L 83.343752,-10.583334 Z"
id="path1056-5" />
<g
id="g1100-4"
transform="translate(-5.2916655,11.90625)">
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 62.177082,-10.583333 56.885416,-2.6461317e-7"
id="path1058-0" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 63.499999,-10.583333 58.208332,-2.6461317e-7"
id="path1060-1" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 64.822916,-10.583333 59.531249,-2.6461317e-7"
id="path1062-8" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 66.145832,-10.583333 60.854166,-2.6461317e-7"
id="path1064-5" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 67.468749,-10.583333 62.177082,-2.6461317e-7"
id="path1066-1" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 63.499999,-2.6461317e-7 68.791666,-10.583333"
id="path1068-0" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 70.114582,-10.583333 64.822916,-2.6461317e-7"
id="path1070-4" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 56.356249,-1.3229169 h 10.31875"
id="path1072-88" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 67.468749,-2.6458336 H 56.885416"
id="path1074-4" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 57.679166,-3.9687502 H 68.15732"
id="path1076-0"
sodipodi:nodetypes="cc" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 58.208332,-5.2916669 H 68.791666"
id="path1078-9" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 59.002082,-6.6145835 h 10.31875"
id="path1080-52" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 70.114582,-7.9375002 H 59.531249"
id="path1082-5" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 60.324999,-9.2604168 h 10.31875"
id="path1084-3" />
</g>
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.465;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 55.562502,1.3229168 50.270835,11.90625 H 60.854167 L 66.145835,1.3229168 Z"
id="path1056-8" />
<g
id="g1100-1-6"
transform="translate(6.6145841,11.90625)">
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 62.177082,-10.583333 56.885416,-2.6461317e-7"
id="path1058-6-4" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 63.499999,-10.583333 58.208332,-2.6461317e-7"
id="path1060-6-9" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 64.822916,-10.583333 59.531249,-2.6461317e-7"
id="path1062-7-1" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 66.145832,-10.583333 60.854166,-2.6461317e-7"
id="path1064-7-2" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 67.468749,-10.583333 62.177082,-2.6461317e-7"
id="path1066-6-2" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 63.499999,-2.6461317e-7 68.791666,-10.583333"
id="path1068-2-8" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 70.114582,-10.583333 64.822916,-2.6461317e-7"
id="path1070-6-0" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 56.356249,-1.3229169 h 10.31875"
id="path1072-8-9" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 67.468749,-2.6458336 H 56.885416"
id="path1074-0-2" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 57.679166,-3.9687502 H 68.15732"
id="path1076-7-3"
sodipodi:nodetypes="cc" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 58.208332,-5.2916669 H 68.791666"
id="path1078-3-1" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 59.002082,-6.6145835 h 10.31875"
id="path1080-5-2" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 70.114582,-7.9375002 H 59.531249"
id="path1082-8-4" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.065;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 60.324999,-9.2604168 h 10.31875"
id="path1084-6-6" />
</g>
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.465;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 67.468754,1.3229158 62.177087,11.90625 H 72.760421 L 78.052087,1.3229158 Z"
id="path1056-5-6" />
<rect
style="fill:none;fill-opacity:1;stroke:#6ab0d4;stroke-width:0.465;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect1285"
width="11.906253"
height="15.874998"
x="76.729164"
y="19.84375"
ry="0.66145831" />
<rect
style="fill:none;fill-opacity:1;stroke:#6ab0d4;stroke-width:0.465;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect1287"
width="3.96875"
height="2.6458333"
x="80.697914"
y="23.812502"
ry="0" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.465;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="M 85.989582,19.843749 V -2.6458336 h 13.229167"
id="path1289" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.465;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="M 85.989582,2.645833 H 99.218749"
id="path1291" />
<path
style="fill:none;stroke:#6ab0d4;stroke-width:0.465;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="M 85.989582,7.9374996 H 99.218749"
id="path1293" />
<text
xml:space="preserve"
style="font-size:3.52777778px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;stroke-width:0.264583;fill:#6ab0d4;fill-opacity:1;"
x="87.3125"
y="-3.9687507"
id="text1297"><tspan
sodipodi:role="line"
id="tspan1295"
x="87.3125"
y="-3.9687507"
style="stroke-width:0.264583;fill:#6ab0d4;fill-opacity:1;font-size:3.52777778px;">U</tspan></text>
<text
xml:space="preserve"
style="font-size:3.52778px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#6ab0d4;fill-opacity:1;stroke-width:0.264583"
x="87.323814"
y="1.3935713"
id="text1301"><tspan
sodipodi:role="line"
id="tspan1299"
x="87.323814"
y="1.3935713"
style="font-size:3.52778px;fill:#6ab0d4;fill-opacity:1;stroke-width:0.264583">V</tspan></text>
<text
xml:space="preserve"
style="font-size:3.52778px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#6ab0d4;fill-opacity:1;stroke-width:0.264583"
x="87.458099"
y="6.6782093"
id="text1305"><tspan
sodipodi:role="line"
id="tspan1303"
x="87.458099"
y="6.6782093"
style="font-size:3.52778px;fill:#6ab0d4;fill-opacity:1;stroke-width:0.264583">W</tspan></text>
<text
xml:space="preserve"
style="font-size:3.52777px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#6ab0d4;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-opacity:1"
x="91.242073"
y="-4.0181842"
id="text837-1-0"
transform="scale(1.0000707,0.99992931)"><tspan
sodipodi:role="line"
id="tspan835-8-5"
x="91.242073"
y="-4.0181842"
style="font-size:3.52777px;fill:#6ab0d4;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-opacity:1">=(items.Leistung_Phase_1.state)</tspan></text>
<text
xml:space="preserve"
style="font-size:3.52777px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#6ab0d4;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-opacity:1"
x="91.309616"
y="1.2031964"
id="text837-1-0-9"
transform="scale(1.0000707,0.99992931)"><tspan
sodipodi:role="line"
id="tspan835-8-5-7"
x="91.309616"
y="1.2031964"
style="font-size:3.52777px;fill:#6ab0d4;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-opacity:1">=(items.Leistung_Phase_2.state)</tspan></text>
<text
xml:space="preserve"
style="font-size:3.52777px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;fill:#6ab0d4;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-opacity:1"
x="91.261604"
y="6.6931591"
id="text837-1-0-3"
transform="scale(1.0000707,0.99992931)"><tspan
sodipodi:role="line"
id="tspan835-8-5-0"
x="91.261604"
y="6.6931591"
style="font-size:3.52777px;fill:#6ab0d4;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-opacity:1">=(items.Leistung_Phase_3.state)</tspan></text>
</g>
</svg>
@ AlienRafał Różynek what do you mean? Add this line in the widget code or in the svg?
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 must be the value of one of the yaml keys in the widget configuration, it does not work in any things else (like inside an svg file).
There is a way to achieve what you want, but it will take just a little more work. You can actually build the svg directly in the widget. This is a moderately advanced use of the widget system, but once you get proficient with it it’s very powerful. There are several examples in the forums for building svg’s. Here are a couple:
(scroll down to the second half of that thread)
Or
or many others.
You also don’t need everything in that svg file. Inkscape adds a lot of extra information. If you go to inkscape and use save as and then select optimized svg, you’ll get a significantly smaller file which will be reasonably easy to convert over to the widget.
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
- ventilation
props:
parameters:
- description: Tytuł widgetu
label: Title
name: title
required: false
type: TEXT
- context: item
description: Temperatura Czerpnia
label: Czerpnia Item
name: czerpniagwc
required: false
type: TEXT
- context: item
description: Temperatura Za GWC
label: Za GWC Item
name: zagwc
required: false
type: TEXT
- context: item
description: Temperatura Wyrzutnia
label: Wyrzutnia Item
name: wyrzutnia
required: false
type: TEXT
- context: item
description: Temperatura Nawiew
label: Nawiew Item
name: nawiew
required: false
type: TEXT
- context: item
description: Temperatura Wywiew
label: Wywiew Item
name: wywiew
required: false
type: TEXT
timestamp: Nov 29, 2025, 6:32:43 PM
component: f7-card
config:
title: "=props.title ? props.title : 'Rekuperator - Temperatury'"
style:
min-height: 300px
margin: 15 px
--f7-card-header-font-size: 16px
--f7-card-header-font-weight: bold
slots:
default:
- component: f7-block
config:
style:
padding: 0
margin: 0
position: relative
display: flex
justify-content: center
align-items: center
width: 100%
slots:
default:
- component: div
config:
style:
position: relative
width: 100%
max-width: 600px
slots:
default:
- component: oh-image
config:
url: /static/reku.svg
style:
width: 100%
height: auto
display: block
- component: Label
config:
text: =items[props.wywiew].displayState || items[props.wywiew].state
style:
position: absolute
background: rgba(255, 255, 255, 0.9)
border: 1px solid
border-radius: 4px
padding: 2px 6px
font-size: 12px
font-weight: bold
color: "#333333"
box-shadow: 0 2px 4px rgba(0,0,0,0.15)
transform: translate(-50%, -50%)
top: 21%
left: 16%
- component: Label
config:
text: =items[props.zagwc].displayState || items[props.zagwc].state
style:
position: absolute
background: rgba(255, 255, 255, 0.9)
border: 1px solid
border-radius: 4px
padding: 2px 6px
font-size: 12px
font-weight: bold
color: "#333333"
box-shadow: 0 2px 4px rgba(0,0,0,0.15)
transform: translate(-50%, -50%)
top: 21%
left: 66%
- component: Label
config:
text: =items[props.czerpniagwc].displayState || items[props.czerpniagwc].state
style:
position: absolute
background: rgba(255, 255, 255, 0.9)
border: 1px solid
border-radius: 4px
padding: 2px 6px
font-size: 12px
font-weight: bold
color: "#333333"
box-shadow: 0 2px 4px rgba(0,0,0,0.15)
transform: translate(-50%, -50%)
top: 21%
left: 80%
- component: Label
config:
text: =items[props.nawiew].displayState || items[props.nawiew].state
style:
position: absolute
background: rgba(255, 255, 255, 0.9)
border: 1px solid
border-radius: 4px
padding: 2px 6px
font-size: 12px
font-weight: bold
color: "#333333"
box-shadow: 0 2px 4px rgba(0,0,0,0.15)
transform: translate(-50%, -50%)
top: 79%
left: 16%
- component: Label
config:
text: =items[props.wyrzutnia].displayState || items[props.wyrzutnia].state
style:
position: absolute
background: rgba(255, 255, 255, 0.9)
border: 1px solid
border-radius: 4px
padding: 2px 6px
font-size: 12px
font-weight: bold
color: "#333333"
box-shadow: 0 2px 4px rgba(0,0,0,0.15)
transform: translate(-50%, -50%)
top: 79%
left: 80%
Thank you so much JustinG and AlienRafał 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:
- component: Label
config:
text: =items[props.wywiew].displayState || items[props.wywiew].state
style:
position: absolute
background: rgba(255, 255, 255, 0.9)
border: 1px solid
border-radius: 4px
padding: 2px 6px
font-size: 12px
font-weight: bold
color: "#333333"
box-shadow: 0 2px 4px rgba(0,0,0,0.15)
transform: translate(-50%, -50%)
top: 21%
left: 16%
or like this:
- component: Label
config:
style:
width: 25%
text: =items[props.totalPages].state
Did I get this right?
But I don’t understand how the positioning of the text is done.
Exactly,
- component: Label
config:
text: =items[props.wywiew].displayState || items[props.wywiew].state
style:
position: absolute
background: rgba(255, 255, 255, 0.9)
border: 1px solid
border-radius: 4px
padding: 2px 6px
font-size: 12px
font-weight: bold
color: "#333333"
box-shadow: 0 2px 4px rgba(0,0,0,0.15)
transform: translate(-50%, -50%)
top: 21%
left: 16%
“top” and “left” is position of your placeholder defined in “props” section. You can easily adapt my widget by replacing the SVG and modifying the number of placeholders 
We have described two fundamentally different approaches:
For example, if I wanted an svg of a green hexagon with some text in it, I can use the following widget where each component is one of the tags in the svg:
component: svg
config:
width: 100px
height: 100px
version: 1.1
viewBox: "0 0 100 100"
xmlns: http://www.w3.org/2000/svg
slots:
default:
- component: path
config:
transform: "matrix(1.8122 0 0 1.5694 -75.144 -73.894)"
d: "m96.648 94.873-27.591 15.93-27.591-15.93v-31.859l27.591-15.93 27.591 15.93z"
style: "fill:#008000;stroke-width:.59297"
- component: text
config:
x: 10
y: 50
style: "fill:#000000;font-family:sans-serif;font-size:12px;"
xml:space: "preserve"
content: Some text here
If I want that text to be dynamic instead then I can just change the content property to a dynamic expression:
content: =items.myStringItem.state
Thank you again. Now I understood that there are two ways to solve my issue. I will try both and figure out which fits my needs best. But two concluding questions:
@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?
@JustinG To be honest I’m a lttle bit confused about
xmlns: http://www.w3.org/2000/svg
why this has to be added?
Short answer:
You really don’t have to add it; it’s just good practice. Your widget svg will be fine without it.
Long answer:
It’s a standard addition to most svg files because it explicitly defines the xml namespace for all standard svg tags (the rules for what makes a tag an svg tag). Since you are using your svg strictly in a browser environment in this case, that namespace is redundant (browsers will include it by default). If you are interested in more detail you can find much information with a quick search for “xml namespaces”.
Hi,
Yes, that’s how it’s done now, instead of pixels there are percentages to make the widget responsive.
Many thanks for your replys. I will play little bit around with what I’ve learned
After a few days of experimenting, I found that it was easier and faster to use an SVG file, as I had already drawn it. However, I learned that SVG paths or other structures can also be added, especially if you want to create an animated or dynamic image. Ultimately, I use a mixture of both approaches.
Could you show how, (how´s your svg looking now) ?
Of course I opend a new topic. For further improvments 
: Animated SVG in Sitemap
