Probleme pour ajouter card_imput_number dans minimalist

pascal_ha · Septembre 23, 2022, 11:56

Mon problème

Bonjour

J’essaie d’ajouter au thème minimaliste, la Card input number :
https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_input_number/#requirements

J’ai donc ajouter la partie Template code dans interface utilisateur avec éditeur de configuration.

J’ai ensuite ajouter une carte avec le code suivant :

#OLD
- type: "custom:button-card"
  template:
    - card_input_number
  variables:
    ulm_card_input_number_name: "offset matin"
    ulm_card_input_number_entity: "input_number.volets_auto_offset_ouvre"

Mais sa ne fonctionne pas j’ai le résultat suivant :
number_1 ui

Je sollicite votre aide, merci a tous

Ma configuration

System Information

version	core-2022.9.6
installation_type	Home Assistant OS
dev	false
hassio	true
docker	true
user	root
virtualenv	false
python_version	3.10.5
os_name	Linux
os_version	5.15.61-v8
arch	aarch64
timezone	Europe/Paris
config_dir	/config

Home Assistant Community Store

GitHub API	ok
GitHub Content	ok
GitHub Web	ok
GitHub API Calls Remaining	5000
Installed Version	1.27.2
Stage	running
Available Repositories	1133
Downloaded Repositories	45

Home Assistant Cloud

logged_in	false
can_reach_cert_server	ok
can_reach_cloud_auth	ok
can_reach_cloud	ok

Home Assistant Supervisor

host_os	Home Assistant OS 9.0
update_channel	stable
supervisor_version	supervisor-2022.09.1
agent_version	1.3.0
docker_version	20.10.17
disk_total	219.4 GB
disk_used	16.3 GB
healthy	true
supported	true
board	rpi4-64
supervisor_api	ok
version_api	ok
installed_addons	Terminal & SSH (9.6.1), Samba share (10.0.0), File editor (5.4.1), Duck DNS (1.15.0), Mosquitto broker (6.1.3), MariaDB (2.5.1), NGINX Home Assistant SSL proxy (3.1.5), Nginx Proxy Manager (0.12.2), Simple Scheduler (0.64), Check Home Assistant configuration (3.11.0), Node-RED (13.4.0), Studio Code Server (5.4.0), Plex Media Server (3.1.1), Home Assistant Google Drive Backup (0.108.4), ESPHome (2022.9.1), Network UPS Tools (0.11.0), Zigbee2MQTT (1.27.2-1)

Dashboards

dashboards	3
resources	34
views	17
mode	storage

Recorder

oldest_recorder_run	14 septembre 2022 à 16:40
current_recorder_run	22 septembre 2022 à 14:30
estimated_db_size	724.36 MiB
database_engine	sqlite
database_version	3.38.5

Xiaomi MIoT

logged_in	true
can_reach_micloud_server	ok
accounts_count	2
account_devices_count	1
added_devices	1

