Mushroom + Timer Bar Card - Desligando dispositivos por timer

Olá pessoal, hoje vou trazer um card super interessante para utilizar nas suas automações.

Existem outras formas de fazer, porém com mushroom foi o que consegui:

Para que serve:

Se você tem um ar condicionado, ventilador, aquecedor e quer ir dormir porém não quer que fique a noite toda ligado, você pode colocar um timer. Veja abaixo:

video5053347993785205908

Coloquei o tempo de 1min, após dar esse tempo o dispositivo se desliga e zera o cronometro.

video5051096193971520344

Requisitos:

  • Ter instalado o mushroom
  • Ter instalado timer bar card (procure por Timer Bar Card no hacs)

Vamos precisar configurar 2 ajudantes um timer e outro input_datetime.

Para isso vá em:

Configurações > Dispositivos & Serviços > Entidades Ajudantes > Criar Ajudante

image

Vamos precisar desses dois.

Criando o timer (no meu exemplo vou usar abajur, mas utilize nome que quiser)

image

Agora vamos criar um datetime

image

Não esqueça de marcar somente Hora

Ótimo agora você deve ter um timer.abajur e um input_datetime.abajur


EU UTILIZO NODERED PARA AUTOMAÇÕES, ENTÃO ESTAREI DISPONIBILIZANDO O FLUXO. MAS VOCÊ PODE ADAPTADAR A LÓGICA PARA AS AUTOMAÇÕES DO HA.

IMPORTE O CÓDIGO:

