Wiki source code of LTS5 LoRa HMI Touch Screen

Version 132.1 by Dilisi S on 2024/12/25 01:39

version	line-number	content
56.1	1	(% style="text-align:center" %)
4.1	2	[[image:image-20240915231842-1.png]]
2.1	3
	4
56.1	5
	6
	7
	8
	9
2.1	10	(% _mstvisible="1" %)
56.1	11	(% _msthash="315238" _msttexthash="18964465" _mstvisible="3" %)Table of Contents:
2.1	12
	13	{{toc/}}
	14
	15
	16
	17
	18
	19
	20
	21
	22	= 1. Introduction =
	23
116.1	24	== 1.1 What is the LTS5 LoRa HMI Touch Screen? ==
2.1	25
56.1	26
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.
2.1	28
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.
2.1	30
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.
2.1	32
116.1	33	The LA66 LoRa module can be programmed to support either private LoRa protocols or the LoRaWAN protocol.
2.1	34
	35	== 1.2 Features ==
	36
115.1	37
55.1	38	* ESP32-WROOM MCU: 8MB RAM & 16MB ROM
	39	* Dragino LA66 LoRa Module
4.2	40	* Support Private LoRa protocol or LoRaWAN protocol
	41	* Support WiFi & BLE wireless protocol
	42	* 5.0" HMI touch screen
4.6	43	* Support LVGL case. SquareLine program.
4.2	44	* Support RS485 Interface
	45	* Open Source Project
2.1	46	* Wall Attachable.
4.2	47	* 5V DC power
2.1	48	* IP Rating: IP52
	49
116.1	50	== 1.3 Specifications ==
2.1	51
56.1	52
4.9	53	LoRa:
	54
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
4.9	61
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
4.2	77	Display:
2.1	78
4.9	79	* 5.0 Inch , 800 x 480
	80	* IPS Capacitive Touch SCreen
4.11	81	* RGB color.
	82	* Display Area: 120.7*75.80 mm
2.1	83
	84	== 1.4 Power Consumption ==
	85
56.1	86
4.5	87	* External 5V DC power adapter
2.1	88
	89	== 1.5 Storage & Operation Temperature ==
	90
56.1	91
4.10	92	* Operation Temperature: -20 ~~ 70°C (No Dew)
	93	* Storage Temperature: -30 ~~ 70°C (No Dew)
2.1	94
	95	== 1.6 Applications ==
	96
56.1	97
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
122.1	105	= 2. Getting Started with 'Hello World' =
2.1	106
5.1	107	== 2.1 About this demo ==
2.1	108
56.1	109
117.1	110	This getting started example demonstrates how to design and deploy a simple display UI for the LTS5 device. The example includes:
2.1	111
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.
56.1	115
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
5.1	119	== 2.2 Install Software Running Environment ==
2.1	120
115.1	121
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.
2.1	123
115.1	124
120.1	125	=== 2.2.1 Install VS Code and ESP-IDF extension ===
26.2	126
56.1	127
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]].
26.2	129
120.1	130	Next, install the ESP-IDF extension within VS Code. Detailed steps for this process are shown in Image 1.
26.2	131
120.1	132
51.2	133	[[image:image-20240928110211-5.png\|\|height="508" width="866"]]
	134
120.1	135	Image 1: ESP-IDF extension install
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
56.1	139
5.1	140	=== 2.2.2 Install SquareLine Studio ===
2.1	141
56.1	142
125.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.5.0. See the image below.
2.1	144
120.1	145	[[image:squareline.io_downloads.png]]
2.1	146
56.1	147
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:
120.1	149
121.1	150	* Max. 10 screens
	151	* Max. 150 widgets
	152	* Max. 5 global colors
	153	* Max. 2 themes
	154	* Max. 1 component
120.1	155
121.1	156	== 2.3 Simple usage of SquareLine Studio and exporting UI code ==
2.1	157
56.1	158
131.1	159	Start the SquareLine Studio. The launcher screen appears as shown in the below image. You can create a new project by clicking Create in the top menu. Then select the Desktop tab. Select the development platform, Eclipse with SDL for development on PC.
2.1	160
125.1	161	* In the PROJECT SETTINGS, select LVGL version as 8.3.11 and Resolution as 800 x 480.
	162	* Select the CREATE button to create the new project with the selected settings.
121.1	163
131.1	164	[[image:squareline-studio-launcher-screen.png]]
26.2	165
	166
131.1	167
	168	Next, you need to configure some additional settings for this project. To do so, select File -> Project Settings as shown in the image below.
	169
