That’s a great point, I easily could condense the Booleans and template sensor down to a single input select.
Makes it a little easier to maintain 
How did you manage to get the doors/motion details like this?
1 Like
Just some template sensors. So motion for example:
motion_summary:
value_template: >
{%-for state in states.binary_sensor
if(state.attributes.device_class=="motion" and state.state=="on")-%}
{%-if loop.last-%}
{%-if loop.index > 0-%}
{%-for state in states.binary_sensor if(state.attributes.device_class=="motion" and state.state =="on")-%}
{{state.name}}{%-if not loop.last -%}{%-if(loop.index+1==loop.length)%} & {%else%}, {%endif-%}{%-else%} active{%endif-%}
{%-endfor-%}
{%-endif-%}
{%-endif-%}
{%-else-%}
all clear
{%-endfor-%}
icon_template: >
{%-for state in states.binary_sensor
if(state.attributes.device_class=="motion" and state.state=="on")-%}
{%-if loop.last-%}
{%-if loop.index > 0-%}
mdi:alert
{%-endif-%}
{%-endif-%}
{%-else-%}
mdi:check
{%-endfor-%}
4 Likes
Any way to get this and retain the new features that have been added to custom-ui card? Like the group naming? Maybe andrey needs a way to plug into his overrides so the wheel doesn’t need to be recreated?
With the new release 20170903 my CustomUI supports specifying other HTML elements as by using state_card_custom_ui_secondary attribute.
I’ve made a custom button for my TV Volume if anyone is interested… I have the custom ui in one file and its very simple. Big thanks to @Airpal and @kylerw for their inital examples!
It looks like this.
And
This is the code which is in a file called ‘state-card-custom_volume.html’
<dom-module id="state-card-custom_volume">
<template>
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<style>
:host {
line-height: 1.5;
}
paper-button {
min-width: 60px;
background-color:#f3f3f3
}
</style>
<div class='horizontal justified layout'>
<state-info state-obj="[[stateObj]]"></state-info>
<paper-button-group>
<paper-button on-tap="btntap2" on-down="btndown2" on-up="btnup2"><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#848484" d="M3,9H7L12,4V20L7,15H3V9M14,11H22V13H14V11Z" /></svg></paper-button>
<paper-button on-tap="btntap1" on-down="btndown1" on-up="btnup1"><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#848484" d="M3,9H7L12,4V20L7,15H3V9M14,11H17V8H19V11H22V13H19V16H17V13H14V11Z" /></svg></paper-button>
</paper-button-group>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'state-card-custom_volume',
properties: {
hass: {
type: Object,
},
stateObj: {
type: Object,
},
},
btndown1: function (ev) {
this.setVol('tvvolumeup', ev);
},
btndown2: function (ev) {
this.setVol('tvvolumedown', ev);
},
btnup1: function (ev) {
this.setVol('tvvolumeup', ev);
},
btnup2: function (ev) {
this.setVol('tvvolumedown', ev);
},
btntap1: function (ev) {
this.setVol('tvvolumeup', ev);
},
btntap2: function (ev) {
this.setVol('tvvolumedown', ev);
},
setVol(vol,ev) {
var serviceData = {entity_id:('script.'+vol)};
this.hass.callService('script', 'turn_on', serviceData);
ev.stopPropagation();
},
});
</script>
I have the actions calling a script I made in Hassio’s editor is its really easy to edit.
Some of you will see I have left in hooks for button press and release… I am currently working on a way to have the script repeat as you hold the button down. But I haven’t managed it yet… If anyone has any suggestions I’d love to hear!
In regards to responsiveness. Its ok. It only breaks when the card is less than 320px. Which for me is when the cards go to a 4 column layout.
7 Likes
Hi morrelli43, thank you for posting this. I’d like to implement your card for a fan controlled via broadlink (remote). I have limited knowledge, so would you mind sharing your entire “process”: the volume script, configuration file entry. Thank you.
Hello Airpal, the custom_light works on HA 0.53+ ?
look my yaml
customize:
light.sala03:
friendly_name: RGB Central
custom_ui_state_card: custom_light
frontend:
extra_html_url:
- https://raw.githubusercontent.com/andrey-git/home-assistant-custom-ui/master/state-card-custom-ui.html
- /home/homeassistant/.homeassistant/www/custom_ui/state-card-custom_light.html
but dont work 
You would need the full name in customize:
custom_ui_state_card:state_card-custom_light
Hi guys, can you please tell me how have you hidden the toggle controls?
I have created a script which controls the pan / tilt function of my security cams.The technical part works great, but the toggle is useless and takes space.
Can you please help me with this one?
That is what i put in my “customization.yaml”
script.script_cam_control:
custom_ui_state_card: state-card-custom_camcontrol
hide_control: true
And thats my “state-card-custom_camcontrol.html”
<link rel="import" href="state-card-custom-ui.html">
<dom-module id="state-card-custom_camcontrol">
<template>
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<style>
:host {
line-height: 1.5;
}
paper-button {
min-width: 30px;
height: 20px;
margin: 10px 2px 10px 2px;
padding: 0 0 0 0;
}
</style>
<div class='horizontal justified layout'>
<state-info state-obj="[[stateObj]]"></state-info>
<paper-button-group>
<paper-button on-tap="btntap1">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M0.5 8l7.5 7.5v-4.5h8v-6h-8v-4.5z"></path>
</svg>
</paper-button>
<paper-button on-tap="btntap2">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M15.5 8l-7.5-7.5v4.5h-8v6h8v4.5z"></path>
</svg>
</paper-button>
<paper-button on-tap="btntap3">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M8 0.5l-7.5 7.5h4.5v8h6v-8h4.5z"></path>
</svg>
</paper-button>
<paper-button on-tap="btntap4">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M8 15.5l7.5-7.5h-4.5v-8h-6v8h-4.5z"></path>
</svg>
</paper-button>
<paper-button on-tap="btntap5">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM8 14c-3.314 0-6-2.686-6-6s2.686-6 6-6c3.314 0 6 2.686 6 6s-2.686 6-6 6zM5 8c0-1.657 1.343-3 3-3s3 1.343 3 3c0 1.657-1.343 3-3 3s-3-1.343-3-3z">
</path>
</svg>
</paper-button>
</paper-button-group>
<ha-entity-toggle state-obj="[[stateObj]]" hass="[[hass]]"></ha-entity-toggle>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'state-card-custom_camcontrol',
properties: {
hass: {
type: Object,
},
stateObj: {
type: Object,
},
},
btntap1: function (ev) {
this.setColor(4, 3, ev);
},
btntap2: function (ev) {
this.setColor(6, 3, ev);
},
btntap3: function (ev) {
this.setColor(0, 3, ev);
},
btntap4: function (ev) {
this.setColor(2, 3, ev);
},
btntap5: function (ev) {
this.setColor(25, 3, ev);
},
setColor(com, ipaddr,ev) {
var serviceData = {entity_id: this.stateObj.entity_id, command: com, ip: ipaddr} || {};
this.hass.callService('shell_command', 'camcontrol', serviceData);
ev.stopPropagation();
},
});
</script>
Thats what i have now:
And thats what i want to achieve:
If you never what the toggle - just remove the <ha-entity-toggle> element.
Thank you, Andrey, works like a charm now!
@morrelli43 Do you mind sharing the script behind your tv volume control?
Im trying to use your same custom card to control my tv to
Sorry for the delay!
I have a harmony hub, so I just needed to pass through the command for the volume button to the hub.
This is all I had to do.
tvvolumeup:
sequence:
- service: remote.send_command
entity_id: remote.harmony_hub
data:
device: "30557844"
command: "VolumeUp"
I hope this helps you!
Hello @JesseWebDotCom.
Could you please share your code for fan.
I was following guides in this thread and tried to build custom card for fan but can’t even make it appear.
This stopped working for me, so I stopped using it. I’m currently using this: https://community.home-assistant.io/t/custom-ui-tiles/
Hello,
I would like to be able to control le speed level of my dyson link fan with a slider on custom UI. And if possible to add a button for the oscillate.
I manged to make the sliders works for my light bulbs and to make the slider appaer next to the dyson fan like i did with the lights, but the fan slider is not working.
Do you have any suggestions?
My custom_glob:
fan.*:
custom_ui_state_card: state-card-custom-ui
state_card_mode: single-line
slider_theme:
min: 0
max: 10
pin: true
off_when_min: true
report_when_not_changed: falseLittle help plz
still wing it here getting my head around it slowly I think
I put the
fan-model.html into the www folder
and the
state-card-with-speed.html into the www\custom_ui folder
state-card-custom_fan.html into the www\custom_ui folder
now the bit im lost in
I have this in my Fan.yaml
- platform: mqtt
name: "Hall Fan"
state_topic: "home/Hall_fan/Switch"
command_topic: "home/Hall_fan/cmd"
payload_on:"DONT KNOW WHAT TO PUT HERE"
payload_off:"DONT KNOW WHAT TO PUT HERE"
optimistic: false
qos: 0
retain: true
in my custom:
fan.hall_fan:
icon: mdi:fan
custom_ui_state_card: custom_fan
when I look in <>
I see
so that telling me HA is seeing it I Think
and in my group i have
Hall:
name: Hall Way
entities:
- switch.Hall_light
- fan.hall_fan
Also in the Frontend I added this
frontend:
themes: !include_dir_merge_named themes/
extra_html_url:
- /local/custom_ui/state-card-custom-ui.html
- /local/custom_ui/state-card-with-speed.html
- /local/custom_ui/state-card-custom_fan.html
extra_html_url_es5:
- /local/custom_ui/state-card-custom-ui-es5.html
it does not show 
what step did i miss
One error I see in your configuration is where you have:
fan.hall_fan:
icon: mdi:fan
custom_ui_state_card: custom_fan
That last line should be:
custom_ui_state_card: state-card-custom_fan
…because it should match the name of the html file you have in the custom_ui folder.
1 Like
thanks ill have a look when home