Dashboard - 🌻 Minimalist

[Clemalex]

@barto_95

il ne fait que un retour vers la gauche ou il garde en mémoire par la ou tu es passer

@Clemalex

pour avoir un vrai bouton retour (historique de navigation) :

---

[Clemalex]

Si vous avez besoin de 2 boutons dans la carte alarme :

type: vertical-stack
cards:
  - card:
      entity: alarm_control_panel.alarme_pour_creation_de_service
      states:
        - arm_home
        - arm_away
      style:
        .: |
          ha-card{
            margin-left: 6px;
            margin-right: 6px;
          }
          ha-card > ha-label-badge{
            --alarm-state-color: var(--google-green-500) !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-500);
             position: absolute;
             font-variant: small-caps;
          }
          #alarmCode{
            display: none;
          }
          #keypad{
            display: none !important;
          }
        '#armActions':
          mwc-button:nth-child(1):
            $: |
              #button > span.slot-container{
                color: transparent;
                position: absolute;

              }
              #button{
                width: 150px;
                border-radius: 21px;
              }

              #button > span.slot-container::before{
                color: var(--mdc-theme-primary, #6200ee);
                content: "Présent";
                margin: 0 0 0 50%;
              }
          mwc-button:nth-child(2):
            $: |
              #button > span.slot-container{
                color: transparent;
                position: absolute;

              }
              #button{
                width: 150px;
                border-radius: 21px;
              }

              #button > span.slot-container::before{
                color: var(--mdc-theme-primary, #6200ee);
                content: "ABSENT";
                margin: 0 0 0 50%;
              }
      title: Alarme
      type: alarm-panel
    conditions:
      - entity: alarm_control_panel.alarme_pour_creation_de_service
        state: disarmed
    type: conditional
  - card:
      entity: alarm_control_panel.alarme_pour_creation_de_service
      states:
        - arm_home
      title: Alarme
      type: alarm-panel
      style:
        .: |
          ha-card{
            margin-left: 6px;
            margin-right: 6px;
          }
          ha-card > ha-label-badge{
            --alarm-state-color: var(--google-red-500) !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: "Activée";
             color: var(--google-red-500);
             position: absolute;
             font-variant: small-caps;
          }
        '#armActions':
          mwc-button:
            $: |
              #button > span.slot-container{
                color: transparent;
                position: absolute;    
              }
              #button{
                width: 150px;
                border-radius: 21px;
              }
              #button > span.slot-container::before{
                color: var(--mdc-theme-primary, #6200ee);
                content: "Désactiver";
                margin: 0 0 0 50%;
              }
        '#keypad':
          mwc-button:
            $: |
              #button{
                border-radius: 12px
              }
    conditions:
      - entity: alarm_control_panel.alarme_pour_creation_de_service
        state_not: disarmed
    type: conditional

[BarTouZ]

Bonjour à tous,
J4ai découvert votre forum grâce au post sur Minimalist sur le forum officiel de HomeAssistant.
J’ai été bluffé car l’ergonomie apportée par ce mod, c’est tout simplement design, classe, top quoi !
Merci !

J’ai juste une question concernant les couleurs,

Quand j’utilise le script par défaut pour une lampe ou un switch, lorsque j’allume la lampe, mon icone reste éteinte.

entity: light.lumi_lumi_light_aqcn02_6ba82c05_level_light_color_on_off
name: Salon
template:
  - icon_info_bg
  - light
type: custom:button-card

Je vois que c’est le template « jaune » qui est appelé

  jaune:
    state:
      - styles:
          icon:
            - color: rgba(var(--couleur-jaune),1)
          img_cell:
            - background-color: rgba(var(--couleur-jaune), 0.2)
        value: 'on'

et que pour la couleur c’est cette ligne là

color: rgba(var(--couleur-jaune),1)

Apparemment, dans ma configuration RGBA ne fonctionne ça…

Ma question : faut-il installer un package ou faut-il faire quelque chose de particulier pour que ça fonctionne ?

