Advanced card for Home Assistant that displays detailed information about people with complete visual editor and nine layout modes.

🇬🇧 English | 🇮🇹 Versione Italiana

• ✨ Key Features
• 🎨 Layout Modes
• 🌦️ Weather Animations
• 📦 Installation
• 🔧 Configuration
• 📱 Mobile App Integration
• 🗺️ Smart Travel Mode
• 🎭 Examples
• 🎬 Animated Emoji Avatar
• 🔍 Troubleshooting
• 📝 Changelog

• 🎨 Nine Layout Modes — Classic, Compact, Modern, Neon, Glass, Bioluminescence, Holographic 3D, Weather Station, Matrix Rain
• 🌦️ Rich Weather Animations — 15 fully animated weather states as card background
• 📱 Auto Sensor Detection — Automatically finds battery, activity, connection sensors from the HA Companion App
• 🔋 Battery Monitoring — Phone battery with dynamic icon and color
• ⌚ Watch Battery — Apple Watch and smartwatch support
• 🚶 Activity Tracking — Walking, Running, Automotive, Stationary, Cycling
• 📍 Distance from Home — Waze / Google Routes integration
• ⏱️ Smart Travel Mode — Two-direction sensor system (home↔work)
• 📶 Connection Type — WiFi or mobile network indicator
• 🎨 Customizable States — Different colors and images for each location
• 🖼️ Custom Images — PNG/GIF with transparency support
• 🎯 Complete Visual Editor — User-friendly GUI configuration in 4 languages
• 🌍 Multilanguage — Italian, English, French, German

Full-size card with freely positionable elements. Ideal for large dashboard cards.

type: custom:person-tracker-card
entity: person.davide
layout: classic
aspect_ratio: '1/0.7'
picture_size: 60
battery_position: top-right
activity_position: bottom-left

Horizontal grid layout with fixed structure. Perfect for tracking multiple people side by side.

type: custom:person-tracker-card
entity: person.davide
layout: compact
compact_width: 300

Sleek horizontal card with SVG circular progress rings for battery, distance, and travel time.

type: custom:person-tracker-card
entity: person.davide
layout: modern
modern_picture_size: 45
modern_name_font_size: '16px'
modern_state_font_size: '13px'

Dark cyberpunk theme with glowing neon badges, monospace font, and scanline overlay.

type: custom:person-tracker-card
entity: person.davide
layout: neon

Frosted glassmorphism card with translucent chips, gradient orbs, and animated status dot. Accent color adapts to the person's state.

type: custom:person-tracker-card
entity: person.davide
layout: glass

Deep-ocean theme with animated glowing orbs, rising particles, double pulsing avatar ring, SVG battery fill, and weather footer bar.

type: custom:person-tracker-card
entity: person.davide
layout: bio

Futuristic card with real CSS 3D perspective — the card floats and tilts continuously in 3D space. Features rotating rings + orbital dots around the avatar, iridescent conic-gradient shimmer, animated scan bar, corner tech decorations, and metric chips. Hover flattens to front view.

type: custom:person-tracker-card
entity: person.davide
layout: holo

A dedicated dashboard for personal weather data. Weather animation fills the top section, with a dynamic 4-column gauge grid (battery, watch, wind, humidity, pressure, feels like — priority order). Overflow sensors appear as chips below the grid. Travel and distance chips animate at the bottom.

type: custom:person-tracker-card
entity: person.davide
layout: wxstation
weather_entity: weather.home
show_weather: true

Terminal/hacker theme with animated falling katakana and hexadecimal characters as background. Square avatar with CRT scanlines and animated scan bar. Monospace stats blocks with phosphor green progress bars. Avatar border and scan bar color follow the state color picker.

type: custom:person-tracker-card
entity: person.davide
layout: matrix

Enable animated weather backgrounds by providing a weather entity:

type: custom:person-tracker-card
entity: person.davide
layout: modern          # works on all 9 layouts
weather_entity: weather.home
show_weather: true
show_weather_background: true   # animated scene
show_weather_temperature: true  # temperature label

Note: Gradients are vivid and opaque — weather IS the card background. A deterministic seeded PRNG ensures the same particle positions on every render, preventing LitElement re-render loops.

1. Download person-tracker-card.js and person-tracker-card-editor.js
2. Copy to config/www/person-tracker-card/
3. Add resource:
   • Settings → Dashboards → ⋮ → Resources → + ADD RESOURCE
   • URL: /local/person-tracker-card/person-tracker-card.js
   • Type: JavaScript Module
