WallPanel Home Assistant Integration Using MQTT - Example Setup

[Garywoo]

Intro

I spent quite some time setting up my WallPanel device in Home Assistant, so that I could easily control it using Home Assistant automations, such as:

• Waking the device when the room was occupied, or the lights in the room were on.
• Setting the screen brightness lower in the evenings, and brighter in the daytime.
• Playing Text-to-speech messages for certain triggers.
• Locking the panel when children or drunk adults are around.

I thought I should share my config so anyone else looking to do the same can save some time.

Here's how it looks in Home Assistant once set up:

Entity Detail

Controls

Name	Description
Brightness	Screen brightness. 2 way control (read current brightness value / set new value)
Speak Text	Input text to be spoken by device. Displays unknown by default since it cannot read a current value
Wake	Semi-permanently wake or sleep the device. Wakes the device for 999999 seconds (~11 days). 1 way control (write only/stateless)

Sensors

Name	Description
Light	Measured ambient light in lux
AC Plugged	Binary sensor to detect if AC power is plugged into device (Not provided by my hardware)
Charging	Binary sensor to detect if device is charging (Not provided by my hardware)
USB Plugged	Binary sensor to detect if the device's USB port is plugged in (Not provided by my hardware)
Battery Level	Binary sensor to detect the devices battery level (Not provided by my hardware)

Configuration

Name	Description
Lock	A custom command to set the WallPanel URL to a custom HTML page without any controls on it, effectively locking the screen from doing anything. The custom HTML page is hosted on my HomeAssistant instance. Unlocking reloads the home URL. This is a 1 way control (write only/stateless) Note: This entity is not included in the example yaml code below, and is described separately due to extra setup needed
Open Settings	Button action to open the WallPanel settings page
Relaunch	Button action to go to the WallPanel home URL
Reload	Button action to refresh the WallPanel current page
Screen On	Binary sensor to detect the devices current screen state
URL	Input a URL to go to. 2 way control (read current URL / set new URL)

Setup

Prerequisites

• Have Home Assistant set up, and have a configured MQTT broker.

Steps

1. Follow the MQTT Setup docs to enable and connect MQTT in the WallPanel app.
2. Enable MQTT Discovery in the app settings.
3. Check to see if a new device has been discovered in your Home Assistant's MQTT integration. This will contain only the sensors from the table above.
4. On the device page in Home Assistant, click the 3 dots button in the Device info section, and click Download diagnostics.
5. Open the downloaded file and Ctrl+F find "identifiers". Look for the value below it in square brackets, and make a note of that. It should be something like [wallpanel_kitchenwallpanel] which I think is the MQTT base topic followed by the Client ID.
6. Go to your Home Assistant configuration.yaml file and add the YAML code from my example below. This will create each of the other entities seen in the screenshot above. You need to replace the values for the following keys with your own instance specific values.
   • unique_id - Use a similar format as I've used to keep things predictable. Each one must be unique.
   • name - The entity name you want. Again, try following my format to keep things tidy.
   • command_topic - Whatever you configured the base topic in the WallPanel app MQTT config settings, followed by /command/
   • availability: - topic - Whatever you configured the base topic in the WallPanel app MQTT config settings, followed by /connection/
   • state_topic - Whatever you configured the base topic in the WallPanel app MQTT config settings, followed by /state/
   • json_attributes_topic: - Same as state_topic
   • device: identifiers - Use the value you found in step 5 above.

Example YAML

