Cutom widget from existing widget (Blinds)

Hello everyone. I am trying to create a custom widget for HABpanel that is basically two widget combined. I will explained my final goal first and then expose my first problem.

I cant now control my blinds with a slider for the vertical position and a knob for the orientation of the slats.

That’s OK but I would like to combine these two functions into one widget. I use the knob with a range between 90° and 180° because it is the way it physically works so it is really convenient to know how it is. The problem as you can see is that 75% of the space is wasted and it is complicated to manipulate on a touch device like a tablet.
On other this that I would like to achieve is making use of the ‘moving’ KNX object to disable the widget when the blind is moving.

The first thing I fail to achieve is to create a custom vertical slider. As soon as I put the vertical option to true the slider starts to behave strangely. My question is then, how I can get the code of existing widgets in HABpanel in order to have a starting point to work with?

Thank you !

You might want to look at other custom widgets that have been created. I used vertical sliders in my ecobee thermostat widget; You can download that from this site, import it into your HABpanel, and then look at the code directly. I had to do some stuff where I defined the height of the div that held the slider, otherwise the slider was basically tiny when I put it in vertical mode.

As for the code, I know there are some links in other threads, but I can’t seem to find them right now. Hopefully someone else can add more info.

1 Like

Thank you very much,

I managed to get this :

It is still quite dirty (with negative margins and things like this) but it start to resembles to what I need.


Hi @tony_ducrocq. I am doing right now exactly the same as you did and I am stuck at the same point.

Once I set the slider vertical to true it does very strange things.

Would you tell me please how to overcome this problem?


BR. Rob