Custom card avec editeur visuel

Uowis · Novembre 14, 2024, 11:28

Bonjour,
j’ai réussi à créer une custom card qui affiche l’état de plusieurs entity d’un entities.
j’ai réussi à avoir un éditeur visuel sur un seul entity :

class CircleGaugeEditor extends LitElement {

  static get properties() {
    return {
      hass: {},
      _config: {},
    };
  }

  setConfig(config) {
    this._config = config;
  }

  entityChanged(ev) {
    if (!this._config || !this._hass) {
      return;
    }
    const _config = Object.assign({}, this._config);
    _config.entity = ev.detail.value.entity;
    _config.entities = ev.detail.value.entities;
    _config.battery_sensor = ev.detail.value.battery_sensor;
    _config.show_bars = ev.detail.value.show_bars;

    this._config = _config;

    const event = new CustomEvent("config-changed", {
      detail: { config: _config },
      bubbles: true,
      composed: true,
    });
    this.dispatchEvent(event);
  }

  render() {
    if (!this.hass || !this._config) {
      return html`<p>no hass or config</p>`;
    }
    //https://github.com/home-assistant/frontend/blob/a35b4376ea995f96ffd2cfdb91ad051d3d76a61e/src/panels/lovelace/cards/hui-entities-card.ts
    // @focusout below will call entityChanged when the input field loses focus (e.g. the user tabs away or clicks outside of it)
    return html`
      <ha-form
      .hass=${this._hass}
      .data=${this._config}
      .schema=${[

        //https://www.home-assistant.io/docs/blueprint/selectors/#entity-selector
        {name: "entities", selector: { entities: { domain: "light" } }},
        {name: "battery_sensor", selector: { entity: { device_class: "battery" } }},
        {name: "show_bars", selector: { select: { multiple: true, mode: "list", options: [
          {label: "Label 1", value: "bar1"},
          {label: "Label 2", value: "bar2"},
          {label: "Another Label", value: "bar3"},
          {label: "What now?", value: "bar4"},
          ]}
        }}
      ]}
      .computeLabel=${this._computeLabel}
      @value-changed=${this._valueChanged} 
      ></ha-form>
    `;
  }
}

Mais je n’arrive pas a avoir un éditeur visuel pour un Entites.
J’aimerais avoir le meme editeur visuel que la card Entities deja existante. Est ce que quelqu’un veut bien m’aider ?

Bob · Novembre 14, 2024, 12:08

Bonjour,
visuellement ça donne quoi cette carte, c’est quoi le but ?
Première fois que je vois l’utilisation des class pour HA.
Bob

Pulpy-Luke · Novembre 14, 2024, 12:19

Salut,

ça ne parle pas de l’utilisation de HA (et de ses cartes), mais c’est pour pouvoir configurer la carte via l’UI. c’est pour ça que j’ai déplacé ça dans la section dev

Uowis · Novembre 14, 2024, 12:33

concrètement j’aimerai bien intégrer ce comportement dans une custom card.

L’objectif de la carte c’est une jauge circulaire a plusieurs entités

KipK · Mars 21, 2025, 9:36

Salut

@Uowis As tu trouvé une solution ? Je cherche à faire exactement la même chose.

Pour l’instant j’ai du réinventer la roue et faire les formulaires à la main…
Ca manque cruellement de documentation sur ces web-components ha

Uowis · Mars 23, 2025, 2:50

je pense que la liste ne fait pas partie des éléments formulaires proposer par le shema de base

KipK · Mars 23, 2025, 3:06

@Uowis pourtant dans frontend/src/components/ha-form/ha-form.ts at de402e7c1a22dd1188e88baef1e9c9223ae670dc · home-assistant/frontend · GitHub

on a bien un élement multi_select

J’ai pas encore trouvé d’exemple pour l’utiliser correctement.

edit: Si je comprends bien, ca donnerait ça dans le schema:

{
				type: "multi_select",
				name: "entities",
				options: "",
			},

le type de options:

options?:
		| Record<string, string>
		| readonly string[]
		| readonly (readonly [string, string])[];

J’ai pas trop compris quoi mettre dedans du coup.
Dans mon cas je voudrais pouvoir editer l’objet entities de la config de ma carte.

entities:
  - entity: sensor.xxx
    name: nom
    icon: mdi:icon

KipK · Mars 23, 2025, 4:08

ah bah j’ai réussis mais c’est pas le bon composant en fait ^^ …

avec:

export const optionalEntitiesSchema = memoizeOne(
	(deviceEntities: Record<string, string[]> = {}): SchemaItem[] => {
		// Aplatir les entités en une liste de tuples [entité_id, nom]
		const entityOptions = Object.entries(deviceEntities).flatMap(([domain, entities]) =>
			entities.map(entity => [entity, `${domain}.${entity}`] as [string, string])
		);

		const schema: SchemaItem[] = [
			{
				type: "multi_select",
				name: "entities",
				options: entityOptions,
			},
		];

		return schema;
	}
);

Du coup en effet, pas possible avec <ha-form>

Uowis · Avril 2, 2025, 3:21

C’est déjà pas mal !!!,… on peut peu etre se débrouiller avec du CSS,…

Est ce qu’on peut réordonner en changeant l’ordre des virgules ,…?

KipK · Avril 2, 2025, 9:12

non ce sont juste des cases à cocher multiple.
Je vais voir si je peux pas faire un composant générique en repompant l’editeur de la carte entities

La liste des composants HA utilisable est ici:

Si ca peut t’interesser. J’ai rencontré quelques soucis au début, je n’arrivais pas à charger depuis ma custom card certains composants qui n’avait pas été préalablement chargés par HA. J’ai fais ça qui marche pas mal pour pouvoir les recupérer depuis HA

KipK · Avril 3, 2025, 7:22

@Uowis , bon j’ai bien avancé:

Me reste à faire l’édition d’une entité dans un dialog, et gérer les 2 schemas de configuration ( string et object selon qu’on a les propriétés name et icon ou pas )

KipK · Avril 3, 2025, 10:13

Ca le fait pas mal

On l’utilise commeça:

<multi-entity-selector
    .hass=${this.hass}
    .label="additional entities"
    .entities=${this.config.optional_entities || []}
    @entities-changed=${this._handleOptionalEntitiesChanged}
>
</multi-entity-selector>

edit:

@Uowis Le packet est disponible sur npm @kipk/ha-multi-entity-selector

et les sources ici:

Je viens de l’intégrer dans ma carte openevse, tu peux aller voir les sources pour voir comment il est utilisé