# Wallpanel Controls
mqtt:
  button:
    - unique_id: kitchen_wallpanel_settings_btn
      name: "Kitchen Wall Panel Open Settings"
      command_topic: "wallpanel/kitchenwallpanel/command"
      payload_press: '{"settings": true}'
      availability:
        - topic: "wallpanel/kitchenwallpanel/connection"
      entity_category: "config"
      icon: mdi:cog
      device:
        identifiers: "[wallpanel_kitchenwallpanel]"
    - unique_id: kitchen_wallpanel_reload_btn
      name: "Kitchen Wall Panel Reload"
      command_topic: "wallpanel/kitchenwallpanel/command"
      payload_press: '{"reload": true}'
      availability:
        - topic: "wallpanel/kitchenwallpanel/connection"
      entity_category: "config"
      icon: mdi:reload
      device:
        identifiers: "[wallpanel_kitchenwallpanel]"
    - unique_id: kitchen_wallpanel_relaunch_btn
      name: "Kitchen Wall Panel Relaunch"
      command_topic: "wallpanel/kitchenwallpanel/command"
      payload_press: '{"relaunch": true}'
      availability:
        - topic: "wallpanel/kitchenwallpanel/connection"
      entity_category: "config"
      icon: mdi:home
      device:
        identifiers: "[wallpanel_kitchenwallpanel]"
  switch:
    - unique_id: kitchen_wallpanel_wake_switch
      name: "Kitchen Wall Panel Wake"
      command_topic: "wallpanel/kitchenwallpanel/command"
      availability:
        - topic: "wallpanel/kitchenwallpanel/connection"
      payload_on: '{"wake": true, "wakeTime": 999999}'
      payload_off: '{"wake": false}'
      state_on: "ON"
      state_off: "OFF"
      optimistic: false
      qos: 0
      retain: true
      device:
        identifiers: "[wallpanel_kitchenwallpanel]"
  binary_sensor:
    - unique_id: kitchen_wallpanel_screen_on
      name: "Kitchen Wall Panel Screen On"
      availability:
        - topic: "wallpanel/kitchenwallpanel/connection"
      state_topic: "wallpanel/kitchenwallpanel/state"
      payload_on: true
      payload_off: false
      device:
        identifiers: "[wallpanel_kitchenwallpanel]"
      entity_category: "diagnostic"
      value_template: "{{ value_json.screenOn }}"
      json_attributes_topic: "wallpanel/kitchenwallpanel/state"
  number:
    - unique_id: kitchen_wallpanel_brightness
      name: "Kitchen Wall Panel Brightness"
      availability:
        - topic: "wallpanel/kitchenwallpanel/connection"
      command_topic: "wallpanel/kitchenwallpanel/command"
      command_template: "{ 'brightness': {{ value }} }"
      min: 1
      max: 255
      mode: "slider"
      optimistic: false
      qos: 0
      retain: true
      state_topic: "wallpanel/kitchenwallpanel/state"
      value_template: "{{ value_json.brightness }}"
      json_attributes_topic: "wallpanel/kitchenwallpanel/state"
      device:
        identifiers: "[wallpanel_kitchenwallpanel]"
      icon: mdi:brightness-6
  text:
    - unique_id: kitchen_wallpanel_speak_text
      name: "Kitchen Wall Panel Speak Text"
      availability:
        - topic: "wallpanel/kitchenwallpanel/connection"
      command_topic: "wallpanel/kitchenwallpanel/command"
      command_template: "{ 'speak': '{{ value }}' }"
      mode: "text"
      device:
        identifiers: "[wallpanel_kitchenwallpanel]"
      icon: mdi:account-voice
    - unique_id: kitchen_wallpanel_url
      name: "Kitchen Wall Panel URL"
      availability:
        - topic: "wallpanel/kitchenwallpanel/connection"
      command_topic: "wallpanel/kitchenwallpanel/command"
      command_template: "{ 'url': '{{ value }}' }"
      state_topic: "wallpanel/kitchenwallpanel/state"
      value_template: "{{ value_json.currentUrl }}"
      json_attributes_topic: "wallpanel/kitchenwallpanel/state"
      entity_category: "config"
      mode: "text"
      device:
        identifiers: "[wallpanel_kitchenwallpanel]"
      icon: mdi:web

Lock Switch

You can skip adding this entity if you don't need it, but if you want to use this functionality, you'll need a page to use as the lock page.

I created a file named lock.html and saved it in my Home Assistant /config/www/ directory. The HTML code is below:

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Locked</title>
    <style>
        body{
            background-color: black;
        }
        h1{
            text-align: center;
            font-size: 175px;
        }
    </style>
</head>

<body>
    <h1>🔒</h1>
</body>

</html>

The extra YAML switch entity example is below. Update the payload_on: URL value to your Home Assistant server's address, along with the other keys mentioned in step 6 above.

  switch:
    - unique_id: kitchen_wallpanel_lock_switch
      name: "Kitchen Wall Panel Lock"
      command_topic: "wallpanel/kitchenwallpanel/command"
      availability:
        - topic: "wallpanel/kitchenwallpanel/connection"
      payload_on: '{"url": "http://192.168.3.34:8123/local/lock.html"}'
      payload_off: '{"relaunch": true}'
      optimistic: true
      qos: 0
      retain: true
      entity_category: "config"
      device:
        identifiers: "[wallpanel_kitchenwallpanel]"

After adding this to the configuration.yaml, reload your config, and you should now see the extra entities in the MQTT device you found earlier.

Happy automating!

[edwade3]

Thanks @TheTimeWalker - got this working an absolute treat but the only issue I had was with the screen status sensor so for anyone else who finds this, looks like the binary sensor config has changed slightly requiring the entity_category to be set to diagnostic so managed to get it working with the following configuration:

binary_sensor:
  - unique_id: kitchen_wallpanel_screen_status
    name: "Kitchen Wall Panel Screen Status"
    state_topic: "wallpanel/kitchenwallpanel/state"
    value_template: "{{ value_json.screenOn }}"
    payload_on: true
    payload_off: false
    availability:
      - topic: "wallpanel/kitchenwallpanel/connection"
    device:
      identifiers: "[wallpanel_kitchenwallpanel]"
    entity_category: "diagnostic"

[Garywoo]

Thanks for pointing this out @edwade3. I seem to remember that a previous HA release changed the allowable binary sensor entity category, and I think it automatically migrated some of them to diagnostic. I hadn't noticed this had happened, but I've now updated my example YAML to include the correct entity_category for the affected entity.

[edwade3]

No worries at all! Ended up taking a deep dive in to binary sensors and MQTT which is always fun! Haha! Thanks for updating the example!