Feel free to suggest modifications, correct mistakes, rewrite code, but please let us know what you did!
The card’s primary purpose is to provide clear and intuitive feedback about the device’s connectivity status and to allow users to manage alerts based on their preferences. It offers visual cues, color changes, and a straightforward interface for alert control, enhancing the user’s overall experience with the device.
Card Functionality Description:
The card utilizes two key components: the “uptime card” and the “mushroom card.” It incorporates various visual indicators and actions to provide information about the device’s connection status and alert settings.
1. Uptime Card:
The uptime card primarily displays information related to the device’s connectivity status. It features a “timeline bar” that serves as a visual indicator and provides real-time feedback. Colors change based on connectivity status overtime.
2. Mushroom Card:
The mushroom card complements the uptime card by managing the alert system. It offers options to control how alerts are handled and displayed, as well as shows a icon for the device.
Connection Status Indicator:
When the device is connected, the main icon and text color is set to green.
When the device is disconnected, the main icon blinks and the, icon and text color is set to red.
Alert Management:
Alerts can be in one of three states: “on,” “snoozed,” or “off.”
If the device was disconnected, and the alert was previously set to “snoozed,” the alert state automatically resets to “on” when the device is back online.
If the device was disconnected, and the alert was previously set to “off,” it will remain in the “off” state when the device is reconnected.
Users can initiate a “hold action” to cycle through the alert states: “on” > “snoozed” > “off.” This action also updates the corresponding bell icon and color on the mushroom card to reflect the current alert state. Green bell means “on”; Orange bell with ‘z’ inside means “snoozed”; Grey crossed bell means “off”.
Special Scenarios:
If the connection state is “Unknown,” or the alert is set to “off,” the color of all elements of the card is set to grey (disabled), indicating that the device’s status is not determinable or that the alert system is inactive.
Entities created:
- to test device connection
binary_sensor:
- platform: ping
- to set alert mode
input_select:
alert_disabled_internet:
name: Disable disconnection alert for internet
icon: mdi:bell-alert
options:
- 'on'
- 'snoozed'
- 'off'
Automation Created:
- to reset alert mode
automation:
- alias: "Alert Disconnection Reset internet"
description: "Restore Disconnection Alert"
trigger:
- platform: state
entity_id:
- binary_sensor.internet
from: "off"
to: "on"
condition:
- condition: not
conditions:
- condition: state
entity_id: input_select.alert_disabled_internet
state: "off"
action:
- service: input_select.select_option
data:
option: off
target:
entity_id: input_select.alert_disabled_internet
mode: single
Script Created
- to cycle alert mode via hold action
script:
cycle_connection_notification:
sequence:
- choose:
- conditions:
- condition: template
value_template: "{{ is_state(entity_id, 'on') }}"
sequence:
- service: input_select.select_option
data:
option: "off"
target:
entity_id: "{{ entity_id }}"
- conditions:
- condition: template
value_template: "{{ is_state(entity_id, 'off') }}"
sequence:
- service: input_select.select_option
data:
option: snoozed
target:
entity_id: "{{ entity_id }}"
- conditions:
- condition: template
value_template: "{{ is_state(entity_id, 'snoozed') }}"
sequence:
- service: input_select.select_option
data:
option: "on"
target:
entity_id: "{{ entity_id }}"
mode: single
THE CARD
type: custom:stack-in-card
mode: vertical
keep:
margin: false
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: minmax(0, 1fr)
grid-template-rows: auto
grid-template-areas: |
"a b"
"c c"
cards:
- type: custom:mushroom-template-card
view_layout:
grid-area: a
entity: binary_sensor.internet
primary: internet
secondary: |-
{% if is_state(config.entity, 'on') %}
connected
{% elif is_state(config.entity, 'off') %}
disconnected
{% else %}
unknown
{% endif %}
icon: mdi:web
icon_color: |-
{% if is_state('input_select.alert_disabled_internet', ['off',
'snoozed'] ) %}
{% if is_state(config.entity, 'on') %}
#45C669
{% elif is_state(config.entity, 'off') %}
#C66445
{% else %}
disabled
{% endif %}
{% else %}
{% endif %}
fill_container: true
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: call-service
service: script.cycle_connection_notification
service_data:
entity_id: input_select.alert_disabled_internet
card_mod:
style: >-
{% if is_state('input_select.alert_disabled_internet', ['off',
'snoozed'] ) %}
{% if is_state(config.entity, 'on') %}
ha-card {
border: none;
padding: 0px !important;
--primary-text-color: #45C669;
--secondary-text-color: #45C669;
}
{% elif is_state(config.entity, 'off') %}
ha-card {
border: none;
padding: 0px !important;
--primary-text-color: #C66445;
--secondary-text-color: #C66445;
}
{% else %}
{% endif %}
{% else %}
ha-card {
border: none;
padding: 0px !important;
--primary-text-color: var(--disabled-text-color) ;
--secondary-text-color: var(--disabled-text-color) ;
}
ha-state-icon {
color: var(--disabled-text-color) !important;
}
{% endif %}
{% if is_state(config.entity, 'off') and not
is_state('input_select.alert_disabled_internet', 'on')%}
ha-state-icon {
animation: pulse 2s ease-in-out infinite;
}
{% else %}
{% endif %}
- type: custom:mushroom-chips-card
fill_container: true
view_layout:
grid-area: b
style: |-
ha-card {
min-width: 15px;
width: 15px;
}
chips:
- type: template
icon: >-
{% if is_state('input_select.alert_disabled_internet', 'on') %}
mdi:bell-off
{% elif is_state('input_select.alert_disabled_internet', 'off')
%}
mdi:bell
{% else %}
mdi:bell-sleep
{% endif %}
icon_color: >-
{% if is_state('input_select.alert_disabled_internet', 'on') %}
disabled
{% elif is_state('input_select.alert_disabled_internet', 'off')
%}
green
{% else %}
orange
{% endif %}
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |-
ha-card {
--chip-icon-size: 20px;
--chip-height: 10px;
--chip-background: none;
justify-content: center;
width: var(--chip-height) !important;
margin-top: 5px !important;
margin-left: 0px !important;
}
- type: custom:uptime-card
view_layout:
grid-area: c
entity: binary_sensor.internet
hours_to_show: 0.5
update_interval: 30
severity: 10
bar:
height: 36
amount: 36
tap_action:
action: none
init:
animation: slide
slide duration: 0.5
show:
header: false
title: false
icon: false
average: false
footer: false
timeline: true
status: false
card_mod:
style: |-
ha-card {
border: none;
margin-top: -5px ;
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.timeline {
margin-top: 0px;
padding-top: 0px !important;
padding-left: 4px ;
padding-right: 4px;
}
{% if not is_state('input_select.alert_disabled_internet', ['off',
'snoozed']) %}
.bar {
fill: var(--disabled-text-color) !important;
}
{% endif %}