[Mon Dashboard] - @Dapolux

Communauté HACF Présentations
21

Hello,

Oui biensur, voici mon fichier complet avec tous mes templates, en date d’aujourd’hui:

################################################################
################################################################
#                     Templates for cards
################################################################
################################################################


#####   Base for all the cards (normal by default)   ###########
# Ratio, generic colours, name, format, font 
  base:
    show_state: false
    show_icon: false
    aspect_ratio: 1/1
    state:
      ## Specific style when state is "On"
      - value: 'on'
        styles:
          card:
            - background-color: 'rgba(255, 255, 255, 0.8)'
            - border: 1px rgba(80, 80, 80) solid
          name:
            - color: 'rgba(0, 0, 0, 0.6)'
          custom_fields:
            temperature:
              - color: "#8d8e90"
    double_tap_action:
      action: more-info
    styles:
      name:
        - top: 74%
        - left: 11%
        - position: absolute
      card:
        - font-family: Passion One
        - letter-spacing: 0px
        - color: 'rgba(255, 255, 255, 0.3)'
        - font-size: 100%
        - background-color: 'rgba(80, 80, 80, 0.7)'
        - border-radius: 15%
        - box-shadow: none
        - transition: none
        - border: 1px rgba(255, 255, 255) solid

  base_forced_on:  #Always on
    template:
      - base
    styles:
      card: [background-color: 'rgba(255, 255, 255, 0.8)', border: '1px rgba(80, 80, 80) solid']
      name: [color: 'rgba(0, 0, 0, 0.6)']
      state: [color: 'rgba(0, 0, 0, 0.6)']    
      custom_fields:
        temperature:
          - color: "#8d8e90"          

###############   Specific for map tiles   ################        
  base_map:
    template: base
    show_name: false
    styles:
      custom_fields:
        temperature:
          - top: 73%
          - width: 100%
          - justify-self: center
          - align-self: center
          - font-size: >
              [[[
              var window_width = window.screen.width;
              if (window_width > 600) {return '17px';}
              else {return '13px';}
              ]]]
          - color: white
          - font-weight: black
          - position: absolute   
  base_map_forced_on:
    template:
      - base_map
      - base_forced_on

  light_map:
    template:
      - base_map
      - light_icon        
    styles: 
      custom_fields:
        icon_hue:
          [top: 20%, left: 27%, width: 46%, position: absolute]    

  cover_map:
    template:
      - base_map
      - base_forced_on
      - cover_icon
    show_name: false        
    styles:
      custom_fields:
        icon_cover:
          [top: 20%, left: 20%, width: 120%, position: absolute]  

  
###############   Specific for normal tiles   ################  
  light:
    template:
      - base
      - light_circle
      - light_icon    
    styles: 
      custom_fields:
        icon_hue:
          [top: 18%, left: 6%, width: 40%, position: absolute]      
        circle_light:
          [top: 10%, left: 50%, width: 45%, position: absolute, letter-spacing: 0px]

  cover:
    template:
      - base
      - cover_circle
      - cover_icon
    styles: 
      custom_fields:
        cover_icon:
          [top: 18%, left: 6%, width: 40%, position: absolute]      
        circle_cover:
          [top: 10%, left: 50%, width: 45%, position: absolute, letter-spacing: 0px]             


################################################################
#                       Lights
################################################################

