Haftungsausschluss: Diese Readme-Datei wurde automatisch von ChatGPT übersetzt. Wir übernehmen keine Verantwortung für mögliche Ungenauigkeiten oder Fehler in der Übersetzung. Bitte beachten Sie, dass dies eine automatisierte Übersetzung ist.

(Übersetzung gültig ab Version 2.2.2 des Themes.)

Home Assistant LCARS

Star Trek LCARS theme für Home Assistant

Farbcodes und Schriftauswahl von https://www.thelcars.com --Danke Jim Robertus!

Beispiele

Dashboard

Bearbeitungsmodi

Mobile Ansicht

Enthaltene Themes

Classic, Lower Decks, Romulus, Cardassia, Kronos, Nemesis.

Präambel

Ich bin definitiv kein echter Webentwickler und habe mich mit Hilfe von Stack Exchange und verschiedenen Blogs zu CSS-Techniken in die erste Veröffentlichung hineingestolpert. Mein Hauptziel war und ist es immer noch, dieses Theme zu 100% auf CSS/JS-Basis zu halten, ohne zusätzliche Ressourcen außer der Schriftart zu benötigen. Ich bin sicher, es gibt bessere Möglichkeiten, alles, was ich bisher gemacht habe, umzusetzen. Daher sind Pull Requests willkommen. Ich werde Dinge weiter verbessern, während ich lerne, und mehr Kommentare zu meinem CSS hinzufügen, damit Sie wissen können, was Dinge tun und mir vielleicht sagen können, wie es besser sein könnte, wenn Sie es wissen. Ich habe dieses Theme mit den meisten der mit Home Assistant ausgelieferten Standardkarten und einigen in HACS verfügbaren Karten wie der Mail and Packages-Karte getestet. Es könnten jedoch noch einige Karten katastrophal kaputt sein. Erstellen Sie einfach ein Problem und ich werde mich darum kümmern.

Installationsanweisungen

Voraussetzungen

I. Themes aktivieren und card-mod installieren

Installieren Sie card-mod gemäß den Anweisungen auf seiner GitHub-Seite.
Stellen Sie sicher, dass Sie in Ihrer configuration.yaml-Datei Folgendes haben:

frontend:
  javascript_version: latest
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /local/community/lovelace-card-mod/card-mod.js #or wherever you ended up putting card-mod.js

Unter dem Home Assistant Config-Ordner erstellen Sie einen neuen Ordner mit dem Namen themes.
Starten Sie Home Assistant neu, um die Änderungen zu übernehmen.

II. Schriftart und JavaScript-Datei hinzufügen

Für dieses Theme müssen Sie sowohl die Schriftart Antonio als auch die Datei lcars.js als Ressourcen zu Ihrer Lovelace-Konfiguration hinzufügen.

Navigieren Sie zu Einstellungen → Dashboards → Drei-Punkt-Menü → Ressourcen und fügen Sie die folgenden neuen Ressourcen hinzu:

https://fonts.googleapis.com/css2?family=Antonio:wght@400;700&display=swap und wählen Sie 'stylesheet'
https://cdn.jsdelivr.net/gh/th3jesta/ha-lcars@js-main/lcars.js und wählen Sie JavaScript

-ODER-

Wenn Sie dem zufälligen JavaScript von jemand anderem, das auf einem CDN gehostet wird, nicht vertrauen (ich verstehe das), können Sie die lcars.js-Datei direkt von GitHub herunterladen, selbst überprüfen und sie in Ihrem <home-assistant-Verzeichnis>/www/community/ ablegen; dies muss bei jedem HA-LCARS-Update erfolgen. Fügen Sie /local/community/lcars.js nicht zu extra_module_url hinzu; es wird dort nicht funktionieren.

