[ CARTE ] Bubble Card - Des pop-up et une collection de cartes minimalistes

Home Assistant - Tutoriels & Partages Interface / Lovelace / Thème / Custom Card
, , ,
245

Salut, tu peux regarder cet exemple de la documentation des Templates, j’explique comment traduire un state. Ici il faut l’adapter pour ton sub-button, mais j’explique comment modifier des sub-buttons dans la doc donc tu devrais t’en sortir avec ça :slightly_smiling_face:

1000007452
10000074521080×2400 501 KB

Et si jamais n’hésites pas à demander à nouveau :ok_hand:

246

Salut, je n’arrive pas à modifier l’ombre sous le header d’un pop-up…
image
Je voudrais réduire sa portée mais je n’ai pas trouvé dans les devtools de chrome.

247

Idem chez moi, ça allait au début mais maintenant que j’ai plusieurs cartes et pop-up il est quasiment impossible de les éditer.

248

Bonsoir
J’avance petit à petit sur la création d’un dashboard à base de bubble card :wink:

Et là je bute sur les sub-button : j’aimerais qu’en cliquant sur un sub-button ça me lance une automatisation.
J’ai choisi Call service comme tap action, mais je ne sais pas quoi mettre dans Service pour que l’entity automation.alarme_desactivationsoit lancé.

CleanShot 2024-10-06 at 23.01.55@2x
CleanShot 2024-10-06 at 23.01.55@2x2016×1214 128 KB

L’objectif est de lancer 3 automatisations pour chacun des trois sub-button que j’ai mis.

Comment puis-je faire cela ?

Autre question : comment faire en sorte que l’icône de la carte prenne un icone et une couleur selon l’état de mon alarme ?

  • Vert quand alarme désactivée
  • Orange quand alarme activée en mode absence
  • Bleue quand alarme activée en mode présence
  • Rouge quand l’alarme est indisponible

PS : autre chose, j’ai beaucoup de mal à faire quelque chose d’élégant, avec des couleurs, si certains ont des suggestions pour egailler un peu ces cartes, je suis preneur :slight_smile:

CleanShot 2024-10-06 at 23.08.44@2x
CleanShot 2024-10-06 at 23.08.44@2x2402×810 150 KB

Merci d’avance

249

Bonjour,
Sur le github il y a plein d’exemples service a été transformé en action depuis quelques version de Ha.
Dans service mettre le nom de ton script script.xxxx

Call service

Sub buttons

1 « J'aime »
250

Salut :wave:t2:
Merci pour ta réponse.
Il me faut donc faire un script c’est ça ?
Comment je peux faire à partir d’une automatisation ?
Par exemple le code d’une des trois automatisations :

alias: Alarme IMA - Activation en mode Absence
description: ""
triggers: []
conditions:
  - condition: or
    conditions:
      - condition: not
        conditions:
          - condition: state
            entity_id: alarm_control_panel.alarme_maison
            state: armed_away
      - condition: not
        conditions:
          - condition: state
            entity_id: alarm_control_panel.alarme_maison
            state: armed_home
actions:
  - device_id: 1392c420886e188fed31ab7d3d77dbf8
    domain: alarm_control_panel
    entity_id: 1a6e0ed3a931469f0484af1eaba5866c
    type: arm_away
    code: "0000"
mode: single

Comment puis-je avoir un script à partir de ça ?

252

Pas nécessaire de faire un script si tu as déjà une automation.

Tu peux faire ceci

action: automation.trigger
target:
  entity_id: automation.alarme_desactivation

Tu peux tester les actions en allant dans les outils de développement de Ha

1 « J'aime »
253

salut,
Merci bien :smiley:
Cependant je viens de faire des scripts ^^ car j’ai trouvé comment faire :stuck_out_tongue:
Que je trouve finalement plus pratique et plus parlant au niveau du code :slight_smile:

Mes scripts en mode yaml 
# ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# ~~~~~~~~~ Scripts pour les changements d'état de l'alarme ~~~~~~~~~~
# ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

