sensor:
- platform: template
sensors:
#Capteur dont l'état est vide
vide:
value_template: ""
D’ailleurs attention aux codes des templates qui bientôt ne seront plus supportés sous cette forme.
sensor:
- platform: template
sensors:
#Capteur dont l'état est vide
vide:
value_template: ""
D’ailleurs attention aux codes des templates qui bientôt ne seront plus supportés sous cette forme.
A mettre un label. De mémoire, il n’y avait pas la possibilité de mettre juste un label. Donc je crée une entité donc l’état est vide pour y insérer un préfixe.
c’est la variable qui indique si le reveil doit sonner?
Pas du tout, c’est l’icône qui active ou non.
C’est juste une variable utiliser dans une picture-elements afin de mettre un label.
De base, cette carte ne permet pas de mettre juste des texte. Donc je crée une entité vide et j’utilise l’élément state-label avec un préfixe.
C’est un contournement d’une limitation.
Voici la liste des éléments depuis la doc :
Bonjour @Clemalex , et Bravo pour ce réveil… Je suis débutant, et pense avoir bien intégrés tous les prérequis (card-mod, time-picker-card, button-card et custom-ui et l’image transparent… )
Par contre je n’ai aucune idée de l’endroit où il faut copier le code de la carte…? Dans quel fichier doit il se trouver?
Merci!
Tu cliques sur ajouter une carte et tu prends la dernière « carte manuelle »
Super, merci… ça progresse… par contre, quand je clique sur le réveil ou les jour, rien ne change… une idée d’où je dois chercher?
Merci
Christian
Du côté des entités.
Tu ouvres un onglet en parallèle qui affiche les outils de développement de HA.
Et tu regarde sinle clique d’une entité sur la carte, influe bien sur l’entité dans les outils.
Bonjour @Clemalex , thanks again for this great work!.. After a long break, I worked on it again, and could get it work…
However, as I like thinks to be perfect, I have two questions :
Hello
@Kri72 ,
pourriez-vous partager votre code cela nous permet également de voir comment supprimé ses lignes qui vous dérangent éventuellement.
could you share your code it also allows us to see how deleted its lines that bother you possibly.
Hello!!
Here is my code :
elements:
<div class="switch"> <span class="toggle-thumb"> <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" style="fill:#4ADE80;transform:;-ms-filter:"><path d="M10 15.586L6.707 12.293 5.293 13.707 10 18.414 19.707 8.707 18.293 7.293z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" style="fill:#F87171;transform:;-ms-filter:"><path d="M16.192 6.344L11.949 10.586 7.707 6.344 6.293 7.758 10.535 12 6.293 16.242 7.707 17.656 11.949 13.414 16.192 17.656 17.606 16.242 13.364 12 17.606 7.758z"></path></svg> </span> </div>
Hello Clemalex… I’m talking about these grey lines, around the button :
It’s a french forum, so In french, please!
Effectivement merci d’écrire en français à minima
Bonjour à tous…
J’avais mon réveil qui fonctionnait bien, et depuis peu, le switch que j’avais intégré ne s’affiche pas correctement.
.
Je me suis dit que cela venait peut-être du lien « SVG namespace » qui ne fonctionnerait plus et l’ai donc remplacé par « https://www.svgrepo.com/show/33995/switch.svg », mais cela n’est pas mieux…
Auriez vous une idée de ce qui ne va pas?
Merci
Ci dessous le code
elements:
- entity: sensor.vide
prefix: Télétravail
style:
color: var(--primary-color)
font-size: 20px
font-variant: small-caps
left: 13%
pointer-events: none
top: 80%
tap_action:
action: none
type: state-label
- entity: input_boolean.wakestatus_2
show_icon: false
show_state: false
styles:
toogle:
- transform: translateX(26px)
card:
- width: 60px
- height: 40px
- background: transparent
- box-shadow: none
custom_fields:
toogle: |
[[[
return `
<div class="switch">
<span class="toggle-thumb">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" style="fill:#4ADE80;transform:;-ms-filter:"><path d="M10 15.586L6.707 12.293 5.293 13.707 10 18.414 19.707 8.707 18.293 7.293z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" style="fill:#F87171;transform:;-ms-filter:"><path d="M16.192 6.344L11.949 10.586 7.707 6.344 6.293 7.758 10.535 12 6.293 16.242 7.707 17.656 11.949 13.414 16.192 17.656 17.606 16.242 13.364 12 17.606 7.758z"></path></svg>
</span>
</div>`
]]]
type: custom:button-card
style: |
ha-card {
margin: 0 0 130px 110px;
}
#toogle .switch {
display: inline-block;
width: 60px;
height: 34px;
position: relative;
}
.toggle-thumb {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #3f3F3f;
border-radius: 40px;
cursor: pointer;
}
.toggle-thumb:before {
content: "";
height: 26px;
width: 26px;
position: absolute;
left: 4px;
bottom: 4px;
border-radius: 50%;
background-color: #EFEFEF;
transition: .4s all ease;
}
.checkbox {
opacity: 0;
width: 0;
height: 0;
z-index: 100;
}
.toggle-thumb:before {
{% if is_state('input_boolean.wakestatus_2', 'on') %}
transform: translateX(26px);
{% endif %}
}
- entity: input_datetime.wake_time_2
hide:
name: true
hour_step: 1
layout:
align_controls: center
name: inside
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_2', 'off') %} 0.3 {% endif %};
pointer-events: {% if is_state('input_boolean.wakestatus_2', '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: white !important;
border-radius: 5px;
}
.time-picker-icon {
color: var(--primary-color) !important;
z-index: 100;
}
left: 45%
top: 50%
type: custom:time-picker-card
- entity: input_boolean.wakeweekday_mon_2
icon: mdi:alpha-l-circle
show_label: false
show_name: false
show_state: false
style:
'--paper-item-icon-color': var(--primary-color)
right: 17%
top: 20%
styles:
card:
- width: 35px
- height: 35px
- border-radius: 999px
- background-color: rgba(0, 0, 0, 0)
- box-shadow: none
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_2'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_2'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(2.1)
type: custom:button-card
- entity: input_boolean.wakeweekday_tue_2
icon: mdi:alpha-m-circle
show_label: false
show_name: false
show_state: false
style:
'--paper-item-icon-color': var(--primary-color)
right: 7%
top: 20%
styles:
card:
- width: 35px
- height: 35px
- border-radius: 999px
- background-color: rgba(0, 0, 0, 0)
- box-shadow: none
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_2'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_2'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(2.1)
type: custom:button-card
- entity: input_boolean.wakeweekday_wed_2
icon: mdi:alpha-m-circle
show_label: false
show_name: false
show_state: false
style:
'--paper-item-icon-color': var(--primary-color)
right: 22%
top: 50%
styles:
card:
- width: 35px
- height: 35px
- border-radius: 999px
- background-color: rgba(0, 0, 0, 0)
- box-shadow: none
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_2'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_2'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(2.1)
type: custom:button-card
- entity: input_boolean.wakeweekday_thu_2
icon: mdi:alpha-j-circle
show_label: false
show_name: false
show_state: false
style:
'--paper-item-icon-color': var(--primary-color)
right: 12%
top: 50%
styles:
card:
- width: 35px
- height: 35px
- border-radius: 999px
- background-color: rgba(0, 0, 0, 0)
- box-shadow: none
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_2'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_2'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(2.1)
type: custom:button-card
- entity: input_boolean.wakeweekday_fri_2
icon: mdi:alpha-v-circle
show_label: false
show_name: false
show_state: false
style:
'--paper-item-icon-color': var(--primary-color)
right: 2%
top: 50%
styles:
card:
- width: 35px
- height: 35px
- border-radius: 999px
- background-color: rgba(0, 0, 0, 0)
- box-shadow: none
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_2'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_2'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(2.1)
type: custom:button-card
- entity: input_boolean.wakeweekday_sat_2
icon: mdi:alpha-s-circle
show_label: false
show_name: false
show_state: false
style:
'--paper-item-icon-color': var(--primary-color)
right: 17%
top: 80%
styles:
card:
- width: 35px
- height: 35px
- border-radius: 999px
- background-color: rgba(0, 0, 0, 0)
- box-shadow: none
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_2'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_2'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(2.1)
type: custom:button-card
- entity: input_boolean.wakeweekday_sun_2
icon: mdi:alpha-d-circle
show_label: false
show_name: false
show_state: false
style:
'--paper-item-icon-color': var(--primary-color)
right: 7%
top: 80%
styles:
card:
- width: 35px
- height: 35px
- border-radius: 999px
- background-color: rgba(0, 0, 0, 0)
- box-shadow: none
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_2'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_2'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(2.1)
> elements:
> - entity: sensor.vide
> prefix: Télétravail
> style:
> color: var(--primary-color)
> font-size: 20px
> font-variant: small-caps
> left: 13%
> pointer-events: none
> top: 80%
> tap_action:
> action: none
> type: state-label
> - entity: input_boolean.wakestatus_2
> show_icon: false
> show_state: false
> styles:
> toogle:
> - transform: translateX(26px)
> card:
> - width: 60px
> - height: 40px
> - background: transparent
> - box-shadow: none
> custom_fields:
> toogle: |
> [[[
> return `
> <div class="switch">
> <span class="toggle-thumb">
> <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" style="fill:#4ADE80;transform:;-ms-filter:"><path d="M10 15.586L6.707 12.293 5.293 13.707 10 18.414 19.707 8.707 18.293 7.293z"></path></svg>
> <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" style="fill:#F87171;transform:;-ms-filter:"><path d="M16.192 6.344L11.949 10.586 7.707 6.344 6.293 7.758 10.535 12 6.293 16.242 7.707 17.656 11.949 13.414 16.192 17.656 17.606 16.242 13.364 12 17.606 7.758z"></path></svg>
> </span>
> </div>`
> ]]]
> type: custom:button-card
> style: |
> ha-card {
> margin: 0 0 130px 110px;
> }
> #toogle .switch {
> display: inline-block;
> width: 60px;
> height: 34px;
> position: relative;
> }
> .toggle-thumb {
> position: absolute;
> top: 0;
> left: 0;
> right: 0;
> bottom: 0;
> display: flex;
> justify-content: space-between;
> align-items: center;
> background-color: #3f3F3f;
> border-radius: 40px;
> cursor: pointer;
> }
> .toggle-thumb:before {
> content: "";
> height: 26px;
> width: 26px;
> position: absolute;
> left: 4px;
> bottom: 4px;
> border-radius: 50%;
> background-color: #EFEFEF;
> transition: .4s all ease;
> }
> .checkbox {
> opacity: 0;
> width: 0;
> height: 0;
> z-index: 100;
> }
> .toggle-thumb:before {
> {% if is_state('input_boolean.wakestatus_2', 'on') %}
> transform: translateX(26px);
> {% endif %}
> }
> - entity: input_datetime.wake_time_2
> hide:
> name: true
> hour_step: 1
> layout:
> align_controls: center
> name: inside
> 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_2', 'off') %} 0.3 {% endif %};
> pointer-events: {% if is_state('input_boolean.wakestatus_2', '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: white !important;
> border-radius: 5px;
> }
> .time-picker-icon {
> color: var(--primary-color) !important;
> z-index: 100;
> }
> left: 45%
> top: 50%
> type: custom:time-picker-card
> - entity: input_boolean.wakeweekday_mon_2
> icon: mdi:alpha-l-circle
> show_label: false
> show_name: false
> show_state: false
> style:
> '--paper-item-icon-color': var(--primary-color)
> right: 17%
> top: 20%
> styles:
> card:
> - width: 35px
> - height: 35px
> - border-radius: 999px
> - background-color: rgba(0, 0, 0, 0)
> - box-shadow: none
> - opacity: |
> [[[
> if ( (states['input_boolean.wakestatus_2'].state == 'off') ) return '0.3';
> else return '1';
> ]]]
> - pointer-events: |
> [[[
> if ( (states['input_boolean.wakestatus_2'].state == 'off') ) return 'none';
> else return 'auto';
> ]]]
> icon:
> - transform: scale(2.1)
> type: custom:button-card
> - entity: input_boolean.wakeweekday_tue_2
> icon: mdi:alpha-m-circle
> show_label: false
> show_name: false
> show_state: false
> style:
> '--paper-item-icon-color': var(--primary-color)
> right: 7%
> top: 20%
> styles:
> card:
> - width: 35px
> - height: 35px
> - border-radius: 999px
> - background-color: rgba(0, 0, 0, 0)
> - box-shadow: none
> - opacity: |
> [[[
> if ( (states['input_boolean.wakestatus_2'].state == 'off') ) return '0.3';
> else return '1';
> ]]]
> - pointer-events: |
> [[[
> if ( (states['input_boolean.wakestatus_2'].state == 'off') ) return 'none';
> else return 'auto';
> ]]]
> icon:
> - transform: scale(2.1)
> type: custom:button-card
> - entity: input_boolean.wakeweekday_wed_2
> icon: mdi:alpha-m-circle
> show_label: false
> show_name: false
> show_state: false
> style:
> '--paper-item-icon-color': var(--primary-color)
> right: 22%
> top: 50%
> styles:
> card:
> - width: 35px
> - height: 35px
> - border-radius: 999px
> - background-color: rgba(0, 0, 0, 0)
> - box-shadow: none
> - opacity: |
> [[[
> if ( (states['input_boolean.wakestatus_2'].state == 'off') ) return '0.3';
> else return '1';
> ]]]
> - pointer-events: |
> [[[
> if ( (states['input_boolean.wakestatus_2'].state == 'off') ) return 'none';
> else return 'auto';
> ]]]
> icon:
> - transform: scale(2.1)
> type: custom:button-card
> - entity: input_boolean.wakeweekday_thu_2
> icon: mdi:alpha-j-circle
> show_label: false
> show_name: false
> show_state: false
> style:
> '--paper-item-icon-color': var(--primary-color)
> right: 12%
> top: 50%
> styles:
> card:
> - width: 35px
> - height: 35px
> - border-radius: 999px
> - background-color: rgba(0, 0, 0, 0)
> - box-shadow: none
> - opacity: |
> [[[
> if ( (states['input_boolean.wakestatus_2'].state == 'off') ) return '0.3';
> else return '1';
> ]]]
> - pointer-events: |
> [[[
> if ( (states['input_boolean.wakestatus_2'].state == 'off') ) return 'none';
> else return 'auto';
> ]]]
> icon:
> - transform: scale(2.1)
> type: custom:button-card
> - entity: input_boolean.wakeweekday_fri_2
> icon: mdi:alpha-v-circle
> show_label: false
> show_name: false
> show_state: false
> style:
> '--paper-item-icon-color': var(--primary-color)
> right: 2%
> top: 50%
> styles:
> card:
> - width: 35px
> - height: 35px
> - border-radius: 999px
> - background-color: rgba(0, 0, 0, 0)
> - box-shadow: none
> - opacity: |
> [[[
> if ( (states['input_boolean.wakestatus_2'].state == 'off') ) return '0.3';
> else return '1';
> ]]]
> - pointer-events: |
> [[[
> if ( (states['input_boolean.wakestatus_2'].state == 'off') ) return 'none';
> else return 'auto';
> ]]]
> icon:
> - transform: scale(2.1)
> type: custom:button-card
> - entity: input_boolean.wakeweekday_sat_2
> icon: mdi:alpha-s-circle
> show_label: false
> show_name: false
> show_state: false
> style:
> '--paper-item-icon-color': var(--primary-color)
> right: 17%
> top: 80%
> styles:
> card:
> - width: 35px
> - height: 35px
> - border-radius: 999px
> - background-color: rgba(0, 0, 0, 0)
> - box-shadow: none
> - opacity: |
> [[[
> if ( (states['input_boolean.wakestatus_2'].state == 'off') ) return '0.3';
> else return '1';
> ]]]
> - pointer-events: |
> [[[
> if ( (states['input_boolean.wakestatus_2'].state == 'off') ) return 'none';
> else return 'auto';
> ]]]
> icon:
> - transform: scale(2.1)
> type: custom:button-card
> - entity: input_boolean.wakeweekday_sun_2
> icon: mdi:alpha-d-circle
> show_label: false
> show_name: false
> show_state: false
> style:
> '--paper-item-icon-color': var(--primary-color)
> right: 7%
> top: 80%
> styles:
> card:
> - width: 35px
> - height: 35px
> - border-radius: 999px
> - background-color: rgba(0, 0, 0, 0)
> - box-shadow: none
> - opacity: |
> [[[
> if ( (states['input_boolean.wakestatus_2'].state == 'off') ) return '0.3';
> else return '1';
> ]]]
> - pointer-events: |
> [[[
> if ( (states['input_boolean.wakestatus_2'].state == 'off') ) return 'none';
> else return 'auto';
> ]]]
> icon:
> - transform: scale(2.1)
> type: custom:button-card
> image: /local/images/transparent/transparent.png
> type: picture-elements
Salut @Kri72
Il faudrait utiliser la bonne balise pour l’insertion de code
Là c’est juste pas possible
Mais déjà, tu peux aller faire un tour sur ce post :
Super, merci beaucoup,
J’ai modifié mon post avec la bonne balise, et ai appliqué les changements… tout fonctionne correctement à nouveau!
Merci beaucoup!