[CARTE] Réveil (ou activation d'automatisation)

Du coup, j’ai eu besoin d’ajouter une heure d’extinction à la carte de base, ce qui me donne :

animate

Le titre de la carte n’est plus cliquable et clignote si la prise associée est allumée.
L’activation/désactivation se fait depuis les boutons ON/OFF
Le réglage de l’heure d’allumage/extinction se fait à l’aide des boutons avec l’icone d’une prise.
Aucun changement pour les boutons des jours.

Code de la carte
style: >
  @keyframes blink {
      50% {
        color: var(--paper-item-icon-active-color);
      }
      100% {
        color: var(--primary-color);
      }
    }
  #root > hui-state-label-element:nth-child(2),#root >
  hui-state-label-element:nth-child(3) {
    animation: {% if is_state('switch.prise_bureau', 'on') %} blink 1.5s ease-in-out infinite{% endif %};
  }

elements:
  - entity: sensor.vide
    prefix: Bureau
    style:
      color: var(--primary-color)
      font-size: 20px
      font-variant: small-caps
      left: 15%
      pointer-events: none
      top: 23%
    tap_action:
      action: none
    type: state-label
  - entity: sensor.vide
    prefix: Clemalex
    style:
      color: var(--primary-color)
      font-size: 20px
      font-variant: small-caps
      left: 15%
      pointer-events: none
      top: 34%
    tap_action:
      action: none
    type: state-label
  - type: 'custom:stack-in-card'
    style:
      bottom: 30%
      left: 15%
    mode: horizontal
    keep:
      background: true
    cards:
      - type: 'custom:button-card'
        entity: input_boolean.wakestatus_1
        show_icon: false
        show_state: false
        name: 'On'
        styles:
          card:
            - width: 50px
            - height: 24px
            - padding: 10%
            - font-size: 16px
            - font-variant: small-caps
            - border: 2px solid var(--primary-color)
            - background: |
                [[[
                  if (entity.state == 'on')
                    return 'var(--primary-color)';
                  else
                    return 'white';
                ]]]
          name:
            - color: |
                [[[
                  if (entity.state == 'on')
                    return 'white';
                  else
                    return 'var(--primary-color)';
                ]]]
      - type: 'custom:button-card'
        entity: input_boolean.wakestatus_1
        show_icon: false
        show_state: false
        name: 'Off'
        styles:
          card:
            - width: 50px
            - height: 24px
            - padding: 10%
            - font-size: 16px
            - font-variant: small-caps
            - border: 2px solid var(--primary-color)
            - background: |
                [[[
                  if (entity.state == 'off')
                    return 'var(--primary-color)';
                  else
                    return 'white';
                ]]]
          name:
            - color: |
                [[[
                  if (entity.state == 'off')
                    return 'white';
                  else
                    return 'var(--primary-color)';
                ]]]
  - type: 'custom:state-switch'
    style:
      left: 47%
      top: 36%
    entity: input_boolean.wakesettime_1
    default: 'on'
    transition: flip
    transition_time: 300
    states:
      'on':
        entity: input_datetime.wake_time_1_on
        hide:
          name: true
        hour_step: 1
        layout:
          embedded: false
          name: inside
          align_controls: center
        link_values: true
        minute_step: 1
        name: ''
        style:
          .: |
            ha-card {
              box-shadow: none;
              background-color: rgba(0,0,0,0);
              opacity: {% if is_state('input_boolean.wakestatus_1', 'off') %} 0.3 {% endif %};
              pointer-events: {% if is_state('input_boolean.wakestatus_1', 'off') %} none {% endif %};
            }
            .time-picker-row{
              margin-left: 5px !important;
            }
          .time-picker-row:
            .time-picker-content:
              .: |
                .time-separator {
                  display: none;
                }
              time-unit:
                $: |
                  .time-unit {
                    padding: 2px !important;
                  }
                  .time-input {
                    border: 2px solid var(--primary-color) !important;
                    background-color: rgba(0,0,0,0) !important;
                    color: black !important;
                    border-radius: 5px;
                  }     
                  .time-picker-icon {
                    color: var(--primary-color) !important;
                    z-index: 100;
                  }
        type: 'custom:time-picker-card'
      'off':
        entity: input_datetime.wake_time_1_off
        hide:
          name: true
        hour_step: 1
        layout:
          embedded: false
          name: inside
          align_controls: center
        link_values: true
        minute_step: 1
        name: ''
        style:
          .: |
            ha-card {
              box-shadow: none;
              background-color: rgba(0,0,0,0);
              opacity: {% if is_state('input_boolean.wakestatus_1', 'off') %} 0.3 {% endif %};
              pointer-events: {% if is_state('input_boolean.wakestatus_1', 'off') %} none {% endif %};
            }
            .time-picker-row{
              margin-left: 5px !important;
            }
          .time-picker-row:
            .time-picker-content:
              .: |
                .time-separator {
                  display: none;
                }
              time-unit:
                $: |
                  .time-unit {
                    padding: 2px !important;
                  }
                  .time-input {
                    border: 2px solid var(--primary-color) !important;
                    background-color: rgba(0,0,0,0) !important;
                    color: black !important;
                    border-radius: 5px;
                  }     
                  .time-picker-icon {
                    color: var(--primary-color) !important;
                    z-index: 100;
                  }
        type: 'custom:time-picker-card'
  - entity: input_boolean.wakeweekday_mon_1
    show_label: false
    show_icon: false
    show_name: true
    show_state: false
    name: Lu
    style:
      '--paper-item-icon-color': var(--primary-color)
      right: 15%
      top: 20%
    styles:
      card:
        - width: 30px
        - height: 30px
        - border-radius: 999px
        - background-color: |
            [[[
              if ( (states['input_boolean.wakeweekday_mon_1'].state == 'off') ) return 'var(--primary-color)';
              else return 'var(--paper-item-icon-active-color)';
            ]]] 
        - box-shadow: none
        - border-radius: 999px
        - opacity: |
            [[[
              if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
              else return '1';
            ]]] 
        - pointer-events: |
            [[[
              if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
              else return 'auto';
            ]]] 
      name:
        - color: white
    type: 'custom:button-card'
  - entity: input_boolean.wakeweekday_tue_1
    show_label: false
    show_icon: false
    show_name: true
    show_state: false
    name: Ma
    style:
      '--paper-item-icon-color': var(--primary-color)
      right: 5%
      top: 20%
    styles:
      card:
        - width: 30px
        - height: 30px
        - border-radius: 999px
        - background-color: |
            [[[
              if ( (states['input_boolean.wakeweekday_tue_1'].state == 'off') ) return 'var(--primary-color)';
              else return 'var(--paper-item-icon-active-color)';
            ]]] 
        - box-shadow: none
        - border-radius: 999px
        - opacity: |
            [[[
              if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
              else return '1';
            ]]] 
        - pointer-events: |
            [[[
              if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
              else return 'auto';
            ]]] 
      name:
        - color: white
    type: 'custom:button-card'
  - entity: input_boolean.wakeweekday_wed_1
    show_label: false
    show_icon: false
    show_name: true
    show_state: false
    name: Me
    style:
      '--paper-item-icon-color': var(--primary-color)
      right: 20%
      top: 50%
    styles:
      card:
        - width: 30px
        - height: 30px
        - border-radius: 999px
        - background-color: |
            [[[
              if ( (states['input_boolean.wakeweekday_wed_1'].state == 'off') ) return 'var(--primary-color)';
              else return 'var(--paper-item-icon-active-color)';
            ]]] 
        - box-shadow: none
        - border-radius: 999px
        - opacity: |
            [[[
              if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
              else return '1';
            ]]] 
        - pointer-events: |
            [[[
              if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
              else return 'auto';
            ]]] 
      name:
        - color: white
    type: 'custom:button-card'
  - entity: input_boolean.wakeweekday_thu_1
    show_label: false
    show_icon: false
    show_name: true
    show_state: false
    name: Je
    style:
      '--paper-item-icon-color': var(--primary-color)
      right: 10%
      top: 50%
    styles:
      card:
        - width: 30px
        - height: 30px
        - border-radius: 999px
        - background-color: |
            [[[
              if ( (states['input_boolean.wakeweekday_thu_1'].state == 'off') ) return 'var(--primary-color)';
              else return 'var(--paper-item-icon-active-color)';
            ]]] 
        - box-shadow: none
        - border-radius: 999px
        - opacity: |
            [[[
              if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
              else return '1';
            ]]] 
        - pointer-events: |
            [[[
              if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
              else return 'auto';
            ]]] 
      name:
        - color: white
    type: 'custom:button-card'
  - entity: input_boolean.wakeweekday_fri_1
    show_label: false
    show_icon: false
    show_name: true
    show_state: false
    name: Ve
    style:
      '--paper-item-icon-color': var(--primary-color)
      right: 0%
      top: 50%
    styles:
      card:
        - width: 30px
        - height: 30px
        - border-radius: 999px
        - background-color: |
            [[[
              if ( (states['input_boolean.wakeweekday_fri_1'].state == 'off') ) return 'var(--primary-color)';
              else return 'var(--paper-item-icon-active-color)';
            ]]] 
        - box-shadow: none
        - border-radius: 999px
        - opacity: |
            [[[
              if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
              else return '1';
            ]]] 
        - pointer-events: |
            [[[
              if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
              else return 'auto';
            ]]] 
      name:
        - color: white
    type: 'custom:button-card'
  - entity: input_boolean.wakeweekday_sat_1
    show_label: false
    show_icon: false
    show_name: true
    show_state: false
    name: Sa
    style:
      '--paper-item-icon-color': var(--primary-color)
      right: 15%
      top: 80%
    styles:
      card:
        - width: 30px
        - height: 30px
        - border-radius: 999px
        - background-color: |
            [[[
              if ( (states['input_boolean.wakeweekday_sat_1'].state == 'off') ) return 'var(--primary-color)';
              else return 'var(--paper-item-icon-active-color)';
            ]]] 
        - box-shadow: none
        - border-radius: 999px
        - opacity: |
            [[[
              if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
              else return '1';
            ]]] 
        - pointer-events: |
            [[[
              if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
              else return 'auto';
            ]]] 
      name:
        - color: white
    type: 'custom:button-card'
  - entity: input_boolean.wakeweekday_sun_1
    show_label: false
    show_icon: false
    show_name: true
    show_state: false
    name: Di
    style:
      '--paper-item-icon-color': var(--primary-color)
      right: 5%
      top: 80%
    styles:
      card:
        - width: 30px
        - height: 30px
        - border-radius: 999px
        - background-color: |
            [[[
              if ( (states['input_boolean.wakeweekday_sun_1'].state == 'off') ) return 'var(--primary-color)';
              else return 'var(--paper-item-icon-active-color)';
            ]]] 
        - box-shadow: none
        - border-radius: 999px
        - opacity: |
            [[[
              if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
              else return '1';
            ]]] 
        - pointer-events: |
            [[[
              if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
              else return 'auto';
            ]]] 
      name:
        - color: white
    type: 'custom:button-card'
  - type: 'custom:stack-in-card'
    style:
      top: 80%
      left: 48%
    mode: horizontal
    keep:
      background: true
    cards:
      - type: 'custom:button-card'
        entity: input_boolean.wakesettime_1
        icon: 'mdi:power-plug'
        show_label: false
        show_name: false
        show_state: false
        styles:
          card:
            - line-height: 0
            - width: 50px
            - height: 24px
            - border: 2px solid var(--primary-color)
            - background: |
                [[[
                  if (entity.state == 'on')
                    return 'var(--primary-color)';
                  else
                    return 'white';
                ]]]
            - opacity: |
                [[[
                  if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
                  else return '1';
                ]]] 
            - pointer-events: |
                [[[
                  if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
                  else return 'auto';
                ]]] 
          icon:
            - transform: scale(1.2)
            - color: |
                [[[
                  if (entity.state == 'on')
                    return 'white';
                  else
                    return 'var(--primary-color)';
                ]]]
      - type: 'custom:button-card'
        entity: input_boolean.wakesettime_1
        icon: 'mdi:power-plug-off'
        show_label: false
        show_name: false
        show_state: false
        styles:
          card:
            - line-height: 0
            - width: 50px
            - height: 24px
            - border: 2px solid var(--primary-color)
            - background: |
                [[[
                  if (entity.state == 'off')
                    return 'var(--primary-color)';
                  else
                    return 'white';
                ]]]
            - opacity: |
                [[[
                  if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
                  else return '1';
                ]]] 
            - pointer-events: |
                [[[
                  if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
                  else return 'auto';
                ]]] 
          icon:
            - transform: scale(1.2)
            - color: |
                [[[
                  if (entity.state == 'off')
                    return 'white';
                  else
                    return 'var(--primary-color)';
                ]]]
image: /local/images/transparent/transparent_clock.png
type: picture-elements

Image transparent agrandie : [transparent_clock ] ← Elle est entre les crochets :wink:

Et l’automatisation qui va avec :

Code de l'automatisation
- id: 'bureau_clemalex'
  alias: bureau_clemalex
  description: ''
  trigger:
  - platform: state
    entity_id: sensor.time
  condition:
  - condition: template
    value_template: '{% set today = ''input_boolean.wakeweekday_'' ~ now().strftime("%a")
      | lower ~ ''_1'' %} {{ is_state(''input_boolean.wakestatus_1'', ''on'') and
      is_state(today, ''on'') }}

      '
  action:
  - choose:
    - conditions:
      - condition: template
        value_template: "{% set time_off = strptime(states('input_datetime.wake_time_1_off'),\
          \ '%H:%M:%S').strftime('%H:%M:%S') %} {% set time = strptime(states('sensor.time'),\
          \ '%H:%M').strftime('%H:%M:%S')%} {% if time >= time_off %}\n  true\n{%\
          \ else %}\n  false\n{% endif %}\n"
      sequence:
      - service: switch.turn_off
        entity_id: switch.prise_bureau
    - conditions:
      - condition: template
        value_template: "{% set time_on = strptime(states('input_datetime.wake_time_1_on'),\
          \ '%H:%M:%S').strftime('%H:%M:%S') %} {% set time = strptime(states('sensor.time'),\
          \ '%H:%M').strftime('%H:%M:%S')%} {% if time >= time_on %}\n  true\n{% else\
          \ %}\n  false\n{% endif %}\n"
      sequence:
      - service: switch.turn_on
        entity_id: switch.prise_bureau
  mode: single

Pour rappel les entités :

Les entités
sensor:
  - platform: template
    sensors:
      vide:
        value_template: ""
input_boolean:
  wakesettime_1:
    name: set time
    icon: mdi:clock
  wakestatus_1:
    name: Alarme 1
    icon: mdi:alarm
  wakeweekday_sun_1:
    name: Sunday
    icon: mdi:calendar
  wakeweekday_mon_1:
    name: Monday        
    icon: mdi:calendar
  wakeweekday_tue_1:
    name: Tuesday        
    icon: mdi:calendar
  wakeweekday_wed_1:
    name: Wednesday       
    icon: mdi:calendar
  wakeweekday_thu_1:
    name: Thursday       
    icon: mdi:calendar
  wakeweekday_fri_1:
    name: Friday        
    icon: mdi:calendar
  wakeweekday_sat_1:
    name: Saturday        
    icon: mdi:calendar

input_datetime:
  wake_time_1_on:
    name: Horaire 1 on
    has_time: true
  wake_time_1_off:
    name: Horaire 1 off
    has_time: true