Hide last authors
Edwin Chen 4.1 1
2 [[image:image-20240915231842-1.png]]
Edwin Chen 2.1 3
4
5 (% _mstvisible="1" %)
6 (% _msthash="315238" _msttexthash="18964465" _mstvisible="3" %)**Table of Contents:**
7
8 {{toc/}}
9
10
11
12
13
14
15
16
17 = 1.  Introduction =
18
Edwin Chen 4.1 19 == 1.1  What is LTS5 LoRa HMI touch screen ==
Edwin Chen 2.1 20
Edwin Chen 4.1 21 LTS5 is a (% style="color:blue" %)LoRa / LoRaWAN HMI Touch Screen(%%) designed for display purpose of IoT project. It have a 5.0" HMI touch screen, and support WiFi, Bluetooch, LoRa wireless protocol.
Edwin Chen 2.1 22
Edwin Chen 4.1 23 LTS5 is an Open Source software project. The MCU is ESP32 and Dragino LA66 LoRa module. There are lots of development source for ESP32 which can greatly reduce the development time.
Edwin Chen 2.1 24
Edwin Chen 4.2 25 The HMI touch screen of LTS5 supports drap & drop design. Developer can use SquareLine to easily customize the display UI for different application.
Edwin Chen 2.1 26
Edwin Chen 4.2 27 LTS5 use LA66 LoRa module, this module can be program to support private LoRa protocol or LoRaWAN protocol.
Edwin Chen 2.1 28
Edwin Chen 4.2 29
Edwin Chen 2.1 30 == 1.2  Features ==
31
Edwin Chen 4.8 32 * ESP32-WROOM MCU + Dragino LA66 LoRa Module
Edwin Chen 4.2 33 * Support Private LoRa protocol or LoRaWAN protocol
34 * Support WiFi & BLE wireless protocol
35 * 5.0" HMI touch screen
Edwin Chen 4.6 36 * Support LVGL case. SquareLine program.
Edwin Chen 4.2 37 * Support RS485 Interface
38 * Open Source Project
Edwin Chen 2.1 39 * Wall Attachable.
Edwin Chen 4.2 40 * 5V DC power
Edwin Chen 2.1 41 * IP Rating: IP52
42
43 == 1.3  Specification ==
44
Edwin Chen 4.9 45 **LoRa**:
46
47
Edwin Chen 4.7 48 **WiFi:**
49
50 * 802.11b/g/n
51 * Up to 150 Mbps data rate in 802.11n mode
52 * Support A-MPDU and A-MSDU aggregation
53 * zero point four μ S protection interval
54 * Working channel center frequency range: 2412~~2484 MHz
55
56 **Bluetooth:**
57
58 * Bluetooth V4.2 BR/EDR and Bluetooth LE standard
59 * Class-1, Class-2, and Class-3 transmitters.
60 * AFH
61 * CVSD and SBC
62
Edwin Chen 4.2 63 **Display:**
Edwin Chen 2.1 64
Edwin Chen 4.9 65 * 5.0 Inch , 800 x 480
66 * IPS Capacitive Touch SCreen
Edwin Chen 4.11 67 * RGB color.
68 * Display Area: 120.7*75.80 mm
Edwin Chen 2.1 69
70 == 1.4  Power Consumption ==
71
Edwin Chen 4.5 72 * External 5V DC power adapter
Edwin Chen 2.1 73
74 == 1.5  Storage & Operation Temperature ==
75
Edwin Chen 4.10 76 * Operation Temperature: -20 ~~ 70°C  (No Dew)
77 * Storage Temperature: -30 ~~ 70°C  (No Dew)
Edwin Chen 2.1 78
79 == 1.6  Applications ==
80
81 * Smart Buildings & Home Automation
82 * Logistics and Supply Chain Management
83 * Smart Metering
84 * Smart Agriculture
85 * Smart Cities
86 * Smart Factory
87
Edwin Chen 5.1 88 = 2.  Getting Start with Hello World =
Edwin Chen 2.1 89
Edwin Chen 5.1 90 == 2.1  About this demo ==
Edwin Chen 2.1 91
BoYang Xie 26.2 92 In this Getting Start Example, we will show how to design a simple Display UI and upload it to LTS5. This UI has  a button , when user click the button. The Web UI will jump to a new page.
Edwin Chen 2.1 93
Edwin Chen 5.1 94 == 2.2  Install Software Running Environment ==
Edwin Chen 2.1 95
BoYang Xie 26.2 96 The ESP MCU can be developed using ESP-IDF, Arduino, or MicroPython. For this project, we utilize ESP-IDF for compilation and Visual Studio Code (VSCode) for editing.
Edwin Chen 2.1 97
BoYang Xie 26.2 98 === 2.2.1 Install VSCode and ESP-IDF extension ===
99
100 Firstly, download and install VSCode for your computer's operating system from the official website: [[Download Visual Studio Code - Mac, Linux, Windows>>url:https://code.visualstudio.com/download]].
101
102 Next, you need to install the ESP-IDF extension within VSCode. The detailed operation steps are illustrated in image 1.
103
104 [[image:1727229396732-319.png]]
105
106 image 1 ESP-IDF extension install
107
108 Links for reference: [[Install ESP32 ESP-IDF on Windows and Integrate with VS code (esp32tutorials.com)>>url:https://esp32tutorials.com/install-esp32-esp-idf-windows-integrate-vs-code/#:~~:text=In%20this%20tutorial,%20we%20will%20show%20you%20how%20to%20install]]
109
Edwin Chen 5.1 110 === 2.2.2 Install SquareLine Studio ===
Edwin Chen 2.1 111
BoYang Xie 26.2 112 The version we are utilizing for this software is 1.4.2. You can download it from the official link: [[SquareLine Studio - Download the current version of SquareLine Studio>>url:https://squareline.io/downloads#lastRelease]].
Edwin Chen 2.1 113
BoYang Xie 26.2 114 Please note that this software necessitates the registration of a license prior to usage, and various licenses come with distinct limitations. For instance, the free version imposes restrictions such as a limit of 1 component, 150 widgets, and 10 screens. However, for first-time downloads, you are granted unrestricted access for a period of 30 days without the need for immediate registration.
Edwin Chen 2.1 115
BoYang Xie 26.2 116 == 2.3 Simple usage of SquareLine Studio and export UI code ==
Edwin Chen 2.1 117
BoYang Xie 26.2 118 After launching and logging in to this software, create a project as shown in the following image 2. The version of LVGL is 8.3.11.
Edwin Chen 2.1 119
BoYang Xie 26.2 120 [[image:1727229550717-684.png]]
Edwin Chen 2.1 121
BoYang Xie 26.2 122 image 2 create a SquareLine project
123
124 Next, we need to make some settings for this project. By clicking in the specified order on image 3, we can see the page as shown in image 4.
125
126 [[image:1727229582471-566.png]]
127
128 image 3 project settings
129
130 [[image:1727229618724-758.png]]
131
132 image 4 modify project settings
133
134 Now we can start to use this software. The steps for creating this UI are shown in image 5-10.
135
136 [[image:1727229653254-680.png]]
137
138 image 5 create a UI(1)
139
140 [[image:1727231038705-173.png]]
141
142 image 6 create a UI(2)
143
144 [[image:1727229682537-381.png]]
145
146 image 7 create a UI(3)
147
148 We repeat the steps of screen1 in screen2. Then we get screen2 as shown in image 8.
149
150 [[image:1727229715361-392.png]]
151
152 image 8 create a UI(4)
153
154 Finally, we add click event for screen change to button1 in screen1(shown in image 9) and button2 in screen2.
155
156 [[image:1727229740592-843.png]]
157
158 image 9 create a UI(5)
159
160 The event settings of button1 are as image 10 shown. The event adding operation of button2 is similar to button1.
161
162 [[image:1727229760857-521.png]]
163
164 image 10 create a UI(6)
165
166 == 2.4 Integrate UI Code to ESP-IDF Project ==
167
168 To achieve the integrating, we first need to export the UI code, then make some modifications, and finally relocate the UI code to a specific position within the project.
169
170 [[image:1727229798126-306.png]]
171
172 image 11 export UI file
173
174 [[image:1727229821582-258.png]]
175
176 image 12 exported UI file
177
178 Create a empty directory entitled ‘ui’ in path “basic_prj/app_components/ui/”, and then copy all UI code exported to this directory.
179
180 [[image:1727229845835-509.png]]
181
182 image 13 open CMakeLists.txt
183
184 [[image:1727229892636-154.png]]
185
186 image 14 modify CMakeLists.txt
187
188 The last step of integrating is adding two lines of code in main.c file.
189
190 [[image:1727229926561-300.png]]
191
192 image 15 add “ui.h”
193
194 [[image:1727229955611-607.png]]
195
196 image 16 add “ui_init()”
197
Edwin Chen 5.1 198 == 2.5 Test Result ==
Edwin Chen 2.1 199
BoYang Xie 26.2 200 By pressing the button lying bottom right, the screen can switch to another as expected. This indicates that the UI file has been successfully integrated into the project and is now effective.
Edwin Chen 2.1 201
BoYang Xie 26.2 202 [[image:1727229990795-405.png]]
203
204 image 17 screen1
205
206 [[image:1727230012478-930.png]]
207
208 image 18 screen2
209
Edwin Chen 5.1 210 = 3. Example Project 1: LoRa Central Display =
Edwin Chen 2.1 211
Edwin Chen 7.1 212 [[image:image-20240916101737-1.png||height="468" width="683"]]
Edwin Chen 2.1 213
Edwin Chen 7.1 214
215
Edwin Chen 8.1 216 = 4. Example Project 2: LoRaWAN RS485 Alarm =
Edwin Chen 2.1 217
218
219 = 6. FAQ =
220
Edwin Chen 7.1 221 == 6.1 ==
Edwin Chen 2.1 222
223
224 = 7. Order Info =
225
Edwin Chen 4.4 226 == 7.1  Part Number ==
Edwin Chen 2.1 227
Edwin Chen 4.4 228 Part Number: (% style="color:#4472c4" %)LTS5
Edwin Chen 2.1 229
230
Edwin Chen 4.4 231 == 7.2  Packing Info ==
Edwin Chen 2.1 232
Edwin Chen 4.4 233 **Package Includes**:
Edwin Chen 2.1 234
Edwin Chen 4.4 235 * LTS5 HMI Touch Screen
236 * 5V,2A DC Power Adapter.
237 * USB Type C Program Cable
Edwin Chen 2.1 238
239 = 8. Support =
240
241 * Support is provided Monday to Friday, from 09:00 to 18:00 GMT+8. Due to different timezones we cannot offer live support. However, your questions will be answered as soon as possible in the before-mentioned schedule.
242 * Provide as much information as possible regarding your enquiry (product models, accurately describe your problem and steps to replicate it etc) and send a mail to [[support@dragino.com>>url:file:///D:/市场资料/说明书/LoRa/LT系列/support@dragino.com]].
243
244 = 9.  Reference material =
245
Edwin Chen 4.2 246 * Datasheet
247 * Source Code
Edwin Chen 4.3 248 * Mechinical
Edwin Chen 2.1 249
250 = 10. FCC Warning =
251
252
253 This device complies with part 15 of the FCC Rules.Operation is subject to the following two conditions:
254
255 (1) This device may not cause harmful interference;
256
257 (2) this device must accept any interference received,including interference that may cause undesired operation.
258
Copyright ©2010-2024 Dragino Technology Co., LTD. All rights reserved
Dragino Wiki v2.0