Wiki source code of LTS5 LoRa HMI Touch Screen

Version 188.3 by Xiaoling on 2025/06/10 18:03

version	line-number	content
133.2	1
	2
188.2	3	[[image:image-20241226135550-1.png\|\|data-xwiki-image-style-alignment="center"]]
2.1	4
	5
56.1	6
	7
2.1	8	(% _mstvisible="1" %)
56.1	9	(% _msthash="315238" _msttexthash="18964465" _mstvisible="3" %)Table of Contents:
2.1	10
	11	{{toc/}}
	12
	13
	14
	15
	16
	17
	18
	19
	20	= 1. Introduction =
	21
116.1	22	== 1.1 What is the LTS5 LoRa HMI Touch Screen? ==
2.1	23
56.1	24
116.1	25	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	26
116.1	27	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	28
116.1	29	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	30
116.1	31	The LA66 LoRa module can be programmed to support either private LoRa protocols or the LoRaWAN protocol.
2.1	32
	33	== 1.2 Features ==
	34
115.1	35
55.1	36	* ESP32-WROOM MCU: 8MB RAM & 16MB ROM
	37	* Dragino LA66 LoRa Module
4.2	38	* Support Private LoRa protocol or LoRaWAN protocol
	39	* Support WiFi & BLE wireless protocol
	40	* 5.0" HMI touch screen
4.6	41	* Support LVGL case. SquareLine program.
4.2	42	* Support RS485 Interface
	43	* Open Source Project
2.1	44	* Wall Attachable.
4.2	45	* 5V DC power
2.1	46	* IP Rating: IP52
	47
116.1	48	== 1.3 Specifications ==
2.1	49
56.1	50
4.9	51	LoRa:
	52
55.1	53	* Frequency Range: 870 MHz ~~ 960 MHz
	54	* TCXO crystal to ensure RF performance on low temperature
	55	* Maximum Power +22 dBm constant RF output
	56	* High sensitivity: -148 dBm
	57	* LoRa Tx Current: <90 mA at +17 dBm, 108 mA at +22 dBm
	58	* LoRa Rx current: <9 mA
4.9	59
4.7	60	WiFi:
	61
	62	* 802.11b/g/n
	63	* Up to 150 Mbps data rate in 802.11n mode
	64	* Support A-MPDU and A-MSDU aggregation
	65	* zero point four μ S protection interval
	66	* Working channel center frequency range: 2412~~2484 MHz
	67
	68	Bluetooth:
	69
	70	* Bluetooth V4.2 BR/EDR and Bluetooth LE standard
	71	* Class-1, Class-2, and Class-3 transmitters.
	72	* AFH
	73	* CVSD and SBC
	74
4.2	75	Display:
2.1	76
4.9	77	* 5.0 Inch , 800 x 480
	78	* IPS Capacitive Touch SCreen
4.11	79	* RGB color.
	80	* Display Area: 120.7*75.80 mm
2.1	81
	82	== 1.4 Power Consumption ==
	83
56.1	84
4.5	85	* External 5V DC power adapter
2.1	86
	87	== 1.5 Storage & Operation Temperature ==
	88
56.1	89
4.10	90	* Operation Temperature: -20 ~~ 70°C (No Dew)
	91	* Storage Temperature: -30 ~~ 70°C (No Dew)
2.1	92
	93	== 1.6 Applications ==
	94
56.1	95
2.1	96	* Smart Buildings & Home Automation
	97	* Logistics and Supply Chain Management
	98	* Smart Metering
	99	* Smart Agriculture
	100	* Smart Cities
	101	* Smart Factory
	102
122.1	103	= 2. Getting Started with 'Hello World' =
2.1	104
5.1	105	== 2.1 About this demo ==
2.1	106
56.1	107
117.1	108	This getting started example demonstrates how to design and deploy a simple display UI for the LTS5 device. The example includes:
2.1	109
117.1	110	* Creating a basic UI with a single button.
	111	* Implementing functionality to navigate the Web UI to a new page when the button is clicked.
	112	* Uploading the UI to the LTS5 device.
56.1	113
117.1	114	By completing this demo, you will gain foundational knowledge for customizing the LTS5 interface and building more advanced IoT applications.
	115
	116
5.1	117	== 2.2 Install Software Running Environment ==
2.1	118
115.1	119
120.1	120	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	121
115.1	122
120.1	123	=== 2.2.1 Install VS Code and ESP-IDF extension ===
26.2	124
56.1	125
120.1	126	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	127
120.1	128	Next, install the ESP-IDF extension within VS Code. Detailed steps for this process are shown in Image 1.
26.2	129
120.1	130
51.2	131	[[image:image-20240928110211-5.png\|\|height="508" width="866"]]
	132