##################  Global light  ################
  light_circle:
    custom_fields:
      circle_light: >
        [[[ if (entity.state === 'on' && entity.attributes.brightness) { const
        brightness = Math.round(entity.attributes.brightness / 2.54); const
        radius = 20.5; const circumference = radius * 2 * Math.PI;  return `<svg
        viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}"
        stroke="#b2b2b2" stroke-width="1.5" fill="none" style=" transform:
        rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray:
        ${circumference}; stroke-dashoffset: ${circumference - brightness / 100
        * circumference};" /> <text x="50%" y="54%" fill="#8d8e90"
        font-size="14" text-anchor="middle"
        alignment-baseline="middle">${brightness}<tspan
        font-size="10">%</tspan></text></svg>`; } ]]]

  light_icon:
    custom_fields:

      icon_hue: >
        [[[ 
        const state = entity.state === 'on' ? 'animate' : null;
        return `
        <svg viewBox="0 0 50 50">
        <style>@keyframes animate{0%{transform: scale(0.85);}20%{transform: scale(1.1);}40%{transform: scale(0.95);}60%{transform: scale(1.03);}80%{transform: scale(0.97);}100%{transform: scale(1);}}.animate{animation: animate 0.8s; transform-origin: center;}</style>
        <path fill="rgba(180, 180, 180)" d="M 29.147 48.105 L 21.281 48.105 C 21.281 48.105 20.157 48.173 20.157 48.629 C 20.157 49.087 20.801 49.218 21.281 49.218 L 29.147 49.218 C 29.629 49.218 30.271 49.152 30.271 48.629 C 30.271 48.105 29.147 48.105 29.147 48.105 Z M 34.446 46.209 L 16.144 46.209 C 16.144 46.209 14.857 46.209 14.857 46.733 C 14.857 47.256 15.822 47.319 16.144 47.319 L 34.606 47.319 C 34.927 47.319 35.89 47.256 35.89 46.733 C 35.729 46.209 34.446 46.209 34.446 46.209 Z M 34.446 44.248 L 16.144 44.248 C 16.144 44.248 14.857 44.248 14.857 44.771 C 14.857 45.295 15.822 45.359 16.144 45.359 L 34.606 45.359 C 34.927 45.359 35.89 45.295 35.89 44.771 C 35.729 44.248 34.446 44.248 34.446 44.248 Z M 34.446 42.351 L 25.295 42.351 L 16.144 42.351 C 16.144 42.351 14.857 42.351 14.857 42.874 C 14.857 43.397 15.822 43.463 16.144 43.463 L 34.606 43.463 C 34.927 43.463 35.89 43.397 35.89 42.874 C 35.89 42.351 34.446 42.351 34.446 42.351 Z M 42.794 27.181 C 37.494 23.714 31.556 23.519 25.294 23.519 C 19.194 23.519 11.809 23.781 7.796 27.181 C 7.635 27.246 7.635 27.379 7.956 27.639 C 8.597 28.161 13.252 32.346 13.094 39.932 C 13.094 40.651 12.932 40.978 13.094 41.044 C 13.094 41.109 13.094 41.5 14.857 41.5 L 35.729 41.5 C 37.334 41.5 37.334 41.174 37.494 41.044 L 37.494 39.932 C 37.334 32.346 41.99 28.161 42.633 27.639 C 42.794 27.379 42.794 27.31 42.794 27.181" style=""/>
        <path fill="rgba(150, 150, 150)" d="M 6.828 35.24 C 14.261 41.681 38.81 39.96 43.204 35.24 C 43.872 34.362 44.375 33.484 44.707 32.825 C 48.372 20.309 48.215 15.922 48.215 14.824 C 47.874 5.16 34.192 3.846 28.021 3.846 L 22.347 3.846 C 16.172 3.846 2.321 4.943 2.152 14.824 C 2.152 15.922 1.983 20.309 5.66 32.825 C 5.66 33.484 6.158 34.582 6.828 35.24 Z" style=""/>
        <path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="M 7.783 34.174 C 14.751 40.14 37.764 38.546 41.882 34.174 C 42.509 33.361 42.981 32.547 43.292 31.937 C 46.727 20.344 46.58 16.28 46.58 15.265 C 46.26 6.312 33.433 5.093 27.65 5.093 L 22.332 5.093 C 16.543 5.093 3.559 6.11 3.4 15.265 C 3.4 16.28 3.241 20.344 6.688 31.937 C 6.688 32.547 7.156 33.564 7.783 34.174 Z" style=""/>
        </svg>
        `; ]]]

      icon_hue_old2: >
        [[[ 
        const state = entity.state === 'on' ? 'animate' : null;
        return `
        <svg viewBox="0 0 50 50">
        <style>@keyframes animate{0%{transform: scale(0.85);}20%{transform: scale(1.1);}40%{transform: scale(0.95);}60%{transform: scale(1.03);}80%{transform: scale(0.97);}100%{transform: scale(1);}}.animate{animation: animate 0.8s; transform-origin: center;}</style>
        <path fill="rgba(180, 180, 180)" d="M 29.616 48.105 L 20.805 48.105 C 20.805 48.105 19.546 48.173 19.546 48.629 C 19.546 49.087 20.267 49.218 20.805 49.218 L 29.616 49.218 C 30.156 49.218 30.875 49.152 30.875 48.629 C 30.875 48.105 29.616 48.105 29.616 48.105 Z M 35.552 46.209 L 15.051 46.209 C 15.051 46.209 13.61 46.209 13.61 46.733 C 13.61 47.256 14.69 47.319 15.051 47.319 L 35.731 47.319 C 36.091 47.319 37.169 47.256 37.169 46.733 C 36.989 46.209 35.552 46.209 35.552 46.209 Z M 35.552 44.248 L 15.051 44.248 C 15.051 44.248 13.61 44.248 13.61 44.771 C 13.61 45.295 14.69 45.359 15.051 45.359 L 35.731 45.359 C 36.091 45.359 37.169 45.295 37.169 44.771 C 36.989 44.248 35.552 44.248 35.552 44.248 Z M 35.552 42.351 L 25.301 42.351 L 15.051 42.351 C 15.051 42.351 13.61 42.351 13.61 42.874 C 13.61 43.397 14.69 43.463 15.051 43.463 L 35.731 43.463 C 36.091 43.463 37.169 43.397 37.169 42.874 C 37.169 42.351 35.552 42.351 35.552 42.351 Z M 44.902 27.181 C 38.966 23.714 32.314 23.519 25.3 23.519 C 18.467 23.519 10.195 23.781 5.7 27.181 C 5.52 27.246 5.52 27.379 5.879 27.639 C 6.598 28.161 11.812 32.346 11.635 39.932 C 11.635 40.651 11.453 40.978 11.635 41.044 C 11.635 41.109 11.635 41.5 13.61 41.5 L 36.989 41.5 C 38.787 41.5 38.787 41.174 38.966 41.044 L 38.966 39.932 C 38.787 32.346 44.002 28.161 44.722 27.639 C 44.902 27.379 44.902 27.31 44.902 27.181" style=""/>
        <path fill="rgba(150, 150, 150)" d="M 6.451 28.691 C 14.107 34.485 39.389 32.937 43.915 28.691 C 44.603 27.901 45.121 27.111 45.463 26.518 C 49.237 15.258 49.075 11.311 49.075 10.323 C 48.724 1.629 34.633 0.446 28.278 0.446 L 22.434 0.446 C 16.075 0.446 1.81 1.433 1.636 10.323 C 1.636 11.311 1.462 15.258 5.248 26.518 C 5.248 27.111 5.761 28.099 6.451 28.691 Z" style=""/>
        <path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="M 7.476 27.969 C 14.707 33.421 38.591 31.964 42.866 27.969 C 43.516 27.226 44.006 26.482 44.329 25.925 C 47.894 15.33 47.741 11.616 47.741 10.688 C 47.41 2.506 34.097 1.392 28.095 1.392 L 22.575 1.392 C 16.567 1.392 3.091 2.321 2.927 10.688 C 2.927 11.616 2.762 15.33 6.339 25.925 C 6.339 26.482 6.824 27.411 7.476 27.969 Z" style=""/>
        </svg>
        `; ]]]

      icon_hue_old: >
        [[[ const state = entity.state === 'on' ? 'animate' : null;
        return `<svg viewBox="0 0 50 50"><style>@keyframes animate{0%{transform: scale(0.85);}20%{transform: scale(1.1);}40%{transform: scale(0.95);}60%{transform: scale(1.03);}80%{transform: scale(0.97);}100%{transform: scale(1);}}.animate{animation: animate 0.8s; transform-origin: center;}</style>
        <path fill="#9da0a2" d="M27.4 47.3h-4.9s-.7.1-.7.8.4.9.7.9h4.9c.3 0 .7-.1.7-.9s-.7-.8-.7-.8zm3.3-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-3H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9s-.9-.8-.9-.8zm5.2-23.2c-3.3-5.3-7-5.6-10.9-5.6-3.8 0-8.4.4-10.9 5.6-.1.1-.1.3.1.7.4.8 3.3 7.2 3.2 18.8 0 1.1-.1 1.6 0 1.7 0 .1 0 .7 1.1.7h13c1 0 1-.5 1.1-.7v-1.7c-.1-11.6 2.8-18 3.2-18.8.1-.4.1-.5.1-.7"/>
        <path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="M14.1 15.3c3.4-.3 7-.4 10.9-.4 3.8 0 7.5.2 10.9.4.4-.4.7-.8.9-1.1C39 8.5 38.9 6.5 38.9 6c-.2-4.4-8.4-5-12.1-5h0-3.4c-3.7 0-12 .5-12.1 5 0 .5-.1 2.5 2.1 8.2 0 .3.3.8.7 1.1z"/></svg>`; ]]]

