Custom widgets in HADashboard

Third party integrations
1

Trying to use custom widgets in HADashboard, but having some trouble. I’ve added both the custom_widgets and custom_css folders to my main HA conf folder. When I attempt to use a custom widget with the following:

main_living_room_light:
    widget_type: light_with_brightness
    title: Main Living Room Light
    entity: light.main_living_room_light   
    state_text: 1
    state_map:
      "on": 'On'
      "off": 'Off'
    icon_on: mdi-lightbulb-on-outline
    icon_off: mdi-lightbulb-outline
    widget_style: "border-radius: 0px; background: #182938;"

The front end returns: Unable to find widget type ‘light_with_brightness’

I’m sure this is user error, but I can’t trace it. Can someone help me out?

2

First question: What version of AppDaemon are you using?

3

That would be a good place to start. 0.4.0. Updating now.

4

That sounds like the HASS.io plug-in version, AppDaemon has its version on the log, but an upgrade might help as the Custom widget support is relatively recent

5

Oh, you’re right. That was the add on.

6

Was running AppDaemon2 will update to 3 now. Found another post about this same topic. To clarify - should the custom_widgets folder be placed in the root /config of HA or in the /config/appdaemon folder?

7

I don’t know, I’m not a hass.io expert - it should be the same directory your AppDaemon.yaml is in

8

Thanks, aimc. I’m getting really confused here though. Hopefully someone can help me track down what I’m doing wrong.

  • I installed AppDaemon3 from the hassio-community repository.
  • Connected to my HADashboard
  • Placed custom_css and custom_widgets folder in the main /config directory (which I found mentioned somewhere else) Edit - read further and saw they need to be in the same directory as AppDaemon.yaml just like you mentioned. Working on doing a clean install of AppDaemon3 and retesting
  • Created a quick dashboard with a single light.
  • Still received the ‘unable to find widget type’ error

**2nd edit.

Did a full reinstall of AppDaemon3. Got to the Hello.dash dashboard and it looked as expected (dark background, single item on the screen) and then I went to add a single slider to this and the refreshed the page to this:

43%20PM

Removing the new slider and refreshing again results in:

39%20PM

I can’t seem to get it back to how it looked before. I’m sure this is a configuration issue, but I can’t seem to figure out where I’ve messed up.

**3rd Edit

I can get the widgets to appear correctly when adding ?skin=waterdrops or ?skin=lcars to the url. So I’m guessing this all has something to do with me not correctly changing the default css by editing variables.yaml. Unfortunately, I don’t see where to do that, but I’m glad to have made some progress here.

9

its hidden somewhere, and no one wants to tell us where it is, like a CIA secret. The HASSIO team made one route (all with addons), that appdaemon developer did not like, and seems to me they do not like to talk to each other.

In the middle us users, with little to none competencies, left alone.

I found something here, accessing as ROOT, NOT in HASSIO container

root@ubuntu:/home/claudio# find / -iname ‘variables.yaml’
/var/lib/docker/overlay2/ed948febcd69d2ea087cede81b34b9549d96ba3d608cdebeb78b6c8 3bac00105/merged/usr/lib/python3.6/site-packages/appdaemon/assets/css/glassic/va riables.yaml

but have no idea how to access the file

10

some advancement yo umay want to do

docker ps

it gives you a list with docker available, get the docker ID of appdaemon (in my case 162xxxxc58a )
then run

docker exec -it 162xxxxc58a bash

now you are inside and can do

cd /usr/lib/python3.6/site-packages/appdaemon/assets/css/glassic

now you should be in, but nano is not working, vi yes

vi variables.yaml
11

it would be better if we could put css and custom_css in the same appdaemon directory, also in HASSIO and avoid all the trouble o going inside the docker

I do not know if this is possible @aimc

12

Not sure what you are talking about - you can add custom widgets just fine in hass.io by placing the directories in the same place as the appdaemon.yaml file. There is no need whatsoever to go inside the dicker image if you have a late enough version of AppDaemon running.

That’s exactly how it works now.

Check the docs:

http://appdaemon.readthedocs.io/en/latest/WIDGETDEV.html#creating-custom-widgets

13

.

custom_widget yes, but not custom_css So I understood at least.

Everybody is saying I have to modify custom_css/variables.yaml, which is NOT to find in a HASSIO installation.

I would like, if possible to be able to modify variables.yaml having it in the same folder where the other appdaemon files are, which is NOT possible in HASSIO installation

14

http://appdaemon.readthedocs.io/en/latest/DASHBOARD_CREATION.html#skin-development

15

can I do this in the directory where all the other appdaemon files are (in a a HASSIO instalaltion)?

16

Yes, that will work fine.

17

I also think you are making some unwarranted assumptions here - now @Frenk is running the official AD addon for hass.io, we talk a lot.

Ultimately my plan for hass.io is to embed AD in hass so it’s even easier to configure. For that reason I am not wasting cycles working on hass.io addons - I only have so much time, remember, All hass developers are doing this in their spare time for free - we have to make the best possible use of that time.

1 Like
18

that will be great!, thanks

19

@czeknere
if you do get it to work right with custom skins but not with the default skin its because variables need to be added to the default skin.
the default skin is installed in the docker.
it should be in the docker in this dir
/usr/lib/python3.6/site-packages/appdaemon/assets/css/default/variables.yaml
the vars that need to be added to the variables.yaml are probably also provided at the github.

1 Like
20

Thanks guys,

I think what was throwing me off was this:

important! you need to use my custom skin waterdrops (to be found in custom css) or edit variables.yaml in your own skin or the default skin.
the lines to add to the variables.yaml can be found on this github in custom_css/default/variables.yaml

I read that as “take what’s in the /custom_css/default/variables.yaml file and place it into your own variables.yaml file”. But I think I’m realizing now that I have to place my own css into dashboard.css file and my own values into the /custom_css/default/variables.yaml file. I thought the ‘default’ view was a bit more out of the box, but it seems it will require more work to build the way I want. Which is not a big deal, just not what I was expecting.

Sure enough, once I added a dashboard.css file to the /custom_css/default folder it began to render as expected.

Thanks for all the help here, definitely user error as expected.

1 Like