Hallo Daniel,
Dein Ansatz mit deinem Dashboard gefällt mir sehr gut. Gerade weil du es so schlank gehalten hast.
Würdest du deinen Code zur Verfügung stellen, dann würde ich mich freunen und hätte einen guten Start.
Die anderen Boards sind immer sehr umfangreich und für meine Bedürfnisse einfach zu viel.
Vuelen dank und viele Grüße
Kahuna
Hi Kahuna,
genau deswegen habe ich mein Dashboard so gewollt. 
hier mal ein paar Schnippsel.
Das ist die Anzeige wer daheim ist.
square: false
type: grid
columns: 1
cards:
- type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Daniel
secondary: |
{% if is_state('person.daniel', 'home') %}
Daheim
{% elif is_state('person.daniel', 'Arbeit Daniel') %}
auf Arbeit
{% else %}
Abwesend
{% endif %}
picture: "{{ state_attr('person.daniel', 'entity_picture') }}"
entity: person.daniel
tap_action:
action: more-info
entity: person.daniel
card_mod:
style:
mushroom-shape-avatar$: >
.container {--icon-size: 96px; margin-left: -25px !important;
margin-top: -25px !important;}
.: |
ha-card { {% if is_state('person.daniel', 'home') %}
--card-secondary-color: lightgreen;
{% elif is_state('person.daniel', 'Arbeit Daniel') %}
--card-secondary-color: #06a5d1;
{% else %} gray {% endif %} }
card_mod:
style: |
ha-card {
{% if is_state('person.daniel', 'home') %}
box-shadow: 0 3px 5px 0 lightgreen;
{% elif is_state('person.daniel', 'Arbeit Daniel') %}
box-shadow: 0 3px 5px 0 #06a5d1;
{% else %}
box-shadow: none
{% endif %}
}
ha-card:active {
transform: translateY(1.5px);
transition: 0s;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Marleen
secondary: >-
{{ 'Daheim' if is_state('person.marleen', 'home') else 'Abwesend'
}}
picture: "{{ state_attr('person.marleen', 'entity_picture') }}"
entity: person.marleen
tap_action:
action: more-info
entity: person.marleen
card_mod:
style:
mushroom-shape-avatar$: |
.container {
--icon-size: 96px;
margin-left: -25px !important;
margin-top: -25px !important;
}
.: |
ha-card {
{% if is_state('person.marleen', 'home') %}
--card-secondary-color: lightgreen;
{% else %} gray {% endif %} }
}
card_mod:
style: |
ha-card {
{% if is_state('person.marleen', 'home') %}
box-shadow: 0 3px 5px 0 lightgreen;
{% else %}
box-shadow: none
{% endif %}
}
ha-card:active {
transform: translateY(1.5px);
transition: 0s;
}
Hier der Schnippsel für einen Raum, in dem Beispiel das Wohnzimmer:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Wohnzimmer
secondary: >-
{{ states('sensor.wohnzimmer_temperatur_temperature') | round(1) }} °C /
{{ states('sensor.wohnzimmer_temperatur_humidity') | round(1) }} %
icon: mdi:sofa
entity: light.licht_wohnen_left
tap_action:
action: navigate
navigation_path: "#wohnzimmer"
icon_color: "{{ '#bd9100' if is_state(entity, 'on') else '#67783d' }}"
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.0);
--mush-icon-size: 96px;
}
ha-card {
margin-left: -25px !important;
margin-top: -25px !important;
height: 102px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: climate.hz_wohnen
content: "{{ state_attr('climate.hz_wohnen','temperature') }}°C"
tap_action:
action: more-info
icon: |-
{% if is_state_attr('climate.hz_wohnen','hvac_action', 'heating') -%}
mdi:heat-wave
{% else %}
mdi:none
{% endif %}
icon_color: |-
{% if is_state('climate.hz_wohnen', 'off') %}
#6f6f6f
{% else %}
red
{% endif %}
- type: template
entity: light.lichter_wohnzimmer_gr
tap_action:
action: more-info
icon: |-
{% if is_state(entity, 'on') %}
mdi:lightbulb-on
{% else %}
mdi:lightbulb-off-outline
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
#5ee0d0
{% else %}
#6f6f6f
{% endif %}
- type: template
entity: input_boolean.prasenz_wohnen
tap_action:
action: more-info
icon: |-
{% if is_state(entity, 'on') %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
yellow
{% else %}
#6f6f6f
{% endif %}
card_mod:
style: |
ha-card {
{{ 'animation: clip 2s linear infinite, infiniteboth;' if is_state('input_boolean.prasenz_wohnen', 'on') }}
}
@keyframes clip {
50% { clip-path: polygon(0 0, 35% 0, 100% 100%, 0 100%); }
}
.shape {
--shape-animation: motion 2s linear infinite;
}
@keyframes motion {
0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); }
50% { --shape-color: rgba(var(--rgb-blue), 0.2); }
}
- type: template
entity: binary_sensor.wohnzimmer_contact
tap_action:
action: more-info
icon: |-
{% if is_state(entity, 'off') %}
mdi:window-closed
{% else %}
mdi:window-open
{% endif %}
icon_color: |-
{% if is_state(entity, 'off') %}
#6f6f6f
{% else %}
#d42020
{% endif %}
- type: template
entity: media_player.heimkino
tap_action:
action: more-info
icon: |-
{% if is_state(entity, 'paused') %}
mdi:speaker-pause
{% elif is_state(entity, 'playing') %}
mdi:speaker-play
{% else %}
mdi:speaker-stop
{% endif %}
icon_color: |-
{% if is_state(entity, 'playing') %}
#5ee0d0
{% else %}
#6f6f6f
{% endif %}
card_mod:
style: |
ha-card {
{{ 'animation: beat 1.3s ease-out infinite both;' if is_state('media_player.heimkino', 'playing') }}
transform-origin: 50% 60%;
}
@keyframes beat {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.25); }
60% { transform: scale(1); }
}
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-top: -30px !important;
}
card_mod:
style: |
ha-card {
{% if is_state('light.lichter_wohnzimmer_gr', 'on') %}
background: rgba(0, 91, 108, 0.8);
box-shadow: 0 3px 5px 0 #ffeecc;
{% endif %}
}
ha-card:active {
transform: translateY(1.5px);
transition: 0s;
}
Und zu guter letzt noch ein Popupfenster vom Wohnzimmer.
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#wohnzimmer"
name: Wohnzimmer
icon: mdi:sofa
force_icon: false
show_last_changed: false
show_attribute: false
sub_button: []
show_header: true
entity: sensor.tempsensor_wohnzimmer_temperature
button_type: name
auto_close: ""
close_by_clicking_outside: true
- type: custom:bubble-card
card_type: separator
name: Lichter
icon: mdi:lightbulb
sub_button:
- entity: sensor.prasenz_wohnzimmer_illuminance
state_background: false
show_state: true
icon: mdi:sun-wireless
- entity: binary_sensor.prasenz_wohnzimmer_presence
show_background: true
styles: |
.bubble-sub-button-1 > ha-icon {
color: ${state === 'on' ? 'orange' : ''} !important;
}
${subButtonIcon[1].setAttribute("icon", state === 'on' ? 'mdi:motion-sensor-off' : 'mdi:motion-sensor')}
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
entity: switch.licht_wohnen_left
name: Couchtisch
icon: mdi:sofa
show_state: false
show_last_changed: false
show_attribute: false
force_icon: false
show_icon: true
scrolling_effect: true
show_name: true
- type: custom:bubble-card
card_type: button
entity: switch.licht_wohnen_right
name: Esstisch
icon: mdi:table-furniture
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.couchlicht
tap_action:
action: toggle
hold_action:
action: more-info
icon: mdi:led-strip-variant
force_icon: false
show_state: false
show_attribute: true
attribute: brightness
- type: custom:bubble-card
card_type: empty-column
- type: custom:bubble-card
card_type: media-player
entity: media_player.lg_webos_tv_6cf7
name: Fernseher
hide:
next_button: true
previous_button: true
show_state: true
show_last_changed: false
show_attribute: false
force_icon: false
card_layout: large
attribute: source_list
- type: custom:bubble-card
card_type: media-player
entity: media_player.heimkino
card_layout: large
cover_background: false
force_icon: false
show_state: false
show_last_changed: false
show_attribute: true
attribute: volume_level
- type: custom:bubble-card
card_type: separator
name: Heizung
icon: mdi:home-thermometer
- type: custom:bubble-card
card_type: climate
entity: climate.hz_wohnen
sub_button:
- name: HVAC modes menu
select_attribute: hvac_modes
state_background: false
show_arrow: false
force_icon: false
show_state: true
show_last_changed: false
show_attribute: true
attribute: current_temperature
state_color: false
- type: custom:stack-in-card
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-entity-card
entity: sensor.wohnzimmer_temperatur_temperature
primary_info: state
secondary_info: name
name: Temperatur
icon_color: green
icon: mdi:thermometer
- type: custom:mushroom-entity-card
entity: sensor.wohnzimmer_temperatur_humidity
primary_info: state
secondary_info: name
name: Luftfeuchte
icon_color: blue
icon: mdi:water-percent
- type: custom:mini-graph-card
entities:
- entity: sensor.wohnzimmer_temperatur_temperature
name: Temperature
color: "#00bb33"
- entity: sensor.wohnzimmer_temperatur_humidity
name: Humidity
color: "#2196f3"
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
Wenn du noch etwas haben möchtest dann schreib einfach.
Wünsche allen einen tollen Start in die Woche.
Cool Danke.
Kannst du mir etwas auf die sprünge helfen, wie ich den Code bei mir nutzen kann. Habe bislang nur über die visuelle Oberfläche am Dashboard gearbeitet.
Das nutzen über das einfache einfügen habe ich bislang nicht oft gemacht.
Die Mushroom und Bubble Karten habe ich bei mir installiert, muss ich vorher weitere Karten hinzufügen…
Muss ich den Code über die Karten einfügen oder gibt es einen weiteren Weg?
Vielen Dank
Du kannst den geteilten Code in dein Dashboard einfügen, indem du eine Manuell Card anlegst und dort hinein kopierst du den Code. Teilweise kannst du danach die Gui nutzen, um die Konfiguration vorzunehmen. Geht aber leider nicht immer, gerade wenn es verschachtelte Karten sind. Mushroom und Bubble Card hast du schon installiert, laut seinen Beispielen brauchst du zusätzlich noch die custom:stack-in-card. Die kannst du über Hacs installieren.
oh das hatte ich nicht erwähnt. danke @jayjojayson
du musst die Karten dann im YAML Editor anpassen, das sie sich nicht über die GUI anpassen lassen. aber mit etwas übung kommst du da rein.
Musst eben noch die Entitäten anpassen, dann sollte es eigentlich recht schnell bei dir laufen.
Ihr seid nun alle berühmt 
Ich habe in meinem neusten Video unser Dashboard bei uns Zuhause vorgestellt. Es ist sehr speziell und auf Mobile Geräte optimiert.
Dabei habe ich es mir nicht nehmen lassen sowohl euch alle in dem Video zu erwähnen als auch den Tobias @smarthomeandmore von dem ich die Idee zu diesem Video hatte.
Hier könnt nun unser Dashboard erleben:
Cool, cool und vielen Dank, dass du uns mit dem Thema im Forum auch erwähnt hast. 
Ja sehr cool @Smartzeug 
Ehre wem Ehre gebührt 
Das habt ihr euch alle selbst verdient 
Cooles Dashboard,
würdest du den Code zur Verfügung stellen?
Grüße
Oha, erst jetzt bemerkt. Vielen Dank @Smartzeug für dein Video
so ich habe jetzt eine version meines dashboards fertig, für das tablet welches aussschließlich geöffnete fenster und türen in meinem smarthome und apartment anzeigen soll.
ich habe mit absicht diese ansicht gewählt, da ich nicht wollte, das ich zwar weiß, das fenster / türen geöffnet sind, aber nicht welche. dies wollte ich direkt sehen.
wenn eine tür oder ein fenster geöffnet wird, blinkt der entsprechende button rot.
das tablet wird mal an der wand zur eingangstür hängen, so das beim gehen sehen kann, das alles geschlossen ist, bzw. mit absicht offen gelassen.
es ist noch nicht fertig, da ich von 20 tür- / fensterkontakten erst 11 verbaut habe.
auch soll es als vorbereitung für eine alarmanlage (hüllschutz) dienen.
Moin zusammen,
finde die Geschicht mit den Popups sehr interessant, doch irgendwie bekomme ich es nicht auf die minimalistische Wetteranzeige gelegt 
Daher gerne ein erweitertes Video
Hi, teile doch bitte deinen code, dann können wir dir weiterhelfen.
Ich habs schon hinbekommen , hat die Voraussetzung mit dem vertikel Stapel überlesen Echt Bombe !
Was ist denn das für ein Themen?
Liebe Community ich habe das Video fertig wie ich unser Dashboard mit den Pop ups und weiteres gebaut habe
Ich wünsche mir, dass dies euch die Angst nimmt damit ihr es selbst einfach bauen könnt.
Hier das Video 
@Smartzeug vielen Dank für das Video, das die Nutzung der Bubble-Card für Pop-ups super erklärt 
Du nutzt auch außerhalb der Bubble-Card geschachtelte horizontale und vertikale Stapel. Was spricht gegen die Nutzung der Grid-Karte? Oder von entsprechenden Abschnitten/Sections?
Dankeschön
Ganz einfach: Gewohnheit 
Aber deine Einwände sind absolut berechtigt.
Müsste man mal ausprobieren