################################################################
#                       Covers
################################################################          
          
##################  Global Cover ################    

  cover_circle:
    custom_fields: 
      circle_cover: >
        [[[  
        const position = Math.round(entity.attributes.current_position); 
        const radius = 20.5; 
        const circumference = radius * 2 * Math.PI;  
        return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" style=" transform:rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: ${circumference};
        stroke-dashoffset: ${circumference - position / 100 * circumference};" /> <text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${position}<tspan font-size="10">%</tspan></text></svg>`; 
         ]]]

  cover_icon:
    styles:
      custom_fields:
        icon_cover:
          [top: 20%, left: 10%, width: 50px, position: absolute]     
    custom_fields: 
      icon_cover: >
        [[[ 
        const position = Math.round(entity.attributes.current_position); 
        if (position < 5) {return `<svg viewBox="0 0 50 50"><path d="M3 4H21V8H19V20H17V8H7V20H5V8H3V4M8 9H16V11H8V9M8 12H16V14H8V12M8 15H16V17H8V15M8 18H16V20H8V18Z" fill="#8d8e90"/></svg>`;}
        else if ((position > 5) && (position < 35)) {return `<svg viewBox="0 0 50 50"><path d="M 3 4 L 21 4 L 21 8 L 19 8 L 19 20 L 17 20 L 17 8 L 7 8 L 7 20 L 5 20 L 5 8 L 3 8 L 3 4 M 8 9 L 16 9 L 16 11 L 8 11 L 8 9 M 8 12 L 16 12 L 16 14 L 8 14 L 8 12 M 8 15 L 16 15 L 16 17 L 8 17 L 8 15" fill="#8d8e90"/></svg>`;}
        else if ((position >= 35) && (position < 65)) {return `<svg viewBox="0 0 50 50"><path d="M 3 4 L 21 4 L 21 8 L 19 8 L 19 20 L 17 20 L 17 8 L 7 8 L 7 20 L 5 20 L 5 8 L 3 8 L 3 4 M 8 9 L 16 9 L 16 11 L 8 11 L 8 9 M 8 12 L 16 12 L 16 14 L 8 14 L 8 12" fill="#8d8e90"/></svg>`;}
        else if ((position >= 65) && (position < 95))  {return `<svg viewBox="0 0 50 50"><path d="M 3 4 L 21 4 L 21 8 L 19 8 L 19 20 L 17 20 L 17 8 L 7 8 L 7 20 L 5 20 L 5 8 L 3 8 L 3 4 M 8 9 L 16 9 L 16 11 L 8 11 L 8 9" fill="#8d8e90"/></svg>`;}
        else {return `<svg viewBox="0 0 50 50"><path d="M 3 4 L 21 4 L 21 8 L 19 8 L 19 20 L 17 20 L 17 8 L 7 8 L 7 20 L 5 20 L 5 8 L 3 8 L 3 4" fill="#8d8e90"/></svg>`;}
        ]]]
