Dashboard - 🌻 Minimalist

[Galadan]

Hello,

Merci beaucoup!! La version c’est ce que je cherchais en effet! C’est top!
Et pour que lorsque c’est pas actif cela reste grisé? Comme pour un bouton d’une lumière en fait.

Merci encore!

Edit:
@samg23 , comment je peux changer l’icone en fonction de l’état du booléen? Je vois ce que je doit faire mais je ne sais pas ou dans la card…

[Galadan]

Hello,

Pour la custom card « Person Info Card », quelqu’un peu m’aider pour la partie driving et temps de trajet, j’ai pas compris ce que je doit utiliser/créer…

https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_person_info/

Merci

[thibbocli]

Hello,
j’ai pas mal cherché pour faire fonctionner cette carte comme je le voulais.
Ce que j’ai fais pour la partie driving c’est que j’ai créé un sensor template dans mon configuration.yaml pour vérifier si mon téléphone est connecté au bluetooth de ma voiture comme ceci :

- platform: template
  sensors:
    me_in_car:
      friendly_name: me in car
      unique_id: me_in_car
      value_template: >-
        {% if state_attr('sensor.telephone_bluetooth_connection','connected_paired_devices')!=None and 'B0:0B0:B0:B0:B0:B0' in state_attr('sensor.telephone_bluetooth_connection','connected_paired_devices') %}
          on
        {% else %}
          off
        {% endif %}

l’adresse MAC à mettre etant celle du bluetooth de la voiture et évidemment il faut activer ce capteur dans l’application home assistant

Pour le temps de trajet j’ai ajouté le service waze temps de trajet entre la position de mon téléphone et mon domicile. Le service expose un sensor. Dans cet exemple je l’ai appelé me_to_home

et voici le résultat pour l’utilisation de la carte dans mon dashboard :

  - type: horizontal-stack
    cards:
      - type: "custom:button-card"
        template: card_person_info
        variables:
          ulm_card_person_entity: person.me
          ulm_card_person_use_entity_picture: true
          ulm_card_person_zone1: zone.travail
          ulm_multiline: true
          ulm_card_person_driving_entity: sensor.me_in_car
          ulm_card_person_commute_entity: sensor.me_to_home 
          ulm_card_person_commute_icon: mdi:car
          ulm_card_person_battery_entity: sensor.telephone_battery_level
          ulm_card_person_battery_state_entity: sensor.telephone_battery_state

j’espère que ca pourra t’aider

[Galadan]

Merci!
Moi j’ai un iPhone, j’ai pas le sensor du BT, mais peut-être que le sensor.connection_type fait le taf?
Tu pense que l’on peu ajouter dans le label par exemple la dernière fois que l’iPhone à synchro son emplacement?

Edit: Non le sensor détecte juste si Wifi ou cellulaire…
Du coup je ne sais pas comment faire… Peut-être avec la sortie d’une zone?
Ou jouer avec ça:

[Galadan]

Pour info, j’utilise bien le « Activity Sensor » pour un iPhone, il faut juste changer dans la custom_card la partie label en modifiant le state de la variable driving à « Automotive », voici le bout du code:

label: >
    [[[
      if (variables.ulm_address !== ''){
        return states[variables.ulm_address].state;
      } else if (states[variables.ulm_card_person_driving_entity].state === "Automotive") {
        let state = states[variables.ulm_card_person_entity].state;
        return `Conduit - ${variables["ulm_person_state_" + state] ? variables["ulm_person_state_" + state] : state}`;
      } else {
        let state = states[variables.ulm_card_person_entity].state;
        return variables["ulm_person_state_" + state] ? variables["ulm_person_state_" + state] : state;
      }
    ]]]

Il faut faire la même modif partout ou il y a le variables.ulm_card_person_driving_entity (3 endroits).

La ou j’ai besoin d’un coup de pouce c’est pour ajouter sur la même ligne (ou colonne suivant la config) l’heure de la dernière synchro du téléphone.
Je sais pas ou récupérer cette donnée déjà, quelqu’un sait?

[samg23]

