Teqnology
September 8, 2019, 8:46pm
2225
Hello,
What a amazing card. I’m trying to adjust jimz template for laundry. I would like to show a value of another entity in the card. Im using the custom field for that. The problem is that it worked when it was a seprate button card. Now i made it in to a decluttering template and it doesn’t work. Does someone see what i did wrong?
decluttering template:
default:
- size: 25%
- lock: false
- color: auto
- variable: spin
- spin: false
- off_variable: spin
- off_spin: false
- show_name: true
- show_state: true
- show_label: true
- show_icon: true
- show_last_changed: false
- tap_action:
action: more-info
haptic: light
- hold_action:
action: more-info
haptic: heavy
- aspect_ratio: 1/1
- margin-right: 60px
- margin-left: 0px
- label: ' '
- opacity: 0.4
- opacity_on: 1.0
- off_icon_color: var(--icon-color-off)
- off_name_color: var(--name-color-off)
- off_state_color: var(--state-color-off)
- off_label_color: var(--label-color-off)
- on_name_color: var(--name-color-on)
- on_state_color: var(--state-color-on)
- on_label_color: var(--label-color-on)
- on_card_color: var(--homekit-card-on)
- label_font_size: 11px
- label_font_weight: normal
- justify-self-name: start
- padding-left-name: 10px
- border-radius: var(--border-radius)
card:
type: custom:button-card
name: '[[name]]'
deep_press: true
icon: 'mdi:[[icon]]'
size: '[[size]]'
color: '[[color]]'
lock: '[[lock]]'
aspect_ratio: '[[aspect_ratio]]'
entity: '[[entity]]'
label: '[[label]]'
show_name: '[[show_name]]'
show_icon: '[[show_icon]]'
show_state: '[[show_state]]'
show_label: '[[show_label]]'
show_last_changed: '[[show_last_changed]]'
tap_action: '[[tap_action]]'
hold_action: '[[hold_action]]'
styles:
card:
- border-radius: '[[border-radius]]'
- --ha-card-background: var(--homekit-card-off)
label:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
- color: var(--label-color-off)
state:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 10px
- color: var(--upcoming-color)
grid:
- grid-template-areas: '"i power" "s s" "l l"'
- grid-template-columns: 1fr auto
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: start
- text-align: start
- margin-right: '[[margin-right]]'
- margin-left: '[[margin-left]]'
custom_fields:
power:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: center
- font-weight: bold
- padding-right: 10px
- color: var(--upcoming-color)
custom_fields:
power: >
[[power]]
view:
title: Laundry
path: laundry
cards:
- type: vertical-stack
cards:
- type: custom:decluttering-card
template: back_button
- type: custom:decluttering-card
template: header_text
variables:
- content: '## Laundry'
- type: vertical-stack
cards:
- type: custom:decluttering-card
template: header_text
variables:
- content: '##### Wasmachine'
- type: horizontal-stack
cards:
- !include ../includes/blank-card.yaml
- type: custom:decluttering-card
template: laundry_elements
variables:
- entity: sensor.wasmachine_status
- name: Wasmachine
- icon: washing-machine
- show_name: false
- show_last_changed: true
- power: "[[[
return `<ha-icon icon='mdi:flash-outline' style='width: 18px; height: 18px; color: var(--icon-color-off);'></ha-icon>
<span>${Math.round(states['sensor.neo_coolcam_power_plug_12a_power_3'].state)}w</span>`
]]]"
- !include ../includes/blank-card.yaml
Thanks
I’m not sure it should but maybe. For sure it breaks the fixed width though.
What was the result before, and what are you seeing now compared to before?
Teqnology
September 8, 2019, 9:32pm
2227
I dont see the flash icon and the value of the ‘power’ entity in the right corner of the card. I adjusted without making a backup.
daphatty
September 9, 2019, 12:26am
2228
/facepalm… How did I miss that…
Thank you once again.
Try it this way:
default:
- size: 25%
- lock: false
- color: auto
- variable: spin
- spin: false
- off_variable: spin
- off_spin: false
- show_name: true
- show_state: true
- show_label: true
- show_icon: true
- show_last_changed: false
- tap_action:
action: more-info
haptic: light
- hold_action:
action: more-info
haptic: heavy
- aspect_ratio: 1/1
- margin-right: 60px
- margin-left: 0px
- label: ' '
- opacity: 0.4
- opacity_on: 1.0
- off_icon_color: var(--icon-color-off)
- off_name_color: var(--name-color-off)
- off_state_color: var(--state-color-off)
- off_label_color: var(--label-color-off)
- on_name_color: var(--name-color-on)
- on_state_color: var(--state-color-on)
- on_label_color: var(--label-color-on)
- on_card_color: var(--homekit-card-on)
- label_font_size: 11px
- label_font_weight: normal
- justify-self-name: start
- padding-left-name: 10px
- border-radius: var(--border-radius)
card:
type: custom:button-card
name: '[[name]]'
deep_press: true
icon: 'mdi:[[icon]]'
size: '[[size]]'
color: '[[color]]'
lock: '[[lock]]'
aspect_ratio: '[[aspect_ratio]]'
entity: '[[entity]]'
label: '[[label]]'
show_name: '[[show_name]]'
show_icon: '[[show_icon]]'
show_state: '[[show_state]]'
show_label: '[[show_label]]'
show_last_changed: '[[show_last_changed]]'
tap_action: '[[tap_action]]'
hold_action: '[[hold_action]]'
styles:
card:
- border-radius: '[[border-radius]]'
- --ha-card-background: var(--homekit-card-off)
label:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
- color: var(--label-color-off)
state:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 10px
- color: var(--upcoming-color)
grid:
- grid-template-areas: '"i power" "s s" "l l"'
- grid-template-columns: 1fr auto
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: start
- text-align: start
- margin-right: '[[margin-right]]'
- margin-left: '[[margin-left]]'
custom_fields:
power:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: center
- font-weight: bold
- padding-right: 10px
- color: var(--upcoming-color)
custom_fields:
power: '[[power]]'
And:
title: Laundry
path: laundry
cards:
- type: vertical-stack
cards:
- type: custom:decluttering-card
template: back_button
- type: custom:decluttering-card
template: header_text
variables:
- content: '## Laundry'
- type: vertical-stack
cards:
- type: custom:decluttering-card
template: header_text
variables:
- content: '##### Wasmachine'
- type: horizontal-stack
cards:
- !include ../includes/blank-card.yaml
- type: custom:decluttering-card
template: laundry_elements
variables:
- entity: sensor.wasmachine_status
- name: Wasmachine
- icon: washing-machine
- show_name: false
- show_last_changed: true
- power: >-
[[[
return `<ha-icon icon='mdi:flash-outline' style='width: 18px; height: 18px; color: var(--icon-color-off);'></ha-icon>
<span>${Math.round(states['sensor.neo_coolcam_power_plug_12a_power_3'].state)}w</span>`
]]]
- !include ../includes/blank-card.yaml
yoni3210
September 9, 2019, 3:48pm
2230
Hi, Thank you for your help, i tried your simplified version , please look at the picture below:
When i click on the on it i can see the stream, it’s open the stream i a new winodw.
code:
- type: "custom:button-card"
aspect_ratio: 1/1
styles:
card:
- padding: 5%
- color: #1E2747
- font-size: 11px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
- border-radius: 15px
grid:
- grid-template-areas: '"icn icn" "n n" "i i"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr 1fr 3fr
name:
- font-weight: bold
- font-size: 15px
- align-self: middle
- justify-self: start
- padding-bottom: 4px
img_cell:
- margin: none
- align-items: flex-end
- justify-content: center
icon:
- width: 100%
label:
- align-self: middle
custom_fields:
icn:
- align-self: start
tap_action:
action: more-info
custom_fields:
icn: >
[[[
return "<div style='text-align: start;'><ha-icon icon='mdi:cctv' style='color: lime; width: 30px; height: 30px;'></ha-icon></div>";
]]]
entity: camera.camera_wyze
show_entity_picture: "true"
LbDab
September 9, 2019, 6:47pm
2231
Maybe FFMPEG is the reason there is no preview, I stream my cameras to MotionEye and using MJPEG stream to HA.
Try adding simple image:
entity_picture: 1920x1080 TP - Imgur
If it works you need to replace it with still image URL from camera.
Or adding still image setting to camera config in HA might solve this
Teqnology
September 9, 2019, 7:02pm
2232
Hi RomRider,
Thanks for your help. Got an error. I’m trying to reproduce my original card to work out what the differences are. trial and error
yoni3210
September 9, 2019, 8:22pm
2233
thanks,
copied from anoterh of my button_templates:
button_body_lock:
lock: true
color: auto
size: 30%
aspect_ratio: 1/1
show_state: true
show_label: true
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
and added the lock: true.
showing:
which is perfect for my needs. However, click/holding it doesnt show the more-info. It does show the blue circle, bt when releasing the mouse the lock disappears, as if I simply clicked it.
Isnt the lock compatible with the hold_action?
thanks for having a look
anilet
September 9, 2019, 11:37pm
2235
I am trying to template a service call
- type: custom:button-card
template: custom_button_lights
entity: binary_sensor.youtube_via_http
name: '[[[ if (entity.state == "on") return "Block"; else return "Unblock" ]]]'
icon: mdi:youtube
show_last_changed: false
tap_action:
action: call-service
service: '[[[ if (entity.state == "on") return "adguard.disable_url"; else return "adguard.enable_url" ]]]'
#service: adguard.disable_url
service_data:
url: "https://thisisaplaceholder.com"
I am getting the name field correct but the service call is not working, Is template supported for service?, what am I doing wrong.
jimz011
September 10, 2019, 12:39am
2236
Could you share the code for the notifications? I was planning to do something like this, but then I came across this. This looks cool.
filed a feature request for adding a lock (permanent-not switchable) and to differentiate that from the current (allow-)lock.
would appreciate feedback to maybe find other solutions to the goal Id like to accomplish: having a button for a switch entity, and not allow it to switch at all (so not the current lock: true which still offers 5 seconds of opportunity)
Thanks, I missed the option for unlock_users before… sorry bout that.
have it tested like this now:
button_body_lock:
lock: true
unlock_users: nobody
color: auto
size: 30%
aspect_ratio: 1/1
show_state: true
show_label: true
tap_action:
action: none
haptic: light
hold_action:
action: more-info
haptic: success
styles:
lock:
- color: red
- icon: mdi:lock-alert
and there are a 2 ‘issues’:
the icon is not changed in to lock-alert
no more-info pops up on hold. Of course I’d need the more-info not to have a moveable switch…
I have an Aqara motion sensor that also has a temperature sensor. I want to use that sensor on a another card.
Whatever I do I only get the lux-measurement.
- type: "custom:button-card"
template: temp_button
entity: sensor.rs_entre
label_template: >
return `'states.entity.attributes.temperature' + ' °C';`
So what is wrong with this template?
jimz011
September 10, 2019, 7:56pm
2242
This can already be done though:
I’d go for an input_boolean as the switch, and a state template to show the state. The button wil now correctly show the state (you might consider templating color as well) but the button will do nothing (just like a permanent lock would do).
You could also do a tap_action: none for example or a service-call to do something else. This way you wouldn’t need the input boolean.
Not the most beautiful solution but it works for me. For example I have servers in HA as switches which should never ever be turned of. Pressing the button does nothing but show a more-info window.
Edit: lol I should have read up
tbh, I think a switch needs to be able to be a switch… lots of hacks possible, but thats what makes it all too complex all over.
I probably will endup not using lock: true, set a dedicated icon lock-alert, and have tap action show more info…
RomRider
September 10, 2019, 9:02pm
2244
Lock is the same for hold and tap and double tap. There’s no way to differentiate it.
If you want to display a lock icon just use a custom field and put the tap_action to none while keeping the hold action to more info.
I don’t quite understand your use case honestly
BTW, putting icon: mdi:something in the styles of the lock will not do anything, it’s not valid css.
this was already answered 
