Dashboard - 🌻 Minimalist

[Pepeanuts]

Tu as trouvé ça où ?
J’ai beau ajouter ça, mes nouvelles views n’apparaissent pas.

Si je comprends bien il faut:

• inclure toutes les views dans le fichier ui-lovelace.yaml
• faire ses views dans d’autres fichiers et n’ajouter aucun code d’interface dans ui-lovelace.yaml ?

[Galadan]

Hello,

Je me base sur ces deux sites:

Legacy templates

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

Tu fait comme tu veux, tu peux tous lettre dans le ui-lovelace.yaml ou séparer.

[Galadan]

Salut,
@Clemalex , sais-tu comment je pourrais modifier la card « Welcome Scenes » pour utiliser des input_booleen au lieu de script?
Et aussi dans la card « Cover » je voudrais ajouter une 4éme action.

Je viens de chercher un bon moment mais cela semble au dessus de mon champs de compétence.

Merci de ton aide

[Clemalex]

@Galadan

Et aussi dans la card « Cover » je voudrais ajouter une 4éme action

J’avais publier une carte ici et là-bas concernant une 4ème actions. (position du soleil)… Tu dois pouvoir l’utiliser… Ou l’adapter…ca te fera un exemple de compréhension.

[Clemalex]

@Galadan

pour utiliser des input_booleen au lieu de script?

Je m’adapterais au produit plutôt que d’adapter le produit…

Créé un script qui passe à Vrai ou à faux un booléen…

Tu n’auras pas à maintenir en cas de mise a jour

[Galadan]

Entre temps j’ai continué de travailler sur le truc et j’ai réussi a faire ce que je voulais. Merci.
J’ai donc suivi ton conseil et ajouter des script qui actionne des input, ce la fonctionne bien.

C’est possible de réduire le nombre de « champs » scènes? Par exemple moi j’ai besoin que de 3 boutons, mais je n’arrive pas a faire un truc propre…

[antyamok]

Bonjour
Je souhaite mettre à côté de la partie volet, le capteur d’ouverture. Mais je n’arrive pas exactement (c’est un euphémisme) à avoir ce que je souhaite.
Voilà ce que j’ai :

Et voilà ce que je voudrai.

Voici mon template.

# SENSOR DOOR:
binary_sensor:
  styles:
    grid:
      - grid-template-areas: |
          "'item1'"
          "'item2'"
      - grid-template-columns: "1fr"
      - grid-template-rows: "min-content  min-content"
      - grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
      - row-gap: "6px"
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "12px"
  custom_fields:
    item1: 
      card:
        icon: 'mdi:door-sliding'
        type: "custom:button-card"
        template:
          - blue
          - "icon_info"
        entity: "[[[ return entity.entity_id ]]]"
        show_last_changed: true     
    item2:
      card:
        type: "markdown"
        content: >
            [[[ if (entity.state =='on')
                var etat = "Fermé "
                else
              var etat = "Ouverte";
            return etat ; ]]]
        card_mod:
        style: |
          ha-card {
            border-radius: 14px;
            box-shadow: none;
            font-size: 15px;
            text-align: left;
            cursor: default;
          }

Qu’est ce qui ne vas dans mon code ?

[Galadan]

Hello, j’aimerai fusionner les deux card suivante:

Enlever le gros icone sur la card de droite pour le remplacer par le graph de la card de gauche (avec les valeur min et max).
Je ne sais pas comment faire cela…
Voici le template de la card « principale »:

