White label

Svou instanci evcc můžete dodávat pod vlastní značkou, se svým logem, kontaktními údaji a barevným schématem. Tato stránka je určena instalatérům a dodavatelům, kteří svým zákazníkům dodávají předkonfigurovaná zařízení nebo hostované instalace.

Barvy a písma

Kromě loga a názvu můžete také přizpůsobit barvy a písma své značce. EVCC_CUSTOM_CSS odkazuje na soubor CSS, který se načte navíc ke standardním stylům. Rozhraní ve velké míře používá pro barvy a písma proměnné CSS (custom properties). Většinu vizuálních úprav provedete přepsáním těchto proměnných místo stylování jednotlivých prvků. Dostupné proměnné jsou definovány v app.css.

Tento příklad mění primární barvu a načítá jiné písmo z Google Fonts:

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap");

:root {
  --evcc-dark-green: #22d3ee;
  --evcc-darker-green: #0891b2;
  --bs-body-font-family: "Space Grotesk", sans-serif;
}

S tímto souborem vypadá rozhraní takto:

Na co je dobré myslet:

Neexistují žádné záruky kompatibility. Proměnné i markup se mohou změnit s každým vydáním. Vlastní styly je vhodné ověřit po každé aktualizaci, ideálně už na nightly verzích.
Styly by měly fungovat ve světlém i tmavém režimu.
Záleží na dostatečném kontrastu, např. u textu na primární barvě.

Výchozí design

EVCC_CUSTOM_THEME nastavuje design, se kterým se rozhraní otevře: auto (výchozí), light nebo dark. Uživatelé mohou design i nadále změnit v nastavení rozhraní. Jejich volba se uloží v prohlížeči a vždy má přednost před tímto výchozím nastavením.

Název značky a logo

Proměnná	Účinek
`EVCC_CUSTOM_BRAND`	Název značky v navigačním menu
`EVCC_CUSTOM_LOGO_LIGHT`	Logo pro světlý režim
`EVCC_CUSTOM_LOGO_DARK`	Logo pro tmavý režim
`EVCC_CUSTOM_WEBSITE`	Odkaz na web v dialogovém okně Verze
`EVCC_CUSTOM_EMAIL`	E-mailová adresa podpory
`EVCC_CUSTOM_PHONE`	Telefonní číslo podpory

EVCC_CUSTOM_BRAND nastavuje název vaší značky. Nahrazuje položku evcc v navigačním menu.

EVCC_CUSTOM_LOGO_LIGHT a EVCC_CUSTOM_LOGO_DARK nahrazují logo evcc vaším vlastním (svg nebo png). Obě varianty je nutné vždy nastavit společně. Pokud je to možné, použijte svg, protože zůstane ostré v jakékoli velikosti. Logo se zobrazuje ve výšce 64 px a šířka se přizpůsobí, proto se nejlépe hodí formát na šířku. Kliknutím na název značky v menu se otevře dialogové okno Verze s vaším logem. EVCC_CUSTOM_WEBSITE, EVCC_CUSTOM_EMAIL a EVCC_CUSTOM_PHONE do tohoto dialogového okna přidají váš web, e-mailovou adresu podpory a telefonní číslo.

Dialogové okno Verze s vlastním logem a kontaktními údaji

Hlášení problémů

V Potřebujete poradit? → Nahlásit problém mohou uživatelé hlásit chyby a žádat o pomoc. Ve výchozím stavu se otevře předvyplněná diskuse nebo issue na GitHubu. Pokud je nastaveno EVCC_CUSTOM_EMAIL, přepne se stránka místo toho na e-mailový postup: uživatelé popíší svůj problém a odešlou ho na vaši adresu podpory přes svého e-mailového klienta (mailto:).

Z technických důvodů e-mail neobsahuje ladicí údaje (konfiguraci, protokoly, stav). Pokud je potřebujete, požádejte uživatele, aby si na stejné stránce stáhli ladicí soubor a přiložili ho k e-mailu.

Dialogové okno nápovědy navíc místo odkazu GitHub diskuse zobrazí e-mailové tlačítko Kontaktujte nás.

Konfigurace

Každé nastavení je proměnná prostředí. Stejná nastavení jsou k dispozici také jako parametry CLI, např. --custom-brand pro EVCC_CUSTOM_BRAND.

Můžete je nastavit přímo na příkazovém řádku, v souboru override pro systemd nebo v souboru Docker compose:

EVCC_CUSTOM_BRAND="G1GA HEMS" \
EVCC_CUSTOM_LOGO_LIGHT=logo-light.svg \
EVCC_CUSTOM_LOGO_DARK=logo-dark.svg \
EVCC_CUSTOM_WEBSITE=https://example.com/hems \
EVCC_CUSTOM_EMAIL=support@example.com \
EVCC_CUSTOM_PHONE="+49 123 456789" \
EVCC_CUSTOM_CSS=custom.css \
evcc

Soubor override vytvořte příkazem sudo systemctl edit evcc, viz Linux → Proměnné prostředí a parametry CLI.

[Service]
Environment="EVCC_CUSTOM_BRAND=G1GA HEMS"
Environment="EVCC_CUSTOM_LOGO_LIGHT=/etc/branding/logo-light.svg"
Environment="EVCC_CUSTOM_LOGO_DARK=/etc/branding/logo-dark.svg"
Environment="EVCC_CUSTOM_EMAIL=support@example.com"
Environment="EVCC_CUSTOM_CSS=/etc/branding/custom.css"

Nastavte proměnné v souboru compose a připojte soubory loga a CSS do kontejneru.

services:
  evcc:
    image: evcc/evcc:latest
    environment:
      - EVCC_CUSTOM_BRAND=G1GA HEMS
      - EVCC_CUSTOM_LOGO_LIGHT=/etc/branding/logo-light.svg
      - EVCC_CUSTOM_LOGO_DARK=/etc/branding/logo-dark.svg
      - EVCC_CUSTOM_EMAIL=support@example.com
      - EVCC_CUSTOM_CSS=/etc/branding/custom.css
    volumes:
      - /home/user/branding:/etc/branding

Veškerou další konfiguraci lze rovněž předat přes proměnné prostředí: EVCC_ následované názvem parametru z evcc.yaml velkými písmeny, např. EVCC_NETWORK_HOST nebo EVCC_DATABASE_DSN.

Vlastní obraz

Pokud chcete dodávat kompletní obraz SD karty s vaší značkou, vytvořte fork repozitáře evcc-io/images. Skript userpatches/customize-image.sh nastavuje evcc během sestavení obrazu. V jeho sekci EVCC SETUP se zapisuje soubor override pro systemd, takže právě sem patří vaše řádky Environment="EVCC_CUSTOM_...".

Licence

Dodávat nebo prodávat oficiální binárku či obraz Dockeru svým zákazníkům je naprosto v pořádku. Dbejte přitom na dodržení podmínek sponzorství a licence. Každá instance, která používá integrace vyžadující sponzorství, potřebuje vlastní sponzorský token.