New widgets: input slider(horizontal and vertical), input select and light with brightness

Darbos · September 14, 2017, 12:37am

lol its beautiful keep up the good work man, wish i could be of more help

mmmmmtasty · September 14, 2017, 8:07pm

This is amazing! I’ve got everything working but noticed a few things.

I had to remove a couple of lines from baseselect.css (in the section.widget-baseselect-{{id}} .styled-select) so that the slider renders in the middle of a smaller widget

position: absolute;
top: 45px;
height: 29px;

The icon on the light_with_brightness doesn’t seem to show. I’m not using any custom skin and even added the icon options which still didn’t help.

kitchen_light:
widget_type: light_with_brightness
entity: light.kitchen
icon_style_active: lightbulb
icon_style_inactive: lightbulb-on

ReneTode · September 14, 2017, 8:49pm

you could also edit the css in the dashboard itselve by setting the css there
for your light_with_brightness there are a few options:
a) in the default css edit the variables.yaml and add the styles there like

light_with_brightness_icon_on: mdi-lightbulb
light_with_brightness_icon_off: mdi-lightbulb
light_with_brightness_title_style: $style_title
light_with_brightness_title2_style: $style_title2
light_with_brightness_slider_style: ""
light_with_brightness_widget_style: $background_style
light_with_brightness_icon_style_active: $style_active
light_with_brightness_icon_style_inactive: $style_inactive

b) in the dashboard place the icon for on and of in icon_on and icon_off (and not the active and inactive style) like

kitchen_light:
  widget_type: light_with_brightness
  entity: light.kitchen
  icon_on: lightbulb
  icon_off: lightbulb-on
  icon_style_active: "color: yellow"
  icon_style_inactive: "color: gray"

mmmmmtasty · September 15, 2017, 12:13pm

Thanks for the quick response!

I want to try and do everything through configuration in the dashboard rather than editing the underlying files so that I don’t have any issues with future updates.

you could also edit the css in the dashboard itselve by setting the css there

Do you mean that I would use the “widget_style:” tag in the dashboard configuration? Do you have any other pointers as I don’t want to be changing the CSS of the widget itself, but one of the components of it (the slider). I don’t know how to do that

b) in the dashboard place the icon for on and of in icon_on and icon_off (and not the active and inactive style) like

I like this idea the best, again because it only involves updating the dashboard definitions - I’ll give it a go later.

ReneTode · September 15, 2017, 12:20pm

like all widgets that come with the dashboard i have created the same options to use css in the dashboard or on skin level.

in a skin you need to use these variables to set the css:

input_select_title_style: $style_title
input_select_title2_style: $style_title2
input_select_widget_style: $background_style
input_select_select_style: ""

new_input_slider_title_style: $style_title
new_input_slider_title2_style: $style_title2
new_input_slider_minvalue_style: $style_title
new_input_slider_maxvalue_style: $style_title
new_input_slider_value_style: $style_title
new_input_slider_slider_style: ""
new_input_slider_widget_style: $background_style

vertical_input_slider_title_style: $style_title
vertical_input_slider_title2_style: $style_title2
vertical_input_slider_minvalue_style: $style_title
vertical_input_slider_maxvalue_style: $style_title
vertical_input_slider_value_style: $style_title
vertical_input_slider_slider_style: ""
vertical_input_slider_widget_style: $background_style

light_with_brightness_icon_on: mdi-lightbulb
light_with_brightness_icon_off: mdi-lightbulb
light_with_brightness_title_style: $style_title
light_with_brightness_title2_style: $style_title2
light_with_brightness_slider_style: ""
light_with_brightness_widget_style: $background_style
light_with_brightness_icon_style_active: $style_active
light_with_brightness_icon_style_inactive: $style_inactive

radial_widget_style: $background_style

thermo_widget_style: $background_style

at the place from the $type variables you can use any valid css
in a dashboard the variables are the same only without the widgettype.

so in a dashboard you can use:

select_style: “any css”
widget_style: “any_css”
slider_style: “any css”
minvalue_style: “any css”

etc.

and about b) thats also for all dashboard widgets containing an icon

mmmmmtasty · September 16, 2017, 2:06pm

This is definitely the best option - override the CSS for only the elements that need it. Unfortunately it doesn’t work as setting “select_style” changes the CSS for .styled-select>select when I need to instead change the CSS for .styled-select. It seems I can only get that to change by editing the widget CSS which then sets it for all instances of the widget.

