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 By completing this demo, you will gain foundational knowledge for customizing the LTS5 interface and building more advanced IoT applications.
117
118
Edwin Chen 5.1 119 == 2.2  Install Software Running Environment ==
Edwin Chen 2.1 120
Xiaoling 115.1 121
Dilisi S 120.1 122 The **ESP MCU** supports development with **ESP-IDF**, **Arduino**, or **MicroPython**. We use **ESP-IDF** for compilation and **Visual Studio Code (VS Code)** as the development environment for this project.
Edwin Chen 2.1 123
Xiaoling 115.1 124
Dilisi S 120.1 125 === 2.2.1 Install VS Code and ESP-IDF extension ===
BoYang Xie 26.2 126
Xiaoling 56.1 127
Dilisi S 120.1 128 First, download and install **VS Code** for your operating system from the Visual Studio Code website: [[Visual Studio Code - Mac, Linux, Windows>>https://code.visualstudio.com/download]].
BoYang Xie 26.2 129
Dilisi S 120.1 130 Next, install the **ESP-IDF** extension within **VS Code**. Detailed steps for this process are shown in Image 1.
BoYang Xie 26.2 131
Dilisi S 120.1 132
BoYang Xie 51.2 133 [[image:image-20240928110211-5.png||height="508" width="866"]]
134
Dilisi S 120.1 135 Image 1: ESP-IDF extension install
BoYang Xie 26.2 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
Dilisi S 120.1 143 Download and install the latest version of [[SquareLine Studio>>https://squareline.io/downloads#lastRelease]] on your computer. It supports Windows, Linux, and Mac OS. The software version we are using here is 1.4.2.
Edwin Chen 2.1 144
Dilisi S 120.1 145 [[image:squareline.io_downloads.png]]
Edwin Chen 2.1 146
Xiaoling 56.1 147
Dilisi S 120.1 148 After installation, you can use SquareLine Studio as a trial version for 30 days without activation. Click **CONTINUE WITH TRIAL** to use the trial version, or click **LOG IN** to activate the software with your license key.
149
150 [[image:squalreline-trial.png||height="602" width="400"]]
151
152 The free version restricts usage to 1 component, 150 widgets, and 10 screens.
153
BoYang Xie 26.2 154 == 2.3 Simple usage of SquareLine Studio and export UI code ==
Edwin Chen 2.1 155
Xiaoling 56.1 156
BoYang Xie 26.2 157 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 158
BoYang Xie 51.2 159 [[image:image-20240928103357-2.png||height="680" width="708"]]
BoYang Xie 28.2 160
BoYang Xie 51.2 161 image 2 create a SquareLine project
BoYang Xie 26.2 162
163 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.
164
165 [[image:1727229582471-566.png]]
166
167 image 3 project settings
168
BoYang Xie 51.2 169 [[image:image-20240928105309-4.png||height="526" width="556"]]
170
BoYang Xie 26.2 171 image 4 modify project settings
172
BoYang Xie 51.2 173 Now we can start to use this software. Here are some usage information for this software.
BoYang Xie 26.2 174
Xiaoling 56.1 175 **~1. add widget**
BoYang Xie 26.2 176
BoYang Xie 51.2 177 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 178
BoYang Xie 51.2 179 [[image:image-20240928111412-6.png||height="526" width="864"]]
BoYang Xie 26.2 180
BoYang Xie 51.2 181 image 5 add widgets
BoYang Xie 26.2 182
Xiaoling 56.1 183 **2. modify widget**
BoYang Xie 26.2 184
BoYang Xie 51.2 185 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 186
BoYang Xie 51.2 187 [[image:1727485118799-984.png]]
BoYang Xie 26.2 188
BoYang Xie 51.2 189 image 6 the button widget's "Inspector" tab
BoYang Xie 26.2 190
BoYang Xie 51.2 191 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 192
BoYang Xie 51.2 193 [[image:1727485251053-655.png]]
BoYang Xie 26.2 194
BoYang Xie 51.2 195 image 7 the button widget's "BUTTON" tab
BoYang Xie 26.2 196
BoYang Xie 51.2 197 Third part: It is an area of style setting.
BoYang Xie 26.2 198
BoYang Xie 54.1 199 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 200
BoYang Xie 51.2 201 [[image:1727485480434-713.png||height="395" width="290"]]
BoYang Xie 26.2 202
BoYang Xie 51.2 203 image 8 add event for button
204
Xiaoling 56.1 205 **3. change label widget content**
BoYang Xie 51.2 206
BoYang Xie 54.1 207 Modify the content in text as shown in image 9, the text content of label widget will be changed accordingly.
BoYang Xie 51.2 208
209 [[image:image-20240928090825-1.png||height="327" width="391"]]
210
211 image 9 modify text content of label widget
212
Xiaoling 56.1 213 **4. Add image into project**
BoYang Xie 51.2 214
215 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.
216
217 [[image:image-20240928113424-9.png||height="355" width="505"]]
218
219 image 10 add image file into SquareLine Studio project
220
221 [[image:image-20240928114139-10.png||height="559" width="810"]]
222
223 image 11 use image widget in SquareLine Studio
224
Xiaoling 56.1 225 **5. The relationship between widgets**
BoYang Xie 51.2 226
227 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.
228
229 [[image:1727486567182-334.png||height="318" width="278"]]
230
231 image 12 move label1 to make label1 widget be a child of button1 widget(1)
232
233 [[image:image-20240928112001-8.png||height="431" width="796"]]
234
235 image 13 move label1 to make label1 widget be a child of button1 widget(2)
236
Xiaoling 56.1 237 **6. Preview the final effect**
BoYang Xie 51.2 238
239 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.
240
241 [[image:1727487368023-281.png]]
242
243 image 14 click on the triangle icon to start or end the simulation
244
245 For more detailed usage, please visit the official link: [[SquareLine Studio 1.4.2 Documentation ~| SquareLine Studio>>url:https://docs.squareline.io/docs/squareline/]].
246
247
BoYang Xie 26.2 248 == 2.4 Integrate UI Code to ESP-IDF Project ==
249
Xiaoling 56.1 250
BoYang Xie 26.2 251 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.
252
253 [[image:1727229798126-306.png]]
254
BoYang Xie 51.2 255 image 15 export UI file
BoYang Xie 26.2 256
BoYang Xie 51.2 257 [[image:1727229821582-258.png||height="333" width="662"]]
BoYang Xie 26.2 258
BoYang Xie 51.2 259 image 16 exported UI file
BoYang Xie 26.2 260
BoYang Xie 51.2 261 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 262
BoYang Xie 54.1 263 [[image:image-20240928144830-11.png]]
BoYang Xie 26.2 264
BoYang Xie 51.2 265 image 17 open CMakeLists.txt
BoYang Xie 26.2 266
BoYang Xie 51.2 267 [[image:1727229892636-154.png||height="521" width="407"]]
BoYang Xie 26.2 268
BoYang Xie 51.2 269 image 18 modify CMakeLists.txt
BoYang Xie 26.2 270
271 The last step of integrating is adding two lines of code in main.c file.
272
273 [[image:1727229926561-300.png]]
274
BoYang Xie 51.2 275 image 19 add "ui.h"
BoYang Xie 26.2 276
277 [[image:1727229955611-607.png]]
278
BoYang Xie 51.2 279 image 20 add "ui_init()"
BoYang Xie 26.2 280
Xiaoling 56.1 281
BoYang Xie 51.2 282 == 2.5 Brief introduction of hello world project ==
Edwin Chen 2.1 283
Xiaoling 56.1 284
BoYang Xie 51.2 285 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.
286
Xiaoling 56.1 287
BoYang Xie 51.2 288 == 2.6 Test Result ==
289
Xiaoling 56.1 290
BoYang Xie 26.2 291 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 292
BoYang Xie 51.2 293 [[image:1727488067077-684.png||height="402" width="574"]]
BoYang Xie 26.2 294
BoYang Xie 51.2 295 image 21 screen1
BoYang Xie 26.2 296
BoYang Xie 51.2 297 [[image:1727488157579-949.png||height="397" width="572"]]
BoYang Xie 26.2 298
BoYang Xie 51.2 299 image 22 screen2
BoYang Xie 26.2 300
Xiaoling 56.1 301
Edwin Chen 5.1 302 = 3. Example Project 1: LoRa Central Display =
Edwin Chen 2.1 303
Edwin Chen 7.1 304 [[image:image-20240916101737-1.png||height="468" width="683"]]
Edwin Chen 2.1 305
Edwin Chen 7.1 306
Edwin Chen 8.1 307 = 4. Example Project 2: LoRaWAN RS485 Alarm =
Edwin Chen 2.1 308
BoYang Xie 75.1 309 = 5.  The way to add a new panel to project =
Edwin Chen 2.1 310
BoYang Xie 113.2 311 **~1. Design a panel in SquareLine Studio, using image 5.1 below as a reference.**
BoYang Xie 75.1 312
313 [[image:image-20241121113445-1.png||height="584" width="934"]]
314
315 image 5.1 a panel about water_leak
316
BoYang Xie 113.2 317 **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 318
319 [[image:image-20241121141120-4.png||height="383" width="795"]]
320
321 image 5.2 ui files exported
322
BoYang Xie 113.2 323 **3. Delete or rename some file.** Here are the steps:
BoYang Xie 75.1 324
BoYang Xie 113.2 325 Step1 Delete the 'components' directory.
326 Step2 Delete 'filelist.txt'.
327 Step3 Delete 'ui_helpers.c' and 'ui_helpers.h'.
328 Step4 Rename 'ui_ScreenMain.c' in the 'screens' directory to 'ui_water_leak_style.c'.
329 Step5 Rename the 'screens' directory to 'styles'.
BoYang Xie 75.1 330
331 [[image:image-20241121151934-10.png||height="303" width="792"]]
332
BoYang Xie 113.2 333 image 5.3 rest file (1)
BoYang Xie 75.1 334
335 [[image:image-20241121142925-7.png||height="141" width="793"]]
336
BoYang Xie 113.2 337 image 5.4 rest file (2)
BoYang Xie 75.1 338
BoYang Xie 113.2 339 **4. Open this project in vscode.**
BoYang Xie 75.1 340
341 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.
342
343 [[image:image-20241121181957-17.png||height="438" width="516"]]
344
BoYang Xie 113.2 345 image 5.5 extra_lib/CMakeLists.txt before add
BoYang Xie 75.1 346
347 [[image:image-20241121182239-18.png||height="520" width="518"]]
348
BoYang Xie 113.2 349 image 5.6 extra_lib/CMakeLists.txt after add
BoYang Xie 75.1 350
BoYang Xie 113.2 351 **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 352
353 [[image:image-20241121171629-11.png]]
354
BoYang Xie 113.2 355 image 5.7 before-modified font file
BoYang Xie 75.1 356
357 [[image:image-20241121171901-12.png]]
358
359 image 5.8 modified font file
360
361 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.
362
363 [[image:image-20241121172714-13.png]]
364
365 image 5.9 before-modified image file
366
367 [[image:image-20241121172908-14.png]]
368
369 image 5.10 modified image file
370
BoYang Xie 113.2 371 **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 372
373 [[image:image-20241121180030-15.png]]
374
BoYang Xie 113.2 375 image 5.11 ui_water_leak/CMakeLists.txt before modification
BoYang Xie 75.1 376
377 [[image:image-20241121180517-16.png]]
378
BoYang Xie 113.2 379 image 5.12 ui_water_leak/CMakeLists.txt after modification
BoYang Xie 75.1 380
BoYang Xie 113.2 381 **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 382
BoYang Xie 113.2 383 [[image:image-20241122094200-23.png]]
BoYang Xie 75.1 384
BoYang Xie 113.2 385 image 5.13 ui_water_leak.h (1) before modification
BoYang Xie 75.1 386
BoYang Xie 113.2 387 [[image:image-20241122094320-24.png||height="852" width="554"]]
BoYang Xie 75.1 388
BoYang Xie 113.2 389 image 5.14 ui_water_leak.h (2) before modification
BoYang Xie 75.1 390
BoYang Xie 113.2 391 [[image:image-20241122094600-25.png||height="1078" width="554"]]
BoYang Xie 75.1 392
BoYang Xie 113.2 393 image 5.15 ui_water_leak.h (1) after modification
BoYang Xie 75.1 394
BoYang Xie 113.2 395 [[image:image-20241122094719-26.png||height="941" width="583"]]
BoYang Xie 75.1 396
BoYang Xie 113.2 397 image 5.16 ui_water_leak.h (2) before modification
BoYang Xie 75.1 398
BoYang Xie 113.2 399 **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 400
BoYang Xie 113.2 401 _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 402
BoYang Xie 113.2 403 [[image:image-20241122102929-27.png||height="619" width="426"]]
404
405 image 5.17 ui_water_leak.c (1) before modification
406
407 [[image:image-20241122112838-30.png||height="551" width="628"]]
408
409 image 5.18 ui_water_leak.c (2) before modification
410
411 [[image:image-20241122110815-29.png||height="725" width="712"]]
412
413 image 5.19 ui_water_leak.c (3) before modification
414
415 [[image:image-20241122113158-31.png||height="872" width="677"]]
416
417 image 5.20 ui_water_leak.c (1) after modification
418
419 [[image:image-20241122113259-33.png||height="874" width="724"]]
420
421 image 5.21 ui_water_leak.c (2) after modification
422
423 [[image:image-20241122113359-34.png||height="804" width="746"]]
424
425 image 5.22 ui_water_leak.c (3) after modification
426
427 **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.
428
429 [[image:image-20241122134113-35.png||height="380" width="421"]]
430
431 image 5.23 ui_water_leak_events_.h before modification
432
433 [[image:image-20241122134420-37.png||height="201" width="283"]]
434
435 image 5.24 ui_water_leak_events_.h after modification
436
437 **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.
438
439 Step1. '#include "ui.h"'~-~->'#include "ui_water_leak.h"'
440
441 Step2. add code  below in delete_object() function definition.
442
443 panel_all * panel = find_upper_by_SensorPanel(&arr,((lv_obj_t *)(e->user_data~)~)~);
444
445 size_t index = panel->panel_obj_index;
446
447 deleteElement(&arr, index);
448
449 [[image:image-20241122135023-38.png||height="358" width="372"]]
450
451 image 5.25 ui_water_leak_events_.c before modification
452
453 [[image:image-20241122135258-39.png||height="403" width="559"]]
454
455 image 5.26 ui_water_leak_events_.c after modification
456
457 **12. Modify ui_water_leak_style.c file.**
458
459 Step1. '#include "../ui.h"'~-~->#include '"../ui_water_leak.h"'
460
461 add '#include "../../sort.h"'
462
463 add '#include "ui.h"'
464
465 [[image:image-20241122141536-41.png||height="361" width="612"]]
466
467 image 5.27 ui_water_leak_style.c (1) before modification
468
469 [[image:image-20241122142129-42.png||height="386" width="613"]]
470
471 image 5.28 ui_water_leak_style.c (1) after modification
472
473 Step2. modify 'void ui_ScreenMain_screen_init(void)'~-~->'panel_with_type create_water_leak(uint8_t index)'
474
475 delete code as shown in image 5.29
476
477 [[image:image-20241122145620-44.png||height="757" width="671"]]
478
479 image 5.29 ui_water_leak_style.c (2)
480
481 Step3. The image 5.30, 5.31 show the change.
482
483 [[image:image-20241122152026-45.png||height="277" width="828"]]
484
485 image 5.30 ui_water_leak_style.c (3) before modification
486
487 [[image:image-20241122152542-46.png||height="293" width="830"]]
488
489 image 5.31 ui_water_leak_style.c (3) after modification
490
491 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).
492
493 [[image:image-20241122153958-47.png]]
494
495 image 5.32 ui_water_leak_style.c (4)
496
497 [[image:image-20241122154755-49.png||height="864" width="513"]]
498
499 image 5.33 ui_water_leak_style.c (4)
500
501 Step5. Delete event function in code which was just pasted in extra_lib/sort.h(The process is shown in image 5.34).
502
503 [[image:image-20241122155650-50.png||height="922" width="513"]]
504
505 image 5.34 ui_water_leak_style.c (5)
506
507 Step6. Add some lines of code in extra_lib/sort.h as shown in image 5.35.
508
509 [[image:image-20241122161934-51.png]]
510
511 image 5.35
512
513 Step7. Add a line of code in extra_lib/sort.h as shown in image 5.36.
514
515 [[image:image-20241122162852-53.png||height="330" width="529"]]
516
517 image 5.37
518
519 Step8. Add some code in ui_water_leak_style.c as shown in image 5.38 from line534 to line 576 in detail.
520
521 panel_with_type union_sensor;
522
523 union_sensor.panel_type = WATER_LEAK_TYPE;
524
525 ......
526
527 lv_obj_set_x(union_sensor.panel_union.door.ui_PanelSensorDoor, x_by_index(index));
528
529 lv_obj_set_y(union_sensor.panel_union.door.ui_PanelSensorDoor, y_by_index(index));
530
531 return union_sensor;
532
533 [[image:image-20241122171211-54.png||height="635" width="792"]]
534
535 image 5.38
536
537 **13. Modify sort.c file.**
538
539 Add a line of code ~-~-'#include "ui_water_leak.h"' as shown in image 5.39 line 16.
540
541 [[image:image-20241122173718-56.png||height="378" width="579"]]
542
543 image 5.39 sort.c (1)
544
545 There are still some changes need to be done in sort.c, and omit here for the moment.
546
547
Edwin Chen 2.1 548 = 6. FAQ =
549
Edwin Chen 7.1 550 == 6.1 ==
Edwin Chen 2.1 551
552
553 = 7. Order Info =
554
Edwin Chen 4.4 555 == 7.1  Part Number ==
Edwin Chen 2.1 556
Xiaoling 56.1 557
Edwin Chen 4.4 558 Part Number: (% style="color:#4472c4" %)LTS5
Edwin Chen 2.1 559
560
Edwin Chen 4.4 561 == 7.2  Packing Info ==
Edwin Chen 2.1 562
Xiaoling 56.1 563
Edwin Chen 4.4 564 **Package Includes**:
Edwin Chen 2.1 565
Edwin Chen 4.4 566 * LTS5 HMI Touch Screen
567 * 5V,2A DC Power Adapter.
568 * USB Type C Program Cable
Edwin Chen 2.1 569
570 = 8. Support =
571
Xiaoling 56.1 572
Edwin Chen 2.1 573 * 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.
574 * 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]].
575
576 = 9.  Reference material =
577
Xiaoling 56.1 578
Edwin Chen 4.2 579 * Datasheet
580 * Source Code
Edwin Chen 4.3 581 * Mechinical
Edwin Chen 2.1 582
583 = 10. FCC Warning =
584
585
586 This device complies with part 15 of the FCC Rules.Operation is subject to the following two conditions:
587
588 (1) This device may not cause harmful interference;
589
590 (2) this device must accept any interference received,including interference that may cause undesired operation.
591
Copyright ©2010-2024 Dragino Technology Co., LTD. All rights reserved
Dragino Wiki v2.0