Salut tout le monde !

Si ca vous intéresse, j’ai créer des cartes pour les intégrations : « Plex Recently Added », « Sonarr Upcoming Media » et « Radarr Upcoming Media ».

Pour la carte Plex :
Cette carte a besoin des éléments suivants pour fonctionner correctement :

Intégration	Requis
Plex Recently Added	oui

Utilisation :

- type: custom:button-card
  template: "card_plex_recently_added"
  entity: sensor.plex_recently_added
  name: Récemment ajouté

---

Pour la carte Sonarr :
Cette carte a besoin des éléments suivants pour fonctionner correctement :

Intégration	Requis
Sonarr Upcoming Media	oui

Utilisation :

- type: custom:button-card
  template: "card_sonarr_upcoming"
  entity: sensor.sonarr_upcoming_media
  variables:
    ulm_card_upcoming_media: 1

Variables :

Variable	Exemple	Requis	Explication
ulm_card_upcoming_media	3	oui	Le numéro de l'élément à afficher

---

Pour la carte Radarr :
Cette carte a besoin des éléments suivants pour fonctionner correctement :

Intégration	Requis
Radarr Upcoming Media	oui

Utilisation :

- type: custom:button-card
  template: "card_radarr_upcoming"
  entity: sensor.radarr_upcoming_media
  variables:
    ulm_card_upcoming_media: 1

Variables :

Variable	Exemple	Requis	Explication
ulm_card_upcoming_media	2	oui	Le numéro de l'élément à afficher

Le code du template pour les trois cartes :

card_media:
  show_icon: false
  show_name: true
  show_label: true
  show_state: false
  styles:
    grid:
      - grid-template-areas: '"n n" "l l"'
      - grid-template-columns: min-content auto
      - grid-template-rows: min-content min-content
    card:
      - z-index: 0
      - border-radius: var(--border-radius)
      - box-shadow: var(--box-shadow)
      - background-size: cover
      - background-position: center center
      - text-shadow: >
          [[[ return entity == "undefined" ? 'none' : '1px 1px 5px rgba(18, 22, 23, 0.9)'; ]]]
    name:
      - z-index: 2
      - color: white
      - font-weight: bold
      - font-size: 14px
    label:
      - z-index: 2
      - color: white
      - font-weight: bold
      - font-size: 12px
      - filter: opacity(60%)

card_plex_recently_added:
  triggers_update: "all"
  template:
    - "card_media"
    - "ulm_language_variables"
  label: >
    [[[
      if (entity == "unavailable"){
        return variables.ulm_unavailable;
      } else if (entity == "undefined"){
        return variables.ulm_unknow;
      } else{
        var data = entity.attributes.data;
        var number = (data[1].number == undefined) ? '(' + data[1].aired.split('-')[0] + ')' : data[1].number;
        return `${data[1].title} ${number}`;
      }
    ]]]
  aspect_ratio: 5/2
  styles:
    grid:
      - grid-template-areas: '"icon ." "n n" "l l" ". ."'
      - grid-template-rows: auto repeat(2, min-content) 12px
    card:
      - padding: 0
      - background-image: >
          [[[ return entity === undefined || `url(${states[entity.entity_id].attributes.data[1].fanart})`; ]]]
    name:
      - align-self: end
      - justify-self: start
      - margin-left: 12px
    label:
      - align-self: start
      - justify-self: start
      - margin-left: 12px
    custom_fields:
      icon:
        - z-index: 2
        - align-self: start
        - justify-self: start
        - height: 24px
        - width: 24px
        - margin-left: 12px
        - margin-top: 12px
      blur:
        - z-index: 1
        - position: absolute
        - top: 0
        - left: 0
        - height: 100%
        - width: 100%
        - border-radius: var(--border-radius)
        - background: linear-gradient(rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 100%)
  custom_fields:
    icon: >
      <svg viewBox="0 0 50 50">
        <path d="M7.7.3h34.6c4.1 0 7.4 3.3 7.4 7.4v34.6c0 4.1-3.3 7.4-7.4 7.4H7.7c-4.1 0-7.4-3.3-7.4-7.4V7.7C.3 3.6 3.6.3 7.7.3z" fill="#282a2d"/>
        <path d="M25,7.1H14.6L25,25L14.6,42.9H25L35.4,25L25,7.1z" fill="#e5a00d"/>
      </svg>
    blur: >
      [[[ return entity === undefined ? null : '<div id="blur"></div>'; ]]]
  tap_action:
    action: none

