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:
Coloquei o tempo de 1min, após dar esse tempo o dispositivo se desliga e zera o cronometro.
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
Vamos precisar desses dois.
Criando o timer (no meu exemplo vou usar abajur, mas utilize nome que quiser)
Agora vamos criar um datetime
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"