Home Assistant - Zeigt her eure Dashboards!

[henfri]

Ja, vor knapp 10 Jahren sah das fast schicker aus

Leistung ist Arbeit pro Zeit...

Ich hab mit Edomi auch mal angefangen. Aber was das für eine Arbeit war... Und dann noch ne eigene Visu für Mobil...
Vielleicht hat sich das später geändert.

[oefchen]

voll OT Du bist !

[GameOfLife]

Hallo hier zeige ich Euch mein Dashboard, ich arbeite viel mit Pop Up's da diese sich super auf dem Handy durch scrollen lassen. Fertig ist man natürlich nie. ^^

[crewo]

GameOfLife Danke für die Screenshots, sieht sehr sinnvoll aufgebaut aus. Kannst du kurz erläutern, wie du diese Zusammenfassung machst:

ha-sum.png

[GameOfLife]

Das sind im Grunde alles manuelle Karten die in reinem yaml Code geschrieben wurden, ich habe dazu Chatgpt benutzt. Ich habe ihm klare Vorgaben gegeben und immer wieder angepasst bis es so aussah. Im Grunde brauchst du nicht viel dafür, Grundvoraussetzung dafür ist natürlich das du die Entitäten ordentlich angelegt und gelabelt hast, nur so geht's es da er beim anzeigen von Lichter zum Beispiel das auch über Label's überprüft usw.

Um beim draufklicken es als Pop-up zu bekommen braucht man Browser Mod findest du in HACS

Wenn du nur die Wohnzimmer Karte meinst kann ich dir wenn du willst auch den Code nur für das Wohnzimmer schicken.

[crewo]

Ja schick mir gern mal den Code, das wäre super, gerne hier wenn ok für dich, andere werden sich auch dafür interessieren.

[GameOfLife]

Hier der Code der Raumkarte Wohnzimmer, im Anhang habe ich noch aufgelistet welche Entitäten ich habe und welche Kartentypen benutzt wurden.

