Dashboard - đŸŒ» Minimalist

Oui c’est le fonctionnement normal de la carte Alarme :wink:

Je n’ai pas modifiĂ© le comportement de la carte, seulement sont style;

Si tu rencontre un problĂšme, essaye avec une carte sans modification et ajoute petit Ă  petit les modifications :+1:

Salut
Pourrais tu me montrer ta carte aspiro complÚte? car je ne sais pas comment tu as fait pour avoir les 3 boutons au dessus du réglages de ventilateur. merci

Toujours pas fait le nettoyage mais je suis partie de la carte cover.

Ce soir je posterais :+1:

J’ai trouvĂ© pourquoi la carte alarme ne fonctionnait pas. J’avais mis un code Ă  l’alarme.

Ah oui ! Le fait que je cache le code de l’alarme empĂȘche de le rentrer si tu en as mis un Ă  l’activation de l’alarme :upside_down_face:

1 « J'aime »

Modification d’une carte postĂ© par un autre membre :

J’ai retravaillĂ© la carte pour afficher la couleur de l’ampoule dans l’icone (la luminositĂ© est prise en compte Ă©galement)

Et j’ai retravaillĂ© les couleurs et le style pour la faire correspondre Ă  une carte prĂ©sente dans le thĂšme original :+1:
Prenez ou non :wink:

animate

#cards
type: grid
cards:
  - entity: light.salon_lampe_01
    template:
      - light_buttons_with_colors
    type: custom:button-card
    variables:
      entity: light.salon_lampe_01
      name: Salon
  - entity: light.salon_lampe_01
    template:
      - light_buttons_with_colors_light
    type: custom:button-card
    variables:
      entity: light.salon_lampe_01
      name: Salon
columns: 2
square: false
#templates
button_card_templates:
  list_items_light:
    styles:
      card:
        - box-shadow: none
        - padding: 0px
      grid:
        - grid-template-areas: '"item1 item2"'
        - grid-template-columns: 2fr 1fr
        - grid-template-rows: min-content
        - column-gap: 7px
  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'
  light_buttons_with_colors_light:
    show_name: false
    show_icon: false
    variables:
      entity: light.default
      name: LumiĂšre
    styles:
      card:
        - border-radius: 20px
        - box-shadow: var(--box-shadow)
        - padding: 12px
      grid:
        - grid-template-areas: '"item1" "item2"'
        - grid-template-columns: 1fr
        - grid-template-rows: min-content  min-content
        - row-gap: 12px
    custom_fields:
      item1:
        card:
          entity: '[[[ return variables.entity ]]]'
          name: '[[[ return variables.name ]]]'
          tap_action:
            action: call-service
            service: light.toggle
            service_data:
              entity_id: '[[[ return variables.entity ]]]'
          template:
            - icon_info
            - light_with_colors
          type: custom:button-card
      item2:
        card:
          template: list_items_light
          type: custom:button-card
          custom_fields:
            item1:
              card:
                type: custom:slider-card
                entity: '[[[ return variables.entity ]]]'
                radius: 12px
                height: 42px
                thumbColorOff: rgba(var(--couleur-theme),0.2)
                mainSliderColorOff: rgb(var(--couleur-theme),0.2)
                secondarySliderColorOff: var(--google-grey-500)
                mainSliderColor: rgb(var(--couleur-gris-light))
                thumbColor: rgb(var(--couleur-gris-light))
                secondarySliderColor: var(--google-grey-500)
                card_mod:
                  style: |
                    ha-card {
                      border-radius: 14px;
                    }
                    div {
                      border: 2px solid var(--google-grey-500);
                      border-radius: 14px !important;
                      box-sizing: border-box;
                      position: relative;
                    }
            item2:
              card:
                icon: mdi:palette
                tap_action:
                  action: more-info
                type: custom:button-card
                entity: '[[[ return variables.entity ]]]'
                template: widget_icon
  light_buttons_with_colors:
    show_name: false
    show_icon: false
    variables:
      entity: light.default
      name: LumiĂšre
    styles:
      card:
        - border-radius: 20px
        - box-shadow: var(--box-shadow)
        - padding: 12px
      grid:
        - grid-template-areas: '"item1" "item2"'
        - grid-template-columns: 1fr
        - grid-template-rows: min-content  min-content
        - row-gap: 12px
    custom_fields:
      item1:
        card:
          entity: '[[[ return variables.entity ]]]'
          name: '[[[ return variables.name ]]]'
          tap_action:
            action: call-service
            service: light.toggle
            service_data:
              entity_id: '[[[ return variables.entity ]]]'
          template:
            - icon_info
            - light_with_colors
          type: custom:button-card
      item2:
        card:
          template: list_items_light
          type: custom:button-card
          custom_fields:
            item1:
              card:
                type: custom:slider-card
                entity: '[[[ return variables.entity ]]]'
                radius: 14px
                height: 42px
                mainSliderColorOff: var(--google-grey-500)
                secondarySliderColor: rgba(var(--couleur-theme),0.05)
                secondarySliderColorOff: rgba(var(--couleur-theme),0.05)
                thumbColorOff: white
            item2:
              card:
                icon: mdi:palette
                tap_action:
                  action: more-info
                type: custom:button-card
                entity: '[[[ return variables.entity ]]]'
                template: widget_icon

Il reste Ă  optimiser le code en combinant les templates

2 « J'aime »

Bonjour, Le créateur du thÚme Minimalist a posté sa configuration sur Github.
https://github.com/TBens/lovelace-ui-minimalist

Pas mal merci pour le partage mais, comment faire si ta un bouton pour on/off et que l’ampoule est une hue ? pour avoir le slider indĂ©pendant ?

Et en plus j’ai une entitĂ© en dur dans mon template ! (copier/merder)


Je comprends ta question. Je te ferais un template pour le cas.

Mais qu’est-ce que ça change que ce soit une hue ou une xiaomi ou lidl ?

sa ne change rien, quand ta un bouton sonof pour l’allumer et l’ampoule c’est une hue les entity sont pas les mĂȘme, et puis nĂŁo me irrite

[image]

1 « J'aime »

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

Avec button-card et une automation :wink:

animate

Template du Back Button :

button_card_templates:
  return_button:
    template: pilule
    show_icon: true
    show_name: true
    icon: mdi:arrow-left
    size: 80%
    styles:
      grid:
        - grid-template-areas: '"i"'
    tap_action:
      action: toggle
    entity: input_boolean.back
    name: |
      [[[ 
       if (entity.state == 'on') {history.back() ;}
      ]]] 

automation :

alias: Bouton Retour
description: ''
trigger:
  - platform: state
    entity_id: input_boolean.back
    to: 'on'
condition: []
action:
  - service: input_boolean.turn_off
    target:
      entity_id: input_boolean.back
mode: single

carte :

template: return_button
type: custom:button-card
1 « J'aime »

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

2eme onglet 4eme onglet 3 eme onglet et que tu appuis sur retour tu passe bien dans meme sens inverse ?

:point_down:


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

image

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
1 « J'aime »

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

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
1 « J'aime »

Merci pour ta réponse,

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

Merci

2 messages ont été scindés en un nouveau sujet : :crossed_swords: YAML ou Graphique?

Un message a été scindé en un nouveau sujet : :see_no_evil: Option NABU CASA disparue

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 ?