ESP8266 MQTT JSON TFT Message Display with Home Assistant Auto Discovery

No need to alter the code for config, it is all done via browser. Just flash, connect to AP and configure.

After configuration, all the mqtt config info is displayed on screen.

It has many functions and works with Home Assistant.

This will use the MQTT Auto Discovery feature in Home Assistant and add itself as a light component. From there you can also turn the display on/off and alter the brightness.

You can control it through a JSON payload

Example Payloads:

// Set Brightness
{"command": "brightness", "command_data": "50" }
// Display text
{"command": "message", "command_data": "My Cool Message" }
// HA Template
{"command": "message", "command_data": " {{ states.sensor.dark_sky_daily_summary.state }} "}
// Whats playing?
{"command": "message", "command_data": " {{ states.media_player.kodi.attributes.media_series_title }} "}
// Show things
{"command": "message", "command_data": "High: {{ states.sensor.dark_sky_daily_high_temperature.state}} \nLow:  {{ states.sensor.dark_sky_daily_low_temperature.state}} \n"}
// Will use new line chars to break
{"command": "message", "command_data": "DarkSky\nTodays Temp\nCurrent: {{ states.sensor.dark_sky_temperature.state }}\nHigh:    {{ states.sensor.dark_sky_daily_high_temperature.state}}\nLow:     {{ states.sensor.dark_sky_daily_low_temperature.state}}"}
// Reconnect to mqtt - You could use this "rediscover" the light component
{"command": "mqreconnect"}
// Reset your device
{"command": "reset"}

More details here:

4 Likes

Sample Update Automation

- id: '1532730381532'
  alias: Refresh Weather Display
  trigger:
  - entity_id: sensor.dark_sky_temperature
    platform: state
  condition: []
  action:
  - data_template:
      topic: 'mqdisplay/command'
      payload: >
        {"command": "message", "command_data": "DarkSky\n
        Todays Temp\nCurrent: {{ states.sensor.dark_sky_temperature.state }}\n
        High:   {{ states.sensor.dark_sky_daily_high_temperature.state }}\n
        Low:    {{ states.sensor.dark_sky_daily_low_temperature.state }}"}
    service: mqtt.publish
3 Likes

Added more features to the code, image display, screen fill and more.

Here is an example from multiple HA datasources, show the weather and what’s playing w/ progress bar.