26.2	170	[[image:1727229582471-566.png]]
	171
	172
131.1	173	In the PROJECT SETTINGS dialog box, configure/modify the project settings as shown in the image below.
121.1	174
	175	* UI Files Export Root: Select a folder on your computer to store the UI files.
	176	* LVGL Include Path: Set this to lvgl.h
131.1	177	* Click on the APPLY CHANGES button.
121.1	178
51.2	179	[[image:image-20240928105309-4.png\|\|height="526" width="556"]]
	180
26.2	181
131.1	182	Now you can start building the user interface. Follow the steps below:
26.2	183
121.1	184
123.2	185	=== Add widgets ===
26.2	186
123.2	187
131.1	188	To add a widget, navigate to the Widgets panel, and then click on the widget you want to add to the screen. You can reposition the widgets in the screen area by clicking and dragging them. Now add a Label, Button, and Image as shown in the image below. The added widgets are also displayed in the Hierarchy panel.
26.2	189
51.2	190	[[image:image-20240928111412-6.png\|\|height="526" width="864"]]
26.2	191
	192
131.1	193	Then click the Screen widget to add the second screen. After adding the second screen, it will appear in the Screens panel as Screen2.
26.2	194
131.1	195	[[image:Screenshot 2024-12-24 140459.png\|\|height="278" width="290"]]
	196
123.2	197	=== Modify widget properties ===
	198
	199
131.1	200	The area for modifying widgets is called the Inspector panel. The Inspector panel consists of four sections: COMPONENT, <WIDGET>, STYLE SETTINGS, and EVENTS, as shown in the image below. 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.
26.2	201
51.2	202	[[image:1727485118799-984.png]]
26.2	203
	204
123.2	205	==== Changing the Button properties ====
122.1	206
123.2	207
131.1	208	Click the Button you have added to the screen. Under the Layout you can change the button's position and size. Use the following settings:
122.1	209
131.1	210	* Flex Flow: No Layout
	211	* Transform:
	212	X**: 331 px
	213	Y**: 203 px
	214	Width**: 100 px
	215	Height**: 50 px
	216	Align**: CENTER
122.1	217
51.2	218	[[image:1727485251053-655.png]]
26.2	219
	220
123.1	221	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.
26.2	222
131.1	223	* Click ADD EVENT button. A new section will appear to configure this event.
26.2	224
131.1	225	[[image:Screenshot 2024-12-24 134937.png\|\|height="80" width="290"]]
	226
	227	* Select CLICKED from the dropdown under Trigger. Choose CHANGE SCREEN under Action, then click the ADD button. A new section will appear to configure the action.
	228
	229	[[image:Screenshot 2024-12-24 134818.png\|\|height="222" width="290"]]
	230
	231	* Select Screen2 under Screen to. Select FADE ON from Fade mode. The default value 500 means the transition takes 500 milliseconds to appear the Screen2.
	232	* Finally, click the ADD button.
	233
51.2	234	[[image:1727485480434-713.png\|\|height="395" width="290"]]
26.2	235
123.2	236	Image 8: Add an event for the button
51.2	237
	238
123.2	239	==== Changing the label properties ====
51.2	240
123.2	241
131.1	242	Click the Label you have added to the screen. Under the Label section, type "Click for Detail" in the Text textbox.
122.1	243
51.2	244	[[image:image-20240928090825-1.png\|\|height="327" width="391"]]
	245
	246
131.1	247	Once you enter the text, it will immediately appear on the label.
51.2	248
131.1	249
123.2	250	==== Changing image properties ====
122.1	251
123.2	252
131.1	253	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.
51.2	254
131.1	255	One way is to move your image into the folder "…/squareline project/assets/", as shown in the image below.
	256
51.2	257	[[image:image-20240928113424-9.png\|\|height="355" width="505"]]
	258
	259
131.1	260	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" panel in SquareLine Studio, as shown in the image below.
	261
51.2	262	[[image:image-20240928114139-10.png\|\|height="559" width="810"]]
	263
	264
123.2	265	==== The relationship between widgets ====
51.2	266
123.2	267
123.1	268	Widgets commonly have two types of relationships: parallel and parent-child.
	269
	270	* In a parallel relationship, widgets' positions are determined relative to a shared reference object.
132.1	271	* 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.
123.1	272
51.2	273	[[image:1727486567182-334.png\|\|height="318" width="278"]]
	274
	275
131.1	276	Move the label, Label1 to make it a child of Button1 as shown in the image below.
123.1	277
51.2	278	[[image:image-20240928112001-8.png\|\|height="431" width="796"]]
	279
	280
