Kabala
December 29, 2021, 6:40pm
928
with grid card
type: grid
cards:
- type: custom:button-card
entity: sensor.ble_battery_a4c13898aecb
name: Wohnzimmer
show_icon: true
show_label: false
show_name: true
show_state: true
styles:
icon:
- color: var(--card-background-color)
label:
- justify-self: start
- align-self: start
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
- color: ''
name:
- align-self: end
- justify-self: start
- font-weight: bold
- font-size: 15px
- margin-left: 12px
- color: var(--secondary-text-color)
state:
- justify-self: start
- align-self: start
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
img_cell:
- background-color: |
[[[
if (entity.state >= 60) return 'rgba(77, 163, 100, 0.5)';
if (entity.state >= 40) return 'rgba(255, 199, 0, 0.5)';
if (entity.state >= 20) return 'rgba(255, 130, 0, 0.5)';
else return 'gba(255, 0, 0, 0.5)';
]]]
- border-radius: 50%
- place-self: center
- width: 30px
- height: 30px
grid:
- grid-template-areas: '"i n" "i s" "i l"'
- grid-template-columns: min-content auto
- grid-template-rows: min-content min-content
card:
- border-radius: 15px
- box-shadow: null
- padding: 10px
size: 60%
- type: custom:button-card
- type: custom:button-card
- type: custom:button-card
- type: custom:button-card
- type: custom:button-card
- type: custom:button-card
- type: custom:button-card
square: false
columns: 2
1 Like
OzGav
January 1, 2022, 1:29pm
931
Nice. I have stolen a lot of your ideas there!
Kabala
January 1, 2022, 6:54pm
932
I’m happy when I can inspire other people.
type: custom:apexcharts-card
show:
loading: false
graph_span: 24h
header:
title: Dowload / Upload
show: false
show_states: false
colorize_states: true
apex_config:
tooltip:
enabled: true
followCursor: true
grid:
show: false
chart:
height: 130
yaxis:
show: false
labels:
style:
fontSize: 11px
colors: gray
xaxis:
labels:
style:
fontSize: 11px
colors: gray
axisBorder:
show: false
legend:
show: true
fontSize: 11px
labels:
colors: grey
all_series_config:
stroke_width: 1.5
opacity: 0.2
type: area
group_by:
func: avg
duration: 60min
show:
extremas: true
color_list:
- '#bf5e5e'
- '#3b6ba1'
series:
- entity: sensor.fritz_box_7490_ui_gb_received
name: Download
- entity: sensor.fritz_box_7490_ui_gb_sent
name: Upload
5 Likes
This is my Lovelace System Monitoring, It has based me on many ideas in this thread, although I really started with the NUC and took the ideas of these 2 colleagues:
Liam: Nuc System Monitoring Card - #12 by liamstears Nuc System Monitoring Card - #28 by Hs82H
In order to create these cards, I had to use several methods to obtain sensor, a long and rewarding task.
Next step is InfluxDB + Grafana
Greetings
15 Likes
Juve_A
January 14, 2022, 6:37pm
934
This is mine, very simple and just monitoring the essentials, and optimized for mobile.
6 Likes
potts-mike
January 14, 2022, 8:24pm
935
How do you get the pages to swipe like that?
That looks really tidy. Would you mind sharing the config?
Yes of course! Enjoy it! For works properly you need install this HACS:
gap-card
vertical-stack-in-card
button-card
mini-graph-card
bar-card
apexcharts-card
I can’t insert code here because: Body is limited to 32000 characters; you entered 116347 .
So, access here to get the code: Pastebin.com - Locked Paste (the passwd is my nickname)
3 Likes
weemaba999
January 20, 2022, 6:42pm
939
Hi Kejszijo,
Is it possible to share your page.yaml and sensors from solaredge ? I’m using the same Solar inverter and this look more slick than mine
Bart
Kejszijo
January 21, 2022, 2:07pm
940
Hi,
I have Shelly 3EM energy meter which provides the data. From Solaredge inverter I only get the produced energy.
vaidotask
February 2, 2022, 10:06am
941
Thanks for sharing.
Although you have different ways to get those values, in my case I have used Glances.
- platform: rest
resource: http://your_device:61208/api/3/cpu
name: restful_name_device_version
value_template: '{{ "ok" }}'
json_attributes:
- os_name
- linux_distro
- hr_name
Then you need to extract this attributes to generate new sensor, this is the code:
- platform: template
sensors:
restful_name_device_os_name:
friendly_name: "Device X OS name"
value_template: '{{ state_attr("restful_name_device_version", "os_name") }}'
- platform: template
sensors:
restful_name_device_linux_distro:
friendly_name: "Device X Distro"
value_template: '{{ state_attr("restful_name_device_version", "linux_distro") }}'
- platform: template
sensors:
restful_name_device_hr_name:
friendly_name: "Device X HR"
value_template: '{{ state_attr("restful_name_device_version", "hr_name") }}'
In this way you will create 1 sensor for each “json_attribute”, you will be able to treat each data as a sensor and not as an attribute (I personally like it better).
Extra help:
Hi,
I have a RESTful sensor connected to the Domotz Public API . When querying for the internet speed, the reply is an array of the measurements of the last 7 days (see below for an example). I need to get the last element from that array, can I do this in a template? There is no way to be sure in advance how many measurements will be sent through.
The api call does have a way to time-limit the responses to less than 7 days, but that would require me to use a template in the resource: part of t…
Looks very cool, how did you get these elegant “frames” around the “Top Titles” ?
TheStigh
February 3, 2022, 10:28pm
944
Thanks
Just a customized button-card.
yeah, i figured that, im trying to get it in to my theme, i got it rounded ( in my theme ), but i dont get the border_color or : px … so i guess i need to “apply” it to each card , or ?
TheStigh
February 3, 2022, 11:17pm
946
I use anchors (same but different as Declutter Card) to keep the button config as templates.
Put following code ABOVE views:
anchors:
# Makes any card's inactive colors active
card_mod_transparent: &card_mod_transparent
style: |
ha-card {
background-color: transparent; border: none; box-shadow: none;
}
# Makes any card's inactive colors active, with border
card_mod_transparent_border: &card_mod_transparent_border
style: |
ha-card {
background-color: transparent; border: 'solid 1px rgba(57,128,228)'; box-shadow: none;
}
# BUTTON CB HEADER
##################
cb_header: &cb_header
type: "custom:button-card"
color_type: label-card
color: rgb(44, 109, 214)
styles:
card:
- background: none
- height: 5px
- border: "solid 1px rgba(57,128,228)"
# BUTTON VERTICAL SPACER IN H-STACK
###################################
cb_vertical_spacer: &cb_vertical_spacer
type: custom:button-card
color_type: blank-card
styles:
card:
- background: none
- height: 10px
Then You call the CB Header like this:
views:
- id: 0
title: PAGE TITLE
icon: mdi:home-variant
cards:
- type: vertical-stack
cards:
- <<: *cb_header
name: NAME INSIDE THE BOX WITH ROUNDED CORNERS
- <<: *cb_vertical_spacer
- type: horizontal-stack
cards:
- type: custom:button-card
<<: *card_mod_transparent
Use the - <<: *cb_header to call the template.- <<: *cb_vertical_spacer to insert a space between card inside a Horizontal Stack.<<: *card_mod_transparent to call the template to make your card 100% transparent.
You’re good to go!
1 Like
Thanks alot for your help and inspiration, i figured it was “only” a header-bubble, and i got that working, thou i ended up hard-coding it in the “view” , so not using the “anchor” method, i did however used your “idea” , to get a little nicer looking cards
2 Likes
