Comments (5)
It's easier if you post the code you've edited. Did you make a button_card_templates
? The svg image code is in the custom_fields
.
I made a post about skånetrafiken here https://community.home-assistant.io/t/parse-xml-output-from-rest-api/27707/6
from hass-config.
Thank you, finally got skånetrafiken to work.
I noticed that the fan spins in Chrome, and not Firefox.. so that was a browser problem.
The [object i object] (or something like that) still shows though.
Lovelace:
button_card_templates:
.....
switch:
aspect_ratio: 1/1
show_icon: false
show_state: true
state:
- 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)'
value: 'on'
styles:
card: {}
name: {}
state: {}`
button-card:
custom_fields:
icon_fan: >
[[[ if (entity.state === 'on') { return '<svg viewBox="0 0 50 50"
fill="#5daeea"><animateTransform accumulate="none" additive="sum"
attributeName="transform" attributeType="xml" calcMode="linear" dur="0.5s"
fill="remove" from="0 0 0" repeatCount="indefinite" restart="always" to="360
0 0" type="rotate"/><circle cx="25" cy="25" r="6.6"/><path d="M31.9
30.4c-.5.6-1.1 1.1-1.7 1.5-1.4 1.1-3.2 1.7-5.2 1.7-2.3 0-4.5-.9-6-2.4-.9
1.1-1.6 2.3-2.3 3.2l-4.9 5.4c-1.8 2.7.3 5.6 2.5 7 3.9 2.4 9.8 3.1 14.1 1.9
4.6-1.3 7.9-4.7 7.4-9.7-.2-3.4-1.9-6-3.9-8.6zM17
28.3c-.4-1-.6-2.1-.6-3.3a8.7 8.7 0 0 1 6.4-8.4l-1.6-3.5L19
6.2c-1.5-2.8-5-2.5-7.3-1.2-4 2.2-7.5 6.9-8.7 11.3-1.2 4.6.2 9.2 4.7 11.3 3.1
1.3 6.1 1.2 9.3.7zm26.9-17.6c-3.3-3.4-8-4.6-12.1-1.8-2.8 1.8-4.2 4.6-5.5 7.5
4.2.6 7.4 4.2 7.4 8.6 0 .9-.1 1.7-.4 2.5 1.3.2 2.8.3 3.8.4 2.3.4 4.7 1.3 7.1
1.7 3.2.3 4.7-3 4.8-5.6.3-4.6-1.9-10.1-5.1-13.3z"/></svg>'; } else { return
'<svg viewBox="0 0 50 50" fill="#9ca2a5"><style>@keyframes
spin{from{transform:rotate(0)}to{transform:rotate(720deg)}}.spin.animated{animation:spin
1.7s ease-out 1;transform-origin:center center}</style> <g class="spin
animated"><circle cx="25" cy="25" r="6.6"/><path d="M31.9 30.4c-.5.6-1.1
1.1-1.7 1.5-1.4 1.1-3.2 1.7-5.2 1.7-2.3 0-4.5-.9-6-2.4-.9 1.1-1.6 2.3-2.3
3.2l-4.9 5.4c-1.8 2.7.3 5.6 2.5 7 3.9 2.4 9.8 3.1 14.1 1.9 4.6-1.3 7.9-4.7
7.4-9.7-.2-3.4-1.9-6-3.9-8.6zM17 28.3c-.4-1-.6-2.1-.6-3.3a8.7 8.7 0 0 1
6.4-8.4l-1.6-3.5L19 6.2c-1.5-2.8-5-2.5-7.3-1.2-4 2.2-7.5 6.9-8.7 11.3-1.2
4.6.2 9.2 4.7 11.3 3.1 1.3 6.1 1.2
9.3.7zm26.9-17.6c-3.3-3.4-8-4.6-12.1-1.8-2.8 1.8-4.2 4.6-5.5 7.5 4.2.6 7.4
4.2 7.4 8.6 0 .9-.1 1.7-.4 2.5 1.3.2 2.8.3 3.8.4 2.3.4 4.7 1.3 7.1 1.7 3.2.3
4.7-3 4.8-5.6.3-4.6-1.9-10.1-5.1-13.3z"/></g></svg>'; } ]]]
styles:
custom_fields:
icon_fan:
- top: 9%
- left: 50%
- width: 3vw
- position: absolute
template: switch
entity: switch.flakt
hold_action:
action: toggle
style:
left: 80.05%
top: 37.9%
width: 10%
tap_action:
action: more-info
type: 'custom:button-card
I use the gui to edit lovelace. I tried to paste in your template:
switch:
aspect_ratio: 1/1
show_state: true
show_icon: false
state: *button_state
styles:
name: *button_styles_name
state: *button_styles_state
card: *button_styles_card
but it refused to save, complaining about *button_state
. I guess therein lies my problem.
I tried to skip the template and add the values directly in the card, I guess it saved it automatically under button_card_templates
.
Oh, and how do I change the size of the fan?
My other cards looks like this:
color: auto
entity: light.sonoff_hallen
hold_action:
action: toggle
icon: 'mdi:wall'
name: ' '
size: 60%
styles:
card:
- height: 70px
- width: 64px
tap_action:
action: more-info
type: 'custom:button-card'
Would be nice to have the fan + card the same size :)
from hass-config.
from hass-config.
Sorry, I think you need to read the documentation https://github.com/custom-cards/button-card.
Also look up css and yaml anchors.
from hass-config.
You're right, got it working now.
Thank you for sharing your setup, even if I'm not using it I'm using part of it and learning some new and cool stuff.
from hass-config.
Related Issues (20)
- template yaml HOT 1
- There are adjustments about the button card lock HOT 3
- Restarting after update to yaml HOT 2
- Wallpanel Full Screen HOT 2
- 2023.7 workaround HOT 2
- Alarm Card HOT 1
- Can't edit the dashboard cards. HOT 4
- Popup is transparent on iPad HOT 1
- Why does a broken icon appear when I toggle a button? HOT 1
- Manually copy over these files from matt8707/hass-config HOT 1
- Missing blur overlay on media, button card with chrome browser
- Showing Camera in Sidebar? HOT 4
- Missing Background (just had it on Chrome)
- Vacuum More Info (whack-a-mole needed) HOT 9
- Custom element doesn't exist: grid-layout. HOT 1
- Youtube watching sensor not working anymore
- Dashboard Home Assistant
- how to use LG WebOs on media slider
- No Background Image
- wrong post sry
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hass-config.