TexMex
August 20, 2023, 5:01pm
1
Hello folks!
I would like to implement an uptime card like to following, but I really dont know how to do that!
I tried several solutions, but the closest one is represented by the following image:
To do so, I used a custom stack in card, where I positioned two cards horizontally: an entity mushroom card, from which I take the icon only, and a custom uptime card.
Now, my issues are 2:
the mushroom card primary and secondary info are still “occupied” even if I set them to “none”;
the alignment of the uptime status “on” falls under a different line with respect the entity name, even if the custom card options set are the right one.
In the following the code I used:
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-entity-card
entity: binary_sensor.uptimekuma_mexassistant
primary_info: none
secondary_info: none
icon: mdi:home-assistant
icon_color: primary
style: |
ha-card {
border-color: transparent;
}
- type: custom:uptime-card
title_template: MexAssistant
title_adaptive_color: true
status_adaptive_color: true
icon_adaptive_color: false
entity: binary_sensor.uptimekuma_mexassistant
icon: mdi:home-assistant
style: |
ha-card {
border-color: transparent;
}
hours_to_show: 24
update_interval: 600
show:
header: true
status: true
tooltip: true
footer: false
icon: false
alignment:
header: left
status: right
tooltip_first: true
bar:
height: 26
round: 10
spacing: 6
amount: 12
color:
icon: '#40BDF5'
ok: '#5CDD8B'
ko: '#DC3545'
half: '#F8A306'
init:
animation: slide
duration: 0.5
Can someone help me please?
hsec
August 26, 2023, 10:16pm
2
I am, by no means, an expert.
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 1fr
grid-template-areas: |
"left right"
cards:
- type: custom:mushroom-entity-card
entity: binary_sensor.pve_01
view_layout:
grid-area: left
primary_info: none
secondary_info: none
icon: mdi:home-assistant
icon_color: primary
style: |
ha-card {
border-color: transparent !important;
margin: 0px !important;
padding: 0px !important;
height: 100% !important;
}
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:uptime-card
title_template: AdGuard
view_layout:
grid-area: right
title_adaptive_color: false
status_adaptive_color: true
icon_adaptive_color: true
entity: binary_sensor.pve_01
icon: mdi:home-assistant
hours_to_show: 24
update_interval: 600
show:
header: true
title: true
status: true
tooltip: false
footer: false
icon: false
average: false
timeline: false
alignment:
header: left
status: right
tooltip_first: true
bar:
height: 32
round: 10
spacing: 6
amount: 6
color:
icon: '#40BDF5'
ok: '#5CDD8B'
ko: '#DC3545'
half: '#F8A306'
init:
animation: slide
duration: 0.5
style: |
ha-card {
border-color: transparent !important;
padding: 0px !important;
padding-left: 0px !important;
height: 100% !important;
margin-left: -15px !important;
}
.status {
margin-top: -20px !important;
margin-right: -10px !important;
padding-bottom: 2px !important;
padding-right: 0px !important;
padding-left: 0px !important;
}
.header {
padding-bottom: 0px !important;
padding-left: 0px !important;
}
- type: custom:uptime-card
title_template: MexAssistant
view_layout:
grid-area: right
title_adaptive_color: false
status_adaptive_color: true
icon_adaptive_color: true
entity: binary_sensor.pve_01
icon: mdi:home-assistant
hours_to_show: 24
update_interval: 600
show:
header: false
title: false
status: false
tooltip: false
footer: false
icon: false
average: false
timeline: true
alignment:
header: left
status: right
tooltip_first: true
bar:
height: 42
round: 10
spacing: 6
amount: 6
color:
icon: '#40BDF5'
ok: '#5CDD8B'
ko: '#DC3545'
half: '#F8A306'
init:
animation: slide
duration: 0.5
style: |
ha-card {
border-color: transparent !important;
padding: 0px !important;
}
.timeline {
margin-left: -15px !important;
margin-right: -15px !important;
}
style: |
ha-card {
border-color: transparent !important;
padding: 0px !important;
}
1 Like
TexMex
September 8, 2023, 10:30pm
3
It is definitely what I was looking for!
Thank you very much!
1 Like
Nick4
September 12, 2023, 8:18am
4
Nice!
TexMex
September 12, 2023, 12:30pm
5
This is the code I use to group uptime cards in an horizontal stack of 2 elements!
type: horizontal-stack
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
entity: binary_sensor.uptimekuma_service_to_monitor_1
primary: Wireguard
icon_color: blue
badge_icon: >
{% if is_state('binary_sensor.uptimekuma_service_to_monitor_1', 'on')
%}
mdi:check
{% elif is_state('binary_sensor.uptimekuma_service_to_monitor_1',
'unknown') %}
mdi:help-circle
{% else %}
disabled
{% endif %}
badge_color: >
{% if is_state('binary_sensor.uptimekuma_service_to_monitor_1', 'on')
%}
green
{% elif is_state('binary_sensor.uptimekuma_service_to_monitor_1',
'unknown') %}
orange
{% else %}
red
{% endif %}
name: Kuma
icon: si:wireguard
fill_container: true
layout: horizontal
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
.: |
ha-card{
border-color: transparent
}
mushroom-state-info$: |
.primary {
font-size: 15px !important;
position: relative;
top: -10px;
left: 3px;
overflow: visible !important;
color: var(primary-text-color);
font-weight: bold;
text-overflow: ellipsis;
}
.primary:after {
content: "{{ states(config.entity) }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
{% if is_state(config.entity, 'on') %}
color: var(--google-green);
{% else %}
color: var(--google-red);
{% endif %}
font-weight: bolder;
top: 3.5px;
left: 110px;
width: 16px;
height: 16px;
font-size: 14px;
}
- type: custom:uptime-card
entity: binary_sensor.uptimekuma_service_to_monitor_1
hours_to_show: 48
alignment:
tooltip_first: true
show:
footer: false
header: false
status: false
bar:
height: 40
round: 10
spacing: 10
amount: 6
card_mod:
style: |
ha-card {
position: relative;
top: 10px;
left: -55%;
overflow: visible !important;
width: 150%;
border-color: transparent;
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
entity: binary_sensor.uptimekuma_service_to_monitor_1
primary: Dashy
icon_color: blue
badge_icon: |
{% if is_state('binary_sensor.uptimekuma_service_to_monitor_2', 'on') %}
mdi:check
{% elif is_state('binary_sensor.uptimekuma_service_to_monitor_2', 'unknown') %}
mdi:help-circle
{% else %}
disabled
{% endif %}
badge_color: |
{% if is_state('binary_sensor.uptimekuma_service_to_monitor_2', 'on') %}
green
{% elif is_state('binary_sensor.uptimekuma_service_to_monitor_2', 'unknown') %}
orange
{% else %}
red
{% endif %}
name: Dashy
icon: mdi:view-dashboard
fill_container: true
layout: horizontal
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
.: |
ha-card{
border-color: transparent
}
mushroom-state-info$: |
.primary {
font-size: 15px !important;
position: relative;
top: -10px;
left: 3px;
overflow: visible !important;
color: var(primary-text-color);
font-weight: bold;
text-overflow: ellipsis;
}
.primary:after {
content: "{{ states(config.entity) }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
{% if is_state(config.entity, 'on') %}
color: var(--google-green);
{% else %}
color: var(--google-red);
{% endif %}
font-weight: bolder;
top: 3.5px;
left: 110px;
width: 16px;
height: 16px;
font-size: 14px;
}
- type: custom:uptime-card
entity: binary_sensor.uptimekuma_service_to_monitor_2
hours_to_show: 48
alignment:
tooltip_first: true
show:
footer: false
header: false
status: false
bar:
height: 40
round: 10
spacing: 10
amount: 6
card_mod:
style: |
ha-card {
position: relative;
top: 10px;
left: -55%;
overflow: visible !important;
width: 150%;
border-color: transparent;
}
P.s.: I also add the direct link to the dash I saw first and I wasn’t able to find at first: Uptime Mushroom Based Dash
2 Likes
