But if i dont use protect and only use NETWORK i can do this integration ?
Can you show your code fro this card with cpu and memory ?
Use the waze integration for this one
Of course.
type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: CPU
secondary: UDM-Pro
icon: phu:unifi
layout: vertical
entity: sensor.unifi_gateway_wan_cpu
icon_color: |2-
{% set bl = states('sensor.unifi_gateway_wan_cpu') | int %}
{% if bl < 10 %} green
{% elif bl < 20 %} green
{% elif bl < 30 %} green
{% elif bl < 40 %} green
{% elif bl < 50 %} orange
{% elif bl < 60 %} orange
{% elif bl < 70 %} red
{% elif bl < 80 %} red
{% elif bl < 90 %} red
{% elif bl < 100 %} red
{% elif bl == 100 %} red
{% else %} grey
{% endif %}
badge_color: ''
tap_action:
action: none
card_mod:
style: |
ha-card {
background: transparent !important;
border-radius: 20px !important;
box-shadow: none !important;
margin: 0px 5px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: none
icon: ''
icon_color: orange
content: '{{ states(''sensor.unifi_gateway_wan_cpu'')}} %'
tap_action:
action: none
card_mod:
style: |
ha-card {
--chip-border-width: 0;
alignment: center
card_mod:
style:
style: |
ha-card {
margin: -2px 0px 12px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--ha-card-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 40px;
--chip-padding: 12px;
--chip-spacing: 0px;
}
card_mod:
style: |
ha-card {
background: rgba(0,0,0,0.2) !important;
border-radius: 20px !important;
margin: 0 5px;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: RAM
secondary: UDM-Pro
icon: mdi:memory
layout: vertical
entity: sensor.unifi_gateway_wan_mem
icon_color: |2-
{% set bl = states('sensor.unifi_gateway_wan_mem') | int %}
{% if bl < 10 %} green
{% elif bl < 20 %} green
{% elif bl < 30 %} green
{% elif bl < 40 %} green
{% elif bl < 50 %} green
{% elif bl < 60 %} green
{% elif bl < 70 %} orange
{% elif bl < 80 %} orange
{% elif bl < 90 %} red
{% elif bl < 100 %} red
{% elif bl == 100 %} red
{% else %} grey
{% endif %}
badge_color: ''
tap_action:
action: none
card_mod:
style: |
ha-card {
background: transparent !important;
border-radius: 20px !important;
box-shadow: none !important;
margin: 0 5px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: none
icon: ''
icon_color: orange
content: '{{ states(''sensor.unifi_gateway_wan_mem'')}} %'
tap_action:
action: none
card_mod:
style: |
ha-card {
--chip-border-width: 0;
alignment: center
card_mod:
style:
style: |
ha-card {
margin: -2px 0px 12px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--ha-card-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 40px;
--chip-padding: 12px;
--chip-spacing: 0px;
}
card_mod:
style: |
ha-card {
background: rgba(0,0,0,0.2) !important;
border-radius: 20px !important;
margin: 0 5px;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: TempƩrature
secondary: UDM-Pro
icon: mdi:thermometer
layout: vertical
entity: sensor.dalg_udm_cpu_temperature
icon_color: |2-
{% set bl = states('sensor.dalg_udm_cpu_temperature') | int %}
{% if bl <= 40 %} green
{% elif bl <= 45 %} orange
{% elif bl >= 50 %} red
{% else %} grey
{% endif %}
badge_color: ''
tap_action:
action: none
card_mod:
style: |
ha-card {
background: transparent !important;
border-radius: 20px !important;
box-shadow: none !important;
margin: 0 5px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: none
icon: ''
icon_color: orange
content: '{{ states(''sensor.dalg_udm_cpu_temperature'')}}Ā°C'
tap_action:
action: none
card_mod:
style: |
ha-card {
--chip-border-width: 0;
alignment: center
card_mod:
style:
style: |
ha-card {
margin: -2px 0px 12px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--ha-card-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 40px;
--chip-padding: 12px;
--chip-spacing: 0px;
}
card_mod:
style: |
ha-card {
background: rgba(0,0,0,0.2) !important;
border-radius: 20px !important;
margin: 0 5px;
}
Thank you so much for the detailed infoā¦ though i didnt understand a major portion of itā¦(not really a programmerā¦ just hobby diyās)ā¦ anywaysā¦ will try to understand the content with time as i proceed furtherā¦ as i develop my dashboard furtherā¦
It counts the active items in the lights, windows, external doors and low batteries groups. If the count is greater than 0, then it turns the notification dot on.
You could replace the weather info card with this:
- type: custom:mushroom-template-card
primary: '{{ state_attr(entity, ''temperature'') | round(1) }} Ā°C'
secondary: |-
{% set conditions = {
'clear-night': 'Clear, night',
'cloudy': 'Cloudy',
'fog': 'Fog',
'hail': 'Hail',
'lightning': 'Lightning',
'lightning-rainy': 'Lightning, rainy',
'partlycloudy': 'Partly cloudy',
'pouring': 'Pouring',
'rainy': 'Rainy',
'snowy': 'Snowy',
'snowy-rainy': 'Snowy, rainy',
'sunny': 'Sunny',
'windy': 'Windy',
'windy-variant': 'Windy',
'exceptional': 'Exceptional'
} %}
{{ conditions[state_attr(entity, 'forecast')[0]['condition']] }}
icon: none
entity: weather.weatherflow_weather_hourly
picture: >-
{% set condition = states(entity) %}
{% if condition == 'partlycloudy' and is_state('sun.sun',
'below_horizon') %}
{% set condition = condition + '-night' %}
{% endif %}
/local/weather_icons/anim/{{ condition }}.svg
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Weather
content:
type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:weather-card
entity: weather.weatherflow_day_based_forecast
number_of_forecasts: '5'
card_mod:
style:
mushroom-state-info$: |
/* Align text on the right */
.container {
transform: scaleX(-1);
text-align: right;
width: fit-content;
}
.: |
ha-card {
/* Move icon to the right */
transform: scaleX(-1);
/* Enlarge icon & remove circular shape */
--icon-size: 42px;
--icon-border-radius: 0;
/* Style secondary text */
--card-secondary-font-weight: normal;
/* Remove styling from card */
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
padding: 0px !important;
transition: all 0s;
}
Could you share or explain what are you using under the hood for sensor.devices_with_low_battery
?
Have a look here:
As you can see 10 covers are open and no red dot
type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: template
content: '{{ states(''sensor.current_date'') }} {{ states(''sensor.time'') }}'
card_mod:
style: |
/* Style date & time */
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-border-width: 0;
}
- type: template
entity: input_boolean.notifications
icon: mdi:bell
tap_action:
action: toggle
hold_action:
action: none
card_mod:
style: |
/* Notification indicator */
ha-card:after {
/* Turn on indicator if there is a notification */
{% set notifications = (expand(states.group.all_lights) | selectattr('state', 'eq', 'on') | list | count)
+ (expand(states.group.all_doors_sensor_entities) | selectattr( 'state', 'eq', 'on') | list | count)
+ (expand(states.cover.volets_maison) | selectattr( 'state', 'eq', 'open') | list | count)
{% if notifications > 0 %}
content: "";
{% endif %}
/* Position & style notification */
position: absolute;
background: rgb(var(--rgb-red));
border-radius: 50%;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
}
alignment: justify
- type: conditional
conditions:
- entity: input_boolean.notifications
state: 'on'
card:
type: custom:mushroom-chips-card
chips:
- type: template
entity: alarm_control_panel.maison
icon: mdi:shield-home
icon_color: |-
{% set alarm_status = states(entity) %}
{% if alarm_status == 'armed_home' %}
green
{% elif alarm_status == 'disarmed' %}
blue
{% elif alarm_status == 'arming' %}
yellow
{% elif alarm_status == 'triggered' %}
red
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Alarm
content:
type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.maison
states:
- armed_home
- armed_away
hold_action:
action: none
- type: template
entity: lock.nuki_porte_entree_lock
icon: '{{ ''mdi:lock'' if is_state(entity, ''locked'') else ''mdi:lock-open'' }}'
icon_color: '{{ ''green'' if is_state(entity, ''locked'') else ''red'' }}'
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Front Door
content:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:frigate-card
cameras:
- camera_entity: camera.nvr_sub
dimensions:
aspect_ratio_mode: dynamic
- type: custom:mushroom-lock-card
entity: lock.nuki_porte_entree_lock
card_mod:
style: |
.content {
}
- type: conditional
conditions:
- entity: group.all_lights
state: 'on'
chip:
type: template
icon: mdi:lightbulb
entity: group.all_lights
content: >
{{ expand(states.group.all_lights) | selectattr('state', 'eq',
'on') | list | count }}
icon_color: amber
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Lights On
content:
type: custom:auto-entities
filter:
include:
- group: group.all_lights
state: 'on'
options:
type: custom:mushroom-light-card
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
- entity_id: group.all_lights
state: 'on'
options:
type: custom:mushroom-light-card
layout: horizontal
secondary_info: none
tap_action:
action: toggle
card_mod:
style: |
/* Style & position All Lights button */
ha-card {
background: color-mix(in srgb, rgb(var(--rgb-state-light)) 10%, var(--card-background-color));
}
:host {
margin: 0px 0px 12px !important;
}
exclude: []
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
card_mod:
style: |
/* Position & style buttons */
.content {
margin: -24px -16px -24px -16px !important;
--ha-card-border-width: 0;
--ha-card-background: none;
--ha-card-box-shadow: 0;
--masonry-view-card-margin: -12px 0px 0px 0px;
}
- type: conditional
conditions:
- entity: group.all_doors_sensor_entities
state: 'on'
chip:
type: template
icon_color: |-
{{ 'green' if is_state('group.all_doors_sensor_entities', 'off')
else 'red' }}
icon: >-
{{ 'mdi:door-closed' if
is_state('group.all_doors_sensor_entities', 'off')
else 'mdi:door-open' }}
entity: group.all_doors_sensor_entities
content: >
{{ expand(states.group.all_doors_sensor_entities) |
selectattr('state', 'eq', 'on') | list | count }}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: AccĆØs Ouverts
content:
type: custom:auto-entities
filter:
include:
- group: group.all_doors_sensor_entities
state: 'on'
options:
type: custom:mushroom-entity-card
layout: horizontal
secondary_info: last-changed
tap_action:
action: none
hold_action:
action: none
exclude: []
show_empty: false
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
card_mod:
style: |
/* Position & style buttons */
.content {
margin: -24px -16px -24px -16px !important;
--ha-card-border-width: 0;
--ha-card-background: none;
--ha-card-box-shadow: 0;
--masonry-view-card-margin: -12px 0px 0px 0px;
}
- type: conditional
conditions:
- entity: cover.volets_maison
state: open
chip:
type: template
entity: cover.volets_maison
content: >
{{ expand(states.cover.volets_maison) | selectattr('state', 'eq',
'open') | list | count }}
icon_color: |-
{{ 'blue' if is_state('cover.volets_maison', 'open')
else 'green' }}
icon: >-
{{ 'mdi:window-shutter-open' if is_state('cover.volets_maison',
'open')
else 'mdi:window-shutter' }}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Volets Ouverts
content:
type: custom:auto-entities
filter:
include:
- group: cover.volets_maison
state: open
options:
type: custom:mushroom-entity-card
layout: horizontal
secondary_info: last-changed
icon_color: brown
tap_action:
action: none
hold_action:
action: none
exclude: []
show_empty: false
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
card_mod:
style: |
/* Position & style buttons */
.content {
margin: -24px -16px -24px -16px !important;
--ha-card-border-width: 0;
--ha-card-background: none;
--ha-card-box-shadow: 0;
--masonry-view-card-margin: -12px 0px 0px 0px;
}
alignment: end
card_mod:
style: |
/* Set margins on notification chips */
ha-card {
margin: var(--chip-spacing) calc(-1 * var(--chip-spacing)) 0px;
transition: all 0s;
}
card_mod:
style: |
/* Remove styling from top card with chips */
ha-card {
/* Allow pseudo elements to display outside card */
overflow: visible !important;
/* Remove gap at top of card */
margin-top: calc(-1 * var(--mush-chip-spacing, 8px));
/* Remove styling from card */
box-shadow: none;
border: none;
background: none;
padding: var(--mush-chip-spacing, 8px);
transition: all 0s;
}
/* Make card sticky at top of page */
:host {
position: sticky;
z-index: 9;
top: var(--header-height);
}
/* Pseudo element to hide card styling when at top */
ha-card:after {
content: "";
/* Make fixed so element scrolls up */
position: fixed;
top: var(--header-height);
/* Adjust height when notifications visible */
height: {{ '104px' if is_state('input_boolean.notifications', 'on') else '60px' }};
/* Set width to match */
width: calc(100% - var(--mush-chip-spacing, 8px));
max-width: calc(var(--column-max-width) - 2 * var(--ha-card-border-width, 1px) - var(--mush-chip-spacing, 8px));
/* Center element on page */
left: 50%;
transform: translateX(-50%);
/* Position between chips and background pseudo elemnt */
z-index: -1;
/* Match background to main card */
background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color));
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
}
/* Pseudo element for background & other card styling */
ha-card:before {
content: "";
/* Position & size card behind chips */
position: absolute;
top: 0px;
left: 0px;
height: 100%;
/* Adjust width to account for border */
width: calc(100% - 2 * var(--ha-card-border-width, 1px));
/* Position card at back */
z-index: -1;
/* Blur content behind card */
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
/* Adjust opacity of card */
background: rgba(var(--rgb-card-background-color), 0.8);
/* Set styling of card */
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
box-shadow: var(--ha-card-box-shadow);
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
}
Foe the weather iād like to replace weatherflow with openweathermap for exemple
Is it possible to add a name to a mushroom chip card type entity?
Simple function idea to find phone. I like it. I just added timeout to it so do will no ring forever if you do not find your phone.
Hello everyone,
I have read this topic and I have gained a lot of inspiration from it!
Iām having a problem with a card that I have build. Itās a card to start my favourite radio stations via a script on one of my Sonos speakers. It works, but itās not visually pleasing. As you can see, there are still some borders and lines that I wish to hide. So I want to create a single card without borders with the information / scripts / volume sliders in it. I guess it is possible via mushroom cards / card mods, but I donāt know how. Can anyone please help me?
This is the code that I have used:
cards:
- cards:
- entity: media_player.sonos_move_keuken
type: media-control
tap_action:
action: more-info
- entity: media_player.sonos_move_keuken
hide:
icon: true
info: true
mute: true
power: true
source: true
volume: true
name: true
controls: true
mini-media-player-progress-height: 1px
progress: true
shortcuts:
buttons:
- data:
entity_id: script.new_script
image: /local/SLAM-MM.png
id: script.turn_on
name: null
type: service
- data:
entity_id: script.new_script_2
image: /local/SLAM40!.png
id: script.turn_on
name: null
type: service
- data:
entity_id: script.new_script_3
image: /local/SLAM Hardstyle.png
id: script.turn_on
name: null
type: service
- data:
entity_id: script.new_script_4
image: /local/SLAMFM.png
id: script.turn_on
name: null
type: service
- data:
entity_id: script.new_script_5
image: /local/Radio 538.png
id: script.turn_on
name: null
type: service
- data:
entity_id: script.new_script_6
image: /local/Radio 538 DD.png
id: script.turn_on
name: null
type: service
columns: 3
show_group_count: true
show_progress: true
type: custom:mini-media-player
volume_stateless: true
- entity: media_player.sonos_move_keuken
hide:
controls: true
icon: true
info: true
max_volume: 100
min_volume: 0
name: hide
play_pause: true
power: true
progress: true
source: true
type: custom:mini-media-player
type: vertical-stack
mode: vertical
type: custom:stack-in-card
Thanks a lot!
Thanks a lot - now I got itā¦
The entity in the chip card was missing too - now perfect
Thatās handled by the pseudo element on the header. have you copied all the code? In particular the bit starting with this:
/* Pseudo element for background & other card styling */
ha-card:before {
content: "";
.
.
.
Youāve left off the closing %}
here:
+ (expand(states.cover.volets_maison) | selectattr( 'state', 'eq', 'open') | list | count) %}
To change weather providers, just change the weather entity to weather.whatever
.
For help styling the mini-media-player
card, you will get a better response posting in the Mini Media Player thread:
or card-mod
thread:
Iāve been using these dashboards so much recently. I appreciate all the work gone into them.
Iāve been using the chips card for a Sonos speaker. Touch to play, touch to pause etc. (In green below)
This is the code:
- type: conditional
conditions:
- entity: media_player.office
state_not: playing
chip:
type: template
entity: media_player.office
icon: mdi:speaker
icon_color: grey
tap_action:
action: call-service
service: sonos.play_queue
data: {}
target:
device_id: 9b3c43e40824141046b290a01ee7f962
Iāve recently expanded my Sonos, and cant figure out where to get the device_id for the new Sonos speaker? Any suggestions?
yes man waze