card_upcoming_media:
  aspect_ratio: 3/4
  styles:
    card:
      - background-image: >
            [[[ return entity === undefined || `url(${states[entity.entity_id].attributes.data[variables.ulm_card_upcoming_media].poster})`; ]]]
    grid:
      - grid-template-areas: '". . ." ". n ." ". l ." ". . ."'
      - grid-template-columns: "8px 1fr 8px"
      - grid-template-rows: auto repeat(2, min-content) 8px
    name:
      - align-self: end
      - justify-self: center
      # - display: inline
      # - max-width: 95%
      # - max-width: 200px
    label:
      - align-self: start
      - justify-self: center
    custom_fields:
      blur:
        - z-index: 1
        - position: absolute
        - top: 0
        - left: 0
        - height: 100%
        - width: 100%
        - border-radius: var(--border-radius)
        - background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.8) 100%)
  extra_styles: >
    .ellipsis:not(#blur){
      white-space: normal !important;
      word-wrap: break-all;
      max-height: 2.4em;
      line-height: 1.2em;
    }
  custom_fields:
    blur: >
      [[[ return entity === undefined ? null : '<div id="blur"></div>'; ]]]

card_sonarr_upcoming:
  triggers_update: "all"
  template:
    - "card_media"
    - "card_upcoming_media"
    - "ulm_language_variables"
  variables:
    ulm_card_upcoming_media: 1
  label: >
    [[[
      var data = entity.attributes.data;
      var airdate = new Date(data[variables.ulm_card_upcoming_media].airdate);

      Date.prototype.addDays = function (days) {
        const date = new Date(this.valueOf());
        date.setDate(date.getDate() + days);
        return date;
      }

      function formatDate(date){
        var weekday = ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'];
        var now = new Date();
        var tomorrow = now.addDays(1);

        var time = date - now;
        var secs = parseInt((time / 1000), 10);
        var days = Math.floor(secs / (3600*24));

        if (days < 6){
          if (weekday[date.getDay()] == weekday[now.getDay()]){
            return "Aujourd'hui";
          } else if (weekday[date.getDay()] == weekday[tomorrow.getDay()]){
            return "Demain";
          } else{
            return weekday[date.getDay()];
          }
        } else{
          return date.toLocaleDateString("fr-FR");
        }
      }
      return formatDate(airdate);
    ]]]
  name: >
    [[[
      if (entity == "unavailable"){
        return variables.ulm_unavailable;
      } else if (entity == "undefined"){
        return variables.ulm_unknow;
      } else{
        var data = entity.attributes.data;
        var number = data[variables.ulm_card_upcoming_media].number;
        return `${data[variables.ulm_card_upcoming_media].title} - ${number}`;
      }
    ]]]
  
card_radarr_upcoming:
  triggers_update: "all"
  template:
    - "card_media"
    - "card_upcoming_media"
    - "ulm_language_variables"
  variables:
    ulm_card_upcoming_media: 1
  label: >
    [[[
      var data = entity.attributes.data;
      var release = data[variables.ulm_card_upcoming_media].release;
      var airdate = new Date(data[variables.ulm_card_upcoming_media].airdate);

      Date.prototype.addDays = function (days) {
        const date = new Date(this.valueOf());
        date.setDate(date.getDate() + days);
        return date;
      }

      function formatRelease(release){
        if(release.includes("Available")){
          return ""
        } else if (release.includes("In Theaters")){
          return "au cinéma"
        }
      }
      
      function formatDate(date){
        var weekday = ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'];
        var now = new Date();
        var tomorrow = now.addDays(1);

        var time = date - now;
        var secs = parseInt((time / 1000), 10);
        var days = Math.floor(secs / (3600*24));

        if (days < 6){
          if (weekday[date.getDay()] == weekday[now.getDay()]){
            return "Aujourd'hui";
          } else if (weekday[date.getDay()] == weekday[tomorrow.getDay()]){
            return "Demain";
          } else{
            return weekday[date.getDay()];
          }
        } else{
          return date.toLocaleDateString("fr-FR");
        }
      }
      return formatDate(airdate) + " " + formatRelease(release);
    ]]]
  name: >
    [[[
      if (entity == "unavailable"){
        return variables.ulm_unavailable;
      } else if (entity == "undefined"){
        return variables.ulm_unknow;
      } else{
        var data = entity.attributes.data;
        return `${data[variables.ulm_card_upcoming_media].title}`;
      }
    ]]]

