Bonjour,
je me suis amusé depuis quelques semaines a faire une interface complete avec menu, sous menu et sous sous menu sur le théme resident evil.
je me suis évidement aider d'un ia , car beaucoups beaucoups de ligne de code.
la description que je mets en dessous a aussi été généré par ia, car je ne suis pas doué pour ecrire des longue chose, bla bla bla.
je suis nul dans se domaine.
donc voici se que l'ia ma pondu pour mon hacs.
Resident Evil Card — UMBRELLA CORP. NEST TERMINAL
Carte Lovelace personnalisée pour Home Assistant, à l'esthétique Resident Evil / Umbrella Corporation.
Un tableau de bord unique, riche et animé (HUD, scanlines, effets biohazard), qui regroupe toute la maison :
météo, zones, vidéo-surveillance, serveurs, spa, énergie solaire, santé, plantes, présence et équipements.
Conçue comme un composant web LitElement autonome : un seul fichier .js, un seul type de carte
(custom:resident-evil-card), entièrement configurable via un éditeur visuel intégré.
Points forts
- Interface unifiée : un seul tableau de bord pour toute la domotique, organisé en catégories et sous-menus.
- 100 % natif : météo et widget solaire reconstruits dans la carte (plus de dépendance à des cartes externes, plus d'iframe).
- Éditeur visuel complet : ajout/édition des catégories, sous-menus et widgets sans toucher au YAML.
- Bandeau d'alertes défilant : regroupe automatiquement les problèmes (chimie spa, capteurs, production, appareils…).
- Accessibilité : polices ≥ 12 px, contraste élevé, mode contraste renforcé.
- Esthétique Umbrella Corp. : logo animé, cadres à coins coupés, scanlines CRT, mode biohazard, écran de boot, bips sonores.
Installation
- Copier
resident-evil-card.jsdans/config/www/resident_evil/. - Déclarer la ressource dans Paramètres → Tableaux de bord → ⋮ → Ressources :
- URL :
/local/resident_evil/resident-evil-card.js - Type : JavaScript Module
- URL :
- Copier le logo et les images utilisées dans
/config/www/(ex.Umbrella.png). - Ajouter une carte de type Manuel et coller la configuration (voir plus bas).
Démarrage rapide
type: custom:resident-evil-card
title: UMBRELLA CORP. NEST TERMINAL
card_height: 650
logo: /local/Umbrella.png
status_entity: binary_sensor.cuve_vide
categories:
- name: MÉTÉO
submenus:
- name: MÉTÉO DU COMPLEXE
icon: mdi:weather-partly-cloudy
mode: design
widgets:
- type: weather
widthPct: 100
heightPx: 560
noBorder: true
animated: true
weather_config:
weather: weather.ma_station
Tout le reste se configure ensuite via l'éditeur visuel (icône crayon → Modifier la carte).
Catégories & sous-menus
La carte s'organise en catégories (menu principal), chacune contenant des sous-menus.
Un sous-menu fonctionne en deux modes :
mode: design→ affiche des widgets (météo, spa, solaire, serveur, santé, etc.).- mode liste (par défaut) → affiche une grille de capteurs (
sensors:), avec filtres par type
(lumières, prises, ouvertures, températures, sécurité).
Météo (native)
Widget météo complet reconstruit dans la carte, alimenté en direct par this.hass (sans iframe ni token) :
conditions, lever/coucher, durée du jour, humidité, UV, pluie, lune, ressenti, prévisions 7 jours,
pollen (6 essences avec niveau + concentration), qualité de l'air et vigilance.
Le ciel est animé (soleil, nuages, pluie, neige, brouillard, étoiles) selon la météo et la position du soleil.
Option
animated: falsepour un fond fixe (recommandé sur tablettes peu puissantes).
Zones du complexe
Vue par étage avec filtres par type d'entité (lumières, prises, ouvertures, températures, sécurité),
tuiles animées et alertes de sécurité.
| Étage | Aperçu |
|---|---|
| Étage (1er) |  |
| Rez-de-chaussée |  |
| Sous-sol (laboratoire) |  |
Vidéo-surveillance
Grille de caméras avec chargement par jeton et rafraîchissement automatique.
Serveurs
Widget de supervision (CPU, RAM, disques, uptime, redémarrage) pour Proxmox / Home Assistant OS et Windows Server.
Spa (LayZSpa)
Widget spa multi-vues avec calcul de chauffe, chimie de l'eau, programmation et caméra.
| Vue | Aperçu |
|---|---|
| Général |  |
| Chimie |  |
| Programmation |  |
Vue Chimie : jauges pH / ORP / TDS / sel avec plages min-max réglables et conseils d'ajustement
automatiques quand une valeur sort de sa plage.
Énergie & Solaire (natif)
Widget solaire reconstruit dans la carte, piloté par onglets (active_tab 0 à 3).
| Onglet | Aperçu |
|---|---|
| Solaire |  |
| Prévisions |  |
| Batteries |  |
| Économies |  |
Consommation : widget multi-appareils (50+ prises), avec noms personnalisés et coût estimé.
Toutes les entités du widget solaire sont éditables depuis l'onglet STRUCTURE de l'éditeur
(panneau « 
ENTITÉS DU WIDGET SOLAIRE », groupées par onglet).
Santé & Plantes
| Vue | Aperçu |
|---|---|
| Santé du personnel |  |
| Plantes vertes |  |
| Jardin (cuve) |  |
- Santé : suivi multi-personnes (poids, IMC, sommeil, rythme cardiaque…), basé sur les capteurs Withings.
- Plantes : humidité, éclairement, température, conductivité, batterie.
- Jardin : widget « cuve en verre » (niveau, volume, pluie, température).
Tracker de présence
| Vue | Aperçu |
|---|---|
| Radar de présence |  |
| Carte de présence |  |
Position, distance au domicile, batterie, Wi-Fi, Bluetooth et carte interactive.
Équipements
Widget « Atelier Builder » : machines-outils, électroménagers et robots (aspirateur, tondeuse),
avec compte à rebours de cycle, carte de l'aspirateur et notifications vocales.
| Vue | Aperçu |
|---|---|
| Électroménagers |  |
| Robots |  |
| Robots (détail) |  |
| Atelier |  |
Bandeau d'alertes
Un bandeau défilant apparaît dans l'en-tête dès qu'un problème est détecté.
Détecté automatiquement :
- chimie du spa hors plage (pH / ORP / TDS / sel) ;
- capteurs
biohazard_entitiesactifs.
Règles personnalisées (éditeur → onglet GÉNÉRAL → ALERTES DÉFILANTES, ou bloc alerts: en YAML) :
alerts:
- entity: switch.spa
op: "off"
message: LE SPA EST DISJONCTÉ
level: crit
- entity: binary_sensor.production_solaire_faible_jour
op: "on"
message: PRODUCTION SOLAIRE FAIBLE
level: warn
Conditions disponibles : on, off, unavailable, <, <=, >, >=, =, !=, contains.
Niveaux : warn (orange) ou crit (rouge).
Conseil : pour la production solaire, utiliser un
binary_sensortemplate qui ne s'active que
le jour (élévation du soleil > 5°) afin d'éviter les fausses alertes nocturnes.
Éditeur visuel
L'éditeur intégré comporte trois onglets : GÉNÉRAL, THÈME et STRUCTURE.
| Onglet | Aperçu |
|---|---|
| Général |  |
 |
|
| Thème |  |
| Structure |  |
| Widgets |  |
 |
|
 |
|
 |
|
| Export / Import |  |
- GÉNÉRAL : titre, logo, hauteur de la carte, règles d'alerte.
- THÈME : couleurs, polices, mode contraste renforcé, effets HUD, sons.
- STRUCTURE : gestion des catégories, sous-menus et widgets ; édition des entités ;
export / import d'une catégorie en JSON.
Types de widgets disponibles
| Type | Description |
|---|---|
weather |
Météo native complète (conditions, prévisions, pollen, vigilance, ciel animé). |
solar |
Énergie solaire 4 onglets (production, prévisions, batteries, économies). |
energie |
Suivi de consommation multi-appareils. |
spa_temp |
Spa multi-vues (général, chimie, interrupteurs, programmation, caméra). |
server |
Supervision serveur (CPU, RAM, disques, uptime). |
health |
Suivi santé multi-personnes. |
plant |
Capteurs de plante (humidité, lumière, température, conductivité). |
tank |
Cuve en verre (niveau, volume, pluie). |
tracker / map |
Présence : radar et carte. |
appliance |
Électroménagers, machines-outils, robots. |
progress |
Barre de progression pleine largeur. |
gauge, sparkline, badge, shape |
Briques d'affichage simples. |
Options principales (racine)
| Clé | Rôle |
|---|---|
title |
Titre affiché dans l'en-tête. |
card_height |
Hauteur de la carte en pixels. |
logo |
Chemin du logo (ex. /local/Umbrella.png). |
status_entity |
Entité pilotant le niveau de menace (FINE / CAUTION / DANGER). |
biohazard_entities |
Liste d'entités déclenchant le mode biohazard et des alertes. |
stale_minutes |
Délai (min) au-delà duquel un capteur est marqué « non à jour ». |
theme |
Couleurs, polices, contraste, effets HUD, sons. |
categories |
Arborescence des catégories / sous-menus / widgets. |
alerts |
Règles du bandeau d'alertes. |
Accessibilité
La carte respecte des règles de lisibilité : polices ≥ 12 px, contraste élevé,
et un mode contraste renforcé activable dans l'onglet THÈME (fonds noirs, bordures cyan, polices agrandies).
Dépannage
| Symptôme | Solution |
|---|---|
| L'ancienne version reste affichée | Incrémenter ?v=NN sur la ressource + Ctrl+Maj+R / vider le cache. |
| Prévisions météo vides | Vérifier que l'entité weather.* expose des prévisions daily. |
| L'interface coupe au bout d'un temps | Mettre à jour la carte (corrige l'empilement d'abonnements météo) puis redémarrer Home Assistant. |
| Performances faibles sur tablette | animated: false sur le widget météo ; activer le cache et l'accélération matérielle dans Fully Kiosk. |
| Barre de progression vide | Vérifier min/max ; la virgule décimale (6,5) est acceptée. |
Licence
Projet personnel. Resident Evil et Umbrella Corporation sont des marques de leurs détenteurs respectifs ;
ce thème est un travail de fan, sans affiliation officielle.
merci et faite des commentaires, si jamais sa plait je peu essayer dans faire dans d'autre thèmes.