WENN SIE CLOUDFLARE VOR IHRER WEBSITE VERWENDEN: Löschen Sie Ihren Website-Cache in CloudFlare (Cache löschen unter Schnellaktionen) immer dann, wenn Sie die lokale Datei aktualisieren oder wenn Sie den JSDelivr-Link verwenden und eine neue Version von HA-LCARS veröffentlicht wird. Dies muss geschehen, unabhängig davon, ob Sie den JSDelivr-Link verwenden oder ihn in Ihren www-Ordner legen. Es sei denn, Sie teilen es ihm mit, CloudFlare puffert alles in Ihrer Website, was es kann.

III. Uhr einrichten

Damit die Uhr funktioniert, müssen Sie die Integration für Zeit & Datum einrichten, indem Sie folgendes zu Ihrer configuration.yaml hinzufügen:

sensor:
  - platform: time_date
    display_options:
      - 'time'
      - 'date'
      - 'date_time'
      - 'date_time_utc'
      - 'date_time_iso'
      - 'time_date'
      - 'time_utc'

Weitere Informationen: https://www.home-assistant.io/integrations/time_date/

IV. Entitäten erstellen

Dieses Theme verfügt über zwei Steuerelemente für Ton und Texturen, für die einfache Umschalt-Entitäten erstellt werden müssen. Erstellen Sie sie, indem Sie zu Einstellungen > Geräte & Dienste > Helfer gehen und zwei vom Typ Umschalten mit folgenden Namen erstellen:

LCARS-Sound (Entitäts-ID sollte input_boolean.lcars_sound sein)
LCARS-Textur (Entitäts-ID sollte input_boolean.lcars_texture sein)

Diese Entitäten können direkt durch Anzeigen der Entität gesteuert werden, oder Sie können sogar Schaltflächen zu Ihrem Dashboard hinzufügen, um sie zu steuern, genauso wie jede andere Entität.

Theme installieren

Installieren Sie es über HACS, indem Sie nach "LCARS" suchen, oder laden Sie die neueste Version herunter, entpacken Sie sie und legen Sie den Ordner "lcars" in Ihren Ordner "themes".

Theme aktivieren

Option 1: Über das Profil

Öffnen Sie Ihr Home Assistant Profil
Wählen Sie unter Themes eines der neuen LCARS-Themes aus
Rufen Sie den Dienst frontend.reload_themes auf.

Option 2: Festlegen des Standard-Backends-Themas

Damit dieses Theme automatisch als Standard für das Backend ausgewählt wird, fügen Sie die folgende Automatisierung zu Ihrem Home Assistant hinzu:

- alias: Set Default Theme
  description: ''
  trigger:
  - event: start
    platform: homeassistant
  condition: []
  action:
  - data:
      name: LCARS Default # or whichever other theme is available, like LCARS Lower Decks
    service: frontend.set_theme

Anleitung zur Verwendung

Klassen

Das Theme enthält einige Klassen, die Karten hinzugefügt werden können, um ihnen spezielles Styling zu verleihen:

card_mod:
  class: header

Die Klassennamen sind nur Hinweise darauf, für welche Arten von Karten sie gedacht waren, aber die Klassen können auf jede gewünschte Karte angewendet werden. Ich kann jedoch nicht garantieren, wie gut sie außerhalb ihrer beabsichtigten Verwendungszwecke funktionieren werden.

Die Klassen sind wie folgt:

header header-right header-contained header-open - obere blaue Leiste (im Standard-Theme) für Markdown-Karten mit einer H1-Zeile, die einen Abschnitt startet

YAML

Ergebnis

type: markdown
card_mod:
  class: header
content: '# header'

type: markdown
card_mod:
  class: header-right
content: '# header-right'

type: markdown
card_mod:
  class: header-contained
content: '# header-contained'

type: markdown
card_mod:
  class: header-open
content: '# header-open'

middle middle-right middle-contained - seitliche rote Leiste (im Standard-Theme) für Nicht-Schaltflächen-Abschnitte unterhalb des header und oberhalb des footer

YAML

Ergebnis

type: markdown
card_mod:
  class: middle
content: '# middle'

type: markdown
card_mod:
  class: middle-right
content: '# middle-right'

type: markdown
card_mod:
  class: middle-contained
content: '# middle-contained'
    