custom_card_room:
  template:
    - "ulm_language_variables"
  variables:
    label_use_temperature: true
    label_use_brightness: false
  color: "var(--google-grey-500)"
  show_icon: true
  show_name: true
  show_label: true
  size: "45%"
  aspect_ratio: "1/1"
  label: |-
    [[[
      if (variables.label_use_temperature) {
        return (entity.attributes.current_temperature || entity.attributes.temperature || entity.state || '-') + '°C';
      } else if (variables.label_use_brightness) {
        if (entity.state){
          if (entity.state == "off"){
            return variables.ulm_off;
          } else if (entity.state == "on"){
            if (entity.attributes.brightness != null){
              var bri = Math.round(entity.attributes.brightness / 2.55);
              return (bri ? bri : "0") + "%";
            } else {
              return variables.ulm_on
            }
          }
        } else {
          return variables.ulm_unavailable;
        }
      } else if (entity.state == "on") {
          return variables.ulm_on
      } else if (entity.state == "off") {
          return variables.ulm_off
      } else {
        return entity.state
      }
    ]]]
  state:
    - styles:
        custom_fields:
          notification:
            - border-radius: "50%"
            - border: "2px solid var(--card-background-color)"
            - width: "24.5px"
            - height: "24.5px"
            - position: "absolute"
            - left: "50%"
            - top: "50%"
            - transform: "translate(-50%,-50%)"
            - margin-top: "35%"
            - margin-left: "-35%"
            - line-height: 0
            - display: "grid"
            - background-color: >
                [[[
                  return "rgba(var(--color-red),1)";
                ]]]
      value: "unavailable"
  styles:
    card:
      - border-radius: "20px"
      - box-shadow: "var(--box-shadow)"
      - padding: "5px"
    grid:
      - grid-template-areas: "'n n n i1' 'l l l i2' 'i i . i3' 'i i . i4'"
      - grid-template-columns: "1fr 1fr 1fr 1fr"
      - grid-template-rows: "1fr 1fr 1fr 1fr"
      - justify-items: "center"
    icon:
      - color: "rgba(var(--color-theme),0.2)"
    img_cell:
      - background-color: "rgba(var(--color-theme),0.05)"
      - border-radius: "50%"
      - width: "75%"
      - height: "75%"
      - max-width: "none"
      - max-height: "none"
      - position: "absolute"
      - left: "50%"
      - top: "50%"
      - transform: "translate(-50%,-50%)"
      - margin-top: "25%"
      - margin-left: "-25%"
    name:
      - justify-self: "start"
      - align-self: "end"
      - font-weight: "bold"
      - font-size: "14px"
      - margin-left: "12px"
      - margin-bottom: "10%"
    label:
      - justify-self: "start"
      - align-self: "start"
      - font-weight: "bold"
      - font-size: "12px"
      - filter: "opacity(40%)"
      - margin-left: "12px"
      - margin-top: "-10%"
    state:
      - justify-self: "start"
      - font-weight: "bold"
      - font-size: "12px"
      - filter: "opacity(40%)"
      - margin-left: "6px"
    custom_fields:
      i1:
        - border-radius: "50%"
        - width: "80%"
        - height: "80%"
        - line-height: 0
        - display: "grid"
      i2:
        - border-radius: "50%"
        - width: "80%"
        - height: "80%"
        - line-height: 0
        - display: "grid"
      i3:
        - border-radius: "50%"
        - width: "80%"
        - height: "80%"
        - line-height: 0
        - display: "grid"
      i4:
        - border-radius: "50%"
        - width: "80%"
        - height: "80%"
        - line-height: 0
        - display: "grid"
  custom_fields:
    notification: >
      [[[
        if (entity.state =='unavailable'){
          return `<ha-icon icon="mdi:exclamation" style="width: 50%; height: 50%; color: var(--primary-background-color);"></ha-icon>`
        }
      ]]]
    i1:
      card:
        type: "custom:button-card"
        template: >
          [[[
            var templates = ['widget_icon_room'];
            if (variables?.entity_1?.templates?.length) {
              return ['widget_icon_room'].concat(variables.entity_1.templates);
            }
            return templates;
          ]]]
        variables: "[[[ return variables.entity_1; ]]]"
        entity: >
          [[[
            if (variables.entity_1.entity_id) {
              return variables.entity_1.entity_id;
            }
          ]]]
        state:
          - operator: "template"
            value: "[[[ return !variables.entity_1; ]]]"
            styles:
              card:
                - display: "none"

    i2:
      card:
        type: "custom:button-card"
        template: >
          [[[
            var templates = ['widget_icon_room'];
            if (variables?.entity_2?.templates?.length) {
              return ['widget_icon_room'].concat(variables.entity_2.templates);
            }
            return templates;
          ]]]
        variables: "[[[ return variables.entity_2; ]]]"
        entity: >
          [[[
            if (variables?.entity_2?.entity_id) {
              return variables.entity_2.entity_id;
            }
          ]]]
        state:
          - operator: "template"
            value: "[[[ return !variables.entity_2; ]]]"
            styles:
              card:
                - display: "none"

    i3:
      card:
        type: "custom:button-card"
        template: >
          [[[
            var templates = ['widget_icon_room'];
            if (variables?.entity_3?.templates?.length) {
              return ['widget_icon_room'].concat(variables.entity_3.templates);
            }
            return templates;
          ]]]
        variables: "[[[ return variables.entity_3; ]]]"
        entity: >
          [[[
            if (variables?.entity_3?.entity_id) {
              return variables.entity_3.entity_id;
            }
          ]]]
        state:
          - operator: "template"
            value: "[[[ return !variables.entity_3; ]]]"
            styles:
              card:
                - display: "none"
    i4:
      card:
        type: "custom:button-card"
        template: >
          [[[
            var templates = ['widget_icon_room'];
            if (variables?.entity_4?.templates?.length) {
              return ['widget_icon_room'].concat(variables.entity_4.templates);
            }
            return templates;
          ]]]
        variables: "[[[ return variables.entity_4; ]]]"
        entity: >
          [[[
            if (variables?.entity_4?.entity_id) {
              return variables.entity_4.entity_id;
            }
          ]]]
        state:
          - operator: "template"
            value: "[[[ return !variables.entity_4; ]]]"
            styles:
              card:
                - display: "none"

