Home

Awesome

WallPanel

WallPanel is an Android application for Web Based Dashboards and Home Automation Platforms.

Features

Hardware & Software

*** If you have need support for older Android 4.0 devices (those below Android 4.4), you want to use the legacy version of the application. Alternatively you can download an APK from the release section prior to release v0.8.8-beta.6 ***

Quick Start

You can either side load the application to your device from the release section or install the application from the Google Play store. The application will open to the welcome page with a link to update the settings. Go to settings, and setup the link to your web page or home automation platform. You may also update additional settings for Motion, Face Detection, and for publishing device sensor data.

Building the Application

To build the application locally, checkout the code from Github and load the project into Android Studio with Android API 27 or higher. You will need to remove the Firebase dependency in the build.gradle file, this is not required. Remove the following dependencies:

implementation 'com.google.firebase:firebase-core:17.2.0'
implementation 'com.google.firebase:firebase-analytics:17.2.0'

Remove this if you are building the application for devices that do not support Google Services.

apply plugin: 'com.google.gms.google-services'

The project should compile normally.

Limitations

Android devices use WebView to render webpages, This WebView does not have full feature parity with Chrome for Android and therefore pages that render in Chrome may not render nicely in Wall Panel. For example, WebView that shipped with Android 4.4 (KitKat) devices is based on the same code as Chrome for Android version 30. This WebView does not have full feature parity with Chrome for Android and is given the version number 30.0.0.0. If you find that you cannot render a webpage, it is most likely that the version of WebView on your device does not support the CSS/HTML of that page. You have little recourse but to update the webpage, as there is nothing to be done to the WebView to make it compatible with your code.

Support

For issues, feature requests, comments or questions, use the Github issues tracker.

MQTT Sensor and State Data

If MQTT is enabled in the settings and properly configured, the application can publish data and states for various device sensors, camera detections, and application states.

Device Sensors

The application will post device sensors data per the API description and Sensor Reading Frequency. Currently device sensors for Pressure, Temperature, Light, and Battery Level are published.

Sensor Data

SensorKeysExampleNotes
batteryunit, value, charging, acPlugged, usbPlugged{"unit":"%", "value":"39", "acPlugged":false, "usbPlugged":true, "charging":true}
lightunit, value{"unit":"lx", "value":"920"}
magneticFieldunit, value{"unit":"uT", "value":"-1780.699951171875"}
pressureunit, value{"unit":"hPa", "value":"1011.584716796875"}
temperatureunit, value{"unit":"°C", "value":"24"}

NOTE: Sensor values are device specific. Not all devices will publish all sensor values.

Home Assistant Examples

sensor:
  - platform: mqtt
    state_topic: "wallpanel/mywallpanel/sensor/battery"
    name: "WallPanel Battery Level"
    unit_of_measurement: "%"
    value_template: '{{ value_json.value }}'
    
 - platform: mqtt
    state_topic: "wallpanel/mywallpanel/sensor/temperature"
    name: "WallPanel Temperature"
    unit_of_measurement: "°C"
    value_template: '{{ value_json.value }}'

  - platform: mqtt
    state_topic: "wallpanel/mywallpanel/sensor/light"
    name: "WallPanel Light Level"
    unit_of_measurement: "lx"
    value_template: '{{ value_json.value }}'
    
  - platform: mqtt
    state_topic: "wallpanel/mywallpanel/sensor/magneticField"
    name: "WallPanel Magnetic Field"
    unit_of_measurement: "uT"
    value_template: '{{ value_json.value }}'

  - platform: mqtt
    state_topic: "wallpanel/mywallpanel/sensor/pressure"
    name: "WallPanel Pressure"
    unit_of_measurement: "hPa"
    value_template: '{{ value_json.value }}'

Camera Motion, Face, and QR Codes Detections

In additional to device sensor data publishing, the application can also publish states for Motion detection and Face detection, as well as the data from QR Codes derived from the device camera.

DetectionKeysExampleNotes
motionvalue{"value": false}Published immediately when motion detected
facevalue{"value": false}Published immediately when face detected
qrcodevalue{"value": data}Published immediately when QR Code scanned

Home Assistant Examples

binary_sensor:
  - platform: mqtt
    state_topic: "wallpanel/mywallpanel/sensor/motion"
    name: "Motion"
    payload_on: '{"value":true}'
    payload_off: '{"value":false}'
    device_class: motion 
    