4. Hard refresh browser (Ctrl+Shift+R)

1. Edit dashboard → Add card
2. Search Person Tracker Card
3. Select a person entity
4. Choose a layout
5. Configure sensors and style — sensors are auto-detected from the Companion App

aspect_ratio: '1/0.7'        # Card aspect ratio
picture_size: 60              # Avatar size in px
battery_position: top-right   # top-left/right, bottom-left/right, *-2 variants
watch_battery_position: top-right-2
activity_position: bottom-left
distance_position: top-left
travel_position: top-left-2
connection_position: bottom-right
name_font_size: '20px'
state_font_size: '14px'
battery_font_size: '13px'
activity_font_size: '13px'

Available positions: top-left, top-right, bottom-left, bottom-right, top-left-2, top-right-2, bottom-left-2, bottom-right-2

compact_width: 300            # Width in pixels (200–500)

modern_picture_size: 45       # Avatar size in px (30–80)
modern_name_font_size: '16px'
modern_state_font_size: '13px'
modern_travel_max_time: 60    # Max travel time for ring % calculation

state:
  - value: home
    name: 🏡 Home
    styles:
      name:
        color: '#50A14F'

  - value: not_home
    name: 🚗 Away
    styles:
      name:
        color: '#e45649'

  - value: work
    name: 🏢 Office
    entity_picture: /local/images/office.png
    styles:
      name:
        color: '#FFD700'

The accent color (avatar border, rings, glow effects) in Neon, Glass, Bio, and Holo layouts automatically follows the state color defined here.

iOS — Home Assistant Companion App:

1. Location: Settings → App → Location → Always
2. Motion & Fitness: Settings → Privacy → Motion & Fitness → ON

Android — Home Assistant Companion App:

1. Location: Always allow
2. Physical Activity: Enable in app settings

The card automatically detects sensors from the HA Companion App by reading person.attributes.device_trackers, finding the first device tracker with a sensor.{prefix}_battery_level, and using that prefix for all other sensors.

Example for person.davide with iPhone (iphonedavide):

sensor.iphonedavide_battery_level   → phone battery
sensor.iphonedavide_activity        → activity
sensor.iphonedavide_connection_type → connection type

The visual editor pre-fills all sensor pickers automatically — no manual configuration needed.

1. Settings → Devices & Services → Add Integration
2. Search Waze Travel Time (or Google Routes)
3. Configure:
   • Origin: zone.home
   • Destination: person.name
   • Name: waze_name

Configure two travel sensors for automatic direction switching:

type: custom:person-tracker-card
entity: person.davide
layout: modern

# Direction 1: home → work
distance_sensor: sensor.waze_davide_to_work
travel_sensor: sensor.waze_davide_to_work
show_distance: true
show_travel_time: true

# Direction 2: work → home
distance_sensor_2: sensor.waze_davide_to_home
travel_sensor_2: sensor.waze_davide_to_home
show_distance_2: true
show_travel_time_2: true

# Zone name for direction 1
zone_2: work

Logic:

• Person at home → show direction 2 (home→work), hide direction 1
• Person at zone_2 (work) → show direction 1 (work→home), hide direction 2
• Person elsewhere → both directions visible (with alternating animation)

Supported in all 9 layouts.

type: vertical-stack
cards:
  - type: custom:person-tracker-card
    entity: person.davide
    layout: modern
    weather_entity: weather.home
    show_weather: true
    modern_picture_size: 50
    state:
      - value: home
        name: 🏡 Home
        styles:
          name:
            color: '#50A14F'
      - value: not_home
        name: 🚗 Away
        styles:
          name:
            color: '#e45649'

  - type: custom:person-tracker-card
    entity: person.nunzia
    layout: modern
    weather_entity: weather.home
    show_weather: true
    modern_picture_size: 50

type: grid
columns: 2
cards:
  - type: custom:person-tracker-card
    entity: person.davide
    layout: compact
    compact_width: 280

  - type: custom:person-tracker-card
    entity: person.nunzia
    layout: compact
    compact_width: 280

  - type: custom:person-tracker-card
    entity: person.child
    layout: compact
    compact_width: 280

  - type: custom:person-tracker-card
    entity: person.grandpa
    layout: compact
    compact_width: 280

