Hi! I have included the custom_icons.js but I am not sure what should be the output of this command. What am I missing to achieve the screenshot provided by Mattias?
P.S I don’t know if everything in the codes are applicable to me or if there are pre-requisites before I can make them work
tap_action: !include popup/popup_3f_tv_remote.yaml
hold_action:
action: more-info
custom_fields:
icon_tv: &icon_tv >
[[[ const boolean = states[entity.entity_id.replace(entity.entity_id.split('.')[0], 'input_boolean')].state;
const style = '<style>@keyframes animate_on{from{transform: scaleY(0);}to{transform: scaleY(1);}}.animate_on{animation: animate_on 1s; transform-origin: -100% 46%; animation-fill-mode: forwards;}@keyframes animate_off{from{transform: scaleY(1);}to{transform: scaleY(0);}}.animate_off{animation: animate_off 1s; transform-origin: -100% 46%; animation-fill-mode: forwards;}</style>';
const path = '<path d="M46 9.2v27.5H4.1V9.2H46m2.4-2.4H1.6v32.3h46.7c.1 0 .1-32.3.1-32.3zM11.9 43.2h26.3c.6 0 1.1-.4 1.1-1v-.3c0-.6-.4-1.1-1-1.1H11.9c-.6 0-1.1.4-1.1 1v.3a1.11 1.11 0 0 0 1.1 1.1z"/>';
const gradient = '<linearGradient id="A" gradientUnits="userSpaceOnUse" x1="5.401" y1="34.714" x2="43.817" y2="11.74"><stop offset="0" stop-color="#64acb7"/><stop offset="1" stop-color="#7fdbe9"/></linearGradient>';
if (entity.state === 'off' && boolean === 'off') { return `<svg viewBox="0 0 50 50"> ${style} ${gradient} <path class="animate_off" d="M2.9,8h44.3v29.9H2.9V8z" fill="url(#A)"/> ${path} </svg>`; }
if (entity.state === 'on' && boolean === 'off') { return `<svg viewBox="0 0 50 50"> ${style} ${gradient} <path d="M2.9,8h44.3v29.9H2.9V8z" fill="#20262890"/><path class="animate_on" d="M2.9,8h44.3v29.9H2.9V8z" fill="url(#A)"/> ${path} </svg>`; }
if (entity.state === 'on' && boolean === 'on') { return `<svg viewBox="0 0 50 50"> ${gradient} <path d="M2.9,8h44.3v29.9H2.9V8z" fill="url(#A)"/> ${path} </svg>`; }
else if (entity.state === 'off' && boolean === 'on') { return `<svg viewBox="0 0 50 50"> ${path} </svg>`; } ]]]
styles: &icon_tv_styles
custom_fields:
icon_tv:
[fill: "[[[ return entity.state === 'on' ? '#616161' : '#9da0a2'; ]]]",
top: 7%, left: 10.7%, width: 3.5vw, position: absolute]
template: ['base', 'loader']
Output:
Hi @Mattias_Persson , i have downloaded your Hass-config-master. I don’t know anything and I start from scratch. What I need to study to modify your configuration and adapt to my entity, and translate everything in my language?
xADDRx
November 24, 2020, 12:38pm
740
Hi
Can you provide the code with the media player?
Thank you.
it’s not my code, but partly used from this part:
3 Likes
my code still not working i try to fix it…
this is the error from the card
ButtonCardJSTemplateError: TypeError: Cannot read property ‘state’ of undefined in ‘if (states[entity.entity_id.replace(entity.entity_id.split(’.’)[0], ‘input_boolean’)].state === ‘o…’
Anyone solved the problem. it is not working for me neither.
The “padding” is just coordinates on a Picture Elements Card .
I bet you can. I don’t have an alarm though.
Andrea_Guidi:
my code still not working i try to fix it…
this is the error from the card
ButtonCardJSTemplateError: TypeError: Cannot read property ‘state’ of undefined in ‘if (states[entity.entity_id.replace(entity.entity_id.split(’.’)[0], ‘input_boolean’)].state === ‘o…’
It takes your media player and looks for an input boolean with the same name, so it can show a spinning loader while waiting for a state change. ex for media_player.samsung_tv_remote, make sure you’ve created input_boolean.samsung_tv_remote.
spo0n125
November 25, 2020, 6:37pm
748
Hi @Mattias_Persson
Loved the thing you’ve done here. Looks awesome.
Now the real question, I’m a real beginner in the home assistant project and could you or someone in the topic give me a hints on how to add this to my HA configuration, I know that after adding the visuals I have to change the entities and everything just a hint for the visual style.
Thanks in advance and keep doing this you really have everything.
1 Like
yep just fixed… than i read your post
thanks a lot
May I know how can I remove the other icon boxed in black? I already removed the customized icons but to no avail.
- type: custom:button-card
entity: media_player.3f_tv
triggers_update:
['switch.3f_br_switch_broadlink_sidelight']
style:
top: 37.9%
left: 41.31%
width: 10%
tap_action:
action: toggle
hold_action: !include popup/popup_3f_tv_remote.yaml
custom_fields:
icon_tv: >
[[[ if (entity.state === 'on') { return '<svg viewBox="0 0 50 50"> <style>@keyframes animate{50%{transform: translateY(0);}100%{transform: translateY(-45%);}}.animate{animation: animate 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;}</style>
<g style="clip-path: url(#mask);"><g class="animate"><path fill="#00aa9e" d="M49.2 38.9l-75.6-25.1v7.4l75.6 25.2z"/><path fill="#f3c202" d="M49.2 46.4l-75.6-25.2v7.5l75.6 25.1z"/><path fill="#326db3" d="M49.2 53.8l-75.6-25.1V51l75.6 25.1zm0-22.3L-26.4 6.4v7.4l75.6 25.1z"/></g></g>
<defs><clipPath id="mask"><path d="M47.5 33.2c-.5-2.2-3.9-3.5-9.1-3.9-3.8-.3-7.5.6-11.1 1.9l-.6.2v-5.7l-5.7.8-4.6 1.6L6 31.9h-.1c-1.9.7-3.8 2.2-3.7 4.2.1 2.1 4.7 2.6 8.2 3.2 3.3.6 6.2.2 8.9-.7l7.3 4.8L33 41l10.7-4h.1c2.8-1 4-2.5 3.7-3.8zm-31.3 2l-3.6 1.3c-2.2.8-4.1-1.1-2.1-1.9l1.7-.6 7.2-2.7v2.8l-3.2 1.1zm22.5-1.1l-1.9.7-10.2 3.7V36l6.5-2.4 3.8-1.3c4-.9 5.6.5 1.8 1.8z"/></clipPath></defs><path fill="#de0029" d="M26.7 14.6v28.7l-7.3-2.5V7.1l9.3 2.6c6 1.7 9.6 5 9.6 10.7-.1 6.7-3 9.4-8.7 7.6V14.9c-.1-1.6-2.9-1.7-2.9-.3h0z"/></svg>'; }
else { return '<svg viewBox="0 0 50 50"><path fill="#9da0a2" d="M43.8 37h-.1l-10.6 4-4.2 1.6v-4.9l8-2.9 1.9-.7c3.8-1.3 2.2-2.7-1.8-1.9l-3.8 1.3-4.3 1.6v-4.5c3.1-1 6.3-1.6 9.5-1.4 5.3.4 8.7 1.6 9.1 3.9.3 1.4-.9 2.9-3.7 3.9zm-26.7-2.1l-.9.3-3.6 1.3c-2.2.8-4.1-1.1-2.1-1.9l1.7-.6 5-1.9v-4.2l-.6.2L6 31.9h-.1c-1.9.7-3.8 2.2-3.7 4.2.1 2.1 4.7 2.6 8.2 3.2 2.4.4 4.6.3 6.7-.1v-4.3zm12.4-20V28c5.7 1.7 8.7-.9 8.7-7.6.1-5.7-3.6-9-9.6-10.7l-9.3-2.6v33.8l7.2 2.5.1.1V14.6c.1-1.4 2.9-1.3 2.9.3z"/></svg>'; } ]]]
styles:
custom_fields:
icon_tv:
[top: 7%, left: 10%, width: 3.5vw, position: absolute]
template: ['base', 'loader']
Did you include button_card_templates.yaml?
base:
aspect_ratio: 1/1
show_state: true
show_icon: false
state:
- value: 'on'
styles:
card: [background-color: 'rgba(255, 255, 255, 0.8)']
name: [color: 'rgba(0, 0, 0, 0.6)']
state: [color: 'rgba(0, 0, 0, 0.6)']
tap_action:
ui_sound: |
[[[ if (entity.state === 'off' && states['switch.fullykiosk_screensaver'].state === 'off') {
hass.callService('media_player', 'play_media', {entity_id: 'media_player.tablet', media_content_id: '/local/sound/on.m4a', media_content_type: 'music'}); }
I have copied your button_card_templates.yaml.
It went OK after placing it in ui-lovelace.yaml per your advise.
GodOdin
November 26, 2020, 7:33pm
755
I am also curious about that.
spo0n125
November 26, 2020, 8:01pm
756
Hi
I’ve tried and I managed to add, after seeing the files I understand a little more about this, but I get so many errors for the custom card saying that card does not exist even if add them via HACS, and for the kiosk mode I’m was not able to set it.
I’m still trying to do this, and if I can I will reply to you how to do it.
Would like to know why the button_card_template.js is not working?
in configuration.yaml, i used js and module but to no avail
- url: /local/button-card.js
type: js
- url: /local/button-card.js
type: js
in ui-lovelace.yaml
button_card_templates: !include button_card_templates.yaml
- type: custom:button-card
entity: switch.3f_br_switch_broadlink_led
show_icon: false
triggers_update:
['switch.3f_br_switch_broadlink_sidelight']
style:
top: 37.9%
left: 41.31%
width: 10%
tap_action:
action: toggle
hold_action: !include popup/popup_3f_tv_remote.yaml
custom_fields:
icon_tv: &icon_tv >
[[[ if (entity.state === 'on') { return '<svg viewBox="0 0 50 50"> <style>@keyframes animate{50%{transform: translateY(0);}100%{transform: translateY(-45%);}}.animate{animation: animate 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;}</style>
<g style="clip-path: url(#mask);"><g class="animate"><path fill="#00aa9e" d="M49.2 38.9l-75.6-25.1v7.4l75.6 25.2z"/><path fill="#f3c202" d="M49.2 46.4l-75.6-25.2v7.5l75.6 25.1z"/><path fill="#326db3" d="M49.2 53.8l-75.6-25.1V51l75.6 25.1zm0-22.3L-26.4 6.4v7.4l75.6 25.1z"/></g></g>
<defs><clipPath id="mask"><path d="M47.5 33.2c-.5-2.2-3.9-3.5-9.1-3.9-3.8-.3-7.5.6-11.1 1.9l-.6.2v-5.7l-5.7.8-4.6 1.6L6 31.9h-.1c-1.9.7-3.8 2.2-3.7 4.2.1 2.1 4.7 2.6 8.2 3.2 3.3.6 6.2.2 8.9-.7l7.3 4.8L33 41l10.7-4h.1c2.8-1 4-2.5 3.7-3.8zm-31.3 2l-3.6 1.3c-2.2.8-4.1-1.1-2.1-1.9l1.7-.6 7.2-2.7v2.8l-3.2 1.1zm22.5-1.1l-1.9.7-10.2 3.7V36l6.5-2.4 3.8-1.3c4-.9 5.6.5 1.8 1.8z"/></clipPath></defs><path fill="#de0029" d="M26.7 14.6v28.7l-7.3-2.5V7.1l9.3 2.6c6 1.7 9.6 5 9.6 10.7-.1 6.7-3 9.4-8.7 7.6V14.9c-.1-1.6-2.9-1.7-2.9-.3h0z"/></svg>'; }
else { return '<svg viewBox="0 0 50 50"><path fill="#9da0a2" d="M43.8 37h-.1l-10.6 4-4.2 1.6v-4.9l8-2.9 1.9-.7c3.8-1.3 2.2-2.7-1.8-1.9l-3.8 1.3-4.3 1.6v-4.5c3.1-1 6.3-1.6 9.5-1.4 5.3.4 8.7 1.6 9.1 3.9.3 1.4-.9 2.9-3.7 3.9zm-26.7-2.1l-.9.3-3.6 1.3c-2.2.8-4.1-1.1-2.1-1.9l1.7-.6 5-1.9v-4.2l-.6.2L6 31.9h-.1c-1.9.7-3.8 2.2-3.7 4.2.1 2.1 4.7 2.6 8.2 3.2 2.4.4 4.6.3 6.7-.1v-4.3zm12.4-20V28c5.7 1.7 8.7-.9 8.7-7.6.1-5.7-3.6-9-9.6-10.7l-9.3-2.6v33.8l7.2 2.5.1.1V14.6c.1-1.4 2.9-1.3 2.9.3z"/></svg>'; } ]]]
styles: &icon_tv_styles
custom_fields:
icon_tv:
[fill: "[[[ return entity.state === 'on' ? '#616161' : '#9da0a2'; ]]]",
top: 7%, left: 10.7%, width: 3.5vw, position: absolute]
template: ['base', 'loader']
button-card.js is located in www/button_card_templates.yaml is in the config folder
the icon remained like this and any changes in the height (i assume in the button_card_templates.yaml) is not taking effect:
Install button card with hacs instead and yes, it should be module. But that doesn’t seem to be your issue since you get a button.
Read the logs, see if there’s an error as to why the include doesn’t work. If you can’t get it to work you don’t have to use include.
ui-lovelace.yaml
button_card_templates: !include button_card_templates.yaml
instead paste contents of button_card_templates.yaml directly
button_card_templates:
base:
aspect_ratio: 1/1
...
