Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mulder82/tndisplay
Complete project for build wireless touch display to control HomeAssistant powered SmartHome.
https://github.com/mulder82/tndisplay
home-assistant home-assistant-device homeassistant homeassistant-device nextion node-red node-red-flow nodered nx3224t024 tasmota tasmota-device wemos wemos-d1
Last synced: 7 days ago
JSON representation
Complete project for build wireless touch display to control HomeAssistant powered SmartHome.
- Host: GitHub
- URL: https://github.com/mulder82/tndisplay
- Owner: mulder82
- Created: 2024-06-22T12:28:43.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-07-09T17:02:03.000Z (6 months ago)
- Last Synced: 2024-12-07T10:02:03.592Z (15 days ago)
- Topics: home-assistant, home-assistant-device, homeassistant, homeassistant-device, nextion, node-red, node-red-flow, nodered, nx3224t024, tasmota, tasmota-device, wemos, wemos-d1
- Homepage:
- Size: 7.73 MB
- Stars: 132
- Watchers: 11
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# TNDisplay
The goal of the project is to create a wireless touchscreen display that can be programmed using NodeRed and used to control HomeAssistant powered SmartHome.
# Demonstration videos
HomeAssistant control|Demo application
--- | ---
[](https://www.youtube.com/shorts/P3XaIMjOvjI)|[](https://www.youtube.com/shorts/vB-uo-am9LA)
1|2|3
--- | --- | ---
||
# Requirements
## Hardware
1. Nextion HMI Display, model [NX3224T024](https://nextion.tech/basic-series-introduction/) or other Nextion display with resolution 320x240px
2. [Wemos D1 mini lite](https://www.wemos.cc/en/latest/d1/d1_mini_lite.html) or other ESP MCU with 5v power pin
## Software
1. MQTT broker (see [mosquitto](https://mosquitto.org/download/))
2. Node-Red (see [getting started with node-red](https://nodered.org/docs/getting-started/))
# Configuration
## Nextion display (upload TFT project)
### Option A (using SDCard)
To upload TFT project using SDCard use [TNDisplay.tft](https://github.com/mulder82/TNDisplay/blob/main/Nextion/TNDispay.tft) file and follow [this instructions](https://nextion.tech/faq-items/using-nextion-microsd/)
### Option B (using ttl adapter)
1. Download and install [NextionEditor](https://nextion.tech/nextion-editor/#_section1)
2. Download [TNDisplay.hmi](https://github.com/mulder82/TNDisplay/blob/main/Nextion/TNDispay.HMI)
3. Connect display and upload project ([see instructions](https://www.youtube.com/watch?v=xgBq5L0nSWk))
# Wemos D1 module
1. Flash ESP module with Tasmota ([see instructions](https://tasmota.github.io/docs/Getting-Started/#needed-software))
2. Configure Tasmota (set WiFi connection, [MQTT connection](https://tasmota.github.io/docs/MQTT/#configure-mqtt)) and [import](https://tasmota.github.io/docs/Templates/) following template:
```console
{"NAME":"TNDisplay","GPIO":[0,0,320,0,0,0,0,0,0,0,0,0,0,0],"FLAG":0,"BASE":18}
```
MQTT Settings | Template Settings
--- | ---
 | 
3. Change serial baudrate to 9600. Open tasmota console and execute following command:
```console
baudrate 9600
```
4. Set Tasmota rule to initialize communication and show informations when connecting/disconnecting wifi and mqtt:
```console
Rule1 ON System#Init DO serialsend5 64696d3d313030ffffff ENDON ON Wifi#Connected DO serialsend5 706167652036ffffff54312e7478743d2257494649204f4b22ffffff50312e7069633d3237ffffff ENDON ON Wifi#Disconnected DO serialsend5 706167652036ffffff54312e7478743d2257494649204f46464c494e4522ffffff50312e7069633d3531ffffff ENDON ON Mqtt#Connected DO serialsend5 706167652036ffffff54312e7478743d224d515454204f4b22ffffff50312e7069633d3236ffffff ENDON ON Mqtt#Disconnected DO serialsend5 706167652036ffffff54312e7478743d224d515454204f46464c494e4522ffffff50312e7069633d3434ffffff ENDON
```
5. Enable Rule1:
```console
Rule1 1
```
6. Connect ESP module with Nextion display:
> [!CAUTION]
> Disconnect power supply when making connections!
Nextion PIN | ESP Pin
--- | ---
+5V (black) | 5V
TX (red) | RX
RX (white) | TX
GND (yellow) | G
> [!IMPORTANT]
> Note the crossover RX TX pins
7. At this stage if you have done everything correctly after restarting tasmota the screen should sequentially show the information "WiFi OK", "MQTT OK".
> [!TIP]
> If the display shows only "TNDisplay" screen with logo and nothing changes check [this issue discussion](https://github.com/mulder82/TNDisplay/issues/1)
# NodeRed
1. Import node red [flow file](https://github.com/mulder82/TNDisplay/blob/main/NodeRed/TNDisplay.json) [(see instructions)](https://nodered.org/docs/user-guide/editor/workspace/import-export)
2. Check the settings, mainly that the topics in the MQTT nodes match those you set in Tasmota, and that the MQTT configuration node is configured correctly.
3. At this stage, if you have done everything correctly, after deploy flow in NodeRed the display should show the demo application.
# Casing
If you want to print the casing, use the project files included in the [Casing](https://github.com/mulder82/TNDisplay/tree/main/Casing) folder.
1 | 2
-- | --
 | 
# Available Pages
0 | 1 | 2 | 3 | 4
--- | --- | --- | --- | ---
 |  |  |  | 
5 | 6 | 7 | 8 | 9
--- | --- | --- | --- | ---
 |  |  |  | 
# Available Icons
## 50x50px (for use in header (PH.pic))
11 | 12 | 13 | 14 | 15 | 16 | 17 | 66 | 67 | 68 | 69
-- | -- | -- | -- | -- | -- | -- | -- | -- | -- | --
 |  |  |  |  |  |  |  |  |  | 
## 70x70px (for use as buttons images (P1.pic, P2.pic etc.)
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27
-- | -- | -- | -- | -- | -- | -- | -- | -- | --
 |  |  |  |  |  |  |  |  | 
28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37
-- | -- | -- | -- | -- | -- | -- | -- | -- | --
 |  |  |  |  |  |  |  |  | 
38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47
-- | -- | -- | -- | -- | -- | -- | -- | -- | --
 |  |  |  |  |  |  |  |  | 
48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57
-- | -- | -- | -- | -- | -- | -- | -- | -- | --
 |  |  |  |  |  |  |  |  | 
58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 70 | 71
-- | -- | -- | -- | -- | -- | -- | -- | -- | --
 |  |  |  |  |  |  |  |  | 
72 | 73 | 85
-- | -- | --
 |  | 
> [!IMPORTANT]
> If you have successfully completed your project using this repository, please share photos in the [discussion](https://github.com/mulder82/TNDisplay/discussions/categories/show-and-tell) so that I can show others what can be accomplished.