type: custom:person-tracker-card
entity: person.davide
layout: holo
weather_entity: weather.home
show_weather: true
state:
  - value: home
    name: 🏡 Home
    styles:
      name:
        color: '#00ff88'
  - value: not_home
    name: 🚀 Away
    styles:
      name:
        color: '#ff6b35'

type: custom:person-tracker-card
entity: person.davide
layout: modern
show_watch_battery: false
show_travel_time: false
show_distance: false
show_activity: false
show_connection: false

You can use a real animated GIF of your Memoji or AR Emoji as the person's avatar — it will loop automatically inside the card, giving it a very personal and lively look.

1. Open iMessage on your iPhone and start a new message
2. Tap the Memoji button (the smiley face icon in the keyboard bar)
3. Select your Memoji → tap Record (hold the big button to record a short animation — wave, nod, thumbs up, etc.)
4. Send it to yourself or AirDrop the sticker pack to your Mac
5. On your Mac, open the received file and export the frame/clip as a video or image sequence
6. Go to remove.bg and upload the video/frame to remove the background → download as PNG
7. Convert PNG sequence or clip to GIF using any free tool (e.g. ezgif.com — upload frames → make GIF)
8. Copy the GIF to your Home Assistant /config/www/ folder (e.g. /config/www/marco-home.gif)

Tip: Create one GIF per state — wave for home, thumbs up for arriving, neutral/idle for away.

The process is identical:

1. Samsung AR Emoji or Snapchat Bitmoji → record a short animation
2. Export the video clip to PC
3. Remove background on remove.bg
4. Convert to GIF on ezgif.com
5. Upload to /config/www/

entity_picture: /local/marco-home.gif

Or set it dynamically using a template sensor that swaps GIF based on state:

# configuration.yaml
template:
  - sensor:
      - name: marco_avatar
        state: >
          {% if is_state('person.marco', 'home') %}
            /local/marco-home.gif
          {% elif states('sensor.marco_distance') | float(0) < 2 %}
            /local/marco-arriving.gif
          {% else %}
            /local/marco-away.gif
          {% endif %}

Then in the card config:

entity_picture: "{{ states('sensor.marco_avatar') }}"

• Check browser console (F12) for errors
• Verify resource is loaded: Settings → Dashboards → ⋮ → Resources
• Hard refresh: Ctrl+Shift+R

• Check Companion App is installed and has permissions
• Verify sensor names in Developer Tools → States
• Manually specify sensors in configuration

• The editor is loaded with a version-specific cache-busting parameter (?v=1.3.9)
• Hard refresh the browser after any update

• Place files in config/www/
• Use correct path: /local/folder/file.png
• Restart Home Assistant if needed

• Ensure weather_entity is set and show_weather: true
• Check that show_weather_background: true
• Verify the weather entity is in Developer Tools → States

• Values are case-sensitive: classic, compact, modern, neon, glass, bio, holo
• Clear cache and reload

• ✨ pair_travel_animation — Toggle to disable the alternating distance/travel animation; when off, both chips are shown separately
• ✨ transparent_background — Glass and Bio layouts: remove the dark background to blend into any dashboard
• 🐛 Fixed HACS install button type (dashboard → plugin)

• 🎨 weather_text_color — New option to override the color of weather text (temperature, icon, condition label) across all 7 layouts
• 🎨 last_changed_color — New option to override the color of the last-updated timestamp (classic, neon, holo)
• 🖊️ Both colors exposed in the visual editor's Weather section (color swatch + hex input, 4 languages)

• ✨ New Holographic 3D Layout (holo) — Futuristic card with CSS 3D perspective, rotating rings + orbital dots, iridescent shimmer overlay, animated scan bar, corner tech decorations, and metric chips. Accent color adapts to state. Hover flattens to front view.
• 🐛 Fixed holo layout picker not applying on click
• 🐛 Fixed holo metric chips empty space (height alignment)
• 🐛 Fixed holo pair animation overlap on travel/distance chips
• 🐛 Fixed holo weather background z-index (now visible above shimmer)
• 🐛 Fixed holo distance reading wrong property
• 🐛 Fixed editor cache with HACS — editor now inherits hacstag from import.meta.url
• 🌤️ Neon layout now shows weather icon + temperature + translated condition label

