How did you get that rounded look on the green bar graph?
Thatās apex chart card.
Here is an example:
- type: custom:apexcharts-card
card_mod:
style: |
ha-card {
background-color: transparent !important;
border-radius: 0px;
padding: 0px !important;
margin: 0px !important;
}
header:
show: false
title: Stromverbrauch / 24h
apex_config:
plotOptions:
bar:
borderRadius: 5
borderRadiusApplication: "around"
chart:
height: 98px
fontFamily: Quicksand
parentHeightOffset: 20px
yaxis:
forceNiceScale: true
reversed: false
opposite: true
dataLabels:
background: false
offsetY: -10
style:
colors:
- 'var(--contrast20)'
graph_span: 24h
update_interval: 60sec
layout: minimal
span:
end: hour
all_series_config:
type: column
curve: smooth
show:
datalabels: false
series:
- entity: sensor.hauszahler
unit: Wh
name: Stromverbrauch
transform: "return x / 2;"
color: "var(--green)"
group_by:
duration: 2h
func: avg
I tried to make an āAndroid 13 Pixel-likeā dashboard based on this project
(Edit: dashboard a little improved)
Nice! Thank you for sharing your hard work.
Can you post an example of the room template?
It looks like it needs a lot of templating in the entity section
Beautiful! do you have a github?
Unfortunately not at the moment
Are you interested in the code of something in particular?
Sure, for now its only one button that shows 4 states with activated backlight:
- type: 'custom:button-card'
template: room
variables:
icon: mdi:sofa-single
# entity_1_icon: mdi:thermometer
entity_1_value: "[[[ return states['sensor.wohnzimmer_temperatur'].state+'Ā°C ' + states['sensor.wohnzimmer_luftfeuchtigkeit'].state + '%'; ]]]"
entity_1_on: true
entity_2_icon: mdi:lightbulb
entity_2_on: "[[[ return states['light.wohnzimmer_kuechenlichter'].state == 'on'; ]]]"
entity_3_icon: mdi:thermostat
entity_3_on: "[[[ return states['climate.wohnzimmer_thermostat'].state == 'heat'; ]]]"
entity_4_icon: mdi:speaker
entity_4_on: "[[[ return states['media_player.fernseher'].state != 'off' || states['media_player.nestmini_kueche'].state == 'playing'; ]]]"
I have a Pixel phone so I really like your design! But if youāre not doing a github dw bud, I like the split design and the room cards/graph cards in the room.
Iāll put it on GitHub soon, Iāll let you know
italians do it better!
Thanks for the example!!!
Awesome!
Hi,
Iām not sure were I should place the templats to be able using them with the cards.
Thanks
github added
Great Work! And thanks for sharing. I was wondering how you did the āAnimaliā screen with buttons bigger than others. Would you mind sharing the yaml for the Shenron panel?
Thatās my reptile
Git updated, you will find the whole panel inside cards folder in shenron.yaml
, just the buttons in tiles.yaml
or just the title in horizontal_badge.yaml
.
Btw, I got the tiles code from the āSpeaker control cardsā section of Leonās project.
Thank you so much!
I have the exact same issue here, anyone find a solution?
Sorry in advance for the lamer question.
Iāve only used the standard lovelace interface so far. Tell me step by step where to copy the template, base folders? Where should all these templates and folders be?
I created rounded.yaml file in /config/themes folder
now i have the desired theme in the list. But I donāt know where to go next. How to add cards, how to add entities. Help to understand please.
@Maikl_Sh If you want to do it in gui, you have to add the templates via the raw editor (3 dots top right ā raw editor). Like this
You then add a card in the gui as follows