DASHBOARD Plan

[bartounet]

Bonjour,
Depuis ma migration jeedom, je me suis bien accomodé des dashboard tuile avec HA.
Mais j’aimerai essayer de créer un dashboard plan.
pensez vous qu’il est possible de se rapprocher de ça ?

J’ai réussi à mettre ma carte au fond mais je n’arrive pas à positionner mes tuile ou je veux de façon libre ..

[vincen]

Salut

As-tu regardé cet article qui explique exactement ce que tu veux faire Présentation de mon floorplan 3D sur Home Assistant ?

Vincèn

[freetronic]

Hello,

Aucun « soucis », à part le temps que tu vas y consacrer , tu peux même faire du multiplan en poussant intégrisme à l’extrême ( et on peut aller encore plus loin … )

Picture element card, vaste sujet, mes pistes de recherche, voir les solutions qui me conviennent

Hello, Après avoir passé pas mal de temps sur des dashbords « classiques » j’ai voulu voir ce que donnait picture element et grand bien m’en fasse parce que c’est assez génial. Attention dès le départ suivant la complexité du plan, c’est très clairement un gros investissement temps. Et vu que je fais rarement dans la finesse, après un test en plan 2D, je suis finalement passé à la « 3D ». Etant donné que j’ai creusé pas mal la question ces temps-ci. Je vais mettre ici quelques pistes de réflex…

cdt

[bartounet]

Merci, oui j’étais tombé dessus.
mais j’ai du mal à comprendre pour placer les éléments comme des ampoules simplement ou on veut sur le plan

[freetronic]

Re,

pas compliqué, il faut ajouter un style de placement sur la carte, voir de dimension, soit en px soit en %

      - type: custom:streamline-card
        template: switch_prise
        variables:
          - entity: switch.prise_entree
          - action: toggle
          - show_name: false
        style:
          top: 69.5%
          left: 73.6%
          width: 25px
          height: 25px

        style:
          top: 69.5%
          left: 73.6%
          width: 25px
          height: 25px

teste avec un

       style:
          top: 50%
          left: 50%

plein centre

Picture elements card

cdt

[bartounet]

Merci
Décidément on peut tout faire en mieux.
Bon là ca à pas trop de gueule mais je vais essayer d’améliorer

je n’arrive à grossir la taille des icones.

width: 25px
          height: 25px

Ne fonctionne pas ça les déplace mais ne les grossi pas.
j’aimerai aussi avoir le fond noir derriere sans mettre le theme dark (mon image était détourée)

J’aimerai aussi avoir des icones de portes ou volet qui s’ouvrent et ferment en fonction de l’état

[freetronic]

Re,

Il faudra que tu donnes les codes de tes cartes. Pour les images on/off, aucun soucis non plus, il faut les uploader dans HA

sauf erreur tout est dans la doc donnée plus haut

cdt

[bartounet]

Autre petite demande, comment avoir l’info du dernier déclenchement d’un motion ?

Par exemple le code de ma carte actuelle.
Si je place un with /wight il a le même effet qu’un left/top

