Salut à tous,
J’essaye d’utiliser cette carte mais la popup-card de Thomasloven n’est plus utilsable…
Vous l’avez remplacéé par quoi dans le code ?
Bonjour,
aucun soucis la carte existe bien. Elle fait partie de l’intégration Browser-mod.
Tu aurais pas désinstaller Browser-mod ?
Merci, c’était juste ça… 
Et pour le light.rpi_cooling_fan…
Comment activer ou configurer cette ID
1 « J'aime »
Il te faut un ventilateur qui gère le PWM. J’avais fais un tuto:
1 « J'aime »
Bonjour,
Grâce à vous j’ai réussi à faire ceci mais il reste encore du travail car certaines données ne remontent pas ou très sommairement contrairement à certains d’entre vous.
Rien que le NAS, il y a des variante mais chez SYNOLOGY
2 « J'aime »
Bonjour,
j’ai fais des modifications sur mon dashboard.
Attention ! décollage du boeing 747 
( clin d’oeil @herveaurel )
2 « J'aime »
Bonjour
Et tu peux partager ton code ?
Merci
Phil
Code de la page complète
- theme: Backend-selected
title: Router
path: router
icon: mdi:set-top-box
background: center / cover no-repeat url("/local/images/wallpaper-router2.jpg") fixed
layout:
height: auto
width: 358
margin: 0px 4px 0px 0px
type: custom:horizontal-layout
cards:
- type: custom:stack-in-card
mode: vertical
keep:
box_shadow: true
margin: false
border_radius: true
background: false
outer_padding: false
cards:
- type: picture
image: /local/images/Orange3.png
card_mod:
style: |
ha-card {
border-radius: 0px;
}
- type: custom:vertical-stack-in-card
horizontal: true
card_mod:
style: |
ha-card {
margin-top: -15px;
background-color: none;
}
cards:
- type: custom:mushroom-template-card
primary: IP int/ext
secondary: ' '
icon: mdi:ip-network
icon_color: '#44739E'
fill_container: true
layout: horizontal
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset;
--shape-color: rgba(32,32,32,0.2) !important;
}
.: |
ha-card {
background: none;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: device_tracker.sagemcom_broadband_sas_2b_18_c0
content: >-
{{
state_attr('device_tracker.sagemcom_broadband_sas_2b_18_c0','ip')
}}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 15px;
--chip-font-size: 14px;
--color: #44739e;
}
- type: template
entity: binary_sensor.wan_status_2
content: >-
{{
state_attr("binary_sensor.wan_status_2","wan_ipaddress")
}}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
margin-left: 2px;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 10px;
--chip-font-size: 14px;
--color: #44739e;
}
alignment: end
card_mod:
style: |
ha-card {top:60%;right:5%}
- type: custom:vertical-stack-in-card
horizontal: true
card_mod:
style: |
ha-card {
margin-top: -17px;
background-color: none;
}
cards:
- type: custom:mushroom-template-card
primary: Statut
secondary: ' '
icon: mdi:clock-start
icon_color: '#44739E'
fill_container: true
layout: horizontal
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset;
--shape-color: rgba(32,32,32,0.2) !important;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:wan
entity: binary_sensor.wan_status_2
content: >-
{{
state_attr("binary_sensor.wan_status_2","link_state")
}}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 22px;
--chip-font-size: 12px;
--color: #44739e;
}
- type: template
icon: mdi:clock-start
entity: binary_sensor.wan_status_2
content: >-
{% set uptime = (now()| as_timestamp -
state_attr('binary_sensor.wan_status_2', 'uptime') |
as_timestamp ) %} {% set jours = (uptime / 86400) |
int(0) %} {%- if jours > 0 -%} {{ jours }}d {{ (uptime
- (jours * 86400)) | int(0) | timestamp_custom('%Hh
%Mm %Ss', false) }} {%- else -%} {{ uptime | int(0) |
timestamp_custom('%Hh %Mm %Ss', false) }} {%- endif
-%}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 22px;
--chip-font-size: 12px;
--color: #44739e;
}
alignment: end
card_mod:
style: |
ha-card {
top: 60%;
right: 5%;
}
- type: custom:vertical-stack-in-card
horizontal: true
card_mod:
style: |
ha-card {
margin-top: -17px;
background-color: none;
}
cards:
- type: custom:mushroom-template-card
primary: Clients connectés
secondary: ' '
icon: mdi:lan-connect
icon_color: '#44739E'
fill_container: true
layout: horizontal
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset;
--shape-color: rgba(32,32,32,0.2) !important;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: fas:network-wired
entity: binary_sensor.wan_status_2
content: >-
{{ state_attr("binary_sensor.wan_status_2","wired
clients") }}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 19px;
--chip-font-size: 14px;
--color: #44739e;
}
- type: template
icon: mdi:access-point-network
entity: binary_sensor.wan_status_2
content: >-
{{ state_attr('binary_sensor.wan_status_2','wireless
clients') }}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
margin-left: 2px;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 21px;
--chip-font-size: 14px;
--color: #44739e;
}
alignment: end
card_mod:
style: |
ha-card {top:60%;right:5%}
- type: custom:vertical-stack-in-card
horizontal: true
card_mod:
style: |
ha-card {
margin-top: -17px;
background-color: none;
}
cards:
- type: custom:mushroom-template-card
primary: Options
secondary: ' '
icon: mdi:tools
icon_color: '#44739E'
fill_container: true
layout: horizontal
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset;
--shape-color: rgba(32,32,32,0.2) !important;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: switch.wifi_switch_2
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:wifi
icon_color: '#44739E'
content_info: state
card_mod:
style: |
ha-card {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 19px;
--chip-font-size: 14px;
}
- type: entity
entity: button.ring_your_phone_2
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
name: Faire sonner
content_info: name
icon_color: '#44739E'
card_mod:
style: |
ha-card {
margin-left: 2px;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 20px;
--chip-font-size: 14px;
}
alignment: end
card_mod:
style: |
ha-card {top:60%;right:5%}
- type: custom:vertical-stack-in-card
horizontal: true
card_mod:
style: |
ha-card {
margin-top: -17px;
background-color: none;
}
cards:
- type: custom:mushroom-template-card
primary: DNS
secondary: ' '
icon: mdi:dns
icon_color: '#44739E'
fill_container: true
layout: horizontal
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset;
--shape-color: rgba(32,32,32,0.2) !important;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.livebox_6_dynamic_dns_no_ip
icon: mdi:dns
content: NO-IP
tap_action:
action: more-info
card_mod:
style: |
ha-card {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 20px;
--chip-font-size: 14px;
{% if is_state('binary_sensor.livebox_6_dynamic_dns_no_ip','off') %}
--color: green;
{% else %}
--color: red;
{% endif %}
}
- type: template
entity: binary_sensor.livebox_6_dynamic_dns_ovh_dynhost
icon: mdi:dns
content: OVH
tap_action:
action: more-info
card_mod:
style: |
ha-card {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 20px;
--chip-font-size: 14px;
{% if is_state('binary_sensor.livebox_6_dynamic_dns_ovh_dynhost','off') %}
--color: green;
{% else %}
--color: red;
{% endif %}
}
alignment: end
card_mod:
style: |
ha-card {top:60%;right:5%}
- type: custom:mod-card
style:
.: |
ha-card {
margin: 21px 10px 0 10px;
}
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: button.livebox_restart_2
color_type: icon
name: Livebox v6<br/>Reboot
show_entity_picture: true
entity_picture: /local/images/Livebox.png
color: '#44739e'
aspect_ratio: 4.55/1
layout: icon_name
styles:
card:
- padding: 0.2em
- margin: '-10px 0'
- '--mdc-ripple-color': '#44739e'
- '--mdc-ripple-press-opacity': 0.5
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 1px rgba(0,0,0,1.0) outset
- border-radius: 25px
icon:
- opacity: 1
name:
- font-size: 0.85em
- white-space: normal
state:
- font-size: 0.75em
- white-space: normal
label:
- font-size: 0.65em
- white-space: normal
hold_action:
action: more-info
- type: custom:button-card
entity: binary_sensor.call_missed_2
color_type: icon
aspect_ratio: 4.55/1
icon: mdi:phone-alert
name: Appels manqués View/Reset
layout: icon_name
size: 45%
state:
- value: 'on'
color: rgb(250, 0, 1)
icon: mdi:phone-alert
- value: 'off'
color: rgb(0, 102, 0)
icon: mdi:phone-check
styles:
card:
- padding: 0.2em
- margin: '-10px 0'
- '--mdc-ripple-color': '#44739e'
- '--mdc-ripple-press-opacity': 0.5
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 1px rgba(0,0,0,1.0) outset
- border-radius: 25px
icon:
- opacity: 1
name:
- font-size: 0.85em
- white-space: normal
state:
- font-size: 0.75em
- white-space: normal
label:
- font-size: 0.65em
- white-space: normal
double_tap_action:
action: call-service
service: livebox.remove_call_missed
hold_action:
action: more-info
- type: horizontal-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.speedtest_cli_download
name: Download
icon: fas:download
color: '#336600'
entity_row: true
min: 1
max: 1000
positions:
icon: inside
minmax: 'off'
animation:
state: 'on'
speed: '1'
height: 27px
decimal: 0
card_mod:
style: |
ha-card {
font-size: 14px;
margin: -14px -8px 0px -5px;
--mdc-icon-size: 20px;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
- type: custom:bar-card
entities:
- entity: sensor.speedtest_cli_upload
direction: right
name: Upload
icon: fas:upload
color: rgb(250, 0, 1)
entity_row: true
min: 1
max: 800
positions:
icon: inside
minmax: 'off'
animation:
state: 'on'
speed: '1'
height: 27px
decimal: 0
card_mod:
style: |
ha-card {
font-size: 14px;
margin: -14px -3px 0px -11px;
--mdc-icon-size: 20px;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
- type: custom:mini-graph-card
decimals: 0
hour24: true
height: 85
hours_to_show: 24
line_width: 2
entities:
- entity: sensor.speedtest_cli_ping
name: Ping
show:
fill: true
graph: line
icon: true
name: true
state: true
labels: false
extrema: false
average: false
icon_adaptive_color: true
align_icon: right
align_state: left
font_size: 70
animate: false
color_thresholds:
- value: 10
color: '#336600'
- value: 15
color: '#f39c12'
- value: 20
color: '#d35400'
- value: 30
color: '#c0392b'
card_mod:
style: |
ha-card .header.flex .name.flex {
color: #44739e;
font-size: 14px;
}
.header.flex .icon {
color: #44739e;
}
.fill {
fill: white;
opacity: 1 !important;
}
ha-card {
margin-top: -18px !important;
box-shadow: none;
}
ha-card .states.flex::after {
content: "Opérateur: {{states('sensor.speedtest_isp')}} Fibre 2Gb/s \A Serveur: {{states('sensor.speedtest_location')}} - {{states('sensor.speedtest_server_name')}}";
white-space: pre;
padding: 2px 10px 0px 10px;
margin-top: -10px;
margin-right: -4px;
border-radius: 25px;
font-size: 14px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
card_mod:
style: |
ha-card {
box-shadow: 0 0 0 1px gray;
}
- type: custom:stack-in-card
mode: vertical
keep:
box_shadow: true
margin: false
border_radius: true
background: false
outer_padding: false
cards:
- type: picture
image: /local/images/ds214+logo2.png
card_mod:
style: |
ha-card {
border-radius: 0px;
}
- type: custom:vertical-stack-in-card
horizontal: true
card_mod:
style: |
ha-card {
margin-top: -15px;
background-color: none;
}
cards:
- type: custom:mushroom-template-card
primary: IP int/ext
secondary: ' '
icon: mdi:ip-network
icon_color: '#44739E'
fill_container: false
layout: horizontal
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset;
--shape-color: rgba(32,32,32,0.2) !important;
}
.: |
ha-card {
background: none;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: device_tracker.diskstation
content: '{{ state_attr("device_tracker.diskstation","ip") }}'
tap_action:
action: more-info
card_mod:
style: |
ha-card {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 15px;
--chip-font-size: 14px;
--color: #44739e;
}
- type: template
entity: binary_sensor.wan_status_2
content: >-
{{
state_attr("binary_sensor.wan_status_2","wan_ipaddress")
}}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
margin-left: 2px;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 10px;
--chip-font-size: 14px;
--color: #44739e;
}
alignment: end
card_mod:
style: |
ha-card {top:60%;right:5%}
- type: custom:vertical-stack-in-card
horizontal: true
card_mod:
style: |
ha-card {
margin-top: -17px;
background-color: none;
}
cards:
- type: custom:mushroom-template-card
primary: Statut
secondary: ' '
icon: mdi:clock-start
icon_color: '#44739E'
fill_container: false
layout: horizontal
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
browser_id: THIS
size: normal
title: HDD Statut
style: |-
--popup-border-radius: 10px;
--popup-border-width: 1px;
--popup-padding-x: 4px;
--popup-padding-y: 4px;
content:
type: entities
entities:
- entity: >-
binary_sensor.diskstation_drive_1_exceeded_max_bad_sectors
type: custom:multiple-entity-row
name: Max Bad Sector
icon: mdi:harddisk
show_state: false
entities:
- entity: >-
binary_sensor.diskstation_drive_1_exceeded_max_bad_sectors
name: HDD 1
- entity: >-
binary_sensor.diskstation_drive_1_exceeded_max_bad_sectors
name: HDD 2
- entity: >-
binary_sensor.diskstation_drive_1_below_min_remaining_life
type: custom:multiple-entity-row
name: Min Remaining Life
icon: mdi:harddisk
show_state: false
entities:
- entity: >-
binary_sensor.diskstation_drive_1_below_min_remaining_life
name: HDD 1
- entity: >-
binary_sensor.diskstation_drive_2_below_min_remaining_life
name: HDD 2
- entity: sensor.diskstation_drive_1_status
type: custom:multiple-entity-row
name: État
icon: mdi:harddisk
show_state: false
entities:
- entity: sensor.diskstation_drive_1_status
name: HDD 1
- entity: sensor.diskstation_drive_2_status
name: HDD 2
- entity: sensor.diskstation_drive_1_status_smart
type: custom:multiple-entity-row
name: État (Intelligent)
icon: mdi:harddisk
show_state: false
entities:
- entity: sensor.diskstation_drive_1_status_smart
name: HDD 1
- entity: sensor.diskstation_drive_2_status_smart
name: HDD 2
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset;
--shape-color: rgba(32,32,32,0.2) !important;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:harddisk
entity: sensor.diskstation_volume_1_status
content: '{{ states("sensor.diskstation_volume_1_status") }}'
tap_action:
action: more-info
card_mod:
style: |
ha-card {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 22px;
--chip-font-size: 12px;
--color: #44739e;
}
- type: template
icon: mdi:clock-start
entity: sensor.diskstation_last_boot
content: >-
{% set uptime = (now()| as_timestamp -
states('sensor.diskstation_last_boot') | as_timestamp
) %} {% set jours = (uptime / 86400) | int(0) %} {%-
if jours > 0 -%} {{ jours }}d {{ (uptime - (jours *
86400)) | int(0) | timestamp_custom('%Hh %Mm %Ss',
false) }} {%- else -%} {{ uptime | int(0) |
timestamp_custom('%Hh %Mm %Ss', false) }} {%- endif
-%}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 22px;
--chip-font-size: 12px;
--color: #44739e;
}
alignment: end
card_mod:
style: |
ha-card {
top: 60%;
right: 5%;
}
- type: custom:mod-card
card:
type: vertical-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.diskstation_cpu_utilization_total
name: CPU
icon: phu:intel-cpu
height: 27px
color: rgb(68, 115, 158)
min: 1
max: 100
positions:
indicator: 'off'
- entity: sensor.diskstation_memory_usage_real
name: RAM
icon: phu:ram-memory
height: 27px
color: red
min: 1
max: 100
target: 90
positions:
indicator: 'off'
- entity: sensor.diskstation_volume_1_volume_used
name: HDD SHR 4To
icon: mdi:harddisk
height: 27px
color: green
min: 1
max: 100
target: 70
positions:
indicator: 'off'
card_mod:
style:
ha-icon $: |
ha-svg-icon {
margin-top: 6px;
margin-left: 6px;
.: |
ha-card {
margin-top: -20px;
margin-left: -3px;
margin-right: -7px;
box-shadow: none;
background: none;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
bar-card-name {
margin: 5px;
}
ha-icon {
margin-top: -15px;
margin-left: 0px;
width: 42px;
height: 38px;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
border-radius: 50px;
}
- type: horizontal-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.diskstation_temperature
name: NAS
icon: mdi:blank
height: 27px
color: orange
min: 1
max: 60
target: 50
positions:
name: inside
indicator: 'off'
card_mod:
style: |
ha-card {
margin-top: -33px;
margin-left: -10px;
margin-right: -7px;
font-size: 14px;
background: none;
}
ha-icon {
--mdc-icon-size: 55px;
background: url("/local/images/nas ds214+3.png");
background-size: 100% 100%;
margin-top: -10px;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
bar-card-name {
margin: 5px;
}
- type: custom:bar-card
entities:
- entity: sensor.diskstation_drive_1_temperature
name: HDD1
icon: mdi:blank
height: 27px
color: orange
min: 1
max: 60
target: 50
positions:
name: inside
indicator: 'off'
card_mod:
style: |
ha-card {
margin-top: -33px;
margin-left: -13px;
margin-right: -7px;
font-size: 14px;
}
ha-icon {
--mdc-icon-size: 40px;
background: url("/local/images/wd red pro3.png");
background-size: 100% 100%;
margin-top: -10px;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
bar-card-name {
margin: 5px;
}
- type: custom:bar-card
entities:
- entity: sensor.diskstation_drive_2_temperature
name: HDD2
icon: mdi:blank
height: 27px
color: orange
min: 1
max: 60
target: 50
positions:
name: inside
indicator: 'off'
card_mod:
style: |
ha-card {
margin-top: -33px;
margin-left: -13px;
margin-right: -7px;
box-shadow: none;
font-size: 14px;
}
ha-icon {
--mdc-icon-size: 40px;
background: url("/local/images/wd red pro3.png");
background-size: 100% 100%;
margin-top: -10px;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
bar-card-name {
margin: 5px;
}
- type: custom:mod-card
style:
.: |
ha-card {
margin: -5px 10px 0px 10px;
}
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: button.diskstation_reboot
color_type: icon
aspect_ratio: 4.55/1
show_entity_picture: true
entity_picture: /local/images/nas ds214+3.png
name: DS214+<br/>Reboot
color: rgb(68, 115, 158)
layout: icon_name
size: 55%
styles:
card:
- padding: 0.2em
- margin: '-10px 0'
- '--mdc-ripple-color': rgb(68, 115, 158)
- '--mdc-ripple-press-opacity': 0.5
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 1px rgba(0,0,0,1.0) outset
- border-radius: 25px
icon:
- opacity: 1
name:
- font-size: 0.85em
- white-space: normal
state:
- font-size: 0.75em
- white-space: normal
label:
- font-size: 0.65em
- white-space: normal
hold_action:
action: more-info
- type: custom:button-card
entity: switch.ds214
color_type: icon
aspect_ratio: 4.55/1
show_entity_picture: true
show_state: true
entity_picture: /local/images/nas ds214+3.png
name: DS214+ On/Off
color: rgb(68, 115, 158)
layout: icon_name_state2nd
size: 55%
state:
- value: 'on'
styles:
state:
- color: green
- value: 'off'
styles:
state:
- color: '#E30022'
styles:
card:
- padding: 0.2em
- margin: '-10px 0'
- '--mdc-ripple-color': rgb(68, 115, 158)
- '--mdc-ripple-press-opacity': 0.5
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 1px rgba(0,0,0,1.0) outset
- border-radius: 25px
icon:
- opacity: 1
name:
- font-size: 0.85em
- white-space: normal
state:
- font-weight: bold
- font-size: 0.85em
- white-space: normal
label:
- font-size: 0.65em
- white-space: normal
hold_action:
action: more-info
- type: horizontal-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.diskstation_download_throughput
name: Download
icon: fas:download
decimal: 0
height: 27px
direction: right
positions:
icon: inside
name: inside
minmax: 'off'
indicator: 'off'
color: green
entity_row: true
card_mod:
style: |
ha-card {
font-size: 14px;
margin: -14px -8px 0px -5px;
--mdc-icon-size: 20px;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
- type: custom:bar-card
entities:
- entity: sensor.diskstation_upload_throughput
direction: right
name: Upload
icon: fas:upload
decimal: 0
height: 27px
color: rgb(250, 0, 1)
entity_row: true
positions:
icon: inside
indicator: 'off'
name: inside
minmax: 'off'
card_mod:
style: |
ha-card {
font-size: 14px;
margin: -14px -3px 0px -11px;
--mdc-icon-size: 20px;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
- type: custom:mod-card
card_mod:
style: |
ha-card {
margin-top: -20px;
background: none;
}
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.ups_status
name: Green cell<br/>600VA
aspect_ratio: 1.8/1
layout: icon_name_state2nd
show_icon: true
show_name: true
show_label: true
show_entity_picture: true
entity_picture: /local/images/Onduleur.png
styles:
icon:
- width: 95%
name:
- font-size: 15px
- margin-left: '-30px'
custom_fields:
statut:
- top: 60%
- left: 38%
- position: absolute
- font-size: 13.5px
input:
- top: 80%
- left: 38%
- position: absolute
- font-size: 13.5px
custom_fields:
statut: |
[[[
if (states['sensor.ups_status'].state == "Online") return `<ha-icon icon='mdi:information-outline' style='width: 20px; height: 20px; color: rgb(68, 115, 158);'></ha-icon>
<span>Statut: <span style='color: green;'>${states['sensor.ups_status'].state}</span></span>`; else return `<ha-icon icon='mdi:information-outline' style='width: 20px; height: 20px; color: rgb(68, 115, 158);'></ha-icon> <span>Statut: <span style='color: red;'>${states['sensor.ups_status'].state}</span></span>`
]]]
input: |
[[[
if (states['sensor.ups_status_data'].state == "OL") return `<ha-icon icon='mdi:information-outline' style='width: 20px; height: 20px; color: rgb(68, 115, 158);'></ha-icon>
<span>Statut data: <span style='color: green;'>${states['sensor.ups_status_data'].state}</span></span>`; else return `<ha-icon icon='mdi:information-outline' style='width: 20px; height: 20px; color: rgb(68, 115, 158);'></ha-icon> <span>Statut data: <span style='color: red;'>${states['sensor.ups_status_data'].state}</span></span>`
]]]
hold_action:
action: more-info
entity: sensor.ups_status_data
- type: vertical-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.ups_input_voltage
name: Input
icon: mdi:sine-wave
height: 17px
color: rgb(68, 115, 158)
min: 1
max: 250
target: 240
positions:
icon: inside
indicator: 'off'
card_mod:
style: |
ha-card {
margin-top: 1px;
margin-left: -11px;
margin-right: -4px;
box-shadow: none;
background: none;
}
ha-icon {
--mdc-icon-size: 18px;
color: white;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
bar-card-name {
margin: -5px;
}
- type: custom:bar-card
entities:
- entity: sensor.ups_output_voltage
name: Output
icon: mdi:sine-wave
height: 17px
color: green
min: 1
max: 250
target: 240
positions:
icon: inside
indicator: 'off'
card_mod:
style: |
ha-card {
margin-top: -23px;
margin-left: -11px;
margin-right: -4px;
box-shadow: none;
background: none;
}
ha-icon {
--mdc-icon-size: 18px;
color: white;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
bar-card-name {
margin: -5px;
}
- type: custom:bar-card
entities:
- entity: sensor.ups_load
name: Load
height: 17px
color: orange
min: 1
max: 100
target: 90
positions:
icon: inside
indicator: 'off'
card_mod:
style: |
ha-card {
margin-top: -23px;
margin-left: -11px;
margin-right: -4px;
box-shadow: none;
background: none;
}
ha-icon {
--mdc-icon-size: 18px;
color: white;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
bar-card-name {
margin: -5px;
}
- type: custom:bar-card
entities:
- entity: sensor.ups_battery_charge
name: Charging
icon: mdi:battery-high
height: 17px
color: red
min: 1
max: 100
target: 10
positions:
icon: inside
indicator: 'off'
card_mod:
style: |
ha-card {
margin-top: -23px;
margin-left: -11px;
margin-right: -4px;
height: 45px;
background: none;
}
ha-icon {
--mdc-icon-size: 18px;
color: white;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
bar-card-name {
margin: -5px;
}
- type: custom:vertical-stack-in-card
horizontal: true
card_mod:
style: |
ha-card {
margin-top: -22px;
margin-bottom: -2px;
background-color: none;
}
cards:
- type: custom:mushroom-template-card
primary: MiNi PC N95
secondary: ' '
icon: phu:intel-nuc
icon_color: '#44739E'
fill_container: false
layout: horizontal
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset;
--shape-color: rgba(32,32,32,0.2) !important;
}
.: |
ha-card {
background: none;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: switch.minipc
icon: phu:intel-nuc
content: |
{% if is_state('switch.minipc','on') %}
Allumé
{% else %}
Éteint
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 24px;
--chip-font-size: 14px;
{% if is_state('switch.minipc','on') %}
--color: green;
{% else %}
--color: red;
{% endif %}
}
alignment: end
card_mod:
style: |
ha-card {top:60%;right:5%}
card_mod:
style: |
ha-card {
box-shadow: 0 0 0 1px gray;
}
- type: custom:stack-in-card
mode: vertical
keep:
box_shadow: true
margin: false
border_radius: false
background: true
outer_padding: false
cards:
- type: picture
image: /local/images/esphome banniere.png
card_mod:
style: |
ha-card {
border-radius: 0px;
}
- type: custom:button-card
aspect_ratio: 9/1.6
card_mod:
style: |
ha-card {
margin-top: -13px;
background: none
}
custom_fields:
fond:
card:
type: custom:button-card
aspect_ratio: 9/0.7
styles:
card:
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 1px rgba(0,0,0,1.0) outset
tap_action:
action: none
hold_action:
action: none
bouton_1:
card:
type: custom:button-card
name: Atom Lite C
size: 85%
styles:
icon:
- color: rgb(68, 115, 158)
card:
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 1px rgba(0,0,0,1.0) outset
- border-radius: 5px
- width: 96px
- height: 32px
- background: |
[[[
if (states['input_select.selection_esp'].state == 'Atom Lite Chambre')
return 'var(--secondary-background-color)'; else return "none";
]]]
name:
- font-size: 13px
tap_action:
action: call-service
service: input_select.select_option
data:
option: Atom Lite Chambre
target:
entity_id: input_select.selection_esp
hold_action:
action: none
bouton_2:
card:
type: custom:button-card
size: 85%
name: Atom Lite S
styles:
icon:
- color: rgb(68, 115, 158)
card:
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 1px rgba(0,0,0,1.0) outset
- border-radius: 5px
- width: 96px
- height: 32px
- background: |
[[[
if (states['input_select.selection_esp'].state == 'Atom Lite Salle de bain')
return 'var(--secondary-background-color)'; else return "none";
]]]
name:
- font-size: 13px
tap_action:
action: call-service
service: input_select.select_option
data:
option: Atom Lite Salle de bain
target:
entity_id: input_select.selection_esp
hold_action:
action: none
bouton_3:
card:
type: custom:button-card
size: 85%
name: Atom Echo
styles:
icon:
- color: rgb(68, 115, 158)
card:
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 1px rgba(0,0,0,1.0) outset
- border-radius: 5px
- width: 96px
- height: 32px
- background: |
[[[
if (states['input_select.selection_esp'].state == 'Atom Echo')
return 'var(--secondary-background-color)'; else return "none";
]]]
name:
- font-size: 13px
tap_action:
action: call-service
service: input_select.select_option
data:
option: Atom Echo
target:
entity_id: input_select.selection_esp
hold_action:
action: none
bouton_4:
card:
type: custom:button-card
size: 85%
name: M5StickC P2
styles:
icon:
- color: rgb(68, 115, 158)
card:
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 1px rgba(0,0,0,1.0) outset
- border-radius: 5px
- width: 96px
- height: 32px
- background: |
[[[
if (states['input_select.selection_esp'].state == 'M5StickC Plus2')
return 'var(--secondary-background-color)'; else return "none";
]]]
name:
- font-size: 13px
tap_action:
action: call-service
service: input_select.select_option
data:
option: M5StickC Plus2
target:
entity_id: input_select.selection_esp
hold_action:
action: none
bouton_5:
card:
type: custom:button-card
size: 85%
name: T-Display-S3
styles:
icon:
- color: rgb(68, 115, 158)
card:
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 1px rgba(0,0,0,1.0) outset
- border-radius: 5px
- width: 96px
- height: 32px
- background: |
[[[
if (states['input_select.selection_esp'].state == 'Lilygo T-Display-S3')
return 'var(--secondary-background-color)'; else return "none";
]]]
name:
- font-size: 13px
tap_action:
action: call-service
service: input_select.select_option
data:
option: Lilygo T-Display-S3
target:
entity_id: input_select.selection_esp
hold_action:
action: none
styles:
custom_fields:
fond:
- position: absolute
- left: 2%
- top: 10%
- width: 96%
- height: 54px
bouton_1:
- position: absolute
- left: 3%
- top: 15%
bouton_2:
- position: absolute
- left: 22%
- top: 15%
bouton_3:
- position: absolute
- left: 40.9%
- top: 15%
bouton_4:
- position: absolute
- left: 59.8%
- top: 15%
bouton_5:
- position: absolute
- left: 78.8%
- top: 15%
- type: vertical-stack
cards:
- type: conditional
conditions:
- condition: state
entity: input_select.selection_esp
state: Atom Lite Chambre
card:
type: custom:mod-card
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
margin-top: -62px;
margin-bottom: -2px;
}
card:
type: custom:layout-card
layout_type: vertical
cards:
- type: custom:decluttering-card
template: esphome_esp
variables:
- entity_ip: device_tracker.atom_bluetooth_proxy_ad7a6c
- entity_uptime: sensor.atom_bluetooth_proxy_ad7a6c_uptime
- image: atom-lite.jpg
- device: 31cfda5b16f30cab9bb20ddb99086e2c
- entity_update: update.bluetooth_proxy_firmware
- entity_wifi: sensor.atom_bluetooth_proxy_ad7a6c_wifi_signal
- entity_battery: none
- entity_display_battery: none
- entity_count: sensor.bluetooth_proxy_ad7a6c_statut_count
- entity_statut: binary_sensor.atom_bluetooth_proxy_ad7a6c_statut
- name: Atom Lite Chambre
- entity_led: light.atom_bluetooth_proxy_ad7a6c_led
- colors: blue
- entity_screen: none
- entity_display_screen: none
- entity_restart: switch.atom_bluetooth_proxy_ad7a6c_restart
- type: conditional
conditions:
- condition: state
entity: input_select.selection_esp
state: Atom Lite Salle de bain
card:
type: custom:mod-card
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
margin-top: -62px;
margin-bottom: -2px;
}
card:
type: custom:layout-card
layout_type: vertical
cards:
- type: custom:decluttering-card
template: esphome_esp
variables:
- entity_ip: device_tracker.atom_bluetooth_proxy
- entity_uptime: sensor.atom_bluetooth_proxy_854638_uptime
- image: atom-lite.jpg
- device: 8de1e14906fa023e716f82948517a195
- entity_update: update.bluetooth_proxy_854638_firmware
- entity_wifi: sensor.atom_bluetooth_proxy_854638_wifi_signal
- entity_battery: none
- entity_display_battery: none
- entity_count: sensor.bluetooth_proxy_854638_statut_count
- entity_statut: binary_sensor.atom_bluetooth_proxy_854638_statut
- name: Atom Lite Salle de bain
- entity_led: light.atom_bluetooth_proxy_854638_led
- colors: blue
- entity_screen: none
- entity_display_screen: none
- entity_restart: switch.atom_bluetooth_proxy_854638_restart
- type: conditional
conditions:
- condition: state
entity: input_select.selection_esp
state: Atom Echo
card:
type: custom:mod-card
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
margin-top: -62px;
margin-bottom: -2px;
}
card:
type: custom:layout-card
layout_type: vertical
cards:
- type: custom:decluttering-card
template: esphome_esp
variables:
- entity_ip: device_tracker.m5stack_atom_echo_0f7bf8
- entity_uptime: sensor.m5stack_atom_echo_0f7bf8_uptime
- image: atom-echo.jpg
- device: ecea4d21582f2549f1389914f55fb8c4
- entity_update: update.m5stack_atom_echo_0f7bf8_firmware
- entity_wifi: sensor.m5stack_atom_echo_0f7bf8_wifi_signal
- entity_battery: none
- entity_display_battery: none
- entity_count: sensor.bluetooth_proxy_854638_statut_count
- entity_statut: binary_sensor.m5stack_atom_echo_0f7bf8_statut
- name: Atom Echo Voice
- entity_led: switch.m5stack_atom_echo_0f7bf8_use_listen_light
- colors: white
- entity_screen: none
- entity_display_screen: none
- entity_restart: switch.m5stack_atom_echo_0f7bf8_restart
- type: conditional
conditions:
- condition: state
entity: input_select.selection_esp
state: M5StickC Plus2
card:
type: custom:mod-card
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
margin-top: -62px;
margin-bottom: -2px;
}
card:
type: custom:layout-card
layout_type: vertical
cards:
- type: custom:decluttering-card
template: esphome_esp
variables:
- entity_ip: device_tracker.m5stickc_plus2
- entity_uptime: sensor.m5stickc_plus2_uptime
- image: m5stickc-plus2.jpg
- device: 062187be8891c453e43fef0e5c499eff
- entity_update: update.m5stickc_plus2_firmware
- entity_wifi: sensor.m5stickc_plus2_wifi_signal
- entity_battery: sensor.m5stick_plus2_battery_pourcent
- entity_display_battery: flex
- entity_count: sensor.s3_display_statut_count
- entity_statut: binary_sensor.m5stickc_plus2_statut
- name: M5StickC Plus2
- entity_led: light.m5stickc_plus2_led
- colors: red
- entity_screen: light.m5stickc_plus2_backlight
- entity_display_screen: flex
- entity_restart: switch.m5stickc_plus2_restart
- type: conditional
conditions:
- condition: state
entity: input_select.selection_esp
state: Lilygo T-Display-S3
card:
type: custom:mod-card
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
margin-top: -62px;
margin-bottom: -2px;
}
card:
type: custom:layout-card
layout_type: vertical
cards:
- type: custom:decluttering-card
template: esphome_esp
variables:
- entity_ip: device_tracker.s3_display_s3_display
- entity_uptime: sensor.s3_display_uptime
- image: t-display-s3.png
- device: 4d792bdfca09ecf021f40c495bc51d07
- entity_update: update.esp32_s3_t_display_firmware
- entity_wifi: sensor.s3_display_wifi_signal
- entity_battery: sensor.m5stick_plus2_battery_pourcent
- entity_display_battery: none
- entity_count: sensor.s3_display_statut_count
- entity_statut: binary_sensor.s3_display_statut
- name: Lilygo T-Display-S3
- entity_led: switch.s3_display_engineering_mode
- colors: blue
- entity_screen: light.s3_display_backlight
- entity_display_screen: flex
- entity_restart: switch.s3_display_restart
- type: custom:flex-table-card
clickable: true
entities:
include:
- >-
sensor.temperature_humidity_sensor_exterieur_av_signal_strength
- sensor.lywsd03mmc_c948_signal_strength
- sensor.temperature_humidity_sensor_sejour_signal_strength
- sensor.lywsd03mmc_cc28_signal_strength
- sensor.lywsd03mmc_0dcd_signal_strength
- sensor.lywsd03mmc_0fec_signal_strength
- sensor.lywsd03mmc_2a3a_signal_strength
- sensor.lywsd03mmc_e5f5_signal_strength
- sensor.lywsd03mmc_0d20_signal_strength
- sensor.lywsd03mmc_0945_signal_strength
- sensor.atc_67c6_signal_strength
- sensor.atc_20a2_signal_strength
sort_by: state-
columns:
- data: friendly_name
name: ' Thermomètre Bluetooth'
icon: phu:xiaomi-logo
modify: x.replace(/Signal Strength/,"")
align: left
- data: state
name: Signal dB
icon: mdi:bluetooth
align: center
css:
tbody td: 'border-radius: 25px !important'
tbody tr:nth-child(1): 'color: green'
tbody tr:nth-child(12): 'color: red'
tbody tr: 'background-color: #222 !important'
thead th:nth-child(1): >-
color: rgba(128,128,128,1); border: 1px rgba(0,0,0,1.0) outset;
border-radius: 25px; box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
!important; text-align: left !important;
thead th:nth-child(2): >-
color: rgba(128,128,128,1); border: 1px rgba(0,0,0,1.0) outset;
border-radius: 25px; box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
!important;
card_mod:
style: |
:host {
--card-mod-icon-color: #44739e;
font-size: 14px;
}
ha-card {
margin: -24px -5px -1px -5px;
background: transparent;
}
card_mod:
style: |
ha-card {
box-shadow: 0 0 0 1px gray;
}
decluttering_templates pour les ESP:
decluttering_templates:
esphome_esp:
card:
type: custom:button-card
aspect_ratio: 2.3/1
custom_fields:
fond:
card:
type: custom:button-card
styles:
card:
- background-color: rgba(255,255,255,0.0)
- border: none
tap_action:
action: none
hold_action:
action: none
adr_ip:
card:
type: custom:button-card
entity: '[[entity_ip]]'
show_name: false
show_icon: false
show_state: true
state_display: |
[[[ return states['[[entity_ip]]'].attributes.ip; ]]]
styles:
card:
- border-radius: 50px
- width: auto
- height: 25px
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 1px rgba(0,0,0,1.0) outset
- background-color: rgba(255,255,255,0.1)
state:
- font-size: 14px
- color: white
- margin-left: 17px
- margin-right: 5px
tap_action:
action: more-info
name_adresse:
card:
type: custom:button-card
icon: mdi:ip-network
size: 60%
color: rgb(68, 115, 158)
show_state: false
styles:
card:
- border-radius: 50%
- width: 44px
- height: 44px
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 1px rgba(0,0,0,1.0) outset
uptime:
card:
type: custom:button-card
entity: '[[entity_uptime]]'
show_icon: false
show_name: false
show_state: true
styles:
card:
- border-radius: 50px
- width: auto
- height: 25px
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 1px rgba(0,0,0,1.0) outset
- background-color: rgba(255,255,255,0.1)
state:
- font-size: 14px
- color: white
- margin-left: 17px
- margin-right: 5px
label:
- position: absolute
- left: 8.5%
- top: 1%
tap_action:
action: more-info
image:
card:
type: custom:button-card
entity_picture: /local/images/[[image]]
show_entity_picture: true
size: 100%
show_name: false
styles:
card:
- border-radius: 50%
- background-color: rgba(255,255,255,1.0)
- width: 135px
- height: 135px
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 2.5px rgba(0,0,0,1.0) outset
tap_action:
action: navigate
navigation_path: /config/devices/device/[[device]]
name_uptime:
card:
type: custom:button-card
icon: mdi:clock-start
size: 60%
color: rgb(68, 115, 158)
show_state: false
styles:
card:
- border-radius: 50%
- width: 44px
- height: 44px
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 1px rgba(0,0,0,1.0) outset
update:
card:
type: custom:button-card
entity: '[[entity_update]]'
show_icon: false
show_name: false
show_state: true
color: rgb(68, 115, 158)
state_display: >
[[[ return
states['[[entity_update]]'].attributes.installed_version;
]]]
styles:
card:
- border-radius: 50px
- width: auto
- height: 25px
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 1px rgba(0,0,0,1.0) outset
- background-color: rgba(255,255,255,0.1)
state:
- font-size: 14px
- color: >
[[[
var a =
states['[[entity_update]]'].attributes.installed_version ;
var b =
states['[[entity_update]]'].attributes.latest_version;
if (a == b) return 'green';
return 'orangered';
]]]
- margin-left: 17px
- margin-right: 5px
tap_action:
action: more-info
name_update:
card:
type: custom:button-card
icon: mdi:update
size: 60%
color: rgb(68, 115, 158)
show_state: false
styles:
card:
- border-radius: 50%
- width: 44px
- height: 44px
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 1px rgba(0,0,0,1.0) outset
wifi:
card:
type: custom:button-card
entity: '[[entity_wifi]]'
icon: mdi:wifi
show_icon: false
show_name: false
show_state: true
color: rgb(68, 115, 158)
styles:
card:
- border-radius: 50px
- width: auto
- height: 25px
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 1px rgba(0,0,0,1.0) outset
- background-color: rgba(255,255,255,0.1)
state:
- font-size: 14px
- color: white
- margin-left: 17px
- margin-right: 5px
tap_action:
action: more-info
name_wifi:
card:
type: custom:button-card
icon: mdi:wifi
size: 55%
color: rgb(68, 115, 158)
show_state: false
styles:
card:
- border-radius: 50%
- width: 44px
- height: 44px
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 1px rgba(0,0,0,1.0) outset
battery:
card:
type: custom:button-card
entity: '[[entity_battery]]'
size: 100%
icon: mdi:battery-high
show_name: false
show_state: true
color: rgb(68, 115, 158)
styles:
card:
- border-radius: 50px
- width: 46px
- height: 46px
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 1px rgba(0,0,0,1.0) outset
state:
- font-size: 10px
- margin-bottom: 4px
card_mod:
style: |
ha-card {
display: [[entity_display_battery]] !important;
}
count:
card:
type: custom:button-card
entity: '[[entity_count]]'
icon: mdi:lan-disconnect
show_icon: false
show_name: false
show_state: true
color: rgb(68, 115, 158)
styles:
card:
- border-radius: 50px
- width: auto
- height: 25px
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 1px rgba(0,0,0,1.0) outset
- background-color: rgba(255,255,255,0.1)
state:
- font-size: 14px
- color: white
- margin-left: 17px
- margin-right: 5px
tap_action:
action: more-info
name_count:
card:
type: custom:button-card
icon: mdi:lan-disconnect
size: 55%
color: rgb(68, 115, 158)
show_state: false
styles:
card:
- border-radius: 50%
- width: 44px
- height: 44px
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 1px rgba(0,0,0,1.0) outset
tracker:
card:
type: custom:button-card
entity: '[[entity_statut]]'
icon: mdi:home
show_icon: false
show_name: false
show_state: true
color: rgb(68, 115, 158)
state_display: |
[[[
if (states['[[entity_statut]]'].state == 'on')
return '<font color= "green">Online</font>'; return '<font color= "red">offline</font>';
]]]
styles:
card:
- border-radius: 50px
- width: auto
- height: 25px
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 1px rgba(0,0,0,1.0) outset
- background-color: rgba(255,255,255,0.1)
state:
- font-size: 14px
- color: white
- margin-left: 17px
- margin-right: 5px
tap_action:
action: more-info
name_tracker:
card:
type: custom:button-card
icon: mdi:home
size: 55%
color: rgb(68, 115, 158)
show_state: false
styles:
card:
- border-radius: 50%
- width: 44px
- height: 44px
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 1px rgba(0,0,0,1.0) outset
esp:
card:
type: custom:button-card
name: '[[name]]'
styles:
card:
- border-radius: 50px
- width: auto
- height: 35px
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 1px rgba(0,0,0,1.0) outset
- background-color: rgba(255,255,255,0.1)
name:
- font-size: 19px
- color: white
- margin-left: 28px
- margin-right: 5px
name_esp:
card:
type: custom:button-card
icon: phu:esphome
size: 62%
color: rgb(68, 115, 158)
show_state: false
styles:
card:
- border-radius: 50%
- width: 46px
- height: 46px
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 1px rgba(0,0,0,1.0) outset
led:
card:
type: custom:button-card
entity: '[[entity_led]]'
size: 100%
icon: mdi:led-variant-on
name: led
show_name: true
state:
- value: 'on'
styles:
card:
- background-color: rgba(0,255,0,0.2)
icon:
- color: '[[colors]]'
- value: 'off'
styles:
card:
- background-color: rgba(255,0,0,0.4)
styles:
icon:
- color: rgb(68, 115, 158)
card:
- border-radius: 50px
- width: 46px
- height: 46px
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 1px rgba(0,0,0,1.0) outset
name:
- font-size: 10px
- margin-bottom: 4px
hold_action:
action: more-info
ecran:
card:
type: custom:button-card
entity: '[[entity_screen]]'
size: 50%
icon: mdi:monitor
name: écran
show_name: true
state:
- value: 'on'
styles:
card:
- background-color: rgba(0,255,0,0.2)
- value: 'off'
styles:
card:
- background-color: rgba(255,0,0,0.4)
styles:
icon:
- color: rgb(68, 115, 158)
card:
- border-radius: 50px
- width: 46px
- height: 46px
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 1px rgba(0,0,0,1.0) outset
name:
- font-size: 10px
- margin-bottom: 4px
hold_action:
action: more-info
card_mod:
style: |
ha-card {
display: [[entity_display_screen]] !important;
}
restart:
card:
type: custom:button-card
entity: '[[entity_restart]]'
size: 100%
icon: mdi:restart
name: restart
show_name: true
styles:
icon:
- color: rgb(68, 115, 158)
card:
- border-radius: 50px
- width: 46px
- height: 46px
- box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
- border: 1px rgba(0,0,0,1.0) outset
name:
- font-size: 10px
- margin-bottom: 4px
hold_action:
action: more-info
styles:
custom_fields:
fond:
- position: absolute
- left: 0
- top: 0
- width: 100%
- height: 100%
- background-size: cover
- background-position: center
- opacity: 0.5
name_adresse:
- position: absolute
- left: 1.8%
- top: 1.5%
adr_ip:
- position: absolute
- left: 8.5%
- top: 6.5%
name_uptime:
- position: absolute
- left: 1.8%
- top: 26%
uptime:
- position: absolute
- left: 8.5%
- top: 31%
name_wifi:
- position: absolute
- left: 43.8%
- top: 1.8%
wifi:
- position: absolute
- left: 50.5%
- top: 6.5%
image:
- position: absolute
- left: 71%
- top: 3%
name_update:
- position: absolute
- left: 1.8%
- top: 50%
update:
- position: absolute
- left: 8.5%
- top: 55%
battery:
- position: absolute
- left: 51.7%
- top: 75%
count:
- position: absolute
- left: 50.5%
- top: 55%
name_count:
- position: absolute
- left: 43.8%
- top: 50%
tracker:
- position: absolute
- left: 50.5%
- top: 31%
name_tracker:
- position: absolute
- left: 43.8%
- top: 26%
esp:
- position: absolute
- left: 6.5%
- top: 78%
name_esp:
- position: absolute
- left: 1.8%
- top: 74%
led:
- position: absolute
- left: 75.7%
- top: 75%
ecran:
- position: absolute
- left: 63.7%
- top: 75%
restart:
- position: absolute
- left: 87.7%
- top: 75%
1 « J'aime »
Tu mes toujours la barre très haute tout comme @herveaurel
J’ai modifier les icones des bar-card pour que ça soit plus homogène 
le code est a jour sur mon message précédent.
2 « J'aime »
Tien tu a un mini pc, tu lui a pas fait de page?
Dès que j’aurai un moment je remplacerai tout ce qui est sous browser_mod-popup car ça fonctionne très rarement et en plus ça remplit de sensors non utilisés
Phil
J’en ai 2 pages !
Non pas fais de carte spécial pour le mini pc.
Faut une formation pilote la !!!
1 « J'aime »
Ouai, mais je suis pilote 
Ah voilà !
Bien joué en tout cas 
1 « J'aime »
Ouch, ça pique
Si toutes tes cartes sont comme ça, c’est pas une tablette qu’il te faut pour afficher ton dashboard mais une TV de 85 pouces au minimum 
Salut,
Ca avance, je finalise le tout et test quelques jours. Je mettrais a jour le sujet avec le code.
Formation pilote obligatoire !
2 « J'aime »
Pilotage automatique !
Tu n’as pas mis la carte du Speedtest ?
