Browser-mod + modification keypad alarmo

Entraide Home Assistant
,
1

Bonjour,

je met en place mon alarme avec alarmo qui fonctionne très bien (même si mes capteur d’origine somfy sont un peut sensible).
J’ai installé dans mon entrée un écran sonoff nspanel pro 120, flashé pour avoir home assistant et mon dashboard spécifique au démarrage (avec utilisateur local seulement)
Grâce au plugin browser-mod quand l’alarme passe en actif, j’ai un pop up plein écran pour désactiver l’alarme avec le keypad d’alarmo et quand l’alarme est désactiver ce même pop-up est désactivée.

Mon soucis est que je ne parvient pas à modifier l’interface du keypad dans browser-mod, dans un tableau de bord de test aucun soucis avec card-mod, mais cela ne semble pas fonctionné en mettant la même configuration dans le content de mon automatisation browser-mod.

Dans l’idéale je voudrais supprimé le nom, ainsi que le logo et augmenté la taille des touches.

J’ai chercher dans le forum, mais n’est malheureusement pas trouvé mon bonheur.

En espérant que cela soit réalisable :wink:

Merci d’avance

Ma configuration

## System Information

version | core-2025.4.4
-- | --
installation_type | Home Assistant OS
dev | false
hassio | true
docker | true
user | root
virtualenv | false
python_version | 3.13.2
os_name | Linux
os_version | 6.12.23-haos
arch | x86_64
timezone | Europe/Paris
config_dir | /config

<details><summary>Home Assistant Community Store</summary>

GitHub API | ok
-- | --
GitHub Content | ok
GitHub Web | ok
HACS Data | ok
GitHub API Calls Remaining | 5000
Installed Version | 2.0.5
Stage | running
Available Repositories | 1682
Downloaded Repositories | 13

</details>

<details><summary>Home Assistant Cloud</summary>

logged_in | false
-- | --
can_reach_cert_server | ok
can_reach_cloud_auth | ok
can_reach_cloud | ok

</details>

<details><summary>Home Assistant Supervisor</summary>

host_os | Home Assistant OS 15.2
-- | --
update_channel | stable
supervisor_version | supervisor-2025.04.0
agent_version | 1.7.2
docker_version | 28.0.4
disk_total | 146.0 GB
disk_used | 10.9 GB
healthy | true
supported | true
host_connectivity | true
supervisor_connectivity | true
ntp_synchronized | true
virtualization | 
board | generic-x86-64
supervisor_api | ok
version_api | ok
installed_addons | Terminal & SSH (9.17.0), Silicon Labs Multiprotocol (2.4.5), Mosquitto broker (6.5.0), SomfyProtect2MQTT (2025.3.0), File editor (5.8.0), go2rtc (1.9.9), Zigbee2MQTT (2.2.1-1), OpenThread Border Router (2.13.0), Matterbridge Home Assistant Add-on (1.0.5), Matter Server (7.0.0)

</details>

<details><summary>Dashboards</summary>

dashboards | 4
-- | --
resources | 7
views | 13
mode | storage

</details>

<details><summary>Network Configuration</summary>

adapters | lo (disabled), wlp2s0 (enabled, default, auto), docker0 (disabled), hassio (disabled), veth1f0de4c (disabled), vethb81a8e5 (disabled), vethaa35276 (disabled), veth71f1304 (disabled), veth8bfc32e (disabled), veth9dee1ee (disabled), veth78bd1a4 (disabled), wpan0 (disabled), vethd241b1e (disabled), vetha760a4c (disabled)
-- | --


</details>

<details><summary>Recorder</summary>

oldest_recorder_run | 14 avril 2025 à 14:45
-- | --
current_recorder_run | 25 avril 2025 à 18:19
estimated_db_size | 66.65 MiB
database_engine | sqlite
database_version | 3.48.0

</details>
2

Bonjour,
partage le code de browser-mod et la carte + modif de card-mod., car la difficile de t’aider.

3

avec les paramètres par défauts je parvient a modifier la taille des touches:

alias: test_pop_up_2
description: ""
triggers:
  - trigger: state
    entity_id:
      - alarm_control_panel.alarmo
    from: null
    to: armed_night
conditions: []
actions:
  - action: browser_mod.popup
    metadata: {}
    data:
      dismissable: true
      size: fullscreen
      browser_id:
        - 7814140535da45edcd691966ee1cf5bd
        - c350621c7134a72979e7a481e1b8bd3c
      content:
        type: custom:alarmo-card
        entity: alarm_control_panel.alarmo
        name: Alarme
        keep_keypad_visible: true
        use_clear_icon: true
        button_scale_actions: 1
        button_scale_keypad: 1.6
mode: single

cependant avec du card-mod j’ai un écran noir, aussi bien sur le PC que le sonoff (les modifications proviennent d’un exemple pris sur le forum et fonctionnant dans un dashboard):

alias: test_pop_up_2
description: ""
triggers:
  - trigger: state
    entity_id:
      - alarm_control_panel.alarmo
    from: null
    to: armed_night
