Hallo Meowmoo,
sieht super aus. Könntest du den Code teilen ?
Vielen Dank und viele Grüße
Reimar
Hallo Meowmoo,
sieht super aus. Könntest du den Code teilen ?
Vielen Dank und viele Grüße
Reimar
Dann mal ein Update meines Dashboards. Bedingung ist, dass es sowohl am Rechner, als auch am Tabet an der Wand, sowie am Handy zumindest im Querformat, funktioniert UND - abgesehen vom Handy - nicht gescrollt werden muss.
Alles was man sieht löst entweder selbst eine Aktion aus oder führt in ein Unterdashboard bzw. ein anderes Dashboard.
du brauchst vertical-stack-in-card, text-divider-row und button card. Gibts alles in HACS
Zum An/Aus schalten braucht man
https://github.com/FunkeyFlo/ps5-mqtt
Um die Playtime zu speichern braucht man
https://github.com/danieldotnl/ha-measureit
Die Condition template zum aufzeichen sieht so aus
{{ is_state('sensor.psn_status', 'Playing') }}
Ich hab die Entitäten nach dem erstellen auf min umgestellt! kannst in den optionen der entität machen. Wenn du es auf sec lässt musst du die Template für die Zeit anpassen.
Hier sind die icons
https://drive.google.com/drive/folders/1FrKhWUo0vxkmMukHsvwFd893wiM5UE0W?usp=drive_link
Für beide PS5 Addons braucht man einen npso Authenticating Manually | psn-api
der läuft leider iwan ab, und dann muss man einen neuen erstellen…
Hoffe ich hab nix vergessen
sonst einfach melden
Code
type: custom:vertical-stack-in-card
cards:
- type: custom:text-divider-row
text: Playstation
- type: custom:vertical-stack-in-card
cards:
- type: custom:button-card
entity: sensor.psn_status
show_name: false
label: ps5
show_label: false
show_entity_picture: true
entity_picture: |
[[[
if (entity.state == 'Playing') {
return states['media_player.ps5_console'].attributes.entity_picture;
} else {
return '/local/ps5/ps.png';
}
]]]
custom_fields:
playtime: |
[[[
const rawValue = states['sensor.ps5_time_day'].state;
const floatValue = parseFloat(rawValue);
const hours = Math.floor(floatValue / 60);
const minutes = Math.floor(floatValue % 60);
let output = 'Today: ';
if (hours > 0) {
output += `${hours}h `;
}
output += `${minutes}min`;
return output;
]]]
play_count: |
[[[
return `Play Count: ${states['sensor.psn_status'].attributes.play_count}`;
]]]
playtime_total: |
[[[
return `Total Played: ${states['sensor.psn_status'].attributes.play_duration}`;
]]]
tagline: |
[[[
if (entity.attributes.description) {
const description = entity.attributes.description.slice(0, 100);
if (description.length > 50) {
let breakIndex = 50;
while (breakIndex >= 0 && !/\s/.test(description[breakIndex])) {
breakIndex--;
}
if (breakIndex === -1) {
breakIndex = 50;
}
return description.slice(0, breakIndex) + '<br>' + description.slice(breakIndex + 1);
} else {
return description;
}
} else {
return '';
}
]]]
styles:
grid:
- position: relative
custom_fields:
playtime_total:
- text-shadow: 1px 1px 1px black
- position: absolute
- left: 10px
- bottom: 10px
- font-size: 12px
- line-height: 15px
play_count:
- text-shadow: 1px 1px 1px black
- position: absolute
- left: 10px
- bottom: 30px
- font-size: 12px
- line-height: 15px
playtime:
- background-color: null
- text-shadow: 1px 1px 1px black
- position: absolute
- right: 10px
- bottom: 10px
- font-size: 12px
- line-height: 15px
tagline:
- text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black
- position: absolute
- left: 50%
- transform: translateX(-50%)
- top: '-16px'
- font-size: 14px
- font-style: oblique;
state:
- value: Offline
styles:
card:
- filter: opacity(50%)
- height: 50px
custom_fields:
playtime:
- filter: opacity(0%)
- color: null
- background-color: null
- text-shadow: 1px 1px 1px black
- position: absolute
- left: 5px
- bottom: null
- font-size: 12px
- line-height: 15px
play_count:
- filter: opacity(0%)
- color: null
- background-color: null
- text-shadow: 1px 1px 1px black
- position: absolute
- left: 5px
- bottom: null
- font-size: 12px
- line-height: 15px
playtime_total:
- filter: opacity(0%)
- color: null
- background-color: null
- text-shadow: 1px 1px 1px black
- position: absolute
- left: 5px
- bottom: 0px
- font-size: 12px
- line-height: 15px
entity_picture: null
- value: Online
styles:
card:
- filter: opacity(50%)
- height: 50px
custom_fields:
playtime:
- filter: opacity(0%)
- color: null
- background-color: null
- text-shadow: 1px 1px 1px black
- position: absolute
- left: 5px
- bottom: null
- font-size: 12px
- line-height: 15px
play_count:
- filter: opacity(0%)
- color: null
- background-color: null
- text-shadow: 1px 1px 1px black
- position: absolute
- left: 5px
- bottom: null
- font-size: 12px
- line-height: 15px
playtime_total:
- filter: opacity(0%)
- color: null
- background-color: null
- text-shadow: 1px 1px 1px black
- position: absolute
- left: 5px
- bottom: 0px
- font-size: 12px
- line-height: 15px
entity_picture: null
- value: Playing
styles:
entity_picture:
- height: 97%
- width: 97%
card:
- height: null
tap_action:
action: call-service
service: input_boolean.toggle
data: {}
target:
entity_id: input_boolean.lovelace_media_stats
hold_action:
action: call-service
confirmation:
text: Playstation an/aus schalten?
service: switch.toggle
data: {}
target:
entity_id: switch.ps5_power
- type: conditional
conditions:
- condition: state
entity: sensor.psn_status
state: Playing
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.psn_status
layout: icon_name_state
show_entity_picture: true
size: 50%
entity_picture: |
[[[ return '/local/ps5/platinum.png' ]]]
name: |
[[[
return `${states['sensor.psn_status'].attributes.earned_trophies.platinum}/${states['sensor.psn_status'].attributes.trophies.platinum}`;
]]]
show_name: true
show_state: false
show_icon: true
styles:
name:
- font-size: 12px
- margin-right: 10px
state:
- font-size: 12px
- type: custom:button-card
entity: sensor.psn_status
layout: icon_name_state
show_entity_picture: true
size: 50%
entity_picture: |
[[[ return '/local/ps5/gold.png' ]]]
name: |
[[[
return `${states['sensor.psn_status'].attributes.earned_trophies.gold}/${states['sensor.psn_status'].attributes.trophies.gold}`;
]]]
show_name: true
show_state: false
show_icon: true
styles:
name:
- font-size: 12px
- margin-right: 10px
state:
- font-size: 12px
- type: custom:button-card
entity: sensor.psn_status
layout: icon_name_state
show_entity_picture: true
size: 50%
entity_picture: |
[[[ return '/local/ps5/silver.png' ]]]
name: |
[[[
return `${states['sensor.psn_status'].attributes.earned_trophies.silver}/${states['sensor.psn_status'].attributes.trophies.silver}`;
]]]
show_name: true
show_state: false
show_icon: true
styles:
name:
- font-size: 12px
- margin-right: 10px
state:
- font-size: 12px
- type: custom:button-card
entity: sensor.psn_status
layout: icon_name_state
show_entity_picture: true
size: 50%
entity_picture: |
[[[ return '/local/ps5/bronze.png' ]]]
name: |
[[[
return `${states['sensor.psn_status'].attributes.earned_trophies.bronze}/${states['sensor.psn_status'].attributes.trophies.bronze}`;
]]]
show_name: true
show_state: false
show_icon: true
styles:
name:
- font-size: 12px
- margin-right: 10px
Hallo zusammen,
die KI kann mir hier irgendwie auch nicht helfen, wie ich den Inhalt der Kacheln zentriert bekomme:
cards:
- type: tile
entity: sensor.hu_k_k_humidity
card_mod:
style: |
:host {
{% set hum = states('sensor.hu_k_k_humidity') | float(0) %}
{% if hum < 30 %}
--card-mod-icon-color: darkred;
{% elif hum <= 40 %}
--card-mod-icon-color: red;
{% elif hum <= 50 %}
--card-mod-icon-color: orange;
{% elif hum <= 60 %}
--card-mod-icon-color: yellow;
{% elif hum <= 70 %}
--card-mod-icon-color: green;
{% elif hum <= 80 %}
--card-mod-icon-color: lightblue;
{% elif hum <= 90 %}
--card-mod-icon-color: blue;
{% elif hum <=95 %}
--card-mod-icon-color: darkblue;
{% endif %}
}
name: Keller
tap_action:
action: navigate
navigation_path: /lovelace/0
show_name: true
show_icon: true
Mit
display: flex;
justify-content: center;
text-align: center;
align-items: center;
Sieht es nicht so schön aus:
So, ich zeig mal was ich die letzten 2 Jahre so aus 2 ipad Air gemacht habe, eins im EG, eins im OG
Alle Seiten öffnen sich beim entsprechendem Druck auf das passende Element auf den Startseiten:
Startseite EG
Wie hast du das mit dem Lüften gebaut? Also was genau tut das?
Wenn es draussen 2 Grad kälter als im OG bzw. EG oder Generell ist und es mehr als 22 Grad im Haus sind und vor Mitternacht, dann wird dieses Dahboard via Browser-Mod aus einer Automation heraus aktiviert.
Dann möchte ich mich auch mal vorstellen.
Ich bin Robert und seit unserem Neubau im Jahr 2020 habe ich Home Assistant lieben und schätzen gelernt. Unser Free@Home von Busch Jäger war mir einfach zu eingeschränkt. Das Projekt ist dann einfach immer weiter gewachsen.
Aktuell läuft HA auf nem Proxmox Server mit vielen Automationen (zb. Automatische Verschattung via Node-Red anhand Sonnenstand , Winkel und Wetterdaten…) Das hätte ich mit Free@Home niemals so realisieren können…
Hier mal unser Dashboard vom Fire-Tablet im Flur.
Für die mobile App, hier mal ein paar Ansichten…
Ich mag es schlicht.
Oben links immer der aktuelle Name des Dashboards. Oben rechts gelangt man immer zum Home Dashboard.
Hier mal das Thema Energie mit Überschussrechnung durch auslesen des Stromzählers und der PV-Anlage
Hier habe ich eine Fernbedienung für mein Kino realisiert…
Das war ein ganzes Stück Arbeit. Ich bin Happy
by HarryP: Zusammenführung Mehrfachpost
Ich meine die Button-Card kann das. Schaut dir Mal das GitHub Repo an.
Ich habe mir ein extra Dashboard gebaut, da mir die Seitenleiste zu voll war.
Auf der Linken Seite sind Verknüpfungen zu Seite/Addons in Home Assistant und Lokalen Netz die ich regelmäßig benutze.
Der Rest sind Infos die nicht schaden wen man da mal regelmäßig drauf schaut.
Wenn Updates für Proxmox vorhanden sind wird mir das auch angezeigt, wo jetzt 0 steht steht dann die Anzahl verfügbarer Updates:
Wenn ich den Wlan Gastzugang starte kommt wir automatisch der QR-Code zum verbinden angezeigt.
Ändert sich bestimmt noch mal was dran, aber fürs erste reicht es mir.
LG
Tobi
Gute Idee und schön übersichtlich. Holst du die proxmox-Daten hierüber?
https://github.com/dougiteixeira/proxmoxve
Ja, genau die Integration verwende ich.
Edit:
Wie hast Du das alles mit dem NAS gemacht? Offline etc. etc.?
Ich bin über die Sichtbarkeit gegangen, hier die Mushroom Template Karte die ich anzeige wen das NAS Offline ist: state = Nicht verfügbar
state ≠ Nicht verfügbar
Okay, danke! Die wollte ich auch schon längst eingerichtet haben, aber komme einfach nicht dazu.
@ciddi89
ich habe ja einige Dinge von dir entnommen, so u.a. die Beschriftung ganz oben auf den Seiten, aber mir ist es nicht gelungen sowohl für den Haupttitel noch den Untertitel die Textfarbe zu ändern.
Laut Beschreibungen habe ich einiges gefunden aber nichts funktioniert.
Ich habe es mit “card_mod” direkt in der mushroom-title-card unter subtitle ausprobiert.
Das einzige was funktioniert ist der Schriftstil “italic”
Hier mal meine Versuche.
card_mod:
style: |
ha-card {
--card-primary-color: blue;
--card-secondary-color: orange;
--card-primary-color: yellow;
--primary-text-color: blue;
--secondary-text-color: lime;
--text-color: blue;
font-style: italic;
}
Sehr interessante HACS-Integration (frontend) zur Darstellung von mehreren Entitäten in einer Karte:
Hi,
Probiere es mal mit:
card_mod:
style: |
ha-card {
--title-color: orange;
--subtitle-color: orange;
}
Manchmal kann es ganz einfach sein
Was mir noch nicht gelingt ist das eintragen der Temperatur mit einer farblichen Anpassung
Inzwischen waren die Entwickler der SunSylk PowerFlow-Card sehr fleißig, haben die Informationsvielfalt sehr stark erweitert und fast alles über das UI konfigurierbar gemacht. Zusätzlich wurden noch die Besonderheiten von 20 WR mit aufgenommen, so dass der Name fast irreführend ist. Hier mein aktuelles Power-Flow Dashboard:
Die Farben von Grid, Batterie und Home passen sich automatisch dem jeweiligen Betriebszustand an, wenn man möchte.