widget_icon_room:
  variables:
    tap_action:
      action: "toggle"
    hold_action:
      action: "none"
  tap_action:
    action: >
      [[[ if (variables?.tap_action?.action) return variables.tap_action.action; else return 'none'; ]]]
    entity: "[[[ return variables.tap_action.entity; ]]]"
    navigation_path: "[[[ return variables.tap_action.navigation_path; ]]]"
    url_path: "[[[ return variables.tap_action.url_path; ]]]"
    service: "[[[ return variables.tap_action.service; ]]]"
    service_data: "[[[ return variables.tap_action.service_data; ]]]"
  hold_action:
    action: >
      [[[ if (variables?.hold_action?.action) return variables.hold_action.action; else return 'none'; ]]]
    entity: "[[[ return variables.hold_action.entity; ]]]"
    navigation_path: "[[[ return variables.hold_action.navigation_path; ]]]"
    url_path: "[[[ return variables.hold_action.url_path; ]]]"
    service: "[[[ return variables.hold_action.service; ]]]"
    service_data: "[[[ return variables.hold_action.service_data; ]]]"
  show_icon: true
  show_name: false
  styles:
    grid:
      - grid-template-areas: "'i'"
    card:
      - height: "100%"
      - box-shadow: "none"
      - padding: "0px"
      - border-radius: "50%"
    icon:
      - width: "50%"
      - height: "50%"
      - line-height: "0"
      - color: "rgba(var(--color-theme),0.2)"
    img_cell:
      - border-radius: "50%"
      - background-color: "rgba(var(--color-theme),0.05)"
  size: "15px"
  color: "var(--google-grey)"

Merci d’avance

[antyamok]

Hello samg23,

J’ai deux petites questions à te poser concernant ton travail sur le popup Find_my.

• Où trouves-tu l’entité? return variables.ulm_card_person_wifi_tracker
  Ca fonctionne bien return variables.ulm_card_person_gps_tracker mais pas avec le type de connexion wifi.
  Je ne vois qui correspond au wifi sur mon device_tracker_iphone

• Pourrais-tu me partager le script « findmy_script »? Je ne vois ce qu’il faut mettre dedans.

Enfin petite colle. Sais-tu pourquoi le popup n’apparait uniquement lorsque je suis connecté à mon réseau wifi « home ».

En te remerciant par avance pour ton aide.

[Galadan]

Hello,

Une idée pour corriger ça:

Impossible de trouver ce qui ne va pas dans le code…
Je suppose que c’est dans cette partie:

card:
        type: "custom:button-card"
        tap_action:
          action: more-info
        color: "var(--google-grey)"
        show_icon: true
        show_label: false
        show_name: true
        styles:
          custom_fields:
            item1:
              - justify-self: "end"
          icon:
            - color: "rgba(var(--color-theme),0.9)"
            - width: "20px"
          img_cell:
            - background-color: "none"
            - place-self: "center"
            - justify-self: "start"
            - width: "40px"
            - height: "20px"
          name:
            - align-self: "end"
            - justify-self: "start"
            - font-weight: "bold"
            - font-size: "16px"
          grid:
            - grid-template-areas: "i n item1"
            - grid-template-columns: "auto"
            - grid-template-rows: "auto"
          card:
            - box-shadow: "none"
            - border-radius: "10px"
            - border: "2px solid var(--google-grey)"
            - padding_bottom: "-8px"
            - height: "40px"
            - padding-top: "5px"
            - padding-left: "5px"
        name: "Speedtest"
        icon: "mdi:speedometer"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              show_icon: true
              show_name: false
              show_label: false
              styles:
                icon:
                  - color: "rgba(var(--color-theme),0.9)"
                  - width: "20px"
                grid:
                  - grid-template-areas: "i"
                  - grid-template-columns: "auto"
                  - grid-template-rows: "auto"
                card:
                  - box-shadow: "none"
              icon: "mdi:chevron-right"

Mais je trouve pas…
Merci d’avance !!

[samg23]

Salut @antyamok ,

@antyamok

Où trouves-tu l’entité? return variables.ulm_card_person_wifi_tracker

Pour la variable ulm_card_person_wifi_tracker, j’ai fixé l’adresse ip de l’appareil dans les settings de mon routeur, et ensuite j’ai créé moi-même une entité device_tracker qui envoie un ping à l’adresse ip de l’appareil en ajoutant ceci à mon fichier configuration.yaml:

device_tracker:
  - platform: ping
    hosts:
      iphone_wifi: 192.168.X.X

Dans l’exemple au dessus, l’entitée device_tracker.iphone_wifi sera donc détecté comme présente lorsqu’elle est connectée au même réseau wifi que Home Assistant.

@antyamok

Pourrais-tu me partager le script « findmy_script »? Je ne vois ce qu’il faut mettre dedans

Pour la variable findmy_script, cela dépend de l’intégration que tu utilises pour faire sonner ton téléphone.

Par exemple, pour un iPhone le mieux c’est l’intégration icloud :

script:
  find_my_iphone:
	alias: Find My iPhone
	sequence:
	  - service: icloud.play_sound
		data:
		  account: myaccount@icloud.com
		  device_name: iPhone de Samg23
	mode: single

Pour un téléphone sous Android, j’utilise personnellement le service notify couplé à une application comme Tasker qui fait sonner mon téléphone lorsque je reçois la notification « Trouve mon téléphone » :

find_my_android:
  alias: Find My Android
  sequence:
    - service: notify.oneplus
	  data:
		message: Trouve mon téléphone
		title: Automatisation
  mode: single

[Clemalex]

Essaye quelque chose de ce genre :

type: custom:button-card
tap_action:
  action: more-info
color: var(--google-grey)
show_icon: true
show_label: false
show_name: true
styles:
  icon:
    - color: rgba(var(--color-theme),0.9)
    - width: 20px
  img_cell: null
  name:
    - font-weight: bold
    - font-size: 16px
    - place-self: start
    - margin: 3px 0 0 10px
  grid:
    - grid-template-areas: '"i n item1" "i n item1"'
    - grid-template-columns: 1fr 10fr 1fr
    - grid-template-rows: auto
  card:
    - box-shadow: none
    - border-radius: 10px
    - border: 2px solid var(--google-grey)
    - padding_bottom: '-8px'
    - height: 40px
    - padding-top: 5px
    - padding-left: 5px