• 🌊 New Bioluminescence Layout (bio) — Deep ocean theme with glowing orbs, rising particles, double pulsing ring, SVG battery fill, weather footer
• 🌤️ Weather background/temperature split controls — show animated scene and temperature independently
• 🌡️ Weather condition label in compact and modern layouts (icon + temp + translated state)
• 🐛 Fixed state color picker not updating avatar border in classic/compact
• 🐛 Fixed bio layout accent color not applied to avatar border
• 🐛 Fixed dir2 pair animation desync
• 🐛 Fixed weather text unreadable on light/bright backgrounds
• 🐛 Fixed weather-active contrast class now applied to classic and modern

• 🐛 Fixed editor not updating after HACS update (dynamic import now includes ?v= parameter)
• 🔧 CARD_VERSION promoted to top-level constant
• 🏷️ Version badge added to visual editor header

• 🔋 Glass layout: battery icon redesigned as SVG fill with percentage text; charging pulsing glow
• 📶 Glass layout: connection type moved to header pill next to battery
• 🌦️ Glass layout: weather bar at bottom with icon + temp + translated condition

• ✨ New Glassmorphism Layout (glass) — Dark frosted-glass card with translucent chips, gradient orbs, animated status dot, per-state accent color
• 🔧 distance_unit config option — override displayed unit (km, mi)

• 🐛 Fixed distance sensor reading state instead of attributes.distance (Waze/Google Routes)
• 🐛 Fixed modern layout pair-b ring overflow during alternating animation

• 🏢 Dual Travel Direction — Smart home/work two-sensor system with automatic direction switching
• 🌦️ Rich Weather Animations — 15 fully animated weather states (sunny, clear-night, cloudy, rainy, snowy, lightning, hail, fog, windy, and more)
• 📍 Weather temperature positioning per layout
• Seeded PRNG (_rng(seed)) for deterministic particle rendering

• ✨ New Neon Layout (neon) — Cyberpunk dark theme with glowing neon badges and monospace font

• ✨ New Modern Layout with circular SVG progress rings
• 🟢 State-colored picture border
• 🎯 Icon badges for activity and connection
• 📐 Auto-expanding responsive design

• 📏 Dynamic distance unit from entity attributes
• 🔤 State and last-changed font customization
• 🤖 Fixed Android WiFi detection

• 🌍 Complete multilanguage support (EN, IT, FR, DE)

• ✨ New compact layout mode
• ⌚ Watch battery support

• 🎉 Initial release — visual editor, Companion App support, custom states, Waze integration

Contributions welcome!

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit changes (git commit -m 'Add AmazingFeature')
4. Push to branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

MIT License — see LICENSE

If you find this card useful:

• ⭐ Star the repository
• 🐛 Report bugs via GitHub Issues
• 💡 Suggest features
• 🤝 Contribute code

• Home Assistant Community
• HACS Team
• All contributors

Made with ❤️ for the Home Assistant Community

🇬🇧 English | 🇮🇹 Versione Italiana

• 🎨 Sette Modalità di Layout — Classic, Compact, Modern, Neon, Glass, Bioluminescence, Holographic 3D
• 🌦️ Animazioni Meteo Ricche — 15 stati meteo completamente animati come sfondo della card
• 📱 Rilevamento Automatico Sensori — Trova automaticamente batteria, attività, connessione dall'app Companion
• 🔋 Monitoraggio Batteria — Batteria telefono con icona e colore dinamici
• ⌚ Batteria Smartwatch — Supporto Apple Watch e altri smartwatch
• 🚶 Tracciamento Attività — Walking, Running, Automotive, Stationary, Cycling
• 📍 Distanza da Casa — Integrazione Waze / Google Routes
• ⏱️ Modalità Viaggio Intelligente — Sistema a due sensori bidirezionale (casa↔lavoro)
• 📶 Tipo Connessione — Indicatore WiFi o rete mobile
• 🎨 Stati Personalizzabili — Colori e immagini diverse per ogni posizione
• 🖼️ Immagini Personalizzate — Supporto PNG/GIF con trasparenza
• 🎯 Editor Visuale Completo — Configurazione tramite GUI in 4 lingue
• 🌍 Multilingua — Italiano, Inglese, Francese, Tedesco

Card a dimensione intera con elementi posizionabili liberamente.

type: custom:person-tracker-card
entity: person.davide
layout: classic
aspect_ratio: '1/0.7'
picture_size: 60
battery_position: top-right
activity_position: bottom-left

