tejasitraj / esphome-color-display

My implementation of a 3.2" TFT Colour Display with an ESP32 in ESPHome

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

esphome-ILI9341-color-display

My implementation of an ILI9341 3.2" TFT LCD Colour Display with an ESP32 in ESPHome.

Display Case
20211218_191244 20220110_204306

This is an easy project to get started! My design skills arent great, but this lays the foundations for anything I'd want to implement in the future. I got started from the official ILI9341 documentation on esphome.

I read several entities from Home Assistant:

  • The current date and time
  • The current weather state and outside temperature
  • Internal temperature
  • Forecast weather for the present day
  • Forecast weather for the next day.

I have also implemented a simple logic where the current day's forecast is displayed before 4pm every day, and after 4pm it displays the next day's forecast instead.

I also get a dimmer entity in HA which I can use to dim the LCD backlight or turn it off.

What you need

Make the Right Connections

Careful! Check the voltage capabilities of your display - mine could only handle 3.3V.

Display Pin ESP Pin
GND GND
VCC 3V3
CLK D14
MOS D13
RES D33
DC D25
BLK D32
MIS D12

My display does not have a cs pin. If yours does, do connect it do a GPIO pin and modify the code accordingly.

How to get started

  • Put the font files as well as the yaml file into your esphome folder (feel free to use your own choice of fonts - make sure you update the yaml in that case)
  • Make the appropriate changes to your yaml file. Substitute values for:
    • Device name
    • Static IP details. If you dont want to set a static IP, comment out this line as well as the lines for manual_ip under the wifi section!
    • Entities for an internal temperature sensor and an external temperature sensor
    • An entity for the current weather condition - I use SMHI in Sweden, you could select your local weather service
    • Entities to show the forecast low and forecast high for today and tomorrow. See forecast section in my other post for a description, and see code below which I use to create these entities in my configuration.yaml
  • Compile and upload to your hardware!

Forecast entities

Essentially, in order to create separate specific entities for today's and tomorrow's forecast, I use template sensors in my configuration.yaml. Here's my code.

template:
  - sensor:
      - name: Todays Forecast High
        state: >
          {{ states.weather.smhi_home.attributes.forecast.0.temperature }}
      - name: Todays Forecast Low
        state: >
          {{ states.weather.smhi_home.attributes.forecast.0.templow }}
      - name: Todays Forecast Condition
        state: >
          {{ states.weather.smhi_home.attributes.forecast.0.condition }}
      - name: Tomorrows Forecast High
        state: >
          {{ states.weather.smhi_home.attributes.forecast.1.temperature }}
      - name: Tomorrows Forecast Low
        state: >
          {{ states.weather.smhi_home.attributes.forecast.1.templow }}
      - name: Tomorrows Forecast Condition
        state: >
          {{ states.weather.smhi_home.attributes.forecast.1.condition }}

Case

I worked with my friend Magnus Skärström to design a case for the display and the ESP32. There is also an opening in the case for a 6mm push button, which I plan to use soon. I personally don't see the need to make the case unnecessarily slim, since this restricts the ability to use dupont connector cables and pin headers and forces us to solder directly on the board instead. Which could be good - but it isn't beginner friendly. 20220110_204300 20220110_204306

My next steps

  • Adding a physical button to allow me to turn the display on and off
  • Thinking about what more fun information I could add to the display - alarm status? heating status? Alerts? It's all possible!

About

My implementation of a 3.2" TFT Colour Display with an ESP32 in ESPHome