type: markdown
card_mod:
  class: middle-blank
content: '# middle-blank'

footer footer-right footer-contained footer-open - untere graue Leiste (im Standard-Theme) für die letzte Karte in einem Abschnitt

YAML

Ergebnis

type: markdown
card_mod:
  class: footer
content: '# footer'

type: markdown
card_mod:
  class: footer-right
content: '# footer-right'

type: markdown
card_mod:
  class: footer-contained
content: '# footer-contained'

type: markdown
card_mod:
  class: footer-open
content: '# footer-open'

button-small - quadratische Schaltflächen, die für mittlere Abschnitte sowie horizontale Stapel und Raster vorgesehen sind

YAML	Ergebnis
type: light entity: light.jesse_s_desk name: Desk Lamp card_mod: class: button-small

button-large - abgerundete Schaltfläche, die eigenständig außerhalb der Abschnitte header/middle/footer stehen soll

YAML	Ergebnis
show_name: true show_icon: true type: button tap_action: action: call-service service: frontend.reload_themes data: {} target: {} show_state: true card_mod: class: button-large

button-lozenge button-lozenge-right - pilleförmige Schaltfläche; funktioniert nur auf Standard-Schaltflächenkarten; funktioniert auch auf Schaltflächenkarten in horizontalen Stapeln und Rastern bis zu zwei Spalten Breite; mehr Spalten werden unzuverlässig und sind nicht ratsam

YAML

Ergebnis

show_name: true
show_icon: true
type: button
tap_action:
  action: toggle
entity: switch.speakers
icon: mdi:speaker-multiple
card_mod:
  class: button-lozenge
  
show_name: true
show_icon: true
type: button
tap_action:
  action: toggle
entity: switch.lightsaber
card_mod:
  class: button-lozenge-right

button-bullet button-bullet-right - ähnlich wie das Lozenge, aber mit einer abgerundeten Seite; gleiche Spaltenbeschränkungen gelten

YAML

Ergebnis

show_name: true
show_icon: true
type: button
tap_action:
  action: toggle
entity: light.bedroom_tree
card_mod:
  class: button-bullet
  
show_name: true
show_icon: true
type: button
tap_action:
  action: toggle
entity: switch.counter_lights
card_mod:
  class: button-bullet-right

button-capped button-capped-right - ähnlich wie das Bullet, aber auf der runden Seite abgeschlossen; gleiche Spaltenbeschränkungen gelten

YAML

Ergebnis

show_name: true
show_icon: true
type: button
tap_action:
  action: toggle
entity: light.bathroom
card_mod:
  class: button-capped
  
show_name: true
show_icon: true
type: button
tap_action:
  action: toggle
entity: switch.built_in
card_mod:
  class: button-capped-right

bar bar-right bar-large bar-large-right - eigenständige Kopfzeilentyp-Leiste; nur für und mit Markdown-Karten beabsichtigt und getestet

YAML

Ergebnis

type: markdown
content: '# bar'
card_mod:
  class: bar
  
type: markdown
content: '# bar-large'
card_mod:
  class: bar-large
  
type: markdown
content: '# bar-right'
card_mod:
  class: bar-right
  
type: markdown
content: '# bar-large-right'
card_mod:
  class: bar-large-right

Erstellen eigener Farbthemen

Benutzerdefinierte Themen können unten in lcars.yaml erstellt werden. Oder suchen Sie nach "===THEMES", das bringt Sie direkt dorthin. Um Ihr eigenes Thema zu erstellen, kopieren Sie den Abschnitt "LCARS Default" ans Ende der Datei und ändern Sie die lcars-ui-*- und lcars-card-*-Variablen nach Belieben, unter Verwendung der Farbverweise oben in der Datei, Die LCARS-Website oder definieren Sie Ihre eigenen.

Tipps und Tricks

Wenn Sie hier etwas hinzufügen möchten, erstellen Sie eine Pull-Anfrage mit Ihrem Tipp, und ich werde sie überprüfen und zur Liste hinzufügen.