Layout a griglia orizzontale. Ideale per più persone affiancate.

type: custom:person-tracker-card
entity: person.davide
layout: compact
compact_width: 300

Card orizzontale elegante con anelli SVG circolari di progresso per batteria, distanza e tempo di viaggio.

type: custom:person-tracker-card
entity: person.davide
layout: modern
modern_picture_size: 45
modern_name_font_size: '16px'
modern_state_font_size: '13px'

Tema cyberpunk scuro con badge neon luminosi e font monospace.

type: custom:person-tracker-card
entity: person.davide
layout: neon

Card glassmorphism con chip traslucidi, orb a gradiente e punto di stato animato. Il colore accentato si adatta allo stato della persona.

type: custom:person-tracker-card
entity: person.davide
layout: glass

Tema oceano profondo con orb luminosi animati, particelle ascendenti, doppio anello pulsante intorno all'avatar, riempimento batteria SVG e barra meteo in basso.

type: custom:person-tracker-card
entity: person.davide
layout: bio

Card futuristica con prospettiva CSS 3D reale — la card fluttua e si inclina nello spazio 3D con animazione continua. Anelli rotanti + punti orbitali intorno all'avatar, shimmer iridescente, barra di scansione animata, decorazioni tech agli angoli e chip metrici. Al passaggio del mouse si appiattisce.

type: custom:person-tracker-card
entity: person.davide
layout: holo

Abilita lo sfondo meteo animato fornendo un'entità weather:

type: custom:person-tracker-card
entity: person.davide
layout: modern
weather_entity: weather.home
show_weather: true
show_weather_background: true
show_weather_temperature: true

Funziona su tutti e 7 i layout. Le opzioni show_weather_background e show_weather_temperature sono indipendenti — puoi mostrare solo la scena animata, solo la temperatura, o entrambe.

1. Scarica person-tracker-card.js e person-tracker-card-editor.js
2. Copia in config/www/person-tracker-card/
3. Aggiungi risorsa:
   • Impostazioni → Dashboard → ⋮ → Risorse → + AGGIUNGI RISORSA
   • URL: /local/person-tracker-card/person-tracker-card.js
   • Tipo: Modulo JavaScript
4. Ricarica forzata browser (Ctrl+Shift+R)

1. Modifica dashboard → Aggiungi card
2. Cerca Person Tracker Card
3. Seleziona entità person
4. Scegli il layout
5. Configura sensori e stile — i sensori vengono rilevati automaticamente dall'app Companion

type: custom:person-tracker-card
entity: person.davide
layout: holo   # classic / compact / modern / neon / glass / bio / holo

type: custom:person-tracker-card
entity: person.davide
layout: modern

# Meteo
weather_entity: weather.home
show_weather: true
show_weather_background: true
show_weather_temperature: true

# Visualizzazione
show_entity_picture: true
show_name: true
show_battery: true
show_watch_battery: true
show_activity: true
show_connection: true
show_distance: true
show_travel_time: true

# Sensori personalizzati (opzionale — rilevati automaticamente)
battery_sensor: sensor.iphonedavide_battery_level
watch_battery_sensor: sensor.watch_davide_battery_level
activity_sensor: sensor.iphonedavide_activity
connection_sensor: sensor.iphonedavide_connection_type
distance_sensor: sensor.waze_davide

# Stile
card_background: 'rgba(255,255,255,0.05)'
card_border_radius: '15px'

# Stati personalizzati
state:
  - value: home
    name: 🏡 Casa
    styles:
      name:
        color: '#50A14F'
  - value: not_home
    name: 🚗 Fuori
    styles:
      name:
        color: '#e45649'
  - value: work
    name: 🏢 Lavoro
    styles:
      name:
        color: '#ffa229'

iOS — App Home Assistant Companion:

1. Posizione: Impostazioni → App → Posizione → Sempre
2. Movimento e Fitness: Impostazioni → Privacy → Movimento e Fitness → ON

Android — App Home Assistant Companion:

1. Posizione: Consenti sempre
2. Attività Fisica: Abilita nelle impostazioni app

La card rileva automaticamente i sensori leggendo person.attributes.device_trackers, trovando il primo tracker con sensor.{prefisso}_battery_level e usando quel prefisso per tutti gli altri sensori.

Esempio per person.davide con iPhone (iphonedavide):

