Oui câest le fonctionnement normal de la carte Alarme
Je nâai pas modifiĂ© le comportement de la carte, seulement sont style;
Si tu rencontre un problĂšme, essaye avec une carte sans modification et ajoute petit Ă petit les modifications
Oui câest le fonctionnement normal de la carte Alarme
Je nâai pas modifiĂ© le comportement de la carte, seulement sont style;
Si tu rencontre un problĂšme, essaye avec une carte sans modification et ajoute petit Ă petit les modifications
Salut
Pourrais tu me montrer ta carte aspiro complÚte? car je ne sais pas comment tu as fait pour avoir les 3 boutons au dessus du réglages de ventilateur. merci
Toujours pas fait le nettoyage mais je suis partie de la carte cover
.
Ce soir je posterais
Jâai trouvĂ© pourquoi la carte alarme ne fonctionnait pas. Jâavais mis un code Ă lâalarme.
Ah oui ! Le fait que je cache le code de lâalarme empĂȘche de le rentrer si tu en as mis un Ă lâactivation de lâalarme
Modification dâune carte postĂ© par un autre membre :
Jâai retravaillĂ© la carte pour afficher la couleur de lâampoule dans lâicone (la luminositĂ© est prise en compte Ă©galement)
Et jâai retravaillĂ© les couleurs et le style pour la faire correspondre Ă une carte prĂ©sente dans le thĂšme original
Prenez ou non
#cards
type: grid
cards:
- entity: light.salon_lampe_01
template:
- light_buttons_with_colors
type: custom:button-card
variables:
entity: light.salon_lampe_01
name: Salon
- entity: light.salon_lampe_01
template:
- light_buttons_with_colors_light
type: custom:button-card
variables:
entity: light.salon_lampe_01
name: Salon
columns: 2
square: false
#templates
button_card_templates:
list_items_light:
styles:
card:
- box-shadow: none
- padding: 0px
grid:
- grid-template-areas: '"item1 item2"'
- grid-template-columns: 2fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
light_with_colors:
tap_action:
action: toggle
hold_action:
action: more-info
label: |-
[[[ if (entity.state !='unavailable'){
if (entity.state =='off'){
var bri = Math.round(entity.attributes.brightness / 2.55);
return 'Off';
}else{
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri + '%' : 'On') ;
}
}else{
return "Indisponible";
}
]]]
state:
- styles:
icon:
- filter: |-
[[[
var bri = entity.attributes.brightness / 2.55;
return ('brightness(' + (50+bri/2) + '%)') ;
]]]
- color: |-
[[[
var color = entity.attributes.rgb_color;
if (color){
return 'rgba(' + entity.attributes.rgb_color + ',1)'
}
else{
return 'rgba(var(--couleur-jaune),1)'
}
]]]
img_cell:
- background-color: |-
[[[
var color = entity.attributes.rgb_color;
if (color){
return 'rgba(' + entity.attributes.rgb_color + ',0.2)'
}
else{
return 'rgba(var(--couleur-jaune),0.2)'
}
]]]
value: 'on'
light_buttons_with_colors_light:
show_name: false
show_icon: false
variables:
entity: light.default
name: LumiĂšre
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
entity: '[[[ return variables.entity ]]]'
name: '[[[ return variables.name ]]]'
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: '[[[ return variables.entity ]]]'
template:
- icon_info
- light_with_colors
type: custom:button-card
item2:
card:
template: list_items_light
type: custom:button-card
custom_fields:
item1:
card:
type: custom:slider-card
entity: '[[[ return variables.entity ]]]'
radius: 12px
height: 42px
thumbColorOff: rgba(var(--couleur-theme),0.2)
mainSliderColorOff: rgb(var(--couleur-theme),0.2)
secondarySliderColorOff: var(--google-grey-500)
mainSliderColor: rgb(var(--couleur-gris-light))
thumbColor: rgb(var(--couleur-gris-light))
secondarySliderColor: var(--google-grey-500)
card_mod:
style: |
ha-card {
border-radius: 14px;
}
div {
border: 2px solid var(--google-grey-500);
border-radius: 14px !important;
box-sizing: border-box;
position: relative;
}
item2:
card:
icon: mdi:palette
tap_action:
action: more-info
type: custom:button-card
entity: '[[[ return variables.entity ]]]'
template: widget_icon
light_buttons_with_colors:
show_name: false
show_icon: false
variables:
entity: light.default
name: LumiĂšre
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
entity: '[[[ return variables.entity ]]]'
name: '[[[ return variables.name ]]]'
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: '[[[ return variables.entity ]]]'
template:
- icon_info
- light_with_colors
type: custom:button-card
item2:
card:
template: list_items_light
type: custom:button-card
custom_fields:
item1:
card:
type: custom:slider-card
entity: '[[[ return variables.entity ]]]'
radius: 14px
height: 42px
mainSliderColorOff: var(--google-grey-500)
secondarySliderColor: rgba(var(--couleur-theme),0.05)
secondarySliderColorOff: rgba(var(--couleur-theme),0.05)
thumbColorOff: white
item2:
card:
icon: mdi:palette
tap_action:
action: more-info
type: custom:button-card
entity: '[[[ return variables.entity ]]]'
template: widget_icon
Il reste Ă optimiser le code en combinant les templates
Bonjour, Le créateur du thÚme Minimalist a posté sa configuration sur Github.
https://github.com/TBens/lovelace-ui-minimalist
Pas mal merci pour le partage mais, comment faire si ta un bouton pour on/off et que lâampoule est une hue ? pour avoir le slider indĂ©pendant ?
Et en plus jâai une entitĂ© en dur dans mon template ! (copier/merder)âŠ
Je comprends ta question. Je te ferais un template pour le cas.
Mais quâest-ce que ça change que ce soit une hue ou une xiaomi ou lidl ?
sa ne change rien, quand ta un bouton sonof pour lâallumer et lâampoule câest une hue les entity sont pas les mĂȘme, et puis nĂŁo me irrite
[image]
Petite astuce pour avoir un vrai bouton retour (historique de navigation) :
Avec button-card et une automation
Template du Back Button :
button_card_templates:
return_button:
template: pilule
show_icon: true
show_name: true
icon: mdi:arrow-left
size: 80%
styles:
grid:
- grid-template-areas: '"i"'
tap_action:
action: toggle
entity: input_boolean.back
name: |
[[[
if (entity.state == 'on') {history.back() ;}
]]]
automation :
alias: Bouton Retour
description: ''
trigger:
- platform: state
entity_id: input_boolean.back
to: 'on'
condition: []
action:
- service: input_boolean.turn_off
target:
entity_id: input_boolean.back
mode: single
carte :
template: return_button
type: custom:button-card
il ne fait que un retour vers la gauche ou il garde en mémoire par la ou tu es passer genre si tu fait
2eme onglet 4eme onglet 3 eme onglet et que tu appuis sur retour tu passe bien dans meme sens inverse ?
Si vous avez besoin de 2 boutons dans la carte alarme :
type: vertical-stack
cards:
- card:
entity: alarm_control_panel.alarme_pour_creation_de_service
states:
- arm_home
- arm_away
style:
.: |
ha-card{
margin-left: 6px;
margin-right: 6px;
}
ha-card > ha-label-badge{
--alarm-state-color: var(--google-green-500) !important;
}
ha-card{
padding-top: 16px;
padding-bottom: 12px !important;
border-radius: 21px;
}
ha-card > h1{
padding-top: 0;
color: transparent;
}
ha-card > h1::before{
content: "Désactivée";
color: var(--google-green-500);
position: absolute;
font-variant: small-caps;
}
#alarmCode{
display: none;
}
#keypad{
display: none !important;
}
'#armActions':
mwc-button:nth-child(1):
$: |
#button > span.slot-container{
color: transparent;
position: absolute;
}
#button{
width: 150px;
border-radius: 21px;
}
#button > span.slot-container::before{
color: var(--mdc-theme-primary, #6200ee);
content: "Présent";
margin: 0 0 0 50%;
}
mwc-button:nth-child(2):
$: |
#button > span.slot-container{
color: transparent;
position: absolute;
}
#button{
width: 150px;
border-radius: 21px;
}
#button > span.slot-container::before{
color: var(--mdc-theme-primary, #6200ee);
content: "ABSENT";
margin: 0 0 0 50%;
}
title: Alarme
type: alarm-panel
conditions:
- entity: alarm_control_panel.alarme_pour_creation_de_service
state: disarmed
type: conditional
- card:
entity: alarm_control_panel.alarme_pour_creation_de_service
states:
- arm_home
title: Alarme
type: alarm-panel
style:
.: |
ha-card{
margin-left: 6px;
margin-right: 6px;
}
ha-card > ha-label-badge{
--alarm-state-color: var(--google-red-500) !important;
}
ha-card{
padding-top: 16px;
padding-bottom: 12px !important;
border-radius: 21px;
}
ha-card > h1{
padding-top: 0;
color: transparent;
}
ha-card > h1::before{
content: "Activée";
color: var(--google-red-500);
position: absolute;
font-variant: small-caps;
}
'#armActions':
mwc-button:
$: |
#button > span.slot-container{
color: transparent;
position: absolute;
}
#button{
width: 150px;
border-radius: 21px;
}
#button > span.slot-container::before{
color: var(--mdc-theme-primary, #6200ee);
content: "DĂ©sactiver";
margin: 0 0 0 50%;
}
'#keypad':
mwc-button:
$: |
#button{
border-radius: 12px
}
conditions:
- entity: alarm_control_panel.alarme_pour_creation_de_service
state_not: disarmed
type: conditional
Bonjour Ă tous,
J4ai découvert votre forum grùce au post sur Minimalist sur le forum officiel de HomeAssistant.
Jâai Ă©tĂ© bluffĂ© car lâergonomie apportĂ©e par ce mod, câest tout simplement design, classe, top quoi !
Merci !
Jâai juste une question concernant les couleurs,
Quand jâutilise le script par dĂ©faut pour une lampe ou un switch, lorsque jâallume la lampe, mon icone reste Ă©teinte.
entity: light.lumi_lumi_light_aqcn02_6ba82c05_level_light_color_on_off
name: Salon
template:
- icon_info_bg
- light
type: custom:button-card
Je vois que câest le template « jaune » qui est appelĂ©
jaune:
state:
- styles:
icon:
- color: rgba(var(--couleur-jaune),1)
img_cell:
- background-color: rgba(var(--couleur-jaune), 0.2)
value: 'on'
et que pour la couleur câest cette ligne lĂ
color: rgba(var(--couleur-jaune),1)
Apparemment, dans ma configuration RGBA ne fonctionne çaâŠ
Ma question : faut-il installer un package ou faut-il faire quelque chose de particulier pour que ça fonctionne ?
Dâavance merci
Bonjour la couleur est défini dans le thÚme.
3 solutions:
Merci pour ta réponse,
Je viens dâimporter les thĂšmes et effectivement, tout fonctionne parfaitement !
Merci
Juste une petite question, il est possible dâajouter uniquement
#Couleurs
google-red-500 : '#F54436'
google-green-500 : '#01C852'
google-yellow-500 : '#FF9101'
google-blue-500 : '#3D5AFE'
google-violet-500 : '#661FFF'
google-grey-500: '#BBBBBB'
couleur-rouge : 245, 68, 54
couleur-vert : 1, 200, 82
couleur-jaune : 255, 145, 1
couleur-bleu : 61, 90, 254
couleur-violet : 102, 31, 255
couleur-gris : 187, 187, 187
couleur-rose : 233, 30, 99
couleur-theme : 255,255,255
au thÚme par défaut de HA ?
Comment je pourrais juste ajouter ces rĂ©fĂ©rences Ă mon LoveLace-ui dâorigine ?