Et pour intégrer la carte, tu vas au plus simple.
Tu ajoute une carte manuellement en cliquant sur « Ajouter une carte » en bas à droite, puis tu recherches « Manuel »
Ensuite tu copie colle ce code :
type: custom:button-card
show_entity_picture: false
entity: template
name: Speedtest
show_icon: false
show_name: true
tap_action:
action: navigate
navigation_path: "#empty"
styles:
card:
- height: 480px
- top: 0px
- border-radius: 10px
- background-color: transparent
- "--mdc-ripple-press-opacity": 0
name:
- z-index: 2
- position: absolute
- font-size: 45px
- font-weight: lighter
- justify-self: start
- color: white
- left: 25px
- top: 20px
icon:
- width: 50%
img_cell:
- z-index: 2
custom_fields:
blur:
- z-index: 1
- top: 0%
- left: 0%
- width: 100%
- height: 100%
- border-radius: 10px
- position: absolute
- background-color: rgba(0, 0, 0, 0.1)
- backdrop-filter: blur(10px)
- "-webkit-backdrop-filter": blur(20px)
temp:
- z-index: 2
- position: absolute
- top: 25%
- left: 5%
- height: 100%
- width: 90%
custom_fields:
blur: |
<div></div>
temp:
card:
type: vertical-stack
cards:
- type: custom:button-card
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.speedtest_cli_data
color: var(--google-grey)
show_icon: true
show_label: false
show_name: true
styles:
icon:
- color: rgba(var(--color-theme),0.9)
- width: 20px
img_cell: null
name:
- font-weight: bold
- font-size: 16px
- place-self: start
- margin: 15px 0 0 15px
grid:
- grid-template-areas: "\"i n item1\" \"i n item1\""
- grid-template-columns: 1fr 10fr 1fr
- grid-template-rows: auto
card:
- box-shadow: none
- border-radius: 20px
- padding_bottom: "-8px"
- height: 65px
- padding-top: 5px
- padding-left: 5px
- "--mdc-ripple-color": white
- "--mdc-ripple-press-opacity": 0.9
name: Démarrer Speedtest
icon: mdi:speedometer
custom_fields:
item1:
card:
type: custom:button-card
show_icon: true
show_name: false
show_label: false
styles:
icon:
- color: rgba(var(--color-theme),0.9)
- width: 20px
grid:
- grid-template-areas: i
- grid-template-columns: auto
- grid-template-rows: auto
card:
- box-shadow: none
- background: rgba(0, 0, 0, 0.0)
- border: none
icon: mdi:chevron-right
- type: custom:swipe-card
start_card: 1
parameters:
effect: coverflow
roundLengths: true
speed: 650
spaceBetween: 20
threshold: 7
coverflowEffect:
rotate: 80
depth: 300
start_card: 1
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.speedtest_cli_download
name: Download
decimals: "0"
more_info: true
line_width: 2
hours_to_show: 24
points_per_hour: 2
show:
graph: line
extrema: true
color_thresholds:
- value: 0
color: "#ef1d0f"
- value: 2000
color: "#ef5a0f"
- value: 3000
color: "#f0da11"
- value: 4000
color: "#11f13a"
- value: 7000
color: "#1da4f2"
style: |
ha-card .header.flex .name.flex {
color: #44739e;
font-size: 14px;
}
.header.flex .icon {
--mdc-icon-size: 28px;
}
:host {
--card-mod-icon-color: #44739e;
}
.fill {
fill: white;
opacity: 0.2 !important;
}
ha-card {
box-shadow: none;
}
ha-card .states.flex::after {
content: "{{states('sensor.speedtest_cli_server_name')}}";
white-space: pre;
background-color: rgba(68, 115, 158,0.4);
padding: 2px 2px 0px 2px;
border-radius: 4px;
font-size: 9px;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.speedtest_cli_upload
name: Upload
name: Upload
decimals: "0"
more_info: true
line_width: 2
hours_to_show: 24
points_per_hour: 2
show:
graph: line
extrema: true
color_thresholds:
- value: 0
color: "#ef1d0f"
- value: 2000
color: "#ef5a0f"
- value: 3000
color: "#f0da11"
- value: 4000
color: "#11f13a"
- value: 7000
color: "#1da4f2"
style: |
ha-card .header.flex .name.flex {
color: #44739e;
font-size: 14px;
}
.header.flex .icon {
--mdc-icon-size: 28px;
}
:host {
--card-mod-icon-color: #44739e;
}
.fill {
fill: white;
opacity: 0.2 !important;
}
ha-card {
box-shadow: none;
}
ha-card .states.flex::after {
content: "{{states('sensor.speedtest_cli_server_name')}}";
white-space: pre;
background-color: rgba(68, 115, 158,0.4);
padding: 2px 2px 0px 2px;
border-radius: 4px;
font-size: 9px;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.speedtest_cli_ping
name: Ping
name: Ping
decimals: "0"
more_info: true
line_width: 2
hours_to_show: 24
points_per_hour: 2
show:
graph: line
extrema: true
color_thresholds:
- value: 0
color: "#ef1d0f"
- value: 10
color: "#ef5a0f"
- value: 15
color: "#f0da11"
- value: 20
color: "#11f13a"
- value: 25
color: "#1da4f2"
style: |
ha-card .header.flex .name.flex {
color: #44739e;
font-size: 14px;
}
.header.flex .icon {
--mdc-icon-size: 28px;
}
:host {
--card-mod-icon-color: #44739e;
}
.fill {
fill: white;
opacity: 0.2 !important;
}
ha-card {
box-shadow: none;
}
ha-card .states.flex::after {
content: "{{states('sensor.speedtest_cli_server_name')}}";
white-space: pre;
background-color: rgba(68, 115, 158,0.4);
padding: 2px 2px 0px 2px;
border-radius: 4px;
font-size: 9px;
}
- type: vertical-stack
cards:
- type: markdown
content: "+ '.png' }})"
card_mod:
style: |
ha-card {
--ha-card-background: transparent;
color: rgb(255,255,255);
border-color: transparent;
- type: custom:html-card
name: Speedtest
content: >
<a href="[[sensor.speedtest_cli_url]]">Speedtest
Résultat</a>
card_mod:
style: |
ha-card {
--ha-card-background: transparent;
color: rgb(255,255,255);
border-color: transparent;
margin-left: 0px;
margin-top: -40px;
Résultat :