120.1	133	Image 1: ESP-IDF extension install
26.2	134
	135	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]]
	136
56.1	137
5.1	138	=== 2.2.2 Install SquareLine Studio ===
2.1	139
56.1	140
125.1	141	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	142
133.2	143	[[image:squareline.io_downloads.png\|\|height="888" width="1294"]]
2.1	144
56.1	145
121.1	146	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	147
121.1	148	* Max. 10 screens
	149	* Max. 150 widgets
	150	* Max. 5 global colors
	151	* Max. 2 themes
	152	* Max. 1 component
120.1	153
121.1	154	== 2.3 Simple usage of SquareLine Studio and exporting UI code ==
2.1	155
56.1	156
131.1	157	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	158
125.1	159	* In the PROJECT SETTINGS, select LVGL version as 8.3.11 and Resolution as 800 x 480.
	160	* Select the CREATE button to create the new project with the selected settings.
121.1	161
133.2	162	[[image:squareline-studio-launcher-screen.png\|\|height="752" width="1415"]]
26.2	163
	164
131.1	165	Next, you need to configure some additional settings for this project. To do so, select File -> Project Settings as shown in the image below.
	166
26.2	167	[[image:1727229582471-566.png]]
	168
	169
131.1	170	In the PROJECT SETTINGS dialog box, configure/modify the project settings as shown in the image below.
121.1	171
179.1	172	* UI Files Export Path: Select a folder on your computer to store the UI files.
121.1	173	* LVGL Include Path: Set this to lvgl.h
131.1	174	* Click on the APPLY CHANGES button.
121.1	175
51.2	176	[[image:image-20240928105309-4.png\|\|height="526" width="556"]]
	177
26.2	178
131.1	179	Now you can start building the user interface. Follow the steps below:
26.2	180
121.1	181
123.2	182	=== Add widgets ===
26.2	183
123.2	184
180.1	185	After creating a project, a Screen will be automatically added. Its name is Screen1 by default.
	186
131.1	187	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	188
51.2	189	[[image:image-20240928111412-6.png\|\|height="526" width="864"]]
26.2	190
	191
131.1	192	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	193
131.1	194	[[image:Screenshot 2024-12-24 140459.png\|\|height="278" width="290"]]
	195
123.2	196	=== Modify widget properties ===
	197
	198
131.1	199	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	200
51.2	201	[[image:1727485118799-984.png]]
26.2	202
	203
123.2	204	==== Changing the Button properties ====
122.1	205
123.2	206
131.1	207	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	208
131.1	209	* Flex Flow: No Layout
	210	* Transform:
	211	X**: 331 px
	212	Y**: 203 px
	213	Width**: 100 px
	214	Height**: 50 px
	215	Align**: CENTER
122.1	216
51.2	217	[[image:1727485251053-655.png]]
26.2	218
	219
123.1	220	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	221
131.1	222	* Click ADD EVENT button. A new section will appear to configure this event.
26.2	223
131.1	224	[[image:Screenshot 2024-12-24 134937.png\|\|height="80" width="290"]]
	225
	226	* 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.
	227
	228	[[image:Screenshot 2024-12-24 134818.png\|\|height="222" width="290"]]
	229
	230	* 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.
	231	* Finally, click the ADD button.
	232
51.2	233	[[image:1727485480434-713.png\|\|height="395" width="290"]]
26.2	234
123.2	235	Image 8: Add an event for the button
51.2	236
	237
123.2	238	==== Changing the label properties ====
51.2	239
123.2	240
131.1	241	Click the Label you have added to the screen. Under the Label section, type "Click for Detail" in the Text textbox.
122.1	242
51.2	243	[[image:image-20240928090825-1.png\|\|height="327" width="391"]]
	244
	245
131.1	246	Once you enter the text, it will immediately appear on the label.
51.2	247
131.1	248
123.2	249	==== Changing image properties ====
122.1	250
123.2	251
131.1	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.
51.2	253
131.1	254	One way is to move your image into the folder "…/squareline project/assets/", as shown in the image below.
	255
51.2	256	[[image:image-20240928113424-9.png\|\|height="355" width="505"]]
	257
	258
131.1	259	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.
	260
51.2	261	[[image:image-20240928114139-10.png\|\|height="559" width="810"]]
	262
	263
123.2	264	==== The relationship between widgets ====
51.2	265
123.2	266
123.1	267	Widgets commonly have two types of relationships: parallel and parent-child.
	268
	269	* In a parallel relationship, widgets' positions are determined relative to a shared reference object.
132.1	270	* 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	271
51.2	272	[[image:1727486567182-334.png\|\|height="318" width="278"]]
	273
	274
