Streamline Card et variable javascript

[titoumimi]

(re) Bonjour à tous

Décidément, c’est ma journée interface aujourd’hui.

Donc pour l’exemple, j’ai créé un streamline_template :

streamline_templates:
  sandbox:
    card:
      type: custom:mushroom-title-card
      title: Bureau

que j’instancie comme suit :

type: custom:streamline-card
template: sandbox
variables: {}

=>

Jusqu’ici tout va bien. Mon but est d’utiliser les « variables javascript » évoquées dans la doc : GitHub - brunosabot/streamline-card: Streamline your Lovelace configuration with with a card template system.

streamline_templates:
  sandbox:
    card:
      type: custom:mushroom-title-card
      title_javascript: |
        "Bureau";

ça, ça fonctionne toujours, ça m’affiche la même chose qu’au dessus.

J’ai testé l’expression suivante dans l’éditeur de Modèle, et tout va bien, ça me renvoie bien « Bureau » :

{{ area_name('bureau') }}

Par contre, quand j’essaie de mixer les deux, plus rien ne s’affiche, c’est même toute ma section qui « disparait » :

streamline_templates:
  sandbox:
    card:
      type: custom:mushroom-title-card
      title_javascript: |
        area_name[bureau];

Bref, quelqu’un saurait-il SVP comment faire fonctionner ces variables JS, ou au moins quelle est l’étendue des fonctions utilisables ?

Merci d’avance, et bonne fin de journée

[titoumimi]

Je me permet de tagger @brunosabot , le créateur de l’intégration des fois que

[llaumgui]

Tu as essayé ça :

      title: '{{ area_name[bureau] }}"

Car moi, j’arrive à faire des trucs poussés sans passer par les _javascripts.

Par exemple pour une porte :

  door:
    default:
      - primary: Porte
      - icon_open: phu:panel-glass-door-open
      - icon_close: phu:panel-glass-door-close
    card:
      type: custom:mushroom-template-card
      primary: '[[primary]]'
      secondary: >-
        {{ state_translated(entity) }} ({{
        relative_time(states.[[entity]].last_changed) | replace("day", "jour") |
        replace("hour", "heure") | replace("second", "seconde") }})
      icon: |-
        {% if states(entity) == 'on' %}
          [[icon_open]]
        {% else %}
          [[icon_close]]
        {% endif %}
      icon_color: |-
        {% if states(entity) == 'on' %}
          #FFA726
        {% else %}
          grey
        {% endif %}
      entity: binary_sensor.open_sensor_door_maison_contact
      tap_action:
        action: more-info

Pour ça par contre, il faut que le champ auquel tu passes l’info soit en capacité de faire l’interprétation.

Sinon la syntaxe semble plus être :

      title_javascript: "area_name['bureau']"

voir même :

      title_javascript: "area_name['[[piece]]']"

[titoumimi]

@llaumgui

Pour ça par contre, il faut que le champ auquel tu passes l’info soit en capacité de faire l’interprétation.

Merci, mais malheureusement, ce n’est pas le cas

@llaumgui

      title_javascript: "area_name['bureau']"

Testé également, sans plus de succès

@llaumgui

      title_javascript: "area_name['[[piece]]']"

ça c’est la syntaxe si tu lui passe en paramètre une variable. Testé également sans succès

[llaumgui]

j’ai l’impression que dans les exemples, ce n’est pas la fonction states() mais le tableau states… Du coup comme il ne semble pas y avoir de tableau areas…

[BBE]

Perso je n’ai pas non plus compris comment utiliser la partie JS…

Donc je n’apporte rien, mais je pose là mon bol de pop corn et un transat pour observer attentivement ce qui va suivre et qui promet d’être instructif…

[titoumimi]

Ok, ça c’est du déterrage de sujet !

Depuis la dernière MAJ, la doc est plus claire (GitHub - brunosabot/streamline-card: Streamline your Lovelace configuration with with a card template system.) :

You can make your templates dynamic using JavaScript. Any key that ends with _javascript will be evaluated as JavaScript code. The javascript code has access to the following data

• states: An object containing all states
• user: An object containing the current user information, for instance user.name or user.is_admin
• variables: An object containing all the variables you’ve defined in your template
• areas: An object containing all areas defined in Home Assistant, for instance you can use areas.kitchen.icon

Donc dans mon cas de sandbox, ça donne ça :

sandbox:
  card:
    type: custom:mushroom-title-card
    title_javascript: |
      areas.bureau.name;