D’avance merci

[M_nu62880]

Bonjour la couleur est défini dans le thème.
3 solutions:

• tu utilises le thème de tben
• tu ajoutes les codes couleurs dans ton thème
• tu remplaces --couleur-vert directement par le code rgba que tu veux

[BarTouZ]

Merci pour ta réponse,

Je viens d’importer les thèmes et effectivement, tout fonctionne parfaitement !

Merci

[BarTouZ]

@BarTouZ

var(--couleur-jaune)

Juste une petite question, il est possible d’ajouter uniquement

      #Couleurs
      google-red-500 : '#F54436'
      google-green-500 : '#01C852'
      google-yellow-500 : '#FF9101'
      google-blue-500 : '#3D5AFE'
      google-violet-500 : '#661FFF'
      google-grey-500: '#BBBBBB'
      couleur-rouge : 245, 68, 54
      couleur-vert : 1, 200, 82
      couleur-jaune : 255, 145, 1
      couleur-bleu : 61, 90, 254
      couleur-violet : 102, 31, 255
      couleur-gris : 187, 187, 187
      couleur-rose : 233, 30, 99
      couleur-theme : 255,255,255 

au thème par défaut de HA ?
Comment je pourrais juste ajouter ces références à mon LoveLace-ui d’origine ?

[Clemalex]

@BarTouZ

Comment je pourrais juste ajouter ces références à mon LoveLace-ui d’origine ?

Tu ajoutes le thème et tu ne gardes que ce que tu veux.

Le thème outrepasse tout le thème par défaut et par conséquent, les valeur du thème de base sont conservées tant que tu n’y fais pas références dans ton thème.

Mais dès l’instant où tu crée un thème tu dois le sélectionner dans le profil utilisateur.

[BarTouZ]

Merci pour ta réponse Clemalex, je dois rater quelque chose car quand je déclare comme ceci :

configuration.yaml

frontend: 
  themes: !include themes.yaml

themes.yaml

lovelace:
  !include themes/lovelace.yaml

lovelace.yaml

#Couleurs

  google-red-500 : '#F54436'

  google-green-500 : '#01C852'

  google-yellow-500 : '#FF9101'

  google-blue-500 : '#3D5AFE'

  google-violet-500 : '#661FFF'

  google-grey-500: '#BBBBBB'

  couleur-rouge : 245, 68, 54

  couleur-vert : 1, 200, 82

  couleur-jaune : 255, 145, 1

  couleur-bleu : 61, 90, 254

  couleur-violet : 102, 31, 255

  couleur-gris : 187, 187, 187

  couleur-rose : 233, 30, 99

  couleur-theme : 255,255,255

Effectivement, les « raccourcis » de couleur fonctionnent bien mais… mon thème principal est clair plutôt que sombre … Il y a une astuce ?

Si pas, je me résigne à avoir le thème de tben en rouge …

Merci d’avance pour ta réponse

[Clemalex]

@BarTouZ

Effectivement, les « raccourcis » de couleur fonctionnent bien mais… mon thème principal est clair plutôt que sombre … Il y a une astuce ?

Si pas, je me résigne à avoir le thème de tben en rouge …

Fait une capture d’écran pour voir ?

[barto_95]

@Clemalex tu pourrais expliquer ce qu’il a voulu faire avec ceci :

