Yesterday I updated to the latest Home Assistant to 0.65.6 and noticed that the on, off buttons that I created start to pop-up the detail page whenever it is clicked. This does not happened prior to the update because “ev.stopPropagation();” is used as advised.
How do I now stop that pop-up from appearing? For example if I press Storeroom Light “ON”, the detail page will appear. I will need to close it in order to go back to the main.
>>>Same issue here. Did you find a fix?
Hi @travis
Can you share the celling fan template…
I looking this for a while and I really love this
@CloudHoang the state-card-custom html I used for the 3 buttons.
<dom-module id="state-card-custom_fan1">
<template>
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<style>
:host {
line-height: 1.5;
}
paper-button {
min-width: 29px;
height: 30px;
background-color:#f3f3f3
}
</style>
<div class='horizontal justified layout'>
<state-info state-obj="[[stateObj]]"></state-info>
<paper-button-group>
<paper-button on-tap="btnlow">L</svg></paper-button>
<paper-button on-tap="btnmed">M</svg></paper-button>
<paper-button on-tap="btnhigh">H</svg></paper-button>
</paper-button-group>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'state-card-custom_fan1',
properties: {
hass: {
type: Object,
},
stateObj: {
type: Object,
},
},
btnlow: function (ev) {
this.setVol('fan_speed_low', ev);
},
btnmed: function (ev) {
this.setVol('fan_speed_med', ev);
},
btnhigh: function (ev) {
this.setVol('fan_speed_high', ev);
},
setVol(vol,ev) {
var serviceData = {entity_id:('scene.'+vol)};
this.hass.callService('scene', 'turn_on', serviceData);
ev.stopPropagation();
},
});
</script>
Nope…still finding the fix.
great
many thanks John
Its gone!..Thanks
@travis
thanks for you script but I dont know much about the custom state card 
can you help me edit a bit??
I have a RF fan with 1 command to change from Low => Medium => High => Low … so I make a script to switch a fan speed something like
If current is low, change to high =>> send 2 command.
If current is Medium, change to high =>> send 1 command.
How can I map those script to the html card? 
Really thanks and feel free if you can help.
Good day, anyone can advise on how to insert a picture onto the paper-button
<paper-button ###image### on-click=“btntap1”>Ø
thank you
i’ve got the same question, i have a remote which has one button to go from low-med-high on successive hits. Any solution to this is greatly appreciated. thanks in advance.
Hi, i have added a picture like this:
<paper-button style='background-color:#ff0000;background-image: url("/local/your-image.png");' on-tap="btntst">Test button!</paper-button>
The *.png file must be placed in ~/.homeassistant/www
thank you for your help
Did you ever get the custom state card fan speed control working?
If so could you share your steps and configuration?
Actually couldn’t follow this long thread and get something working so i came up with my own. This is working and super easy to get setup. Let me know how easy my instructions are to setup.
@undertoe I used your code as a template to make a custom card for alarm_control_panel. I want to add a second line under the entity name like @jamesdawson3 alarm_control_panel above to show current status. Can either of you guys, or @andrey, give me any advice?
<dom-module id="state-card-custom-alarm_control_panel">
<template>
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<style>
:host {
line-height: 1.5;
}
paper-button {
float: left !important;
font-size: 12px !important;
height: 30px;
margin: 3px;
min-width: 75px;
}
</style>
<div class='horizontal justified layout'>
<state-info state-obj="[[stateObj]]"></state-info>
<paper-button-group>
<paper-button raised on-click='handleDisarmTap' hidden$='[[!disarmBtnVisible]]'>Disarm</paper-button>
<paper-button raised on-click='handleAwayTap' hidden$='[[!awayBtnVisible]]'>Away</paper-button>
<paper-button raised on-click='handleHomeTap' hidden$='[[!homeBtnVisible]]'>Home</paper-button>
<paper-button raised on-click='handleNightTap' hidden$='[[!nightBtnVisible]]'>Night</paper-button>
</paper-button-group>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'state-card-custom-alarm_control_panel',
properties: {
hass: {
type: Object,
},
stateObj: {
type: Object,
observer: 'stateObjChanged',
},
statusValue: {
type: String,
value: 'Unknown',
},
disarmBtnVisible: {
type: Boolean,
value: false,
},
awayBtnVisible: {
type: Boolean,
value: false,
},
homeBtnVisible: {
type: Boolean,
value: false,
},
nightBtnVisible: {
type: Boolean,
value: false,
},
},
stateObjChanged: function (newVal) {
if (newVal) {
if (newVal.state == 'disarmed') {
this.statusValue = 'Disarmed';
this.disarmBtnVisible = false;
this.awayBtnVisible = true;
this.homeBtnVisible = true;
this.nightBtnVisible = true;
this.updateStyles({'--status-text-color': 'gray'});
} else if (newVal.state == 'armed_away') {
this.statusValue = 'Armed Away';
this.disarmBtnVisible = true;
this.awayBtnVisible = false;
this.homeBtnVisible = false;
this.nightBtnVisible = false;
this.updateStyles({'--status-text-color': 'gray'});
} else if (newVal.state == 'armed_home') {
this.statusValue = 'Armed Home';
this.disarmBtnVisible = true;
this.awayBtnVisible = false;
this.homeBtnVisible = false;
this.nightBtnVisible = false;
this.updateStyles({'--status-text-color': 'gray'});
} else if (newVal.state == 'armed_night') {
this.statusValue = 'Armed Night';
this.disarmBtnVisible = true;
this.awayBtnVisible = false;
this.homeBtnVisible = false;
this.nightBtnVisible = false;
this.updateStyles({'--status-text-color': 'gray'});
}
}
},
handleDisarmTap: function (ev) {
this.setState(ev, 'alarm_disarm');
},
handleAwayTap: function (ev) {
this.setState(ev, 'alarm_arm_away');
},
handleHomeTap: function (ev) {
this.setState(ev, 'alarm_arm_home');
},
handleNightTap: function (ev) {
this.setState(ev, 'alarm_arm_night');
},
setState: function (ev, service) {
var serviceData = {entity_id: this.stateObj.entity_id};
this.hass.callService('alarm_control_panel', service, serviceData);
ev.stopPropagation();
},
});
</script>
<div class='horizontal justified layout'>
<state-info state-obj="[[stateObj]]"></state-info>
<paper-button-group>
<paper-button raised on-click='handleDisarmTap' hidden$='[[!disarmBtnVisible]]'>Disarm</paper-button>
<paper-button raised on-click='handleAwayTap' hidden$='[[!awayBtnVisible]]'>Away</paper-button>
<paper-button raised on-click='handleHomeTap' hidden$='[[!homeBtnVisible]]'>Home</paper-button>
<paper-button raised on-click='handleNightTap' hidden$='[[!nightBtnVisible]]'>Night</paper-button>
</paper-button-group>
</div>
<div class='horizontal justified layout'>
<strong>ANY HTML YOU WANT</strong>
</div>
Then just update your Polymer js code to include what you want. console.log(); is your friend 
Gotcha…I’m not familiar with Polymer or HTML so it’s a bit of a learning curve…
Hi Kylerw,
I like the fan control you have with the four buttons, off, low, med & high. I am trying to get the same thing. I am using a Broadlink rm pro to send commands to existing remote ceiling fans with success. Home assistant does’t know the state of the fan and I’m fine with this, as I can turn all fans off by executing fan off command. I would like to collapse all the control entries to one line. Do you or anyone else know how I might achieve this?
This is what I currently see with works perfectly, just doesn’t look the way I would like it to.
I will eventually move light to sonoff switch so Homeassistant knows the state of the light.
config below
switch:
lounge_light:
friendly_name: "Light"
command_on: 'shAcAAgTBwsQEwgSCBIIEggSCBIIEggKEAoQEggAASUAAAAAAAAAAAAAAAA='
lounge_fan_off:
friendly_name: "Fan Off"
command_on: 'shQcAAkSCRIJEQkRCRIJCRERCRIJEgkJEQkREggAASQAAAAAAAAAAAAAAAA='
lounge_fan_low:
friendly_name: "Fan Low"
command_on: 'shMcAAgJERIIEggSCBIIEggSCRIJEgkJEQoQEggAASQAAAAAAAAAAAAAAAA='
lounge_fan_medium:
friendly_name: "Fan Medium"
command_on: 'shYcAAgTCBIIEggKEBIIEggSCBIIEggKEAoQEggAASQAAAAAAAAAAAAAAAA='
lounge_fan_high:
friendly_name: "Fan High"
command_on: 'shEcAAkSCRIJEgkSCQkREQkRCRIJEQkJEgkSEgkAASQAAAAAAAAAAAAAAAA='
script:
lounge_light:
sequence:
- service: switch.turn_on
entity_id: switch.lounge_light
lounge_fan_off:
sequence:
- service: switch.turn_on
entity_id: switch.lounge_fan_off
lounge_fan_low:
sequence:
- service: switch.turn_on
entity_id: switch.lounge_fan_low
lounge_fan_medium:
sequence:
- service: switch.turn_on
entity_id: switch.lounge_fan_medium
lounge_fan_high:
sequence:
- service: switch.turn_on
entity_id: switch.lounge_fan_high
group:
lounge_fan:
name: Lounge Room
view: no
control: hidden
entities:
- script.lounge_light
- script.lounge_fan_off
- group.lounge_fan