131.1	275	Move the label, Label1 to make it a child of Button1 as shown in the image below.
123.1	276
51.2	277	[[image:image-20240928112001-8.png\|\|height="431" width="796"]]
	278
	279
131.1	280	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	281
131.1	282	[[image:Screenshot 2024-12-24 144005.png\|\|height="360" width="290"]]
	283
	284
123.2	285	==== Preview the screen ====
51.2	286
123.2	287
132.1	288	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	289
51.2	290	[[image:1727487368023-281.png]]
	291
	292
123.1	293	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	294
123.1	295
181.1	296	== 2.4 Integrate UI Code into an ESP-IDF Project ==
26.2	297
56.1	298
132.1	299	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	300
135.1	301	On the menubar, click Export -> Export UI Files as shown in the image below.
	302
26.2	303	[[image:1727229798126-306.png]]
	304
	305
135.1	306	The exported UI files can be found in your SquareLine project folder as shown in the image below.
	307
	308
51.2	309	[[image:1727229821582-258.png\|\|height="333" width="662"]]
26.2	310
	311
135.1	312	Create a new folder named "ui" at path "basic_prj/app_components/ui/", and copy all the exported UI code into it as shown in the image below.
26.2	313
54.1	314	[[image:image-20240928144830-11.png]]
26.2	315
	316
135.1	317	Open the CMakeLists.txt file and edit it as ahown below.
	318
51.2	319	[[image:1727229892636-154.png\|\|height="521" width="407"]]
26.2	320
	321
135.1	322	Open the main.c file and add two lines of code as shown in the below images.
132.1	323
135.1	324	Add #include "ui.h"
26.2	325
	326	[[image:1727229926561-300.png]]
	327
	328
135.1	329	Add ui_init();
	330
26.2	331	[[image:1727229955611-607.png]]
	332
	333
135.1	334	== 2.5 Brief introduction to the Hello World project ==
56.1	335
2.1	336
135.1	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 provides information about the HMI screen product through an image and includes a button to return to the previous screen.
56.1	338
51.2	339
	340	== 2.6 Test Result ==
	341
56.1	342
135.1	343	By pressing the button located at the bottom right, the screen switches to the next one as expected. This confirms that the UI file has been successfully integrated into the project and is functioning correctly.
2.1	344
135.1	345	Screen 1:
	346
51.2	347	[[image:1727488067077-684.png\|\|height="402" width="574"]]
26.2	348
	349
135.1	350	Screen 2:
	351
51.2	352	[[image:1727488157579-949.png\|\|height="397" width="572"]]
26.2	353
	354
