Best Approach: Widget With SVG Thermostat Image and Values

I have designed a realistic-looking thermostat with a display and ± controls. I now want to know what is the best way to integrate the SVG and show the current temp and setpoint in the display. I also want to be able to in/decrease the temp via the ± controls.

I’ve created a custom widget and added the SVG as the background image. I’ve got the values showing over the image, but I’m not sure this is going to be very responsive. Is it possible to add statements directly into the SVG? Or is there even a better method?

I’d appreciate any pointers in the right direction.


I’ve done this for a couple of widgets and I’ve found with this that it’s just easiest to place oh-buttons over the action areas of the background image. Depending on the shape of the area, and how picky you are about exact matching it can take a little extra fiddling with css styling to get the button the correct shape, but it gives you the most control via the action parameters.

Hi everyone,

I solved my problem by switching to HabPanel and designing a custom widget following the principles explained here. It works great, just a pity this doesn’t work in the default OH3 UI. Or does it?

My thermostat now shows the current and setpoint temps and the two buttons let me increase or decrease the setpoint. Even got some nice mouse-over effects running on the buttons. My next task is to include the battery and window contact indicators.

This is what I have so far. My aim is to have a UI that looks as realistic as the physical thermostats.


This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.