conditions: []
actions:
  - action: browser_mod.popup
    metadata: {}
    data:
      dismissable: true
      size: fullscreen
      browser_id:
        - 7814140535da45edcd691966ee1cf5bd
        - c350621c7134a72979e7a481e1b8bd3c
      content:
        type: custom:alarmo-card
        entity: alarm_control_panel.alarmo
        name: Alarme
        keep_keypad_visible: true
        use_clear_icon: true
        button_scale_actions: 1
        button_scale_keypad: 1.6
	states: {}
        show_messages: false
        show_ready_indicator: true
        show_bypassed_sensors: true
        use_code_dialog: false
        grid_options:
    	  columns: full
    	card_mod:
          style:
            alarmo-button$:
              mwc-button$: |
        		#button {
                  box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
                  border: 1px rgba(0,0,0,1.0) outset;
                  border-radius: 25px;
                  margin: 4px;
                }
    	    ha-textfield $: |
              .mdc-text-field {
                border-radius: 25px !important;
              }
              .mdc-text-field__ripple {
                border-radius: 25px !important;
              }      
                .mdc-line-ripple {
                display: none !important;
              }
            .: |
            ha-card {
                margin-top: -5px;
                background: transparent;
              }
            ha-card > div.header > div.icon > alarmo-state-badge {
                --state-alarm_control_panel-armed_away-color: var(--red-color);
                --state-alarm_control_panel-armed_custom_bypass-color: var(--red-color);
                --state-alarm_control_panel-armed_home-color: var(--red-color);
                --state-alarm_control_panel-armed_night-color: var(--red-color);
                --state-alarm_control_panel-armed_vacation-color: var(--red-color);
                --state-alarm_control_panel-arming-color: var(--orange-color);
                --state-alarm_control_panel-disarming-color: var(--orange-color);
                --state-alarm_control_panel-pending-color: var(--orange-color);
                --state-alarm_control_panel-triggered-color: var(--red-color);
                --state-alarm_control_panel-disarmed-color: var(--green-color)
                display: none !important;
              }
            ha-textfield {
                box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
                border: 1px rgba(0,0,0,1.0) outset;
                border-radius: 25px;
              }
            ha-card > div.header > div.name {
                display: none !important;
              }
        column_span: 4
mode: single
4

Tu as une mauvaise indexions. Des soucis d’espaces mal géré.

test ce code:

alias: test_pop_up_2
description: ""
triggers:
  - trigger: state
    entity_id:
      - alarm_control_panel.alarmo
    from: null
    to: armed_night
conditions: []
actions:
  - action: browser_mod.popup
    metadata: {}
    data:
      dismissable: true
      size: fullscreen
      browser_id:
        - 7814140535da45edcd691966ee1cf5bd
        - c350621c7134a72979e7a481e1b8bd3c
      content:
        type: custom:alarmo-card
        entity: alarm_control_panel.alarmo
        name: Alarme
        keep_keypad_visible: true
        use_clear_icon: true
        button_scale_actions: 1
        button_scale_keypad: 1.6
        show_messages: false
        show_ready_indicator: true
        show_bypassed_sensors: true
        use_code_dialog: false
        card_mod:
          style:
            alarmo-button$:
              mwc-button$: |
                #button {
                  box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
                  border: 1px rgba(0,0,0,1.0) outset;
                  border-radius: 25px;
                  margin: 4px;
                }
            ha-textfield $: |
              .mdc-text-field {
                border-radius: 25px !important;
              }
              .mdc-text-field__ripple {
                border-radius: 25px !important;
              }      
              .mdc-line-ripple {
                display: none !important;
              }
            .: |
              ha-card {
                margin-top: -5px;
                background: transparent;
              }
              ha-card > div.header > div.icon > alarmo-state-badge {
                --state-alarm_control_panel-armed_away-color: var(--red-color);
                --state-alarm_control_panel-armed_custom_bypass-color: var(--red-color);
                --state-alarm_control_panel-armed_home-color: var(--red-color);
                --state-alarm_control_panel-armed_night-color: var(--red-color);
                --state-alarm_control_panel-armed_vacation-color: var(--red-color);
                --state-alarm_control_panel-arming-color: var(--orange-color);
                --state-alarm_control_panel-disarming-color: var(--orange-color);
                --state-alarm_control_panel-pending-color: var(--orange-color);
                --state-alarm_control_panel-triggered-color: var(--red-color);
                --state-alarm_control_panel-disarmed-color: var(--green-color)
                display: none !important;
              }
              ha-textfield {
                box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
                border: 1px rgba(0,0,0,1.0) outset;
                border-radius: 25px;
              }
              ha-card > div.header > div.name {
                display: none !important;
              }
5

Au top, merci :+1:
maintenant il faut que je regarde pour supprimer l’icône et le titre afin de gagner de la place et pouvoir augmenté le plus possible la taille des touches

6

