Après avec un peu d’expérience et de temps, tu peux largement arriver à quelque chose de sympa avec une combinaison de plusieurs cartes natives et l’utilisation du module card-mod et stack-in-card.
Par exemple, ceci :
Alors j’ai pas poussé loin la customisation (on perd le logo en haut à droite et la couleur de l’appui n’est pas customisée) mais il te suffit de remplacer alarm_control_panel.alarme_hacf par alarm_control_panel.<nom_de_ton_alarme> (
le nom apparaît plusieurs fois)
Cliquer pour afficher le code de la carte
type: 'custom:stack-in-card'
title: Alarme
mode: vertical
cards:
- type: conditional
conditions:
- entity: alarm_control_panel.alarme_hacf
state: disarmed
card:
type: 'custom:mod-card'
style: |
ha-card {
padding: 0 0 10px 0;
}
card:
type: horizontal-stack
cards:
- type: button
tap_action:
action: call-service
service: alarm_control_panel.alarm_arm_home
service_data:
entity_id: alarm_control_panel.alarme_hacf
name: Présent
hold_action:
action: none
style: >
ha-card{ box-shadow:none; margin: 0px 5%;border:
solid;border-color: var(--mdc-button-outline-color, rgba(0, 0, 0,
0.12)) !important; border-width: var(--mdc-button-outline-width,
1px) !important; border-radius: var(--mdc-shape-small, 4px)
!important; } ha-card > span{ color: var(--mdc-theme-primary,
#6200ee);
font-family: var(--mdc-typography-button-font-family,
var(--mdc-typography-font-family, Roboto, sans-serif));
font-size: var(--mdc-typography-button-font-size, 0.875rem);
font-weight: var(--mdc-typography-button-font-weight, 500);
letter-spacing: var(--mdc-typography-button-letter-spacing,
0.0892857em);
text-decoration: var(--mdc-typography-button-text-decoration,
none);
text-transform: var(--mdc-typography-button-text-transform,
uppercase);
}
- type: button
tap_action:
action: call-service
service: alarm_control_panel.alarm_arm_away
service_data:
entity_id: alarm_control_panel.alarme_hacf
name: Absent
hold_action:
action: none
style: >
ha-card{box-shadow:none; margin: 0px 5%;border:
solid;border-color: var(--mdc-button-outline-color, rgba(0, 0, 0,
0.12)) !important; border-width: var(--mdc-button-outline-width,
1px) !important; border-radius: var(--mdc-shape-small, 4px)
!important; } ha-card > span{ color: var(--mdc-theme-primary,
#6200ee);
font-family: var(--mdc-typography-button-font-family,
var(--mdc-typography-font-family, Roboto, sans-serif));
font-size: var(--mdc-typography-button-font-size, 0.875rem);
font-weight: var(--mdc-typography-button-font-weight, 500);
letter-spacing: var(--mdc-typography-button-letter-spacing,
0.0892857em);
text-decoration: var(--mdc-typography-button-text-decoration,
none);
text-transform: var(--mdc-typography-button-text-transform,
uppercase);
}
- type: button
tap_action:
action: call-service
service: alarm_control_panel.alarm_arm_night
service_data:
entity_id: alarm_control_panel.alarme_hacf
name: NUIT
hold_action:
action: none
style: >
ha-card{ box-shadow:none; margin: 0px 5%;border:
solid;border-color: var(--mdc-button-outline-color, rgba(0, 0, 0,
0.12)) !important; border-width: var(--mdc-button-outline-width,
1px) !important; border-radius: var(--mdc-shape-small, 4px)
!important; } ha-card > span{ color: var(--mdc-theme-primary,
#6200ee);
font-family: var(--mdc-typography-button-font-family,
var(--mdc-typography-font-family, Roboto, sans-serif));
font-size: var(--mdc-typography-button-font-size, 0.875rem);
font-weight: var(--mdc-typography-button-font-weight, 500);
letter-spacing: var(--mdc-typography-button-letter-spacing,
0.0892857em);
text-decoration: var(--mdc-typography-button-text-decoration,
none);
text-transform: var(--mdc-typography-button-text-transform,
uppercase);
}
- type: conditional
conditions:
- entity: alarm_control_panel.alarme_hacf
state_not: disarmed
card:
type: alarm-panel
states:
- arm_home
- arm_away
entity: alarm_control_panel.alarme_hacf
style: |
.card-header{
display: none;
}
ha-card > ha-label-badge{
display: none;
}