Wiki source code of LTS5 LoRa HMI Touch Screen

Version 118.1 by Dilisi S on 2024/12/22 15:13

Hide last authors
Xiaoling 56.1 1 (% style="text-align:center" %)
Edwin Chen 4.1 2 [[image:image-20240915231842-1.png]]
Edwin Chen 2.1 3
4
Xiaoling 56.1 5
6
7
8
9
Edwin Chen 2.1 10 (% _mstvisible="1" %)
Xiaoling 56.1 11 (% _msthash="315238" _msttexthash="18964465" _mstvisible="3" %)**Table of Contents:**
Edwin Chen 2.1 12
13 {{toc/}}
14
15
16
17
18
19
20
21
22 = 1.  Introduction =
23
Dilisi S 116.1 24 == 1.1  What is the LTS5 LoRa HMI Touch Screen? ==
Edwin Chen 2.1 25
Xiaoling 56.1 26
Dilisi S 116.1 27 The LTS5 is a (% style="color:blue" %)**LoRa / LoRaWAN HMI Touch Screen**(%%) designed for displaying information in IoT projects. It features a **5.0-inch HMI touch screen** and supports **Wi-Fi**, **Bluetooth**, and **LoRa** wireless protocols.
Edwin Chen 2.1 28
Dilisi S 116.1 29 The LTS5 is an open-source software project powered by an **ESP32 MCU** and a **Dragino LA66 LoRa** module. The extensive development resources available for ESP32 can significantly reduce development time.
Edwin Chen 2.1 30
Dilisi S 116.1 31 The LTS5's HMI touch screen supports **drag-and-drop** design, allowing developers to use SquareLine to easily customize the display UI for various applications.
Edwin Chen 2.1 32
Dilisi S 116.1 33 The LA66 LoRa module can be programmed to support either private LoRa protocols or the LoRaWAN protocol.
Edwin Chen 2.1 34
35 == 1.2  Features ==
36
Xiaoling 115.1 37
Edwin Chen 55.1 38 * ESP32-WROOM MCU: 8MB RAM & 16MB ROM
39 * Dragino LA66 LoRa Module
Edwin Chen 4.2 40 * Support Private LoRa protocol or LoRaWAN protocol
41 * Support WiFi & BLE wireless protocol
42 * 5.0" HMI touch screen
Edwin Chen 4.6 43 * Support LVGL case. SquareLine program.
Edwin Chen 4.2 44 * Support RS485 Interface
45 * Open Source Project
Edwin Chen 2.1 46 * Wall Attachable.
Edwin Chen 4.2 47 * 5V DC power
Edwin Chen 2.1 48 * IP Rating: IP52
49
Dilisi S 116.1 50 == 1.3  Specifications ==
Edwin Chen 2.1 51
Xiaoling 56.1 52
Edwin Chen 4.9 53 **LoRa**:
54
Edwin Chen 55.1 55 * Frequency Range: 870 MHz ~~ 960 MHz
56 * TCXO crystal to ensure RF performance on low temperature
57 * Maximum Power +22 dBm constant RF output
58 * High sensitivity: -148 dBm
59 * LoRa Tx Current: <90 mA at +17 dBm, 108 mA at +22 dBm
60 * LoRa Rx current: <9 mA
Edwin Chen 4.9 61
Edwin Chen 4.7 62 **WiFi:**
63
64 * 802.11b/g/n
65 * Up to 150 Mbps data rate in 802.11n mode
66 * Support A-MPDU and A-MSDU aggregation
67 * zero point four μ S protection interval
68 * Working channel center frequency range: 2412~~2484 MHz
69
70 **Bluetooth:**
71
72 * Bluetooth V4.2 BR/EDR and Bluetooth LE standard
73 * Class-1, Class-2, and Class-3 transmitters.
74 * AFH
75 * CVSD and SBC
76
Edwin Chen 4.2 77 **Display:**
Edwin Chen 2.1 78
Edwin Chen 4.9 79 * 5.0 Inch , 800 x 480
80 * IPS Capacitive Touch SCreen
Edwin Chen 4.11 81 * RGB color.
82 * Display Area: 120.7*75.80 mm
Edwin Chen 2.1 83
84 == 1.4  Power Consumption ==
85
Xiaoling 56.1 86
Edwin Chen 4.5 87 * External 5V DC power adapter
Edwin Chen 2.1 88
89 == 1.5  Storage & Operation Temperature ==
90
Xiaoling 56.1 91
Edwin Chen 4.10 92 * Operation Temperature: -20 ~~ 70°C  (No Dew)
93 * Storage Temperature: -30 ~~ 70°C  (No Dew)
Edwin Chen 2.1 94
95 == 1.6  Applications ==
96
Xiaoling 56.1 97
Edwin Chen 2.1 98 * Smart Buildings & Home Automation
99 * Logistics and Supply Chain Management
100 * Smart Metering
101 * Smart Agriculture
102 * Smart Cities
103 * Smart Factory
104
BoYang Xie 51.2 105 = 2.  Getting Started with Hello World =
Edwin Chen 2.1 106
Edwin Chen 5.1 107 == 2.1  About this demo ==
Edwin Chen 2.1 108
Xiaoling 56.1 109
Dilisi S 117.1 110 This getting started example demonstrates how to design and deploy a simple display UI for the LTS5 device. The example includes:
Edwin Chen 2.1 111
Dilisi S 117.1 112 * Creating a basic UI with a single button.
113 * Implementing functionality to navigate the Web UI to a new page when the button is clicked.
114 * Uploading the UI to the LTS5 device.
Xiaoling 56.1 115
Dilisi S 117.1 116
117 By completing this demo, you will gain foundational knowledge for customizing the LTS5 interface and building more advanced IoT applications.
118
119
Edwin Chen 5.1 120 == 2.2  Install Software Running Environment ==
Edwin Chen 2.1 121
Xiaoling 115.1 122
Dilisi S 117.1 123 The **ESP MCU** supports development using **ESP-IDF**, **Arduino**, or **MicroPython**. For this project, we use **ESP-IDF** for compilation and **Visual Studio Code (VS Code)** as the development environment.
Edwin Chen 2.1 124
Xiaoling 115.1 125
BoYang Xie 26.2 126 === 2.2.1 Install VSCode and ESP-IDF extension ===
127
Xiaoling 56.1 128
BoYang Xie 26.2 129 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]].
130
131 Next, you need to install the ESP-IDF extension within VSCode. The detailed operation steps are illustrated in image 1.
132
BoYang Xie 51.2 133 [[image:image-20240928110211-5.png||height="508" width="866"]]
134
BoYang Xie 26.2 135 image 1 ESP-IDF extension install
136
137 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]]
138
Xiaoling 56.1 139
Edwin Chen 5.1 140 === 2.2.2 Install SquareLine Studio ===
Edwin Chen 2.1 141
Xiaoling 56.1 142
BoYang Xie 26.2 143 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 144
BoYang Xie 26.2 145 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 146
Xiaoling 56.1 147
BoYang Xie 26.2 148 == 2.3 Simple usage of SquareLine Studio and export UI code ==
Edwin Chen 2.1 149
Xiaoling 56.1 150
BoYang Xie 26.2 151 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 152
BoYang Xie 51.2 153 [[image:image-20240928103357-2.png||height="680" width="708"]]
BoYang Xie 28.2 154
BoYang Xie 51.2 155 image 2 create a SquareLine project
BoYang Xie 26.2 156
157 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.
158
159 [[image:1727229582471-566.png]]
160
161 image 3 project settings
162
BoYang Xie 51.2 163 [[image:image-20240928105309-4.png||height="526" width="556"]]
164
BoYang Xie 26.2 165 image 4 modify project settings
166
BoYang Xie 51.2 167 Now we can start to use this software. Here are some usage information for this software.
BoYang Xie 26.2 168
Xiaoling 56.1 169 **~1. add widget**
BoYang Xie 26.2 170
BoYang Xie 51.2 171 To add a widget, you should click a widget you want to add at the area entitled “Widgets”. In image , demonstrate a add process of label, button, and image 5.
BoYang Xie 26.2 172
BoYang Xie 51.2 173 [[image:image-20240928111412-6.png||height="526" width="864"]]
BoYang Xie 26.2 174
BoYang Xie 51.2 175 image 5 add widgets
BoYang Xie 26.2 176
Xiaoling 56.1 177 **2. modify widget**
BoYang Xie 26.2 178
BoYang Xie 51.2 179 The area for modifying widgets is called "Inspector". There are four parts in the "Inspector" tab. We use three of them more frequently, excluding "COMPONENT". The second part is aimed at adjusting the layout, size, position, alignment, flags, and states, etc. of widgets. The name of the second part indicates the type of widget it is representing, and in image 6, it is "BUTTON".
BoYang Xie 26.2 180
BoYang Xie 51.2 181 [[image:1727485118799-984.png]]
BoYang Xie 26.2 182
BoYang Xie 51.2 183 image 6 the button widget's "Inspector" tab
BoYang Xie 26.2 184
BoYang Xie 51.2 185 Second part: "Layout" means a auto position-management for widgets contained in the parent widget. "Transform" includes size, position and align modification.
BoYang Xie 26.2 186
BoYang Xie 51.2 187 [[image:1727485251053-655.png]]
BoYang Xie 26.2 188
BoYang Xie 51.2 189 image 7 the button widget's "BUTTON" tab
BoYang Xie 26.2 190
BoYang Xie 51.2 191 Third part: It is an area of style setting.
BoYang Xie 26.2 192
BoYang Xie 54.1 193 Fourth part: It is an area for adding events. In image 8, it is adding a click event to a button. If the button is clicked after the click event is added as shown in image 8, the current screen will fade into another specified screen, and the switching process will last 500ms.
BoYang Xie 26.2 194
BoYang Xie 51.2 195 [[image:1727485480434-713.png||height="395" width="290"]]
BoYang Xie 26.2 196
BoYang Xie 51.2 197 image 8 add event for button
198
Xiaoling 56.1 199 **3. change label widget content**
BoYang Xie 51.2 200
BoYang Xie 54.1 201 Modify the content in text as shown in image 9, the text content of label widget will be changed accordingly.
BoYang Xie 51.2 202
203 [[image:image-20240928090825-1.png||height="327" width="391"]]
204
205 image 9 modify text content of label widget
206
Xiaoling 56.1 207 **4. Add image into project**
BoYang Xie 51.2 208
209 To use the image widget, you should first add an image to your project. The image format must be PNG, and its resolution should not exceed 800x480 pixels. There are two ways to add an image file. One way is to move your image into the folder "…/squareline project/assets/", as shown in image 10. The other way is to click the "ADD FILE INTO ASSETS" button, then select an image from your computer to import. After adding, you can see the image in the "assets" area in SquareLine Studio, as demonstrated in image 11.
210
211 [[image:image-20240928113424-9.png||height="355" width="505"]]
212
213 image 10 add image file into SquareLine Studio project
214
215 [[image:image-20240928114139-10.png||height="559" width="810"]]
216
217 image 11 use image widget in SquareLine Studio
218
Xiaoling 56.1 219 **5. The relationship between widgets**
BoYang Xie 51.2 220
221 There are two common relationships between widgets: one is parallel, the other is parent-child. The parallel relationship means that widgets' relative position is based on a collective object of reference. In parent-child relationship, the parts of the child object that are outside the boundaries of the parent object are not visible by default. Therefore, we need to adjust the position of the child object so that it falls within the range of the parent object, allowing it to be seen as illustrated in image 13.
222
223 [[image:1727486567182-334.png||height="318" width="278"]]
224
225 image 12 move label1 to make label1 widget be a child of button1 widget(1)
226
227 [[image:image-20240928112001-8.png||height="431" width="796"]]
228
229 image 13 move label1 to make label1 widget be a child of button1 widget(2)
230
Xiaoling 56.1 231 **6. Preview the final effect**
BoYang Xie 51.2 232
233 An advantage of this kind of software is that you can edit the UI with quick previews. In other words, it provides a way of combining graphical programming with simulation immediately.
234
235 [[image:1727487368023-281.png]]
236
237 image 14 click on the triangle icon to start or end the simulation
238
239 For more detailed usage, please visit the official link: [[SquareLine Studio 1.4.2 Documentation ~| SquareLine Studio>>url:https://docs.squareline.io/docs/squareline/]].
240
241
BoYang Xie 26.2 242 == 2.4 Integrate UI Code to ESP-IDF Project ==
243
Xiaoling 56.1 244
BoYang Xie 26.2 245 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.
246
247 [[image:1727229798126-306.png]]
248
BoYang Xie 51.2 249 image 15 export UI file
BoYang Xie 26.2 250
BoYang Xie 51.2 251 [[image:1727229821582-258.png||height="333" width="662"]]
BoYang Xie 26.2 252
BoYang Xie 51.2 253 image 16 exported UI file
BoYang Xie 26.2 254
BoYang Xie 51.2 255 Create a empty directory entitled "ui" in path "basic_prj/app_components/ui/", and then copy all UI code exported to this directory.
BoYang Xie 26.2 256
BoYang Xie 54.1 257 [[image:image-20240928144830-11.png]]
BoYang Xie 26.2 258
BoYang Xie 51.2 259 image 17 open CMakeLists.txt
BoYang Xie 26.2 260
BoYang Xie 51.2 261 [[image:1727229892636-154.png||height="521" width="407"]]
BoYang Xie 26.2 262
BoYang Xie 51.2 263 image 18 modify CMakeLists.txt
BoYang Xie 26.2 264
265 The last step of integrating is adding two lines of code in main.c file.
266
267 [[image:1727229926561-300.png]]
268
BoYang Xie 51.2 269 image 19 add "ui.h"
BoYang Xie 26.2 270
271 [[image:1727229955611-607.png]]
272
BoYang Xie 51.2 273 image 20 add "ui_init()"
BoYang Xie 26.2 274
Xiaoling 56.1 275
BoYang Xie 51.2 276 == 2.5 Brief introduction of hello world project ==
Edwin Chen 2.1 277
Xiaoling 56.1 278
BoYang Xie 51.2 279 The project consists of two screens. The first screen displays the company's logo, the project name, and a button to navigate to the next screen. The second screen presents some information about this HMI screen product through an image and includes a button to return to the previous screen.
280
Xiaoling 56.1 281
BoYang Xie 51.2 282 == 2.6 Test Result ==
283
Xiaoling 56.1 284
BoYang Xie 26.2 285 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 286
BoYang Xie 51.2 287 [[image:1727488067077-684.png||height="402" width="574"]]
BoYang Xie 26.2 288
BoYang Xie 51.2 289 image 21 screen1
BoYang Xie 26.2 290
BoYang Xie 51.2 291 [[image:1727488157579-949.png||height="397" width="572"]]
BoYang Xie 26.2 292
BoYang Xie 51.2 293 image 22 screen2
BoYang Xie 26.2 294
Xiaoling 56.1 295
Edwin Chen 5.1 296 = 3. Example Project 1: LoRa Central Display =
Edwin Chen 2.1 297
Edwin Chen 7.1 298 [[image:image-20240916101737-1.png||height="468" width="683"]]
Edwin Chen 2.1 299
Edwin Chen 7.1 300
Edwin Chen 8.1 301 = 4. Example Project 2: LoRaWAN RS485 Alarm =
Edwin Chen 2.1 302
BoYang Xie 75.1 303 = 5.  The way to add a new panel to project =
Edwin Chen 2.1 304
BoYang Xie 113.2 305 **~1. Design a panel in SquareLine Studio, using image 5.1 below as a reference.**
BoYang Xie 75.1 306
307 [[image:image-20241121113445-1.png||height="584" width="934"]]
308
309 image 5.1 a panel about water_leak
310
BoYang Xie 113.2 311 **2. Export the ui file.** You need  to adjust the export path first, then click "Export->Export UI Files". This step had been introduced before. Then you can get the ui files as shown in image 5.2.
BoYang Xie 75.1 312
313 [[image:image-20241121141120-4.png||height="383" width="795"]]
314
315 image 5.2 ui files exported
316
BoYang Xie 113.2 317 **3. Delete or rename some file.** Here are the steps:
BoYang Xie 75.1 318
BoYang Xie 113.2 319 Step1 Delete the 'components' directory.
320 Step2 Delete 'filelist.txt'.
321 Step3 Delete 'ui_helpers.c' and 'ui_helpers.h'.
322 Step4 Rename 'ui_ScreenMain.c' in the 'screens' directory to 'ui_water_leak_style.c'.
323 Step5 Rename the 'screens' directory to 'styles'.
BoYang Xie 75.1 324
325 [[image:image-20241121151934-10.png||height="303" width="792"]]
326
BoYang Xie 113.2 327 image 5.3 rest file (1)
BoYang Xie 75.1 328
329 [[image:image-20241121142925-7.png||height="141" width="793"]]
330
BoYang Xie 113.2 331 image 5.4 rest file (2)
BoYang Xie 75.1 332
BoYang Xie 113.2 333 **4. Open this project in vscode.**
BoYang Xie 75.1 334
335 5. Add file include path about water_leak in extra_lib/CMakeLists.txt as shown in image 5.5, 5.6, and its format is similar to the tem_hum or door.
336
337 [[image:image-20241121181957-17.png||height="438" width="516"]]
338
BoYang Xie 113.2 339 image 5.5 extra_lib/CMakeLists.txt before add
BoYang Xie 75.1 340
341 [[image:image-20241121182239-18.png||height="520" width="518"]]
342
BoYang Xie 113.2 343 image 5.6 extra_lib/CMakeLists.txt after add
BoYang Xie 75.1 344
BoYang Xie 113.2 345 **6. Modify header file include in fonts and images directory.** Open the fonts/ui_font_Font12.c file, as shown in image 5.7, then modify the '#include "../ui.h"' to '#include "../ui_water_leak.h"', the image 5.8 is the modified image. Other font file need to be modified in same way.
BoYang Xie 75.1 346
347 [[image:image-20241121171629-11.png]]
348
BoYang Xie 113.2 349 image 5.7 before-modified font file
BoYang Xie 75.1 350
351 [[image:image-20241121171901-12.png]]
352
353 image 5.8 modified font file
354
355 Open the images/ui_img_battery_empty_png.c file, as shown in image 5.9, then modify the '#include "../ui.h"' to '#include "../ui_water_leak.h"', the image 5.10 is the modified image. Other image file need to be modified in same way.
356
357 [[image:image-20241121172714-13.png]]
358
359 image 5.9 before-modified image file
360
361 [[image:image-20241121172908-14.png]]
362
363 image 5.10 modified image file
364
BoYang Xie 113.2 365 **7. Modify the ui_water_leak/CMakeLists.txt.** Open this file, and modify it from image 5.11 to image 5.12.
BoYang Xie 75.1 366
367 [[image:image-20241121180030-15.png]]
368
BoYang Xie 113.2 369 image 5.11 ui_water_leak/CMakeLists.txt before modification
BoYang Xie 75.1 370
371 [[image:image-20241121180517-16.png]]
372
BoYang Xie 113.2 373 image 5.12 ui_water_leak/CMakeLists.txt after modification
BoYang Xie 75.1 374
BoYang Xie 113.2 375 **8. Modify ui_water_leak.h file.** The image 5.13, 5.14 show the code before modification, and the image 5.15, 5.16 show the code after modification.
BoYang Xie 75.1 376
BoYang Xie 113.2 377 [[image:image-20241122094200-23.png]]
BoYang Xie 75.1 378
BoYang Xie 113.2 379 image 5.13 ui_water_leak.h (1) before modification
BoYang Xie 75.1 380
BoYang Xie 113.2 381 [[image:image-20241122094320-24.png||height="852" width="554"]]
BoYang Xie 75.1 382
BoYang Xie 113.2 383 image 5.14 ui_water_leak.h (2) before modification
BoYang Xie 75.1 384
BoYang Xie 113.2 385 [[image:image-20241122094600-25.png||height="1078" width="554"]]
BoYang Xie 75.1 386
BoYang Xie 113.2 387 image 5.15 ui_water_leak.h (1) after modification
BoYang Xie 75.1 388
BoYang Xie 113.2 389 [[image:image-20241122094719-26.png||height="941" width="583"]]
BoYang Xie 75.1 390
BoYang Xie 113.2 391 image 5.16 ui_water_leak.h (2) before modification
BoYang Xie 75.1 392
BoYang Xie 113.2 393 **9. Modify ui_water_leak.c file.** The image 5.17, 5.18, 5.19 show the code before modification, and the image 5.20, 5.21, 5.22 show the code after modification.
BoYang Xie 75.1 394
BoYang Xie 113.2 395 _ui_flag_modify( ((lv_obj_t *)(e->user_data)), LV_OBJ_FLAG_HIDDEN, _UI_MODIFY_FLAG_TOGGLE);  This code replaces 4 lines of code in ui_water_leak.c, so it is pasted here for convenience.
BoYang Xie 75.1 396
BoYang Xie 113.2 397 [[image:image-20241122102929-27.png||height="619" width="426"]]
398
399 image 5.17 ui_water_leak.c (1) before modification
400
401 [[image:image-20241122112838-30.png||height="551" width="628"]]
402
403 image 5.18 ui_water_leak.c (2) before modification
404
405 [[image:image-20241122110815-29.png||height="725" width="712"]]
406
407 image 5.19 ui_water_leak.c (3) before modification
408
409 [[image:image-20241122113158-31.png||height="872" width="677"]]
410
411 image 5.20 ui_water_leak.c (1) after modification
412
413 [[image:image-20241122113259-33.png||height="874" width="724"]]
414
415 image 5.21 ui_water_leak.c (2) after modification
416
417 [[image:image-20241122113359-34.png||height="804" width="746"]]
418
419 image 5.22 ui_water_leak.c (3) after modification
420
421 **10. Modify ui_water_leak_events.h file.** The image 5.23 show the code before modification, and the image 5.24 show the code after modification.
422
423 [[image:image-20241122134113-35.png||height="380" width="421"]]
424
425 image 5.23 ui_water_leak_events_.h before modification
426
427 [[image:image-20241122134420-37.png||height="201" width="283"]]
428
429 image 5.24 ui_water_leak_events_.h after modification
430
431 **11. Modify ui_water_leak_events.c file.** The image 5.25 show the code before modification, and the image 5.26 show the code after modification.
432
433 Step1. '#include "ui.h"'~-~->'#include "ui_water_leak.h"'
434
435 Step2. add code  below in delete_object() function definition.
436
437 panel_all * panel = find_upper_by_SensorPanel(&arr,((lv_obj_t *)(e->user_data~)~)~);
438
439 size_t index = panel->panel_obj_index;
440
441 deleteElement(&arr, index);
442
443 [[image:image-20241122135023-38.png||height="358" width="372"]]
444
445 image 5.25 ui_water_leak_events_.c before modification
446
447 [[image:image-20241122135258-39.png||height="403" width="559"]]
448
449 image 5.26 ui_water_leak_events_.c after modification
450
451 **12. Modify ui_water_leak_style.c file.**
452
453 Step1. '#include "../ui.h"'~-~->#include '"../ui_water_leak.h"'
454
455 add '#include "../../sort.h"'
456
457 add '#include "ui.h"'
458
459 [[image:image-20241122141536-41.png||height="361" width="612"]]
460
461 image 5.27 ui_water_leak_style.c (1) before modification
462
463 [[image:image-20241122142129-42.png||height="386" width="613"]]
464
465 image 5.28 ui_water_leak_style.c (1) after modification
466
467 Step2. modify 'void ui_ScreenMain_screen_init(void)'~-~->'panel_with_type create_water_leak(uint8_t index)'
468
469 delete code as shown in image 5.29
470
471 [[image:image-20241122145620-44.png||height="757" width="671"]]
472
473 image 5.29 ui_water_leak_style.c (2)
474
475 Step3. The image 5.30, 5.31 show the change.
476
477 [[image:image-20241122152026-45.png||height="277" width="828"]]
478
479 image 5.30 ui_water_leak_style.c (3) before modification
480
481 [[image:image-20241122152542-46.png||height="293" width="830"]]
482
483 image 5.31 ui_water_leak_style.c (3) after modification
484
485 Step4. Copy partly the code in ui_water_leak.c, paste at extra_lib/sort.h(The process is shown in image 5.32, 5.33).
486
487 [[image:image-20241122153958-47.png]]
488
489 image 5.32 ui_water_leak_style.c (4)
490
491 [[image:image-20241122154755-49.png||height="864" width="513"]]
492
493 image 5.33 ui_water_leak_style.c (4)
494
495 Step5. Delete event function in code which was just pasted in extra_lib/sort.h(The process is shown in image 5.34).
496
497 [[image:image-20241122155650-50.png||height="922" width="513"]]
498
499 image 5.34 ui_water_leak_style.c (5)
500
501 Step6. Add some lines of code in extra_lib/sort.h as shown in image 5.35.
502
503 [[image:image-20241122161934-51.png]]
504
505 image 5.35
506
507 Step7. Add a line of code in extra_lib/sort.h as shown in image 5.36.
508
509 [[image:image-20241122162852-53.png||height="330" width="529"]]
510
511 image 5.37
512
513 Step8. Add some code in ui_water_leak_style.c as shown in image 5.38 from line534 to line 576 in detail.
514
515 panel_with_type union_sensor;
516
517 union_sensor.panel_type = WATER_LEAK_TYPE;
518
519 ......
520
521 lv_obj_set_x(union_sensor.panel_union.door.ui_PanelSensorDoor, x_by_index(index));
522
523 lv_obj_set_y(union_sensor.panel_union.door.ui_PanelSensorDoor, y_by_index(index));
524
525 return union_sensor;
526
527 [[image:image-20241122171211-54.png||height="635" width="792"]]
528
529 image 5.38
530
531 **13. Modify sort.c file.**
532
533 Add a line of code ~-~-'#include "ui_water_leak.h"' as shown in image 5.39 line 16.
534
535 [[image:image-20241122173718-56.png||height="378" width="579"]]
536
537 image 5.39 sort.c (1)
538
539 There are still some changes need to be done in sort.c, and omit here for the moment.
540
541
Edwin Chen 2.1 542 = 6. FAQ =
543
Edwin Chen 7.1 544 == 6.1 ==
Edwin Chen 2.1 545
546
547 = 7. Order Info =
548
Edwin Chen 4.4 549 == 7.1  Part Number ==
Edwin Chen 2.1 550
Xiaoling 56.1 551
Edwin Chen 4.4 552 Part Number: (% style="color:#4472c4" %)LTS5
Edwin Chen 2.1 553
554
Edwin Chen 4.4 555 == 7.2  Packing Info ==
Edwin Chen 2.1 556
Xiaoling 56.1 557
Edwin Chen 4.4 558 **Package Includes**:
Edwin Chen 2.1 559
Edwin Chen 4.4 560 * LTS5 HMI Touch Screen
561 * 5V,2A DC Power Adapter.
562 * USB Type C Program Cable
Edwin Chen 2.1 563
564 = 8. Support =
565
Xiaoling 56.1 566
Edwin Chen 2.1 567 * 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.
568 * 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]].
569
570 = 9.  Reference material =
571
Xiaoling 56.1 572
Edwin Chen 4.2 573 * Datasheet
574 * Source Code
Edwin Chen 4.3 575 * Mechinical
Edwin Chen 2.1 576
577 = 10. FCC Warning =
578
579
580 This device complies with part 15 of the FCC Rules.Operation is subject to the following two conditions:
581
582 (1) This device may not cause harmful interference;
583
584 (2) this device must accept any interference received,including interference that may cause undesired operation.
585