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
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 
Kr,
Bart
Hi,
I have Shelly 3EM energy meter which provides the data. From Solaredge inverter I only get the produced energy.
So, If you don’t have 3-phase energy monitor, you can’t get this graphs.
Thanks for sharing.
Can you also share your custom sensors config? for example sensor.custom_nas_synology_hardware_version
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:
Thanks
Just a customized button-card.
Need the code?
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 ?
I use anchors (same but different as Declutter Card) to keep the button config as templates.
Then I call them from the later code and can add/modify parameters from the template.
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.
Use the - <<: *cb_vertical_spacer to insert a space between card inside a Horizontal Stack.
Use the <<: *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
Back playin around with my UI as my old one died 12 months ago and I haven’t really needed a UI as automations take care of everything but who doesn’t like a sexy UI.
11 Likes
Very nice indeed, good work!
1 Like
Hi there,
I just received 10 room sensors which each have Temp / Humidity / LUX I have been searching for a nice way to display the informatino from them. Does anyone have any examples that they can share please?
I wouldn’t say my example is anything fancy… but
2 Likes
Thanx Dave!
Could you share a snippet of the code to get the two entity readings side by side like that. I would then as a third for the LUX readings.
I use the custom button card for my dashboard:
Here is the code:
aspect_ratio: 1/1
color: orange
color_off: dodgerblue
color_type: icon
custom_fields:
bath: |
[[[
if (states["input_boolean.bath_mode"].state === 'on')
return `
<span><span style='color: orange;'>${("fürdő mód be")}</span></span> `;
if (states["input_boolean.bath_mode"].state === 'off')
return `<span><span style='color: grey;'>${("fürdő mód ki")}</span></span> `;
]]]
humidity: |
[[[
return `<ha-icon
icon="mdi:water-percent"
style="width: 14px; height: 14px; color: dodgerblue;">
</ha-icon><span>${states["sensor.humidity_158d00023f4eae"].state}%</span>`
]]]
illumination: |
[[[
return `<ha-icon
icon="mdi:track-light"
style="width: 14px; height: 14px; color: deepskyblue;">
</ha-icon> <span>${states["sensor.illumination_158d0002b48dd2"].state}lx</span>`
]]]
light: |
[[[
if (states["light.bathroom"].state === 'on')
return `<ha-icon
icon="bha:ceiling-lamp" style="width: 12px; height: 12px; color: var(--button-card-light-color); "></ha-icon>
<span><span style='color: var(--text-color-sensor);'>${("lámpa be")}</span></span> `;
if (states["light.bathroom"].state === 'off')
return `<ha-icon
icon="bha:ceiling-lamp" style="width: 12px; height: 12px; color: grey;"></ha-icon>
<span><span style='color: grey;'>${("lámpa ki")}</span></span> `;
]]]
move2: |
[[[
if (states["binary_sensor.motion_sensor_158d0002b48dd2"].state === 'on')
return `
<span><span style='color: var(--text-color-sensor);'>${("foglalt")}</span></span> `;
if (states["binary_sensor.motion_sensor_158d0002b48dd2"].state === 'off')
return `<span><span style='color: ivory;'>${("szabad")}</span></span> `;
]]]
nightlight: |
[[[
if (states["light.bathroom_nightlight"].state === 'on')
return `<ha-icon
icon="mdi:weather-night" style="width: 12px; height: 12px; color: var(--button-card-light-color); "></ha-icon>
<span><span style='color: var(--text-color-sensor);'>${("holdfény be")}</span></span> `;
if (states["light.bathroom_nightlight"].state === 'off')
return `<ha-icon
icon="mdi:weather-night" style="width: 12px; height: 12px; color: grey;"></ha-icon>
<span><span style='color: grey;'>${("holdfény ki")}</span></span> `;
]]]
temp: |
[[[
return `
${states['sensor.temperature_158d00023f4eae'].state}°C</span></span>`
]]]
entity: light.bathroom
icon: mdi:shower
name: fürdő
styles:
card:
- background: linear-gradient(rgba(255,255,255,0.1) 50%, rgba(0,0,20,0.3) 50%)
- border-radius: 15px
- border: solid 1.5px rgba(57,128,228)
- padding: 4%
- color: ivory
- font-size: 11px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
custom_fields:
bath:
- align-self: middle
- justify-self: start
- font-size: 10px
- font-weight: null
humidity:
- justify-self: end
- align-self: middle
- font-size: 10px
- color: deepskyblue
- font-weight: bold
illumination:
- padding-bottom: 1px
- align-self: middle
- justify-self: start
light:
- align-self: middle
- justify-self: start
move2:
- align-self: middle
- justify-self: start
- font-size: 10px
- font-weight: bold
nightlight:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
temp:
- justify-self: end
- font-size: 14px
- font-weight: bold
- margin-top: '-10px'
grid:
- grid-template-areas: >-
"i temp""n humidity""move2 move2""light light""nightlight
nightlight""illumination illumination""bath bath"
- grid-template-rows: 1fr 1fr min-content min-content min-content min-content
- grid-template-columns: 1fr 1fr
icon:
- width: 45%
img_cell:
- justify-content: start
- align-items: start
- margin: none
name:
- font-weight: bold
- font-size: 12px
- color: white
- align-self: middle
- justify-self: start
tap_action:
action: fire-dom-event
browser_mod:
command: popup
card:
entities:
- entity: light.bathroom
hide_when_off: true
toggle: true
type: custom:slider-entity-row
- entity: light.bathroom_nightlight
hide_when_off: true
toggle: true
type: custom:slider-entity-row
- entity: input_boolean.bath_mode
show_header_toggle: false
style: |
ha-card {
--ha-card-background: 'rgba(250,0,20,0.8)';
background-image: url("/local/pictures/cardback.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: cover;
background-position: center;
border: solid 1.5px rgba(57,128,228);
border-radius: 15px;
box-shadow: none;
}
type: entities
title: fürdőszoba
type: custom:button-card
2 Likes
Great! thank you, Over night imade a very simple standard cards option as below. I was hoping to find a dedicated sensor card from someones custom_component that might mimic the actual look of the physical sensore…
Sure. I’m pretty sure you can add a third row with this custom card.
type: entities
entities:
- entity: sensor.lounge_multisensor_air_temperature
type: custom:multiple-entity-row
secondary_info: last-changed
entities:
- entity: sensor.lounge_multisensor_air_temperature
name: false
- entity: sensor.lounge_multisensor_humidity
name: false
name: Lounge
show_state: false
- entity: sensor.ensuite_ms6_air_temperature
type: custom:multiple-entity-row
secondary_info: last-changed
entities:
- entity: sensor.ensuite_ms6_air_temperature
name: false
- entity: sensor.ensuite_ms6_humidity
name: false
name: Ensuite
show_state: false
- entity: sensor.kitchen_multi_sensor_temperature
type: custom:multiple-entity-row
secondary_info: last-changed
entities:
- entity: sensor.kitchen_multi_sensor_temperature
name: false
- entity: sensor.kitchen_multi_sensor_relative_humidity
name: false
name: Kitchen
show_state: false
- entity: sensor.passage_ms6_air_temperature
type: custom:multiple-entity-row
secondary_info: last-changed
entities:
- entity: sensor.passage_ms6_air_temperature
name: false
- entity: sensor.passage_ms6_humidity
name: false
name: Passage
show_state: false
- entity: sensor.gym_multisensor_air_temperature
type: custom:multiple-entity-row
secondary_info: last-changed
entities:
- entity: sensor.gym_multisensor_air_temperature
name: false
- entity: sensor.gym_multisensor_humidity
name: false
name: Gym
show_state: false
- entity: sensor.garage_multisensor_air_temperature_2
type: custom:multiple-entity-row
secondary_info: last-changed
entities:
- entity: sensor.garage_multisensor_air_temperature_2
name: false
- entity: sensor.garage_multisensor_humidity_2
name: false
name: Garage
show_state: false
- entity: sensor.shed_multisensor_air_temperature
type: custom:multiple-entity-row
secondary_info: last-changed
entities:
- entity: sensor.shed_multisensor_air_temperature
name: false
- entity: sensor.shed_multisensor_humidity
name: false
name: Shed
show_state: false
title: House Temps & Humidity
show_header_toggle: false
1 Like
Hi Sean,
Just looking at an old posting of yours and I am interested in the counting you did of your domains. What I would like to make in my control panel is a percentage available of entities. Imagine 100 entities of which 88 are up and available, hence 88%. This a measure of health check of the system. This is my system monitor which contains of 2 pages. Operational parameters of the system and the Wi-Fi coverage:
So could you tell me how you established that count?
1 Like