Vielen lieben Dank - Code eingefügt und perfekt !!
Danke Dir ![]()
Dann zeige ich euch auch mal wie mein Dashboard aussieht. Bin noch nicht fertig, aber wann ist man das schon? Man findet ja immer wieder was man optimieren und verbessern kann. Versuche das alles kompakt zu halten und arbeite daher viel mit pop ups und tabbed card.
So sieht das auf dem Smartphone aus:
Und so auf dem PC / Tablet:
Paar Beispiele von den PopUps:
Und hier die restlichen Seiten/Tabs:
Heftig! Da bin ich noch weit von entfernt!
Wie hast du den dunkeln Modus hinbekommen?
Aber dass ihr euch alle über die Müllabholung informieren lässt… Bei mir machen das die Nachbarn ![]()
Haha ja meine Nachbarn sind da sehr unzuverlässig und ich vergesse das ganz gerne mal. ![]()
ja bin auch schon ein paar Wochen dabei. Immer mal wieder was anpassen. Habe auch noch paar Ideen die ich noch ändern will bzw. was ich noch anzeigen lassen will.
Das Theme basiert auf das Google Theme. Ich habe aber schon soviel daran geändert und hinzugefügt das ich am Überlegen bin das alles neu und sauber zu schreiben und evtl. auf GitHub veröffentliche zur freien Nutzung. Am Tag bzw. je nachdem wie das Endgerät eingestellt ist, ist es auch ein Helles Design. Der Fokus liegt aber auf das Dunkle Design da ich das einfach liebe ![]()
Wie hast du denn die Prozent-Balken (z.B. bei CPU) hinbekommen?
mit der Bar-Card
hier der Code:
- type: custom:bar-card
width: 55%
height: 1.8em
decimal: 0
unit_of_measurement: '%'
positions:
icon: outside
indicator: 'off'
name: outside
value: inside
severity:
- color: null
from: 85
to: 999
entity_row: true
entities:
- entity: sensor.node_pve_cpu_auslastung
name: CPU Auslastung
style: |-
bar-card-value {
margin-right: auto;
font-size: 12px;
font-weight: bold;
}
Könntest Du mir mal bitte sagen, wo ich so eine Farbtabelle finde, um die Werte der Farben zu finden (Hintergrund Button) ?
ich wollte die Hue Buttons machen - da ist ein Verlauf drin
Hierüber mache ich es immer
Schönen Sonntag
Vielen lieben Dank, auch Dir einen schönen Sonntag !!
Hallo
Gefällt mir wirklich sehr gut. Könntest du den Code zu Verfügung stellen damit ich das Teile verwenden kann?
lg
sieht sehr nice aus!
Könntest du mir bitte sagen wie du das mit dem Harmony Hub und den unterschiedlichen Aktivitäten gemacht hast? ![]()
Danke!
Habs mal schnell den gesamten Code vom Dashboard bei Github gist hochgeladen. Hier der Link:
@4-Real Das ist die Service Call tile feature Karte ganz unten steht der Code. Ich musste aber einen Helfer erstellen von typ input_select und einer Automation erstellen die die select von harmony input select überträgt da die karte bisher nur das unterstützt. Zumindest war das so wo ich das erstellt hatte. Falls Interesse daran besteht wie die Automation bei mir aussieht bescheid geben. Dann Zeige ich meinen Code. Und hier erstmal der Code von der Karte selber:
- type: tile
entity: remote.harmony_hub
hide_state: true
features:
type: custom:service-call
entries:
- type: selector
entity_id: input_select.harmony_hub
color: var(--primary-color)
options:
- icon: mdi:power
- icon: mdi:television-box
- icon: mdi:nintendo-switch
- icon: mdi:sony-playstation
Sehr nett schonmal von dir!
Ja, die Automation wäre wirklich sehr nett, wenn du sie auch mal teilst, damit man nachvollziehen kann, wie du es gemacht hast! Danke dir!
Gerne Doch! ![]()
alias: States - Harmony Hub Activities
description: ""
trigger:
- platform: state
entity_id:
- select.harmony_hub_activities
from: null
id: Harmony Hub
- platform: state
entity_id:
- input_select.harmony_hub
from: null
id: Harmony Hub Helper
condition: []
action:
- choose:
- conditions:
- condition: trigger
id:
- Harmony Hub
sequence:
- service: input_select.select_option
data:
option: |-
{% if is_state("select.harmony_hub_activities", "power_off") -%}
{{"Ausschalten"}}
{%- else -%}
{{states('select.harmony_hub_activities')}}
{%- endif %}
target:
entity_id: input_select.harmony_hub
- conditions:
- condition: trigger
id:
- Harmony Hub Helper
sequence:
- service: select.select_option
data:
option: |-
{% if is_state("input_select.harmony_hub", "Ausschalten") -%}
{{"power_off"}}
{%- else -%}
{{ states('input_select.harmony_hub') }}
{%- endif %}
target:
entity_id: select.harmony_hub_activities
mode: single
Vielen Dank für das Teilen deines Dashboards.
Kannst du eventuell auch das Template header_card für die Button-Card zur Verfügung stellen?
klar, gerne.
Habe drei Variationen davon. Einmal Mit Link Button, Einmal ohne und einmal für die popups ohne link und mit bisschen weniger margin nach oben hin.
button_card_templates:
header_card:
variables:
name: ''
label: ''
arrow: mdi:arrow-right
action: ''
browser_mod: ''
link: ''
show_name: false
show_state: false
show_label: false
styles:
grid:
- grid-template-columns: auto min-content 16px
- grid-template-rows: 26px auto 8px
- grid-template-areas: '''header .'' ''header link'' ''header .'''
card:
- background: none
- padding: 0
custom_fields:
header:
card:
type: custom:button-card
template:
- header_card_no_link
name: '[[[ return variables.name ]]]'
link:
card:
type: custom:button-card
name: '[[[ return variables.label ]]]'
icon: '[[[ return variables.arrow ]]]'
show_state: false
tap_action:
action: '[[[ return variables.action ]]]'
browser_mod: '[[[ return variables.browser_mod ]]]'
navigation_path: '[[[ return variables.link ]]]'
url_path: '[[[ return variables.link ]]]'
entity: '[[[ return variables.link ]]]'
styles:
grid:
- grid-template-columns: min-content min-content
- grid-template-areas: '"n i"'
card:
- background: none
- padding: 0
img_cell:
- width: 16px
- background: var(--ha-card-background)
- border-radius: 0 4px 4px 0
- padding-right: 8px
icon:
- width: 100%
- padding-bottom: 2px
name:
- background: var(--ha-card-background)
- border-radius: 4px 0 0 4px
- padding: 4px 8px 6px
- font-size: var(--subtitle-font-size)
header_card_no_link:
variables:
name: ''
name: '[[[ return variables.name ]]]'
show_state: false
show_label: false
tap_action:
action: none
styles:
grid:
- grid-template-columns: auto
- grid-template-areas: '"n"'
card:
- padding: 32px 16px 16px 16px
- background: none
- cursor: default
name:
- text-align: left
- align-self: center
- justify-self: start
- font-size: var(--body-font-size)
- font-weight: 500
- color: var(--secondary-text-color)
header_card_popup:
variables:
name: ''
name: '[[[ return variables.name ]]]'
show_state: false
show_label: false
tap_action:
action: none
styles:
grid:
- grid-template-columns: auto
- grid-template-areas: '"n"'
card:
- padding: 24px 16px 16px 16px
- background: none
- cursor: default
name:
- text-align: left
- align-self: center
- justify-self: start
- font-size: var(--body-font-size)
- font-weight: 500
- color: var(--secondary-text-color)
Nochmals Danke fürs Teilen.
Hey, danke nochmals! Ich hab leider ein kleines Problem.
Wenn ich den Code einfüge sagt er mir leider:
“Custom Element doesn`t exist: service:call”
Kannst du den Fehler nachvollziehen?..











