Sonoff SNZB-04P

Bonjour,

J’utilise les capteurs de porte/fenêtre SNZB-04P et j’utilise une carte tuile pour afficher l’état dans mon tableau de bord.
Cependant je ne vois pas comment afficher l’icône d’état fermé en vert et ouvert en rouge? Pouvez vous m’indiquer la procédure?
De base, je peux juste indiquer la couleur rouge pour l’état ouvert.


System Information

version core-2025.1.4
installation_type Home Assistant OS
dev false
hassio true
docker true
user root
virtualenv false
python_version 3.13.1
os_name Linux
os_version 6.6.73-haos
arch x86_64
timezone Europe/Paris
config_dir /config
Home Assistant Community Store
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 1516
Downloaded Repositories 4
Home Assistant Cloud
logged_in false
can_reach_cert_server ok
can_reach_cloud_auth ok
can_reach_cloud ok
Home Assistant Supervisor
host_os Home Assistant OS 14.2
update_channel stable
supervisor_version supervisor-2024.12.3
agent_version 1.6.0
docker_version 27.2.0
disk_total 468.7 GB
disk_used 201.4 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 Studio Code Server (5.18.1), File editor (5.8.0), Get HACS (1.3.1), Samba share (12.4.0), Mosquitto broker (6.5.0), tydom2mqtt (3.5.3), Frigate (0.14.1), ZeroTier One (0.19.0), Plex Media Server (3.6.2), Tailscale (0.24.0), Zigbee2MQTT (2.1.0-1), MyElectricalData (0.13.2)
Dashboards
dashboards 3
resources 1
views 1
mode storage
Recorder
oldest_recorder_run 25 janvier 2025 à 06:00
current_recorder_run 5 février 2025 à 07:00
estimated_db_size 32.05 MiB
database_engine sqlite
database_version 3.47.1

Bonjour,
tu peux le faire avec un thème, en ajoutant ces lignes dans ton thème :

  state-binary_sensor-door-off-color: green
  state-binary_sensor-door-on-color: red
  state-binary_sensor-window-off-color: green
  state-binary_sensor-window-on-color: red

si tu n’as pas de thème, tu peux t’en faire un perso. Une explication :

Merci pour cette réponse mais les lignes ne sont pas reconnues. Je ne vois pas par quoi les remplacer.

Sans voir le code de ton thème, difficile a dire.

J’utilise le code Dark pastel:

Dark Pastel:
  modes:
    dark:
      # Fonts
      primary-font-family: 'Raleway,sans-serif'
      paper-font-common-base_-_font-family: 'var(--primary-font-family)'
      paper-font-common-code_-_font-family: 'var(--primary-font-family)'
      paper-font-body1_-_font-family: 'var(--primary-font-family)'
      paper-font-subhead_-_font-family: 'var(--primary-font-family)'
      paper-font-headline_-_font-family: 'var(--primary-font-family)'
      paper-font-caption_-_font-family: 'var(--primary-font-family)'
      paper-font-title_-_font-family: 'var(--primary-font-family)'
      ha-card-header-font-family: 'var(--primary-font-family)'

      # Text
      text-color: '#ffffff'
      primary-text-color: 'var(--text-color)'
      text-primary-color: 'var(--text-color)'
      secondary-text-color: '#bac0c6'
      text-medium-light-color: '#a0a2a8'
      text-medium-color: '#80828a'
      disabled-text-color: '#626569'
      text-light-primary-color: 'var(--text-color)'
      text-accent-color: '#0d0a07'
      mdc-theme-on-secondary: 'var(--text-accent-color)'

      # Text Fields and Dropdowns
      mdc-text-field-fill-color: 'var(--background-color)'
      mdc-text-field-ink-color: 'var(--text-color)'
      mdc-select-fill-color: 'var(--background-color)'
      mdc-text-field-label-ink-color: 'var(--secondary-text-color)'
      input-fill-color: 'var(--background-color)'
      input-ink-color: 'var(--text-color)'
      input-label-ink-color: 'var(--text-color)'
      input-disabled-fill-color: 'var(--background-color)'
      input-disabled-ink-color: 'var(--disabled-text-color)'
      input-disabled-label-ink-color: 'var(--disabled-text-color)'
      input-idle-line-color: 'var(--background-color)'
      input-dropdown-icon-color: 'var(--secondary-text-color)'
      input-hover-line-color: 'var(--primary-color)'
      input-disabled-line-color: 'var(--disabled-text-color)'
      input-outlined-idle-border-color: 'var(--disabled-text-color)'
      input-outlined-hover-border-color: 'var(--disabled-text-color)'
      input-outlined-disabled-border-color: 'var(--disabled-text-color)'
      code-editor-background-color: '#1c1c1c'
      codemirror-property: 'var(--accent-color)'

      # Main Colors
      app-header-background-color: 'var(--background-color)'
      header-height: '48px'
      accent-color: 'rgb(var(--mush-rgb-orange))'
      accent-medium-color: 'var(--accent-color)'
      primary-color: 'var(--accent-color)'
      dark-primary-color: 'var(--accent-color)'
      light-primary-color: 'var(--disabled-text-color)'
      paper-card-background-color: 'var(--background-color)'

      # Background
      background-color: '#131313'
      primary-background-color: 'var(--background-color)'
      background-color-2: '#4B4B4B'
      secondary-background-color: '"none"'
      markdown-code-background-color: 'var(--background-color)'
      material-background-color: 'var(--paper-listbox-background-color)'
      material-secondary-background-color: 'var(--ha-card-background)'
      clear-background-color: 'var(--accent-color)'

      # Card
      card-background-color: 'var(--ha-card-background)'
      ha-card-background: '#1F1F1F'
      ha-card-box-shadow: '0px 2px 4px 0px rgba(0,0,0,0.16)'
      ha-card-border-radius: '5px'
      border-radius: 'var(--ha-card-border-radius)'
      ha-card-border-color: 'rgba(0,0,0,0)'
      ha-card-border-width: '0'
      ha-card-header-color: 'var(--primary-text-color)'

      # Dialog
      ha-dialog-border-radius: 'var(--ha-card-border-radius)'

      # Icons
      paper-item-icon-color: '#ebebeb'
      paper-item-icon-active-color: 'var(--accent-color)'
      paper-item-selected_-_background-color: 'var(--background-color)'
      icon-color: 'var(--text-color)'

      # RGB States
      rgb-state-default-color: '253, 203, 110'
      rgb-accent-color: 'var(--rgb-state-default-color)'

      # State Colors
      state-active-color: 'var(--state-orange-color)'
      state-red-color: 'rgb(var(--mush-rgb-red))'
      state-green-color: 'rgb(var(--mush-rgb-green))'
      state-orange-color: 'rgb(var(--mush-rgb-orange))'
      state-alarm_control_panel-armed_away-color: 'var(--state-green-color)'
      state-alarm_control_panel-armed_custom_bypass-color: 'var(--state-green-color)'
      state-alarm_control_panel-armed_home-color: 'var(--state-green-color)'
      state-alarm_control_panel-armed_night-color: 'var(--state-green-color)'
      state-alarm_control_panel-armed_vacation-color: 'var(--state-green-color)'
      state-alarm_control_panel-arming-color: 'var(--state-orange-color)'
      state-alarm_control_panel-disarming-color: 'var(--state-orange-color)'
      state-alarm_control_panel-pending-color: 'var(--state-orange-color)'
      state-alarm_control_panel-triggered-color: 'var(--state-red-color)'
      state-alert-off-color: 'var(--paper-item-icon-color)'
      state-alert-on-color: 'var(--state-red-color)'
      state-automation-active-color: 'var(--accent-color)'
      state-binary_sensor-active-color: 'var(--accent-color)'
      state-binary_sensor-battery-on-color: 'var(--state-red-color)'
      state-binary_sensor-carbon_monoxide-on-color: 'var(--state-red-color)'
      state-binary_sensor-gas-on-color: 'var(--state-red-color)'
      state-binary_sensor-heat-on-color: 'var(--state-red-color)'
      state-binary_sensor-lock-on-color: 'var(--state-red-color)'
      state-binary_sensor-moisture-on-color: 'var(--state-red-color)'
      state-binary_sensor-problem-on-color: 'var(--state-red-color)'
      state-binary_sensor-safety-on-color: 'var(--state-red-color)'
      state-binary_sensor-smoke-on-color: 'var(--state-red-color)'
      state-binary_sensor-sound-on-color: 'var(--state-red-color)'
      state-binary_sensor-tamper-on-color: 'var(--state-red-color)'
      state-climate-auto-color: 'var(--accent-color)'
      state-climate-cool-color: 'var(--accent-color)'
      state-climate-dry-color: 'var(--accent-color)'
      state-climate-fan_only-color: 'var(--accent-color)'
      state-climate-heat-color: 'var(--state-orange-color)'
      state-climate-heat-cool-color: 'var(--accent-color)'
      state-cover-active-color: 'var(--accent-color)'
      state-device_tracker-active-color: 'var(--accent-color)'
      state-device_tracker-home-color: 'var(--accent-color)'
      state-fan-active-color: 'var(--accent-color)'
      state-group-active-color: 'var(--accent-color)'
      state-humidifier-active-color: 'var(--accent-color)'
      state-input_boolean-active-color: 'var(--accent-color)'
      state-light-active-color: 'var(--accent-color)'
      state-lock-jammed-color: 'var(--state-red-color)'
      state-lock-locked-color: 'var(--accent-color)'
      state-lock-pending-color: 'var(--state-orange-color)'
      state-lock-unlocked-color: 'var(--paper-item-icon-color)'
      state-media_player-active-color: 'var(--accent-color)'
      state-person-active-color: 'var(--accent-color)'
      state-person-home-color: 'var(--accent-color)'
      state-plant-active-color: 'var(--state-red-color)'
      state-siren-active-color: 'var(--state-red-color)'
      state-sun-above_horizon-color: 'var(--amber-color)'
      state-sun-below_horizon-color: 'var(--indigo-color)'
      state-switch-active-color: 'var(--accent-color)'
      state-update-active-color: 'var(--accent-color)'
      state-vacuum-active-color: 'var(--accent-color)'
      state-sensor-battery-high-color: 'var(--accent-color)'
      state-sensor-battery-low-color: 'var(--state-red-color)'
      state-sensor-battery-medium-color: 'var(--state-orange-color)'

      # Sidebar
      sidebar-background-color: 'var(--background-color)'
      sidebar-icon-color: '#7b7d80'
      sidebar-selected-icon-color: 'var(--accent-color)'
      sidebar-selected-text-color: 'var(--text-color)'
      paper-listbox-background-color: 'var(--sidebar-background-color)'
      divider-color: 'var(--background-color)'

      # Sliders
      paper-slider-knob-color: 'var(--accent-color)'
      paper-slider-pin-color: 'var(--background-color-2)'
      paper-slider-active-color: 'var(--accent-color)'
      paper-slider-container-color: 'var(--background-color-2)'
      paper-slider-knob-start-color: 'var(--accent-color)'
      paper-slider-secondary-color: 'var(--secondary-background-color)'
      paper-slider-disabled-active-color: 'var(--disabled-text-color)'
      paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'

      # Toggle:
      paper-toggle-button-checked-bar-color: 'var(--accent-color)'
      mdc-theme-primary: 'var(--accent-color)'
      paper-toggle-button-checked-ink-color: 'var(--accent-color)'
      paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
      paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
      paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'

      # Switch
      switch-unchecked-color: '#8c8c8c'
      switch-checked-button-color: 'var(--accent-color)'
      switch-unchecked-track-color: 'var(--background-color-2)'
      switch-checked-track-color: 'var(--background-color-2)'
      switch-checked-color: 'var(--paper-toggle-button-checked-button-color)'
      switch-unchecked-button-color: 'var(--disabled-text-color)'

      # Radio Button
      paper-radio-button-checked-color: 'var(--accent-color)'
      mdc-radio-unchecked-color: 'var(--text-medium-color)'

      # Checkboxes
      mdc-checkbox-unchecked-color: 'var(--text-medium-color)'

      # Popups
      more-info-header-background: 'var(--secondary-background-color)'
      paper-dialog-background-color: 'var(--background-color)'
      popup-border-radius: 'var(--ha-card-border-radius)'

      # Tables
      table-row-background-color: 'var(--background-color)'
      table-row-alternative-background-color: 'var(--ha-card-background)'

      # Badges and gauges
      label-badge-background-color: 'var(--background-color)'
      label-badge-text-color: 'var(--text-primary-color)'
      label-badge-red: 'var(--state-red-color)'
      label-badge-blue: 'var(--state-blue-color)'
      label-badge-green: 'var(--state-green-color)'
      label-badge-yellow: 'var(--state-orange-color)'

      paper-input-container-focus-color: 'var(--accent-color)'

      # Toast
      paper-toast-background-color: '#353535'

      # Calendar
      lumo-primary-text-color: 'var(--accent-color)'
      lumo-secondary-text-color: 'var(--accent-color)'
      lumo-primary-color: 'var(--accent-color)'
      lumo-body-text-color: 'var(--text-color)'
      lumo-base-color: 'var(--background-color)'
      lumo-header-text-color: 'var(--lumo-body-text-color)'
      lumo-tertiary-text-color: 'var(--lumo-body-text-color)'
      lumo-shade: 'var(--background-color)'
      lumo-shade-90pct: 'rgba(34, 34, 34, .9)'
      lumo-shade-80pct: 'rgba(34, 34, 34, .8)'
      lumo-shade-70pct: 'rgba(34, 34, 34, .7)'
      lumo-shade-60pct: 'rgba(34, 34, 34, .6)'
      lumo-shade-50pct: 'rgba(34, 34, 34, .5)'
      lumo-shade-40pct: 'rgba(34, 34, 34, .4)'
      lumo-shade-30pct: 'rgba(34, 34, 34, .3)'
      lumo-shade-20pct: 'rgba(34, 34, 34, .2)'
      lumo-shade-10pct: 'rgba(34, 34, 34, .1)'
      lumo-shade-5pct: 'rgba(34, 34, 34, .05)'
      lumo-tint-5pct: 'var(--background-color)'

      # Custom Header
      ch-background: 'var(--background-color)'
      ch-active-tab-color: 'var(--accent-color)'
      ch-notification-dot-color: 'var(--accent-color)'
      ch-all-tabs-color: 'var(--sidebar-icon-color)'
      ch-tab-indicator-color: 'var(--accent-color)'

      # Mini Mediaplayer
      mini-media-player-base-color: 'var(--text-color)'
      mini-media-player-accent-color: 'var(--accent-color)'
      mini-media-player-button-color: 'var(--ha-card-background)'

      # Alarm
      alarm-color-armed: 'var(--state-red-color)'
      
      # Graph
      track-color: 'rgb(var(--mush-rgb-blue))'

      # Valetudo
      valetudo-map-floor-color: 'var(--switch-unchecked-color)'
      valetudo-map-wall-color: 'var(--label-badge-red)'

      # Mushroom
      mush-spacing: '8px'
      mush-icon-border-radius: 'var(--ha-card-border-radius)'
      mush-control-border-radius: 'var(--ha-card-border-radius)'
      mush-chip-border-radius: 'var(--ha-card-border-radius)'

      # Mushroom colors
      mush-rgb-red: '252, 135, 126'
      mush-rgb-pink: '249, 137, 175'
      mush-rgb-purple: '210, 177, 230'
      mush-rgb-deep-purple:  '161, 140, 199'
      mush-rgb-indigo: '134, 147, 217'
      mush-rgb-blue: '140, 180, 255'
      mush-rgb-light-blue: '128, 214, 255'
      mush-rgb-cyan: '132, 220, 216'
      mush-rgb-teal: '114, 172, 160'
      mush-rgb-green: '151, 212, 146'
      mush-rgb-light-green:  '191, 234, 175'
      mush-rgb-lime: '207, 229, 155'
      mush-rgb-yellow: '255, 251, 125'
      mush-rgb-amber: '245, 219, 126'
      mush-rgb-orange: '236, 190, 125'
      mush-rgb-deep-orange:  '239, 165, 121'
      mush-rgb-brown: '189, 169, 162'
      mush-rgb-blue-grey: '174, 190, 198'

Ok, mais ton erreur vient du thème Tuile.yaml.
image

Mais tu peux ajouter les lignes dans ton thème dark pastel, dans la partie #State Colors:

rajoute :

  state-binary_sensor-door-off-color: green
  state-binary_sensor-door-on-color: red
  state-binary_sensor-window-off-color: green
  state-binary_sensor-window-on-color: red

Avec cette méthode, Cela fonctionne uniquement si je clique sur la tuile:
Avant

Après

Mais pas dans le tableau de bord

tu as rechargé le thème après les modifications ?
dans outils de dev / action

Sinon, essaye de vider le cache de ton navigateur.

Regarde dans t’es entité si elles sont bien configurées sur porte , dans les paramètres de l’entité ( la roue crantée ). Afficher en tant que porte.

Oui, j’ai effectué ce que tu as montré.

merci pour le suivi

montre le code de ta carte ?

c’est bien mis sur couleur de l’état par défaut ?
image

1 « J'aime »

:+1: AAh! Merci, c’était le pb ce n’était pas sur couleur de l’état par défaut.

1 « J'aime »