type: picture-elements
elements:
  - type: state-icon
    style:
      left: 53%
      top: 55%
      width: 50px
      height: 50px
    entity: binary_sensor.fiboeil_1_motion_detection
  - type: state-icon
    style:
      left: 30%
      top: 42%
    entity: binary_sensor.fiboeil_couloir2_motion_detection
  - type: state-icon
    style:
      left: 60%
      top: 35%
    entity: binary_sensor.fiboeil_sejour_sensor_state_general_purpose
  - type: state-icon
    style:
      left: 75%
      top: 38%
    entity: binary_sensor.fiboeil_cuisine_sensor_state_any
  - type: state-icon
    style:
      left: 40%
      top: 56%
    entity: binary_sensor.motion_sensor_motion_detection
  - type: state-icon
    style:
      left: 44%
      top: 20%
    entity: light.yeelight_bureau
    tap_action:
      action: perform-action
      perform_action: light.toggle
      target:
        entity_id: light.yeelight_bureau
      data: {}
  - type: state-icon
    style:
      left: 55%
      top: 20%
    entity: light.btn_off_url_2
    tap_action:
      action: perform-action
      perform_action: light.toggle
      target:
        entity_id: light.btn_off_url_2
      data: {}
  - type: state-icon
    style:
      left: 40%
      top: 35%
    entity: light.yeelight_couloir1
    tap_action:
      action: perform-action
      perform_action: light.toggle
      target:
        entity_id: light.yeelight_couloir1
      data: {}
  - type: state-icon
    style:
      left: 20%
      top: 49%
    entity: light.yeelight_couloir2
    tap_action:
      action: perform-action
      perform_action: light.toggle
      target:
        entity_id: light.yeelight_couloir2
      data: {}
  - type: state-icon
    style:
      left: 90%
      top: 25%
    entity: light.wall_plug_halogene
    tap_action:
      action: perform-action
      perform_action: light.toggle
      target:
        entity_id: light.wall_plug_halogene
      data: {}
  - type: state-icon
    style:
      left: 75%
      top: 13%
    entity: light.meuble_tv
    tap_action:
      action: perform-action
      perform_action: light.toggle
      target:
        entity_id: light.meuble_tv
      data: {}
  - type: state-icon
    style:
      left: 75%
      top: 45%
    entity: light.cuisine
    tap_action:
      action: perform-action
      perform_action: light.toggle
      target:
        entity_id: light.cuisine
      data: {}
  - type: state-icon
    style:
      left: 80%
      top: 52%
    entity: light.btn_off_url
    tap_action:
      action: perform-action
      perform_action: light.toggle
      target:
        entity_id: light.btn_off_url
      data: {}
  - type: state-icon
    style:
      left: 60%
      top: 26%
    entity: light.172_20_0_7
    tap_action:
      action: perform-action
      perform_action: light.toggle
      target:
        entity_id: light.172_20_0_7
      data: {}
  - type: state-icon
    style:
      left: 75%
      top: 26%
    tap_action:
      action: perform-action
      perform_action: light.toggle
      target:
        entity_id: light.yeelight_tv
      data: {}
    entity: light.yeelight_tv
  - type: state-icon
    style:
      left: 48%
      top: 48%
    entity: light.wc
    tap_action:
      action: perform-action
      perform_action: light.toggle
      target:
        entity_id: light.wc
      data: {}
  - type: state-icon
    style:
      left: 89%
      top: 48%
    entity: light.cellier
    tap_action:
      action: perform-action
      perform_action: light.toggle
      target:
        entity_id: light.cellier
      data: {}
  - type: state-icon
    style:
      left: 28%
      top: 29%
    entity: light.yeelight_adam
    tap_action:
      action: perform-action
      perform_action: light.toggle
      target:
        entity_id: light.yeelight_adam
      data: {}
  - type: state-icon
    style:
      left: 15%
      top: 40%
    entity: light.yeelight_lisa
    tap_action:
      action: perform-action
      perform_action: light.toggle
      target:
        entity_id: light.yeelight_lisa
      data: {}
  - type: state-icon
    style:
      left: 20%
      top: 80%
    tap_action:
      action: perform-action
      perform_action: light.toggle
      target:
        entity_id: light.lampe_chevet
      data: {}
    entity: light.lampe_chevet
  - type: state-icon
    style:
      left: 25%
      top: 70%
    tap_action:
      action: perform-action
      perform_action: light.toggle
      target:
        entity_id: light.yeelight_parents
      data: {}
    entity: light.yeelight_parents
  - type: state-icon
    style:
      left: 40%
      top: 45%
    tap_action:
      action: perform-action
      perform_action: light.toggle
      target:
        entity_id: light.salle_de_bain
      data: {}
    entity: light.salle_de_bain
  - type: state-label
    style:
      left: 60%
      top: 75%
    entity: sensor.fib_oeil_exter_air_temperature
  - type: state-label
    style:
      left: 60%
      top: 43%
    entity: sensor.fiboeil_sejour_air_temperature
  - type: state-label
    style:
      left: 40%
      top: 55%
    entity: sensor.motion_sensor_air_temperature_2
  - type: state-icon
    style:
      left: 53%
      top: 35%
    entity: input_boolean.sapin_2
    tap_action:
      action: perform-action
      perform_action: light.toggle
      target:
        entity_id: light.shelly_sapin
      data: {}
  - type: state-icon
    style:
      left: 95%
      top: 18%
    entity: switch.volet_appenti
    tap_action:
      action: perform-action
      perform_action: light.toggle
      target:
        entity_id: light.shelly_sapin
      data: {}
image:
  media_content_id: media-source://image_upload/7e3f53fb8d3d32cf42f910c0dfdaa57b
  media_content_type: image/png
  metadata:
    title: maison2048.png
    thumbnail: /api/image/serve/7e3f53fb8d3d32cf42f910c0dfdaa57b/256x256
    media_class: image
    children_media_class: null
    navigateIds:
      - {}
      - media_content_type: app
        media_content_id: media-source://image_upload
dark_mode_image:
  media_content_id: media-source://image_upload/f095593723f007a44b9b5741284b2503
  media_content_type: image/png
  metadata:
    title: maison1024.png
    thumbnail: /api/image/serve/f095593723f007a44b9b5741284b2503/256x256
    media_class: image
    children_media_class: null
    navigateIds:
      - {}
      - media_content_type: app
        media_content_id: media-source://image_upload
grid_options:
  columns: full
  rows: 12
dark_mode_filter: {}

[freetronic]

Re,

Pour régler la taille

      - type: state-icon
        entity: binary_sensor.esp_cagibi_radar_target
        style:
          left: 53%
          top: 55%
          transform: scale(3)

ou

      - type: state-icon
        entity: binary_sensor.esp_cagibi_radar_target
        style:
          left: 53%
          top: 55%
          "--mdc-icon-size": 100px

j’ai du monde je reviens après pour la suite

cdt

[bartounet]

Tu es un chef merci !

[bartounet]