` ___

Pulpy-Luke · Septembre 23, 2022, 12:02

Salut.

En regardant vite fait, ce que tu as écrit n’est pas ce qui est dans l’exemple… Ton input_number n’a pas à être dans les variables en principe…

Regarde la différence

pascal_ha · Septembre 23, 2022, 1:16

Bonjour Pulpy

J’ai essayé les 2 méthodes, mais j’ai le même message d’erreur
number_2 ui

Pulpy-Luke · Septembre 23, 2022, 1:29

Ok donc maintenant c’est syntaxiquement plus correct

Quand je vois la doc, ça à l’air d’être l’ajout par un fichier… donc je vois pas trop le lien avec l’ui ici…

Retrouve un tuto d’installation du thème minimalist, moi je parie qu’en l’état le template n’est pas chargé

pascal_ha · Septembre 23, 2022, 1:46

Pour install j’ai suivi ce post.

Quand j’ai installé UI minimalist, il fallait installer le template dans éditeur de configuration, et ensuite utiliser la carte.

Mais depuis il existe une intégration UI minimalist, du coup je ne sais pas si je dois retirer tous ce qui a été mis dans éditeur de configuration et utiliser l’intégration…

Pulpy-Luke · Septembre 23, 2022, 2:30

Là je ne sais pas… je n’utilise pas ce thème

pascal_ha · Septembre 23, 2022, 2:32

Ok, pas de souci, merci de ton aide.
Peut être que @clemalex pourra m’aider.
Bonne fin d’après midi

Clemalex · Septembre 23, 2022, 3:07

Cela fait plusieurs mois que je n’ai pas eu le temps de regarder HA…

Mais un backup avant ne fait pas de mal.

Personnellement, j’enlèverais tout et suivrai la documentation de l’intégration.

pascal_ha · Septembre 23, 2022, 3:17

J’ai réussi à installer intégration, et a la mettre en place, le souci c’est que je perds toute interface graphique et que je dois tous faire en YAML.

Je trouvais plus simple de faire comme avant, copier le template dans éditeur de configuration de interface et de rajouter une carte en manuel avec le code.

le souci c’est que je n’arrive pas le faire avec la carte input number

pascal_ha · Septembre 24, 2022, 1:27

bonjour a tous

J’ai un peu avancé, mais c’est pas encore au point.

voici ce que je devrais avoir :
number_4 ui

Mon souci est que pour avoir item centrale (60%) le code utilise un template ULM_translation_engine Mais je ne trouve pas ce template ?
J’ai donc erreur suivante:

J’ai supprimé ce template du code, mais du coup je n’ai pas d’affichage de la valeur…
Voici ce que j’obtiens :
number_5 ui

code du template :

Résumé

  card_input_number:
    variables:
      ulm_card_input_number_name: '[[[ return entity.attributes.friendly_name ]]]'
    triggers_update: all
    show_icon: false
    show_label: 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
            - ulm_translation_engine
            - 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
                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:arrow-left
            item2:
              card:
                type: custom:button-card
                template: widget_text
                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
                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:arrow-right
  input_number:
    tap_action:
      action: more-info
    show_last_changed: false
  widget_text:
    tap_action:
      action: toggle
    template:
      - ulm_translation_engine
    show_icon: false
    show_label: true
    show_name: false
    label: '[[[ return variables.ulm_translation_state_unit ]]]'
    styles:
      grid:
        - grid-template-areas: '''l'''
      card:
        - box-shadow: none
        - padding: 0px
        - border-radius: 14px
        - place-self: center
        - height: 42px
      state:
        - color: rgba(var(--color-theme),0.9)
    size: 20px
    color: var(--google-grey)

Quelqu’un a t’il une idée pour résoudre ce problème ?

pascal_ha · Septembre 26, 2022, 9:04

Bon j’ai enfin reussi a faire ma carte input number…enfin presque

number_7 ui

code du Template

  card_input_number:
    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
            - 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
                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:arrow-left
            item2:
              card:
                type: custom:button-card
                template: widget_text
                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
                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:arrow-right
  input_number:
    tap_action:
      action: more-info
    show_last_changed: false
  widget_text:
    tap_action:
      action: toggle
    template: widget_icon
    show_icon: false
    show_label: false
    show_state: true
    show_name: false
    label: '[[[ return variables.ulm_translation_state_unit ]]]'
    styles:
      grid:
        - grid-template-areas: '''l'''
      card:
        - box-shadow: none
        - padding: 0px
        - border-radius: 14px
        - place-self: center
        - height: 42px
      state:
        - 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)
  list_3_items:
    styles:
      grid:
        - grid-template-areas: '''item1 item2 item3'''
        - grid-template-columns: 1fr 1fr 1fr
        - grid-template-rows: min-content
        - column-gap: 7px
      card:
        - box-shadow: none
        - padding: 0px

Code de la carte

type: custom:button-card
aspect_ratio: 3/2
template: card_input_number
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)
lock:
  enabled:
    - - - return entity.state === 'on';
  duration: 3
  unlock: double_tap

Ce que je n’arrive pas a faire :

Supprimer la décimal de input_number
Changer la couleur de l’icone

Voila , si quelqu’un peut m’apporter une solution pour la décimal ce serait super
Merci a tous

pascal_ha · Septembre 30, 2022, 2:30

Bonjour @Clemalex

J’ai un peu progresser sur mon bouton.
J’ai renoncé a utiliser l’intégration UI-minimalist (trop compliqué pour moi)
J’ai donc fait comme pour les autres cartes, j’ai ajouter le Template dans éditeur de configuration de interface (après l’avoir légèrement corrigé)

number_8 ui

Par contre je n’arrive pas a supprimer la décimal de input_number, peut tu m’aider a y arriver. si cela est réalisable. (J’ai vu qu’on pouvait utiliser | int mais je ne suis pas arriver, car je sais pas trop ou et comment l’utiliser…)

Merci de ton aide, si tu peux bien sur…

Herbs · Septembre 30, 2022, 5:46

Salut @pascal_ha

Je crois que j’ai déjà vu plus simple sur le forum, mais je n’arrive pas à remettre la main sur le topic.

Mais j’ai retrouvé un autre exemple sur le net, à voir si tu peux t’en servir dans ton cas de figure.

Enfin au moins reprendre la template.

type: custom:button-card
entity: input_number.cert_alert
color: auto
show_name: false
show_icon: false
show_state: false
show_label: true
label: |
  [[[
    var test = Math.trunc(states['input_number.cert_alert'].state);
    return test;
  ]]]

Et à la base :

Pour compléter et voir en fonction de comment tu veux arrondir la valeur affichée :

JavaScript Tutorial => Float to Integer.

Clemalex · Septembre 30, 2022, 9:06

Peux tu partager ton code de template et de carte ?

pascal_ha · Octobre 1, 2022, 7:08

Bonjour Clemalex

le code du template est le suivant :

  card_input_number:
    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
            - 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
                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:arrow-left
            item2:
              card:
                type: custom:button-card
                template: widget_text
                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
                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:arrow-right
  input_number:
    tap_action:
      action: more-info
    show_last_changed: false
  widget_text:
    tap_action:
      action: toggle
    template: widget_icon
    show_icon: false
    show_label: false
    show_state: true
    show_name: false
    label: '[[[ return variables.ulm_translation_state_unit ]]]'
    styles:
      grid:
        - grid-template-areas: '''l'''
      card:
        - box-shadow: none
        - padding: 0px
        - border-radius: 14px
        - place-self: center
        - height: 42px
      state:
        - 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)
  list_3_items:
    styles:
      grid:
        - grid-template-areas: '''item1 item2 item3'''
        - grid-template-columns: 1fr 1fr 1fr
        - grid-template-rows: min-content
        - column-gap: 7px
      card:
        - box-shadow: none
        - padding: 0px

le code de la carte :

type: custom:button-card
aspect_ratio: 3/2
template: card_input_number
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

Merci pour ton aide

pascal_ha · Octobre 1, 2022, 7:12

Salut herbs

Je n’ai pas réussi a avoir le résultat voulu , voici ce que j’obtiens avec le code :
(coté soir modifié)
number_9 ui

Peut être faut il intégré ce code dans le template, mais je sais pas ou le mettre.
je ferais un essai ce soir.

Merci pour ton aide

Herbs · Octobre 1, 2022, 7:44

Salut @pascal_ha,

Il nous manque au moins 2 template pour tester « localement » :

icon_info
widget_icon

Mais là vite fait dans la template « card_input_number » sous l’item2 de l’item2, je testerai ça :

            item2:
              card:
                type: custom:button-card
                template: widget_text
                entity: '[[[ return entity.entity_id ]]]'
                show_label: true
                label: |
                  [[[
                    var test = Math.trunc(entity.state);
                    return test;
                  ]]]
                tap_action:
                  action: call-service
                  service: cover.stop_cover
                  service_data:
                    entity_id: '[[[ return entity.entity_id ]]]'

Mais sans tout le code pour tester difficile de garantir le résultat

pascal_ha · Octobre 1, 2022, 12:37

Je test en fin de journée, et je vous poste ce qui manque.

Merci

pascal_ha · Octobre 1, 2022, 2:33

voici les templates :

Pour le Widget :

  widget_icon:
    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)

Pour Icon_info

  icon_info:
    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: rgba(var(--color-theme),0.2)
      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

pascal_ha · Octobre 1, 2022, 2:37

J’ai testé, mais pas de changement…toujours le .0 qui reste