De interface aanpassen met HACS en Catppuccin

Laatst bijgewerkt:

Inleiding

Home Assistant is een opensourceplatform voor huisautomatisering en IoT. Met HACS (Home Assistant Community Store) installeer je aangepaste integraties, dashboardonderdelen en thema’s die de community onderhoudt om functies en interface uit te breiden.

De vorige handleidingen installeerden Home Assistant Container op reComputer RK3576 en maakten een temperatuur- en vochtigheidsdashboard met Modbus TCP. Hier installeren we HACS, passen de interface aan met Catppuccin Theme en controleren of het bestaande dashboard bruikbaar blijft.

Container heeft niet het ingebouwde beheer van Apps (voorheen Add-ons) van Home Assistant OS / Supervised, maar ondersteunt HACS. HACS is geen Apps-winkel en voegt geen Supervisor toe. Deze handleiding beheert de configuratie via SSH en Docker-opdrachten.

Voorbereiding

Hardware

  • Eén reComputer RK3576 met ARM64 Linux en een werkende netwerkverbinding.
  • Een Windows-, macOS- of Linux-computer voor SSH en browsertoegang.
  • Netwerktoegang tot GitHub en de HACS-downloadsite.

Software

OnderdeelGeteste omgeving
BoardreComputer RK3576
BesturingssysteemArmbian (Debian 12 Bookworm, ARM64)
Home Assistant-installatieHome Assistant Container (Docker)
Containernaamhomeassistant
Configuratiemap/home/seeed/homeassistant/config/
HACS2.0.5
Catppuccin Themev2.1.3
Webtoeganghttp://<RK3576_IP>:8123

Voltooi eerst de Docker-installatie en eerste configuratie in Home Assistant installeren op reComputer RK3576. Voor het temperatuur- en vochtigheidsdashboard kun je ook Modbus TCP integreren met Home Assistant volgen. Modbus is niet verplicht voor deze handleiding.

Het pad /home/seeed/homeassistant/config/ gebruikt het voorbeeldaccount seeed. Gebruik het werkelijke pad als je gebruikersnaam of configuratiekoppeling afwijkt.

Controleer de container in de RK3576-terminal:

bash
sudo docker ps --filter name=homeassistant

De container homeassistant hoort de status Up te hebben.

Optioneel: Een back-up maken

Maak vóór het toevoegen van aangepaste onderdelen een back-up van configuratie en dashboardgegevens. Deze opdrachten stoppen Home Assistant kort voor een consistente bestandsback-up:

bash
sudo docker stop homeassistant
sudo tar -czf "$HOME/homeassistant-config-backup.tar.gz" -C "$HOME/homeassistant" config
sudo docker start homeassistant
ls -lh "$HOME/homeassistant-config-backup.tar.gz"

Het archief bevat de configuratiemap, niet losse bestanden elders, zoals het Modbus-simulatorscript. Kopieer de back-up naar je computer of externe opslag en bewaar deze niet alleen op RK3576. Bewaar bij een versleutelde back-up via de webinterface ook de encryptiesleutel veilig.

HACS installeren in Home Assistant Container

Stap 1: De Docker-container openen

Maak via SSH verbinding en voer uit:

bash
sudo docker exec -it homeassistant bash

Controleer het configuratiepad in de container:

bash
pwd

De werkmap is meestal /config.

Stap 2: Het officiële HACS-script uitvoeren

Voer dit in de container uit:

bash
set -o pipefail
wget -O - https://get.hacs.xyz | bash -

Het script downloadt HACS naar de map voor aangepaste integraties. De opdracht komt uit de officiële Container-instructies. Controleer vooraf of je het downloaddomein en het netwerk vertrouwt.

Controleer het bestand na installatie:

bash
ls -l /config/custom_components/hacs/manifest.json

Als manifest.json bestaat, staan de HACS-bestanden in de configuratiemap. Het bestand alleen bevestigt geen webautorisatie; ga verder met de integratieconfiguratie.

Stap 3: Home Assistant opnieuw starten

Verlaat de container:

bash
exit

Voer uit in de terminal van de RK3576-host:

bash
sudo docker restart homeassistant

Open na het opnieuw starten:

text
http://<RK3576_IP>:8123

HACS configureren in de webinterface

Stap 4: De HACS-integratie toevoegen

  1. Open Settings → Devices & services.
  2. Selecteer rechtsonder Add integration.
  3. Zoek HACS en selecteer de integratie. Ontbreekt deze, ververs de browser geforceerd en controleer of de container opnieuw is gestart.
  4. Lees de vier HACS-verklaringen over logboeken, het ontbreken van Add-ons, compatibiliteit en probleemoplossing. Vink ze na het lezen aan en selecteer Submit.

De HACS-integratie toevoegen

Stap 5: Autoriseren via GitHub