22

grand merci je vais regarder.

23

@Dapolux Bonjour désolé de te déranger, tout de doucement j’avance sur mon floorplan. Actuellement je bloque sur la carte media. Je n’arrive pas à trouver comme lire les fichiers MP3 qui sont dans mon fichier media. merci

24

7 messages ont été scindés en un nouveau sujet : Grouper les players - LMS

25

J’ai supprimer du coté de HA
Ok je regarde à cela et je te tiens au courant.

26

Voilà, la visu du plan d’aspiration est intégrée:

image
image356×652 73.6 KB

Et le monitoring commence à bien prendre forme!
monitoring2

1er post mis à jour avec les infos correspondantes.

2 « J'aime »
27

sympas les evolutions :slight_smile: félicitation !

j’utilise cette carte pour l’aspi également, elle top, mais j’ai préféré utiliser le plan de la maison :
4
tu peux aussi faire une automatisation (ou sous node red) pour allez à la poubelle à fin du nettoyage et à un horaire dans la journée, en rentrant du travail y juste à la vider :slight_smile:

calibration_points:
  - map:
      x: 100
      'y': 215
    vacuum:
      x: 25350
      'y': 24450
  - map:
      x: 250
      'y': 215
    vacuum:
      x: 28100
      'y': 24550
  - map:
      x: 100
      'y': 64
    vacuum:
      x: 25800
      'y': 29100
