Custom Widget: Switch-Dim-Color

Apps & Services HABPanel
,
1

This widget can do Switch, Dimming and Color picking all in the one space saving design.
Click on the tiny knob and the modal control appears allowing a change to be made.
Click on the colored dot and the colour picker opens up in a modal allowing a change to be made.
Click anywhere else and the item turns on or off.

Since the controls that you don’t want can be hidden, you can use this to still control Fans, power outlets or anything else you wish.

TIP: You can change the shadow to any colour you like so this feature could be used to have all lights as 1 colour and all power outlets coloured with a different shadow. The shaddow format config is used for this and a post below explains its use.

Using the ‘Plump Dark’ CSS

Dark
Dark704×338 25.4 KB

Using the ‘Plump White On’ CSS
WhiteOn

Widget Json code

Switch-Dim-Color.widget.json (6.9 KB)

For more info on what to do with the css files, see this thread…

1 Like
2

Wow really cool!

3

Just uploaded the json into the widget gallery so feel free to give it a try and I would love to see pics of what your panel looks like…

4

i forgot how to use these styles…
recap:

this style must be saved in /static/newstyle.css

:root {
/* Basic HABpanel styles */
margin: 20px;
--body-bg: rgb(15, 15, 15);
--box-bg: rgb(43, 45, 59, 0.7);
--body-color: #bdc0c5;
--primary-color: rgb(140, 156, 167);    
--header-bg: var(--body-bg);

and i have to add the link on the habpanel option under the “Theme” line.

but all this code?

.switch-glowing-on{
background-color: rgb(251, 251, 251, 0.9) !important;
color: black !important;
box-shadow: none !important;
}

.switch-glowing-off{
background-color: rgb(30, 30, 30, 0.1) !important;
}

.switch-glowing
.icon-tile-backdrop.colorize{
    filter: invert(70%) sepia(10%) hue-rotate(90deg) opacity(90%);

i’ve also imported the json file into widget but i think it won’t work correctly because css is missing of course.

sorry but i’ve forgot completely these things because i haven’t changed openhab settings from a long time :wink:

thanks lot!

5

How can I change the color of the shadow?

6

The widget has a config called shadow format.

Default is
0px 0px 6px 3px rgba(0, 95, 255,0.8)

No shadow is easy just enter the word none.

The rgba is what you want to play with, those four numbers are the red,green,blue values with the last number being the transparency amount. 0.8 is 80% solid and 20% see through.

You can use online color pickers to help you choose.

I went this way so you can change the shadow colour or any aspect of the shadow on groups of controls. You may want fans to be one colour and lights to be another.

Many Other ways you can play with the shadow are here:

https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

7

Thank! I am ashamed that I missed this, sorry :slight_smile:

1 Like
8

@matt1 no answer to me? :frowning:

9

See the first post again, it has been edited to make it easier.

10

New changes to the widget and the css files just uploaded and did some work to make the widget display better between large screens, tablets and mobile devices. Not perfect yet due to reusing of the basic widgets don’t allow % based resizing and also some don’t allow any resizing via css. Will look at it some more after moving to openhab 3.

11

finally i’ve tried everything and it’s almost perfect! just 3 questions:

is it possible to make your widget to look like the one on the left?

image

i mean move the item name (and make it in bold) a little bit high and aligned to left and also add the status of the item below the item name. also if is possible to increase the icon dimensions on the top left.

anyway, you did a fantastic job! next step is to make the widget for thermostats :wink:

12

You can easily do all those thing if you learn CSS, it would take you a few hours at the most. Have a look at the switch-glowing lines in the css files I provided and the absolute positions are what your after. The only things that would need a change to the widget are the icon size and the status, the rest are all possible with css tweaks. You can try the two css files to see how easy it is to create a new look. You can create a third.

@rubenfuser
Widget code is updated so now you can get it 100% how u want it to be with just CSS code.

13

yes i have almost finished to adapt your widget :wink: just one question, ihow can i remove transaprency from active/inactive buttons? i want solid white or solid black when button are ON or OFF…

thanks!

14

Replied in the other thread you asked the same question.

15

great work mate,how can i change the font size of the widget?I want the font size little bigger for my switches.

16

Google css and changing text size, 10 minutes and you should be a pro at doing it no need to edit widget it’s all easy via css.

17

i have spent almost an hour but i didnt find a way to change font size via css.I am interested to change font size only on your widget leaving everything else as it is.Thank you.

18

Edit widget code (not the css of the theme) abd look for “font-size” :wink:
Soon i will upload the “simplified version” of Skinah widget :wink:

19

tried to edit widget code,no reference for label’s “font-size”

20

Small snippet from the widget…

<span class="glow-switch-label-on"

So you can use the class to apply text change or the h5, both ways should work.

.glow-switch-label-on{
font-size: 150% !important;
}

.glow-switch-label-off{
font-size: 150% !important;
}

I dont know CSS very well but if that does not work, just have a play and then post what works when you figure it out.