[Galadan]

Hello,

Depuis la dernière maj, je n’ai plus les couleurs dans mes icones, exemple avec la card_graph:

J’ai modifié pour les noms mais je trouve pas pour la couleur…
Voici le code de la card:

### Card Graph Custom ###
custom_card_graph_solo:
  variables:
    ulm_card_graph_color: "var(--info-color)"
    ulm_card_graph_name: "n/a"
    ulm_card_graph_color2: "var(--info-color)"
    ulm_card_graph_hours: 48
    ulm_card_graph_type: "fill"
  triggers_update: "all"
  styles:
    grid:
      - grid-template-areas: "'item1' 'item2'"
      - grid-template-columns: "1fr"
      - grid-template-rows: "min-content  min-content"
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "0px"
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template:
          - "card_generic_swap"
        styles:
          icon:
            - color: "rgba(219,68,55, 1)"
          img_cell:
            - background-color: "rgba(219,68,55, 0.20)"
          card:
            - box-shadow: "none"
            - border-radius: "var(--border-radius) var(--border-radius) 0px 0px"
            - padding: "10px"
        entity: "[[[ return variables.ulm_card_graph_entity ]]]"
        name: "[[[ return variables.ulm_card_graph_name ]]]"
    item2:
      card:
        type: "custom:mini-graph-card"
        entities: >
          [[[
            var ent = [];
            ent.push(variables.ulm_card_graph_entity);
            return ent;
          ]]]
        line_color: >
          [[[
            var col = [];
            col.push(variables.ulm_card_graph_color);
            return col;
          ]]]
        show:
          name: false
          icon: false
          legend: false
          state: false
          extrema: true
          graph: "[[[ return variables.ulm_card_graph_type=='fill'?'line':variables.ulm_card_graph_type; ]]]"
          fill: "[[[ return variables.ulm_card_graph_type=='fill'?true:false; ]]]"
        hours_to_show: "[[[ return variables.ulm_card_graph_hours; ]]]"
        hour24: true
        style: |
          ha-card {
            box-shadow: none;
            border-radius: var(--border-radius);
          }

Et le code du dashboard:

              - type: custom:button-card
                template: custom_card_graph
                variables:
                  ulm_card_graph_color: "var(--google-red)"
                  ulm_card_graph_name: Salon
                  ulm_card_graph_entity: sensor.netatmo_galahome_galastation_temperature
                  ulm_card_graph_color2: "var(--google-blue)"
                  ulm_card_graph_entity2: sensor.netatmo_galahome_galastation_humidity
                  ulm_card_graph_type: fill
                  ulm_card_graph_hours: 48
                custom_fields:
                  item2:
                    card:
                      hours_to_show: 48
                      hour24: true
                      show:
                        extrema: true

Une idée?

[pascal_ha]

Bonjour

Je voudrais créer un bouton dans interface ui-minimalist pour un input_number (offset)

Je suis arrivé a ce résultat

code

type: custom:button-card
aspect_ratio: 3/1
show_state: true
template:
  - icon_info_bg
styles:
  card:
    - background-color: white
    - border-radius: 10%
    - filter: opacity(100%)
    - padding: 2px
    - text-transform: null
    - font-size: 12px
    - border: 2px solid var(--google-yellow)
  icon:
    - color: orange