HACS gebruikt GitHubs apparaatautorisatie om communityrepositories te bereiken:

  1. Home Assistant toont Waiting for device activation en een code XXXX-XXXX.
  2. Laat het dialoogvenster open en open https://github.com/login/device op een andere pagina.
  3. Meld je aan bij je GitHub-account, voer de code in en selecteer Continue.
  4. Volg de aanwijzingen en selecteer Authorize HACS.
  5. Ga terug naar Home Assistant, wacht op autorisatie en voltooi eventuele opties zoals regioselectie.

De code is alleen voor de huidige autorisatie. Publiceer geen codes, toegangstokens of back-upsleutels in wikischermbeelden. Start bij een verlopen code de HACS-configuratie opnieuw voor een nieuwe code.

HACS autoriseren via GitHub

Stap 6: De HACS-installatie bevestigen

Open Settings → Devices & services → Integrations → HACS om de geconfigureerde integratie te bekijken.

Na configuratie kun je op de HACS-pagina communityrepositories en gedownloade onderdelen bekijken.

De HACS-installatie bevestigen

Ververs Home Assistant. Meestal verschijnt HACS in de zijbalk.

Catppuccin installeren met HACS

Stap 7: De themaconfiguratie controleren

Voer via SSH op de RK3576-host uit:

bash
sudo nano /home/seeed/homeassistant/config/configuration.yaml

Controleer of het bestand dit bevat:

yaml
frontend:
  themes: !include_dir_merge_named themes

Als frontend: bestaat, voeg geen tweede sleutel frontend: toe. Voeg themes: toe onder de bestaande sleutel of behoud deze. De Container-configuratie kan deze regels al bevatten.

Sla op en voer de officiële controle uit:

bash
sudo docker exec homeassistant python -m homeassistant --script check_config --config /config

Start Home Assistant alleen opnieuw wanneer je de themamap in configuration.yaml voor het eerst toevoegt of wijzigt:

bash
sudo docker restart homeassistant

Stap 8: Catppuccin Theme downloaden

  1. Selecteer HACS in de zijbalk.
  2. Zoek Catppuccin en selecteer Catppuccin Theme.
  3. Selecteer Download voor de versiebevestiging.
  4. Behoud de aanbevolen standaardversie (v2.1.3 in de test) en selecteer rechtsonder DOWNLOAD.

De geteste interface toonde dit opslagpad:

text
/config/themes/catppuccin/catppuccin.yaml

Catppuccin Theme downloaden met HACS

“Need a different version?” kiest een andere versie. Bij de eerste installatie hoef je doorgaans niet handmatig een oudere versie te kiezen.

Stap 9: Thema’s opnieuw laden

Open na het downloaden:

Settings → Tools → Actions

Voer deze actie uit:

text
frontend.reload_themes

Dit laadt thema’s zonder containerherstart. Ontbreekt de actie, voer sudo docker restart homeassistant uit en ververs de browser.

Stap 10: Catppuccin Mocha selecteren

  1. Open Profile via de gebruikersavatar linksonder.
  2. Open de keuzelijst Theme.
  3. Selecteer Catppuccin Mocha.
  4. De interface schakelt doorgaans meteen naar het donkere thema.

De themastijlen:

ThemaStijl
Catppuccin LatteLicht, geschikt voor heldere omgevingen
Catppuccin FrappéZacht donkergrijs-blauw palet
Catppuccin MacchiatoDonkergrijs-blauw palet
Catppuccin MochaDonker paars-blauw palet voor bewakingsschermen
Catppuccin Auto Latte MochaWisselt de stijl met de lichte/donkere modus

Resultaten

Na toepassing van Catppuccin Mocha op RK3576 gebruikt het bestaande Modbus TCP-dashboard een donker palet. De temperatuur- en vochtigheidsmeters en geschiedenisgrafieken blijven zichtbaar.

Catppuccin Mocha op reComputer RK3576

Open na de Modbus TCP-handleiding RK3576 Modbus Monitoring in de zijbalk om het nieuwe thema te bekijken. De wijziging past alleen de vormgeving aan, niet de registeradressen of gegevensverzameling.

De volgende demo toont het dashboard vóór de themawijziging als referentie voor bestaande functies. Het is geen weergave van het donkere thema.

Modbus TCP-dashboard vóór de themawijziging

Veelgestelde vragen

Catppuccin ontbreekt na downloaden in de profielinstellingen

  1. Controleer of configuration.yaml de regel frontend: themes: !include_dir_merge_named themes met correcte YAML-inspringing bevat.
  2. Controleer /config/themes/catppuccin/catppuccin.yaml; gebruik het werkelijke HACS-pad.
  3. Voer frontend.reload_themes uit. Start zo nodig de container opnieuw en ververs de browser.

Samenvatting

Deze handleiding behandelt HACS-installatie, GitHub-autorisatie, communitythema’s downloaden en het donkere thema selecteren in Home Assistant Container op RK3576. Het apparaat kan dienen als Modbus TCP-bewakingsknooppunt en lokaal AIoT-platform met een uitbreidbare webinterface.

Gebruik voor verdere aanpassingen HACS-kaarten die passen bij je versie, of native integraties voor verlichting, camera’s en andere apparaten. Beoordeel onderhoud en compatibiliteit van externe onderdelen.

Referenties