type: custom:mod-card
card_mod:
style: |
ha-card {
--primary-text-color: #ffffff !important;
--secondary-text-color: rgba(255,255,255,0.72) !important;
--card-primary-color: #ffffff !important;
--card-secondary-color: rgba(255,255,255,0.72) !important;
--mush-card-primary-color: #ffffff !important;
--mush-card-secondary-color: rgba(255,255,255,0.72) !important;
border-radius: 24px;
overflow: hidden;
padding: 12px;
background: linear-gradient(180deg, #20252b 0%, #0a0c0f 100%) !important;
border: 3px solid #000000 !important;
color: white !important;
box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}
card:
type: custom:mushroom-template-card
primary: Wohnzimmer
secondary: >
{% set active = expand([
'light.licht_wohnzimmer_decke',
'light.licht_essbereich',
'switch.wohnzimmer_palme',
'switch.fenster_steckdose_wohnzimmer',
'light.wled_tv_wand_haupt',
'light.wled_wohnzimmer',
'switch.licht_wohnzimmer_stehlampe',
'media_player.tv_box_2'
]) | selectattr('state','eq','on') | list | count %} {%
set fenster_offen =
(is_state('binary_sensor.wohnzimmer_seite_offen', 'on') or
is_state('binary_sensor.wohnzimmer_hinten_offen', 'on'))
%} {% set fenster_kipp =
(is_state('binary_sensor.wohnzimmer_seite_kipp', 'on') or
is_state('binary_sensor.wohnzimmer_hinten_kipp', 'on')) %}
{% set terrasse_offen =
is_state('binary_sensor.terrassentur_offen','on') %} {%
set terrasse_kipp =
is_state('binary_sensor.terrassentur_kipp','on') %} {{
active }} Geräte aktiv {% if fenster_kipp or terrasse_kipp
%}
· Fenster/Tür gekippt
{% elif fenster_offen or terrasse_offen %}
· Fenster/Tür offen
{% else %}
· Alles geschlossen
{% endif %}
icon: mdi:sofa
icon_color: white
layout: horizontal
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Wohnzimmer
icon: mdi:sofa
initial_style: klein
style_sequence:
- klein
popup_styles:
- style: klein
include_styles:
- normal
styles: |
ha-dialog {
--popup-width: 460px;
--popup-min-width: 320px;
--popup-max-width: 520px;
--popup-max-height: 82vh;
--popup-border-radius: 22px;
--padding-x: 8px;
--padding-y: 8px;
}
.container .content {
padding: 6px !important;
}
adaptive: false
content:
type: custom:mod-card
card_mod:
style: |
ha-card {
--primary-text-color: #ffffff !important;
--secondary-text-color: rgba(255,255,255,0.72) !important;
--card-primary-color: #ffffff !important;
--card-secondary-color: rgba(255,255,255,0.72) !important;
--mush-card-primary-color: #ffffff !important;
--mush-card-secondary-color: rgba(255,255,255,0.72) !important;
border-radius: 24px;
overflow: hidden;
padding: 12px;
background: linear-gradient(180deg, #20252b 0%, #0a0c0f 100%) !important;
border: 3px solid #000000 !important;
color: white !important;
box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}
card:
type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Wohnzimmer
secondary: >
{% set active = expand([
'light.licht_wohnzimmer_decke',
'light.licht_essbereich',
'switch.wohnzimmer_palme',
'switch.fenster_steckdose_wohnzimmer',
'light.wled_tv_wand_haupt',
'light.wled_wohnzimmer',
'switch.licht_wohnzimmer_stehlampe',
'media_player.tv_box_2'
]) | selectattr('state','eq','on') | list |
count %} {% set fenster_offen =
(is_state('binary_sensor.wohnzimmer_seite_offen',
'on') or
is_state('binary_sensor.wohnzimmer_hinten_offen',
'on')) %} {% set fenster_kipp =
(is_state('binary_sensor.wohnzimmer_seite_kipp',
'on') or
is_state('binary_sensor.wohnzimmer_hinten_kipp',
'on')) %} {% set terrasse_offen =
is_state('binary_sensor.terrassentur_offen','on')
%} {% set terrasse_kipp =
is_state('binary_sensor.terrassentur_kipp','on')
%} {{ active }} Geräte aktiv {% if
fenster_kipp or terrasse_kipp %}
· Fenster/Tür gekippt
{% elif fenster_offen or terrasse_offen %}
· Fenster/Tür offen
{% else %}
· Alles geschlossen
{% endif %}
icon: mdi:sofa
icon_color: white
layout: horizontal
tap_action:
action: none
card_mod:
style: |
ha-card {
--primary-text-color: #ffffff !important;
--secondary-text-color: rgba(255,255,255,0.72) !important;
--card-primary-color: #ffffff !important;
--card-secondary-color: rgba(255,255,255,0.72) !important;
--mush-card-primary-color: #ffffff !important;
--mush-card-secondary-color: rgba(255,255,255,0.72) !important;
background:
{% set active = expand([
'light.licht_wohnzimmer_decke',
'light.licht_essbereich',
'switch.wohnzimmer_palme',
'switch.fenster_steckdose_wohnzimmer',
'light.wled_tv_wand_haupt',
'light.wled_wohnzimmer',
'switch.licht_wohnzimmer_stehlampe'
]) | selectattr('state','eq','on') | list | count %}
{% set open = (is_state('binary_sensor.wohnzimmer_seite_offen', 'on') or is_state('binary_sensor.wohnzimmer_hinten_offen', 'on')) or is_state('binary_sensor.terrassentur_offen','on') %}
{% set tilted = (is_state('binary_sensor.wohnzimmer_seite_kipp', 'on') or is_state('binary_sensor.wohnzimmer_hinten_kipp', 'on')) or is_state('binary_sensor.terrassentur_kipp','on') %}
{% if tilted %}
linear-gradient(135deg, rgba(190,95,0,0.78), rgba(50,20,0,0.60)) !important;
{% elif open %}
linear-gradient(135deg, rgba(190,0,0,0.78), rgba(50,0,0,0.60)) !important;
{% elif active > 0 %}
linear-gradient(135deg, rgba(0,85,95,0.40), rgba(0,0,0,0.35)) !important;
{% else %}
rgba(0,0,0,0.36) !important;
{% endif %}
border: 2px solid #000000 !important;
border-radius: 20px;
margin-bottom: 10px;
color: white !important;
}
- type: grid
columns: 2
square: false
cards:
- type: custom:mushroom-light-card
entity: light.licht_wohnzimmer_decke
name: Deckenlicht
icon: mdi:ceiling-light
use_light_color: true
show_brightness_control: true
collapsible_controls: true
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--primary-text-color: #ffffff !important;
--secondary-text-color: rgba(255,255,255,0.72) !important;
--card-primary-color: #ffffff !important;
--card-secondary-color: rgba(255,255,255,0.72) !important;
--mush-card-primary-color: #ffffff !important;
--mush-card-secondary-color: rgba(255,255,255,0.72) !important;
min-height: 96px;
background:
{% if is_state('light.licht_wohnzimmer_decke','on') %}
rgba(120,80,0,0.40) !important;
{% else %}
rgba(0,0,0,0.32) !important;
{% endif %}
border: 2px solid #000000 !important;
border-radius: 18px;
color: white !important;
}
- type: custom:mushroom-light-card
entity: light.licht_essbereich
name: Essbereich
icon: mdi:table-chair
use_light_color: true
show_brightness_control: true
collapsible_controls: true
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--primary-text-color: #ffffff !important;
--secondary-text-color: rgba(255,255,255,0.72) !important;
--card-primary-color: #ffffff !important;
--card-secondary-color: rgba(255,255,255,0.72) !important;
--mush-card-primary-color: #ffffff !important;
--mush-card-secondary-color: rgba(255,255,255,0.72) !important;
min-height: 96px;
background:
{% if is_state('light.licht_essbereich','on') %}
rgba(120,80,0,0.40) !important;
{% else %}
rgba(0,0,0,0.32) !important;
{% endif %}
border: 2px solid #000000 !important;
border-radius: 18px;
color: white !important;
}
- type: custom:mushroom-template-card
entity: switch.wohnzimmer_palme
primary: Palme
secondary: >
{% if
is_state('switch.wohnzimmer_palme','on')
%}
Beleuchtet
{% else %}
Aus
{% endif %}
icon: mdialm-tree
icon_color: >
{% if
is_state('switch.wohnzimmer_palme','on')
%}
yellow
{% else %}
grey
{% endif %}
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--primary-text-color: #ffffff !important;
--secondary-text-color: rgba(255,255,255,0.72) !important;
--card-primary-color: #ffffff !important;
--card-secondary-color: rgba(255,255,255,0.72) !important;
--mush-card-primary-color: #ffffff !important;
--mush-card-secondary-color: rgba(255,255,255,0.72) !important;
min-height: 96px;
background:
{% if is_state('switch.wohnzimmer_palme','on') %}
rgba(0,90,40,0.38) !important;
{% else %}
rgba(0,0,0,0.32) !important;
{% endif %}
border: 2px solid #000000 !important;
border-radius: 18px;
color: white !important;
}
- type: custom:mushroom-template-card
entity: switch.fenster_steckdose_wohnzimmer
primary: Fenstersteckdose
secondary: >
{% if
is_state('switch.fenster_steckdose_wohnzimmer','on ')
%}
Eingeschaltet
{% else %}
Ausgeschaltet
{% endif %}
icon: mdiower-socket-eu
icon_color: >
{% if
is_state('switch.fenster_steckdose_wohnzimmer','on ')
%}
green
{% else %}
grey
{% endif %}
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--primary-text-color: #ffffff !important;
--secondary-text-color: rgba(255,255,255,0.72) !important;
--card-primary-color: #ffffff !important;
--card-secondary-color: rgba(255,255,255,0.72) !important;
--mush-card-primary-color: #ffffff !important;
--mush-card-secondary-color: rgba(255,255,255,0.72) !important;
min-height: 96px;
background:
{% if is_state('switch.fenster_steckdose_wohnzimmer','on ') %}
rgba(0,90,40,0.38) !important;
{% else %}
rgba(0,0,0,0.32) !important;
{% endif %}
border: 2px solid #000000 !important;
border-radius: 18px;
color: white !important;
}
- type: custom:mushroom-light-card
entity: light.wled_tv_wand_haupt
name: TV Wand
icon: mdi:led-strip-variant
use_light_color: true
show_brightness_control: true
collapsible_controls: true
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--primary-text-color: #ffffff !important;
--secondary-text-color: rgba(255,255,255,0.72) !important;
--card-primary-color: #ffffff !important;
--card-secondary-color: rgba(255,255,255,0.72) !important;
--mush-card-primary-color: #ffffff !important;
--mush-card-secondary-color: rgba(255,255,255,0.72) !important;
min-height: 96px;
background:
{% if is_state('light.wled_tv_wand_haupt','on') %}
rgba(90,0,120,0.38) !important;
{% else %}
rgba(0,0,0,0.32) !important;
{% endif %}
border: 2px solid #000000 !important;
border-radius: 18px;
color: white !important;
}
- type: custom:mushroom-light-card
entity: light.wled_wohnzimmer
name: WLED Wohnzimmer
icon: mdi:led-strip-variant
use_light_color: true
show_brightness_control: true
collapsible_controls: true
tap_action:
action: perform-action
perform_action: script.turn_on
target:
entity_id: script.wled_wohnzimmer_smart_toggle
hold_action:
action: none
card_mod:
style: |
ha-card {
--primary-text-color: #ffffff !important;
--secondary-text-color: rgba(255,255,255,0.72) !important;
--card-primary-color: #ffffff !important;
--card-secondary-color: rgba(255,255,255,0.72) !important;
--mush-card-primary-color: #ffffff !important;
--mush-card-secondary-color: rgba(255,255,255,0.72) !important;
min-height: 96px;
background:
{% if is_state('light.wled_wohnzimmer','on') %}
rgba(90,0,120,0.38) !important;
{% else %}
rgba(0,0,0,0.32) !important;
{% endif %}
border: 2px solid #000000 !important;
border-radius: 18px;
color: white !important;
}
- type: custom:mushroom-template-card
entity: light.wled_wohnzimmer
primary: Farbe & Weiß Wohnzimmer
secondary: Farbe · Weiß · Helligkeit
icon: mdialette
icon_color: >
{% if is_state('light.wled_wohnzimmer','on')
%}
purple
{% else %}
grey
{% endif %}
layout: horizontal
tap_action:
action: more-info
hold_action:
action: none
card_mod:
style: |
ha-card {
--primary-text-color: #ffffff !important;
--secondary-text-color: rgba(255,255,255,0.72) !important;
--card-primary-color: #ffffff !important;
--card-secondary-color: rgba(255,255,255,0.72) !important;
--mush-card-primary-color: #ffffff !important;
--mush-card-secondary-color: rgba(255,255,255,0.72) !important;
min-height: 78px;
background:
{% if is_state('light.wled_wohnzimmer','on') %}
rgba(90,0,120,0.30) !important;
{% else %}
rgba(0,0,0,0.28) !important;
{% endif %}
border: 2px solid #000000 !important;
border-radius: 18px;
color: white !important;
}
- type: custom:mushroom-template-card
entity: light.wled_tv_wand_haupt
primary: Farbe & Weiß TV Wand
secondary: Farbe · Weiß · Helligkeit
icon: mdialette
icon_color: >
{% if
is_state('light.wled_tv_wand_haupt','on') %}
purple
{% else %}
grey
{% endif %}
layout: horizontal
tap_action:
action: more-info
hold_action:
action: none
card_mod:
style: |
ha-card {
--primary-text-color: #ffffff !important;
--secondary-text-color: rgba(255,255,255,0.72) !important;
--card-primary-color: #ffffff !important;
--card-secondary-color: rgba(255,255,255,0.72) !important;
--mush-card-primary-color: #ffffff !important;
--mush-card-secondary-color: rgba(255,255,255,0.72) !important;
min-height: 78px;
background:
{% if is_state('light.wled_tv_wand_haupt','on') %}
rgba(90,0,120,0.30) !important;
{% else %}
rgba(0,0,0,0.28) !important;
{% endif %}
border: 2px solid #000000 !important;
border-radius: 18px;
color: white !important;
}
- type: grid
columns: 2
square: false
cards:
- type: custom:mushroom-template-card
entity: switch.licht_wohnzimmer_stehlampe
primary: Stehlampe
secondary: >
{% if
is_state('switch.licht_wohnzimmer_stehlampe','on')
%}
Beleuchtet
{% else %}
Aus
{% endif %}
icon: mdi:floor-lamp-torchiere
icon_color: >
{% if
is_state('switch.licht_wohnzimmer_stehlampe','on')
%}
green
{% else %}
grey
{% endif %}
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--primary-text-color: #ffffff !important;
--secondary-text-color: rgba(255,255,255,0.72) !important;
--card-primary-color: #ffffff !important;
--card-secondary-color: rgba(255,255,255,0.72) !important;
--mush-card-primary-color: #ffffff !important;
--mush-card-secondary-color: rgba(255,255,255,0.72) !important;
min-height: 96px;
background:
{% if is_state('switch.licht_wohnzimmer_stehlampe','on') %}
rgba(0,90,40,0.38) !important;
{% else %}
rgba(0,0,0,0.32) !important;
{% endif %}
border: 2px solid #000000 !important;
border-radius: 18px;
color: white !important;
}
- type: custom:mushroom-template-card
entity: binary_sensor.wohnzimmer_seite_offen
primary: Wohnzimmer Seite
secondary: >
{% if
is_state('binary_sensor.wohnzimmer_seite_kipp',
'on') %}
GEKIPPT
{% elif
is_state('binary_sensor.wohnzimmer_seite_offen',
'on') %}
OFFEN
{% else %}
GESCHLOSSEN
{% endif %}
icon: >
{% if
is_state('binary_sensor.wohnzimmer_seite_kipp',
'on') %}
mdi:window-open-variant
{% elif
is_state('binary_sensor.wohnzimmer_seite_offen',
'on') %}
mdi:window-open
{% else %}
mdi:window-closed
{% endif %}
icon_color: >
{% if
is_state('binary_sensor.wohnzimmer_seite_kipp',
'on') %}
amber
{% elif
is_state('binary_sensor.wohnzimmer_seite_offen',
'on') %}
red
{% else %}
green
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--primary-text-color: #ffffff !important;
--secondary-text-color: rgba(255,255,255,0.72) !important;
--card-primary-color: #ffffff !important;
--card-secondary-color: rgba(255,255,255,0.72) !important;
--mush-card-primary-color: #ffffff !important;
--mush-card-secondary-color: rgba(255,255,255,0.72) !important;
min-height: 84px;
background:
{% if is_state('binary_sensor.wohnzimmer_seite_kipp', 'on') %}
rgba(140,90,0,0.52) !important;
{% elif is_state('binary_sensor.wohnzimmer_seite_offen', 'on') %}
rgba(120,0,0,0.58) !important;
{% else %}
rgba(0,0,0,0.32) !important;
{% endif %}
border: 2px solid #000000 !important;
border-radius: 18px;
color: white !important;
}
- type: custom:mushroom-template-card
entity: binary_sensor.wohnzimmer_hinten_offen
primary: Wohnzimmer Hinten
secondary: >
{% if
is_state('binary_sensor.wohnzimmer_hinten_kipp',
'on') %}
GEKIPPT
{% elif
is_state('binary_sensor.wohnzimmer_hinten_offen',
'on') %}
OFFEN
{% else %}
GESCHLOSSEN
{% endif %}
icon: >
{% if
is_state('binary_sensor.wohnzimmer_hinten_kipp',
'on') %}
mdi:window-open-variant
{% elif
is_state('binary_sensor.wohnzimmer_hinten_offen',
'on') %}
mdi:window-open
{% else %}
mdi:window-closed
{% endif %}
icon_color: >
{% if
is_state('binary_sensor.wohnzimmer_hinten_kipp',
'on') %}
amber
{% elif
is_state('binary_sensor.wohnzimmer_hinten_offen',
'on') %}
red
{% else %}
green
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--primary-text-color: #ffffff !important;
--secondary-text-color: rgba(255,255,255,0.72) !important;
--card-primary-color: #ffffff !important;
--card-secondary-color: rgba(255,255,255,0.72) !important;
--mush-card-primary-color: #ffffff !important;
--mush-card-secondary-color: rgba(255,255,255,0.72) !important;
min-height: 84px;
background:
{% if is_state('binary_sensor.wohnzimmer_hinten_kipp', 'on') %}
rgba(140,90,0,0.52) !important;
{% elif is_state('binary_sensor.wohnzimmer_hinten_offen', 'on') %}
rgba(120,0,0,0.58) !important;
{% else %}
rgba(0,0,0,0.32) !important;
{% endif %}
border: 2px solid #000000 !important;
border-radius: 18px;
color: white !important;
}
- type: custom:mushroom-template-card
entity: binary_sensor.terrassentur_offen
primary: Terrassentür
secondary: >
{% if
is_state('binary_sensor.terrassentur_kipp',
'on') %}
Gekippt
{% elif
is_state('binary_sensor.terrassentur_offen',
'on') %}
Offen
{% else %}
Geschlossen
{% endif %}
icon: >
{% if
is_state('binary_sensor.terrassentur_kipp',
'on') %}
mdi:door-closed-lock
{% elif
is_state('binary_sensor.terrassentur_offen',
'on') %}
mdi:door-open
{% else %}
mdi:door-closed
{% endif %}
icon_color: >
{% if
is_state('binary_sensor.terrassentur_kipp',
'on') %}
amber
{% elif
is_state('binary_sensor.terrassentur_offen',
'on') %}
red
{% else %}
green
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--primary-text-color: #ffffff !important;
--secondary-text-color: rgba(255,255,255,0.72) !important;
--card-primary-color: #ffffff !important;
--card-secondary-color: rgba(255,255,255,0.72) !important;
--mush-card-primary-color: #ffffff !important;
--mush-card-secondary-color: rgba(255,255,255,0.72) !important;
min-height: 96px;
background:
{% if is_state('binary_sensor.terrassentur_kipp', 'on') %}
rgba(120,80,0,0.38) !important;
{% elif is_state('binary_sensor.terrassentur_offen', 'on') %}
rgba(120,0,0,0.45) !important;
{% else %}
rgba(0,80,0,0.32) !important;
{% endif %}
border: 2px solid #000000 !important;
border-radius: 18px;
color: white !important;
}
- type: custom:mushroom-template-card
entity: scene.relax
primary: Relax
secondary: |
{% set aktiv =
is_state('switch.wohnzimmer_palme', 'on')
and is_state('light.wled_tv_wand_haupt', 'on')
and is_state('light.licht_kuche_theke', 'off')
and is_state('light.licht_kuche_decke', 'off')
and is_state('switch.licht_wohnzimmer_stehlampe', 'off')
%} {% if aktiv %}
Aktiv
{% else %}
Nicht aktiv
{% endif %}
icon: mdi:sofa
icon_color: |
{% set aktiv =
is_state('switch.wohnzimmer_palme', 'on')
and is_state('light.wled_tv_wand_haupt', 'on')
and is_state('light.licht_kuche_theke', 'off')
and is_state('light.licht_kuche_decke', 'off')
and is_state('switch.licht_wohnzimmer_stehlampe', 'off')
%} {% if aktiv %}
yellow
{% else %}
grey
{% endif %}
layout: horizontal
tap_action:
action: perform-action
perform_action: scene.turn_on
target:
entity_id: scene.relax
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--primary-text-color: #ffffff !important;
--secondary-text-color: rgba(255,255,255,0.72) !important;
--card-primary-color: #ffffff !important;
--card-secondary-color: rgba(255,255,255,0.72) !important;
--mush-card-primary-color: #ffffff !important;
--mush-card-secondary-color: rgba(255,255,255,0.72) !important;
min-height: 96px;
background:
linear-gradient(
135deg,
rgba(105, 35, 145, 0.82),
rgba(48, 12, 72, 0.88)
) !important;
border: 2px solid #000000 !important;
border-radius: 18px;
color: white !important;
}
- type: custom:mushroom-title-card
title: Heizung
subtitle: Wohnzimmer
- type: custom:mushroom-template-card
entity: climate.wohnzimmer
primary: Wohnzimmer Heizung
secondary: >
{% set ist_raw =
state_attr('climate.wohnzimmer','current_temperatu re')
%} {% set soll_raw =
state_attr('climate.wohnzimmer','temperature')
%} {% set ventil =
states('sensor.wohnzimmer_heizung_stellwert')
%} {% set action =
state_attr('climate.wohnzimmer','hvac_action')
%} {% if ist_raw is not none and soll_raw is
not none %}
{% set ist = ist_raw | float %}
{% set soll = soll_raw | float %}
{% set diff = ist - soll %}
{% if action == 'heating' %}
Heizt ·
{% elif action == 'idle' %}
Leerlauf ·
{% endif %}
{{ ist | round(1) }} °C ·
{% if diff > 0.2 %}
{{ diff | round(1) }} Grad über Soll
{% elif diff < -0.2 %}
{{ (diff * -1) | round(1) }} Grad unter Soll
{% else %}
Soll erreicht
{% endif %}
· Ventil {{ ventil if ventil not in ['unknown','unavailable','none'] else '—' }} %
{% else %}
Warten auf KNX-Werte
{% endif %}
icon: mdi:radiator
icon_color: >
{% if
state_attr('climate.wohnzimmer','hvac_action')
== 'heating' %}
orange
{% else %}
white
{% endif %}
layout: horizontal
tap_action:
action: more-info
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--primary-text-color: #ffffff !important;
--secondary-text-color: rgba(255,255,255,0.72) !important;
--card-primary-color: #ffffff !important;
--card-secondary-color: rgba(255,255,255,0.72) !important;
--mush-card-primary-color: #ffffff !important;
--mush-card-secondary-color: rgba(255,255,255,0.72) !important;
background:
{% set temp = state_attr('climate.wohnzimmer','current_temperatu re') %}
{% if temp is none %}
linear-gradient(135deg, rgba(80,80,80,0.45), rgba(0,0,0,0.35)) !important;
{% elif temp | float < 19 %}
linear-gradient(135deg, rgba(0,70,180,0.58), rgba(0,0,0,0.35)) !important;
{% elif temp | float < 21 %}
linear-gradient(135deg, rgba(0,130,180,0.48), rgba(0,0,0,0.35)) !important;
{% elif temp | float < 24 %}
linear-gradient(135deg, rgba(0,110,80,0.42), rgba(0,0,0,0.35)) !important;
{% elif temp | float < 26 %}
linear-gradient(135deg, rgba(180,100,0,0.52), rgba(0,0,0,0.35)) !important;
{% else %}
linear-gradient(135deg, rgba(180,0,0,0.58), rgba(0,0,0,0.35)) !important;
{% endif %}
border: 2px solid #000000 !important;
border-radius: 20px;
margin-bottom: 10px;
color: white !important;
}
- type: custom:mushroom-climate-card
entity: climate.wohnzimmer
name: Heizung
show_temperature_control: true
hvac_modes:
- heat
- 'off'
tap_action:
action: more-info
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--primary-text-color: #ffffff !important;
--secondary-text-color: rgba(255,255,255,0.72) !important;
--card-primary-color: #ffffff !important;
--card-secondary-color: rgba(255,255,255,0.72) !important;
--mush-card-primary-color: #ffffff !important;
--mush-card-secondary-color: rgba(255,255,255,0.72) !important;
margin-bottom: 10px;
background:
{% set temp = state_attr('climate.wohnzimmer','current_temperatu re') %}
{% if temp is none %}
radial-gradient(circle at 50% 40%, rgba(80,80,80,0.35), rgba(0,0,0,0.34)) !important;
{% elif temp | float < 19 %}
radial-gradient(circle at 50% 40%, rgba(0,80,180,0.38), rgba(0,0,0,0.34)) !important;
{% elif temp | float < 21 %}
radial-gradient(circle at 50% 40%, rgba(0,130,180,0.32), rgba(0,0,0,0.34)) !important;
{% elif temp | float < 24 %}
radial-gradient(circle at 50% 40%, rgba(0,130,80,0.30), rgba(0,0,0,0.34)) !important;
{% elif temp | float < 26 %}
radial-gradient(circle at 50% 40%, rgba(180,100,0,0.36), rgba(0,0,0,0.34)) !important;
{% else %}
radial-gradient(circle at 50% 40%, rgba(180,0,0,0.42), rgba(0,0,0,0.34)) !important;
{% endif %}
border: 2px solid #000000 !important;
border-radius: 20px;
color: white !important;
overflow: hidden;
}
- type: grid
columns: 3
square: false
cards:
- type: custom:mushroom-template-card
entity: sensor.wohnzimmer_heizung_stellwert
primary: Ventil
secondary: >
{% set v =
states('sensor.wohnzimmer_heizung_stellwert')
%} {{ v if v not in
['unknown','unavailable','none'] else
'—' }} %
icon: mdi:valve
icon_color: >
{% set v =
states('sensor.wohnzimmer_heizung_stellwert')
| float(0) %} {% if v > 60 %}
red
{% elif v >= 45 and v <= 55 %}
amber
{% elif v > 0 %}
orange
{% else %}
grey
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--primary-text-color: #ffffff !important;
--secondary-text-color: rgba(255,255,255,0.72) !important;
--card-primary-color: #ffffff !important;
--card-secondary-color: rgba(255,255,255,0.72) !important;
--mush-card-primary-color: #ffffff !important;
--mush-card-secondary-color: rgba(255,255,255,0.72) !important;
min-height: 84px;
background: rgba(0,0,0,0.32) !important;
border: 2px solid #000000 !important;
border-radius: 18px;
color: white !important;
}
- type: custom:mushroom-template-card
entity: climate.wohnzimmer
primary: Status
secondary: >
{% set action =
state_attr('climate.wohnzimmer','hvac_action')
%} {% if action == 'heating' %}
Heizt
{% elif action == 'idle' %}
Leerlauf
{% else %}
{{ states('climate.wohnzimmer') }}
{% endif %}
icon: mdi:radiator
icon_color: >
{% if
state_attr('climate.wohnzimmer','hvac_action')
== 'heating' %}
orange
{% else %}
grey
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--primary-text-color: #ffffff !important;
--secondary-text-color: rgba(255,255,255,0.72) !important;
--card-primary-color: #ffffff !important;
--card-secondary-color: rgba(255,255,255,0.72) !important;
--mush-card-primary-color: #ffffff !important;
--mush-card-secondary-color: rgba(255,255,255,0.72) !important;
min-height: 84px;
background: rgba(0,0,0,0.32) !important;
border: 2px solid #000000 !important;
border-radius: 18px;
color: white !important;
}
- type: custom:mushroom-template-card
entity: climate.wohnzimmer
primary: Soll
secondary: >
{% set soll =
state_attr('climate.wohnzimmer','temperature')
%} {{ soll if soll is not none else '—'
}} °C
icon: mdi:target
icon_color: cyan
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--primary-text-color: #ffffff !important;
--secondary-text-color: rgba(255,255,255,0.72) !important;
--card-primary-color: #ffffff !important;
--card-secondary-color: rgba(255,255,255,0.72) !important;
--mush-card-primary-color: #ffffff !important;
--mush-card-secondary-color: rgba(255,255,255,0.72) !important;
min-height: 84px;
background: rgba(0,0,0,0.32) !important;
border: 2px solid #000000 !important;
border-radius: 18px;
color: white !important;
}
- type: custom:mushroom-title-card
title: Android-Box
subtitle: Steuerung
card_mod:
style: |
ha-card {
background: transparent !important;
box-shadow: none !important;
padding: 8px 4px 0 4px !important;
color: white !important;
}
- type: custom:button-card
entity: media_player.tv_box_2
grid_options:
columns: 12
rows: auto
show_name: false
show_icon: false
show_state: false
tap_action:
action: none
card_mod:
style: |
:host {
width: 100% !important;
display: block !important;
box-sizing: border-box !important;
}