je n’arrive pas à faire fonctionner les états image
Mon image s’affiche, mais elle ne gère pas l’affiche on/off quand j’appuie elle reste en ON

 - type: image
    style:
      left: 44%
      top: 12%
      transform: scale(0.3)
    state_image:
      "on": http://jeedomalf.free.fr/galerie/Icones/Couleur/1418207174.png
      "off": http://jeedomalf.free.fr/galerie/Icones/Couleur/1418207173.png
      unavailable: http://jeedomalf.free.fr/galerie/Icones/Couleur/1418207173.png
    tap_action:
      action: perform-action
      perform_action: light.toggle
      target:
        entity_id: light.shelly_sapin
      data: {}
image:

[WarC0zes]

@bartounet

      "on": http://jeedomalf.free.fr/galerie/Icones/Couleur/1418207174.png
      "off": http://jeedomalf.free.fr/galerie/Icones/Couleur/1418207173.png

Bonjour,
au lieu d’utiliser un lien externe, copie les images dans /config/www/images/ ou /homeassistant/www/images sous file editor.
Puis utlise ces liens :

      "on": /local/images/1418207174.png
      "off": /local/images/1418207173.png

[bartounet]

Mais vous les copier direct depuis la Web UI ou en SCP ?
j’ai l’impression qu’il me renomme tout dans ce dossier ??

[WarC0zes]

@bartounet

Mais vous les copier direct depuis la Web UI ou en SCP ?

Oui, clique droit / enregistrer l’image sous :

[bartounet]

je parle pour les uploader
je n’ai pas de dossier
/config/www/images/ ou /homeassistant/www/images

j’ai créer le dossier

Par contre toujours pas de changement d’image en ON OFF il me prend que le OFF

 - type: image
    style:
      left: 50%
      top: 50%
    state_image:
      "on": /local/images/sapin-on.png
      "off": /local/images/sapin-off.png
      unavailable: /local/images/sapin-off.png
    entity: input_boolean.sapin_2
    tap_action:
      action: perform-action
      perform_action: light.toggle
      target:
        entity_id: light.shelly_sapin
      data: {}

[WarC0zes]

Soit tu utilises le module complémentaire Samba Share et accèdes au dossier par Samba d’un PC, soit avec le module complémentaire File Editor, ou avec le module complémentaire Terminal & SSH et sur le pc avec winscp.
le dossier www tu dois le créer comme celui de images.

avec file editor :

[bartounet]

Merci
Voir mon message plus haut désolé

[freetronic]

Re,

pas convaincu par le

@bartounet

sapin-on.png

en tout cas je n’ai aucun - dans les noms, préfère _

sapin_on.png 

fonctionne sans soucis aussi

sapin on.png 

Dans le doute, vide ton cache ( F5 ) voir redémarre HA

ça ça tourne

      - type: image
        entity: binary_sensor.olimex_esp32_poe_veranda_porte1_veranda
        style:
          top: 42.2%
          left: 55.65%
          transform: translate(-50%, -50%) scale(0.76)
        state_image:
          "on": /local/plan3D/piece mini/ouvrant/porte/porte1 veranda1 ouverte.gif
          "off": /local/plan3D/piece mini/ouvrant/porte/porte1 veranda1 base.png
          unavailable: /local/plan3D/piece mini/ouvrant/porte/porte1 veranda1 defaut.gif

mes images sont là en rapport

homeassistant/www/plan3D/piece mini/ouvrant/porte/

pour le dernier déclenchement, vérifie que tu as un attibute sur ton capteur, sinon il faudra passer par un template sensor

@bartounet

Autre petite demande, comment avoir l’info du dernier déclenchement d’un motion ?

{{ states.binary_sensor.olimex_esp32_poe_veranda_porte1_veranda.last_changed }}

{{ states.binary_sensor.olimex_esp32_poe_veranda_porte1_veranda.last_changed.strftime('%H:%M') }}

reste plus qu’à le filtrer et l’afficher

{% set last_changed = as_timestamp(states.binary_sensor.olimex_esp32_poe_veranda_porte2_veranda.last_changed) %}
{% set now = as_timestamp(now()) %}
{% set diff = now - last_changed %}
{% if diff < 60 %}
  {{ diff | round(0) }} secondes
{% elif diff < 3600 %}
  {{ (diff / 60) | round(0) }} minutes
{% elif diff < 86400 %}
  {{ (diff / 3600) | round(0) }} heures
{% else %}
  {{ (diff / 86400) | round(0) }} jours
{% endif %}

cdt

[bartounet]

@freetronic

transform: translate(-50%, -50%) scale(0.76)

Merci.
Je ne comprends pas, il va bien chercher mes images puisqu’il me l’affiche.
Mais ne change pas d’état.
J’ai changé les noms …
Redémaré aussi
Peut etre à cause de l’interaction ? j’ai mis basculer ? ca marche bien et ca éteint et allume le sapin

[freetronic]

Re,

Vérifie que si tu commutes ton entité, fais F5, l’affichage commute ou pas ?

tu peux aussi tester en inversant le on et le off pour valider que les images passent bien

cdt