entity: vacuum.xiaomi_vacuum_cleaner
map_image: /local/custom_lovelace/xiaomi_vacuum_map_card/map3.png
type: 'custom:xiaomi-vacuum-map-card'
zones:
  - - - 28536
      - 23313
      - 29886
      - 25663
  - - - 23859
      - 24540
      - 25009
      - 26390
  - - - 23016
      - 14950
      - 29716
      - 20157
  - - - 23600
      - 20020
      - 30500
      - 30999
  - - - 29690
      - 27741
      - 32352
      - 31291
1 « J'aime »
28

Belle intégration!
Pas une mauvaise idée le plan de la maison, je vais y penser :).

29

J’ai également utilisé browser_mod pour redefinir le more-info et c’est fonctionnel depuis mon navigateur. Par contre ca ne marche pas sur mon mobile android depuis l’application officielle. As-tu testé sur mobile et est-ce fonctionnel ?
Merci pour ton retour.

30

J’ai redémarré le téléphone et ca a marché … peut-être un problème de cache … à suivre :wink:

31

Merci pour le partage :grinning:

J’aime beaucoup ton monitoring surtout l’effet glisse pour afficher plusieurs élément dans un espace réduit.

Pourrais tu partager ton astuce si je souhaite la reproduire.
:+1:

32

Ici :

https://forum.hacf.fr/t/carte-swiper-card/926

1 « J'aime »
33

Bonjour !

Sympa ton dashboard @Dapolux . Concernant la musique, tu pourrais partager s’il te plait ton template qui affiche les playlist deezer (Musique du moment…) ? (notamment comment tu affiches l’image avec)

Merci beaucoup !

34

Bonjour,
Je vois que tu as un control assez complet de ta VMC double flux.
Quel est son modèle et comment t-y es tu pris? Perso, j’ai une VMC DF Aldes, mais je ne peux agir dessus qu’avec un module radio que je n’ai pas réussi à intégrer sur HA (PS j’ai un RFX DYI 433Mhz, mais la DF semble etre en 868MHz.

En tout cas, super dashboard.

Merci de tes partages !

35

Bonjour @anoeta,

Alors ce n’est pas deezer, mais spotify.
En l’occurrence, j’affiche les playlists de mon LMS (à l’intérieur du quel j’accède à mes playlists spotify), tu trouveras plus d’infos ici:

https://forum.hacf.fr/t/visualisation-de-lms/2529

36

Bonjour @vdelab,

Alors j’ai une Zehnder WHR 930 (qui existe aussi sous le nom comfoair 350).

Pour son intégration, voici ce que j’ai fait:

Mais cela ne sera très certainement pas adaptable aux VMC Aldes.

Dans tous les cas, tu as une solution beaucoup plus DIY, qui consisterais à mettre des capteurs de température reliés à un RPI, ou à un arduino, puis piloter les vitesses de ta VMC avec des relais (si elle est pilotable par contacts secs). Par contre cela nécessite de mettre un peu plus la main à la pate :).

37

Hello,

Petite mise à jour du post avec ma vue de monitoring général.

image
image1515×604 188 KB

Reste à peaufiner quelques détails visuels, puis à revoir pour des popups sur les tuiles (vue un peu plus détaillée de chaque appareil, avec les fonctions associées (ex: reboot, switchs, …), ne voulant pas trop surcharger la vue générale).

Puis à revoir/optimiser les entités pour pas exploser ma base de données (ouai, pour avoir les sensors souhaités, j’ai du installer/tester plusieurs intégrations, et récupérer un max d’infos, trop d’infos parfois (Unifi me génère 80 appareils et 280 entités…), il faut maintenant réduire à ce dont j’ai réellement besoin.

1 « J'aime »
38

Woaw !!!
Quelle intégration WAF !
Je crois que je vais te solliciter !!!

39

N’hésites pas si tu as des questions!

40

Salut !
J’aime beaucoup ce que tu as fais !
Tu aurais un exemple de cards a donné pour ta vue de monitoring général ?