lilp
Janvier 29, 2025, 9:16
1
Salut, j’ai un petit soucis d’affichage de mon dashbord version mobile.
Alors que sur l’ordi, je n’ai pas le soucis.
Le code :
type: vertical-stack
cards:
- type: custom:expander-card
gap: 1em
padding: 0em
clear: false
expanded: false
title: Exterior
overlay-margin: 1em
child-padding: 0.5em
button-background: transparent
title-card-button-overlay: true
title-card:
type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Radiateur
entity: climate.radiateur_salon
icon: mdi:radiator
icon_color: |
{% if is_state(entity, 'on') %}
orange
{% else %}
white
{% endif %}
layout: horizontal
secondary: null
tap_action:
action: more-info
cards:
- type: horizontal-stack
cards:
- type: custom:tabbed-card
options: {}
tabs:
- card:
type: custom:versatile-thermostat-ui-card
entity: climate.radiateur_salon
disable_name: false
disable_window: false
disable_overpowering: false
disable_heat: false
disable_heat_cool: true
disable_cool: true
disable_auto: false
disable_dry: true
disable_off: false
disable_fan_only: true
disable_menu: false
disable_security_warning: false
set_current_as_main: false
disable_buttons: false
disable_power_infos: false
disable_auto_fan_infos: true
attributes:
label: Thermostat
- card:
type: custom:scheduler-card
include:
- climate
exclude:
- Masterbedroom
title: Salon
tags:
- Hiver
- Salon
exclude_tags: Masterbedroom
sort_by:
- state
- title
display_options:
primary_info: default
secondary_info:
- time
icon: action
show_header_toggle: false
time_step: 10
discover_existing: true
attributes:
label: Programmes
- card:
type: custom:apexcharts-card
update_interval: 60sec
header:
show: true
show_states: true
colorize_states: true
title: Historique
graph_span: 1d
yaxis:
- id: temperature
- id: pourcentage
opposite: true
min: 0
max: 100
decimals: 0
series:
- entity: sensor.temperature_salon_temperature
name: Temperature
type: area
curve: smooth
color: "#FFB53C"
stroke_width: 3
group_by:
duration: 30 min
show:
extremas: true
legend_value: false
yaxis_id: temperature
- entity: sensor.home_realfeel_temperature
name: Temperature EXT
type: line
curve: smooth
color: "#0E6655"
stroke_width: 2
group_by:
duration: 30 min
show:
extremas: true
legend_value: false
yaxis_id: temperature
- entity: climate.radiateur_salon
attribute: temperature
name: Consigne
unit: °C
stroke_width: 3
curve: stepline
color: "#2E86C1"
yaxis_id: temperature
show:
extremas: true
legend_value: false
- entity: climate.radiateur_salon
attribute: on_percent
name: Puissance
unit: "%"
transform: return x * 100;
opacity: 0.4
type: area
color: "#FF5733"
stroke_width: 1
curve: stepline
yaxis_id: pourcentage
show:
legend_value: false
attributes:
label: Statistiques
Comment arranger pour que l’affichage s’adapte à l’écran.
chpego
Janvier 29, 2025, 9:45
2
Il y a un fork du projet initial de cette custom card (expander-card) : GitHub - MelleD/lovelace-expander-card: Expander card for HomeAssistant ; peut-être voir pour faire une mise à jour ?
Bonjour,custom:tabbed-card.
Essayer avec la carte swipe-card
Card that allows you to swipe throught multiple cards for Home Assistant Lovelace
lilp
Janvier 29, 2025, 5:43
4
J’ai une swipe-card pour un autre onglet, mais le soucis est que la card est « trop grand » pour l’affichage par défaut.
type: vertical-stack
cards:
- type: custom:stack-in-card
mode: vertical
keep:
box_shadow: true
margin: true
border_radius: true
background: true
outer_padding: false
cards:
- type: custom:swipe-card
start_card: 1
reset_after: 20
parameters:
pagination:
type: bullets
cards:
- type: vertical-stack
cards:
- type: custom:tabbed-card
options: {}
tabs:
- card:
type: custom:versatile-thermostat-ui-card
entity: climate.radiateur_salon
disable_name: false
disable_window: false
disable_overpowering: false
disable_heat: false
disable_heat_cool: true
disable_cool: true
disable_auto: false
disable_dry: true
disable_off: false
disable_fan_only: true
disable_menu: false
disable_security_warning: false
set_current_as_main: false
disable_buttons: false
disable_power_infos: false
disable_auto_fan_infos: true
attributes:
label: Thermostat
- card:
type: custom:scheduler-card
include:
- climate
exclude:
- Masterbedroom
title: Salon
tags:
- Hiver
- Salon
exclude_tags: Masterbedroom
sort_by:
- state
- title
display_options:
primary_info: default
secondary_info:
- time
icon: action
show_header_toggle: false
time_step: 10
discover_existing: true
attributes:
label: Programmes
- card:
type: custom:apexcharts-card
update_interval: 60sec
header:
show: true
show_states: true
colorize_states: true
title: Historique
graph_span: 1d
yaxis:
- id: temperature
- id: pourcentage
opposite: true
min: 0
max: 100
decimals: 0
series:
- entity: sensor.temperature_salon_temperature
name: Temperature
type: area
curve: smooth
color: "#FFB53C"
stroke_width: 3
group_by:
duration: 30 min
show:
extremas: true
legend_value: false
yaxis_id: temperature
- entity: sensor.home_realfeel_temperature
name: Temperature EXT
type: line
curve: smooth
color: "#0E6655"
stroke_width: 2
group_by:
duration: 30 min
show:
extremas: true
legend_value: false
yaxis_id: temperature
- entity: climate.radiateur_salon
attribute: temperature
name: Consigne
unit: °C
stroke_width: 3
curve: stepline
color: "#2E86C1"
yaxis_id: temperature
show:
extremas: true
legend_value: false
- entity: climate.radiateur_salon
attribute: on_percent
name: Puissance
unit: "%"
transform: return x * 100;
opacity: 0.4
type: area
color: "#FF5733"
stroke_width: 1
curve: stepline
yaxis_id: pourcentage
show:
legend_value: false
attributes:
label: Statistiques
card_mod:
style: |
:host {
--card-mod-icon-color: #44739e;
}
ha-card {
top: -15px;
background: none;
}
Vu qu’il s’agit d’un dashboard mobile, je souhaitais que les « détails », ne s’affichent que si l’on click dessus d’ou le côté expander.
@chpego c’est la version de MelleD que j’utilise déjà.
Tu n’as pas bien compris, au lieu d’utiliser tabbed card, utilise swipe card.
lilp
Janvier 30, 2025, 8:29
6
Je dois louper quelque chose :
type: vertical-stack
cards:
- type: custom:expander-card
gap: 0em
padding: 0em
clear: false
expanded: false
title: Exterior
overlay-margin: 1em
child-padding: 0em
button-background: transparent
title-card-button-overlay: true
title-card:
type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Radiateur
entity: climate.radiateur_salon
icon: mdi:radiator
icon_color: |
{% if is_state(config.entity, 'heat') %}
orange
{% else %}
white
{% endif %}
layout: horizontal
tap_action:
action: more-info
cards:
- type: horizontal-stack
cards:
- type: custom:swipe-card
start_card: 1
reset_after: 20
parameters:
pagination:
type: bullets
cards:
- type: vertical-stack
cards:
- type: custom:versatile-thermostat-ui-card
entity: climate.radiateur_salon
disable_name: false
disable_window: false
disable_overpowering: false
disable_heat: false
disable_heat_cool: true
disable_cool: true
disable_auto: false
disable_dry: true
disable_off: false
disable_fan_only: true
disable_menu: false
disable_security_warning: false
set_current_as_main: false
disable_buttons: false
disable_power_infos: false
disable_auto_fan_infos: true
- type: vertical-stack
cards:
- type: custom:scheduler-card
include:
- climate
exclude:
- Masterbedroom
title: Salon
tags:
- Hiver
- Salon
exclude_tags: Masterbedroom
sort_by:
- state
- title
display_options:
primary_info: default
secondary_info:
- time
icon: action
show_header_toggle: false
time_step: 10
discover_existing: true
oui.
un exemple:
type: vertical-stack
cards:
- type: custom:expander-card
gap: 0em
padding: 0em
clear: false
expanded: false
title: Exterior
overlay-margin: 1em
child-padding: 0em
button-background: transparent
title-card-button-overlay: true
title-card:
type: custom:mushroom-template-card
primary: Radiateur
entity: climate.radiateur_salon
icon: mdi:radiator
icon_color: |
{% if is_state(config.entity, 'heat') %}
orange
{% else %}
white
{% endif %}
layout: horizontal
tap_action:
action: more-info
cards:
- type: custom:swipe-card
start_card: 1
reset_after: 20
parameters:
pagination:
type: bullets
cards:
- type: custom:simple-thermostat
entity: climate.versatile_thermostat_salon
step_size: "0.1"
sensors:
- entity: sensor.0x54ef44100050f9c3_linkquality
name: Qualité du lien
- entity: sensor.0x54ef44100050f9c3_energy
name: Total Conso
- entity: sensor.versatile_thermostat_salon_power_percent
name: Allumé Pourcent
- entity: sensor.versatile_thermostat_salon_mean_power_cycle
name: Power Allumé
- entity: sensor.0x54ef44100050f9c3_power
name: Puissance
layout:
step: row
mode:
headings: true
icons: true
names: true
header: {}
control:
hvac:
_name: Mode
"off":
name: Éteint
heat:
name: Chauffe
preset:
_name: prédéfini
none:
name: Manuel
icon: mdi:thermometer-lines
comfort:
name: Jour
icon: mdi:weather-sunny
eco:
name: Nuit
icon: mdi:weather-night
boost:
name: Boost
icon: mdi:arrow-top-right-thick
hide:
temperature: false
state: 0
- type: custom:scheduler-card
include:
- climate
exclude:
- Masterbedroom
title: Salon
tags:
- Hiver
- Salon
exclude_tags: Masterbedroom
sort_by:
- state
- title
display_options:
primary_info: default
secondary_info:
- time
icon: action
show_header_toggle: false
time_step: 10
discover_existing: true
lilp
Janvier 30, 2025, 10:21
8
Je passe vraiment à côté. Dès que je rajoute la deuxième carte, l’affichage se perd.
type: vertical-stack
cards:
- type: custom:expander-card
gap: 0em
padding: 0em
clear: false
expanded: false
title: Exterior
overlay-margin: 1em
child-padding: 0em
button-background: transparent
title-card-button-overlay: true
title-card:
type: custom:mushroom-template-card
primary: Radiateur
entity: climate.radiateur_salon
icon: mdi:radiator
icon_color: |
{% if is_state(config.entity, 'heat') %}
orange
{% else %}
white
{% endif %}
layout: horizontal
tap_action:
action: more-info
cards:
- type: custom:swipe-card
start_card: 1
reset_after: 20
parameters:
pagination:
type: bullets
cards:
- type: custom:simple-thermostat
entity: climate.radiateur_salon
step_size: "0.1"
layout:
step: row
mode:
headings: true
icons: true
names: true
header: {}
control:
hvac:
_name: Mode
"off":
name: Éteint
heat:
name: Chauffe
preset:
_name: prédéfini
none:
name: Manuel
icon: mdi:thermometer-lines
comfort:
name: Jour
icon: mdi:weather-sunny
eco:
name: Nuit
icon: mdi:weather-night
boost:
name: Boost
icon: mdi:arrow-top-right-thick
hide:
temperature: false
state: 0
- type: custom:scheduler-card
include:
- climate
exclude:
- Masterbedroom
title: Salon
tags:
- Hiver
- Salon
exclude_tags: Masterbedroom
sort_by:
- state
- title
display_options:
primary_info: default
secondary_info:
- time
icon: action
show_header_toggle: false
time_step: 10
discover_existing: true
regarde bien le code, ce n’est pas la carte thermostats que tu utilise. C’étaits pour un exemple, je n’utilise pas la carte custom:versatile-thermostat-ui-card.
lilp
Janvier 30, 2025, 10:35
10
J’ai la même chose avec versatile thermostat :
type: vertical-stack
cards:
- type: custom:expander-card
gap: 0em
padding: 0em
clear: false
expanded: false
title: Exterior
overlay-margin: 1em
child-padding: 0em
button-background: transparent
title-card-button-overlay: true
title-card:
type: custom:mushroom-template-card
primary: Radiateur
entity: climate.radiateur_salon
icon: mdi:radiator
icon_color: |
{% if is_state(config.entity, 'heat') %}
orange
{% else %}
white
{% endif %}
layout: horizontal
tap_action:
action: more-info
cards:
- type: custom:swipe-card
start_card: 1
reset_after: 20
parameters:
pagination:
type: bullets
cards:
- type: custom:versatile-thermostat-ui-card
entity: climate.radiateur_salon
disable_name: false
disable_window: false
disable_overpowering: false
disable_heat: false
disable_heat_cool: true
disable_cool: true
disable_auto: false
disable_dry: true
disable_off: false
disable_fan_only: true
disable_menu: false
disable_security_warning: false
set_current_as_main: false
disable_buttons: false
disable_power_infos: false
disable_auto_fan_infos: true
- type: custom:scheduler-card
include:
- climate
exclude:
- Masterbedroom
title: Salon
tags:
- Hiver
- Salon
exclude_tags: Masterbedroom
sort_by:
- state
- title
display_options:
primary_info: default
secondary_info:
- time
icon: action
show_header_toggle: false
time_step: 10
discover_existing: true
test en ajoutant une carte vertical-stack pour la carte versatile et scheduler.
exemple:
cards:
- type: custom:swipe-card
start_card: 1
reset_after: 20
parameters:
pagination:
type: bullets
cards:
- type: vertical-stack
cards:
- type: custom:versatile-thermostat-ui-card
entity: climate.radiateur_salon
disable_name: false
disable_window: false
disable_overpowering: false
disable_heat: false
disable_heat_cool: true
disable_cool: true
disable_auto: false
disable_dry: true
disable_off: false
disable_fan_only: true
disable_menu: false
disable_security_warning: false
set_current_as_main: false
disable_buttons: false
disable_power_infos: false
disable_auto_fan_infos: true
- type: vertical-stack
cards:
- type: custom:scheduler-card
include:
- climate
exclude:
- Masterbedroom
title: Salon
tags:
- Hiver
- Salon
exclude_tags: Masterbedroom
sort_by:
- state
- title
display_options:
primary_info: default
secondary_info:
- time
icon: action
show_header_toggle: false
time_step: 10
discover_existing: true
lilp
Janvier 30, 2025, 11:07
12
Même résultat hélas.
type: vertical-stack
cards:
- type: custom:expander-card
gap: 0em
padding: 0em
clear: false
expanded: false
title: Exterior
overlay-margin: 1em
child-padding: 0em
button-background: transparent
title-card-button-overlay: true
title-card:
type: custom:mushroom-template-card
primary: Radiateur
entity: climate.radiateur_salon
icon: mdi:radiator
icon_color: |
{% if is_state(config.entity, 'heat') %}
orange
{% else %}
white
{% endif %}
layout: horizontal
tap_action:
action: more-info
cards:
- type: custom:swipe-card
start_card: 1
reset_after: 20
parameters:
pagination:
type: bullets
cards:
- type: custom:versatile-thermostat-ui-card
entity: climate.radiateur_salon
disable_name: false
disable_window: false
disable_overpowering: false
disable_heat: false
disable_heat_cool: true
disable_cool: true
disable_auto: false
disable_dry: true
disable_off: false
disable_fan_only: true
disable_menu: false
disable_security_warning: false
set_current_as_main: false
disable_buttons: false
disable_power_infos: false
disable_auto_fan_infos: true
- type: custom:scheduler-card
include:
- climate
exclude:
- Masterbedroom
title: Salon
tags:
- Hiver
- Salon
exclude_tags: Masterbedroom
sort_by:
- state
- title
display_options:
primary_info: default
secondary_info:
- time
icon: action
show_header_toggle: false
time_step: 10
discover_existing: true
Non, c’est pas le code que je t’es dit de tester
tu as bien installé la carte swipe-card ?
Card that allows you to swipe throught multiple cards for Home Assistant Lovelace
lilp
Janvier 30, 2025, 11:16
14
La swipe card est bien installée:
Je l’utilise sur une autre page.
C’est ce code à tester ?
type: vertical-stack
cards:
- type: custom:expander-card
gap: 0em
padding: 0em
clear: false
expanded: false
title: Exterior
overlay-margin: 1em
child-padding: 0em
button-background: transparent
title-card-button-overlay: true
title-card:
type: custom:mushroom-template-card
primary: Radiateur
entity: climate.radiateur_salon
icon: mdi:radiator
icon_color: |
{% if is_state(config.entity, 'heat') %}
orange
{% else %}
white
{% endif %}
layout: horizontal
tap_action:
action: more-info
cards:
- type: custom:swipe-card
start_card: 1
reset_after: 20
parameters:
pagination:
type: bullets
cards:
- type: vertical-stack
cards:
- type: custom:versatile-thermostat-ui-card
entity: climate.radiateur_salon
- type: vertical-stack
cards:
- type: custom:scheduler-card
include:
- climate
exclude:
- Masterbedroom
title: Salon
tags:
- Hiver
- Salon
exclude_tags: Masterbedroom
sort_by:
- state
- title
display_options:
primary_info: default
secondary_info:
- time
icon: action
show_header_toggle: false
time_step: 10
discover_existing: true
Chez moi, il fonctionne ton code ( j’ai pas la carte versatile )
Réinstalle la carte swipe-card ou cas ou.
EDIT:ton code :
lilp
Janvier 30, 2025, 11:30
16
Toujours pas chez moi même pas après avec retélécharger swipe card et versatile ui avec le code qui tourne chez toi.
title: Bathroom
type: sections
max_columns: 4
icon: mdi:bathtub
cards: []
badges:
- type: entity
show_name: false
show_state: false
show_icon: true
icon: mdi:lightbulb-group
tap_action:
action: navigate
navigation_path: /dashboard-laptop/light
visibility:
- condition: user
users:
- efefe
entity: light.magic_areas_light_groups_salon_all_lights
color: ""
- type: entity
show_name: false
show_state: false
show_icon: true
icon: mdi:thermostat
tap_action:
action: navigate
navigation_path: /dashboard-laptop/thermostat
visibility:
- condition: user
users:
- fefe
entity: light.magic_areas_light_groups_salon_all_lights
color: ""
- type: entity
show_name: false
show_state: false
show_icon: true
icon: mdi:cast
tap_action:
action: navigate
navigation_path: /dashboard-laptop/mediaplayer
visibility:
- condition: user
users:
- fefe
entity: light.magic_areas_light_groups_salon_all_lights
color: ""
- type: entity
show_name: false
show_state: false
show_icon: true
icon: mdi:check
tap_action:
action: navigate
navigation_path: /dashboard-laptop/security
visibility:
- condition: user
users:
- fefe
entity: light.magic_areas_light_groups_salon_all_lights
color: ""
- type: entity
show_name: false
show_state: false
show_icon: true
icon: mdi:motion-sensor
tap_action:
action: navigate
navigation_path: /dashboard-laptop/sensor
visibility:
- condition: user
users:
- fefe
entity: light.magic_areas_light_groups_salon_all_lights
color: ""
- type: entity
show_name: false
show_state: false
show_icon: true
icon: mdi:home-lightning-bolt-outline
tap_action:
action: navigate
navigation_path: /dashboard-laptop/consommation
visibility:
- condition: user
users:
- fefe
entity: light.magic_areas_light_groups_salon_all_lights
color: ""
sections:
- type: grid
cards:
- type: heading
heading: New section
- type: vertical-stack
cards:
- type: custom:expander-card
gap: 0em
padding: 0em
clear: false
expanded: false
title: Exterior
overlay-margin: 1em
child-padding: 0em
button-background: transparent
title-card-button-overlay: true
title-card:
type: custom:mushroom-template-card
primary: Radiateur
entity: climate.radiateur_salon
icon: mdi:radiator
icon_color: |
{% if is_state(config.entity, 'heat') %}
orange
{% else %}
white
{% endif %}
layout: horizontal
tap_action:
action: more-info
cards:
- type: custom:swipe-card
start_card: 1
reset_after: 20
parameters:
pagination:
type: bullets
cards:
- type: custom:versatile-thermostat-ui-card
entity: climate.radiateur_salon
disable_name: false
disable_window: false
disable_overpowering: false
disable_heat: false
disable_heat_cool: true
disable_cool: true
disable_auto: false
disable_dry: true
disable_off: false
disable_fan_only: true
disable_menu: false
disable_security_warning: false
set_current_as_main: false
disable_buttons: false
disable_power_infos: false
disable_auto_fan_infos: true
- type: custom:scheduler-card
include:
- climate
exclude:
- Masterbedroom
title: Salon
tags:
- Hiver
- Salon
exclude_tags: Masterbedroom
sort_by:
- state
- title
display_options:
primary_info: default
secondary_info:
- time
icon: action
show_header_toggle: false
time_step: 10
discover_existing: true
path: bathroom
subview: true
C’est le code complet de la Vue.
J’ai nettoyé le cash du navigateur au cas ou.
Pareil en vue section, avec ton code, aucun soucis.
lilp
Janvier 30, 2025, 12:26
18
Lorsque que je met une seule card dans la swipe, cela est bon, mais pas quand j’en ajoute une deuxième.
lilp
Janvier 30, 2025, 2:05
19
Après une ultime bafouille, et une reprise de 0, j’ai le code suivant qui fonctionne.
type: vertical-stack
cards:
- type: custom:expander-card
gap: 0em
padding: 0em
clear: false
expanded: false
title: Exterior
overlay-margin: 1em
child-padding: 0em
button-background: transparent
title-card-button-overlay: true
title-card:
type: custom:mushroom-template-card
primary: Radiateur
entity: climate.radiateur_salon
icon: mdi:radiator
icon_color: |
{% if is_state(config.entity, 'heat') %}
orange
{% else %}
white
{% endif %}
layout: horizontal
tap_action:
action: more-info
cards:
- type: custom:swipe-card
start_card: 1
reset_after: 20
parameters:
pagination:
type: bullets
cards:
- type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: custom:stack-in-card
mode: vertical
keep:
box_shadow: true
margin: true
border_radius: true
background: true
outer_padding: false
cards:
- type: custom:swipe-card
start_card: 1
reset_after: 20
parameters:
pagination:
type: bullets
cards:
- type: vertical-stack
cards:
- type: custom:versatile-thermostat-ui-card
entity: climate.radiateur_salon
disable_name: false
disable_window: false
disable_overpowering: false
disable_heat: false
disable_heat_cool: true
disable_cool: true
disable_auto: false
disable_dry: true
disable_off: false
disable_fan_only: true
disable_menu: false
disable_security_warning: false
set_current_as_main: false
disable_buttons: false
disable_power_infos: false
disable_auto_fan_infos: true
- type: vertical-stack
cards:
- type: custom:scheduler-card
include:
- climate
exclude:
- Masterbedroom
title: Salon
tags:
- Hiver
- Salon
exclude_tags: Masterbedroom
sort_by:
- state
- title
display_options:
primary_info: default
secondary_info:
- time
icon: action
show_header_toggle: false
time_step: 10
discover_existing: true
- type: vertical-stack
cards:
- type: custom:apexcharts-card
update_interval: 60sec
header:
show: true
show_states: true
colorize_states: true
title: Historique
graph_span: 1d
yaxis:
- id: temperature
- id: pourcentage
opposite: true
min: 0
max: 100
decimals: 0
series:
- entity: sensor.temperature_salon_temperature
name: Temperature
type: area
curve: smooth
color: "#FFB53C"
stroke_width: 3
group_by:
duration: 30 min
show:
extremas: true
legend_value: false
yaxis_id: temperature
- entity: sensor.maison_temperature
name: Temperature EXT
type: line
curve: smooth
color: "#0E6655"
stroke_width: 2
group_by:
duration: 30 min
show:
extremas: true
legend_value: false
yaxis_id: temperature
- entity: climate.radiateur_salon
attribute: temperature
name: Consigne
unit: °C
stroke_width: 3
curve: stepline
color: "#2E86C1"
yaxis_id: temperature
show:
extremas: true
legend_value: false
- entity: climate.radiateur_salon
attribute: on_percent
name: Puissance
unit: "%"
transform: return x * 100;
opacity: 0.4
type: area
color: "#FF5733"
stroke_width: 1
curve: stepline
yaxis_id: pourcentage
show:
legend_value: false
Et s’afiche en entier sur le smartphone.
Ouah le code, 1 swipe card, puis 2 vertical-stack, puis un stack-in-card, puis un autre swipe-card
