andrey-git / home-assistant-custom-ui Goto Github PK
View Code? Open in Web Editor NEWCustom UI elements for https://home-assistant.io
Home Page: https://home-assistant.io
License: MIT License
Custom UI elements for https://home-assistant.io
Home Page: https://home-assistant.io
License: MIT License
Hello,
is there any possibility to add a margin between multiple badges? For instance that a badge name like "temperature" is not cut to "temperat...?
Hi,
I'm using the latest version of Home Assistant via Docker. I have it setup so that it will update everytime there is a new release via Watchtower. A new Docker container is created, but all configs still work as they are kept locally.
Is it possible to install this on a Docker container, without loosing it everytime Home Assistant is updated and a new container is created?
Thank you!
I like your design with the slider very much, but i have an issue to get it working
on/off works as expected, but using the slider is not working. i get following message:
17-04-20 20:08:40 DEBUG (MainThread) [homeassistant.components.websocket_api] WS 1843698608: Received {'service': 'turn_on', 'type': 'call_service', 'domain': 'light', 'id': 10, 'service_data': {'entity_id': 'light.hbdimmer36', 'undefined': 91}}
17-04-20 20:08:40 INFO (MainThread) [homeassistant.core] Bus:Handling <Event call_service[L]: service=turn_on, service_data=entity_id=light.hbdimmer36, undefined=91, domain=light, service_call_id=1978041424-1>
17-04-20 20:08:40 ERROR (MainThread) [homeassistant.core] Invalid service data for light.turn_on: extra keys not allowed @ data['undefined']. Got 91
17-04-20 20:08:40 INFO (MainThread) [homeassistant.core] Bus:Handling <Event service_executed[L]: service_call_id=1978041424-1>
a working event looks like this:
17-04-20 20:06:33 INFO (MainThread) [homeassistant.core] Bus:Handling <Event state_changed[L]: old_state=<state light.hbdimmer36=on; custom_ui_state_card=custom_light, friendly_name=HBdimmer36, id=HBdimmer36, brightness=255, proxy=rf, working=Yes, rssi=-60, supported_features=1, state_card_mode=break-slider, slider_theme=min=10, max=200, pin=True, off_when_min=True, show_last_changed=True @ 2017-04-20T20:06:31.050023+02:00>, new_state=<state light.hbdimmer36=on; custom_ui_state_card=custom_light, friendly_name=HBdimmer36, id=HBdimmer36, brightness=255, proxy=rf, working=No, rssi=-60, supported_features=1, state_card_mode=break-slider, slider_theme=min=10, max=200, pin=True, off_when_min=True, show_last_changed=True @ 2017-04-20T20:06:31.050023+02:00>, entity_id=light.hbdimmer36>
17-04-20 20:06:33 INFO (Thread-12) [pyhomematic.devicetypes.generic] HMGeneric.event: address=HBdimmer36:1, interface_id=homeassistant-rf, key=LEVEL_REAL, value=1.0
what i can see so far is, you are sending the brightness level to undefined: 'undefined': 91
Good day, installed 0.53 and followed the instructions for Custom UI but can't get the custom UI card in the panel. Any suggestions?
It would be cool if the function "confirmable controls" could also lock the sliders - not just the switches.
I'm often switching some of my lights on when trying to scroll, because I accidentally touched a slider.
Home Assistant 0.52.1
Custom UI 20170805
I get:
2017-09-01 17:30:50 ERROR (MainThread) [homeassistant.loader] Error loading custom_components.customizer. Make sure all dependencies are installed
Traceback (most recent call last):
File "/srv/homeassistant/lib/python3.4/site-packages/homeassistant/loader.py", line 142, in get_component
module = importlib.import_module(path)
File "/srv/homeassistant/lib/python3.4/importlib/__init__.py", line 109, in import_module
return _bootstrap._gcd_import(name[level:], package, level)
File "<frozen importlib._bootstrap>", line 2254, in _gcd_import
File "<frozen importlib._bootstrap>", line 2237, in _find_and_load
File "<frozen importlib._bootstrap>", line 2226, in _find_and_load_unlocked
File "<frozen importlib._bootstrap>", line 1200, in _load_unlocked
File "<frozen importlib._bootstrap>", line 1129, in _exec
File "<frozen importlib._bootstrap>", line 1471, in exec_module
File "<frozen importlib._bootstrap>", line 321, in _call_with_frames_removed
File "/home/homeassistant/.homeassistant/custom_components/customizer/__init__.py", line 7, in <module>
from homeassistant.components.frontend import (
ImportError: cannot import name 'add_extra_html_url'
2017-09-01 17:30:51 ERROR (MainThread) [homeassistant.loader] Unable to find component customizer
2017-09-01 17:30:51 ERROR (MainThread) [homeassistant.setup] Setup failed for customizer: Component not found.
Hello,
I don't want to spam your issues section, but it is possible to add support, that I can apply a theme to a badge?
I tried, but it is not applied to my badge.
Browser + Version:
CustomUI version:
Home Assistant release (hass --version
):
Problem-relevant configuration.yaml
entries:
kitchen:
name: Küche
view: no
entities:
- group.kitchen_windowshutter
kitchen_windowshutter:
view: no
entities:
- binary_sensor.climate_kitchen_windowshutter
or
kitchen:
name: Küche
view: no
entities:
- binary_sensor.climate_kitchen_windowshutter
Customize:
binary_sensor.climate_kitchen_windowshutter:
icon: mdi:glassdoor
friendly_name: Fenster
theme_template: >
if (entities['binary_sensor.climate_livingroom_windowshutter'].state === 'on') return 'yellow'; else return 'default';
extra_data_template: >
if (entities['binary_sensor.climate_livingroom_windowshutter'].state === 'off') return null; else return Seit (entities['sensor.climate_livingroom_windowshutter_openingtime'].state) Minuten offen;
state_card_mode: badges
group.kitchen_windowshutter:
icon: mdi:glassdoor
friendly_name: Fenster
theme_template: >
if (entities['binary_sensor.climate_livingroom_windowshutter'].state === 'on') return 'yellow'; else return 'default';
extra_data_template: >
if (entities['binary_sensor.climate_livingroom_windowshutter'].state === 'off') return null; else return Seit (entities['sensor.climate_livingroom_windowshutter_openingtime'].state) Minuten offen;
state_card_mode: badges
configuration.yaml
frontend:
extra_html_url:
- /local/custom_ui/state-card-media_player.html
- /local/custom_ui/state-card-custom-ui.html
- /local/custom_ui/state-card-custom_alarm.html
themes:
yellow:
label-badge-background-color: yellow
label-badge-text-color: yellow
Problem-relevant Home Assistant log entries:
no applicable log entries observed
Any errors from browser Javascript console:
Uncaught SyntaxError: Unexpected identifier
at new Function (<anonymous>)
at Object.computeTemplate (state-card-custom-ui.html:1)
at HTMLElement.computeExtra (state-card-custom-ui.html:1)
at k (frontend-6b0a95408d9ee869d0fe20c374077ed4.html:1)
at Object.d [as fn] (frontend-6b0a95408d9ee869d0fe20c374077ed4.html:1)
at a (frontend-6b0a95408d9ee869d0fe20c374077ed4.html:1)
at e (frontend-6b0a95408d9ee869d0fe20c374077ed4.html:1)
at u (frontend-6b0a95408d9ee869d0fe20c374077ed4.html:1)
at HTMLElement.value (frontend-6b0a95408d9ee869d0fe20c374077ed4.html:1)
at HTMLElement.value (frontend-6b0a95408d9ee869d0fe20c374077ed4.html:1)
Uncaught TypeError: Cannot read property 'customizer.customizer' of null
at Object.useCustomizer (state-card-custom-ui.html:1)
at Object.init (state-card-custom-ui.html:1)
at state-card-custom-ui.html:1
Replace the slider with buttons, current use being for a fan:
Low | Med | High
The current update script does not work on hass.io. Is there any chance that either the script (or hass.io) can be updated to allow it to work?
Currently this is the result:
Getting state-card-custom-ui.html
wget: can't execute 'ssl_helper': No such file or directory
wget: error getting response: Connection reset by peer
rm: can't remove 'state-card-custom-ui.html.tmp': No such file or directory
Download failed with error 1
Google suggests that the solution may possibly be adding:
RUN apk --no-cache add openssl
when creating the docker container.. But I will defer to smarter people to verify if that's the case.
For example, with a battery powered motion sensor I may want to have the last triggered time visible as additional data for most groups, but the battery level attribute when in the battery group.
Hello,
First of all, thanks for these custom controls, they worked great! I said worked because it seems that since 0.43.x they have no longer worked... any idea why?
cheers
Would it be possible to have template examples for states from another entity? I'm having some trouble getting the new syntax right.
For example, I was previously using "${state.sensor.office_energy_today_cost}" to display a dollar value.. What would the new syntax be?
I also noticed a change in behaviour for when I used an attribute of a light (effect) within the extra_data_template. Previously when the light was off it would show the time since state change (since effect was unavailable), and now it shows "undefined".
Browser version: Firefox - 56, Chrome - 61
CustomUI version: 20170927
Home Assistant release (hass --version
): 0.55.1
Problem-relevant configuration.yaml
entries:
group.living_room_lights:
friendly_name: Living Room Lights
icon: mdi:lightbulb
group:
group.living_room:
friendly_name: Lights
sensor.living_room__aeotec_luminance:
friendly_name: Living Room Light Level
state_card_mode: badges
group:
group.living_room:
friendly_name: Light Level
groups.yaml
:
Default View:
view: yes
icon: mdi:home
entities:
- group.living_room_lights
- group.default_view_sensors
Living Room:
view: yes
entities:
- group.living_room_sensors
- group.living_room_lights
Living Room Lights:
entities:
- switch.living_room__corner_switch
- switch.living_room__cabinet_switch
Living Room Sensors:
entities:
- binary_sensor.compound_living_room_occupancy
- sensor.living_room__aeotec_temperature
- sensor.living_room__philio_temperature
- sensor.living_room__aeotec_luminance
Any errors from browser Javascript console:
Unable to check <input pattern='[[pattern]]'> because the pattern is not a valid regexp: raw bracket is not allowed in regular expression with unicode flag blank
paper-drawer-panel is deprecated. Please use app-layout instead! frontend-2de1bde3b4a6c6c47dd95504fc098906.html-75.js:1
Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.[Learn More] group.living_room
Invalid chrome URI: /
Loaded CustomUI 20170927 state-card-custom-ui.html.js:1
The issue I am facing is that the context-aware attributes for groups seem to not always work. In particular it seems that elements that are nested directly in the group being used as a filter are not taking the context-aware aspects into account, while more deeply nested elements are.
In the "groups.yaml" above the first two groups define views in the interface. The second two groups that are then loaded into those two views. Groups or sensors/switches/... that are in one of the nested groups will take the context-aware aspects into account and as the configuration sample shows I use it to modify the friendly_name
. For some reason the same does not work for groups/sensors/switches/... that are included directly in the view groups. The "Living Room Light Levels" to "Light Levels" works, but the "Living Room Lights" to "Lights" one does not.
I have some screenshots, but for some reason cannot upload them here. Will keep trying.
Just a small remark.
Would be great if you could add a screenshot of the custom ui you created...
Sander.
I tried this:
group.verlichting_woonkamer:
friendly_name: Verlichting Woonkamer
friendly_names:
group.verlichting: Woonkamer
group.woonkamer: Verlichting
Which doesn't seem to work.
It does work (as expected) on lights within groups.
Not sure what I’m doing wrong. Can’t see anything in the error log either. The sliders are always at 0 and don’t change the brightness when I move them.
Here’s my config:
homeassistant:
customize_glob:
light.*:
custom_ui_state_card: custom-ui
state_card_mode: break-slider
stretch_slider: true
hide_control: false
show_last_changed: false
slider_theme:
min: 0
max: 255
pin: true
off_when_min: false
report_when_not_changed: false
Hello,
would it be possible to output a value by extra_data_template if the entity is displayed as a badge?
Just like:
extra_data_template: if (entities['binary_sensor.climate_livingroom_windowshutter'].state === 'off') return 'Closed'; else 'Opened';
Thanks in Advance!
I updated to 0.53 today and have empty state cards under Chrome desktop and mobile.
In order to have the state cards content, I need to
I have to do it each time I open home assistant
Because it isn't possible to do on mobile, I cannot have it work on mobile.
Firefox has no such issue.
Looks like a duplicate of #40
Browser + Version: Chrome 61
CustomUI version: 20170918
Home Assistant: 0.53.1
homeassistant:
customize_glob:
"*.*":
custom_ui_state_card: state-card-custom-ui
customizer:
custom_ui: local
Browser + Version:
Latest Chrome
CustomUI version:
Latest
Home Assistant release (hass --version
):
0.55
Problem-relevant configuration.yaml
entries:
Problem-relevant Home Assistant log entries:
Any errors from browser Javascript console:
Are dimmer switches even supported? I don't see any reference to what types of devices are supported. Reason I ask is I can only control lights. Not switches that are dimmable.
I am struggling to display a sensor in an extra_data_template.
This works:
homeassistant:
customize:
sensor.home_battery_load_watts:
friendly_name: test
extra_data_template: "test"
These do not:
extra_data_template: '{{ states.sensor.whizbangjr_amps.state }}'
extra_data_template: {{ states.sensor.whizbangjr_amps.state }}
Note: the bellow non working exemple works as a value_template elsewhere ....
extra_data_template: '{{ states.sensor.whizbangjr_amp.state|int }}'
extra_data_template: '{{ entities.sensor.whizbangjr_amp }}'
Note: The bellow exemple test won't execute as javascript but show the script literally in the UI "return 'test';"
extra_data_template: >
return 'test';
This won't work either:
extra_data_template: >
{{states.sensor.whizbangjr_amp}}A
Indeed test were made using latest version:
$ ./update.sh
Getting state-card-custom-ui.html
Getting state-card-custom-ui.html.gz
Updated to Custom UI '20170802'
Getting ha-panel-custom-ui.html
Getting ha-panel-custom-ui.html.gz
Updated Panel to '20170802'
Getting __init__.py
File up to date.
Getting services.yaml
File up to date.
Home Assistant will ship the gzip'd version of a file if it's available. All people need to do is gzip the file and save it as state-card-custom-ui.html.gz
and it will work 👍
If I restart hass and go to the ui the custom cards don't show(no entities) and in chrome debugger there are a lot of errors about not finding the html file in the custom_ui folder.
After force refresh (ctrl+f5) it works
i'm using the hosted version with folowing configuration
customize_glob:
light.*:
custom_ui_state_card: state-card-custom-ui
state_card_mode: break-slider-toggle
I am trying to customize the group of light so that each light has the following feature. But not able to..
group.all_lights:
custom_ui_state_card: state-card-custom-ui
show_last_changed: true
state_card_mode: break-slider-toggle
stretch_slider: true
theme: happy
slider_theme:
max: 200
min: 10
off_when_min: false
pin: true
report_when_not_changed: false
group.all_devices:
show_last_changed: true
This above code is from the customize.yaml file. Am I doing something wrong?
If I do it for one entiity, it work fines
Not an issue. Just a question/feature request.
With the new frontend theme option and the custom ui, it would be nice if we could template the color (or any other attribute) of some entities (badges, text, background etc.) depending on their value.
However, I think that is a lot harder to implement. Is there some work on this yet? I am thinking to start something.
Also it could be a nice addition if we could change the font type, weight, color, background color etc. of entities or/and state cards.
Thanks.
Some examples below (could apply for motion sensors, alarm, temperature etc.).
I've been trying to get badges working using option 2 as outlined in the documentation with no luck. Option 1 works:
customize_glob:
"*.*":
custom_ui_state_card: custom-ui
group.inner_group:
state_card_mode: badges
group:
inner_group:
entities:
- sensor.office_energy_period
- sensor.office_energy_current
- sensor.office_energy_power
- sensor.office_energy_voltage
- sensor.office_energy_factor
outer_group:
entities:
- group.inner_group
- sensor.office_energy_yesterday
- sensor.office_energy_yesterday_cost
- sensor.office_energy_today
- sensor.office_energy_today_cost
Resulting in:
But option 2 (if I am using it correctly) does not:
customize_glob:
"*.*":
custom_ui_state_card: custom-ui
group.inner_group:
state_card_mode: badges
badges_list:
- sensor.office_energy_period
- sensor.office_energy_current
- sensor.office_energy_power
- sensor.office_energy_voltage
- sensor.office_energy_factor
group:
inner_group:
entities:
- sensor.office_energy_period
- sensor.office_energy_current
- sensor.office_energy_power
- sensor.office_energy_voltage
- sensor.office_energy_factor
- sensor.office_energy_yesterday
- sensor.office_energy_yesterday_cost
- sensor.office_energy_today
- sensor.office_energy_today_cost
Results in:
I have a lot of existing groups that I would like to modify with badges so I was hoping that I could get the second option working.
Is there anything in my config that is incorrect?
P.S. I have no idea why the group in option 1 took on the context naming of group.office_energy. They both should have shown the full names for the entities.
Browser + Version:
Chrome, 62
CustomUI version:
2017-10-19
Home Assistant release (hass --version
):
0.56.2
Problem-relevant configuration.yaml
entries:
Everything else works OK (regarding themes and per entity themes). I can set a theme for all of them, however not per entity.
The variables below are ignored by Custom-UI. I didn't try but I am sure all the variables are ignored for the badges (badges can't be themed). Am I doing something wrong?
--label-badge-background-color: white;
--label-badge-text-color: rgb(76, 76, 76);
Sample configuration:
binary_sensor.door_window_sensor_158d0000f125f7:
state_card_mode: badges
templates:
theme: >
if (entity.state == 'on') return 'statuson'; else return 'default';
statuson:
label-badge-background-color: '#00cc66'
label-badge-text-color: rgb(76, 76, 76);
Problem-relevant Home Assistant log entries:
No errors in log.
Any errors from browser Javascript console:
See picture below.
Hello,
it is not possible to use state_card_mode: badges
for binary sensors? If I use it for a binary sensor it is not displayed as badge in a group.
Any hints?
Thanks!
I got everything setup properly and am able to change background and font color, but am a little unsure if it is possible to change the icon color without just changing the icon altogether? It seems like it should be since they are material design icons.
Thanks!
Hi,
The new context aware naming feature is something I have dreamed of for HA since I've started using it. Thank you!
I wanted to test it out in a package which would greatly benefit from this and it partly works. But for some reason it's inconsistent. These two screenshots should be illustrative of the problem:
And here is the package that I am having this problem with:
https://hastebin.com/zupuhupeno.coffeescript
Would greatly appreciate any help to get this fully working.
Regards,
Michal
Is there a way to get the extra data template to support sensor states as well as attributes?
I've come across man use cases where this would be ideal.
The badge can show either a state or an attribute.
When viewing a tab, Custom UI is working. Moving to a new tab, the custom ui does not work unless you manually refresh the page.
Resizing a browser window also removes custom ui.
Is it possible to change the displayed title of a group that is shown as a card within a view by applying a friendly_name to the group entity within the parent view's context? Changing the displayed name of a group that is included within another group is working properly, but I have been unable to change the displayed title of a group included directly in a view within the context of the view (changing the displayed title with a global "friendly_name" does work, however). I'm not sure if I am applying the customizations incorrectly, or if I am trying to do something not currently possible.
Thanks for any info you can provide. If my problem description doesn't make sense I can provide full configuration details.
Here is an example of our pain:
https://community.home-assistant.io/t/hide-cover-art-in-media-players/9826
https://community.home-assistant.io/t/tts-causes-media-player-album-art-bounce/19358
For starters just the ability to disable cover art would be INCREDIBLY useful.
Regards,
Michal
Is it possible to get this working in hass.io ? Perhaps has a add-on?
I have a number of lights which comprise of multiple bulbs such as this:
Umm.. Don't know why it rotated 90 degrees.. Imagine them hanging off the ceiling rather than a wall :P
Is there any possibility of a light group dimming custom control that works in the same manner as the individual light controls do?
While I understand why attributes may be the only option today, example where other entities makes sense:
sensor.dark_sky_temperature:
friendly_name: Currently
custom_ui_state_card: custom-ui
extra_data_template: "{sensor.dark_sky_apparent_temperature}"
I can then have one line with Temperature - a 'Currently' with a 'Feels Like' as Extra Data.
This would be extremely useful for all sorts of sensors (especially motion sensors).
Would it be possible to add something like this? Maybe not exactly the same, but some way to allow me to override the name of an entity. Even if I had to run it across a regex or something would be fine.
https://community.home-assistant.io/t/group-specific-friendly-name/12816/6
Updated to 0.51.1 and the WemoInsight switch did not appear correctly:
I copied the latest files today and here's the configuration of the switch:
switch.wemoinsight:
custom_ui_state_card: custom-ui
extra_badge:
entity_id: sensor.wemopowerused # Will take precedence over attribute and unit below.
attribute: power_consumption
unit: W
blacklist_states: 0
This no longer works for me since HA 0.53.0
I ran the update.sh script to get the latest files.
Then i changed in my config from
custom_ui_state_card: custom-ui
to
custom_ui_state_card: custom-ui-state-card
and i added this to my configuration.yaml
frontend:
extra_html_url:
- /local/custom_ui/state-card-custom-ui.html
This just results in all my cards being empty, no entities shown.
Am i doing something wrong or is it broken?
These custom UI elements are fantastic and thank you very much for them! I hope you create more custom ui elements.
I've run into a couple of problems:
Tested in both Safari and Chrome on macOS and in Edge on Windows 10.
I'm trying to use custom-ui in order to show some attributes with spaces but I'm unable to do it.
I've opened an issue with HA but they redirected me here :)
It could be possible for custom-ui to support attributes with spaces?
Some new frontend classes where added in 0.51 (e.g. background color state card - paper-card-background-color
.
Some other work (e.g. paper-item-icon-color
).
Maybe it is just me but I can't get something similar to the picture below (with theme_template applying a background color to a single entity).
I can work on it, but I would need a start point. Sadly, I don't have the time these days to understand the code. Thanks.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.