name: Speedtest
icon: mdi:speedometer
custom_fields:
  item1:
    card:
      type: custom:button-card
      show_icon: true
      show_name: false
      show_label: false
      styles:
        icon:
          - color: rgba(var(--color-theme),0.9)
          - width: 20px
        grid:
          - grid-template-areas: i
          - grid-template-columns: auto
          - grid-template-rows: auto
        card:
          - box-shadow: none
      icon: mdi:chevron-right

[Galadan]

Merci @Clemalex !
C’est parfait!
Par contre je veux appeler un speedtest a l’appui de se bouton, j’ai bien mis:

card:
        type: custom:button-card
        tap_action:
          action: call-service
          service: speedtestdotnet.speedtest

Mais il n’appel pas le service… par contre dans outils de dev cela fonctionne.
J’ai raté quoi?

Et si tu peux me dire ou je doit modifier la card pour ajouter un graph dans mon post un peu plus haut

[antyamok]

Bonsoir samg23,

Je te remercie beaucoup, c’est exactement ce qui me manquait.

Encore une question! Sais-tu comment faire pour mettre la tabbar en bas en non en haut pour naviguer entre les différentes pages ? Je cherche en vain ma réponse.

[samg23]

Aucune idée, mais si tu trouves la réponse ca m’intéresse aussi

[Clemalex]

@antyamok

Encore une question! Sais-tu comment faire pour mettre la tabbar en bas en non en haut pour naviguer entre les différentes pages ? Je cherche en vain ma réponse.

Merci de respecter le sujet initial…

Ouvre un sujet dédié

[antyamok]

@Clemalex - Justement c’était dans le thème du sujet vu que je suis sur le thème Minimalist.

Mais c’est bon j’ai trouvé ma réponse en mettant à jour les thèmes de UI-Lovelace-Minimalist depuis Github.

[Galadan]

Hello,

Petite question, je voudrais faire apparaitre/disparaitre une chip en fonction d’un booléen.

J’ai fais ça:

          - type: custom:button-card
            template: card_chip_guest_custom
            variables:
              ulm_card_chip_guest_custom_state_entity: input_boolean.invite_present

Le template:

card_chip_guest_custom:
    template: 'chips'
    show_icon: false
    show_state: false
    show_label: true
    triggers_update: all
    tap_action:
      action: navigate
      navigation_path: /views/localisation
    label: |
      [[[ 
        if (states[variables.ulm_card_chip_guest_custom_state_entity].state == 'on'){ 
           return '😀';
        } else {
          return '️';
        }
      ]]]

Donc l’icone apparait disparait bien mais pas le fond:

Une idée de ce que je doit modifier?

Merci

[samg23]

Ajoute la propriété extra_styles et fais un display: none quand le statut de ton entité est différent de « on ».

@samg23

Salut, personnellement je n’utiliserai pas de carte conditional mais directement les templates de button-card.

Avec la propriété extra_styles comme ceci :

- type: 'custom:button-card'
  template: chip_icon_state
  variables:
    ulm_chip_icon_state_icon: '🐶'
    ulm_chip_icon_state_entity: sensor.alerte_loo
  extra_styles: >
    [[[
      if (states['sensor.alerte_loo'].state != "Loo"){
        return `
          :host{
            display: none !important;
          }
        `;
      }
    ]]]

A la place de :

- type: conditional
  conditions:
    - entity: sensor.alerte_loo
    - state: "Loo"
  card:
    type: 'custom:button-card'
    template: chip_icon_state
    variables:
      ulm_chip_icon_state_icon: '🐶'
      ulm_chip_icon_state_entity: sensor.alerte_loo

[Galadan]

Parfait!! Merci

Voici le code pour ceux que ça intéresse:

card_chip_holidays_custom:
    template: 'chips'
    show_icon: false
    show_state: false
    show_label: true
    triggers_update: all
    tap_action:
      action: navigate
      navigation_path: /lovelace/localisation
    extra_styles: >
        [[[
          if (states[variables.ulm_card_chip_holidays_custom_entity].state != "on"){
            return `
              :host{
                display: none !important;
              }
            `;
          }
        ]]]
    label: |
      [[[ 
        if (states[variables.ulm_card_chip_holidays_custom_entity].state == 'on'){ 
           return '⛱️';
        } else {
          return '️';
        }
      ]]]