Hello
a la recherche de card je suis tombé sur deux codes
Premier code via le forum officielle de Home Assistant et le second sur hacf.fr
Merci au deux auteurs des codes.
Une fois couplé cela à donné ceci comme bébé
le code de la carte
type: custom:mod-card
card:
type: custom:swipe-card
parameters:
pagination:
type: bullets
clickable: true
effect: cube
grabCursor: true
cubeEffect:
shadow: false
loop: false
cards:
- type: custom:simple-thermostat
card_mod:
class: nav_1
entity: climate.thermostat_salon
step: column
sensors:
- entity: sensor.th_salon_temperature
template: '{{state.text}}%'
name: Température
- entity: sensor.th_salon_humidity
template: '{{state.text}}%'
name: Humidité
hide:
temperature: true
step_size: 0.5
style: |
ha-card.heating .current--value,
ha-card.heating ha-icon.header__icon {
color: red;
}
.mode {
margin-top: 0px
padding: 15px;
}
.mode-icon {
min-height: 50px;
--mdc-icon-size: 50px;
}
.mode-item {
background: none !important;
color: var(--state-icon-color) !important;
}
.mode-item.active.sleep {
background: none;
color: rgb(130,223,223) !important;
}
.mode-item.active.away {
background: none;
color: rgb(180,94,224) !important;
}
.mode-item.active.eco {
background: none;
color: rgb(94,223,111) !important;
}
.mode-item.active.comfort {
background: none;
color: rgb(223,94,94) !important;
}
.mode-item.active.boost {
background: none;
color: rgb(255,94,50) !important;
}
layout:
mode:
headings: false
control:
preset:
none: false
away:
name: ''
icon: mdi:airplane
activity: false
sleep:
name: ''
icon: mdi:weather-night
comfort:
name: ''
icon: mdi:radiator
eco:
name: ''
icon: mdi:leaf
boost:
name: ''
icon: mdi:fire
home: false
- type: custom:simple-thermostat
card_mod:
class: nav_2
entity: climate.thermostat_chambre
step: column
sensors:
- entity: sensor.th_chambre_temperature
template: '{{state.text}}%'
name: Température
- entity: sensor.th_chambre_humidity
template: '{{state.text}}%'
name: Humidité
hide:
temperature: true
step_size: 0.5
style: |
ha-card.heating .current--value,
ha-card.heating ha-icon.header__icon {
color: red;
}
.mode {
margin-top: 0px
padding: 15px;
}
.mode-icon {
min-height: 50px;
--mdc-icon-size: 50px;
}
.mode-item {
background: none !important;
color: var(--state-icon-color) !important;
}
.mode-item.active.sleep {
background: none;
color: rgb(130,223,223) !important;
}
.mode-item.active.away {
background: none;
color: rgb(180,94,224) !important;
}
.mode-item.active.eco {
background: none;
color: rgb(94,223,111) !important;
}
.mode-item.active.comfort {
background: none;
color: rgb(223,94,94) !important;
}
.mode-item.active.boost {
background: none;
color: rgb(255,94,50) !important;
}
layout:
mode:
headings: false
control:
preset:
none: false
away:
name: ''
icon: mdi:airplane
activity: false
sleep:
name: ''
icon: mdi:weather-night
comfort:
name: ''
icon: mdi:radiator
eco:
name: ''
icon: mdi:leaf
boost:
name: ''
icon: mdi:fire
home: false
- type: custom:simple-thermostat
card_mod:
class: nav_3
entity: climate.thermostat_salle_de_bain
step: column
sensors:
- entity: sensor.th_salle_de_bain_temperature
template: '{{state.text}}%'
name: Température
- entity: sensor.th_salle_de_bain_humidity
template: '{{state.text}}%'
name: Humidité
hide:
temperature: true
step_size: 0.5
style: |
ha-card.heating .current--value,
ha-card.heating ha-icon.header__icon {
color: red;
}
.mode {
margin-top: 0px
padding: 15px;
}
.mode-icon {
min-height: 50px;
--mdc-icon-size: 50px;
}
.mode-item {
background: none !important;
color: var(--state-icon-color) !important;
}
.mode-item.active.sleep {
background: none;
color: rgb(130,223,223) !important;
}
.mode-item.active.away {
background: none;
color: rgb(180,94,224) !important;
}
.mode-item.active.eco {
background: none;
color: rgb(94,223,111) !important;
}
.mode-item.active.comfort {
background: none;
color: rgb(223,94,94) !important;
}
.mode-item.active.boost {
background: none;
color: rgb(255,94,50) !important;
}
layout:
mode:
headings: false
control:
preset:
none: false
away:
name: ''
icon: mdi:airplane
activity: false
sleep:
name: ''
icon: mdi:weather-night
comfort:
name: ''
icon: mdi:radiator
eco:
name: ''
icon: mdi:leaf
boost:
name: ''
icon: mdi:fire
home: false
style:
swipe-card$: |
.swiper-container {
margin: 0 0 0 0 !important;
padding: 65px 30px 10px 30px !important;
}
.swiper-pagination-bullets {
position: absolute;
top: 15px;
bottom: inherit !important;
width: 100%;
}
.swiper-pagination-bullets>span {
margin: 0px !important;
min-width: 100px;
min-height: 25px;
padding-top: 5px;
border-radius: 0;
}
.swiper-pagination-bullets>span:last-child {
border-radius: 0px 10px 10px 0px;
}
.swiper-pagination-bullets>span:first-child {
border-radius: 10px 0 0 10px;
}
.swiper-pagination-bullets>span:nth-child(1):before {
content: "SALON";
}
.swiper-pagination-bullets>span:nth-child(2):before {
content: "CHAMBRE";
}
.swiper-pagination-bullets>span:nth-child(3):before {
content: "SDB";
}
Seconde card :
Code:
type: custom:mod-card
card:
type: custom:swipe-card
parameters:
pagination:
type: bullets
clickable: true
effect: cube
grabCursor: true
cubeEffect:
shadow: false
loop: false
cards:
- type: custom:firemote-card
card_mod:
class: nav_1
entity: media_player.fire_tv_stick_4k_salon
device_type: fire_tv_stick_4k_max
compatibility_mode: default
app_launch_1: prime-video
app_launch_2: netflix
app_launch_3: disney-plus
app_launch_4: plex
app_launch_5: myCanal
app_launch_6: ''
visible_name_text: FireStick Salon
scale: '80'
- type: custom:upcoming-media-card
entity: sensor.plex_recently_added_2
title: Films
image_style: fanart
clock: 24
max: 5
box_shadows: true
title_text: $title
line1_text: $episode
line2_text: $number
card_mod:
class: nav_2
- type: custom:upcoming-media-card
entity: sensor.plex_recently_added
title: Séries
image_style: fanart
clock: 24
max: 5
box_shadows: true
title_text: $title
line1_text: $episode
line2_text: $number
card_mod:
class: nav_3
style:
swipe-card$: |
.swiper-container {
margin: 0 0 0 0 !important;
padding: 65px 30px 10px 30px !important;
}
.swiper-pagination-bullets {
position: absolute;
top: 15px;
bottom: inherit !important;
width: 100%;
}
.swiper-pagination-bullets>span {
margin: 0px !important;
min-width: 100px;
min-height: 25px;
padding-top: 5px;
border-radius: 0;
}
.swiper-pagination-bullets>span:last-child {
border-radius: 0px 10px 10px 0px;
}
.swiper-pagination-bullets>span:first-child {
border-radius: 10px 0 0 10px;
}
.swiper-pagination-bullets>span:nth-child(1):before {
content: "TV SALON";
}
.swiper-pagination-bullets>span:nth-child(2):before {
content: "FILMS";
}
.swiper-pagination-bullets>span:nth-child(3):before {
content: "SERIE";
}