Sorry. I do not remember exactly how I managed this. And to be honest, I am currently removing the cardmod aspect to come back to bare mushroom aspects.
Sorry.
Did you try to restart from the code I shared ?
Maybe if you share your code some cardmod expert may help.
I have just created a new Tesla Powerwall dashboard:
The standard card are entity mushroom card in a grid;
There is no card-mod code
You will need this custom card:
here is the code of the bars:
type: custom:bar-card
name: ' '
height: 65px
min: '0'
max: '6'
color: '#89b4fa'
positions:
icon: 'off'
indicator: 'off'
value: 'off'
entities:
- entity: sensor.powerwall_load_now
entity_row: true
tap_action:
action: navigate
navigation_path: energia
Hope this thread remains a list of inspirations without various requests, for that there is the mai n mashroom thread.
Hello, I like the tiles for the rooms that you and Mrobi have made. But I have a problem in both cases. On my wall tablet, when I use the tiles the Home Assistant application freezes. I donât see any error message in the log. Do you have any idea why it does this?
Lights Card
I´ve created a lights-card that shows the number of lights, that a âonâ with a button to turn all lights off.
It looks like this:
Here is an animation that shows its behaviour:
The Icon turns grey if all lights are off and gets yellow if one ore more lights are on.
To archieve this i
Here ist the yaml-code of the template-sensor:
template:
sensor:
- unique_id: eingeschaltete_lichter
state: "{{expand(state_attr('light.verwendete_lichter', 'entity_id'))|selectattr('state','eq','on')|map(attribute='entity_id')|list|count|int}}"
Disclaimer: The Code for âstateâ is not my code. Found this somewhere in this forum. Made by a much more skilled person than i am.
Here is the yaml-code of the card:
type: custom:button-card
entity: sensor.template_eingeschaltete_lichter
show_name: false
show_state: false
show_icon: false
styles:
card:
- overflow: unset
- padding: 0px
grid:
- grid-template-areas: '"lights offswitch"'
- grid-template-columns: auto 3rem
custom_fields:
lights:
card:
type: custom:mushroom-template-card
entity: '[[[ return entity.entity_id ]]]'
icon: mdi:lightbulb-on-outline
icon_color: |
{% if states(config.entity) > "0" %}
amber
{% else %}
grey
{% endif %}
primary: |
{% if is_state(config.entity, "1") %}
{{ states(config.entity) }} Licht
{% else %}
{{ states(config.entity) }} Lichter
{% endif %}
secondary: eingeschaltet
tap_action:
action: navigate
navigation_path: /lovelace/light-new
card_mod:
style: |
ha-card {
padding: 3px !important;
border: none !important;
box-shadow: none !important;
text-align: left !important;
}
offswitch:
card:
type: custom:button-card
icon: mdi:lightbulb-off-outline
show_name: false
show_state: false
show_icon: true
size: 70%
color: var(--primary-color)
tap_action:
action: call-service
service: light.turn_off
service_data:
entity_id: light.verwendete_lichter
styles:
card:
- padding: 0px
- border: none
- background: none
- box-shadow: none
Can you share pls what it looks like now?
This âroom cardâ is now just the vertical stack in of a template card an a line of chips.
They are arranged in a grid of:
And mixed with other mushroom chips, entities and templates in the dashboard.
The code is almost unchanged compared to the previous post, I just removed the cardmod aspects.
This is almost bare mushroom, 99% managed throug UI.The only part not manageable in the UI are tap action leading to popup throug fire-dom-event.
Requirements:
Hereafter the example of the living room card:
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: group.lumieres_salon
icon: mdi:sofa
icon_color: |
{% if is_state(entity, 'on') %}
#03A9F4
{% else %}
grey
{% endif %}
primary: Salon
secondary: '{{ states(''sensor.echo_jeanne_temperature'') }}°C'
layout: horizontal
tap_action:
action: navigate
navigation_path: /lovelace-smartphone/salon
double_tap_action:
action: navigate
navigation_path: /lovelace-smartphone/salon
hold_action:
action: toggle
badge_icon: |
{% if is_state('binary_sensor.echo_salon_mouvement', 'on') %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
badge_color: |
{% if is_state('binary_sensor.echo_salon_mouvement', 'on') %}
orange
{% else %}
grey
{% endif %}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: plant.alocatia
icon: mdi:flower
icon_color: |-
{% if is_state(entity, 'problem') %}
orange
{% else %}
grey
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Plante Marsupilami
content:
type: custom:mod-card
card:
type: custom:flower-card
entity: plant.alocatia
show_bars:
- moisture
- temperature
- illuminance
- conductivity
battery_sensor: sensor.alocasia_zebrina_battery
- type: template
entity: media_player.echo_jeanne
icon: mdi:play-pause
icon_color: |-
{% if is_state(entity, 'playing') %}
#03A9F4
{% else %}
grey
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Echo salon
content:
type: custom:stack-in-card
cards:
- type: custom:mini-media-player
entity: media_player.echo_jeanne
source: full
volume_stateless: false
group: true
artwork: full-cover
tts:
platform: alexa
entity_id: media_player.echo_jeanne
type: announce
shortcuts:
hide_when_off: true
columns: 3
buttons:
- name: Playlist Jeanne
type: AMAZON_MUSIC
id: Playlist Jeanne
- name: RTL2
type: custom
id: joue la station RTL deux
- name: Pop- Rock
type: custom
id: joue du pop rock
- name: Rock
type: custom
id: joue du rock
- name: Musique douce
type: custom
id: joue de la musique douce
- name: Piano
type: custom
id: joue de la musique au piano
- name: Queen
type: custom
id: joue du Queen
- name: Vianney
type: custom
id: joue du Vianney
- name: Louane
type: custom
id: joue du Louane
- name: Playlist Jeanne
type: AMAZON_MUSIC
id: Playlist Jeanne sur le groupe rez_de_chaussee
icon: mdi:multicast
- name: RTL2
type: custom
id: >-
joue la station RTL deux sur le groupe
rez_de_chaussee
icon: mdi:multicast
- name: Pop- Rock
type: custom
id: joue du pop rock sur le groupe rez_de_chaussee
icon: mdi:multicast
- name: Rock
type: custom
id: joue du rock sur le groupe rez_de_chaussee
icon: mdi:multicast
- name: Musique douce
type: custom
id: >-
joue de la musique douce sur le groupe
rez_de_chaussee
icon: mdi:multicast
- name: Piano
type: custom
id: >-
joue de la musique au piano sur le groupe
rez_de_chaussee
icon: mdi:multicast
- name: Queen
type: custom
id: joue du Queen sur le groupe rez_de_chaussee
icon: mdi:multicast
- name: Vianney
type: custom
id: joue du Vianney sur le groupe rez_de_chaussee
icon: mdi:multicast
- name: Louane
type: custom
id: joue du Louane sur le groupe rez_de_chaussee
icon: mdi:multicast
hold_action:
action: navigate
navigation_path: /lovelace-smartphone/echo
- type: template
entity: cover.salon
hold_action:
action: toggle
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Volets du salon
content:
type: vertical-stack
cards:
- type: custom:mushroom-cover-card
entity: cover.volet_du_salon_apero
name: Volet Apero
show_position_control: true
show_tilt_position_control: false
show_buttons_control: true
- type: custom:mushroom-cover-card
entity: cover.volet_du_salon_tv
name: Volet TV
show_position_control: true
show_tilt_position_control: false
show_buttons_control: true
icon: |-
{% if is_state(entity, 'open') %}
mdi:window-shutter-open
{% elif is_state(entity, 'closed') %}
mdi:window-shutter
{% else %}
mdi:window-shutter-alert
{% endif %}
icon_color: |-
{% if is_state(entity, 'open') %}
grey
{% elif is_state(entity, 'closed') %}
grey
{% else %}
orange
{% endif %}
- type: template
entity: light.0x84ba20fffe4b2581
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Lumières salon
content:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.0x84ba20fffe4b2581
name: Petite Lampe
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: false
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.lampadaire
use_light_color: false
show_brightness_control: false
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.elephants
use_light_color: false
show_brightness_control: false
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.cerisier
use_light_color: false
show_brightness_control: false
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
icon: mdi:lightbulb
hold_action:
action: toggle
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
alignment: end
Template card is using more ressources than the other mushroom cards.
There is a deep use of templates here, that might be the reason.
Try, when not mandatory, to replace the template card by an entity card (and simplify the primary and secondary informations) to save ressources.
Merci for the follow up, but eventually I gave up on this type of tiles and created some from custom:button-card which work just fine.
hallo nice can you share code or this cardâs ?
updated version of the theme that works with the 2023.4.x release
also some color changes on the navbar itself.
---
Navbar_New:
card-mod-theme: "Navbar_New"
header-height: "60px"
card-mod-view-yaml: |
"*:first-child$": |
#columns .column > * {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
}
# Move navbar
card-mod-root-yaml: |
ha-tabs$: |
#tabsContent {
width: 97%;
}
paper-icon-button {
display: none;
}
.: |
@media (orientation: portrait) {
a.menu-link[target="_blank"], ha-button-menu, ha-menu-button, [main-title] {
display: none !important;
}
div#view{
transform: initial;
padding: 0 !important;
position: fixed !important;
margin: 0 !important;
width: 100%;
height: 100% !important;
}
.header {
top: auto !important;
bottom: 0px !important;
box-shadow: var(--footer-shadow);
height: var(--header-height) !important;
}
.toolbar {
height: var(--header-height) !important;
padding: 10px 0px !important;
background: var( --ha-card-background, var(--card-background-color) );
}
#view {
margin-top: calc(-1 * var(--header-height)) !important;
padding-bottom: var(--header-height) !important;
}
ha-tabs {
--paper-tabs-selection-bar-color: var(--header-tab-indicator-color) !important;
--mdc-icon-size: 26px;
display: flex;
justify-content: space-between;
padding: 10px;
margin-top: 15px;
height: var(--header-height) !important;
}
paper-tab[aria-selected=true] {
color: var(--header-active-tab-color);
background-color: var(--header-active-tab-bg-color);
}
paper-tab {
color: rgb(var(--mush-rgb-disabled));
--paper-tab-ink: var(--card-background-color);
border-radius: 25px;
height: 30px;
padding: 0 20px;
}
.main-title {
padding-bottom: 10px;
}
.mdc-icon-button {
padding-bottom: 10px;
}
# Header / Footer
header-active-tab-color: "rgb(var(--paper-tab-selected))"
header-active-tab-bg-color: "var(--card-background-color)"
header-all-tabs-color: "rgb(var(--mush-rgb-disabled))"
header-tab-indicator-color: "var(--card-background-color)"
app-header-text-color: "var(--primary-text-color)"
app-header-background-color: "var(--primary-background-color)"
paper-tabs-selection-bar-color: "var(--card-background-color)"
footer-shadow: "var(--card-background-color)"
# Background
# background-color: '#191919'
# primary-background-color: 'var(--background-color)'
# Card
ha-card-border-radius: 12px
ha-card-border-width: 0px
# card-background-color: 'var(--ha-card-background)'
# ha-card-background: '#353535'
# Mushroom layout
mush-spacing: 12px
# Title
mush-title-padding: 24px 12px 16px
mush-title-spacing: 12px
mush-title-font-size: 24px
mush-title-font-weight: normal
mush-title-line-height: 1.2
# Subtitle
mush-subtitle-font-size: 16px
mush-subtitle-font-weight: normal
mush-subtitle-line-height: 1.2
# Card
mush-card-primary-font-size: 14px
mush-card-secondary-font-size: 12px
mush-card-primary-font-weight: bold
mush-card-secondary-font-weight: bolder
mush-card-primary-line-height: 1.5
mush-card-secondary-line-height: 1.5
# Chip
mush-chip-spacing: 8px
mush-chip-padding: 0 0.25em
mush-chip-height: 36px
mush-chip-border-radius: 18px
mush-chip-font-size: 0.3em
mush-chip-font-weight: bold
mush-chip-icon-size: 0.5em
mush-chip-avatar-padding: 0.1em
mush-chip-avatar-border-radius: 50%
mush-chip-background: var(--ha-card-background)
# Control
mush-control-border-radius: 12px
mush-control-height: 42px
mush-control-button-ratio: 1
mush-control-icon-size: 0.5em
# Slider
mush-slider-threshold: 10
# Badge
mush-badge-size: 16px
mush-badge-icon-size: 0.75em
mush-badge-border-radius: 50%
# Icon
mush-icon-border-radius: 50%
mush-icon-size: 42px
mush-icon-symbol-size: 0.5em
# Colors
mush-rgb-red: 244, 67, 54
mush-rgb-pink: 233, 30, 99
mush-rgb-purple: 156, 39, 176
mush-rgb-deep-purple: 103, 58, 183
mush-rgb-indigo: 63, 81, 181
mush-rgb-blue: 33, 150, 243
mush-rgb-light-blue: 3, 169, 244
mush-rgb-cyan: 0, 188, 212
mush-rgb-teal: 0, 150, 136
mush-rgb-green: 76, 175, 80
mush-rgb-light-green: 139, 195, 74
mush-rgb-lime: 205, 220, 57
mush-rgb-yellow: 255, 235, 59
mush-rgb-amber: 255, 193, 7
mush-rgb-orange: 255, 152, 0
mush-rgb-deep-orange: 255, 87, 34
mush-rgb-brown: 121, 85, 72
mush-rgb-grey: 158, 158, 158
mush-rgb-blue-grey: 96, 125, 139
mush-rgb-black: 0, 0, 0
mush-rgb-white: 255, 255, 255
mush-rgb-info: var(--mush-rgb-blue)
mush-rgb-success: var(--mush-rgb-green)
mush-rgb-warning: var(--mush-rgb-orange)
mush-rgb-danger: var(--mush-rgb-red)
mush-rgb-state-fan: var(--mush-rgb-green)
mush-rgb-state-light: var(--mush-rgb-orange)
mush-rgb-state-entity: var(--mush-rgb-blue)
mush-rgb-state-switch: var(--mush-rgb-blue)
mush-rgb-state-alarm-disarmed: var(--mush-rgb-info)
mush-rgb-state-alarm-armed: var(--mush-rgb-success)
mush-rgb-state-alarm-triggered: var(--mush-rgb-danger)
mush-rgb-state-person-home: var(--mush-rgb-success)
mush-rgb-state-person-not-home: var(--mush-rgb-danger)
mush-rgb-state-person-zone: var(--mush-rgb-info)
mush-rgb-state-person-unknown: var(--mush-rgb-grey)
mush-rgb-state-cover-open: var(--mush-rgb-blue)
mush-rgb-state-cover-closed: var(--mush-rgb-disabled)
mush-rgb-state-climate-auto: var(--mush-rgb-green);
mush-rgb-state-climate-cool: var(--mush-rgb-blue);
mush-rgb-state-climate-dry: var(--mush-rgb-orange);
mush-rgb-state-climate-fan-only: var(--mush-rgb-blue-grey);
mush-rgb-state-climate-heat: var(--mush-rgb-deep-orange);
mush-rgb-state-climate-heat-cool: var(--mush-rgb-green);
mush-rgb-state-climate-idle: var(--mush-rgb-grey);
mush-rgb-state-climate-off: var(--mush-rgb-disabled);
# You must keep this to support light/dark theme
modes:
light:
mush-rgb-disabled: 189, 189, 189
paper-tab-selected: 33, 150, 243
dark:
mush-rgb-disabled: 111, 111, 111
paper-tab-selected: 255, 255, 255
do you have card-mod installed?
if yes, put that code in a yaml file, paste it in \themes\navbar, reload themes and apply it in your profile
Sorry, seems to work on iOS but not on PC with Edge
oh nah, it´s only on mobile.
Here are a couple of modified climate cards, created by combining some cards from the main Mushroom thread:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-climate-card
entity: climate.back_bedroom
name: Back Bedroom
hvac_modes:
- heat
- auto
- 'off'
layout: horizontal
- type: custom:mushroom-climate-card
entity: climate.back_bedroom
primary_info: none
secondary_info: none
show_temperature_control: true
icon_type: none
type: custom:vertical-stack-in-card
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-entity-card
entity: sensor.master_bedroom_temperature
primary_info: state
secondary_info: name
name: Temperature
icon_color: green
- type: custom:mushroom-entity-card
primary_info: state
secondary_info: name
name: Humidity
icon_color: blue
entity: sensor.master_bedroom_humidity
- type: custom:mini-graph-card
entities:
- entity: sensor.master_bedroom_temperature
name: Temperature
color: var(--green-color)
- entity: sensor.master_bedroom_humidity
name: Humidity
color: var(--blue-color)
y_axis: secondary
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
- type: horizontal-stack
cards:
- type: custom:mushroom-climate-card
entity: climate.master_bedroom
primary_info: none
secondary_info: none
icon_type: none
show_temperature_control: true
- type: custom:mushroom-climate-card
entity: climate.master_bedroom
primary_info: none
secondary_info: none
icon_type: none
hvac_modes:
- auto
- heat
- 'off'
Is any chance to add to this climate preset mode ? ALso is any chance to change icon on mode button ?
Thank you so much for sharing! Thatâs exactly what I was looking for.
Br Andre
Nice! And thanks for sharing. Any idea on how to show a list of all lights that are currently on instead of âmore informationâ?