Nutzen Sie Vertical Stack-Karten. Egal, ob in diesem Theme oder einem anderen Theme, sie sind unschätzbar, um Dashboards organisiert zu halten. In LCARS sollte eine Vertical Stack-Karte zuerst eine Markdown-Karte mit dem Titel der Gruppe und der Klasse header enthalten, dann beliebig viele Karten mit der Klasse middle und einzelne Schaltflächen oder horizontale Stapel oder Raster mit der Klasse button, und schließlich sollte die Klasse footer auf der letzten Karte im Vertical Stack angewendet werden. Sie können diese Formation in allen Screenshots oben auf dieser Seite sehen. Hier ist ein Beispiel für eine Vertical Stack-Karte und deren Inhalt:

YAML

Ergebnis

type: vertical-stack
cards:
  - type: markdown
    card_mod:
      class: header
    content: '# Climate'
  - type: weather-forecast
    entity: weather.home
    card_mod:
      class: middle
  - type: thermostat
    entity: climate.dining_room
    card_mod:
      class: footer

Sie können eine leere Kopf- oder Fußzeile erstellen, indem Sie eine Markdown-Karte erstellen und ##   in das Feld für den Inhalt setzen, und die Größe ändern, indem Sie die Anzahl der # ändern. Es sieht so aus:
Wenn Sie das Theme nur auf ein Dashboard oder eine Karte anwenden, wird die Schriftart auf den Karten nicht gerendert. Sie können die Schriftart gewaltsam auf einer pro-Karten-Basis laden, indem Sie dem folgenden Stil zu jeder Karte hinzufügen:

YAML	Ergebnis
type: markdown content: '# Card-level theming' theme: LCARS Default card_mod: class: header style: \| ha-card > * { font-family: Antonio }

Wenn Sie die Schriftart selbst hosten möchten, z. B. wenn Sie eine Home Assistant-Instanz in einem Auto oder in einem abgeschotteten Netzwerk ausführen, können Sie lernen, wie Sie die Schriftart herunterladen und von der Issue #69 installieren.
Sie können die Ausrichtung von Text in einer Karte, wie zum Beispiel der Markdown-Karte für header-right, ändern, indem Sie benutzerdefiniertes CSS pro Karte hinzufügen, wie folgt:

YAML	Ergebnis
card_mod: class: header-right style: \| ha-card { text-align: right; }

Sie können die Hintergrundfarbe einer Schaltfläche auf die Farbe des Lichts setzen, indem Sie benutzerdefiniertes CSS pro Karte hinzufügen, wie folgt:

YAML

Ergebnis

card_mod:
  class: button-capped-right
  style: |
    ha-card {
      {% if is_state('light.terasa', 'on') %}
        {% set rgb_color = state_attr('light.terasa', 'rgb_color') %}
        background-color: rgba({{ rgb_color[0] }}, {{ rgb_color[1] }}, {{ rgb_color[2] }}, 1);
        color: black;  /* or any other logic for text color */
      {% else %}
        background-color: #dd4444;
        color: black;
      {% endif %}
    }

Bekannte Probleme