5.1	355	= 3. Example Project 1: LoRa Central Display =
2.1	356
7.1	357	[[image:image-20240916101737-1.png\|\|height="468" width="683"]]
2.1	358
7.1	359
8.1	360	= 4. Example Project 2: LoRaWAN RS485 Alarm =
2.1	361
165.2	362	= 5. Example Project 3: P2P =
164.2	363
	364	The project achieves the function of receiving LoRa P2P messages and displaying them on the screen. The workflow is as follows: A LA66, running a P2P program, sends a message in a particular format via an AT command. Then, the LTS5 receives the message and displays it on the screen.
	365
	366	The project can be found at [[this link>>url:https://github.com/dragino/LoRa-HMI-Touch-Screen/tree/main/Example/P2P]].
	367
182.1	368	== 5.1 Firmware Flashing ==
164.2	369
	370
182.1	371	The following software tools are required to flash firmware to the ESP32 and LA66.
164.2	372
182.1	373	* Download the ESP32 firmware flash tool from [[this link>>https://docs.espressif.com/projects/esp-test-tools/en/latest/esp32/production_stage/tools/flash_download_tool.html]].
	374	* Download the LA66 firmware flash tool from [[this link>>https://www.dropbox.com/scl/fo/9kqeqf6wmet10o9hgxuwa/h?rlkey=4ikrg6kg5v0yjxwhp0i37wrv7&e=1&dl=0]].
164.2	375
182.1	376	=== 5.1.1 Upload the Firmware to the ESP32 ===
164.2	377
182.1	378	Open //flash_download_tool.exe// and follow the steps below.
	379
	380	* Chip Type: ESP32-S3
	381	* WorkMode: Develop
	382	* LoadMode: UART
	383	* Click on the OK button.
	384
164.2	385	[[image:1738893226894-758.png\|\|height="170" width="176"]]
	386
182.1	387
	388	In the SPIDownload tab,
	389
188.1	390	* Select the checkboxes for ESP32_LoRaC-P2P_CommonFW_v1.0.0.bin.
	391	* SPI Flashing Config(default configuration):
182.1	392	SPI SPEED**: 40MHz
	393	SPI MODE**: DIO
	394	Check DoNotChgBin** option.
	395	* COM: Select the correct COM port.
	396	* BAUD: 1152000
	397	* Click on the START button.
	398
188.1	399	[[image:image-20250505122103-4.png\|\|height="551" width="705"]]
164.2	400
182.1	401	The progress bar will indicate the firmware update progress and display a FINISH message once the update is complete.
164.2	402
182.1	403
	404	=== 5.1.2 Upload the Firmware to the LA66 ===
	405
	406	Open Dragino_Sensor_Manager_Utility.exe, and then follow the steps below.
	407
	408	* Click on the UART Update Firmware tab.
	409	* Select the correct COM port.
188.1	410	* Click on the Upload_File button and select the LA66_P2P_FW_v1.0.0.bin file.
182.1	411	* Click on the Start button.
	412
164.2	413
182.1	414
188.1	415	[[image:image-20250505121328-2.png]]
164.2	416
182.1	417
188.1	418	[[image:image-20250505121531-3.png]]
	419
182.1	420	(% class="wikigeneratedid" %)
	421	The progress bar will indicate the firmware update progress.
	422
	423
183.1	424	== 5.2 AT commands and LTS5 Panel Data Formats ==
164.2	425
	426	AT+SEND=1,014b69746368656e2d467269676531FFFFA84041000181D4A801A4CBBB0A8E085C02,0,3
	427
	428	AT+SEND=1,014b69746368656e2d467269676531FFFFA84041000181D4A802A4CB00,0,3
	429
	430	AT+SEND=1,014b69746368656e2d467269676531FFFFA84041000181D4A803A4CB00,0,3
	431
	432	AT+SEND=1,014b69746368656e2d467269676531FFFFA84041000181D4A804A4CB00,0,3
	433
	434	AT+SEND=1,014b69746368656e2d467269676531FFFFA84041000181D4A805A4CB00,0,3
	435
	436	AT+SEND=1,014b69746368656e2d467269676531FFFFA84041000181D4A806A4CB00,0,3
	437
178.1	438	LTS5 panel data format:
164.2	439
178.1	440	~1. AT+SEND=1,01 4b69746368656e2d467269676531FFFF A84041000181D4A8 01 A4CB BB0A 8E08 5C02,0,3
164.2	441
	442	01: encrypt. 1 Byte. 01 ~-~-> no encryption. This 1-byte information is now invalid; simply write 0x01 instead.
	443
	444	4b69746368656e2d467269676531FFFF: Device Name. 16 Bytes. The Device Name for this piece of information is "Kitchen-Frige1," and the subsequent "FFFF" is intended to pad it up to 16 Bytes. The Device Name for this piece of information is 'Kitchen-Frige1,' and the subsequent 'FFFF' is intended to pad it up to 16 Bytes, but it is not necessary as the system can handle shorter names as well.
	445
	446	A84041000181D4A8: Device EUI. 8 Bytes. The last three Bytes will be extracted by the ESP32-S3 and displayed on the screen.
	447
	448	01: Panel Type. 1 Byte. 0x01~-~->Tem & Hum,
	449
	450	0x02~-~->Door,
	451
	452	0x03~-~->Water Leak,
	453
	454	0x04~-~->Occupied,
	455
	456	0x05~-~->Button,
	457
	458	0x06~-~->Alarm,
	459
	460	A4CB: Battery level//. //2 Bytes. Battery Voltage =0xCBA4&0x3FFF=0x0BA4=2980mV
	461
	462	BB0A: The temperature of the built-in sensor in LHT65N.// //2 Bytes. Temperature: 0x0ABB/100=27.47℃
	463
	464	8E08: The temperature of the External temperature sensor.// //2 Bytes. Temperature: 0x088E/100=21.90℃
	465
	466	5C02：The humidity of the built-in sensor in LHT65N. 2 Bytes. Humidity: 0x025C/10=60.4%
	467
	468	2. AT+SEND=1,01 4b69746368656e2d467269676531FFFF A84041000181D4A8 02 A4CB 00,0,3
	469
	470	Specific sections of the data share the same function.
	471
	472	00: Status. 1 Byte//. //If Panel Type is 0x02, Status: 00~-~->Open; 01~-~->Close.
	473
	474	If Panel Type is 0x03, Status: 00~-~->Normal; 01~-~->Water Leaking.
	475
	476	If Panel Type is 0x04, Status: 00~-~->Free; 01~-~->Occupied.
	477
	478	If Panel Type is 0x05, Status: 00~-~->OFF; 01~-~->ON.
	479
	480	If Panel Type is 0x06, Status: 00~-~->OFF; 01~-~->Alarm.
	481
	482	== 5.3 Usage ==
	483
	484	After burning the firmware into LTS5, you can use an LA66 equipped with peer-to-peer firmware to send data to LTS5 via AT commands.
	485
	486	5.3.1 Connect LA66 to the computer, open Serial Port Utility, and send the AT+CFG instruction to check whether the LA66 has downloaded correct program.
	487
	488	[[image:image-20250207143131-11.png\|\|height="527" width="547"]]
	489
	490	5.3.2 Copy an AT instruction example, click "Send" button, then the led in LA66 will flash and the LTS5 will display the LoRa information.
	491
	492	[[image:image-20250207144605-12.png\|\|height="634" width="548"]]
	493
178.1	494	LTS5 receives this message and displays it on its screen as the image below shows.
	495
	496	[[image:image-20250208181700-8.jpeg\|\|height="528" width="704"]]
	497
164.2	498	= 6. Example Project 4: LoRaWAN_CLASS_C =
	499
	500
	501	The project achieves the function of receiving LoRaWAN Class C messages and displaying them on the screen. Note: The Things Network (TTN) needs to enable Class C support, and the LA66 within the LTS5 needs to operate in Class C mode.
	502
	503	The downlink workflow proceeds as follows: The Things Network (TTN) sends a message in a specific format via downlink. Then, a LoRaWAN gateway relays this message to the LTS5. Finally, the LTS5 receives the message and displays it on its screen.
	504
	505	The uplink workflow is as follows: The LA66 within the LTS5 sends a LoRaWAN message, for some reason, to a LoRaWAN gateway, which then forwards it to The Things Network (TTN).
	506
	507	The project can be found at [[this link>>https://github.com/dragino/LoRa-HMI-Touch-Screen/tree/main/Example/LoRaWAN_CLASS_C]].
	508
	509	== 6.1 firmware flashing approach ==
	510
165.3	511	The firmware flashing approach is the same as described in section 5.1.
164.2	512
	513	== 6.2 flowchart ==
	514
	515	[[image:image-20250207164320-13.png\|\|height="696" width="1344"]]
	516
	517	== 6.3 Usage ==
	518
165.3	519	This section now describes a process involving TTN downlink panel data that is to be displayed on the LTS5 screen.
164.2	520
	521	6.3.1 Connect LA66 to the computer, open Serial Port Utility, and send the AT+CFG instruction to check whether the LA66 has downloaded correct program.
	522
	523	[[image:image-20250207165702-14.png\|\|height="830" width="563"]]
	524
	525	6.3.2 Switch to Class C using "AT+CLASS=C", and check the class with "AT+CLASS=?".
	526
	527	[[image:image-20250207173212-27.png]]
	528
	529	[[image:image-20250207172246-20.png]]
	530
	531	6.3.3 Verify LA66's join status (in LTS5) with "AT+NJS=?". If not joined, connect manually to LoRaWAN with "AT+JOIN".
	532
	533	[[image:image-20250207172010-19.png]]
	534
	535	[[image:image-20250207171650-17.png]]
	536
	537	6.3.4 After joining, send a message to TTN, such as "AT+SENDB=01,02,8,05820802581ea0a5", to activate communication.
	538
	539	[[image:image-20250207192107-28.png]]
	540
165.3	541	6.3.5 TTN distributes panel data in three phases: DEUI, Dev Name, and Sensor Data. The Dev Name, the last three bytes of the DEUI, and the panel type union together ensure the identification of a panel. Data about the same panel type will update the existing panel display, while data about a different panel type will create a new panel display on the LTS5 screen.
164.2	542
165.3	543	There is an example for TTN downlink.
165.2	544
164.2	545	1. downlink DEUI F1A84041000181D4A8
	546	1. downlink Dev Name F24B69746368656E2D467269676531FFFF
165.2	547	1. downlink Sensor Data 5501A4CBBB0A8E085C02 or 5504A4CB01. Both of them are vaild formats for LTS5. Note: 0x55 as prefix and any other prefix except 0xF1, 0xF2, 0xF3 means downlink is Sensor Data.
164.2	548
178.1	549	[[image:image-20250208175819-1.png\|\|height="503" width="502"]]
	550
	551
	552	[[image:image-20250208175918-2.png\|\|height="505" width="502"]]
	553
	554
	555	[[image:image-20250208180010-3.png\|\|height="507" width="503"]]
	556
	557
	558	[[image:image-20250208181019-4.jpeg\|\|height="592" width="790"]]
	559
	560
	561	[[image:image-20250208181328-7.png\|\|height="505" width="504"]]
	562
	563
	564	[[image:image-20250208181139-5.jpeg\|\|height="594" width="792"]]
	565
	566
165.3	567	= 7. The method for adding a new type of panel to the project =
2.1	568
141.2	569	If you don't have this need, then this part of the content can be ignored.
123.2	570
165.3	571	1. Design a panel in SquareLine Studio, as shown in Image 7.1 below for reference.
75.1	572
	573	[[image:image-20241121113445-1.png\|\|height="584" width="934"]]
	574
165.3	575	Image 7.1: a panel about water_leak
75.1	576
123.2	577
165.3	578	2. Export the UI file: You need to adjust the export path first, then click 'Export -> Export UI Files' on the menu bar. This step was introduced earlier. After that, you can get the UI files as shown in Image 7.2.
75.1	579
	580	[[image:image-20241121141120-4.png\|\|height="383" width="795"]]
	581
165.3	582	Image 7.2: Exported UI files
75.1	583
123.2	584
141.2	585	3. Delete and rename some file. Here are the steps:
75.1	586
135.1	587	Step 1: Delete the 'components' directory.
	588	Step 2: Delete 'filelist.txt'.
	589	Step 3: Delete 'ui_helpers.c' and 'ui_helpers.h'.
	590	Step 4: Rename 'ui_ScreenMain.c' in the 'screens' directory to 'ui_water_leak_style.c'.
	591	Step 5: Rename the 'screens' directory to 'styles'.
75.1	592
	593	[[image:image-20241121151934-10.png\|\|height="303" width="792"]]
	594
165.3	595	image 7.3 rest file (1)
75.1	596
	597	[[image:image-20241121142925-7.png\|\|height="141" width="793"]]
	598
165.3	599	image 7.4 rest file (2)
75.1	600
165.3	601	4. Open the project in VS Code.
75.1	602
165.3	603	5. Add the file include path for water_leak in extra_lib/CMakeLists.txt, as shown in Images 7.5 and 7.6. Its format is similar to that of tem_hum or door."
75.1	604
	605	[[image:image-20241121181957-17.png\|\|height="438" width="516"]]
	606
165.3	607	image 7.5 extra_lib/CMakeLists.txt before adding
75.1	608
	609	[[image:image-20241121182239-18.png\|\|height="520" width="518"]]
	610
165.3	611	image 7.6 extra_lib/CMakeLists.txt after adding
75.1	612
141.2	613	6. Modify the header files included in the fonts and images directories.
75.1	614
165.3	615	Open the fonts/ui_font_Font12.c file, as shown in Image 7.7, and change #include "../ui.h" to #include "../ui_water_leak.h". The modified file is shown in Image 7.8. Other font files need to be modified in the same way.
135.1	616
75.1	617	[[image:image-20241121171629-11.png]]
	618
165.3	619	image 7.7 unmodified font file
75.1	620
	621	[[image:image-20241121171901-12.png]]
	622
165.3	623	image 7.8 modified font file
75.1	624
165.3	625	Open the images/ui_img_battery_empty_png.c file, as shown in Image 7.9, and change #include "../ui.h" to #include "../ui_water_leak.h". The modified file is shown in Image 7.10. Other image files need to be modified in the same way.
75.1	626
	627	[[image:image-20241121172714-13.png]]
	628
165.3	629	image 7.9 unmodified image file
75.1	630
	631	[[image:image-20241121172908-14.png]]
	632
165.3	633	image 7.10 modified image file
75.1	634
165.3	635	7. Modify the ui_water_leak/CMakeLists.txt. Open this file, and modify it as shown in image 7.11 (before) and image 7.12 (after).
75.1	636
	637	[[image:image-20241121180030-15.png]]
	638
165.3	639	image 7.11 ui_water_leak/CMakeLists.txt before modification
75.1	640
	641	[[image:image-20241121180517-16.png]]
	642
165.3	643	image 7.12 ui_water_leak/CMakeLists.txt after modification
75.1	644
	645
165.3	646	8. Modify the ui_water_leak.h file. Images 7.13 and 7.14 show the code before modification, while Images 7.15 and 7.16 show the code after modification.
135.1	647
113.2	648	[[image:image-20241122094200-23.png]]
75.1	649
165.3	650	image 7.13 ui_water_leak.h (1) before modification
75.1	651
113.2	652	[[image:image-20241122094320-24.png\|\|height="852" width="554"]]
75.1	653
165.3	654	image 7.14 ui_water_leak.h (2) before modification
75.1	655
113.2	656	[[image:image-20241122094600-25.png\|\|height="1078" width="554"]]
75.1	657
165.3	658	image 7.15 ui_water_leak.h (1) after modification
75.1	659
113.2	660	[[image:image-20241122094719-26.png\|\|height="941" width="583"]]
75.1	661
165.3	662	image 7.16 ui_water_leak.h (2) before modification
75.1	663
165.3	664	9. Modify ui_water_leak.c file. The image 7.17, 7.18, 7.19 show the code before modification, and the image 7.20, 7.21, 7.22 show the code after modification.
75.1	665
113.2	666	_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	667
113.2	668	[[image:image-20241122102929-27.png\|\|height="619" width="426"]]
	669
165.3	670	image 7.17 ui_water_leak.c (1) before modification
113.2	671
	672	[[image:image-20241122112838-30.png\|\|height="551" width="628"]]
	673
165.3	674	image 7.18 ui_water_leak.c (2) before modification
113.2	675
	676	[[image:image-20241122110815-29.png\|\|height="725" width="712"]]
	677
165.3	678	image 7.19 ui_water_leak.c (3) before modification
113.2	679
	680	[[image:image-20241122113158-31.png\|\|height="872" width="677"]]
	681
165.3	682	image 7.20 ui_water_leak.c (1) after modification
113.2	683
	684	[[image:image-20241122113259-33.png\|\|height="874" width="724"]]
	685
165.3	686	image 7.21 ui_water_leak.c (2) after modification
113.2	687
	688	[[image:image-20241122113359-34.png\|\|height="804" width="746"]]
	689
165.3	690	image 7.22 ui_water_leak.c (3) after modification
113.2	691
165.3	692	10. Modify ui_water_leak_events.h file. The image 7.23 show the code before modification, and the image 7.24 show the code after modification.
113.2	693
	694	[[image:image-20241122134113-35.png\|\|height="380" width="421"]]
	695
165.3	696	image 7.23 ui_water_leak_events_.h before modification
113.2	697
	698	[[image:image-20241122134420-37.png\|\|height="201" width="283"]]
	699
165.3	700	image 7.24 ui_water_leak_events_.h after modification
113.2	701
165.3	702	11. Modify ui_water_leak_events.c file. The image 7.25 show the code before modification, and the image 7.26 show the code after modification.
113.2	703
	704	Step1. '#include "ui.h"'~-~->'#include "ui_water_leak.h"'
	705
	706	Step2. add code below in delete_object() function definition.
	707
	708	panel_all * panel = find_upper_by_SensorPanel(&arr,((lv_obj_t *)(e->user_data~)~)~);
	709
	710	size_t index = panel->panel_obj_index;
	711
	712	deleteElement(&arr, index);
	713
	714	[[image:image-20241122135023-38.png\|\|height="358" width="372"]]
	715
165.3	716	image 7.25 ui_water_leak_events_.c before modification
113.2	717
	718	[[image:image-20241122135258-39.png\|\|height="403" width="559"]]
	719
165.3	720	image 7.26 ui_water_leak_events_.c after modification
113.2	721
123.2	722
141.2	723	12. Modify ui_water_leak_style.c file.
113.2	724
	725	Step1. '#include "../ui.h"'~-~->#include '"../ui_water_leak.h"'
	726
	727	add '#include "../../sort.h"'
	728
	729	add '#include "ui.h"'
	730
	731	[[image:image-20241122141536-41.png\|\|height="361" width="612"]]
	732
165.3	733	image 7.27 ui_water_leak_style.c (1) before modification
113.2	734
	735	[[image:image-20241122142129-42.png\|\|height="386" width="613"]]
	736
165.3	737	image 7.28 ui_water_leak_style.c (1) after modification
113.2	738
123.2	739
113.2	740	Step2. modify 'void ui_ScreenMain_screen_init(void)'~-~->'panel_with_type create_water_leak(uint8_t index)'
	741
165.3	742	delete code as shown in image 7.29
113.2	743
	744	[[image:image-20241122145620-44.png\|\|height="757" width="671"]]
	745
165.3	746	image 7.29 ui_water_leak_style.c (2)
113.2	747
123.2	748
165.3	749	Step3. The image 7.30, 7.31 show the change.
113.2	750
	751	[[image:image-20241122152026-45.png\|\|height="277" width="828"]]
	752
165.3	753	image 7.30 ui_water_leak_style.c (3) before modification
113.2	754
	755	[[image:image-20241122152542-46.png\|\|height="293" width="830"]]
	756
165.3	757	image 7.31 ui_water_leak_style.c (3) after modification
113.2	758
123.2	759
165.3	760	Step4. Copy partly the code in ui_water_leak.c, paste at extra_lib/sort.h(The process is shown in image 7.32, 7.33).
113.2	761
	762	[[image:image-20241122153958-47.png]]
	763
165.3	764	image 7.32 ui_water_leak_style.c (4)
113.2	765
141.2	766
113.2	767	[[image:image-20241122154755-49.png\|\|height="864" width="513"]]
	768
165.3	769	image 7.33 ui_water_leak_style.c (4)
113.2	770
123.2	771
165.3	772	Step5. Delete event function in code which was just pasted in extra_lib/sort.h(The process is shown in image 7.34).
113.2	773
	774	[[image:image-20241122155650-50.png\|\|height="922" width="513"]]
	775
165.3	776	image 7.34 ui_water_leak_style.c (5)
113.2	777
123.2	778
165.3	779	Step6. Add some lines of code in extra_lib/sort.h as shown in image 7.35.
113.2	780
	781	[[image:image-20241122161934-51.png]]
	782
165.3	783	image 7.35
113.2	784
123.2	785
165.3	786	Step7. Add a line of code in extra_lib/sort.h as shown in image 7.36.
113.2	787
	788	[[image:image-20241122162852-53.png\|\|height="330" width="529"]]
	789
165.3	790	image 7.37
113.2	791
123.2	792
165.3	793	Step8. Add some code in ui_water_leak_style.c as shown in image 7.38 from line534 to line 576 in detail.
113.2	794
	795	panel_with_type union_sensor;
	796
	797	union_sensor.panel_type = WATER_LEAK_TYPE;
	798
	799	......
	800
	801	lv_obj_set_x(union_sensor.panel_union.door.ui_PanelSensorDoor, x_by_index(index));
	802
	803	lv_obj_set_y(union_sensor.panel_union.door.ui_PanelSensorDoor, y_by_index(index));
	804
	805	return union_sensor;
	806
141.2	807	[[image:image-20250122173546-6.png\|\|height="777" width="922"]]
113.2	808
165.3	809	image 7.38
113.2	810
123.2	811
141.2	812	13. Rest midification in sort.h file.
113.2	813
165.3	814	In image 7.39 as below, we can see "WATER_LEAK_TYPE" at line 24 and water leak switch status definition at line 32,33, and these are what we need to add in sort.h.
113.2	815
141.2	816	[[image:image-20250122170230-1.png\|\|height="580" width="513"]]
113.2	817
165.3	818	image 7.39 sort.h
113.2	819
141.2	820	13. Modify sort.c file.
	821
	822	Add a line of code ~-~-'#include "ui_water_leak.h"' as shown in image 5.39 line 26.
	823
	824	[[image:image-20250122171910-5.png\|\|height="524" width="510"]]
	825
165.3	826	image 7.40 sort.c (1)
141.2	827
113.2	828	There are still some changes need to be done in sort.c, and omit here for the moment.
	829
	830
141.2	831
165.3	832	= 8. FAQ =
2.1	833
165.3	834	== 8.1 ==
2.1	835
	836
165.3	837	= 9. Order Info =
2.1	838
165.3	839	== 9.1 Part Number ==
2.1	840
56.1	841
4.4	842	Part Number: (% style="color:#4472c4" %)LTS5
2.1	843
	844
165.3	845	== 9.2 Packing Info ==
2.1	846
56.1	847
4.4	848	Package Includes:
2.1	849
4.4	850	* LTS5 HMI Touch Screen
	851	* 5V,2A DC Power Adapter.
	852	* USB Type C Program Cable
2.1	853
165.3	854	= 10. Support =
2.1	855
56.1	856
2.1	857	* 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.
	858	* 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]].
	859
165.3	860	= 11. Reference material =
2.1	861
56.1	862
188.2	863	* Datasheet: [[https:~~/~~/www.dropbox.com/scl/fo/fr7wjsdfh9huchg59p7bv/APASCR0elWtp_EbUZ1W9K-A?rlkey=pcuptw3dtg5pw9vgt4ag6hs9z&st=ds6hdztg&dl=0>>https://www.dropbox.com/scl/fo/fr7wjsdfh9huchg59p7bv/APASCR0elWtp_EbUZ1W9K-A?rlkey=pcuptw3dtg5pw9vgt4ag6hs9z&st=ds6hdztg&dl=0]]
188.3	864	* schematic: [[LTS5-V1>>https://www.dropbox.com/scl/fo/grwr5b4x1tk2omyjwg06y/ACleSdi5f7p5zRB2mfPH7CE?rlkey=vhcs83jrj9tkmw8wa9m9wo5rx&st=hkhe3bbj&dl=0]]
141.2	865	* Source Code: [[dragino/LoRa-HMI-Touch-Screen: Open Source LoRa / LoRaWAN HMI Touch Screen Project>>url:https://github.com/dragino/LoRa-HMI-Touch-Screen/tree/main]]
4.3	866	* Mechinical
2.1	867
165.3	868	= 12. FCC Warning =
2.1	869
	870
	871	This device complies with part 15 of the FCC Rules.Operation is subject to the following two conditions:
	872
	873	(1) This device may not cause harmful interference;
	874
	875	(2) this device must accept any interference received,including interference that may cause undesired operation.
	876

Wiki source code of LTS5 LoRa HMI Touch Screen

Applications