131.1	281	Then set the X and Y position of the label to 0 as shown in the image below. The label will appear on the button. If you move the button on the screen, the label will move along with it as part of the button.
51.2	282
131.1	283	[[image:Screenshot 2024-12-24 144005.png\|\|height="360" width="290"]]
	284
	285
123.2	286	==== Preview the screen ====
51.2	287
123.2	288
132.1	289	You can test the result by clicking on the PLAY button as shown in the image below. The screen will change into play mode.
122.1	290
51.2	291	[[image:1727487368023-281.png]]
	292
	293
123.1	294	For more information, please visit the official link: [[SquareLine Studio 1.4.2 Documentation ~\| SquareLine Studio>>url:https://docs.squareline.io/docs/squareline/]].
51.2	295
123.1	296
26.2	297	== 2.4 Integrate UI Code to ESP-IDF Project ==
	298
56.1	299
132.1	300	To integrate, first export the UI code, then make some modifications, and finally relocate the UI code to a specific position within the project.
26.2	301
	302	[[image:1727229798126-306.png]]
	303
51.2	304	image 15 export UI file
26.2	305
51.2	306	[[image:1727229821582-258.png\|\|height="333" width="662"]]
26.2	307
51.2	308	image 16 exported UI file
26.2	309
51.2	310	Create a empty directory entitled "ui" in path "basic_prj/app_components/ui/", and then copy all UI code exported to this directory.
26.2	311
54.1	312	[[image:image-20240928144830-11.png]]
26.2	313
51.2	314	image 17 open CMakeLists.txt
26.2	315
51.2	316	[[image:1727229892636-154.png\|\|height="521" width="407"]]
26.2	317
51.2	318	image 18 modify CMakeLists.txt
26.2	319
132.1	320
26.2	321	The last step of integrating is adding two lines of code in main.c file.
	322
	323	[[image:1727229926561-300.png]]
	324
51.2	325	image 19 add "ui.h"
26.2	326
	327	[[image:1727229955611-607.png]]
	328
51.2	329	image 20 add "ui_init()"
26.2	330
56.1	331
51.2	332	== 2.5 Brief introduction of hello world project ==
2.1	333
56.1	334
51.2	335	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.
	336
56.1	337
51.2	338	== 2.6 Test Result ==
	339
56.1	340
26.2	341	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.
2.1	342
51.2	343	[[image:1727488067077-684.png\|\|height="402" width="574"]]
26.2	344
51.2	345	image 21 screen1
26.2	346
51.2	347	[[image:1727488157579-949.png\|\|height="397" width="572"]]
26.2	348
51.2	349	image 22 screen2
26.2	350
56.1	351
5.1	352	= 3. Example Project 1: LoRa Central Display =
2.1	353
7.1	354	[[image:image-20240916101737-1.png\|\|height="468" width="683"]]
2.1	355
7.1	356
8.1	357	= 4. Example Project 2: LoRaWAN RS485 Alarm =
2.1	358
123.2	359	= 5. The way to add a new panel to project =
2.1	360
123.2	361
113.2	362	~1. Design a panel in SquareLine Studio, using image 5.1 below as a reference.
75.1	363
	364	[[image:image-20241121113445-1.png\|\|height="584" width="934"]]
	365
	366	image 5.1 a panel about water_leak
	367
123.2	368
113.2	369	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.
75.1	370
	371	[[image:image-20241121141120-4.png\|\|height="383" width="795"]]
	372
	373	image 5.2 ui files exported
	374
123.2	375
113.2	376	3. Delete or rename some file. Here are the steps:
75.1	377
113.2	378	Step1 Delete the 'components' directory.
	379	Step2 Delete 'filelist.txt'.
	380	Step3 Delete 'ui_helpers.c' and 'ui_helpers.h'.
	381	Step4 Rename 'ui_ScreenMain.c' in the 'screens' directory to 'ui_water_leak_style.c'.
	382	Step5 Rename the 'screens' directory to 'styles'.
75.1	383
	384	[[image:image-20241121151934-10.png\|\|height="303" width="792"]]
	385
113.2	386	image 5.3 rest file (1)
75.1	387
	388	[[image:image-20241121142925-7.png\|\|height="141" width="793"]]
	389
113.2	390	image 5.4 rest file (2)
75.1	391
113.2	392	4. Open this project in vscode.
75.1	393
	394	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.
	395
	396	[[image:image-20241121181957-17.png\|\|height="438" width="516"]]
	397
113.2	398	image 5.5 extra_lib/CMakeLists.txt before add
75.1	399
	400	[[image:image-20241121182239-18.png\|\|height="520" width="518"]]
	401
113.2	402	image 5.6 extra_lib/CMakeLists.txt after add
75.1	403
113.2	404	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.
75.1	405
	406	[[image:image-20241121171629-11.png]]
	407
113.2	408	image 5.7 before-modified font file
75.1	409
	410	[[image:image-20241121171901-12.png]]
	411
	412	image 5.8 modified font file
	413
	414	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.
	415
	416	[[image:image-20241121172714-13.png]]
	417
	418	image 5.9 before-modified image file
	419
	420	[[image:image-20241121172908-14.png]]
	421
	422	image 5.10 modified image file
	423
113.2	424	7. Modify the ui_water_leak/CMakeLists.txt. Open this file, and modify it from image 5.11 to image 5.12.
75.1	425
	426	[[image:image-20241121180030-15.png]]
	427
113.2	428	image 5.11 ui_water_leak/CMakeLists.txt before modification
75.1	429
	430	[[image:image-20241121180517-16.png]]
	431
113.2	432	image 5.12 ui_water_leak/CMakeLists.txt after modification
75.1	433
113.2	434	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.
75.1	435
113.2	436	[[image:image-20241122094200-23.png]]
75.1	437
113.2	438	image 5.13 ui_water_leak.h (1) before modification
75.1	439
113.2	440	[[image:image-20241122094320-24.png\|\|height="852" width="554"]]
75.1	441
113.2	442	image 5.14 ui_water_leak.h (2) before modification
75.1	443
113.2	444	[[image:image-20241122094600-25.png\|\|height="1078" width="554"]]
75.1	445
113.2	446	image 5.15 ui_water_leak.h (1) after modification
75.1	447
113.2	448	[[image:image-20241122094719-26.png\|\|height="941" width="583"]]
75.1	449
113.2	450	image 5.16 ui_water_leak.h (2) before modification
75.1	451
113.2	452	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.
75.1	453
113.2	454	_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.
75.1	455
113.2	456	[[image:image-20241122102929-27.png\|\|height="619" width="426"]]
	457
	458	image 5.17 ui_water_leak.c (1) before modification
	459
	460	[[image:image-20241122112838-30.png\|\|height="551" width="628"]]
	461
	462	image 5.18 ui_water_leak.c (2) before modification
	463
	464	[[image:image-20241122110815-29.png\|\|height="725" width="712"]]
	465
	466	image 5.19 ui_water_leak.c (3) before modification
	467
	468	[[image:image-20241122113158-31.png\|\|height="872" width="677"]]
	469
	470	image 5.20 ui_water_leak.c (1) after modification
	471
	472	[[image:image-20241122113259-33.png\|\|height="874" width="724"]]
	473
	474	image 5.21 ui_water_leak.c (2) after modification
	475
	476	[[image:image-20241122113359-34.png\|\|height="804" width="746"]]
	477
	478	image 5.22 ui_water_leak.c (3) after modification
	479
	480	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.
	481
	482	[[image:image-20241122134113-35.png\|\|height="380" width="421"]]
	483
	484	image 5.23 ui_water_leak_events_.h before modification
	485
	486	[[image:image-20241122134420-37.png\|\|height="201" width="283"]]
	487
	488	image 5.24 ui_water_leak_events_.h after modification
	489
	490	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.
	491
	492	Step1. '#include "ui.h"'~-~->'#include "ui_water_leak.h"'
	493
	494	Step2. add code below in delete_object() function definition.
	495
	496	panel_all * panel = find_upper_by_SensorPanel(&arr,((lv_obj_t *)(e->user_data~)~)~);
	497
	498	size_t index = panel->panel_obj_index;
	499
	500	deleteElement(&arr, index);
	501
	502	[[image:image-20241122135023-38.png\|\|height="358" width="372"]]
	503
	504	image 5.25 ui_water_leak_events_.c before modification
	505
	506	[[image:image-20241122135258-39.png\|\|height="403" width="559"]]
	507
	508	image 5.26 ui_water_leak_events_.c after modification
	509
123.2	510
113.2	511	12. Modify ui_water_leak_style.c file.
	512
	513	Step1. '#include "../ui.h"'~-~->#include '"../ui_water_leak.h"'
	514
	515	add '#include "../../sort.h"'
	516
	517	add '#include "ui.h"'
	518
	519	[[image:image-20241122141536-41.png\|\|height="361" width="612"]]
	520
	521	image 5.27 ui_water_leak_style.c (1) before modification
	522
	523	[[image:image-20241122142129-42.png\|\|height="386" width="613"]]
	524
	525	image 5.28 ui_water_leak_style.c (1) after modification
	526
123.2	527
113.2	528	Step2. modify 'void ui_ScreenMain_screen_init(void)'~-~->'panel_with_type create_water_leak(uint8_t index)'
	529
	530	delete code as shown in image 5.29
	531
	532	[[image:image-20241122145620-44.png\|\|height="757" width="671"]]
	533
	534	image 5.29 ui_water_leak_style.c (2)
	535
123.2	536
113.2	537	Step3. The image 5.30, 5.31 show the change.
	538
	539	[[image:image-20241122152026-45.png\|\|height="277" width="828"]]
	540
	541	image 5.30 ui_water_leak_style.c (3) before modification
	542
	543	[[image:image-20241122152542-46.png\|\|height="293" width="830"]]
	544
	545	image 5.31 ui_water_leak_style.c (3) after modification
	546
123.2	547
113.2	548	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).
	549
	550	[[image:image-20241122153958-47.png]]
	551
	552	image 5.32 ui_water_leak_style.c (4)
	553
	554	[[image:image-20241122154755-49.png\|\|height="864" width="513"]]
	555
	556	image 5.33 ui_water_leak_style.c (4)
	557
123.2	558
113.2	559	Step5. Delete event function in code which was just pasted in extra_lib/sort.h(The process is shown in image 5.34).
	560
	561	[[image:image-20241122155650-50.png\|\|height="922" width="513"]]
	562
	563	image 5.34 ui_water_leak_style.c (5)
	564
123.2	565
113.2	566	Step6. Add some lines of code in extra_lib/sort.h as shown in image 5.35.
	567
	568	[[image:image-20241122161934-51.png]]
	569
	570	image 5.35
	571
123.2	572
113.2	573	Step7. Add a line of code in extra_lib/sort.h as shown in image 5.36.
	574
	575	[[image:image-20241122162852-53.png\|\|height="330" width="529"]]
	576
	577	image 5.37
	578
123.2	579
113.2	580	Step8. Add some code in ui_water_leak_style.c as shown in image 5.38 from line534 to line 576 in detail.
	581
	582	panel_with_type union_sensor;
	583
	584	union_sensor.panel_type = WATER_LEAK_TYPE;
	585
	586	......
	587
	588	lv_obj_set_x(union_sensor.panel_union.door.ui_PanelSensorDoor, x_by_index(index));
	589
	590	lv_obj_set_y(union_sensor.panel_union.door.ui_PanelSensorDoor, y_by_index(index));
	591
	592	return union_sensor;
	593
	594	[[image:image-20241122171211-54.png\|\|height="635" width="792"]]
	595
	596	image 5.38
	597
123.2	598
113.2	599	13. Modify sort.c file.
	600
	601	Add a line of code ~-~-'#include "ui_water_leak.h"' as shown in image 5.39 line 16.
	602
	603	[[image:image-20241122173718-56.png\|\|height="378" width="579"]]
	604
	605	image 5.39 sort.c (1)
	606
	607	There are still some changes need to be done in sort.c, and omit here for the moment.
	608
	609
2.1	610	= 6. FAQ =
	611
7.1	612	== 6.1 ==
2.1	613
	614
	615	= 7. Order Info =
	616
4.4	617	== 7.1 Part Number ==
2.1	618
56.1	619
4.4	620	Part Number: (% style="color:#4472c4" %)LTS5
2.1	621
	622
4.4	623	== 7.2 Packing Info ==
2.1	624
56.1	625
4.4	626	Package Includes:
2.1	627
4.4	628	* LTS5 HMI Touch Screen
	629	* 5V,2A DC Power Adapter.
	630	* USB Type C Program Cable
2.1	631
	632	= 8. Support =
	633
56.1	634
2.1	635	* 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.
	636	* 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]].
	637
	638	= 9. Reference material =
	639
56.1	640
4.2	641	* Datasheet
	642	* Source Code
4.3	643	* Mechinical
2.1	644
	645	= 10. FCC Warning =
	646
	647
	648	This device complies with part 15 of the FCC Rules.Operation is subject to the following two conditions:
	649
	650	(1) This device may not cause harmful interference;
	651
	652	(2) this device must accept any interference received,including interference that may cause undesired operation.
	653

Wiki source code of LTS5 LoRa HMI Touch Screen

Applications

Navigation