Dashboard - đŸŒ» Minimalist

voila mon theme:

#main interface colors
primary-color: â€č #89B3F8 â€ș
google-red : â€č #F18B82 â€ș
google-green : â€č #80C994 â€ș
google-yellow : â€č #FCD663 â€ș
google-blue : â€č #89B3F8 â€ș
google-violet : â€č #BB86FC â€ș
google-grey: â€č #BBBBBB â€ș
color-red: 241, 139, 130
color-green: 128, 201, 148
color-yellow: 252, 214, 99
color-blue : 137, 179, 248
color-theme : 221,221,221
color-purple : 102, 31, 255
color-grey : 187, 187, 187
color-pink : 233, 30, 99

je dois y mettre juste --google-green ?

Oui c’est ça


ca ne change rien.

type: vertical-stack
cards:
  - card:
      entity: alarm_control_panel.home_alarm
      states:
        - arm_home
      style:
        .: |
          ha-card > ha-label-badge{
            --alarm-state-color: var(google-green) !important;
          }
          ha-card{
            padding-top: 16px;
            padding-bottom: 12px !important;
            border-radius: 21px;
          }
          ha-card > h1{
             padding-top: 0;
             color: transparent;
          }
          ha-card > h1::before{
             content: "Désactivée";
             color: var(google-green);
             position: absolute;
             font-variant: small-caps;

Toujours pareil:

Capture d’écran 2021-08-28 à 14.11.19

Parce qu’il ne trouve pas les couleurs encore une fois :wink:

Pourquoi tu n’as pas fais ce que t’as dis ?!

:smirk:

ET LES -- (2 tirets du 6
:innocent:)! Ils sont oĂč ?!

:face_with_monocle:

:wink:

2 « J'aime »

bien vu !
j’ai encore fait l’oreil de veau :laughing:

Merci @Clemalex, ca fonctionne mieux du coup


2 « J'aime »

4 messages ont Ă©tĂ© scindĂ©s en un nouveau sujet : Button-Card, impossible de reproduire l’exemple

AprĂšs de nombreuses heures a vouloir faire fonctionner ce thĂšme (je dĂ©bute sur HA et j’ai pas grand chose Ă  y intĂ©grer pour l’instant mais ça va venir :slight_smile: )

Je n’arrive pas Ă  faire fonctionner les « ScĂšnes », rien apparait sur mon dashboard.
Qu’y a t’il Ă  faire pour les « activer » ?

Sur la page « localisation » toutes les cards sont en « missing » alors qu’elles sont bien dans le fichier button_card_templates.yaml donc je ne vois pas d’oĂč ça vient. Egalement pour la partie « prĂ©sence » des personnes, j’arrive pas Ă  la faire fonctionner.

Alors que pour d’autre vues, pas de soucis ? Ce n’est pas un problùme d’appel du fichier de ressource des modùles ?

Partage ta carte localisation et ta carte scĂšne et ton fichier contenant les modĂšles.

En faite j’ai repris ses fichiers oĂč j’ai modifiĂ© pour la vue localisation.yaml son utilisateur « thomas » par le mien, mais la prĂ©sence ne remonte pas.

Je dois créer une entity quelque part ?

Pour la page localisation, de base j’ai cette erreur :
image

Je comprend que la card « personne-dylan » n’existe pas, effectivement dans button_card_templates.yaml (une erreur dans son exmaple/template ?
GitHub - TBens/lovelace-ui-minimalist: đŸŒ» Lovelace UI ‱ Minimalist ) elle s’appelle « person-dylan » donc je modifie et ensuite j’ai cette erreur :

Et pour les scĂšnes, bah j’ai absolument rien qui s’affiche, est-ce qu’il me manque des entitĂ©s ?
Je suis dispo en vocal discord si c’est plus simple.

L’erreur provient de ta modification :wink:

- entity: input_select.localisation_thomas
  variables:
    personne: "thomas"
  template: 
    - icon_info_bg
    - personne-Thomas #Si tu renomme ici, forcément il faut renommer le modÚle
  name: Thomas
  type: 'custom:button-card'

C’est beaucoup mieux :wink:

person-dylan: #s'appellait person-thomas auparavant
  variables:
    person: "thomas"
  template: person
  hold_action:
    action: more-info
    entity: input_boolean.thomas_nuit #A changer !!
  styles:
    custom_fields:
      notification:
        #input_select.localisation_thomas A changer !!
        - background-color: >
            [[[
              if (states['input_select.localisation_thomas'].state == 'Present'){
                return "rgba(var(--color-blue),1)";
              }else{
                return "rgba(var(--color-green),1)";
              }
            ]]]
  custom_fields:
    #input_boolean.thomas_nuit A changer !!        
    #input_select.localisation_thomas A changer !!
    notification: >
      [[[
        if (states['input_boolean.thomas_nuit'].state == 'on'){
          return `<ha-icon icon="mdi:power-sleep" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>`
        }else{
          if (states['input_select.localisation_thomas'].state == 'Present'){
            return `<ha-icon icon="mdi:home-variant" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>`
          }else{
            return `<ha-icon icon="mdi:pine-tree" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>`
          }
        }
      ]]]

J’ai mis A CHANGER lorsque tu dois modifier avec tes propres entitĂ©s les modĂšles.
Si tu laisses les entitĂ©s de @tben, tu retrouves l’erreur de rĂ©cupĂ©ration d’état de ta capture.

Certains dĂ©veloppeurs sont en train de travailler dans l’ombre pour variabiliser tout le code pour ne pas avoir Ă  modifier les modĂšles.

Aucune idée de ce que représente ces entités par contre.

Personnellement, j’utilise cette carte :

L’erreur provient de ta modification :wink:

- entity: input_select.localisation_thomas
  variables:
    personne: "thomas"
  template: 
    - icon_info_bg
    - personne-Thomas #Si tu renomme ici, forcément il faut renommer le modÚle
  name: Thomas
  type: 'custom:button-card'

Ce que je voulais dire c’est que dans son template « personne-thomas Â» n’existe pas, c’est

person-thomas:
  variables:
    person: "thomas"
  template: person

J’ai mis A CHANGER lorsque tu dois modifier avec tes propres entitĂ©s les modĂšles.

Justement c’est lĂ  que j’ai du mal, quelle entitĂ© je dois mettre ? Je dois en crĂ©er une en particulier ? Avec quels rĂ©glages ?
Parce que si je met juste input_boolean.mon_user_nuit bah ça marche pas par exemple.


Certains dĂ©veloppeurs sont en train de travailler dans l’ombre pour variabiliser tout le code pour ne pas avoir Ă  modifier les modĂšles.

Ah ça c’est intĂ©ressant ! Ici ou ailleurs ? Il y a moyen de suivre ce projet ?

Je regarderai ta carte aprĂšs avoir lu un peu plus vos tutos, merci :slight_smile:

1 « J'aime »

Bonjour merci beaucoup d’avoir partagĂ© votre modĂšle, j’ai essayĂ© de l’appliquer mais je n’ai pas pu car il manquait un modĂšle light_with_colors, pourriez-vous partager ?

voila:

  light_with_colors:
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    label: |-
      [[[ if (entity.state !='unavailable'){
            if (entity.state =='off'){
              var bri = Math.round(entity.attributes.brightness / 2.55);
              return 'Off';  
            }else{
              var bri = Math.round(entity.attributes.brightness / 2.55);
              return (bri ? bri + '%' : 'On') ; 
            }
          }else{
            return "Indisponible";
          }
      ]]]
    state:
      - styles:
          icon:
            - filter: |-
                [[[ 
                    var bri = entity.attributes.brightness / 2.55;
                    return ('brightness(' + (50+bri/2) + '%)') ; 
                ]]]
            - color: |-
                [[[ 
                  var color = entity.attributes.rgb_color;
                  if (color){
                     return 'rgba(' + entity.attributes.rgb_color + ',1)'
                  }
                  else{
                    return 'rgba(var(--couleur-jaune),1)'
                  } 
                ]]]
          img_cell:
            - background-color: |-
                [[[ 
                  var color = entity.attributes.rgb_color;
                  if (color){
                     return 'rgba(' + entity.attributes.rgb_color + ',0.2)'
                  }
                  else{
                    return 'rgba(var(--couleur-jaune),0.2)'
                  } 
                ]]]
        value: 'on'
2 « J'aime »

Il est disponible dans ce post :

https://forum.hacf.fr/t/dashboard-minimalist/5507/31?u=clemalex

1 « J'aime »

Bonjour Ă  tous, je me suis lancer dans l’aspect du theme minimalist mobile grĂ ace a @Clemalex et @barto_95, aujourd’hui j’avance, doucement mais surement et j’aimerais Ă©galement reproduire ce que je fais mais en modĂ©le tablette, quelqu’un Ă  une carte vierge a me filer par rapport aux colonnes qui sont je suppose totalement diffĂ©rente en fonction de la largeur de l’écran. merci Ă  tous !

bonjour,

j’aurais besoin d’un coup de main pour modifier cette carte car j’ai ajoutĂ© la possibilitĂ© d’actionner le mode silencieux, le service en lui mĂȘme fonctionne pas je ne trouve pas le moyen d’ajouter une couleur lors de l’activation et de modifier le « entity_id » pour qu’il s’adapte Ă  tous les autres.

Merci
Sans titre

  cover_somfy:
    tap_action:
      action: more-info
    icon: |
      [[[
          var icon = 'mdi:window-shutter';
          if (entity.attributes.current_position == 0){
            var icon = 'mdi:window-shutter';
          } else
            var icon = 'mdi:window-shutter-open';
          return icon ;
      ]]]
    label: |-
      [[[ 
        if (entity.state == 'opening'){
            return 'Ouverture';
        }
        else if (entity.state == 'closing'){
            return 'Fermeture';
        }
        else{
          if (entity.attributes.current_position == 0){
            var etat = "Fermé";
          }else if (entity.attributes.current_position == 100){
            var etat = "Ouvert" ;
          }else{
            var etat = (entity.attributes.current_position) + '%' ;
          }
          return etat ;
        }
      ]]]
    state:
      - styles:
          icon:
            - color: rgba(var(--color-green),1)
          img_cell:
            - background-color: rgba(var(--color-green), 0.2)
        value: closed
      - styles:
          icon:
            - color: rgba(var(--color-yellow),1)
          img_cell:
            - background-color: rgba(var(--color-yellow), 0.2)
        value: open
      - styles:
          icon:
            - color: rgba(var(--color-blue),1)
          img_cell:
            - background-color: rgba(var(--color-blue), 0.2)
        value: opening
      - styles:
          icon:
            - color: rgba(var(--color-blue),1)
          img_cell:
            - background-color: rgba(var(--color-blue), 0.2)
        value: closing
  list_items_cover_favorite:
    styles:
      card:
        - box-shadow: none
        - padding: 0px
      grid:
        - grid-template-areas: '"item1 item1 item2"'
        - grid-template-columns: 1fr 1fr 1fr
        - grid-template-rows: min-content
        - column-gap: 7px
  cover_buttons_with_favorite:
    variables:
      entity: cover.default
      name: Default name
      sun_position: 0
    styles:
      card:
        - border-radius: 20px
        - box-shadow: var(--box-shadow)
        - padding: 12px
      grid:
        - grid-template-areas: '"item1" "item2" "item3"'
        - grid-template-columns: 1fr
        - grid-template-rows: min-content  min-content
        - row-gap: 12px
    custom_fields:
      item1:
        card:
          template: list_items_cover_favorite
          type: custom:button-card
          custom_fields:
            item1:
              card:
                entity: '[[[ return variables.entity ]]]'
                name: '[[[ return variables.name ]]]'
                tap_action:
                  action: more-info
                template:
                  - icon_info
                  - cover_somfy
                type: custom:button-card
            item2:
              card:
                icon: mdi:star
                tap_action:
                  action: call-service
                  service: cover.set_cover_position
                  service_data:
                    entity_id: '[[[ return variables.entity ]]]'
                    position: '[[[ return variables.sun_position ]]]'
                type: custom:button-card
                template: widget_icon
      item2:
        card:
          template: list_items
          type: custom:button-card
          custom_fields:
            item1:
              card:
                icon: mdi:arrow-down
                tap_action:
                  action: call-service
                  service: cover.close_cover
                  service_data:
                    entity_id: '[[[ return variables.entity ]]]'
                type: custom:button-card
                template: widget_icon
            item2:
              card:
                icon: mdi:pause
                tap_action:
                  action: call-service
                  service: cover.stop_cover
                  service_data:
                    entity_id: '[[[ return variables.entity ]]]'
                type: custom:button-card
                template: widget_icon
            item3:
              card:
                icon: mdi:arrow-up
                tap_action:
                  action: call-service
                  service: cover.open_cover
                  service_data:
                    entity_id: '[[[ return variables.entity ]]]'
                type: custom:button-card
                template: widget_icon
      item3:
        card:
          template: list_items
          type: custom:button-card
          custom_fields:
            item1:
              card:
                icon: mdi:feather
                tap_action:
                  action: call-service
                  service: switch.toggle
                  service_data:
                    entity_id: switch.bureau_riviere_low_speed
                type: custom:button-card
                template: widget_icon

je comprends pas ce que tu cherches a réaliser


avec l’intĂ©gration overkiz j’ai des switch.[nom du volet]_low_speed pour les faire fonctionner en mode silencieux. Mon soucis c’est que dans l’item ci-dessous je n’arrive pas Ă  crĂ©er un bouton qui renvoie automatiquement vers le volet concernĂ© et a avoir un retour d’état du switch par un changement de couleur de celui-ci.

      item3:
        card:
          template: list_items
          type: custom:button-card
          custom_fields:
            item1:
              card:
                icon: mdi:feather
                tap_action:
                  action: call-service
                  service: switch.toggle
                  service_data:
                    entity_id: switch.bureau_riviere_low_speed
                type: custom:button-card
                template: widget_icon

Pour encore plus de plaisir (et de confort) :

4 « J'aime »

hello,

j’ai mis a jour mon dashboard avec ce nouveau code, j’ai un problùme dans les chips. Je ne vois pas les icones 

image

qqu’un Ă  le mĂȘme soucis ?