## Ce code est à créer dans un nouveau script HA sous Parametres/automatisation et scenes/Scripts/

# ╔══════════════════════════════════════════════════════════════════════════╗
# ║ Scripts pour la désactivation de l'alarme                                ║
# ╚══════════════════════════════════════════════════════════════════════════╝

script_yaml_alarme_ima_desactivation:
  alias: Alarme IMA - Désactivation [YAML]
  sequence:
    - condition: not
      conditions:
        - condition: state
          entity_id: alarm_control_panel.alarme_maison
          state: disarmed
    - action: alarm_control_panel.alarm_disarm
      metadata: {}
      data:
        code: "0000"
      target:
        device_id: 1392c420886e188fed31ab7d3d77dbf8
  description: Désactivation de l'alarme
  icon: mdi:shield-off

script_yaml_alarme_ima_activation_en_mode_presence:
  alias: Alarme IMA - Activation mode nuit (présence) [YAML]
  sequence:
    - condition: not
      conditions:
        - condition: state
          entity_id: alarm_control_panel.alarme_maison
          state: armed_home
    - action: alarm_control_panel.alarm_arm_home
      target:
        device_id:
          - 1392c420886e188fed31ab7d3d77dbf8
      data:
        code: "0000"
  description: Activation de l'alarme en mode nuit (présence)
  icon: mdi:shield-home

script_yaml_alarme_ima_activation_en_mode_absence:
  alias: Alarme IMA - Activation mode absence [YAML]
  sequence:
    - condition: not
      conditions:
        - condition: state
          entity_id: alarm_control_panel.alarme_maison
          state: armed_away
    - action: alarm_control_panel.alarm_arm_away
      target:
        device_id:
          - 1392c420886e188fed31ab7d3d77dbf8
      data:
        code: "0000"
  description: Activation de l'alarme en mode absence
  icon: mdi:shield-lock
254

Petite question : lorsqu’on clique sur un sous-bouton, est-il possible d’afficher une sorte de message qui disparait au bout de quelques secondes ? Genre un message du style : « Activation de l’alarme… »

255

Tu ajouter cela a ton script

action: notify.send_message
data:
  entity_id: notify.my_direct_message_notifier
  message: "Alarme Activé!"
  title: "Alarme On"
256

Et ça va faire une notification que sur l’écran de là où on a cliqué ? pas dans le téléphone ?

257

Sinon pour changer l’icône de la carte ainsi que la couleur des boutons et sous-boutons, j’ai réussi à presque tout faire sauf pour la couleur des sous-boutons… Ça ne fonctionne pas.
Voilà le code que j’ai mis pour faire tout ça :

.bubble-icon {
  color: ${hass.states['alarm_control_panel.alarme_maison'].state === 'armed_away' ? 'rgba(0, 255, 0, 1)' : hass.states['alarm_control_panel.alarme_maison'].state === 'armed_home' ? 'rgba(0, 255, 200, 1)' : hass.states['alarm_control_panel.alarme_maison'].state === 'disarmed' ? 'rgba(255, 127, 0, 1)' : 'grey'} !important;
}
${icon.setAttribute("icon", hass.states['alarm_control_panel.alarme_maison'].state === 'armed_away' ? 'mdi:shield-lock' : hass.states['alarm_control_panel.alarme_maison'].state === 'armed_home' ? 'mdi:shield-home' : hass.states['alarm_control_panel.alarme_maison'].state === 'disarmed' ? 'mdi:shield-off' : 'mdi:shield-alert')}

.bubble-sub-button-1 > ha-icon {
  color: 'rgba(255, 127, 0, 1)' !important;
}
.bubble-sub-button-2 > ha-icon {
  color: 'rgba(0, 255, 200, 1)' !important;
}
.bubble-sub-button-3 > ha-icon {
  color: 'rgba(0, 255, 0, 1)' !important;
}

Les trois derniers blocs de styles ne changent pas la couleur des trois sous-boutons :

CleanShot 2024-10-07 at 11.16.33@2x
CleanShot 2024-10-07 at 11.16.33@2x1082×268 27.9 KB

