Aller au contenu
recharge intelligente

Marque blanche

Vous pouvez livrer votre instance evcc sous votre propre marque : avec votre logo, vos coordonnées et vos couleurs. Cette page s’adresse aux installateurs et aux revendeurs qui fournissent à leurs clients des appareils préconfigurés ou des installations hébergées.

Couleurs et polices

Section intitulée « Couleurs et polices »

Au-delà du logo et du nom, vous pouvez aussi adapter les couleurs et les polices à votre marque. EVCC_CUSTOM_CSS pointe vers un fichier CSS chargé en plus des styles standard. L’interface s’appuie largement sur les propriétés personnalisées CSS pour les couleurs et les polices. La plupart des ajustements visuels consistent à redéfinir ces propriétés plutôt qu’à mettre en forme des éléments individuels. Les propriétés disponibles sont définies dans app.css.

Cet exemple modifie la couleur principale et charge une autre police depuis Google Fonts :

custom.css
@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;
}

Une fois ce fichier chargé, l’interface ressemble à ceci :

Couleur principale et police adaptées
Couleur principale et police adaptées

Quelques points à garder en tête :

  • Il n’y a aucune garantie de compatibilité. Les propriétés et le balisage peuvent changer à chaque version. Les styles personnalisés doivent être vérifiés après chaque mise à jour, idéalement dès les versions nightly.
  • Les styles doivent fonctionner en mode clair comme en mode sombre.
  • Un contraste suffisant est important, p. ex. pour le texte sur la couleur principale.

Thème par défaut

Section intitulée « Thème par défaut »

EVCC_CUSTOM_THEME définit le thème avec lequel l’interface démarre : auto (par défaut), light ou dark. Les utilisateurs peuvent à tout moment changer le thème dans les paramètres de l’interface. Leur choix est enregistré dans le navigateur et l’emporte toujours sur cette valeur par défaut.

Nom de marque et logo

Section intitulée « Nom de marque et logo »
VariableEffet
EVCC_CUSTOM_BRANDNom de marque dans le menu de navigation
EVCC_CUSTOM_LOGO_LIGHTLogo pour le mode clair
EVCC_CUSTOM_LOGO_DARKLogo pour le mode sombre
EVCC_CUSTOM_WEBSITELien vers le site web dans la boîte de dialogue Version
EVCC_CUSTOM_EMAILAdresse e-mail du support
EVCC_CUSTOM_PHONENuméro de téléphone du support

EVCC_CUSTOM_BRAND définit votre nom de marque. Il remplace l’entrée evcc dans le menu de navigation.

Menu de navigation avec un nom de marque personnalisé
Menu de navigation avec un nom de marque personnalisé

EVCC_CUSTOM_LOGO_LIGHT et EVCC_CUSTOM_LOGO_DARK remplacent le logo evcc par le vôtre (svg ou png). Les deux variantes doivent toujours être configurées ensemble. Utilisez si possible svg, qui reste net quelle que soit la taille. Le logo s’affiche avec une hauteur de 64 px et une largeur proportionnelle, si bien qu’un format paysage convient le mieux. Un clic sur le nom de marque dans le menu ouvre la boîte de dialogue Version avec votre logo. EVCC_CUSTOM_WEBSITE, EVCC_CUSTOM_EMAIL et EVCC_CUSTOM_PHONE ajoutent à cette boîte de dialogue votre site web ainsi que l’adresse e-mail et le numéro de téléphone du support.

Boîte de dialogue Version avec logo et coordonnées personnalisés
Boîte de dialogue Version avec logo et coordonnées personnalisés

Signalements de problèmes

Section intitulée « Signalements de problèmes »

Sous Besoin d’aide ? → Signaler un problème, les utilisateurs peuvent signaler des bugs et demander de l’aide. Par défaut, cela ouvre une discussion GitHub ou un ticket GitHub préremplis. Lorsque EVCC_CUSTOM_EMAIL est configuré, la page passe à un envoi par e-mail : les utilisateurs décrivent leur problème et l’envoient à votre adresse de support via leur client de messagerie (mailto:).

Signalement d’un problème par e-mail
Signalement d’un problème par e-mail

Pour des raisons techniques, l’e-mail ne contient pas les détails de débogage (configuration, journaux, état). Si vous en avez besoin, demandez à vos utilisateurs de télécharger le fichier de débogage sur la même page et de le joindre à leur e-mail.

La boîte de dialogue d’aide affiche aussi un bouton e-mail Contactez-nous à la place du lien Discussions GitHub.

Configuration

Section intitulée « Configuration »

Chaque paramètre est une variable d’environnement. Les mêmes paramètres sont aussi disponibles sous forme d’options CLI, p. ex. --custom-brand pour EVCC_CUSTOM_BRAND.

Vous pouvez les définir directement en ligne de commande, dans un fichier de surcharge systemd ou dans votre fichier Docker compose :

Fenêtre de terminal
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

Toute autre configuration peut aussi être fournie via des variables d’environnement : EVCC_ suivi du nom du paramètre evcc.yaml en majuscules, p. ex. EVCC_NETWORK_HOST ou EVCC_DATABASE_DSN.

Image personnalisée

Section intitulée « Image personnalisée »

Pour livrer une image de carte SD complète à votre marque, créez un fork du dépôt evcc-io/images. Le script userpatches/customize-image.sh configure evcc pendant la construction de l’image. Dans sa section EVCC SETUP, il écrit le fichier de surcharge systemd, c’est donc là que vont vos lignes Environment="EVCC_CUSTOM_...".

Licence

Section intitulée « Licence »

Livrer ou vendre le binaire officiel ou l’image Docker officielle à vos clients ne pose aucun problème. Veillez à respecter les conditions de parrainage et la licence. Les instances qui utilisent des intégrations nécessitant un parrainage ont chacune besoin de leur propre jeton de parrain.