search

Mariusthvdb / custom-ui

Add templates and icon_color to Home Assistant UI
163 stars 30 forks source link

Doesn't install on Home Assistant (formally hassio) #2

Closed dave-sausages closed 4 years ago

dave-sausages commented 4 years ago

If you confirm this will work on Home Assistant then I'll document the steps I've taken and how no matter what is tried it just won't install.

Otherwise if it's only meant for Home Assistant Core, I'll try another way to get an icon to change colour based on state.

Mariusthvdb commented 4 years ago

That’s the wrong order.... Only if you post what you did can we confirm if it should work.

Follow what is posted and yes all should be well...

dave-sausages commented 4 years ago

Now that you've confirmed this JS version of custon-ui works on Home Assistant and not just Home Assistent Core, I'll detail my steps: :)

Home assistant version 0.110.4 running in Docker on a Raspberry pi4 with SSD.

step1: "Create a new folder under your resources folder. Suggestion: custom-ui" Can't find any folder on the Samba share called resources. The "frontend" step mentions "/local/lovelace/resources/custom-ui/custom-ui.js" can't find any folders called "local" or "lovelace either". Discover my mini-media-player-bundle.js plugin is in "/config/www/mini-media-player-bundle.js" and in the menu "configuration-lovelace dashboards-resources" that the mini media player is listed with the URL "/local/mini-media-player-bundle.js?v=1.6.0"

This leads me to create a folder in the www folder called "custom-ui" and I then put "custom-ui.js" in there. image

image

I then use the "modern way" of adding a resource in the UI and get this result:

image

After rebootting, crtl+F5ing lots, no matter what happens, custom-ui never shows in the developer tools - info menu

image

I can't check "In Inspector:" because I can't find that anywhere, or any reference online. It does show in the resources section, but I don't think means anything because you can put anything there.

image

acortelyou commented 4 years ago

I can confirm this works on Home Assistant 0.110.4, HassOS 4.8.

If you are struggling to get it installed I would recommend using HACS as it is more foolproof.

dave-sausages commented 4 years ago

I have HACS installed already, but can't find it in it. Can you provide any advice on how to use HACS to install it?

Mariusthvdb commented 4 years ago

@dave-sausages the questions you ask about folders and resources reflect some serious gap in basic HA architecture knowledge, and make me a bit hesitant to advise you to start customizing. Better read up first on how things work in HA.

Having said that, you've come a long way, and finally ended up with a correctly installed JS module so it seems.

I wonder have you made a customization yet that you'd expect to work? because when the resource list shows it is installed, it probably is.

some quick nudges:

resources is the folder your system finds the extra resources you load via the various methods. That can depend on your personal settings and naming too. HACS has its own way of adding those to the community folder.

if using yaml mode, you tell Lovelace where to find that folder. check the community eg here and of course basic core HA Lovelace documentation and here

local is the internal naming for referencing the 'www' folder in your /config/ folder

'inspector' is available in every browser, mostly right-clicking, and check console, to reveal a lot of technical info on everything happening in your browser/Home Assistant setup.

Please consume this and let us know if your custom-ui does the job

dave-sausages commented 4 years ago

I wonder have you made a customization yet that you'd expect to work? because when the resource list shows it is installed, it probably is.

I assume you're talking about the mini media player working? Yes it does. Custom-ui is not working (proof given in the screenshot of "developer tools - info" not containing Custom UI. And the resource list doesn't show Cutom-ui as being installed (screenshot of "look/no/validation" shows that list doesn't mean it's installed"

local is the internal naming for referencing the 'www' folder in your /config/ folder

Ah I see, so I should manual create the folders "lovelave" and "resources" in "www" to allow custom UI to be placed here: "/local/lovelace/resources/custom-ui/custom-ui.js"?

Mariusthvdb commented 4 years ago

I assume you're talking about the mini media player working?

No, I am asking you if you have made a customization..

Wonder what you'd expect custom-ui to do, if you don't understand what a customization is, nor having tried it.

about the folder: it all depends on your setup, other installs, UI or yaml mode, etc etc. First: read up on the basics as I suggested.

Did you test inspector yet?

dave-sausages commented 4 years ago

Wonder what you'd expect custom-ui to do, if you don't understand what a customization is, nor having tried it.

Yes I have made a customisation.

In customize.yaml In have sensor.pulse_width_sensor_yard: icon_color: '#FF3399' I thought I'd start simple and just turn an icon pink.

Did you test inspector yet?

Yeah I've always known it as element inspector, and your element inspector looks different hence the confusion. Couldn't see anything about Custom-ui.

More importantly though, are you saying that checking if custom-ui is shown in "developer tool -info" isn't a valid method? and if it isn't shown there, then that doesn't mean it isn't running? I've been using that as my method to test if custom-ui is running.

Mariusthvdb commented 4 years ago

continuing this in the community, closing here