you dont need the
bits anymore, they are no longer supported like that, please read up on the doc about only needing the custom_ui resource now.
the error in inspector is somewhat unexpected, because in the only customization you posted no ‘<’ is used. Do you have other customizations set elsewhere.
for readability please write as follows:
templates:
icon: >
if (state == 'Open') return 'mdi:television';
return 'mdi:television-off';
icon_color: >
if (state == 'unavailable') return 'rgb(251,210,41)';
if (state == 'Closed') return 'rgb(193,193,193)';
return 'rgb(54,95,140)';
and yes, custom_ui still works, even on HA 1.0b0
can you check and see the resource mentioned on the config/info page and in inspector?
rockas
December 4, 2020, 7:07pm
105
What I can see on config/info it’s image below, cannot find information similar to post above., unless not seeing in right place, sorry, not yet an expert on HA, still getting more knowledge in daily basis.
Below you can see my home lovelace config, believe it’s the only template had configured.
ui-lovelace.yaml
title: Fofos Home
resources:
- type: module
url: /local/plugins/slider-entity-row.js?v=1
- type: module
url: /local/community/lovelace-slider-entity-row/slider-entity-row.js
- type: module
url: /local/custom-lovelace/weather-card/weather-card.js
- type: module
url: /local/community/mini-media-player/mini-media-player-bundle.js?v=1.11.0
- type: module
url: /local/animated-background/animated-background.js
- type: module
url: /local/community/mini-graph-card/mini-graph-card-bundle.js?v=0.9.4
- type: module
url: /local/community/vertical-stack-in-card/vertical-stack-in-card.js?v=0.3.2
- url: /local/plugins/card-mod.js?v=1
type: module
- url: /local/custom-ui/custom-ui.js?v=20201120 #change this v-number on each update
type: module
animated_background:
default_url: >-
/community_plugin/lovelace-animated-background/background-animations/sunny.html
entity: weather.dark_sky
state_url:
sunny: >-
/community_plugin/lovelace-animated-background/background-animations/sunny.html
partlycloudy: >-
/community_plugin/lovelace-animated-background/background-animations/cloudy.html
cloudy: >-
/community_plugin/lovelace-animated-background/background-animations/cloudy.html
mostlycloudy: >-
/community_plugin/lovelace-animated-background/background-animations/mostlycloudy.html
clear-night: >-
/community_plugin/lovelace-animated-background/background-animations/night.html
fog: >-
/community_plugin/lovelace-animated-background/background-animations/fog.html
background: var(--background-image)
#### background: center / cover no-repeat url("/background.png") fixed
views:
- path: default_view
title: Home
icon: 'mdi:home'
badges:
- entity: binary_sensor.updater
- entity: person.valter_cunha
- entity: sun.sun
cards:
- entities:
- light.sala_de_jantar
show_header_toggle: true
title: Dining Room
type: entities
- entities:
- entity: light.sala_de_estar_canto
- entity: light.sala_de_estar_mesa
- entity: switch.shelly1_sala_de_estar_luz_tecto
- entity: switch.shelly1_sala_de_estar_luzes_laterais
- entity: cover.sala_de_estar_estores
icon: 'mdi:blinds'
name: Sala de Estar - Estores
- entity: cover.sala_de_estar_estores
full_row: true
type: 'custom:slider-entity-row'
show_header_toggle: true
title: Living Room
type: entities
- entities:
- entity: light.osram
- entity: light.on_off_plug_1
- entity: light.on_off_plug_2
title: Power Socket
type: entities
- entity: weather.home_2
type: weather-forecast
- entities:
- entity: cover.garagem_basculante
show_header_toggle: false
title: Garagem
type: entities
- entity: light.sala_de_estar_canto
type: light
- entities:
- entity: switch.sonoff_100092664c
- entity: switch.sonoff_1000926eeb
- entity: switch.sonoff_100092704f
- entity: binary_sensor.window_door_sensor
- entity: sensor.window_door_sensor_battery_level
- entity: cover.sala_de_estar_estores
show_header_toggle: true
title: Test
type: entities
- entities:
- entity: script.turn_off_movies_activity
- entity: script.turn_on_movies_activity
- entity: script.turn_on_tv_activity
- entity: script.turn_off_tv_activity
show_header_toggle: false
title: Harmony Hub
type: entities
- entities:
- entity: cover.sala_de_estar_estores
icon: 'mdi:blinds'
name: Sala de Estart - Estores
- entity: cover.sala_de_estar_estores
full_row: true
type: 'custom:slider-entity-row'
show_header_toggle: false
title: Teste Slider Estores
type: entities
- current: true
details: true
entity: weather.home_2
forecast: true
icons: /local/custom-lovelace/weather-card/icons/
type: 'custom:weather-card'
but again, sorry for stupid question, since haven’t started on templates yet, my goal for now is simple, apply to all door sensors the same template, whenever status is either open, closed or unavailable, icon and color changes.
The code you shared shall be added on configuration.yaml ?
any help guidance on first putting custom-ui working and then setting a few examples, and I good to proceed on my onw.
Cheers
2 thing need to be correct:
the install should be fine, unless you have the file in an other folder in your /config folder. can you show where you have it stored? and please show us a screenshot of the inspector console, that shows all custom cards, so we can check.
the customization should be in the configuration.yaml, depending on the organization of your files.
homeassistant:
customize:
sensor.door_1:
templates:
icon:
icon_color:
or if you want it for all doors:
homeassistant:
customize_glob:
sensor.door_*:
templates:
icon:
icon_color:
rockas
December 5, 2020, 12:35pm
107
Hi @Mariusthvdb , thanks for prompt response.
My HA setup is on Dockers with Hassio, here config path is hass.io\homeassistant , hence they’re stored within config/www/custom-ui
created a new customize-yaml and customize_glob.yaml which were included in configuration.yaml
configuration.yaml
# Configure a default setup of Home Assistant (frontend, api, etc)
default_config:
homeassistant:
####################################################
# #
# Customize #
# #
####################################################
customize_glob: !include customize_glob.yaml
customize: !include customize.yaml
customize_domain: !include customize_domain.yaml
# Uncomment this if you are using SSL/TLS, running in Docker container, etc.
# http:
# base_url: example.duckdns.org:8123
# Text to speech
tts:
- platform: google_translate
group: !include groups.yaml
automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml
sensor: !include sensor.yaml
binary_sensor: !include binary_sensor.yaml
#lovelace: !include lovelace.yaml
cover: !include cover.yaml
# include lovelace YAML
#lovelace:
# mode: yaml
# Enables pythonn scripts
python_script:
# Enables the Frontend
frontend:
themes: !include_dir_merge_named themes
extra_module_url:
- /local/custom-ui/custom-ui.js
customize.yaml
binary_sensor.openclose_8:
friendly_name: Kitchen Door Sensor
templates:
icon: if (state == 'Open') return 'mdi:leak-off';
if (state == 'Closed') return 'mdi:leak';
return 'mdi:close-circle-outline';
icon_color: if (state == 'unavailable') return 'rgb(251,210,41)';
if (state == 'Closed') return 'rgb(193,193,193)';
return 'rgb(54,95,140)';
customize_glob.yaml
binary_sensor.openclose*:
templates:
icon: >
if (state == 'Open') return 'mdi:leak-off';
if (state == 'Closed') return 'mdi:leak';
return 'mdi:close-circle-outline';
icon_color: >
if (state == 'unavailable') return 'rgb(251,210,41)';
if (state == 'Closed') return 'rgb(193,193,193)';
return 'rgb(54,95,140)';
Here’s inspector snip with all custom cards. Sensor I’m testing configuration is Kitchen Door Sensor
What am I missing here?
please read up on installing the resource, what you do here is no longer supported.lovelace resources section
# https://github.com/Mariusthvdb/custom-ui
- url: /local/lovelace/resources/custom-ui/custom-ui.js?v=20201120
type: module
also, are you sure the binary has state Open? always check in the developer-tools/state
it might well be that Open/Close is displayed (because of the use of device_class) but the state in fact is on/off (as with most binary_sensors)
rockas
December 5, 2020, 2:09pm
109
Mariusthvdb:
custom-ui.js?v=20201120
Removed from frontend section within congiguration.yaml
extra_module_url:
- /local/custom-ui/custom-ui.js
Already had on ui-lovelace.yaml below code for ressources
resources:
- type: module
url: /local/community/lovelace-slider-entity-row/slider-entity-row.js
- type: module
url: /local/custom-lovelace/weather-card/weather-card.js
- type: module
url: /local/community/mini-media-player/mini-media-player-bundle.js?v=1.11.0
- type: module
url: /local/community/mini-graph-card/mini-graph-card-bundle.js?v=0.9.4
- type: module
url: /local/community/vertical-stack-in-card/vertical-stack-in-card.js?v=0.3.2
- type: module
url: /local/plugins/card-mod.js?v=1
- type: module
url: /local/custom-ui/custom-ui.js?v=20201120 #change this v-number on each update
You were right about sensor state, it’s on/off and not Open/Closed updated to code below on customize.yaml
binary_sensor.openclose_8:
friendly_name: Kitchen Door Sensor
templates:
icon: if (state == 'on') return 'mdi:leak-off';
if (state == 'off') return 'mdi:leak';
return 'mdi:close-circle-outline';
icon_color: if (state == 'unavailable') return 'rgb(251,210,41)';
if (state == 'off') return 'rgb(193,193,193)';
return 'rgb(54,95,140)';
after HA restart still doesn’t load custom-ui neither changes icon and icon color.
One more test: to see if you correctly downloaded the file, please show a screenshot of it in the browser, and have it show the file size and path
rockas
December 6, 2020, 11:37am
111
From your repo…
if I copy code and paste into a custom_test.js file size is much smaller.
Additionally, when looking at inspector, notice that can see sources from all resources but not when choosing custom-ui shows a completely different input.
Other ressources …
now pressing custom-ui ressource …Opens a new tab with some code that seems not being js content.
Not sure if it helps this additionally info.
When copying from a GitHub file, you should always use the Raw button in the top right menu of the repo:
Then do a select all, copy, and paste it in your local custom_ui.js file, replacing everything that’s in there.
But, to make things easier, I’ve made Releases available, so you can just go to https://github.com/Mariusthvdb/custom-ui/releases/tag/20201120
and click the custom_ui.,js file to download it correctly. Should be 116 kb…
rockas
December 7, 2020, 11:20am
113
Thank you so much @Mariusthvdb
Still not working though
In summary, here’s what I’ve after 2 tentative, one where copied raw code and created a file custom-ui.js and another where just downloaded you content release.
Doc is quite simple
file is on right place and bellow added on ui-lovelace.yaml
ressources:
- type: module
url: /local/custom-ui/custom-ui.js?v=20201120 #change this v-number on each update
however shows a different error on top (highlighted)
rockas:
ressources:
must be
resources:
as for the file itself, tbh, I dont understand what you are doing there. If the screenshot is showing the content of the file, it is completely wrong:
this is the top of the file:
I guess you didn’t follow the suggestion In posted above on the releases page?
rockas
December 7, 2020, 1:27pm
115
was a type error since didn’t paste here but wrote it, it’s in fact resources:
here’s my custom-ui.js top code
can’t explain why is showing something different on Inspector.
rockas
December 7, 2020, 1:45pm
116
Just found out that code shown by Inspsctor comes from custom_components/customizer/services.yaml required to installed from original custom-ui Andrey-Git
Believe can be removed based on your repo, correct?
rockas
December 7, 2020, 2:10pm
118
I’ve removed customizer folder, but somehow it still got that file services.yaml code
Have same experience on Chrome and other browser
rockas
December 7, 2020, 2:36pm
119
Seems cache, now in incognito browser tab looks good
It almost always has to do with cache…
Great. So now you should be good to go customizing
