https://github.com/th3jesta/ha-lcars
LCARS theme for Home Assistant
https://github.com/th3jesta/ha-lcars
ha-theme hacs hacs-theme home-assistant homeassistant homeassistant-themes lcars lcars-interface lcars-style startrek themes
Last synced: 3 months ago
JSON representation
LCARS theme for Home Assistant
- Host: GitHub
- URL: https://github.com/th3jesta/ha-lcars
- Owner: th3jesta
- License: mit
- Created: 2022-09-08T18:57:51.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-12-30T12:25:42.000Z (4 months ago)
- Last Synced: 2024-12-30T13:19:22.609Z (4 months ago)
- Topics: ha-theme, hacs, hacs-theme, home-assistant, homeassistant, homeassistant-themes, lcars, lcars-interface, lcars-style, startrek, themes
- Homepage:
- Size: 5.87 MB
- Stars: 308
- Watchers: 13
- Forks: 22
- Open Issues: 26
-
Metadata Files:
- Readme: README-DE.md
- License: LICENSE
Awesome Lists containing this project
README
**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
[](https://github.com/hacs/integration)
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
1. Installieren Sie `card-mod` gemäß den Anweisungen auf seiner [GitHub-Seite](https://github.com/thomasloven/lovelace-card-mod "card-mod").
2. Stellen Sie sicher, dass Sie in Ihrer **configuration.yaml**-Datei Folgendes haben:
```yaml
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
```
3. Unter dem Home Assistant **Config**-Ordner erstellen Sie einen neuen Ordner mit dem Namen **themes**.
4. **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:
1. `https://fonts.googleapis.com/css2?family=Antonio:wght@400;700&display=swap` und wählen Sie 'stylesheet'
2. `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 `/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:
```yaml
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](https://github.com/th3jesta/ha-lcars/releases/latest) herunter, entpacken Sie sie und legen Sie den Ordner "lcars" in Ihren Ordner "themes".
### Theme aktivieren
#### Option 1: Über das Profil
1. Öffnen Sie Ihr Home Assistant **Profil**
2. Wählen Sie unter **Themes** eines der neuen LCARS-Themes aus
3. 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:
```yaml
- 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:
```yaml
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:
1. `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
```yaml
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'
```
2. `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
```yaml
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'
```
3. `footer` `footer-right` `footer-contained` `footer-open` - untere graue Leiste (im Standard-Theme) für die letzte Karte in einem Abschnitt
YAML Ergebnis
```yaml
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'
```
4. `button-small` - quadratische Schaltflächen, die für mittlere Abschnitte sowie horizontale Stapel und Raster vorgesehen sind
YAML Ergebnis
```yaml
type: light
entity: light.jesse_s_desk
name: Desk Lamp
card_mod:
class: button-small
```
5. `button-large` - abgerundete Schaltfläche, die eigenständig außerhalb der Abschnitte `header`/`middle`/`footer` stehen soll
YAML Ergebnis
```yaml
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
```
6. `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
```yaml
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
```
7. `button-bullet` `button-bullet-right` - ähnlich wie das Lozenge, aber mit einer abgerundeten Seite; gleiche Spaltenbeschränkungen gelten
YAML Ergebnis
```yaml
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
```
8. `button-capped` `button-capped-right` - ähnlich wie das Bullet, aber auf der runden Seite abgeschlossen; gleiche Spaltenbeschränkungen gelten
YAML Ergebnis
```yaml
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
```
9. `bar` `bar-right` `bar-large` `bar-large-right` - eigenständige Kopfzeilentyp-Leiste; nur für und mit Markdown-Karten beabsichtigt und getestet
YAML Ergebnis
```yaml
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](https://www.thelcars.com/colors.php) 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
```yaml
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
```yaml
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 https://github.com/th3jesta/ha-lcars/issues/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
```yaml
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
```yaml
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](https://github.com/thomasloven/lovelace-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](https://github.com/thomasloven/lovelace-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](https://github.com/th3jesta/ha-lcars/issues/4).~~
* 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