[{"id":"3771df301d116fe4","type":"group","z":"3d0720524714db6d","name":"Timer Abajur","style":{"label":true},"nodes":["8c2cf278a38c4317","7bf2bec48880d762","92f0599933de5360","49840e33f0a117b8","117e2978cbede9d5","ca0e201605bfb0d9","4b4269b53e0db2bd","ce3a718aa54420fa"],"x":274,"y":159,"w":752,"h":142},{"id":"8c2cf278a38c4317","type":"server-state-changed","z":"3d0720524714db6d","g":"3771df301d116fe4","name":"Tempo alterado","server":"db1ab0af.caa65","version":4,"exposeToHomeAssistant":false,"haConfig":[{"property":"name","value":""},{"property":"icon","value":""}],"entityidfilter":"input_datetime.lareira","entityidfiltertype":"exact","outputinitially":false,"state_type":"str","haltifstate":"","halt_if_type":"str","halt_if_compare":"is","outputs":1,"output_only_on_state_change":true,"for":"0","forType":"num","forUnits":"minutes","ignorePrevStateNull":false,"ignorePrevStateUnknown":false,"ignorePrevStateUnavailable":false,"ignoreCurrentStateUnknown":false,"ignoreCurrentStateUnavailable":false,"outputProperties":[{"property":"timer","propertyType":"msg","value":"","valueType":"entityState"},{"property":"data","propertyType":"msg","value":"","valueType":"eventData"},{"property":"topic","propertyType":"msg","value":"","valueType":"triggerId"}],"x":380,"y":260,"wires":[["7bf2bec48880d762"]]},{"id":"7bf2bec48880d762","type":"switch","z":"3d0720524714db6d","g":"3771df301d116fe4","name":"!= 00:00:00","property":"timer","propertyType":"msg","rules":[{"t":"eq","v":"00:00:00","vt":"str"},{"t":"neq","v":"00:00:00","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":550,"y":260,"wires":[["4b4269b53e0db2bd"],["49840e33f0a117b8"]]},{"id":"92f0599933de5360","type":"api-call-service","z":"3d0720524714db6d","g":"3771df301d116fe4","name":"Inicia cronometro","server":"db1ab0af.caa65","version":5,"debugenabled":false,"domain":"timer","service":"start","areaId":[],"deviceId":[],"entityId":["timer.lareira"],"data":"","dataType":"jsonata","mergeContext":"","mustacheAltTags":false,"outputProperties":[],"queue":"none","x":890,"y":260,"wires":[[]]},{"id":"49840e33f0a117b8","type":"function","z":"3d0720524714db6d","g":"3771df301d116fe4","name":"passa tempo","func":"msg.payload = {\n    data: {\n        \"duration\": msg.timer\n    }\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":710,"y":260,"wires":[["92f0599933de5360"]]},{"id":"117e2978cbede9d5","type":"server-state-changed","z":"3d0720524714db6d","g":"3771df301d116fe4","name":"Timer = zero","server":"db1ab0af.caa65","version":4,"exposeToHomeAssistant":false,"haConfig":[{"property":"name","value":""},{"property":"icon","value":""}],"entityidfilter":"timer.lareira","entityidfiltertype":"exact","outputinitially":false,"state_type":"str","haltifstate":"idle","halt_if_type":"str","halt_if_compare":"is","outputs":2,"output_only_on_state_change":true,"for":"0","forType":"num","forUnits":"minutes","ignorePrevStateNull":false,"ignorePrevStateUnknown":false,"ignorePrevStateUnavailable":false,"ignoreCurrentStateUnknown":false,"ignoreCurrentStateUnavailable":false,"outputProperties":[{"property":"payload","propertyType":"msg","value":"","valueType":"entityState"},{"property":"data","propertyType":"msg","value":"","valueType":"eventData"},{"property":"topic","propertyType":"msg","value":"","valueType":"triggerId"}],"x":370,"y":200,"wires":[["ca0e201605bfb0d9"],[]]},{"id":"ca0e201605bfb0d9","type":"api-call-service","z":"3d0720524714db6d","g":"3771df301d116fe4","name":"Zera tempo","server":"db1ab0af.caa65","version":5,"debugenabled":false,"domain":"input_datetime","service":"set_datetime","areaId":[],"deviceId":[],"entityId":["input_datetime.lareira"],"data":"{\"time\":\"00:00:00\"}","dataType":"jsonata","mergeContext":"","mustacheAltTags":false,"outputProperties":[],"queue":"none","x":550,"y":200,"wires":[["4b4269b53e0db2bd"]]},{"id":"4b4269b53e0db2bd","type":"api-call-service","z":"3d0720524714db6d","g":"3771df301d116fe4","name":"Zera cronometro","server":"db1ab0af.caa65","version":5,"debugenabled":false,"domain":"timer","service":"finish","areaId":[],"deviceId":[],"entityId":["timer.lareira"],"data":"","dataType":"jsonata","mergeContext":"","mustacheAltTags":false,"outputProperties":[],"queue":"none","x":720,"y":200,"wires":[["ce3a718aa54420fa"]]},{"id":"ce3a718aa54420fa","type":"api-call-service","z":"3d0720524714db6d","g":"3771df301d116fe4","name":"Desligar dispositivo","server":"db1ab0af.caa65","version":5,"debugenabled":false,"domain":"switch","service":"turn_off","areaId":[],"deviceId":[],"entityId":[],"data":"","dataType":"jsonata","mergeContext":"","mustacheAltTags":false,"outputProperties":[],"queue":"none","x":910,"y":200,"wires":[[]]},{"id":"db1ab0af.caa65","type":"server","name":"Home Assistant","version":5,"addon":true,"rejectUnauthorizedCerts":true,"ha_boolean":"y|yes|true|on|home|open","connectionDelay":true,"cacheJson":true,"heartbeat":false,"heartbeatInterval":30,"areaSelector":"friendlyName","deviceSelector":"friendlyName","entitySelector":"friendlyName","statusSeparator":"at: ","statusYear":"hidden","statusMonth":"short","statusDay":"numeric","statusHourCycle":"h23","statusTimeFormat":"h:m","enableGlobalContextStore":true}]

Altera os entity para os seus.

Timer = zero - você deve colocar o timer.abajur

Zera tempo - você deve colocar input_datime.abajur

Zera cronometro - você deve colocar o timer.abajur

Tempo alterado - você deve colocar input_datime.abajur

Inicia cronometro - você deve colocar timer.abajur

Desligar dispositivo - é um call-service então você pode escolher o que deseja fazer ao chegar ao final do tempo


E aqui está o card utilizado nos dois exemplos acima:

type: custom:vertical-stack-in-card
horizontal: false
cards:
  - type: custom:mushroom-template-card
    primary: Luz Garagem
    icon: >-
      {{ iif (is_state('switch.abajur', 'on'), 'mdi:lightbulb-group',
      'mdi:lightbulb-group-off-outline') }}
    icon_color: '{{ iif (is_state(''switch.abajur'', ''on''), ''green'', ''grey'') }}'
    entity: switch.abajur
    hold_action:
      action: none
    double_tap_action:
      action: none
    card_mod:
      style: |
        :host {
          --primary-text-color:
              {% if is_state('switch.abajur', 'on') %}
                var(--primary-text-color)
              {% else -%}
                var(--secondary-text-color)
              {% endif %}
        }
  - type: custom:timer-bar-card
    entity: timer.teste
    invert: true
    bar_direction: rtl
    bar_width: 60%
    mushroom:
      layout: vertical
      color: green
      secondary_info: none
      primary_info: state
      icon_type: none
    card_mod:
      style: |
        ha-card {
          background: none !important;
          box-shadow: none !important;
        }
  - type: entities
    entities:
      - entity: input_datetime.teste
        secondary_info: none
        card_mod:
          style:
            hui-generic-entity-row $: |
              state-badge { display: none; }
              div.info.pointer { display: none; }
            ha-time-input:
              $ ha-base-time-input $:
                ha-textfield:
                  $: |
                    .mdc-text-field {
                      height: 40px !important;
                    }
                    .mdc-line-ripple::after,
                    .mdc-line-ripple::before {
                      border-bottom-style: none !important;
                    }
                    .mdc-text-field__ripple {
                      display: none !important;
                    }
                ha-select $: |
                  .mdc-select__anchor {
                    height: 40px !important;
                  }
                  .mdc-line-ripple::after,
                  .mdc-line-ripple::before {
                    border-bottom-style: none !important;
                  }
                  .mdc-select__ripple {
                    display: none !important;
                  }
            .: |
              :host {
                --mdc-text-field-fill-color: transparent;
                --mdc-select-fill-color: transparent;
                {% if is_state('switch.abajur','off') %}
                  --mdc-text-field-ink-color: var(--disabled-text-color);
                  color: var(--disabled-text-color);
                  --mdc-select-ink-color: var(--disabled-text-color);
                  --mdc-text-field-idle-line-color: var(--disabled-text-color);                  
                  --mdc-select-idle-line-color: var(--disabled-text-color);
                  --mdc-select-dropdown-icon-color: var(--disabled-text-color);
                  --paper-item-icon-color: var(--disabled-text-color);
                  pointer-events: none;
                {% endif %}
              }
    card_mod:
      style: |
        #states {
          padding-top: 12px;
          padding-bottom: 12px;
          padding-left: 0px;
          align-self: end;
        }
        #states > div{
          border: 1px solid rgba(127,127,127,0.5);
          border-radius: 6px !important;
          box-shadow: 3px 2px 5px lightgrey;
        }

