Wiki source code of LTS5 LoRa HMI Touch Screen

Version 127.1 by Dilisi S on 2024/12/24 20:48

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

Wiki source code of LTS5 LoRa HMI Touch Screen

Applications

Navigation