Lovelace: Xiaomi Mesh Smart Wall Switch

Tags: #<Tag:0x00007fc3ffb5e0f8>

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:

  1. download font “digital-display-tfb”
  2. convert font to *.woff2
  3. create fonts.css
@font-face {
  font-family: "digital_display_tfb";
  src: url("/local/font/digital_display_tfb.woff2") format("woff2");
}
  1. 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();
  1. 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