ha-card {
width: 100% !important;
box-sizing: border-box !important;
}
custom_fields:
content:
card:
type: vertical-stack
cards:
- type: grid
columns: 2
square: false
card_mod:
style: |
root {
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
}

root > * {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
cards:
- type: custom:button-card
entity: media_player.tv_box_2
show_name: false
show_icon: false
show_state: false
tap_action:
action: more-info
custom_fields:
cover: |
[[[
const boxState = entity.state;
const remote = states['remote.tv_box'];
const activity =
(remote?.attributes?.current_activity || '').toLowerCase();

const apps = {
'de.swr.avp.ard.tv': {
name: 'ARD Mediathek',
logo: '/local/tv/ard.png'
},
'tv.arte.plus7': {
name: 'Arte',
logo: '/local/tv/arte.png.png'
},
'com.disney.disneyplus': {
name: 'Disney+',
logo: '/local/tv/disney.png'
},
'de.prosiebensat1digital.seventv': {
name: 'Joyn',
logo: '/local/tv/joyn.png'
},
'org.xbmc.kodi': {
name: 'Kodi',
logo: '/local/tv/kodi.png'
},
'com.netflix.ninja': {
name: 'Netflix',
logo: '/local/tv/netflix.png'
},
'com.amazon.amazonvideo.livingroom': {
name: 'Prime Video',
logo: '/local/tv/prime.png'
},
'com.qnap.qmediatv': {
name: 'QuMagie',
logo: '/local/tv/qumagie.png'
},
'de.rtli.tvnow': {
name: 'RTL+',
logo: '/local/tv/rtlplus.png'
},
'com.angrygoat.android.sbplayer': {
name: 'SB Player',
logo: '/local/tv/sbplayer.png.png'
},
'com.spotify.tv.android': {
name: 'Spotify',
logo: '/local/tv/spotify.png'
},
'com.google.android.youtube.tv': {
name: 'YouTube',
logo: '/local/tv/youtube.png'
},
'com.zdf.android.mediathek': {
name: 'ZDF',
logo: '/local/tv/zdf.png'
}
};

let logo;

if (
boxState === 'off' ||
boxState === 'unavailable'
) {
logo = '/local/tv/androidbox_off.png';
} else if (apps[activity]) {
logo = apps[activity].logo;
} else {
logo = '/local/tv/androidbox_ready.png';
}

return `
<div style="
width:68px;
height:68px;
display:flex;
align-items:center;
justify-content:center;
border-radius:15px;
background:rgba(255,255,255,0.05);
overflow:hidden;
">
<img
src="${logo}"
style="
max-width:60px;
max-height:60px;
object-fit:contain;
"
>
</div>
`;
]]]
title: |
[[[
const boxState = entity.state;
const remote = states['remote.tv_box'];
const activity =
(remote?.attributes?.current_activity || '').toLowerCase();

const names = {
'de.swr.avp.ard.tv': 'ARD Mediathek',
'tv.arte.plus7': 'Arte',
'com.disney.disneyplus': 'Disney+',
'de.prosiebensat1digital.seventv': 'Joyn',
'org.xbmc.kodi': 'Kodi',
'com.netflix.ninja': 'Netflix',
'com.amazon.amazonvideo.livingroom': 'Prime Video',
'com.qnap.qmediatv': 'QuMagie',
'de.rtli.tvnow': 'RTL+',
'com.angrygoat.android.sbplayer': 'SB Player',
'com.spotify.tv.android': 'Spotify',
'com.google.android.youtube.tv': 'YouTube',
'com.zdf.android.mediathek': 'ZDF'
};

if (
boxState === 'off' ||
boxState === 'unavailable'
) return 'Android-Box';

return names[activity] || 'Android-Box';
]]]
status: |
[[[
const boxState = entity.state;
const remote = states['remote.tv_box'];
const activity =
(remote?.attributes?.current_activity || '').toLowerCase();

const names = {
'de.swr.avp.ard.tv': 'ARD Mediathek',
'tv.arte.plus7': 'Arte',
'com.disney.disneyplus': 'Disney+',
'de.prosiebensat1digital.seventv': 'Joyn',
'org.xbmc.kodi': 'Kodi',
'com.netflix.ninja': 'Netflix',
'com.amazon.amazonvideo.livingroom': 'Prime Video',
'com.qnap.qmediatv': 'QuMagie',
'de.rtli.tvnow': 'RTL+',
'com.angrygoat.android.sbplayer': 'SB Player',
'com.spotify.tv.android': 'Spotify',
'com.google.android.youtube.tv': 'YouTube',
'com.zdf.android.mediathek': 'ZDF'
};

if (
boxState === 'off' ||
boxState === 'unavailable'
) {
return '● Ausgeschaltet';
}

const currentApp = names[activity];

if (!currentApp) {
return '● Eingeschaltet · Bereit';
}

const player = states['media_player.tv_box'];
const playerApp =
(player?.attributes?.app_name || '').toLowerCase();

let playerMatches = false;

if (currentApp === 'Prime Video' && playerApp.includes('prime')) playerMatches = true;
if (currentApp === 'Netflix' && playerApp.includes('netflix')) playerMatches = true;
if (currentApp === 'YouTube' && playerApp.includes('youtube')) playerMatches = true;
if (currentApp === 'Disney+' && playerApp.includes('disney')) playerMatches = true;
if (currentApp === 'RTL+' && (playerApp.includes('rtl') || playerApp.includes('tvnow'))) playerMatches = true;
if (currentApp === 'Spotify' && playerApp.includes('spotify')) playerMatches = true;
if (currentApp === 'Kodi' && playerApp.includes('kodi')) playerMatches = true;
if (currentApp === 'Joyn' && playerApp.includes('joyn')) playerMatches = true;
if (currentApp === 'ZDF' && playerApp.includes('zdf')) playerMatches = true;
if (currentApp === 'ARD Mediathek' && playerApp.includes('ard')) playerMatches = true;
if (currentApp === 'Arte' && playerApp.includes('arte')) playerMatches = true;

if (playerMatches && player) {
if (player.state === 'playing') return '▶ Wiedergabe läuft';
if (player.state === 'paused') return 'Ⅱ Pausiert';
if (player.state === 'buffering') return '◌ Wird geladen';
}

return '● ' + currentApp + ' geöffnet';
]]]
styles:
card:
- width: 100%
- min-width: 0
- max-width: 100%
- height: 120px
- box-sizing: border-box
- padding: 12px
- overflow: hidden
- border-radius: 18px
- background: rgba(15,15,15,0.92)
- border: 2px solid rgba(0,0,0,0.90)
- box-shadow: none
grid:
- width: 100%
- min-width: 0
- grid-template-areas: '"cover title" "cover status"'
- grid-template-columns: 78px minmax(0, 1fr)
- grid-template-rows: 1fr 1fr
custom_fields:
cover:
- grid-area: cover
- justify-self: start
- align-self: center
title:
- grid-area: title
- justify-self: start
- align-self: end
- min-width: 0
- max-width: 100%
- font-size: 17px
- font-weight: 700
- padding-bottom: 3px
- white-space: nowrap
- overflow: hidden
- text-overflow: ellipsis
status:
- grid-area: status
- justify-self: start
- align-self: start
- min-width: 0
- max-width: 100%
- font-size: 11px
- opacity: 0.72
- white-space: nowrap
- overflow: hidden
- text-overflow: ellipsis
- type: custom:button-card
entity: media_player.tv_box_2
icon: mdiower
name: |
[[[
return entity.state === 'off'
? 'Android-Box einschalten'
: 'Android-Box ausschalten';
]]]
tap_action:
action: call-service
service: media_player.toggle
target:
entity_id: media_player.tv_box_2
styles:
card:
- width: 100%
- min-width: 0
- max-width: 100%
- height: 120px
- box-sizing: border-box
- overflow: hidden
- border-radius: 18px
- background: rgba(15,15,15,0.92)
- border: 2px solid rgba(0,0,0,0.90)
- box-shadow: none
grid:
- width: 100%
- min-width: 0
- grid-template-areas: '"i" "n"'
- grid-template-rows: 65px 35px
icon:
- width: 34px
- color: '#03a9e8'
name:
- width: 100%
- max-width: 100%
- font-size: 12px
- font-weight: 600
- white-space: normal
- text-align: center
- line-height: 15px
- padding-left: 8px
- padding-right: 8px
- box-sizing: border-box
- type: grid
columns: 3
square: false
cards:
- type: custom:button-card
show_name: false
show_icon: false
styles:
card:
- height: 82px
- background: transparent
- border: none
- box-shadow: none
- type: custom:button-card
icon: mdi:chevron-up
show_name: false
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.tv_box
data:
command: DPAD_UP
styles:
card:
- height: 82px
- border-radius: 18px
- background: rgba(15,15,15,0.92)
- border: 2px solid rgba(0,0,0,0.90)
icon:
- width: 38px
- type: custom:button-card
show_name: false
show_icon: false
styles:
card:
- height: 82px
- background: transparent
- border: none
- box-shadow: none
- type: custom:button-card
icon: mdi:chevron-left
show_name: false
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.tv_box
data:
command: DPAD_LEFT
styles:
card:
- height: 82px
- border-radius: 18px
- background: rgba(15,15,15,0.92)
- border: 2px solid rgba(0,0,0,0.90)
icon:
- width: 38px
- type: custom:button-card
name: OK
show_name: true
show_icon: false
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.tv_box
data:
command: DPAD_CENTER
styles:
card:
- height: 82px
- border-radius: 18px
- background: rgba(15,15,15,0.92)
- border: 2px solid rgba(0,0,0,0.90)
name:
- font-size: 18px
- font-weight: 700
- type: custom:button-card
icon: mdi:chevron-right
show_name: false
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.tv_box
data:
command: DPAD_RIGHT
styles:
card:
- height: 82px
- border-radius: 18px
- background: rgba(15,15,15,0.92)
- border: 2px solid rgba(0,0,0,0.90)
icon:
- width: 38px
- type: custom:button-card
show_name: false
show_icon: false
styles:
card:
- height: 82px
- background: transparent
- border: none
- box-shadow: none
- type: custom:button-card
icon: mdi:chevron-down
show_name: false
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.tv_box
data:
command: DPAD_DOWN
styles:
card:
- height: 82px
- border-radius: 18px
- background: rgba(15,15,15,0.92)
- border: 2px solid rgba(0,0,0,0.90)
icon:
- width: 38px
- type: custom:button-card
show_name: false
show_icon: false
styles:
card:
- height: 82px
- background: transparent
- border: none
- box-shadow: none
- type: grid
columns: 3
square: false
cards:
- type: custom:button-card
icon: mdi:arrow-left
name: Zurück
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.tv_box
data:
command: BACK
styles:
card:
- height: 74px
- border-radius: 16px
- background: rgba(15,15,15,0.92)
- border: 2px solid rgba(0,0,0,0.90)
grid:
- grid-template-areas: '"i" "n"'
- grid-template-rows: 38px 20px
icon:
- width: 27px
name:
- font-size: 12px
- font-weight: 600
- type: custom:button-card
icon: mdi:home
name: Home
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.tv_box
data:
command: HOME
styles:
card:
- height: 74px
- border-radius: 16px
- background: rgba(15,15,15,0.92)
- border: 2px solid rgba(0,0,0,0.90)
grid:
- grid-template-areas: '"i" "n"'
- grid-template-rows: 38px 20px
icon:
- width: 27px
name:
- font-size: 12px
- font-weight: 600
- type: custom:button-card
entity: media_player.tv_box
icon: |
[[[
return entity.state === 'playing'
? 'mdiause'
: 'mdilay';
]]]
name: |
[[[
return entity.state === 'playing'
? 'Pause'
: 'Play';
]]]
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.tv_box
data:
command: MEDIA_PLAY_PAUSE
styles:
card:
- height: 74px
- border-radius: 16px
- background: rgba(15,15,15,0.92)
- border: 2px solid rgba(0,0,0,0.90)
grid:
- grid-template-areas: '"i" "n"'
- grid-template-rows: 38px 20px
icon:
- width: 27px
- color: '#03a9e8'
name:
- font-size: 12px
- font-weight: 600
- type: grid
columns: 3
square: false
cards:
- type: custom:button-card
icon: mdi:volume-minus
name: Leiser
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.tv_box
data:
command: VOLUME_DOWN
styles:
card:
- height: 74px
- border-radius: 16px
- background: rgba(15,15,15,0.92)
- border: 2px solid rgba(0,0,0,0.90)
grid:
- grid-template-areas: '"i" "n"'
- grid-template-rows: 38px 20px
icon:
- width: 27px
name:
- font-size: 12px
- font-weight: 600
- type: custom:button-card
icon: mdi:volume-mute
name: Stumm
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.tv_box
data:
command: MUTE
styles:
card:
- height: 74px
- border-radius: 16px
- background: rgba(15,15,15,0.92)
- border: 2px solid rgba(0,0,0,0.90)
grid:
- grid-template-areas: '"i" "n"'
- grid-template-rows: 38px 20px
icon:
- width: 27px
name:
- font-size: 12px
- font-weight: 600
- type: custom:button-card
icon: mdi:volume-plus
name: Lauter
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.tv_box
data:
command: VOLUME_UP
styles:
card:
- height: 74px
- border-radius: 16px
- background: rgba(15,15,15,0.92)
- border: 2px solid rgba(0,0,0,0.90)
grid:
- grid-template-areas: '"i" "n"'
- grid-template-rows: 38px 20px
icon:
- width: 27px
name:
- font-size: 12px
- font-weight: 600
- type: custom:button-card
icon: mdi:apps
name: Apps
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Apps
icon: mdi:apps
tag: androidapps
dismiss_icon: mdi:chevron-left
left_button: Zurück
left_button_close: true
initial_style: klein
style_sequence:
- klein
popup_styles:
- style: klein
include_styles:
- normal
styles: |
ha-dialog {
--popup-width: 460px;
--popup-min-width: 320px;
--popup-max-width: 520px;
--popup-max-height: 82vh;
--popup-border-radius: 22px;
--padding-x: 8px;
--padding-y: 8px;
}
.container .content {
padding: 6px !important;
}
adaptive: false
content:
type: custom:mod-card
card_mod:
style: |
ha-card {
--primary-text-color: #ffffff !important;
--secondary-text-color: rgba(255,255,255,0.72) !important;
--card-primary-color: #ffffff !important;
--card-secondary-color: rgba(255,255,255,0.72) !important;
--mush-card-primary-color: #ffffff !important;
--mush-card-secondary-color: rgba(255,255,255,0.72) !important;
border-radius: 22px;
overflow: hidden;
padding: 10px;
background: linear-gradient(180deg, #20252b 0%, #0a0c0f 100%) !important;
border: 3px solid #000000 !important;
color: white !important;
}
card:
type: grid
columns: 3
square: false
cards:
- type: custom:button-card
entity: remote.tv_box
show_icon: false
name: ARD
custom_fields:
app_logo: |
[[[
return `<img src="/local/tv/ard.png"
style="width:54px;height:54px;object-fit:contain;">`;
]]]
tap_action:
action: call-service
service: remote.turn_on
target:
entity_id: remote.tv_box
data:
activity: https://www.ardmediathek.de/
hold_action:
action: none
styles:
card:
- height: 105px
- border-radius: 16px
- background: |
[[[
const current =
(entity.attributes.current_activity || '').toLowerCase();
return current === 'de.swr.avp.ard.tv'
? 'rgba(0,95,115,0.52)'
: 'rgba(15,15,15,0.92)';
]]]
- border: 2px solid rgba(0,0,0,0.90)
- box-shadow: none
- padding: 8px
grid:
- grid-template-areas: '"app_logo" "n"'
- grid-template-rows: 66px 25px
custom_fields:
app_logo:
- align-self: center
- justify-self: center
name:
- font-size: 11px
- font-weight: 600
- white-space: normal
- text-align: center
- type: custom:button-card
entity: remote.tv_box
show_icon: false
name: Arte
custom_fields:
app_logo: |
[[[
return `<img src="/local/tv/arte.png.png"
style="width:54px;height:54px;object-fit:contain;">`;
]]]
tap_action:
action: call-service
service: remote.turn_on
target:
entity_id: remote.tv_box
data:
activity: arte://display
hold_action:
action: none
styles:
card:
- height: 105px
- border-radius: 16px
- background: |
[[[
const current =
(entity.attributes.current_activity || '').toLowerCase();
return current === 'tv.arte.plus7'
? 'rgba(0,95,115,0.52)'
: 'rgba(15,15,15,0.92)';
]]]
- border: 2px solid rgba(0,0,0,0.90)
- box-shadow: none
- padding: 8px
grid:
- grid-template-areas: '"app_logo" "n"'
- grid-template-rows: 66px 25px
custom_fields:
app_logo:
- align-self: center
- justify-self: center
name:
- font-size: 11px
- font-weight: 600
- white-space: normal
- text-align: center
- type: custom:button-card
entity: remote.tv_box
show_icon: false
name: Disney+
custom_fields:
app_logo: |
[[[
return `<img src="/local/tv/disney.png"
style="width:54px;height:54px;object-fit:contain;">`;
]]]
tap_action:
action: call-service
service: remote.turn_on
target:
entity_id: remote.tv_box
data:
activity: https://www.disneyplus.com
hold_action:
action: none
styles:
card:
- height: 105px
- border-radius: 16px
- background: |
[[[
const current =
(entity.attributes.current_activity || '').toLowerCase();
return current === 'com.disney.disneyplus'
? 'rgba(0,95,115,0.52)'
: 'rgba(15,15,15,0.92)';
]]]
- border: 2px solid rgba(0,0,0,0.90)
- box-shadow: none
- padding: 8px
grid:
- grid-template-areas: '"app_logo" "n"'
- grid-template-rows: 66px 25px
custom_fields:
app_logo:
- align-self: center
- justify-self: center
name:
- font-size: 11px
- font-weight: 600
- white-space: normal
- text-align: center
- type: custom:button-card
entity: remote.tv_box
show_icon: false
name: Joyn
custom_fields:
app_logo: |
[[[
return `<img src="/local/tv/joyn.png"
style="width:54px;height:54px;object-fit:contain;">`;
]]]
tap_action:
action: call-service
service: remote.turn_on
target:
entity_id: remote.tv_box
data:
activity: https://www.joyn.de/
hold_action:
action: none
styles:
card:
- height: 105px
- border-radius: 16px
- background: |
[[[
const current =
(entity.attributes.current_activity || '').toLowerCase();
return current === 'de.prosiebensat1digital.seventv'
? 'rgba(0,95,115,0.52)'
: 'rgba(15,15,15,0.92)';
]]]
- border: 2px solid rgba(0,0,0,0.90)
- box-shadow: none
- padding: 8px
grid:
- grid-template-areas: '"app_logo" "n"'
- grid-template-rows: 66px 25px
custom_fields:
app_logo:
- align-self: center
- justify-self: center
name:
- font-size: 11px
- font-weight: 600
- white-space: normal
- text-align: center
- type: custom:button-card
entity: remote.tv_box
show_icon: false
name: Netflix
custom_fields:
app_logo: |
[[[
return `<img src="/local/tv/netflix.png"
style="width:54px;height:54px;object-fit:contain;">`;
]]]
tap_action:
action: call-service
service: remote.turn_on
target:
entity_id: remote.tv_box
data:
activity: netflix://
hold_action:
action: none
styles:
card:
- height: 105px
- border-radius: 16px
- background: |
[[[
const current =
(entity.attributes.current_activity || '').toLowerCase();
return current === 'com.netflix.ninja'
? 'rgba(0,95,115,0.52)'
: 'rgba(15,15,15,0.92)';
]]]
- border: 2px solid rgba(0,0,0,0.90)
- box-shadow: none
- padding: 8px
grid:
- grid-template-areas: '"app_logo" "n"'
- grid-template-rows: 66px 25px
custom_fields:
app_logo:
- align-self: center
- justify-self: center
name:
- font-size: 11px
- font-weight: 600
- white-space: normal
- text-align: center
- type: custom:button-card
entity: remote.tv_box
show_icon: false
name: Prime Video
custom_fields:
app_logo: |
[[[
return `<img src="/local/tv/prime.png"
style="width:54px;height:54px;object-fit:contain;">`;
]]]
tap_action:
action: call-service
service: remote.turn_on
target:
entity_id: remote.tv_box
data:
activity: https://app.primevideo.com
hold_action:
action: none
styles:
card:
- height: 105px
- border-radius: 16px
- background: |
[[[
const current =
(entity.attributes.current_activity || '').toLowerCase();
return current === 'com.amazon.amazonvideo.livingroom'
? 'rgba(0,95,115,0.52)'
: 'rgba(15,15,15,0.92)';
]]]
- border: 2px solid rgba(0,0,0,0.90)
- box-shadow: none
- padding: 8px
grid:
- grid-template-areas: '"app_logo" "n"'
- grid-template-rows: 66px 25px
custom_fields:
app_logo:
- align-self: center
- justify-self: center
name:
- font-size: 11px
- font-weight: 600
- white-space: normal
- text-align: center
- type: custom:button-card
entity: remote.tv_box
show_icon: false
name: RTL+
custom_fields:
app_logo: |
[[[
return `<img src="/local/tv/rtlplus.png"
style="width:54px;height:54px;object-fit:contain;">`;
]]]
tap_action:
action: call-service
service: remote.turn_on
target:
entity_id: remote.tv_box
data:
activity: https://plus.rtl.de/
hold_action:
action: none
styles:
card:
- height: 105px
- border-radius: 16px
- background: |
[[[
const current =
(entity.attributes.current_activity || '').toLowerCase();
return current === 'de.rtli.tvnow'
? 'rgba(0,95,115,0.52)'
: 'rgba(15,15,15,0.92)';
]]]
- border: 2px solid rgba(0,0,0,0.90)
- box-shadow: none
- padding: 8px
grid:
- grid-template-areas: '"app_logo" "n"'
- grid-template-rows: 66px 25px
custom_fields:
app_logo:
- align-self: center
- justify-self: center
name:
- font-size: 11px
- font-weight: 600
- white-space: normal
- text-align: center
- type: custom:button-card
entity: remote.tv_box
show_icon: false
name: Spotify
custom_fields:
app_logo: |
[[[
return `<img src="/local/tv/spotify.png"
style="width:54px;height:54px;object-fit:contain;">`;
]]]
tap_action:
action: call-service
service: remote.turn_on
target:
entity_id: remote.tv_box
data:
activity: spotify://
hold_action:
action: none
styles:
card:
- height: 105px
- border-radius: 16px
- background: |
[[[
const current =
(entity.attributes.current_activity || '').toLowerCase();
return current === 'com.spotify.tv.android'
? 'rgba(0,95,115,0.52)'
: 'rgba(15,15,15,0.92)';
]]]
- border: 2px solid rgba(0,0,0,0.90)
- box-shadow: none
- padding: 8px
grid:
- grid-template-areas: '"app_logo" "n"'
- grid-template-rows: 66px 25px
custom_fields:
app_logo:
- align-self: center
- justify-self: center
name:
- font-size: 11px
- font-weight: 600
- white-space: normal
- text-align: center
- type: custom:button-card
entity: remote.tv_box
show_icon: false
name: YouTube
custom_fields:
app_logo: |
[[[
return `<img src="/local/tv/youtube.png"
style="width:54px;height:54px;object-fit:contain;">`;
]]]
tap_action:
action: call-service
service: remote.turn_on
target:
entity_id: remote.tv_box
data:
activity: https://www.youtube.com
hold_action:
action: none
styles:
card:
- height: 105px
- border-radius: 16px
- background: |
[[[
const current =
(entity.attributes.current_activity || '').toLowerCase();
return current === 'com.google.android.youtube.tv'
? 'rgba(0,95,115,0.52)'
: 'rgba(15,15,15,0.92)';
]]]
- border: 2px solid rgba(0,0,0,0.90)
- box-shadow: none
- padding: 8px
grid:
- grid-template-areas: '"app_logo" "n"'
- grid-template-rows: 66px 25px
custom_fields:
app_logo:
- align-self: center
- justify-self: center
name:
- font-size: 11px
- font-weight: 600
- white-space: normal
- text-align: center
- type: custom:button-card
entity: remote.tv_box
show_icon: false
name: ZDF
custom_fields:
app_logo: |
[[[
return `<img src="/local/tv/zdf.png"
style="width:54px;height:54px;object-fit:contain;">`;
]]]
tap_action:
action: call-service
service: remote.turn_on
target:
entity_id: remote.tv_box
data:
activity: https://www.zdf.de/
hold_action:
action: none
styles:
card:
- height: 105px
- border-radius: 16px
- background: |
[[[
const current =
(entity.attributes.current_activity || '').toLowerCase();
return current === 'com.zdf.android.mediathek'
? 'rgba(0,95,115,0.52)'
: 'rgba(15,15,15,0.92)';
]]]
- border: 2px solid rgba(0,0,0,0.90)
- box-shadow: none
- padding: 8px
grid:
- grid-template-areas: '"app_logo" "n"'
- grid-template-rows: 66px 25px
custom_fields:
app_logo:
- align-self: center
- justify-self: center
name:
- font-size: 11px
- font-weight: 600
- white-space: normal
- text-align: center
styles:
card:
- height: 74px
- border-radius: 16px
- background: rgba(15,15,15,0.92)
- border: 2px solid rgba(0,0,0,0.90)
- box-shadow: none
grid:
- grid-template-areas: '"i n"'
- grid-template-columns: 42px 1fr
- align-items: center
icon:
- width: 28px
- color: '#03a9e8'
name:
- justify-self: start
- font-size: 14px
- font-weight: 700
styles:
card:
- width: 100%
- box-sizing: border-box
- padding: 10px
- border-radius: 20px
- border: 2px solid
- box-shadow: none
grid:
- width: 100%
- grid-template-areas: '"content"'
- grid-template-columns: minmax(0, 1fr)
custom_fields:
content:
- grid-area: content
- width: 100%
- min-width: 0
- justify-self: stretch
- align-self: stretch
state:
- value: 'off'
styles:
card:
- background: rgba(20,20,20,0.55)
- border-color: rgba(65,65,65,0.95)
- value: unavailable
styles:
card:
- background: rgba(100,0,0,0.38)
- border-color: rgba(190,0,0,0.95)
- value: 'on'
styles:
card:
- background: rgba(0,95,115,0.38)
- border-color: rgba(0,175,205,0.95)
- operator: default
styles:
card:
- background: rgba(0,95,115,0.38)
- border-color: rgba(0,175,205,0.95)
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--primary-text-color: #ffffff !important;
--secondary-text-color: rgba(255,255,255,0.72) !important;
--card-primary-color: #ffffff !important;
--card-secondary-color: rgba(255,255,255,0.72) !important;
--mush-card-primary-color: #ffffff !important;
--mush-card-secondary-color: rgba(255,255,255,0.72) !important;
background:
{% set active = expand([
'light.licht_wohnzimmer_decke',
'light.licht_essbereich',
'switch.wohnzimmer_palme',
'switch.fenster_steckdose_wohnzimmer',
'light.wled_tv_wand_haupt',
'light.wled_wohnzimmer',
'switch.licht_wohnzimmer_stehlampe',
'media_player.tv_box_2'
]) | selectattr('state','eq','on') | list | count %}
{% set open = (is_state('binary_sensor.wohnzimmer_seite_offen', 'on') or is_state('binary_sensor.wohnzimmer_hinten_offen', 'on')) or is_state('binary_sensor.terrassentur_offen','on') %}
{% set tilted = (is_state('binary_sensor.wohnzimmer_seite_kipp', 'on') or is_state('binary_sensor.wohnzimmer_hinten_kipp', 'on')) or is_state('binary_sensor.terrassentur_kipp','on') %}
{% if tilted %}
linear-gradient(135deg, rgba(190,95,0,0.78), rgba(50,20,0,0.60)) !important;
{% elif open %}
linear-gradient(135deg, rgba(190,0,0,0.78), rgba(50,0,0,0.60)) !important;
{% elif active > 0 %}
linear-gradient(135deg, rgba(0,85,95,0.40), rgba(0,0,0,0.35)) !important;
{% else %}
rgba(0,0,0,0.36) !important;
{% endif %}
border: 2px solid #000000 !important;
border-radius: 20px;
color: white !important;
}