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
120
BoYang Xie 28.2 121 [[image:1727233636007-933.png]]
122
BoYang Xie 26.2 123 image 2 create a SquareLine project
124
125 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.
126
127 [[image:1727229582471-566.png]]
128
129 image 3 project settings
130
131 [[image:1727229618724-758.png]]
132
133 image 4 modify project settings
134
135 Now we can start to use this software. The steps for creating this UI are shown in image 5-10.
136
137 [[image:1727229653254-680.png]]
138
139 image 5 create a UI(1)
140
141 [[image:1727231038705-173.png]]
142
143 image 6 create a UI(2)
144
145 [[image:1727229682537-381.png]]
146
147 image 7 create a UI(3)
148
149 We repeat the steps of screen1 in screen2. Then we get screen2 as shown in image 8.
150
151 [[image:1727229715361-392.png]]
152
153 image 8 create a UI(4)
154
155 Finally, we add click event for screen change to button1 in screen1(shown in image 9) and button2 in screen2.
156
157 [[image:1727229740592-843.png]]
158
159 image 9 create a UI(5)
160
161 The event settings of button1 are as image 10 shown. The event adding operation of button2 is similar to button1.
162
163 [[image:1727229760857-521.png]]
164
165 image 10 create a UI(6)
166
167 == 2.4 Integrate UI Code to ESP-IDF Project ==
168
169 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.
170
171 [[image:1727229798126-306.png]]
172
173 image 11 export UI file
174
175 [[image:1727229821582-258.png]]
176
177 image 12 exported UI file
178
179 Create a empty directory entitled ‘ui’ in path “basic_prj/app_components/ui/”, and then copy all UI code exported to this directory.
180
181 [[image:1727229845835-509.png]]
182
183 image 13 open CMakeLists.txt
184
185 [[image:1727229892636-154.png]]
186
187 image 14 modify CMakeLists.txt
188
189 The last step of integrating is adding two lines of code in main.c file.
190
191 [[image:1727229926561-300.png]]
192
193 image 15 add “ui.h”
194
195 [[image:1727229955611-607.png]]
196
197 image 16 add “ui_init()”
198
Edwin Chen 5.1 199 == 2.5 Test Result ==
Edwin Chen 2.1 200
BoYang Xie 26.2 201 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 202
BoYang Xie 26.2 203 [[image:1727229990795-405.png]]
204
205 image 17 screen1
206
207 [[image:1727230012478-930.png]]
208
209 image 18 screen2
210
Edwin Chen 5.1 211 = 3. Example Project 1: LoRa Central Display =
Edwin Chen 2.1 212
Edwin Chen 7.1 213 [[image:image-20240916101737-1.png||height="468" width="683"]]
Edwin Chen 2.1 214
Edwin Chen 7.1 215
216
Edwin Chen 8.1 217 = 4. Example Project 2: LoRaWAN RS485 Alarm =
Edwin Chen 2.1 218
219
220 = 6. FAQ =
221
Edwin Chen 7.1 222 == 6.1 ==
Edwin Chen 2.1 223
224
225 = 7. Order Info =
226
Edwin Chen 4.4 227 == 7.1  Part Number ==
Edwin Chen 2.1 228
Edwin Chen 4.4 229 Part Number: (% style="color:#4472c4" %)LTS5
Edwin Chen 2.1 230
231
Edwin Chen 4.4 232 == 7.2  Packing Info ==
Edwin Chen 2.1 233
Edwin Chen 4.4 234 **Package Includes**:
Edwin Chen 2.1 235
Edwin Chen 4.4 236 * LTS5 HMI Touch Screen
237 * 5V,2A DC Power Adapter.
238 * USB Type C Program Cable
Edwin Chen 2.1 239
240 = 8. Support =
241
242 * 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.
243 * 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]].
244
245 = 9.  Reference material =
246
Edwin Chen 4.2 247 * Datasheet
248 * Source Code
Edwin Chen 4.3 249 * Mechinical
Edwin Chen 2.1 250
251 = 10. FCC Warning =
252
253
254 This device complies with part 15 of the FCC Rules.Operation is subject to the following two conditions:
255
256 (1) This device may not cause harmful interference;
257
258 (2) this device must accept any interference received,including interference that may cause undesired operation.
259
Copyright ©2010-2024 Dragino Technology Co., LTD. All rights reserved
Dragino Wiki v2.0