binary_sensor:
  - platform: mqtt
    state_topic: "wallpanel/mywallpanel/sensor/face"
    name: "Face Detected"
    payload_on: '{"value":true}'
    payload_off: '{"value":false}'
    device_class: motion 
  
sensor:
  - platform: mqtt
    state_topic: "wallpanel/mywallpanel/sensor/qrcode"
    name: "QR Code"
    value_template: '{{ value_json.value }}'
    

Application State Data

The application can also publish state data about the application such as the current dashboard url loaded or the screen state.

KeyValueExampleDescription
currentUrlURL String{"currentUrl":"http://hasbian:8123/states"}Current URL the Dashboard is displaying
screenOntrue/false{"screenOn":true}If the screen is currently on.
brightnesstrue/false{"brightness":100}Current brightness value of the screen.

MJPEG Video Streaming

Use the device camera as a live MJPEG stream. Just connect to the stream using the device IP address and end point. Be sure to turn on the camera streaming options found under HTTP Settings and set the number of allowed streams and HTTP port number. Note that performance will depend upon your device (i.e. older devices will be slow).

Browser Example:

http://<the.device.ip.address>:2971/camera/stream
// where <the.device.ip.address> represents the address that the device has been assigned on your network, 
// for example something like 192.168.1.1

You will find the address under HTTP Settings > MJPEGStreaming

Home Assistant Example:

camera:
  - platform: mjpeg
    mjpeg_url: http://<the.device.ip.address>:2971/camera/stream
    name: WallPanel Camera

MQTT and HTTP Commands

Interact and control the application and device remotely using either MQTT or HTTP (REST) commands, including using your device as an announcer with Google Text-To-Speach.

Commands

KeyValueExample PayloadDescription
clearCachetrue{"clearCache": true}Clears the browser cache
evalJavaScript{"eval": "alert('Hello World!');"}Evaluates Javascript in the dashboard
audioURL{"audio": "http://<url>"}Play the audio specified by the URL immediately
relaunchtrue{"relaunch": true}Relaunches the dashboard from configured launchUrl
reloadtrue{"reload": true}Reloads the current page immediately
urlURL{"url": "http://<url>"}Browse to a new URL immediately
waketrue{"wake": true, "wakeTime": 180}Wakes the screen if it is asleep. Option wakeTime (in seconds) is optional, default is 30 sec. (Note: wakeTime cannot be shorter than Androids Display Timeout setting)
wakefalse{"wake": false}Release screen wake (Note: screen will not turn off before Androids Display Timeout finished)
speakdata{"speak": "Hello!"}Uses the devices TTS to speak the message
brightnessdata{"brightness": 1}Changes the screens brightness, value 1-255.
cameradata{"camera": true}Turns on/off camera streaming, requires camera to be enabled.
volumedata{"volume": 100}Changes the audio volume, value 0-100 (in %. Does not effect TTS volume).

Google Text-To-Speach Command

You can send a command using either HTTP or MQTT to have the device speak a message using Google's Text-To-Speach. Note that the device must be running Android Lollipop or above.

Example format for the message topic and payload:

{"topic":"wallpanel/mywallpanel/command", "payload":"{'speak':'Hello!'}"}

Screensaver and Brigthness control

On some older devices, there is not screensaver such as Daydream that automatically dims the screen. Therefore the application provides a screensaver feature (currently a clock animation). This feature along with the screen brightness option, allows the screen to dim when the screensaver is active. With the Camera and Motion feature, the device can be automatically awaken when motion is detected. Optionally, you can send an MQTT command to wake the screen or just touch the screen to deactive the screensaver.

There is setting to dim screen a set percentage when the screensaver is active, this requires the screen brightness setting be enabled. When set to a value above 0%, the screen will dim by the percent value set when the screensaver is active. So if the setting is 75%, the screen will dim to a vlaue that is 75% of the default device brightness levels.

Using the screen brightness option requires some extra permissions. This is because controlling the devices screen brightness is considered a dangerous permission by Google and so users have to manually turn this on. When you first select the screen brightness option, you will be taken to the setting on your device to enable the permission. The screen brightness feature behaves in the following manner:

Credits

WallPanel (Formerly HomeDash) is a fork from the original WallPanel project developed by quadportnick. Thanks to allofmex for his contributions to the project.