Schriftart- und Seitenleisten- sowie Kopfzeilen-CSS-Stile werden nur geladen, wenn zuerst ein Dashboard geladen wurde. Wenn Sie direkt zu einer Nicht-Dashboard-Seite navigieren, ohne zuerst ein Dashboard zu laden, wird es ziemlich schrecklich aussehen, aber trotzdem funktional sein. Laden Sie einfach ein Dashboard und klicken Sie auf die Zurück-Schaltfläche. Dies ist eine Eigenart des card-mod-Addons, auf dem dieses Theme basiert, sodass ich es nicht reparieren kann.
card-mod-Klassen funktionieren nicht mit Vertical Stack- und Horizontal Stack-Karten (obwohl sie mit den enthaltenen Karten funktionieren). Dies ist eine Eigenart des card-mod-Addons, auf dem dieses Theme basiert, sodass ich es nicht reparieren kann. Es gibt jedoch einen Workaround, den ich identifiziert habe, aber mich entschieden habe, ihn derzeit nicht einzuschließen. Bitte reichen Sie eine Feature-Anfrage ein, wenn Sie möchten, dass dies aufgenommen wird.
Das Zusammenklappen und Ausklappen der Seitenleiste oder das Zoomen der Oberfläche wird mit den Überlagerungen von Rauschen und Gradienten stören. Ein einfacher Refresh setzt alles wieder richtig. Ich hoffe, eine Möglichkeit zu finden, die Pseudo-Elemente, die die Texturen enthalten, dynamisch an den DOM anzupassen. PRs sind willkommen. Fehler hier.
Menüseiten wie Entwicklungswerkzeuge und Profil sind funktionsfähig, aber nicht optimal. Leider kann ich nicht viel dagegen tun, da card-mod keine Methode zum Ändern dieser Seiten bietet. Fehlermeldungen für alles, was komplett kaputt und unbrauchbar ist, das ich übersehen haben könnte, sind willkommen, ebenso wie PRs, um die Dinge zu verbessern.
Manchmal werden beim Laden eines Dashboards nicht alle CSS-Stile geladen, und alle oder die meisten Karten sehen aus wie die button-large-Karten. Dies tritt häufiger bei großen Dashboards auf. Versuchen Sie, die Seite neu zu laden, und wenn das nicht funktioniert, laden Sie ein kleineres Dashboard und kehren Sie dann zum problematischen Dashboard zurück.

Dank

Vielen Dank an @JHuckins für die Unterstützung bei der Farbgestaltung und das Testen!
Vielen Dank an @csanner für die neuen Klassen und zusätzlichen Fixes und Tweaks!
Vielen Dank an @Anthrazz für die Bar-Klassen!
Vielen Dank an @mtezzo für die Schalter-Entität für Texturen/Gradienten und das Modern-Theme (mein neues Lieblings-Theme)!
Vielen Dank an @CmdreIsaacHull für verschiedene Fixes, Verbesserungen, Themen und neue Klassen!
Vielen Dank an @askpatrickw für die Lösung, wie die Schriftart selbst gehostet werden kann!
Vielen Dank an @z3r0l1nk für den Trick mit den farblich abgestimmten Lichtschaltflächen!
Vielen Dank an @smugleafdev für den Tipp mit dem rechtsbündigen Text!
Vielen Dank an @Routhinator (über Discord) für die Fixierung des rechten Fußzeilenproblems!

Links

Discord: https://discord.gg/gGxud6Y6WJ

LCARS-Ressourcen: https://www.thelcars.com

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README-DE.md

README-DE.md

Home Assistant LCARS

Beispiele

Dashboard

Bearbeitungsmodi

Mobile Ansicht

Enthaltene Themes

Präambel

Installationsanweisungen

Voraussetzungen

I. Themes aktivieren und card-mod installieren

II. Schriftart und JavaScript-Datei hinzufügen

-ODER-

III. Uhr einrichten

IV. Entitäten erstellen

Theme installieren

Theme aktivieren

Option 1: Über das Profil

Option 2: Festlegen des Standard-Backends-Themas

Anleitung zur Verwendung

Klassen

Erstellen eigener Farbthemen

Tipps und Tricks

Bekannte Probleme

Dank

Links

Files

README-DE.md

Latest commit

History

README-DE.md

File metadata and controls

Home Assistant LCARS

Beispiele

Dashboard

Bearbeitungsmodi

Mobile Ansicht

Enthaltene Themes

Präambel

Installationsanweisungen

Voraussetzungen

I. Themes aktivieren und card-mod installieren

II. Schriftart und JavaScript-Datei hinzufügen

-ODER-

III. Uhr einrichten

IV. Entitäten erstellen

Theme installieren

Theme aktivieren

Option 1: Über das Profil

Option 2: Festlegen des Standard-Backends-Themas

Anleitung zur Verwendung

Klassen

Erstellen eigener Farbthemen

Tipps und Tricks

Bekannte Probleme

Dank

Links