entity: input_number.volets_auto_offset_ouvre

Mais j’aurais voulu avoir la barre de réglage, pour avoir un bouton qui ressemble a ceci :

cela est il possible ? si oui comment faut il faire.

Merci pour votre aide

Voila j’ai finalement réussi a faire ma carte input_number, je sais pas si cela sera utile pour d’autre, mais voici le résultat et les codes.

Voici le template utilisé :

Code Template

  card_input_number_round:
    variables:
      ulm_card_input_number_name: '[[[ return entity.attributes.friendly_name ]]]'
    triggers_update: all
    show_icon: false
    show_label: false
    show_state: false
    show_name: false
    styles:
      grid:
        - grid-template-areas: '''item1'' ''item2'''
        - grid-template-columns: 1fr
        - grid-template-rows: min-content  min-content
        - row-gap: 12px
      card:
        - border-radius: var(--border-radius)
        - box-shadow: var(--box-shadow)
        - padding: 12px
    custom_fields:
      item1:
        card:
          type: custom:button-card
          template:
            - icon_info_round
            - input_number
          tap_action:
            action: more-info
          entity: '[[[ return entity.entity_id ]]]'
          name: '[[[ return variables.ulm_card_input_number_name ]]]'
      item2:
        card:
          type: custom:button-card
          template: list_3_items
          custom_fields:
            item1:
              card:
                type: custom:button-card
                template: widget_icon_round
                tap_action:
                  action: call-service
                  service: |
                    [[[
                      if( entity.entity_id.startsWith("input_number.") )
                        return "input_number.decrement";
                      if( entity.entity_id.startsWith("counter.") )
                        return "counter.decrement";
                      return "";
                    ]]]
                  service_data:
                    entity_id: '[[[ return entity.entity_id ]]]'
                icon: mdi:minus-thick
            item2:
              card:
                type: custom:button-card
                template: widget_text_round
                entity: '[[[ return entity.entity_id ]]]'
                tap_action:
                  action: call-service
                  service: cover.stop_cover
                  service_data:
                    entity_id: '[[[ return entity.entity_id ]]]'
            item3:
              card:
                type: custom:button-card
                template: widget_icon_round
                tap_action:
                  action: call-service
                  service: |
                    [[[
                      if( entity.entity_id.startsWith("input_number.") )
                        return "input_number.increment";
                      if( entity.entity_id.startsWith("counter.") )
                        return "counter.increment";
                      return "";
                    ]]]
                  service_data:
                    entity_id: '[[[ return entity.entity_id ]]]'
                icon: mdi:plus-thick
  widget_text_round:
    tap_action:
      action: toggle
    template: widget_icon_round
    show_icon: false
    show_label: true
    show_state: false
    show_name: false
    label: |
      [[[
        var test = Math.trunc(entity.state);
        return test;
      ]]]
    styles:
      grid:
        - grid-template-areas: '''l'''
      card:
        - box-shadow: none
        - padding: 0px
        - border-radius: 14px
        - place-self: center
        - height: 42px
      label:
        - color: rgba(var(--color-theme),0.9)
        - box-shadow: none
        - padding: 0px
        - background-color: rgba(var(--color-theme),0.05)
        - border-radius: 14px
        - height: 42px
        - width: 90px
        - justify-self: center
        - font-weight: bold
        - font-size: 30px
      size: 20px
      color: var(--google-grey)
  widget_icon_round:
    tap_action:
      action: toggle
    show_icon: true
    show_name: false
    styles:
      grid:
        - grid-template-areas: '"i"'
      card:
        - box-shadow: none
        - padding: 0px
        - background-color: rgba(var(--color-theme),0.05)
        - border-radius: 14px
        - place-self: center
        - height: 42px
      icon:
        - color: rgba(var(--color-theme),0.9)
    size: 20px
    color: var(--google-grey)
  icon_info_round:
    color: var(--google-grey)
    show_icon: true
    show_name: true
    show_label: true
    size: 20px
    custom_fields:
      notification: |
        [[[
          if (entity.state =='unavailable'){
            return `<ha-icon icon="mdi:exclamation" style="width: 12px; height: 12px; color: var(--primary-background-color);"></ha-icon>`
          }
        ]]]
    state:
      - styles:
          custom_fields:
            notification:
              - border-radius: 50%
              - position: absolute
              - left: 24px
              - top: '-2px'
              - height: 16px
              - width: 16px
              - border: 2px solid var(--card-background-color)
              - font-size: 12px
              - line-height: 14px
              - background-color: |
                  [[[
                    return "rgba(var(--color-red),1)";
                  ]]]
        value: unavailable
    styles:
      card:
        - border-radius: 21px 8px 8px 21px
        - box-shadow: none
        - padding: 0px
      grid:
        - grid-template-areas: '"i n" "i l"'
        - grid-template-columns: min-content auto
        - grid-template-rows: min-content min-content
      icon:
        - color: var(--google-yellow)
      img_cell:
        - background-color: rgba(var(--color-theme),0.05)
        - border-radius: 50%
        - place-self: center
        - width: 42px
        - height: 42px
      name:
        - align-self: end
        - justify-self: start
        - font-weight: bold
        - font-size: 14px
        - margin-left: 12px
      label:
        - justify-self: start
        - align-self: start
        - font-weight: bolder
        - font-size: 12px
        - filter: opacity(40%)
        - margin-left: 12px
      state:
        - justify-self: start
        - align-self: start
        - font-weight: bolder
        - font-size: 12px
        - filter: opacity(40%)
        - margin-left: 12px