image
image950×737 35.9 KB

      ha-card > ha-button-menu {
        display: none;
      }
      ha-card > div.header {
        display: none !important;
      }
1 « J'aime »
7

:ok_hand:

lol et moi qui bug depuis ce matin, un grand merci

1 « J'aime »
8

Sans vouloir abusé, ce keypad ne servant que pour la désactivation de l’alarme et-il possible de déplacer le bouton le bouton de validation sur le coté gauche du « 0 » avec un « V » ou une icône a la place du texte ?

Je ne cherche pas a avoir une réponse toute faite, juste savoir si c’est réalisable, afin que je ne cherche pas inutilement

9

Tout est possible avec card-mod.

1 « J'aime »
10

Après quelques essais et grâce à la vidéo de @Clemalex (Personnaliser ses cartes avec Card-mod) j’ai réussi a faire quelque chose, ce n’est pas parfait mais sa ressemble a quelque chose, hormis quand le code saisi n’est pas bon.

affichage quand pas d’erreur:

alarmo_ok
alarmo_ok338×285 9.51 KB

affichage après un code erroné:

alarmo_fail
alarmo_fail383×306 10.7 KB

voici mon code actuel qui fera certainement saigner les yeux des pros:

alias: test-modif-pop-up-sonoff
description: ""
triggers:
  - trigger: state
    entity_id:
      - alarm_control_panel.alarmo
    from: null
    to: armed_night
conditions: []
actions:
  - action: browser_mod.popup
    metadata: {}
    data:
      dismissable: true
      size: fullscreen
      browser_id:
        - d47ec484abe84f986f3626019f2b32b0
      content:
        type: custom:alarmo-card
        entity: alarm_control_panel.alarmo
        name: Alarme
        keep_keypad_visible: true
        use_clear_icon: true
        button_scale_actions: 1
        button_scale_keypad: 1.8
        show_messages: false
        show_ready_indicator: true
        show_bypassed_sensors: true
        use_code_dialog: false
        card_mod:
          style:
            alarmo-button$:
              mwc-button$: |
                #button {
                  width: 146px;
                  height: 73.1px;
                }
            ha-textfield $: |
              .mdc-text-field {
                border-radius: 25px !important;
              }
              .mdc-text-field__ripple {
                border-radius: 25px !important;
              }      
              .mdc-line-ripple {
                display: none !important;
              }
            .: |
              ha-card {
                margin-top: -5px;
                background: transparent;
              }
              ha-card > div.header {
                display: none !important;
              }
              ha-card > ha-button-menu {
                display: none !important;
              }
              ha-card > keypad {
                max-width: 600px
              }
              ha-card > #armActions {
                position: absolute;
                top: 347px;
                left: 725px;
                width: 130px;
                height: 73.1px;
              }
              .leading {
              display: contents;
              }
              #armActions > alarmo-button:nth-child(1) > span:nth-child(2) {
                display: none !important;
              }
mode: single

je n’est pas encore tester sur le sonoff, n’étant pas a la maison, mais il y aura certainement des modification a apporté, j’aurais aimer déplacer le bouton directement dans la case vide du tableau au lieu de modifier sa position comme j’ai fait mais clairement cela ne semble pas être de mon niveau.

11

voila le résultat sur le sonoff après une petite correction en cas d’erreur et une adaptation de la position du bouton :grinning:

sonoff

1 « J'aime »
12

le code si jamais cela peut aider quelqu’un :wink:

action: browser_mod.popup
metadata: {}
data:
  dismissable: true
  size: fullscreen
  browser_id:
    - 7814140535da45edcd691966ee1cf5bd
  content:
    type: custom:alarmo-card
    entity: alarm_control_panel.alarmo
    name: Alarme
    keep_keypad_visible: true
    use_clear_icon: true
    button_scale_actions: 1
    button_scale_keypad: 1.8
    show_messages: false
    show_ready_indicator: true
    show_bypassed_sensors: true
    use_code_dialog: false
    card_mod:
      style:
        alarmo-button$:
          mwc-button$: |
            #button {
              width: 146px;
              height: 73.1px;
            }
        ha-textfield $: |
          .mdc-text-field {
            border-radius: 25px !important;
          }
          .mdc-text-field__ripple {
            border-radius: 25px !important;
          }      
          .mdc-line-ripple {
            display: none !important;
          }
          .mdc-text-field-helper-line {
            display: none !important;
          }
        .: |
          ha-card {
            margin-top: -5px;
            background: transparent;
          }
          ha-card > div.header {
            display: none !important;
          }
          ha-card > ha-button-menu {
            display: none !important;
          }
          ha-card > keypad {
            max-width: 600px
          }
          ha-card > #armActions {
            position: absolute;
            top: 346px;
            left: 210px;
            width: 130px;
            height: 73.1px;
          }
          .leading {
          display: contents;
          }
          #armActions > alarmo-button:nth-child(1) > span:nth-child(2) {
            display: none !important;
          }
13

Ce sujet a été automatiquement fermé après 2 jours. Aucune réponse n’est permise dorénavant.