Importante

Trocar tudo que estiver relacionado a switch.abajur do código para a entidade que irá utilizar


Esse abaixo é o card completo do botão da lareira que está no exemplo, se forem utilizar vão precisar baixar outros cards que não estão listados no tutorial, como browser mod etc…

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    entity: input_boolean.lareira
    icon: '{{ state_attr(config.entity,''icon'') }}'
    layout: vertical
    primary: ''
    secondary: '{{states[config.entity].name}}'
    icon_color: '{{ ''red'' if is_state(config.entity, ''on'') else ''disabled'' }}'
    card_mod:
      style:
        mushroom-state-info$: |
          .secondary {
            color: grey !important;
            position: relative;
            white-space: pre-line !important;
            text-align: center;
            text-overflow: clip !important;
          }
        .: |
          ha-card {
            {% if is_state(config.entity, 'on') %}
              box-shadow: 0 0 5px !important; 
            {% endif %} !important; 
            top: 10px !important;
            position: relative;
            width: 75px !important;
            height: 125px !important;
            border-radius: 30px;
            margin: auto;
            overflow: hidden; /* Garante que o conteúdo seja cortado de acordo com a forma definida */
          } ha-card::before {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform: rotate(-90deg);
            transform-origin: top left;
            white-space: nowrap;
            shape-outside: circle(30px at 100% 0); /* Define a forma circular para o texto */
            clip-path: circle(30px at 100% 0); /* Recorta o texto de acordo com a forma definida */
            text-align: center;
          } ha-card:hover {
            background: color-mix(in srgb, grey 10%, var(--card-background-color)) !important;
            z-index: 1;
            transform: scale(1.0);
            transition: all 0.1s;
            box-shadow: 0 0 5px !important;
          }
    double_tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          card_mod:
            style: |
              ha-dialog {
                --mdc-dialog-min-width: 245px !important;
                --mdc-dialog-min-height: auto !important;
                --vertical-align-dialog: initial !important;
                --ha-dialog-border-radius: var(--border-radius) !important;                           
              }
          autoclose: false
          size: normal
          content:
            type: custom:vertical-stack-in-card
            card_mod:
              style: |
                ha-card {
                  background: none !important;
                  box-shadow: none !important;
                  height: 400px !important;
                  width: 230px !important;
                }
            horizontal: false
            cards:
              - type: custom:mushroom-template-card
                entity: input_boolean.lareira
                layout: horizontal
                multiline_secondary: false
                icon: |
                  {{ 'mdi:fireplace' if is_state(config.entity, 'on') else
                                      'mdi:fireplace-off' }}
                icon_color: |
                  {{ 'red' if is_state(config.entity, 'on') else
                                      'disabled' }}
                tap_action:
                  action: none
                primary: '{{states[config.entity].name}}'
                card_mod:
                  style:
                    mushroom-state-info$: |
                      .primary {
                        position: absolute !important;
                        top: 370px;
                        left: 50px;
                        color: gray !important;
                      }
                    .: |
                      :host {
                        --mush-icon-size: 150px !important;
                        position: relative;
                        left: -40px !important;
                        top: 0px !important;
                      }
                      ha-card {
                        height: 90px !important;
                        
                      }
              - type: custom:layout-card
                layout_type: custom:grid-layout
                cards:
                  - type: custom:mushroom-template-card
                    icon: mdi:power
                    entity: input_boolean.lareira
                    tap_action:
                      action: toggle
                    icon_color: none
                    view_layout:
                      grid-area: power
                    card_mod:
                      style:
                        .: |
                          :host {             
                              display: flex;
                              justify-content: center;
                              --primary-text-color: gray;
                              height: 50px !important;
                          }
                          ha-card {
                            top: -60px !important;
                            left: 130px !important;
                            --ha-card-border-width: 1px !important;
                            --ha-card-border-radius: 11px 11px 11px 11px;           
                          }
                  - type: custom:mushroom-template-card
                    primary: ''
                    secondary: ''
                    icon: mdi:fire
                    alignment: left
                    tap_action:
                      action: call-service
                      service: scene.turn_on
                      target:
                        entity_id: scene.ligar_lareira
                    icon_color: none
                    view_layout:
                      grid-area: left
                    card_mod:
                      style:
                        mushroom-shape-icon$: |
                          .shape  {
                              display: flex;
                              justify-content: center;
                          }
                        .: |
                          :host {
                              --primary-text-color: gray;
                          }
                          ha-card {
                            top: 0px !important;
                            height: 40px !important;
                            --ha-card-border-width: 1px !important;
                            --ha-card-border-radius: 28px 0px 0px 28px;         
                          }
                  - type: custom:mushroom-template-card
                    primary: ''
                    secondary: ''
                    icon: mdi:format-align-center
                    alignment: center
                    tap_action:
                      action: call-service
                      service: scene.turn_on
                      target:
                        entity_id: scene.potencia_lareira
                    icon_color: none
                    view_layout:
                      grid-area: potencia
                    card_mod:
                      style:
                        mushroom-shape-icon$: |
                          .shape  {
                          }
                        .: |
                          :host {
                              height: 40px !important;              
                              display: flex;
                              justify-content: center;
                              --primary-text-color: gray;
                          }
                          ha-card {
                            top: 0px !important;           
                            --ha-card-border-width: 1px !important;
                            --ha-card-border-radius: 0px 0px 0px 0px;        
                          }
                  - type: custom:mushroom-template-card
                    primary: ''
                    secondary: ''
                    icon: mdi:fire-off
                    alignment: center
                    tap_action:
                      action: call-service
                      service: scene.turn_on
                      target:
                        entity_id: scene.desligar_lareira
                    icon_color: none
                    view_layout:
                      grid-area: right
                    card_mod:
                      style:
                        mushroom-shape-icon$: |
                          .shape  {                                      
                          }
                        .: |
                          :host {
                              height: 40px !important;
                              display: flex;
                              justify-content: center;
                              --primary-text-color: gray;
                          }
                          ha-card {
                            top: 0px !important;
                            --ha-card-border-width: 1px !important;
                            --ha-card-border-radius: 0px 28px 28px 0px;   
                          }
                  - type: custom:mushroom-template-card
                    primary: ''
                    secondary: ''
                    icon: mdi:alpha-f-circle
                    alignment: center
                    tap_action:
                      action: call-service
                      service: scene.turn_on
                      target:
                        entity_id: scene.temperatura_lareira
                    icon_color: none
                    view_layout:
                      grid-area: temperatura
                    card_mod:
                      style:
                        mushroom-shape-icon$: |
                          .shape  {
                              display: flex;
                              justify-content: center;
                          }
                        .: |
                          :host {
                              --primary-text-color: gray;
                          }
                          ha-card {
                            top: 0px !important;
                            height: 40px !important;
                            --ha-card-border-width: 1px !important;
                            --ha-card-border-radius: 28px 0px 0px 28px;         
                          }
                  - type: custom:mushroom-template-card
                    primary: ''
                    secondary: ''
                    icon: mdi:firefox
                    alignment: center
                    tap_action:
                      action: call-service
                      service: scene.turn_on
                      target:
                        entity_id: scene.efeitos_lareira
                    icon_color: none
                    view_layout:
                      grid-area: efeitos
                    card_mod:
                      style:
                        mushroom-shape-icon$: |
                          .shape  {                                     
                          }
                        .: |
                          :host {
                              height: 40px !important;
                              display: flex;
                              justify-content: center;
                              --primary-text-color: gray;
                          }
                          ha-card {
                            top: 0px !important;
                            --ha-card-border-width: 1px !important;
                            --ha-card-border-radius: 0px 28px 28px 0px;   
                          }
                  - type: custom:vertical-stack-in-card
                    horizontal: false
                    view_layout:
                      grid-area: timer
                    cards:
                      - type: custom:timer-bar-card
                        entity: timer.lareira
                        invert: true
                        bar_direction: rtl
                        bar_width: 60%
                        mushroom:
                          layout: vertical
                          color: red
                          secondary_info: none
                          primary_info: state
                          icon_type: none
                        card_mod:
                          style: |
                            .primary {
                                color: transparent !important;
                            }
                            ha-card {
                              box-shadow: none !important;
                              background: none !important;
                            }
                      - type: entities
                        entities:
                          - entity: input_datetime.lareira
                            secondary_info: none
                            card_mod:
                              style:
                                hui-generic-entity-row $: |
                                  state-badge { display: none; }
                                  div.info.pointer { display: none; }
                                ha-time-input:
                                  $ ha-base-time-input $:
                                    ha-textfield:
                                      $: |
                                        .mdc-text-field {
                                          height: 30px !important;
                                        }
                                        .mdc-line-ripple::after,
                                        .mdc-line-ripple::before {
                                          border-bottom-style: none !important;
                                        }
                                        .mdc-text-field__ripple {
                                          display: none !important;
                                        }
                                    ha-select $: |
                                      .mdc-select__anchor {
                                        height: 40px !important;
                                      }
                                      .mdc-line-ripple::after,
                                      .mdc-line-ripple::before {
                                        border-bottom-style: none !important;
                                      }
                                      .mdc-select__ripple {
                                        display: none !important;
                                      }
                                .: |
                                  :host {
                                    --mdc-text-field-fill-color: transparent;
                                    --mdc-select-fill-color: transparent;
                                    {% if is_state('input_boolean.lareira','off') %}
                                      --mdc-text-field-ink-color: var(--disabled-text-color);
                                      color: var(--disabled-text-color);
                                      --mdc-select-ink-color: var(--disabled-text-color);
                                      --mdc-text-field-idle-line-color: var(--disabled-text-color);                  
                                      --mdc-select-idle-line-color: var(--disabled-text-color);
                                      --mdc-select-dropdown-icon-color: var(--disabled-text-color);
                                      --paper-item-icon-color: var(--disabled-text-color);
                                      pointer-events: none;
                                    {% endif %}
                                  }
                        card_mod:
                          style: |
                            #states {
                              align-self: center;
                            }
                            #states > div{
                              border: 1px solid rgba(127,127,127,0.5);
                              border-radius: 6px !important;
                              box-shadow: 3px 2px 5px lightgrey;
                            }
                    card_mod:
                      style: |
                        .primary {
                            color: transparent !important;
                        }
                        ha-card {
                          top: -32px !important;
                          box-shadow: none !important;
                          background: none !important;
                        }
                layout:
                  grid-template-columns: 33.33% 33.33% 33.33%
                  grid-template-rows: auto
                  grid-template-areas: |
                    "power header header"
                    "left potencia right"
                    "temperatura default efeitos"
                    "timer timer timer"
4 Likes

Muito legal. Vou testar. Valeu !!

1 Like

no item:

Inicia cronometro - você deve colocar input_datime.abajur >>>>>

tive q mudar a entidade para timer.abajur, meu timer remaining time não corresponde ao programado … Tipo eu coloco timer de 2 minutos e o remaining time começa em 40 segundos regressivo . .embora a luz desligue no valor programado de 2 minutos . …não sei pq meu timer remaining time está bugado…

valeu pelo tuto

1 Like

Verdade, acabei colocando errado o correto é timer.abajur ja ajustei no tutorial. O que pode acontecer é o horário local de onde vc está executando, no próprio card no git ele comenta, aqui se utilizar no meu PC está 4min de diferença do meu HA, então se eu colocar um timer de 1min não acontece nada no card porém a “automação funciona”. Se você ajustar o horário do PC/dispositivo que clicou no timer vai ver que funciona certinho dai. Talvez tenha como ajustar isso mas não cheguei a ver toda a documentação, pois ai acertei o horario do pc que foi mais fácil rsrsrs