thermostat:
    hold_action:
      action: more-info
      entity: input_boolean.radiateur_arret_force
    label: |-
      [[[ 
          if (entity.state =='off'){
            return 'Off' ;
          }else{
            if (states['light.qubino'].state == 'on'){
              var etat = "Chauffe";
            }else{
              var etat = "Inactif";
            }
            return (entity.attributes.temperature ) + '°' + ' • ' + etat ;
          }
      ]]]
    styles:
      icon:
        - color: |
            [[[
               if (states['light.qubino'].state == 'on')
                 return 'rgba(var(--couleur-rouge),1)'
               else
                 return 'rgba(var(--couleur-theme),0.2)'
            ]]]
      img_cell:
        - background-color: |
            [[[
               if (states['light.qubino'].state == 'on')
                 return 'rgba(var(--couleur-rouge),0.2)'
               else
                 return 'rgba(var(--couleur-theme),0.05)'
            ]]]```

[Clemalex]

@barto_95

tu pourrais expliquer ce qu’il a voulu faire avec ceci :

Ça :

GitHub - TBens/lovelace-ui-minimalist: 🌻 Lovelace UI • Minimalist

[BarTouZ]

Bonjour,

Désolé pour le délai…

avec ce contenu de lovalace.yaml

      box-shadow: 'none'
      border-color: 'var(--card-background-color)'
      border-radius: '12px'
      sidebar-icon-color: 'rgba(255, 255, 255, 0.6)'
      primary-color: '#EF5350'
      light-primary-color: '#EF5350'
      accent-color: '#EF5350'
      #Icon
      paper-item-icon-color: '#ffffff'
      #Checkbox
      paper-toggle-button-checked-ink-color: '#ef5350'
      paper-toggle-button-checked-button-color: '#ef5350'
      paper-toggle-button-checked-bar-color: '#ef5350'
      #Sidebar
      sidebar-selected-text-color: '#ef5350'
      sidebar-text-color: 'rgba(255, 255, 255, 0.6)'
      sidebar-selected-icon-color: '#ef5350'
      sidebar-selected-background-color: '#ef5350'
      #Slider
      slider-color: '#d93025'
      slider-bar-color: '#fce8e6'
      #Background
      secondary-background-color: '#2D2D2D'
      card-background-color: '#2D2D2D'
      primary-background-color: '#121212'
      # paper-dialog-background-color: 'var(-secondary-background-color)'
      # more-info-header-background: 'var(-secondary-background-color)'
      #Texte
      primary-text-color: 'rgba(255, 255, 255, 0.87)'
      secondary-text-color: 'rgba(255, 255, 255, 0.6)'
      text-primary-color: 'rgba(255, 255, 255, 0.6)'
      #Divider
      divider-color: 'rgba(255, 255, 255, 0)'
      
      paper-card-header-color: 'rgba(255, 255, 255, 0.87)'
      
      paper-toast-background-color: '#ffffff'
      paper-toast-color: '#2d2d2d'
      
      #Custom header
      couleur-header : 12,12,12
      # ch-background: 'var(--couleur-header)'
      paper-card-background-color: 'var(--card-background-color)'
      
      #Couleurs
      google-red-500 : '#F54436'
      google-green-500 : '#01C852'
      google-yellow-500 : '#FF9101'
      google-blue-500 : '#3D5AFE'
      google-violet-500 : '#661FFF'
      google-grey-500: '#BBBBBB'
      couleur-rouge : 245, 68, 54
      couleur-vert : 1, 200, 82
      couleur-jaune : 255, 145, 1
      couleur-bleu : 61, 90, 254
      couleur-violet : 102, 31, 255
      couleur-gris : 187, 187, 187
      couleur-rose : 233, 30, 99
      couleur-theme : 255,255,255 

voici le résultat :

En mettant juste

      # box-shadow: 'none'
      # border-color: 'var(--card-background-color)'
      # border-radius: '12px'
      # sidebar-icon-color: 'rgba(255, 255, 255, 0.6)'
      # primary-color: '#EF5350'
      # light-primary-color: '#EF5350'
      # accent-color: '#EF5350'
      # #Icon
      # paper-item-icon-color: '#ffffff'
      # #Checkbox
      # paper-toggle-button-checked-ink-color: '#ef5350'
      # paper-toggle-button-checked-button-color: '#ef5350'
      # paper-toggle-button-checked-bar-color: '#ef5350'
      # #Sidebar
      # sidebar-selected-text-color: '#ef5350'
      # sidebar-text-color: 'rgba(255, 255, 255, 0.6)'
      # sidebar-selected-icon-color: '#ef5350'
      # sidebar-selected-background-color: '#ef5350'
      # #Slider
      # slider-color: '#d93025'
      # slider-bar-color: '#fce8e6'
      # #Background
      # secondary-background-color: '#2D2D2D'
      # card-background-color: '#2D2D2D'
      # primary-background-color: '#121212'
      # # paper-dialog-background-color: 'var(-secondary-background-color)'
      # # more-info-header-background: 'var(-secondary-background-color)'
      # #Texte
      # primary-text-color: 'rgba(255, 255, 255, 0.87)'
      # secondary-text-color: 'rgba(255, 255, 255, 0.6)'
      # text-primary-color: 'rgba(255, 255, 255, 0.6)'
      # #Divider
      # divider-color: 'rgba(255, 255, 255, 0)'
      
      # paper-card-header-color: 'rgba(255, 255, 255, 0.87)'
      
      # paper-toast-background-color: '#ffffff'
      # paper-toast-color: '#2d2d2d'
      
      # #Custom header
      # couleur-header : 12,12,12
      # # ch-background: 'var(--couleur-header)'
      # paper-card-background-color: 'var(--card-background-color)'
      
      #Couleurs
      google-red-500 : '#F54436'
      google-green-500 : '#01C852'
      google-yellow-500 : '#FF9101'
      google-blue-500 : '#3D5AFE'
      google-violet-500 : '#661FFF'
      google-grey-500: '#BBBBBB'
      couleur-rouge : 245, 68, 54
      couleur-vert : 1, 200, 82
      couleur-jaune : 255, 145, 1
      couleur-bleu : 61, 90, 254
      couleur-violet : 102, 31, 255
      couleur-gris : 187, 187, 187
      couleur-rose : 233, 30, 99
      couleur-theme : 255,255,255 

Voici le résultat :

Si je sélectionne le theme default, ça revient en mode sombre mais sans la prise en compte des variables de lovelace.yaml forcément…

J’aurais aimé garder le thème sombre d’origine HA et simplement intégrer un fichier de surcharge CSS pour tenir compte d eces variables… Vous voyez ce que je veux faire ?

Merci

[Clemalex]

@BarTouZ

Vous voyez ce que je veux faire ?

Oui…

Je pense que le mieux est de faire un thème sombre de minimalist…

Toutes les couleurs sont déjà défini dans la source d’inspiration de l’auteur

[BarTouZ]

@Clemalex,

Je suis exactement arrivé à la même conclusion …

Je remplacerai le rouge par les couleurs d’origine de HA grâce à la pipette magique de Paint.Net …

En tout cas, merci pour ta précieuse aide !

[Steningalive]

Salut à tous,

Jusqu’ici j’ai réussi à mettre en place dashboard sans trop de problèmes mais je vois que @Clemalex partage pas mal de templates qui m’interessent beaucoup. La question est : Je peux ajouter le code à la suite des autres dans le fichier button card templates ?

Merci pour le retour,

Excellente journée,
sven

[Clemalex]

@BarTouZ

Je remplacerai le rouge par les couleurs d’origine de HA

Il suffit de supprimer dans le thème la couleur que tu ne veux pas et elle reprendra sa couleur d’origine

[Clemalex]

@Steningalive

La question est : Je peux ajouter le code à la suite des autres dans le fichier button card templates ?

A la suite, ou avant, tant que l’indentation est respectée et que tu es toujours sous la clé button-card-template

[Greg-au-riz]

salut,

J’ai un petit soucis avec la card lights, elle fonctionne bien avec les lumières Hue mais pas avec celles de Legrand. je peux les allumer mais pas les éteindre et je n’ai pas de retour d’état

Voici les attributs pour les lumières Legrand

supported_color_modes:
  - onoff
eliot:HardwareType: NLM
core:FirmwareRevisionState: 42
core:OnOffState: 'off'
friendly_name: Entree
supported_features: 0