I need to set the CSS for the parent div of the select, not the select itself… if that makes sense?

mmmmmtasty · September 16, 2017, 2:32pm

EDIT: I missed a bit which I found immediately after posting this - would you consider adding these changes to your widget?

I updated the following:

custom_widgets/baseselect/baseselect.html:

<div class="styled-select" data-bind="attr:{style: select_parent_style}">

custom_css//variables.yaml

input_select_select_parent_style: ""

custom_widgets/input_select.yaml:

select_parent_style: $input_select_select_parent_style

dashboards/Lights.dash

kitchen_light_mode:
     widget_type: input_select
     entity: input_select.kitchen_light_mode
     select_parent_style: "position: unset"

ReneTode · September 16, 2017, 2:37pm

my mistake.
in the select you can use:

selectcontainer_style: “any_css”

that will be added shortly.
and andrew has himself commited to add the widgets to AD in a short while, so then it will be changed.

yeah you are close:

html:

<div class="slidercontainer" data-bind="attr:{style: slidercontainer_style}">

in the new_input_slider.yaml by static_css
slidercontaIner_style: $new_input_slider_container_style

in the variables.yaml:
new_input_slider_container_style: “”

sorry i had my head wrong and thought you wanted the slider. and i thought i had it already in the select.
i had but not on my github
all widgettypes will have this in the release.

mmmmmtasty · September 16, 2017, 2:42pm

Amazing stuff - thanks so much for your help. I’m happy you forgot to commit it because it gave me the motivation to work through how the widgets are put together - I’ve got some ideas for a few I’d like to make myself!

AJStubbsy · October 26, 2017, 8:41pm

Hi @ReneTode, I’m having difficulty controlling a HA input_number component through HADashboard. The slider is not showing on my dashboard (widget_type: input_number). Is your new_input_slider widget compatible with an input_number entity id from hass.io?

Thanks

ReneTode · October 26, 2017, 10:43pm

nope sorry.
my input_slider is still an input_slider and only compatible with hass 0.54 and lower.

and you are using hassio so you probably run an old version from appdaemon which also only supports older hass versions.
on the forum there is a new hassio addon which gives appdaemon version 2.1.10
that one supports input_number (but the included style)

my version will only be for hass 0.55 when i go to hass 0.55 or higher or when it is included in appdaemon in the near future.

it can be adapted though. by changing input_slider to input_number in the new_input_slider.yaml

AJStubbsy · October 27, 2017, 12:03pm

OK, thanks very much for the information. I am running the 2.1.10 version of appdaemon, so it is correctly displaying the input_number value from hass (after 4 days of trying to get the dash back up with hassio, it was hard to wipe the grin off my face when I finally got it working!). I just don’t have a slider visible to change the values.

I’ll keep scouring the forums to sort this one. All the very best.

ReneTode · October 27, 2017, 12:33pm

with AD 2.1.10 you can use widget type input_number (in the docs still called input slider @aimc )
thats the one with the + and - in the corners.

and my custom widgets can be used when you make the minor changes.

AJStubbsy · October 28, 2017, 8:12am

I’ll have a pay about with the minor changes then, to see if that’s the reason why I can’t change the values. There’s no + or - showing and the background of the widget is grey, even though the style is set to be slightly transparent, so maybe it’s a visual problem causing the error. I am using input_number for the widget type both in hass and hadash. I’ll have a look at your custom widgets for inspiration.
Thanks

ReneTode · October 28, 2017, 11:15am

also here sorry, my bad.
the minor change also involves that all input_number in the skins need to be changed.
default skins are not updated at this moment causing your problem.

DrJeff · November 29, 2017, 5:57pm

Has this been rolled into the main appdaemon yet?

Or do we need to manually add still?

never mind I see custom folders

Twit · December 9, 2017, 1:48pm

Just want to say thanks for your awesome gauges, I’ve been playing around with the radial ones.

Thanks

Simon

ReneTode · December 9, 2017, 1:58pm

very nice, thanks for sharing.

TehRobot · December 10, 2017, 12:52pm

Hey ReneTode,

Any chance you can help me out I tried changing the input_slider to input_number to work with the latest version of Hass. Widget is loading but values aren’t being sent back to adjust the light.

post_service:
service: input_number/select_value < is this the correct line to change?

ReneTode · December 10, 2017, 4:43pm

line is correct but if i m not mistaken they have changed the service to set_value, so the line should be:

service: input_number/set_value