Hi I managed to create a custom button card and a popup card button from Xiaomi
function:
- real temperature display from button sensor
- real humidity display from button sensor
- time and date (sensor.time-date)
- weather (sensor openweather map - custom sensor icon)
- click
Two background image:
Add font lcd style:
- download font “digital-display-tfb”
- convert font to *.woff2
- create fonts.css
@font-face {
font-family: "digital_display_tfb";
src: url("/local/font/digital_display_tfb.woff2") format("woff2");
}
- Create loadfont.js original this post
function loadcss() {
let css = 'http://hassio.local:8123/local/fonts.css'
let link = document.createElement('link');
let head = document.getElementsByTagName('head')[0];
let tmp;
link.rel = 'stylesheet';
link.type = 'text/css';
tmp = link.cloneNode(true);
tmp.href = css;
head.appendChild(tmp);
console.info('%c Font Style sheet loaded', 'color: white; background: #000; font-weight: 700;');
}
loadcss();
- add to resource module
Add sensor in configuration.yaml:
sensor:
- platform: template
sensors:
#xiaomi fix temperature
xiaomi_mesh_wall_switch_temperature:
friendly_name: "Mesh Switch Temperature"
unit_of_measurement: '°C'
value_template: "{{ ( states('sensor.28d12723ac10_temperature')|float )|round(2) }}"
#xiaomi samostatne teplota
xiaomi_mesh_first_of_temp:
value_template: '{{states ("sensor.28d12723ac10_temperature") [0]}}'
xiaomi_mesh_types_of_temp:
value_template: '{{states ("sensor.28d12723ac10_temperature") [1]}}'
xiaomi_mesh_third_of_temp:
value_template: '{{states ("sensor.28d12723ac10_temperature") [2]}}'
xiaomi_mesh_fourth_of_temp:
value_template: '{{states ("sensor.28d12723ac10_temperature") [3]}}'
#xiaomi samostatne vlhkosť
xiaomi_mesh_first_of_humidity:
value_template: '{{states ("sensor.28d12723ac10_humidity") [0]}}'
xiaomi_mesh_types_of_humidity:
value_template: '{{states ("sensor.28d12723ac10_humidity") [1]}}'
xiaomi_mesh_third_of_humidity:
value_template: '{{states ("sensor.28d12723ac10_humidity") [2]}}'
xiaomi_mesh_fourth_of_humidity:
value_template: '{{states ("sensor.28d12723ac10_humidity") [3]}}'
# Čas custom format
time_formatted:
friendly_name: "test_cas"
value_template: "{{ as_timestamp(states('sensor.date_time_iso')) | timestamp_custom('%m/%d %H:%M') }}"
icon_template: mdi:calendar-clock
# počasie v ikonach
weather_just_icon:
friendly_name: "Real Weather Icon"
icon_template: >-
{% if is_state("sensor.openweathermap_weather_code","200") %} mdi:weather-lightning-rainy
{% elif is_state("sensor.openweathermap_weather_code","201") %} mdi:weather-lightning-rainy
{% elif is_state("sensor.openweathermap_weather_code","202") %} mdi:weather-lightning-rainy
{% elif is_state("sensor.openweathermap_weather_code","210") %} mdi:weather-lightning-rainy
{% elif is_state("sensor.openweathermap_weather_code","211") %} mdi:weather-lightning-rainy
{% elif is_state("sensor.openweathermap_weather_code","212") %} mdi:weather-lightning-rainy
{% elif is_state("sensor.openweathermap_weather_code","221") %} mdi:weather-lightning-rainy
{% elif is_state("sensor.openweathermap_weather_code","230") %} mdi:weather-lightning-rainy
{% elif is_state("sensor.openweathermap_weather_code","231") %} mdi:weather-lightning-rainy
{% elif is_state("sensor.openweathermap_weather_code","232") %} mdi:weather-lightning-rainy
{% elif is_state("sensor.openweathermap_weather_code","300") %} mdi:weather-pouring
{% elif is_state("sensor.openweathermap_weather_code","301") %} mdi:weather-pouring
{% elif is_state("sensor.openweathermap_weather_code","302") %} mdi:weather-pouring
{% elif is_state("sensor.openweathermap_weather_code","310") %} mdi:weather-pouring
{% elif is_state("sensor.openweathermap_weather_code","311") %} mdi:weather-pouring
{% elif is_state("sensor.openweathermap_weather_code","312") %} mdi:weather-pouring
{% elif is_state("sensor.openweathermap_weather_code","313") %} mdi:weather-pouring
{% elif is_state("sensor.openweathermap_weather_code","314") %} mdi:weather-pouring
{% elif is_state("sensor.openweathermap_weather_code","321") %} mdi:weather-pouring
{% elif is_state("sensor.openweathermap_weather_code","500") %} mdi:weather-rainy
{% elif is_state("sensor.openweathermap_weather_code","501") %} mdi:weather-rainy
{% elif is_state("sensor.openweathermap_weather_code","502") %} mdi:weather-rainy
{% elif is_state("sensor.openweathermap_weather_code","503") %} mdi:weather-rainy
{% elif is_state("sensor.openweathermap_weather_code","504") %} mdi:weather-rainy
{% elif is_state("sensor.openweathermap_weather_code","511") %} mdi:weather-snowy-rainy
{% elif is_state("sensor.openweathermap_weather_code","520") %} mdi:weather-pouring
{% elif is_state("sensor.openweathermap_weather_code","521") %} mdi:weather-pouring
{% elif is_state("sensor.openweathermap_weather_code","522") %} mdi:weather-pouring
{% elif is_state("sensor.openweathermap_weather_code","531") %} mdi:weather-pouring
{% elif is_state("sensor.openweathermap_weather_code","600") %} mdi:weather-snowy
{% elif is_state("sensor.openweathermap_weather_code","601") %} mdi:weather-snowy
{% elif is_state("sensor.openweathermap_weather_code","602") %} mdi:weather-snowy
{% elif is_state("sensor.openweathermap_weather_code","611") %} mdi:weather-snowy
{% elif is_state("sensor.openweathermap_weather_code","612") %} mdi:weather-snowy
{% elif is_state("sensor.openweathermap_weather_code","613") %} mdi:weather-snowy
{% elif is_state("sensor.openweathermap_weather_code","615") %} mdi:weather-snowy
{% elif is_state("sensor.openweathermap_weather_code","616") %} mdi:weather-snowy
{% elif is_state("sensor.openweathermap_weather_code","620") %} mdi:weather-snowy
{% elif is_state("sensor.openweathermap_weather_code","621") %} mdi:weather-snowy
{% elif is_state("sensor.openweathermap_weather_code","622") %} mdi:weather-snowy
{% elif is_state("sensor.openweathermap_weather_code","701") %} mdi:weather-fog
{% elif is_state("sensor.openweathermap_weather_code","711") %} mdi:weather-fog
{% elif is_state("sensor.openweathermap_weather_code","721") %} mdi:weather-fog
{% elif is_state("sensor.openweathermap_weather_code","731") %} mdi:weather-fog
{% elif is_state("sensor.openweathermap_weather_code","741") %} mdi:weather-fog
{% elif is_state("sensor.openweathermap_weather_code","751") %} mdi:weather-fog
{% elif is_state("sensor.openweathermap_weather_code","761") %} mdi:weather-fog
{% elif is_state("sensor.openweathermap_weather_code","762") %} mdi:weather-fog
{% elif is_state("sensor.openweathermap_weather_code","771") %} mdi:weather-fog
{% elif is_state("sensor.openweathermap_weather_code","781") %} mdi:weather-hurricane
{% elif is_state("sensor.openweathermap_weather_code","800") %} mdi:weather-sunny
{% elif is_state("sensor.openweathermap_weather_code","801") %} mdi:weather-partly-cloudy
{% elif is_state("sensor.openweathermap_weather_code","802") %} mdi:weather-partly-cloudy
{% elif is_state("sensor.openweathermap_weather_code","803") %} mdi:weather-cloudy
{% elif is_state("sensor.openweathermap_weather_code","804") %} mdi:weather-cloudy
{% elif is_state("sensor.openweathermap_weather_code","900") %} mdi:weather-hurricane
{% elif is_state("sensor.openweathermap_weather_code","901") %} mdi:weather-hurricane
{% elif is_state("sensor.openweathermap_weather_code","902") %} mdi:weather-hurricane
{% elif is_state("sensor.openweathermap_weather_code","903") %} mdi:snowflake
{% elif is_state("sensor.openweathermap_weather_code","904") %} mdi:weather-sunny
{% elif is_state("sensor.openweathermap_weather_code","905") %} mdi:weather-windy
{% elif is_state("sensor.openweathermap_weather_code","906") %} mdi:weather-hail
{% elif is_state("sensor.openweathermap_weather_code","951") %} mdi:weather-sunny
{% elif is_state("sensor.openweathermap_weather_code","952") %} mdi:weather-windy
{% elif is_state("sensor.openweathermap_weather_code","953") %} mdi:weather-windy
{% elif is_state("sensor.openweathermap_weather_code","954") %} mdi:weather-windy
{% elif is_state("sensor.openweathermap_weather_code","955") %} mdi:weather-windy
{% elif is_state("sensor.openweathermap_weather_code","956") %} mdi:weather-windy
{% elif is_state("sensor.openweathermap_weather_code","957") %} mdi:weather-windy
{% elif is_state("sensor.openweathermap_weather_code","958") %} mdi:weather-windy
{% elif is_state("sensor.openweathermap_weather_code","959") %} mdi:weather-windy
{% elif is_state("sensor.openweathermap_weather_code","960") %} mdi:weather-lightning
{% elif is_state("sensor.openweathermap_weather_code","961") %} mdi:weather-lightning
{% elif is_state("sensor.openweathermap_weather_code","962") %} mdi:weather-hurricane
{% endif %}
# entity_id: sensor.dark_sky_icon
value_template: >-
{% if is_state("sensor.openweathermap_weather_code","200") %} weather-lightning-rainy
{% elif is_state("sensor.openweathermap_weather_code","201") %} weather-lightning-rainy
{% elif is_state("sensor.openweathermap_weather_code","202") %} weather-lightning-rainy
{% elif is_state("sensor.openweathermap_weather_code","210") %} weather-lightning-rainy
{% elif is_state("sensor.openweathermap_weather_code","211") %} weather-lightning-rainy
{% elif is_state("sensor.openweathermap_weather_code","212") %} weather-lightning-rainy
{% elif is_state("sensor.openweathermap_weather_code","221") %} weather-lightning-rainy
{% elif is_state("sensor.openweathermap_weather_code","230") %} weather-lightning-rainy
{% elif is_state("sensor.openweathermap_weather_code","231") %} weather-lightning-rainy
{% elif is_state("sensor.openweathermap_weather_code","232") %} weather-lightning-rainy
{% elif is_state("sensor.openweathermap_weather_code","300") %} weather-pouring
{% elif is_state("sensor.openweathermap_weather_code","301") %} weather-pouring
{% elif is_state("sensor.openweathermap_weather_code","302") %} weather-pouring
{% elif is_state("sensor.openweathermap_weather_code","310") %} weather-pouring
{% elif is_state("sensor.openweathermap_weather_code","311") %} weather-pouring
{% elif is_state("sensor.openweathermap_weather_code","312") %} weather-pouring
{% elif is_state("sensor.openweathermap_weather_code","313") %} weather-pouring
{% elif is_state("sensor.openweathermap_weather_code","314") %} weather-pouring
{% elif is_state("sensor.openweathermap_weather_code","321") %} weather-pouring
{% elif is_state("sensor.openweathermap_weather_code","500") %} weather-rainy
{% elif is_state("sensor.openweathermap_weather_code","501") %} weather-rainy
{% elif is_state("sensor.openweathermap_weather_code","502") %} weather-rainy
{% elif is_state("sensor.openweathermap_weather_code","503") %} weather-rainy
{% elif is_state("sensor.openweathermap_weather_code","504") %} weather-rainy
{% elif is_state("sensor.openweathermap_weather_code","511") %} weather-snowy-rainy
{% elif is_state("sensor.openweathermap_weather_code","520") %} weather-pouring
{% elif is_state("sensor.openweathermap_weather_code","521") %} weather-pouring
{% elif is_state("sensor.openweathermap_weather_code","522") %} weather-pouring
{% elif is_state("sensor.openweathermap_weather_code","531") %} weather-pouring
{% elif is_state("sensor.openweathermap_weather_code","600") %} weather-snowy
{% elif is_state("sensor.openweathermap_weather_code","601") %} weather-snowy
{% elif is_state("sensor.openweathermap_weather_code","602") %} weather-snowy
{% elif is_state("sensor.openweathermap_weather_code","611") %} weather-snowy
{% elif is_state("sensor.openweathermap_weather_code","612") %} weather-snowy
{% elif is_state("sensor.openweathermap_weather_code","613") %} weather-snowy
{% elif is_state("sensor.openweathermap_weather_code","615") %} weather-snowy
{% elif is_state("sensor.openweathermap_weather_code","616") %} weather-snowy
{% elif is_state("sensor.openweathermap_weather_code","620") %} weather-snowy
{% elif is_state("sensor.openweathermap_weather_code","621") %} weather-snowy
{% elif is_state("sensor.openweathermap_weather_code","622") %} weather-snowy
{% elif is_state("sensor.openweathermap_weather_code","701") %} weather-fog
{% elif is_state("sensor.openweathermap_weather_code","711") %} weather-fog
{% elif is_state("sensor.openweathermap_weather_code","721") %} weather-fog
{% elif is_state("sensor.openweathermap_weather_code","731") %} weather-fog
{% elif is_state("sensor.openweathermap_weather_code","741") %} weather-fog
{% elif is_state("sensor.openweathermap_weather_code","751") %} weather-fog
{% elif is_state("sensor.openweathermap_weather_code","761") %} weather-fog
{% elif is_state("sensor.openweathermap_weather_code","762") %} weather-fog
{% elif is_state("sensor.openweathermap_weather_code","771") %} weather-fog
{% elif is_state("sensor.openweathermap_weather_code","781") %} weather-hurricane
{% elif is_state("sensor.openweathermap_weather_code","800") %} weather-sunny
{% elif is_state("sensor.openweathermap_weather_code","801") %} weather-partlycloudy
{% elif is_state("sensor.openweathermap_weather_code","802") %} weather-partlycloudy
{% elif is_state("sensor.openweathermap_weather_code","803") %} weather-cloudy
{% elif is_state("sensor.openweathermap_weather_code","804") %} weather-cloudy
{% elif is_state("sensor.openweathermap_weather_code","900") %} weather-hurricane
{% elif is_state("sensor.openweathermap_weather_code","901") %} weather-hurricane
{% elif is_state("sensor.openweathermap_weather_code","902") %} weather-hurricane
{% elif is_state("sensor.openweathermap_weather_code","903") %} snowflake
{% elif is_state("sensor.openweathermap_weather_code","904") %} weather-sunny
{% elif is_state("sensor.openweathermap_weather_code","905") %} weather-windy
{% elif is_state("sensor.openweathermap_weather_code","906") %} weather-hail
{% elif is_state("sensor.openweathermap_weather_code","951") %} weather-sunny
{% elif is_state("sensor.openweathermap_weather_code","952") %} weather-windy
{% elif is_state("sensor.openweathermap_weather_code","953") %} weather-windy
{% elif is_state("sensor.openweathermap_weather_code","954") %} weather-windy
{% elif is_state("sensor.openweathermap_weather_code","955") %} weather-windy
{% elif is_state("sensor.openweathermap_weather_code","956") %} weather-windy
{% elif is_state("sensor.openweathermap_weather_code","957") %} weather-windy
{% elif is_state("sensor.openweathermap_weather_code","958") %} weather-windy
{% elif is_state("sensor.openweathermap_weather_code","959") %} weather-windy
{% elif is_state("sensor.openweathermap_weather_code","960") %} weather-lightning
{% elif is_state("sensor.openweathermap_weather_code","961") %} weather-lightning
{% elif is_state("sensor.openweathermap_weather_code","962") %} weather-hurricane
{% endif %}
Add in Lovelace raw configuration editor:
popup_cards:
switch._left_switch:
title: Wall Mesh Switch
card:
type: custom:vertical-stack-in-card
style: |
.type-custom-vertical-stack-in-card {
background: center url('/local/img/background/xiaomi_mesh_wall.jpg');
background-size: 100%;
aspect-ratio: 1/1.277;
margin: 0 auto 0 auto;
width: 81%;
}
cards:
- type: picture-elements
style: |
ha-card {
border-radius: 0px;
font-family: 'digital_display_tfb';
font-size: 9vw;
}
hui-state-label-element {
font-size: 27vw;
}
@media all and (min-width: 451px) and (min-height: 501px) {
ha-card {
border-radius: 0px;
font-family: 'digital_display_tfb';
font-size: 2.6vw;
}
hui-state-label-element {
font-size: 7vw;
}
}
panel: true
image: local/img/background/xiaomi_mesh_wall_up.jpg
elements:
- type: state-label
entity: sensor.xiaomi_mesh_first_of_temp
tap_action:
action: none
style:
top: 42%
left: 19%
color: rgb(10, 10, 10)
- type: state-label
entity: sensor.xiaomi_mesh_types_of_temp
tap_action:
action: none
style:
top: 42%
left: 32%
color: rgb(10,10,10)
- type: state-label
entity: sensor.xiaomi_mesh_third_of_temp
tap_action:
action: none
style:
top: 42.5%
left: 39%
color: rgb(10,10,10)
- type: state-label
entity: sensor.xiaomi_mesh_fourth_of_temp
tap_action:
action: none
card_mod:
style: |
div {
font-size: 13vw;
}
@media all and (min-width: 451px) and (min-height: 501px) {
div {
font-size: 3.5vw;
}
}
style:
top: 53.5%
left: 44%
color: rgb(10,10,10)
- type: custom:text-element
text: °C
style:
top: 32%
left: 44%
color: rgb(10,10,10)
- type: state-label
entity: sensor.xiaomi_mesh_first_of_humidity
tap_action:
action: none
style:
top: 42%
left: 61%
color: rgb(10, 10, 10)
- type: state-label
entity: sensor.xiaomi_mesh_types_of_humidity
tap_action:
action: none
style:
top: 42%
left: 74%
color: rgb(10,10,10)
- type: state-label
entity: sensor.xiaomi_mesh_third_of_humidity
tap_action:
action: none
style:
top: 42.5%
left: 81.5%
color: rgb(10,10,10)
- type: state-label
entity: sensor.xiaomi_mesh_fourth_of_humidity
tap_action:
action: none
card_mod:
style: |
div {
font-size: 13vw;
}
@media all and (min-width: 451px) and (min-height: 501px) {
div {
font-size: 3.5vw;
}
}
style:
top: 53.5%
left: 86%
color: rgb(10,10,10)
- type: custom:text-element
text: '%'
style:
top: 30%
left: 86%
color: rgb(10,10,10)
- type: state-label
entity: sensor.time_formatted
tap_action:
action: none
card_mod:
style: |
div {
font-size: 6vw;
}
@media all and (min-width: 451px) and (min-height: 501px) {
div {
font-size: 1.5vw;
}
}
style:
top: 75%
left: 30%
color: rgb(10,10,10)
- type: state-icon
entity: sensor.weather_just_icon
card_mod:
style: |
state-badge {
transform: scale(2);
}
@media all and (min-width: 451px) and (min-height: 501px) {
state-badge {
transform: scale(1);
}
}
style:
top: 72%
left: 61%
color: rgb(10,10,10)
'--paper-item-icon-color': rgb(10, 10, 10)
- type: horizontal-stack
cards:
- type: custom:button-card
aspect_ratio: 1/2.4
tap_action:
action: toggle
entity: switch._left_switch
show_name: false
show_state: false
icon: hass:spotlight
styles:
grid:
- position: relative
card:
- background-color: rgba(241, 241, 241, 0)
state:
- value: 'off'
color: rgb(190, 190, 190)
- type: custom:button-card
aspect_ratio: 1/2.4
tap_action:
action: toggle
entity: switch._middle_switch
icon: bha:ceiling-spot-lamp
show_name: false
show_state: false
styles:
grid:
- position: relative
card:
- background-color: rgba(241, 241, 241, 0)
state:
- value: 'off'
color: rgb(190, 190, 190)
- type: custom:button-card
aspect_ratio: 1/2.4
tap_action:
action: toggle
entity: switch._right_switch
icon: bha:led-point
show_name: false
show_state: false
styles:
grid:
- position: relative
card:
- background-color: rgba(241, 241, 241, 0)
state:
- value: 'off'
color: rgb(190, 190, 190)
columns: 3
ANOTHER PROJEKT SHARE:
Tuya Scene Switch 4 button
Xiaomi Aqara Opple six button