Bug d'affichage sur une carte floorplan (apparition d'un halo autour des images au clique)

Mon problème

Bonjour,
J’ai entrepris de mettre en plan avec des zones cliquable dans un dashboard, mais je me retrouve avec un bug d’affichage.
Lorsque je clique sur une zone de l’image ou il n’y a pas d’action j’ai un halo qui apparait autour de l’image.
Ca ressemble au Halo quand on clique sur un icon pour voir qu’il est sélectionné.
Je pense que j’ai du trop bidouiller et modifier le background sur le CSS par défaut mais je ne retrouve pas mon erreur.
Voila les 2 images avec et sans halo pour que vous vous rendiez compte :


Le tuto que j’ai suivi c’est celui la : Creating an Interactive 3D Floorplan in Home Assistant - Automate The Things

donc le code de mon dashboard ressemble à ça :

type: picture-elements
image: /local/plans/RDC-all-lights.png
elements:
  - type: image
    entity: light.sejour_cuisine
    tap_action: none
    hold_action: none
    state_image:
      'on': /local/plans/transparent_square.png
      'off': /local/plans/RDC-light-Sejour-off.png
      unavailable: /local/plans/RDC-light-Sejour-off.png
    style:
      top: 50%
      left: 50%
      width: 100%
  - type: state-icon
    icon: mdi:lightbulb
    entity: light.sejour_cuisine
    tap_action:
      action: toggle
    style:
      top: 54%
      left: 38%

Ma configuration

System Information

version core-2022.8.4
installation_type Home Assistant Container
dev false
hassio false
docker true
user root
virtualenv false
python_version 3.10.5
os_name Linux
os_version 5.10.0-16-amd64
arch x86_64
timezone Europe/Paris
config_dir /config
Home Assistant Community Store
GitHub API ok
GitHub Content ok
GitHub Web ok
GitHub API Calls Remaining 4976
Installed Version 1.26.2
Stage running
Available Repositories 1096
Downloaded Repositories 15
Home Assistant Cloud
logged_in true
subscription_expiration 16 septembre 2022 à 02:00
relayer_connected true
remote_enabled true
remote_connected true
alexa_enabled false
google_enabled true
remote_server eu-central-1-3.ui.nabu.casa
can_reach_cert_server ok
can_reach_cloud_auth ok
can_reach_cloud ok
Dashboards
dashboards 6
resources 0
views 8
mode yaml
Recorder
oldest_recorder_run 14 août 2022 à 22:49
current_recorder_run 22 août 2022 à 15:01
estimated_db_size 67.65 MiB
database_engine sqlite
database_version 3.38.5
Spotify
api_endpoint_reachable ok

Salut,

Si c’est une image sur laquelle tu n’a pas d’action pense à bien mettre les actions à none quand même

tap_action:
  action: none
hold_action:
  action: none
double_tap_action:
  action: none

ça permet de rendre l’image non cliquable.

D’autre part, la ‹ selection › est directement lié à la taille de l’image utilisé (sans tenir compte de la transparence donc là vue la dimension, tu as probablement 2 images 800x600 que tu superposes : le fond d’un coté et la zone éclairée de l’autre.

Je suis dans les même recherches :j’ai quasi fini ma maquette mais c’est un genre différent :

5 « J'aime »

Trop chouettes vos plans a tous les deux… Bon je kiffe pas mal la version Lego de @Pulpy-Luke , c’est fait avec un soft ?

@dgaussin à la base c’est

  • l’appli officielle lego pour avoir le modélisation et le rendu photo
  • puis après gimp pour faire les retouches, les découpages, il y a pas mal d’aller/retour pour la gestion des élements et des superpositions
  • et après il faut se farcir la carte yaml, la position, les pourcentages, les templates

C’est super long

J’avais bien pensé à faire construire en Légo ou en Kapla, mais l’architecte n’était pas d’accord

Bon, désolé de perturber ce post.

Mcp

1 « J'aime »

Ah oui nickel ca marche j’imagine que c’est parce que je n’avais pas mis le double_tap_action a none.

Par contre autre petite question lié. J’ai ce halo autour des icones lorsque je clique dessus. J’ai essayer avec un background color = rgba (0,0,0,0) mais ca reste

Une idée pour ce problème la ?

PS: Je suis d’accord ton plan en Lego il super top

Quand l’élément est cliquable, je sais pas trop comment supprimer ce halo.
Ce qui est certain c’est que c’est pas un background de tout façon.
Peut-être que @Clemalex ou @WarC0zes est au courant

Merci pour le plan. Je ne suis pas encore totalement satisfait du truc, j’ai plein de petits détails à corriger (le contour blanc/jaune sont laids, je voudrais un truc genre pointillé fin, les popup ont des titres à formater (majuscules/espaces à gérer) avant une généralisation sur les autres étages de la maison

J’ai regarder pour le halo de l’icone, fait quelques essais mais pas de solution de mon coté.

@Pulpy-Luke voici des exemples CSS pour picture-elements si ca peu aider 🔹 Card-mod - Add css styles to any lovelace card - #1867 by Ildar_Gabdullin - Lovelace & Frontend - Home Assistant Community

1 « J'aime »

Merci pour le lien.
Malheureusement, je dois rater un truc : je n’arrive pas toujours à adapter un bête bord en pointillé sur une image par exemple ça passe pas
EDIT: ça c’est pas si mal

      type: image
      card_mod:
        style:
          .: |
            hui-image {
              border-style: dashed;
              border-width: 2px;
              border-color: {{ 'red' if is_state('binary_sensor.poubelle_menagere_periode', 'on') else '#00000000' }};
            }
      style:
        top: 33%
        left: 74.4%
        width: 2%
      entity: binary_sensor.poubelle_menagere_periode
      image: /local/images/empty.png
      state_image:
        'on': /local/images/floors/items/poubelle.png
      tap_action:
        action: none

image

1 « J'aime »