Code Card

type: custom:button-card
aspect_ratio: 3/2
template: card_input_number_round
entity: input_number.volets_auto_offset_ouvre
variables:
  ulm_card_input_number_name: MATIN
styles:
  card:
    - border-radius: 10%
    - filter: opacity(100%)
    - padding: 10px
    - border: 2px solid var(--google-yellow)
state:
  - value: 0
    styles:
      card:
        - border: 2px solid var(--google-grey)
lock:
  enabled:
    - - - return entity.state === 'on';
  duration: 3
  unlock: double_tap

[DrDebase]

Bonjour,

Je trouve votre card superbe, je vous le prend. Merci de l’avoir partager.

[RDMCH]

Merci !!! J’arrive pas à intégré plex.
J’ai cette erreur : plex_recently_added: Error on device update! · Issue #57 · custom-components/sensor.plex_recently_added · GitHub
Une idée de ce que je miss ?

Merci

[samg23]

@RDMCH

Merci !!! J’arrive pas à intégré plex.
J’ai cette erreur : plex_recently_added: Error on device update! · Issue #57 · custom-components/sensor.plex_recently_added · GitHub
Une idée de ce que je miss ?

Merci

Essaye peut-être avec le nouveau repo GitHub - NemesisRE/sensor.plex_recently_added: ▶️ Plex component to feed Upcoming Media Card.

[gemalto]

Hello,

J’ai tenté d’installé ce theme mais j’ai ce soucis avec les button-card, je me mange cette erreur : Button-card template ‹ card_generic › is missing!

Pourtant le module button card est installé donc les templates devraient l’etre aussi no ?

[Shadorlo]

Salut pourrais tu mettre à jours ta card température, elle n’est pas fonctionnelle sur la dernière maj Merci àtoi

[Shadorlo]

Salut as tu réussi ? j’ai une erreur

[Galadan]

Hello,
Tu as le message, ton indentation est pas bonne.

- type: custom:button-card
  template: custom_card_graph

[Shadorlo]

merci je regarde ceci après

[Shadorlo]

Bonsoir,

1. Scenes Card - UI Lovelace Minimalist
   J’ai mis cette carte sur ma dasboard (que j’avais à l’époque)
   Sauf que elle ne fonctionnne plus que faire ? je n’ai aucune erreur ma page est blanche voir screen

[juju]

Bonjour étant novice ou dois je insérer le code de la carte

[jeanini]

Salut a tous,

petit up de ce thread. Avez vous intégré un dashboard adaptif?