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
Dilisi S 122.1 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 121.1 148 After installation, you can use SquareLine Studio with a **PERSONAL license plan**. Click **LOG IN** and create a free account using your email address. Then activate your PERSONAL license plan for free. You don’t need to provide any credit card information. However, the PERSONAL license plan has the following limitations:
Dilisi S 120.1 149
Dilisi S 121.1 150 * Max. 10 screens
151 * Max. 150 widgets
152 * Max. 5 global colors
153 * Max. 2 themes
154 * Max. 1 component
Dilisi S 120.1 155
Dilisi S 121.1 156 == 2.3 Simple usage of SquareLine Studio and exporting UI code ==
Edwin Chen 2.1 157
Xiaoling 56.1 158
Dilisi S 121.1 159 After launching and logging into the software, create a new project as shown in Image 2.
Edwin Chen 2.1 160
Dilisi S 121.1 161 * Select the major **LVGL** version as **8.3**.
162 * Select the **Desktop** tab.
163 * Select  **Eclipse with  SDL for  development on PC**:
164 * In the **PROJECT SETTINGS**, select **LVGL version** **8.3.11**
165 * Select the **CREATE **button.
166
BoYang Xie 51.2 167 [[image:image-20240928103357-2.png||height="680" width="708"]]
BoYang Xie 28.2 168
Dilisi S 121.1 169 Image 2: Creating a new SquareLine project
BoYang Xie 26.2 170
171
Dilisi S 121.1 172 Next, you need to configure some settings for this project. By clicking in the specified order shown in Image 3, you will be directed to the page displayed in Image 4.
173
Dilisi S 123.1 174 * Select** File  -> Project Settings**
Dilisi S 121.1 175
BoYang Xie 26.2 176 [[image:1727229582471-566.png]]
177
Dilisi S 121.1 178 Image 3 accessing project settings
BoYang Xie 26.2 179
Dilisi S 121.1 180
181 In the PROJECT SETTINGS dialog box, configure/modify the project settings:
182
183 * **UI Files Export Root**: Select a folder on your computer to store the UI files.
184 * **LVGL Include Path**: Set this to **lvgl.h**
185 * **Click on the APPLY CHANGES button.**
186
BoYang Xie 51.2 187 [[image:image-20240928105309-4.png||height="526" width="556"]]
188
Dilisi S 121.1 189 Image 4 Configure/modify project settings
BoYang Xie 26.2 190
191
Dilisi S 122.1 192 Now you can start building the sample UI. Follow the steps below:
Dilisi S 121.1 193
194
Xiaoling 123.2 195 === **Add widgets** ===
BoYang Xie 26.2 196
Xiaoling 123.2 197
Dilisi S 122.1 198 To add widgets navigate to the **Widgets** area, then click on the widgets you want to add. The selected widgets will be added to the screen. You can reposition the widgets in the screen area by clicking and dragging them.
BoYang Xie 26.2 199
Dilisi S 122.1 200 Add a Label, Button, and Image to the screen as shown in **Image 5**.
201
BoYang Xie 51.2 202 [[image:image-20240928111412-6.png||height="526" width="864"]]
BoYang Xie 26.2 203
Dilisi S 122.1 204 Image 5: Add widgets
BoYang Xie 26.2 205
206
Xiaoling 123.2 207 === **Modify widget properties** ===
208
209
Dilisi S 122.1 210 The area for modifying widgets is called the **Inspector** tab. The Inspector tab consists of four sections: **COMPONENT**, **<WIDGET>**, **STYLE SETTINGS**, and **EVENTS**, as shown in Image 6.
BoYang Xie 26.2 211
Dilisi S 122.1 212 The second section allows you to adjust a widget's layout, size, position, alignment, flags, states, and more. When you select a widget on the screen, the name of this section changes to match the name of the selected widget.
213
BoYang Xie 51.2 214 [[image:1727485118799-984.png]]
BoYang Xie 26.2 215
Dilisi S 122.1 216 Image 6: The button widget's "Inspector" tab
BoYang Xie 26.2 217
218
Xiaoling 123.2 219 ==== **Changing the Button properties** ====
Dilisi S 122.1 220
Xiaoling 123.2 221
Dilisi S 123.1 222 Click the Button.
Dilisi S 122.1 223
Dilisi S 123.1 224 Under the "Layout" you can change the button's position and size.
Dilisi S 122.1 225
BoYang Xie 51.2 226 [[image:1727485251053-655.png]]
BoYang Xie 26.2 227
Dilisi S 123.1 228 Image 7: The button widget's "BUTTON" tab
BoYang Xie 26.2 229
Dilisi S 122.1 230
Dilisi S 123.1 231 Next, add a click event to the button. When the button is clicked, an event should trigger to change the current screen (Screen1) to a new screen (Screen2) with a fade effect and the transition from Screen1 to Screen2 should take 500ms.
BoYang Xie 26.2 232
Dilisi S 123.1 233 * Click **ADD EVENT** button.
234 * Select **CLICKED** under the Trigger.
235 * Select **Screen2** from **Screen to**.
236 * Select **FADE ON** from **Fade mode**.
237 * Enter **500** in the **Speed** text box.
238 * Finally, click **ADD** button.
BoYang Xie 26.2 239
BoYang Xie 51.2 240 [[image:1727485480434-713.png||height="395" width="290"]]
BoYang Xie 26.2 241
Xiaoling 123.2 242 Image 8: Add an event for the button
BoYang Xie 51.2 243
244
Xiaoling 123.2 245 ==== **Changing the label properties** ====
BoYang Xie 51.2 246
Xiaoling 123.2 247
Dilisi S 123.1 248 Click the label. Under the **Label** section, type "Click For Detail" in the **Text** textbox.
Dilisi S 122.1 249
BoYang Xie 51.2 250 [[image:image-20240928090825-1.png||height="327" width="391"]]
251
Dilisi S 122.1 252 Image 9:  Modify text of label widget
BoYang Xie 51.2 253
254
Xiaoling 123.2 255 ==== **Changing image properties** ====
Dilisi S 122.1 256
Xiaoling 123.2 257
BoYang Xie 51.2 258 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.
259
260 [[image:image-20240928113424-9.png||height="355" width="505"]]
261
262 image 10 add image file into SquareLine Studio project
263
264 [[image:image-20240928114139-10.png||height="559" width="810"]]
265
266 image 11 use image widget in SquareLine Studio
267
268
Xiaoling 123.2 269 ==== **The relationship between widgets** ====
BoYang Xie 51.2 270
Xiaoling 123.2 271
Dilisi S 123.1 272 Widgets commonly have two types of relationships: **parallel** and **parent-child**.
273
274 * In a **parallel relationship**, widgets' positions are determined relative to a shared reference object.
275 * In a **parent-child relationship**, any part of the child object outside the parent's boundaries is hidden by default. To make the child object fully visible, you must adjust its position to fit within the parent's range, as shown in Image 13.
276
BoYang Xie 51.2 277 [[image:1727486567182-334.png||height="318" width="278"]]
278
279
Dilisi S 123.1 280 Move **Label1** to make it a child of **Button1**. See Image 13.
281
BoYang Xie 51.2 282 [[image:image-20240928112001-8.png||height="431" width="796"]]
283
Dilisi S 123.1 284 Image 13: Move Label1 to make it a child of Button1.
BoYang Xie 51.2 285
286
Xiaoling 123.2 287 ==== **Preview the screen** ====
BoYang Xie 51.2 288
Xiaoling 123.2 289
Dilisi S 123.1 290 You can test the result by clicking on the **PLAY** button. The screen will change into play mode. See Image 14.
Dilisi S 122.1 291
BoYang Xie 51.2 292 [[image:1727487368023-281.png]]
293
Dilisi S 123.1 294 Image 14: Simulating the project
BoYang Xie 51.2 295
296
Dilisi S 123.1 297 For more information, please visit the official link: [[SquareLine Studio 1.4.2 Documentation ~| SquareLine Studio>>url:https://docs.squareline.io/docs/squareline/]].
BoYang Xie 51.2 298
Dilisi S 123.1 299
BoYang Xie 26.2 300 == 2.4 Integrate UI Code to ESP-IDF Project ==
301
Xiaoling 56.1 302
BoYang Xie 26.2 303 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.
304
305 [[image:1727229798126-306.png]]
306
BoYang Xie 51.2 307 image 15 export UI file
BoYang Xie 26.2 308
BoYang Xie 51.2 309 [[image:1727229821582-258.png||height="333" width="662"]]
BoYang Xie 26.2 310
BoYang Xie 51.2 311 image 16 exported UI file
BoYang Xie 26.2 312
BoYang Xie 51.2 313 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 314
BoYang Xie 54.1 315 [[image:image-20240928144830-11.png]]
BoYang Xie 26.2 316
BoYang Xie 51.2 317 image 17 open CMakeLists.txt
BoYang Xie 26.2 318
BoYang Xie 51.2 319 [[image:1727229892636-154.png||height="521" width="407"]]
BoYang Xie 26.2 320
BoYang Xie 51.2 321 image 18 modify CMakeLists.txt
BoYang Xie 26.2 322
323 The last step of integrating is adding two lines of code in main.c file.
324
325 [[image:1727229926561-300.png]]
326
BoYang Xie 51.2 327 image 19 add "ui.h"
BoYang Xie 26.2 328
329 [[image:1727229955611-607.png]]
330
BoYang Xie 51.2 331 image 20 add "ui_init()"
BoYang Xie 26.2 332
Xiaoling 56.1 333
BoYang Xie 51.2 334 == 2.5 Brief introduction of hello world project ==
Edwin Chen 2.1 335
Xiaoling 56.1 336
BoYang Xie 51.2 337 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.
338
Xiaoling 56.1 339
BoYang Xie 51.2 340 == 2.6 Test Result ==
341
Xiaoling 56.1 342
BoYang Xie 26.2 343 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 344
BoYang Xie 51.2 345 [[image:1727488067077-684.png||height="402" width="574"]]
BoYang Xie 26.2 346
BoYang Xie 51.2 347 image 21 screen1
BoYang Xie 26.2 348
BoYang Xie 51.2 349 [[image:1727488157579-949.png||height="397" width="572"]]
BoYang Xie 26.2 350
BoYang Xie 51.2 351 image 22 screen2
BoYang Xie 26.2 352
Xiaoling 56.1 353
Edwin Chen 5.1 354 = 3. Example Project 1: LoRa Central Display =
Edwin Chen 2.1 355
Edwin Chen 7.1 356 [[image:image-20240916101737-1.png||height="468" width="683"]]
Edwin Chen 2.1 357
Edwin Chen 7.1 358
Edwin Chen 8.1 359 = 4. Example Project 2: LoRaWAN RS485 Alarm =
Edwin Chen 2.1 360
Xiaoling 123.2 361 = 5. The way to add a new panel to project =
Edwin Chen 2.1 362
Xiaoling 123.2 363
BoYang Xie 113.2 364 **~1. Design a panel in SquareLine Studio, using image 5.1 below as a reference.**
BoYang Xie 75.1 365
366 [[image:image-20241121113445-1.png||height="584" width="934"]]
367
368 image 5.1 a panel about water_leak
369
Xiaoling 123.2 370
BoYang Xie 113.2 371 **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 372
373 [[image:image-20241121141120-4.png||height="383" width="795"]]
374
375 image 5.2 ui files exported
376
Xiaoling 123.2 377
BoYang Xie 113.2 378 **3. Delete or rename some file.** Here are the steps:
BoYang Xie 75.1 379
BoYang Xie 113.2 380 Step1 Delete the 'components' directory.
381 Step2 Delete 'filelist.txt'.
382 Step3 Delete 'ui_helpers.c' and 'ui_helpers.h'.
383 Step4 Rename 'ui_ScreenMain.c' in the 'screens' directory to 'ui_water_leak_style.c'.
384 Step5 Rename the 'screens' directory to 'styles'.
BoYang Xie 75.1 385
386 [[image:image-20241121151934-10.png||height="303" width="792"]]
387
BoYang Xie 113.2 388 image 5.3 rest file (1)
BoYang Xie 75.1 389
390 [[image:image-20241121142925-7.png||height="141" width="793"]]
391
BoYang Xie 113.2 392 image 5.4 rest file (2)
BoYang Xie 75.1 393
BoYang Xie 113.2 394 **4. Open this project in vscode.**
BoYang Xie 75.1 395
396 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.
397
398 [[image:image-20241121181957-17.png||height="438" width="516"]]
399
BoYang Xie 113.2 400 image 5.5 extra_lib/CMakeLists.txt before add
BoYang Xie 75.1 401
402 [[image:image-20241121182239-18.png||height="520" width="518"]]
403
BoYang Xie 113.2 404 image 5.6 extra_lib/CMakeLists.txt after add
BoYang Xie 75.1 405
BoYang Xie 113.2 406 **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 407
408 [[image:image-20241121171629-11.png]]
409
BoYang Xie 113.2 410 image 5.7 before-modified font file
BoYang Xie 75.1 411
412 [[image:image-20241121171901-12.png]]
413
414 image 5.8 modified font file
415
416 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.
417
418 [[image:image-20241121172714-13.png]]
419
420 image 5.9 before-modified image file
421
422 [[image:image-20241121172908-14.png]]
423
424 image 5.10 modified image file
425
BoYang Xie 113.2 426 **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 427
428 [[image:image-20241121180030-15.png]]
429
BoYang Xie 113.2 430 image 5.11 ui_water_leak/CMakeLists.txt before modification
BoYang Xie 75.1 431
432 [[image:image-20241121180517-16.png]]
433
BoYang Xie 113.2 434 image 5.12 ui_water_leak/CMakeLists.txt after modification
BoYang Xie 75.1 435
BoYang Xie 113.2 436 **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 437
BoYang Xie 113.2 438 [[image:image-20241122094200-23.png]]
BoYang Xie 75.1 439
BoYang Xie 113.2 440 image 5.13 ui_water_leak.h (1) before modification
BoYang Xie 75.1 441
BoYang Xie 113.2 442 [[image:image-20241122094320-24.png||height="852" width="554"]]
BoYang Xie 75.1 443
BoYang Xie 113.2 444 image 5.14 ui_water_leak.h (2) before modification
BoYang Xie 75.1 445
BoYang Xie 113.2 446 [[image:image-20241122094600-25.png||height="1078" width="554"]]
BoYang Xie 75.1 447
BoYang Xie 113.2 448 image 5.15 ui_water_leak.h (1) after modification
BoYang Xie 75.1 449
BoYang Xie 113.2 450 [[image:image-20241122094719-26.png||height="941" width="583"]]
BoYang Xie 75.1 451
BoYang Xie 113.2 452 image 5.16 ui_water_leak.h (2) before modification
BoYang Xie 75.1 453
BoYang Xie 113.2 454 **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 455
BoYang Xie 113.2 456 _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 457
BoYang Xie 113.2 458 [[image:image-20241122102929-27.png||height="619" width="426"]]
459
460 image 5.17 ui_water_leak.c (1) before modification
461
462 [[image:image-20241122112838-30.png||height="551" width="628"]]
463
464 image 5.18 ui_water_leak.c (2) before modification
465
466 [[image:image-20241122110815-29.png||height="725" width="712"]]
467
468 image 5.19 ui_water_leak.c (3) before modification
469
470 [[image:image-20241122113158-31.png||height="872" width="677"]]
471
472 image 5.20 ui_water_leak.c (1) after modification
473
474 [[image:image-20241122113259-33.png||height="874" width="724"]]
475
476 image 5.21 ui_water_leak.c (2) after modification
477
478 [[image:image-20241122113359-34.png||height="804" width="746"]]
479
480 image 5.22 ui_water_leak.c (3) after modification
481
482 **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.
483
484 [[image:image-20241122134113-35.png||height="380" width="421"]]
485
486 image 5.23 ui_water_leak_events_.h before modification
487
488 [[image:image-20241122134420-37.png||height="201" width="283"]]
489
490 image 5.24 ui_water_leak_events_.h after modification
491
492 **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.
493
494 Step1. '#include "ui.h"'~-~->'#include "ui_water_leak.h"'
495
496 Step2. add code  below in delete_object() function definition.
497
498 panel_all * panel = find_upper_by_SensorPanel(&arr,((lv_obj_t *)(e->user_data~)~)~);
499
500 size_t index = panel->panel_obj_index;
501
502 deleteElement(&arr, index);
503
504 [[image:image-20241122135023-38.png||height="358" width="372"]]
505
506 image 5.25 ui_water_leak_events_.c before modification
507
508 [[image:image-20241122135258-39.png||height="403" width="559"]]
509
510 image 5.26 ui_water_leak_events_.c after modification
511
Xiaoling 123.2 512
BoYang Xie 113.2 513 **12. Modify ui_water_leak_style.c file.**
514
515 Step1. '#include "../ui.h"'~-~->#include '"../ui_water_leak.h"'
516
517 add '#include "../../sort.h"'
518
519 add '#include "ui.h"'
520
521 [[image:image-20241122141536-41.png||height="361" width="612"]]
522
523 image 5.27 ui_water_leak_style.c (1) before modification
524
525 [[image:image-20241122142129-42.png||height="386" width="613"]]
526
527 image 5.28 ui_water_leak_style.c (1) after modification
528
Xiaoling 123.2 529
BoYang Xie 113.2 530 Step2. modify 'void ui_ScreenMain_screen_init(void)'~-~->'panel_with_type create_water_leak(uint8_t index)'
531
532 delete code as shown in image 5.29
533
534 [[image:image-20241122145620-44.png||height="757" width="671"]]
535
536 image 5.29 ui_water_leak_style.c (2)
537
Xiaoling 123.2 538
BoYang Xie 113.2 539 Step3. The image 5.30, 5.31 show the change.
540
541 [[image:image-20241122152026-45.png||height="277" width="828"]]
542
543 image 5.30 ui_water_leak_style.c (3) before modification
544
545 [[image:image-20241122152542-46.png||height="293" width="830"]]
546
547 image 5.31 ui_water_leak_style.c (3) after modification
548
Xiaoling 123.2 549
BoYang Xie 113.2 550 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).
551
552 [[image:image-20241122153958-47.png]]
553
554 image 5.32 ui_water_leak_style.c (4)
555
556 [[image:image-20241122154755-49.png||height="864" width="513"]]
557
558 image 5.33 ui_water_leak_style.c (4)
559
Xiaoling 123.2 560
BoYang Xie 113.2 561 Step5. Delete event function in code which was just pasted in extra_lib/sort.h(The process is shown in image 5.34).
562
563 [[image:image-20241122155650-50.png||height="922" width="513"]]
564
565 image 5.34 ui_water_leak_style.c (5)
566
Xiaoling 123.2 567
BoYang Xie 113.2 568 Step6. Add some lines of code in extra_lib/sort.h as shown in image 5.35.
569
570 [[image:image-20241122161934-51.png]]
571
572 image 5.35
573
Xiaoling 123.2 574
BoYang Xie 113.2 575 Step7. Add a line of code in extra_lib/sort.h as shown in image 5.36.
576
577 [[image:image-20241122162852-53.png||height="330" width="529"]]
578
579 image 5.37
580
Xiaoling 123.2 581
BoYang Xie 113.2 582 Step8. Add some code in ui_water_leak_style.c as shown in image 5.38 from line534 to line 576 in detail.
583
584 panel_with_type union_sensor;
585
586 union_sensor.panel_type = WATER_LEAK_TYPE;
587
588 ......
589
590 lv_obj_set_x(union_sensor.panel_union.door.ui_PanelSensorDoor, x_by_index(index));
591
592 lv_obj_set_y(union_sensor.panel_union.door.ui_PanelSensorDoor, y_by_index(index));
593
594 return union_sensor;
595
596 [[image:image-20241122171211-54.png||height="635" width="792"]]
597
598 image 5.38
599
Xiaoling 123.2 600
BoYang Xie 113.2 601 **13. Modify sort.c file.**
602
603 Add a line of code ~-~-'#include "ui_water_leak.h"' as shown in image 5.39 line 16.
604
605 [[image:image-20241122173718-56.png||height="378" width="579"]]
606
607 image 5.39 sort.c (1)
608
609 There are still some changes need to be done in sort.c, and omit here for the moment.
610
611
Edwin Chen 2.1 612 = 6. FAQ =
613
Edwin Chen 7.1 614 == 6.1 ==
Edwin Chen 2.1 615
616
617 = 7. Order Info =
618
Edwin Chen 4.4 619 == 7.1  Part Number ==
Edwin Chen 2.1 620
Xiaoling 56.1 621
Edwin Chen 4.4 622 Part Number: (% style="color:#4472c4" %)LTS5
Edwin Chen 2.1 623
624
Edwin Chen 4.4 625 == 7.2  Packing Info ==
Edwin Chen 2.1 626
Xiaoling 56.1 627
Edwin Chen 4.4 628 **Package Includes**:
Edwin Chen 2.1 629
Edwin Chen 4.4 630 * LTS5 HMI Touch Screen
631 * 5V,2A DC Power Adapter.
632 * USB Type C Program Cable
Edwin Chen 2.1 633
634 = 8. Support =
635
Xiaoling 56.1 636
Edwin Chen 2.1 637 * 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.
638 * 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]].
639
640 = 9.  Reference material =
641
Xiaoling 56.1 642
Edwin Chen 4.2 643 * Datasheet
644 * Source Code
Edwin Chen 4.3 645 * Mechinical
Edwin Chen 2.1 646
647 = 10. FCC Warning =
648
649
650 This device complies with part 15 of the FCC Rules.Operation is subject to the following two conditions:
651
652 (1) This device may not cause harmful interference;
653
654 (2) this device must accept any interference received,including interference that may cause undesired operation.
655
Copyright ©2010-2024 Dragino Technology Co., LTD. All rights reserved
Dragino Wiki v2.0