Comment puis-je faire pour que ces sous-boutons aient la couleur que je veux leur donner ?

258

Essaies en retirant les ' autours des fonctions rgba. En testant chez moi, ça a l’air d’être l’élément bloquant

259

Ok, je vais essayer :slight_smile:
edit : je confirme que ça fonctionne :wink:
Je n’avais tester que sur le premier sous-icone qui reste gris XD donc je pensais que ça ne fonctionnait pas d’enlever les ’ (j’avais essayé que sur le premier :laughing: )

Sinon, il y a moyen d’avoir un fond rond de couleur pour les icones ? car là c’est carré :sweat_smile:

CleanShot 2024-10-07 at 16.15.40@2x
CleanShot 2024-10-07 at 16.15.40@2x1734×1256 254 KB

260

Pour ça, il faut remplacer.bubble-icon par .bubble-icon-container.
Actuellement tu vises la classe de l’icône, pas la classe du rond qui contient l’icône.

Au vu de ce que tu sembles vouloir faire, il te faut garder .bubble-icon seulement pour les conditions de mise en couleur.

1 « J'aime »
261

Salut,
ajoute border-radius: 50px.

1 « J'aime »
262

Nouveau petit truc qui fonctionne :sweat_smile:

CleanShot 2024-10-07 at 16.53.30@2x
CleanShot 2024-10-07 at 16.53.30@2x1948×1272 342 KB

Pourquoi la modification de la couleur du sous-icône 1 ne passe pas ? Alors que c’est OK pour les deux autres…

Ha oui top ça :slight_smile:
Alors je n’ai pas remplacé, mais ajouté ^^
(voir plus bas le code et le rendu final).

Ça ne semble pas fonctionner :sweat_smile:

Rendu :

CleanShot 2024-10-07 at 17.03.48@2x
CleanShot 2024-10-07 at 17.03.48@2x1026×196 12 KB

Code YAML

.bubble-button-background {
  opacity: 0.15 !important;
  background-color:
    ${ state === 'armed_away'
      ? 'rgba(0, 255, 0)'
      : state === 'armed_home'
        ? 'rgba(0, 255, 200)'
        : state === 'disarmed'
          ? 'rgba(255, 127, 0)'
          : 'rgb(127, 127, 127)'
    } !important;
}

.bubble-icon {
  opacity: 1 !important;
  color:
    ${ state === 'armed_away'
      ? 'rgba(0, 255, 0)'
      : state === 'armed_home'
        ? 'rgba(0, 255, 200)'
        : state === 'disarmed'
          ? 'rgba(255, 127, 0)'
          : 'rgb(127, 127, 127)'
    } !important;
}

.bubble-icon-container{
  opacity: 0.6 !important;
  background-color: rgba(0, 0, 0) !important;
}

${icon.setAttribute("icon", 
  state === 'armed_away'
    ? 'mdi:shield-lock'
      : state === 'armed_home'
        ? 'mdi:shield-home'
        : state === 'disarmed'
          ? 'mdi:shield-off'
            : 'mdi:shield-alert'
)}

.bubble-sub-button-1 > ha-icon {
  color: rgba(255, 127, 0, 1) !important;
}
.bubble-sub-button-2 > ha-icon {
  color: rgba(0, 255, 200, 1) !important;
}
.bubble-sub-button-3 > ha-icon {
  color: rgba(0, 255, 0, 1) !important;
}

Je peux changer le backgroud aussi pour les sous-icones ?

263

Pour le premier sub button pas besoin de mettre le 1

.bubble-sub-button > ha-icon {
  color: rgba(255, 127, 0, 1) !important;
}
264

ça ne marche pas mieux : :sweat_smile:

CleanShot 2024-10-07 at 22.35.23@2x
CleanShot 2024-10-07 at 22.35.23@2x2058×1388 299 KB

265

Mets tes templates après tes styles, sinon ça bug :sweat_smile: Je dois le rajouter dans la documentation, et mettre une petite note dans l’éditeur.

1 « J'aime »