Carte pour la gestion d'un spa

Home Assistant - Tutoriels & Partages Interface / Lovelace / Thème / Custom Card
1

:bathtub: SPA Card

SPA Card Master est la carte Lovelace la plus avancée pour Home Assistant, conçue spécifiquement pour les propriétaires de spas exigeants. Elle transforme vos données brutes en une interface Glassmorphism digne d’un yacht de luxe.

:framed_picture: Aperçu de l’interface

Spa Preview [Exemple d’intégration avec fond personnalisé et monitoring chimique actif]

:sparkles: Fonctionnalités Exclusives

  • :gem_stone: Effet Frosted Glass : Utilisation de backdrop-filter: blur pour un rendu translucide premium.

  • :police_car_light: Colorimétrie Dynamique : Système d’alerte visuelle intégré. Les chiffres deviennent rouges si le pH, l’ORP ou le Brome dérivent.

  • :straight_ruler: Éditeur « Pixel-Perfect » : 6 onglets de configuration permettant de déplacer et redimensionner chaque bloc (X, Y, Largeur, Hauteur) directement via l’UI.

  • :mobile_phone: Optimisé Tablette (Fully Kiosk) : Réglage de la hauteur en % écran (vh) pour un affichage plein écran sans scroll.

  • :high_voltage: Haute Performance : Code optimisé pour limiter la charge CPU sur les tablettes d’entrée de gamme.

  • :movie_camera: Live Camera Feed : Intégration transparente de votre flux caméra de surveillance.

:test_tube: Intelligence Chimique (Seuils)

La carte analyse vos sensors en temps réel et applique les styles suivants :

Paramètre Plage OK Alerte (Rouge)
pH 7.2 - 7.6 < 7.2 ou > 7.6
ORP > 650 mV < 650 mV
Brome (Br) 3.0 - 5.0 < 3.0 ou > 5.0

:package: Installation

1. Via HACS (Recommandé)

  1. Dans Home Assistant, allez dans HACS → Frontend.

  2. Cliquez sur les 3 points (⋮) → Dépôts personnalisés.

  3. Ajoutez https://github.com/xez7082/spa-card avec la catégorie Lovelace.

  4. Cliquez sur Installer.

2. Installation Manuelle

  1. Téléchargez le fichier spa-card.js.

  2. Placez-le dans votre dossier /config/www/.

  3. Ajoutez la ressource dans Home Assistant :

    • Paramètres → Tableaux de bord → Ressources → Ajouter /local/spa-card.js (Type: JavaScript Module).

:puzzle_piece: Guide de Configuration

L’éditeur visuel est divisé en 6 sections stratégiques :

  1. Général : Image de fond (URL), alignement du titre et hauteur adaptative.

  2. Boutons : Configurez jusqu’à 8 commandes (Pompes, LED, Bulles).

  3. Sondes : Températures (Eau/Air) et chimie (pH, ORP, Br, TAC).

  4. Système : Jusqu’à 14 capteurs techniques (Watts, Ampères, TV, Alexa…).

  5. Caméra : Entité caméra et taille du flux.

  6. Cibles : Affichage optionnel du tableau de référence AquaChek.

:hammer_and_wrench: Dépannage (FAQ)

Q : L’image de fond ne s’affiche pas ? R : Assurez-vous que l’image est dans /config/www/ et utilisez l’URL /local/votre_image.jpg.

Q : La carte dépasse en bas de ma tablette ? R : Allez dans l’onglet Général de l’éditeur et baissez la valeur de Hauteur Carte (% écran).

Q : Les couleurs d’alerte ne fonctionnent pas ? R : Vérifiez que vos entités retournent bien des valeurs numériques et non des textes.

:counterclockwise_arrows_button: Mise à jour

Pour mettre à jour, utilisez simplement HACS. Si vous avez fait une installation manuelle, remplacez le fichier .js et forcez le rafraîchissement du cache navigateur (Ctrl + F5).

:scroll: Licence & Crédits

  • Auteur : xez7082

  • Licence : MIT - Utilisation libre pour usage personnel.

  • Remerciements : Inspiré par les designs futuristes de dashboards domotiques haut de gamme.

:star: Ce projet vous aide ? Donnez-lui une étoile sur GitHub !

1 « J'aime »
2

:bathtub: SPA : Le Monitoring de Précision

:memo: Contexte et Philosophie

La carte SPA Master Ultimate est née d’un besoin précis : centraliser la gestion technique et sanitaire d’un spa au sein d’une interface unique, à la fois esthétique et fonctionnelle.

Contrairement aux cartes standards, celle-ci adopte un design Glassmorphism (effet verre dépoli) qui permet de surveiller son bassin sans masquer l’esthétique du dashboard. Elle est optimisée pour un usage sur tablettes murales (type iPad ou Galaxy Tab sous Fully Kiosk Browser), où la lisibilité à distance est cruciale.

:magnifying_glass_tilted_left: Fonctionnement des Modules

1. Gestion de l’Équilibre Chimique (Sondes)

La carte ne se contente pas d’afficher des chiffres ; elle les interprète.

  • Colorisation Intuitive : L’interface surveille en permanence les entités pH, ORP et Brome. Si le pH dérive (trop acide ou trop basique), la valeur passe instantanément au rouge.

  • Cibles Idéales : Un tableau de rappel (basé sur les standards AquaChek) est intégré pour permettre à l’utilisateur de comparer ses mesures réelles avec les seuils recommandés (ex: TAC entre 80 et 120 ppm).

2. Efficacité Énergétique (Système)

Le bloc « Système » est doté d’une intelligence électrique.

  • Dès qu’un appareil (pompe, réchauffeur, aspirateur) consomme de l’énergie, l’icône associée s’illumine en jaune électrique.

  • Cela permet de vérifier visuellement si le réchauffage est réellement actif, même si l’ordre de marche vient d’un programmateur automatique.

3. Contrôle Tactile (Boutons)

La zone de commande regroupe jusqu’à 8 switchs. Ils sont conçus avec une zone de clic large pour être facilement manipulables avec des mains mouillées ou sur des écrans tactiles.

:hammer_and_wrench: Scénarios d’Utilisation

  • Mode Hivernage Actif : Surveillez la température de l’eau et de l’air sur le même écran pour prévenir le gel, avec une alerte visuelle si la pompe de filtration ne consomme pas assez de Watts (blocage potentiel).

  • Préparation du Bain : Activez les bulles et les jets depuis votre cuisine, vérifiez via la caméra intégrée que la couverture est bien retirée, et contrôlez que la température a atteint la consigne.

  • Entretien Hebdomadaire : Utilisez le tableau des cibles pour ajuster précisément votre TAC et votre pH. La valeur rouge vous indique immédiatement quelle section nécessite un traitement chimique.

:mobile_phone: Optimisation Tablette

La grande force de cette carte réside dans son paramètre « Hauteur Carte (% écran) ». En réglant cette valeur (par exemple à 90%), la carte s’étire pour occuper toute la surface verticale de votre tablette murale, éliminant ainsi les barres de défilement disgracieuses et transformant votre appareil en une véritable console de bord dédiée.

:light_bulb: Conseils de Personnalisation

  • Fond d’écran : Utilisez une photo de votre propre spa avec une légère retouche « floue » pour un rendu encore plus professionnel.

  • Icônes : Utilisez les icônes mdi:pump, mdi:bubble, mdi:lightbulb-on pour une reconnaissance visuelle immédiate.