@SmartBuddy ich hätte zwei Fragen zu deinem Code.
An welcher Stelle hast Du die Farben für den Hintergrund und den Text definiert? Ich würde auch gern den Hintergrund je nach Tageszeit entweder in weiß oder in dunkel haben wollen. Kannst Du mir deinen Code dazu kurz zeigen?
Ich finde die Reiter im Audio-Bereich von Dir sehr schön. Wenn ich das richtig sehe, ist das eine button-card?
Das Dashboard ist ja mega. Echt inspirierend! Da stehe ich noch ganz am Anfang.
Eine Frage: Kannst Du mir auf die Sprünge helfen, wie man card-mod zuverlässig verwendet und am besten alles über eine externe CSS datei zentral an einem Ort stylen kann? Ich hab dazu folgenden Thread angelegt. Es würde mich sehr freuen, wenn Du einen kurzen Blick drauf werfen könntest. 
Okay, die button card habe ich bis auf den Punkt deiner Helfer verstanden. Trackst Du mit deinem Helfer, ob jemand einen der Buttons drückt? Würde das auch funktionieren, wenn kein Service gecallt wird?
Sprich, ich würde die Reiter gern verwenden, aber bei mir wird damit nur navigiert. Das heißt, ich habe aktuell keine Bedingung, mit der ich den Background verknüpfen kann…
Idee?
Der Klick auf die jeweilige Reiter-Karte ruft ein Script auf und übergibt als Parameter den Namen. Das Script ändert dann den Wert in dem Input Select-Helfer.
tap_action:
action: call-service
service: script.media_player_auswahl_input_select_wechseln
service_data:
mplayer: Gym
Hier ist das Script:
alias: "Media Player: Auswahl Input Select wechseln"
sequence:
- data:
option: "{{mplayer}}"
target:
entity_id: input_select.media_player_auswahl_helfer
action: input_select.select_option
mode: single
icon: mdi:arrow-down-drop-circle-outline
Je nachdem welcher Wert im Input-Select ausgewählt ist, wird das Styling bzw. der jeweilige Player eingeblendet.
Danke für die bereitwillige Herausgabe von Informationen über Dein echt gelungenes Dashboard… Da stecken sicherlich einige hundert Stunden an Arbeit drin!!!
Ich hätte zwei Fragen…
In der YAML Deiner Audioseite ist das Skript “script.media_player_auswahl_menue_anzeigen” enthalten…Könntest Du dazu vielleicht noch den Code spendieren ?
Gibt es bei dem Input_Select_Haus_modi nur Nachts als Option ?
Danke im Voraus und nochmal …Respekt für die geleistete Arbeit!!!
Sehr gern.
Das Script toggled lediglich einen Helfer. Könnte man sicher auch über die tap_action lösen.
alias: "Media Player: Auswahl Menü anzeigen"
sequence:
- data: {}
target:
entity_id: input_boolean.media_player_auswahl_helfer
action: input_boolean.toggle
mode: single
icon: mdi:arrow-down-drop-circle-outline
@SmartBuddy welche Stelle in dem sidebar-card.js hast du denn angepasst, um die Icongröße verändern zu können? Die Klasse sidebarMenuIcons ist von dir oder?
Ich bekomme es einfach nicht hin. Auch nicht mit card-mod.
Besten Dank!
Musste gerade selbst nachschauen…
Du müsstest nach “sidebarMenuItem” suchen und der <ul> sowie dem Icon in dem <li> eine klasse vergeben. Dann solltest du es selektieren können. Bitte denke daran, dass diese Änderungen verloren gehen, solltest du die Karte updaten.
Wäre es eventuell möglich dein Projekt zu teilen? z.B.: auf github oder so? Wäre für viele sicher toll für Vorlagen, oder teile davon zu kopieren.
Ich habe nun eine " Kopie" deines Dashboards erstellt im Dashboard Showroom ist es zu sehen danke an @dp20eic
Du hast recht ich poste es dort
Schönen Feierabend
Moin,
ich will ja nicht mäkeln, aber ich würde diesen Thread, nicht mit den kopien, des Originals, verunstalten, wenn jemand aus diesem Brake down etwas gebaut hat, kann man das ja in dem Thread
Posten, mit einem Link zu diesem Thread.
Nur mal so als Anregung.
VG
Bernd
@SmartBuddy welche Cards hast du denn bei den Szenen verwendet?
Die sehen super aus!
Danke. Das sind “Custom: Button Cards”.
type: custom:button-card
name: Cinema Mode
card_mod:
style: |
:host {
}
ha-card {
box-shadow: var(--ha-card-box-shadow--fire) !important;
}
show_icon: true
icon: fapro:cinema
size: 32px
show_state: true
show_name: true
entity: input_boolean.cinema_mode
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.cinema_mode
hold_action:
action: more-info
custom_fields:
desc: >-
Vorhänge fahren zu, das Licht geht aus, Leinwand und Beamer schalten sich
ein.
state:
- value: 'on'
styles:
state:
- color: '#FFFFFF'
name:
- color: '#FFFFFF'
icon:
- color: '#FFFFFF'
card:
- background: var(--accent-color)
custom_fields:
desc:
- color: '#FFFFFF'
styles:
grid:
- grid-template-rows: min-content min-content min-content
- grid-template-columns: 1fr
- grid-template-areas: '"i s" "n n" "desc desc" '
card:
- background-color: var(--ha-card-background)
- border-radius: 10px
- padding: 20px 15px
- margin-top: 0px
icon:
- margin-top: 0px
- margin-left: 0px
- text-align: left
- margin-bottom: 16px
- color: var(--primary-text-color)
- opacity: 1
name:
- text-align: left
- font-weight: bold
- font-size: 14px
- place-self: start
- margin-bottom: 8px
- color: var(--primary-text-color)
custom_fields:
desc:
- font-size: 14px
- line-height: 17px
- font-weight: regular
- opacity: 1
- text-align: left
- width: 100%
- white-space: normal
- height: 50px
- overflow: show
- color: var(--secondary-text-color)
state:
- color: var(--primary-text-color)
- font-weight: 300
- margin-top: '-16px'
- padding-top: 0px
- margin-right: 3px
- text-transform: uppercase
- color: var(--secondary-text-color)
Wow! Ein wunderschöndes Dashboard!
Mich würde wahnsinnig der Code für die Site Card interessieren. Würdest du Ihn mir senden?
Lieben Gruß,
Pascal
Hab auch das Problem, dass ich nicht editieren kann. Kannst du mir sagen was das mit der Sidebar Card ist?
Hi,
das Dashboard sieht wirklich unglaublich aus.
Auch finde ich es super, dass du deinen Code teilst.
Nur leider kann ich in dem geteilten Code nirgendwo was herausfinden, wie du das mit dem Stoßlüften bzw. der jeweiligen Anzeige wie auf dem Screenshot zu sehen ist, gelöst hast.
Kannst du den Code dazu vielleicht auch noch teilen?
Danke, freut mich, dass es dir gefällt.
Den Code habe ich unten angehängt.
Ich habe das Widget seit 2 Wochen nicht mehr im Einsatz. War ein schönes Gimmick, allerdings habe ich es tatsächlich nie so benutzt wie ich es angedacht hatte. Mittlerweile habe ich eine einfache Popup-Card mit allen Temperatur/Luftwerten. Wenn ich ein Fenster öffne läuft eine Automation, die absolute Luftfeuchtigkeit draußen und drinnen vergleicht. Sobald eine Differenz von 2g/m3 erreicht ist, kriege ich ein akustisches Signal. Das funktioniert sehr viel besser für meine Zwecke. Lässt sich aber natürlich auch mit dem Widget verbinden
Viel spaß damit
type: custom:mod-card
card_mod:
style: |
ha-card {
box-shadow: none !important;
background: var(--welcome-card-background) !important;
border: 0px;
transition: none;
width: 500px !important;
padding-bottom: 20px;
}
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
icon: fapro:wind
layout: icon_name
show_state: false
name: Stoßlüften
show_name: true
show_label: false
label: label
styles:
card:
- margin-top: 16px
- height: 40px
- background: transparent
- border: 0px
- border-radius: 0px
- max-width: 220px
icon:
- width: 32px
- height: 32px
- color: var(--primary-text-color)
- padding: 14px 12px
- margin-left: 12px
name:
- font-size: 14px
- padding-left: 0px
- font-weight: bold
- justify-self: start
grid:
- grid-template-areas: "\"i n\""
- grid-template-columns: 64px 1fr
- type: custom:button-card
show_state: false
name: |
[[[
return `<span style="color: var(--secondary-text-color) !important; margin-right: 8px;">Außen: </span>` + parseInt(states["sensor.garten_temperatur_luftfeuchtigkeit_humidity"].state) + `<span style="font-size: 8px; margin-right: 0px">%</span> • ` + parseInt(states["sensor.garten_absolute_luftfeuchtigkeit"].state) + `<span style="font-size: 8px">g/m³</span> • ` + states["sensor.garten_bewegungsmelder_temperature"].state + `° `
]]]
show_name: true
show_label: false
styles:
card:
- margin-top: 8px
- height: 40px
- background: transparent
- border: 0px
- border-radius: 0px
- max-width: 220px
name:
- font-size: 14px
- padding-top: 18px
- padding-right: 0px
- font-weight: regular
- justify-self: end
- color: var(--secondary-text-color)
grid:
- grid-template-areas: "\"n\""
- grid-template-columns: 1fr
- type: horizontal-stack
cards:
- type: custom:button-card
icon: |
[[[
if (states["binary_sensor.wohnzimmer_tuerkontakt_terrasse_contact"].state === "off")
return "fapro:door_closed"
else
return "fapro:door_open"
]]]
entity: binary_sensor.wohnzimmer_tuerkontakt_terrasse_contact
layout: icon_name
show_state: false
name: Wohnzimmer
show_name: true
show_label: true
label: |
[[[
if (states["binary_sensor.wohnzimmer_tuerkontakt_terrasse_contact"].state === "off" && states["sensor.wohnzimmer_schimmel_sensor"].state >= 75 || states["binary_sensor.wohnzimmer_tuerkontakt_terrasse_contact"].state === "off" && states["sensor.wohnzimmer_tvoc_humidity"].state >= 60) {
return "Bitte lüften"
}
else if (states["binary_sensor.wohnzimmer_tuerkontakt_terrasse_contact"].state === "on" && states["sensor.wohnzimmer_schimmel_sensor"].state >= 75 || states["binary_sensor.wohnzimmer_tuerkontakt_terrasse_contact"].state === "on" && states["sensor.wohnzimmer_tvoc_humidity"].state >= 60) {
return "Weiter lüften..."
}
else {
return "In Ordnung"
}
]]]
custom_fields:
stats: |
[[[
return parseInt(states["sensor.wohnzimmer_tvoc_humidity"].state) + `<span style="font-size: 10px">%</span> • ` + parseInt(states["sensor.wohnzimmer_absolute_luftfeuchtigkeit"].state) + `<span style="font-size: 10px">g/m³</span> • ` + states["sensor.wohnzimmer_schimmel_sensor"].state + `<span style="font-size: 10px">%</span>`
]]]
styles:
card:
- border: 0px
- width: 222px
- margin-right: 0px
- margin-left: 24px
- border-radius: 8px 8px 8px 8px
- background: var(--welcome-card-background)
icon:
- width: 32px
- height: 32px
- padding: 6px 6px
- margin-left: 12px
- border-radius: 500px
name:
- font-size: 14px
- padding-left: 0px
- font-weight: bold
- justify-self: start
label:
- font-size: 14px
- padding: 3px 0px
- font-weight: regular
- justify-self: start
grid:
- grid-template-areas: "\"i n\" \"i l\" \"i stats\""
- grid-template-columns: 64px 1fr
custom_fields:
stats:
- font-size: 14px
- padding-left: 0px
- font-weight: regular
- justify-self: start
- color: var(--secondary-text-color)
state:
- value: "on"
styles:
icon:
- color: var(--accent-color)
- background: var(--accent-color-background-opacity)
- value: "off"
styles:
icon:
- color: var(--primary-text-color)
- background: var(--secondary-text-color)
- type: custom:button-card
icon: |
[[[
if (states["binary_sensor.buero_tuerkontakt_gartentuer_contact"].state === "off")
return "fapro:door_closed"
else
return "fapro:door_open"
]]]
entity: binary_sensor.buero_tuerkontakt_gartentuer_contact
layout: icon_name
show_state: false
name: Büro
show_name: true
show_label: true
label: |
[[[
if (states["binary_sensor.buero_tuerkontakt_gartentuer_contact"].state === "off" && states["sensor.buero_schimmel_sensor"].state >= 75 || states["binary_sensor.buero_tuerkontakt_gartentuer_contact"].state === "off" && states["sensor.buero_temperatur_luftfeuchtigkeit_humidity"].state >= 60) {
return "Bitte lüften"
}
else if (states["binary_sensor.buero_tuerkontakt_gartentuer_contact"].state === "on" && states["sensor.buero_schimmel_sensor"].state >= 75 || states["binary_sensor.buero_tuerkontakt_gartentuer_contact"].state === "on" && states["sensor.buero_temperatur_luftfeuchtigkeit_humidity"].state >= 60) {
return "Weiter lüften..."
}
else {
return "In Ordnung"
}
]]]
custom_fields:
stats: |
[[[
return parseInt(states["sensor.buero_temperatur_luftfeuchtigkeit_humidity"].state) + `<span style="font-size: 10px">%</span> • ` + parseInt(states["sensor.buero_absolute_luftfeuchtigkeit"].state) + `<span style="font-size: 10px">g/m³</span> • ` + states["sensor.buero_schimmel_sensor"].state + `<span style="font-size: 10px">%</span>`
]]]
styles:
card:
- border: 0px
- margin-right: 24px
- margin-left: 0px
- border-radius: 8px 8px 8px 8px
- width: 222px
- background: var(--welcome-card-background)
icon:
- width: 32px
- height: 32px
- padding: 6px 6px
- margin-left: 12px
- border-radius: 500px
name:
- font-size: 14px
- padding-left: 0px
- font-weight: bold
- justify-self: start
label:
- font-size: 14px
- padding: 3px 0px
- font-weight: regular
- justify-self: start
grid:
- grid-template-areas: "\"i n\" \"i l\" \"i stats\""
- grid-template-columns: 64px 1fr
custom_fields:
stats:
- font-size: 14px
- padding-left: 0px
- font-weight: regular
- justify-self: start
- color: var(--secondary-text-color)
state:
- value: "on"
styles:
icon:
- color: var(--accent-color)
- background: var(--accent-color-background-opacity)
- value: "off"
styles:
icon:
- color: var(--primary-text-color)
- background: var(--secondary-text-color)
Sehr cool, danke dir für deine ausführliche Beschreibung
Wie ergänze ich denn das “Guten Morgen”, “Guten Abend”. Ich suche es und er zeigt es mir an, jedoch finde ich den Code Snippet dazu nicht…
Ich nutze das Wallpanel und Kioskmode, dort zeigt er die Uhrzeit etc am Bildschirmschoner an. Schön wäre es, wenn ich begrüßt werden würde Genauso die Schriftart gefällt mir sehr gut.
Die Icons kann ich wo laden? ich sehe du hast es mit mdi: fapro: umgesetzt.
Danke im Voraus
Sehr gern.
Für die Begrüßung habe ich einen simplen Template-Sensor gebaut. Code ist anbei.
Die Icons sind weitestgehend von StreamlineHQ und leider kostenpflichtig. Mit etwas Googleei findet man aber sicher vergleichbare für umsonst.
Die Schrift ist “Alexandria” von Google-Fonts.
Viel Erfolg!
- platform: template
sensors:
welcome_begruessung:
friendly_name: "welcome_begruessung"
value_template: >
{% if now().hour < 5 %} GUTE NACHT
{% elif now().hour < 12 %} GUTEN MORGEN
{% elif now().hour < 18 %} GUTEN TAG
{% else %} GUTEN ABEND
{% endif %}
ah ok, danke dir.
Wo kann ich den sensor dann bei meiner Konfi einfügen, dass er genauso angezeigt wird, wie bei dir, also über der Uhrzeit?
Bei mir sieht es aktuell so aus;
kiosk_mode:
non_admin_settings:
hide_header: true
hide_sidebar: true
wallpanel:
enabled: true
hide_toolbar: false
idle_time: 10
display_time: 60
image_url: ${entity:sensor.screensaver_nach_zustand}
cards:
- type: custom:clock-weather-card
entity: weather.openweathermap
sun_entity: sun.sun
temperature_sensor: sensor.temperature_30
weather_icon_type: line
forecast_rows: 5
locale: de
time_pattern: HH:mm
time_format: 24
date_pattern: cccc, d. MMM yyyy
hide_today_section: false
hide_forecast_section: true
hide_clock: false
hide_date: false
card_mod:
style: |
ha-card {
zoom: 400%;
font-size: 8px;
width: 250%;
margin-left: -115%;
margin-top: 70%;
background-color: transparent;
text-shadow: 1px 1px 3px black;
border: transparent;
color:
{% if states('sensor.screensaver_nach_zustand') == 'media-source://media_source/local/Hintergrund_Nacht' %}
grey;
{% else %}
{% endif %}
}