sensor.iphonedavide_battery_level   → batteria telefono
sensor.iphonedavide_activity        → attività
sensor.iphonedavide_connection_type → tipo connessione

L'editor visuale pre-compila tutti i picker automaticamente.

1. Impostazioni → Dispositivi e Servizi → Aggiungi Integrazione
2. Cerca Waze Travel Time (o Google Routes)
3. Configura:
   • Origine: zone.home
   • Destinazione: person.nome
   • Nome: waze_nome

Configura due sensori per il cambio automatico di direzione:

type: custom:person-tracker-card
entity: person.davide

# Direzione 1: casa → lavoro
distance_sensor: sensor.waze_davide_al_lavoro
travel_sensor: sensor.waze_davide_al_lavoro
show_distance: true
show_travel_time: true

# Direzione 2: lavoro → casa
distance_sensor_2: sensor.waze_davide_a_casa
travel_sensor_2: sensor.waze_davide_a_casa
show_distance_2: true
show_travel_time_2: true

zone_2: work

Logica:

• Persona a casa → mostra direzione 2 (casa→lavoro), nasconde direzione 1
• Persona a zone_2 (lavoro) → mostra direzione 1 (lavoro→casa), nasconde direzione 2
• Persona altrove → entrambe le direzioni visibili con animazione alternata

type: vertical-stack
cards:
  - type: custom:person-tracker-card
    entity: person.davide
    layout: modern
    weather_entity: weather.home
    show_weather: true
    modern_picture_size: 50
    state:
      - value: home
        name: 🏡 Casa
        styles:
          name:
            color: '#50A14F'
      - value: not_home
        name: 🚗 Fuori
        styles:
          name:
            color: '#e45649'

  - type: custom:person-tracker-card
    entity: person.nunzia
    layout: modern
    weather_entity: weather.home
    show_weather: true
    modern_picture_size: 50

type: grid
columns: 2
cards:
  - type: custom:person-tracker-card
    entity: person.davide
    layout: compact
    compact_width: 280

  - type: custom:person-tracker-card
    entity: person.nunzia
    layout: compact
    compact_width: 280

  - type: custom:person-tracker-card
    entity: person.bambino
    layout: compact
    compact_width: 280

  - type: custom:person-tracker-card
    entity: person.nonno
    layout: compact
    compact_width: 280

type: custom:person-tracker-card
entity: person.davide
layout: modern
show_watch_battery: false
show_travel_time: false
show_distance: false
show_activity: false
show_connection: false

Puoi usare una GIF animata del tuo Memoji o AR Emoji come avatar della persona — si ripeterà automaticamente nella card, rendendola viva e personalissima.

1. Apri iMessage sul tuo iPhone e inizia un nuovo messaggio
2. Tocca il pulsante Memoji (faccina nella barra della tastiera)
3. Seleziona il tuo Memoji → tocca Registra (tieni premuto il tasto grande per registrare una breve animazione — saluto, annuire, pollice su, ecc.)
4. Invialo a te stesso oppure usa AirDrop per mandarlo al Mac
5. Sul Mac, apri il file ricevuto ed esporta il frame/clip come video o sequenza di immagini
6. Vai su remove.bg, carica il video/frame per rimuovere lo sfondo → scarica come PNG
7. Converti la sequenza PNG o il clip in GIF con un tool gratuito (es. ezgif.com — carica i frame → crea GIF)
8. Copia la GIF nella cartella /config/www/ di Home Assistant (es. /config/www/marco-casa.gif)

Consiglio: Crea una GIF per ogni stato — saluto per home, pollice su per l'arrivo, neutro/idle per away.

Il procedimento è identico:

1. Samsung AR Emoji o Snapchat Bitmoji → registra una breve animazione
2. Esporta il clip video sul PC
3. Rimuovi lo sfondo su remove.bg
4. Converti in GIF su ezgif.com
5. Carica in /config/www/

entity_picture: /local/marco-casa.gif

Oppure in modo dinamico con un template sensor che cambia GIF in base allo stato:

# configuration.yaml
template:
  - sensor:
      - name: marco_avatar
        state: >
          {% if is_state('person.marco', 'home') %}
            /local/marco-casa.gif
          {% elif states('sensor.marco_distanza') | float(0) < 2 %}
            /local/marco-arrivo.gif
          {% else %}
            /local/marco-fuori.gif
          {% endif %}

Poi nella config della card:

entity_picture: "{{ states('sensor.marco_avatar') }}"

• Controlla console browser (F12) per errori
• Verifica risorsa caricata in Impostazioni → Dashboard → Risorse
• Ricarica forzata: Ctrl+Shift+R

• Controlla che l'app Companion sia installata e abbia i permessi
• Verifica nomi sensori in Strumenti Sviluppatore → Stati
• Specifica manualmente i sensori nella configurazione

• Il file editor viene caricato con parametro cache-busting (?v=1.3.9)
• Esegui ricarica forzata del browser dopo ogni aggiornamento

• Inserisci file in config/www/
• Usa percorso corretto: /local/cartella/file.png
• Riavvia Home Assistant se necessario

• Verifica che weather_entity sia impostata e show_weather: true
• Controlla show_weather_background: true
• Verifica l'entità meteo in Strumenti Sviluppatore → Stati

• I valori sono case-sensitive: classic, compact, modern, neon, glass, bio, holo
• Svuota cache e ricarica

• ✨ pair_travel_animation — Toggle per disabilitare l'animazione alternata distanza/tempo; quando disattivato mostra entrambi i chip separati
• ✨ transparent_background — Layout Glass e Bio: rimuove lo sfondo scuro per integrarsi con qualsiasi dashboard
• 🐛 Fix pulsante HACS: tipo corretto da plugin a dashboard

• 🎨 weather_text_color — Nuova opzione per sovrascrivere il colore del testo meteo (temperatura, icona, condizione) su tutti e 7 i layout
• 🎨 last_changed_color — Nuova opzione per sovrascrivere il colore del timestamp di aggiornamento (classic, neon, holo)
• 🖊️ Entrambi i colori esposti nell'editor visuale nella sezione Meteo (swatch + input hex, 4 lingue)

• ✨ Nuovo Layout Holographic 3D (holo) — Card futuristica con prospettiva CSS 3D, anelli rotanti, shimmer iridescente, barra di scansione e chip metrici
• 🐛 Vari fix per il layout holo (picker, chip, animazioni, meteo, distanza)
• 🐛 Fix cache editor con HACS
• 🌤️ Neon: ora mostra icona meteo + temperatura + etichetta condizione tradotta

• 🌊 Nuovo Layout Bioluminescence (bio) — Tema oceano profondo con orb luminosi, particelle, anello pulsante, batteria SVG, barra meteo
• 🌤️ Controlli separati per sfondo meteo e temperatura
• 🌡️ Etichetta condizione meteo in compact e modern
• 🐛 Vari fix (colore stato su bordo avatar, desync animazione dir2, contrasto testo meteo)

• 🐛 Fix editor non aggiornato dopo HACS update
• 🏷️ Badge versione nell'editor visuale

• 🔋 Glass: icona batteria SVG con percentuale; barra meteo in basso

• ✨ Nuovo Layout Glassmorphism (glass) — Card vetro satinato con chip traslucidi e accento per stato

• 🐛 Fix lettura distanza da attributes.distance (Waze/Google Routes)

• 🏢 Modalità Viaggio Doppia Direzione — Sistema automatico casa↔lavoro
• 🌦️ Animazioni Meteo Ricche — 15 stati animati (sole, notte, pioggia, neve, fulmine, grandine, nebbia, vento…)

• ✨ Nuovo Layout Neon (neon) — Tema cyberpunk scuro con badge neon e font monospace

• ✨ Nuovo Layout Modern con anelli SVG circolari di progresso

• Multilingua (EN, IT, FR, DE), layout compact, supporto smartwatch, rilevamento WiFi Android

• 🎉 Prima release — editor visuale, supporto Companion App, stati personalizzabili, integrazione Waze

Contributi benvenuti!

1. Fai Fork del repository
2. Crea un feature branch (git checkout -b feature/FunzionalitàFica)
3. Committa (git commit -m 'Aggiungi FunzionalitàFica')
4. Push (git push origin feature/FunzionalitàFica)
5. Apri una Pull Request

Licenza MIT — vedi file LICENSE

Se trovi utile questa card:

• ⭐ Stella il repository
• 🐛 Segnala bug tramite GitHub Issues
• 💡 Suggerisci funzionalità
• 🤝 Contribuisci al codice

• Home Assistant Community
• HACS Team
• Tutti i contributori

Realizzato con ❤️ per la Community Home Assistant