Wiki source code of LTS5 LoRa HMI Touch Screen

Version 101.1 by BoYang Xie on 2024/11/22 14:56

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
4.1	24	== 1.1 What is LTS5 LoRa HMI touch screen ==
2.1	25
56.1	26
4.1	27	LTS5 is a (% style="color:blue" %)LoRa / LoRaWAN HMI Touch Screen(%%) designed for display purpose of IoT project. It have a 5.0" HMI touch screen, and support WiFi, Bluetooch, LoRa wireless protocol.
2.1	28
4.1	29	LTS5 is an Open Source software project. The MCU is ESP32 and Dragino LA66 LoRa module. There are lots of development source for ESP32 which can greatly reduce the development time.
2.1	30
4.2	31	The HMI touch screen of LTS5 supports drap & drop design. Developer can use SquareLine to easily customize the display UI for different application.
2.1	32
4.2	33	LTS5 use LA66 LoRa module, this module can be program to support private LoRa protocol or LoRaWAN protocol.
2.1	34
4.2	35
2.1	36	== 1.2 Features ==
	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
	50	== 1.3 Specification ==
	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
51.2	105	= 2. Getting Started with Hello World =
2.1	106
5.1	107	== 2.1 About this demo ==
2.1	108
56.1	109
51.2	110	In this Getting Started Example, we will show how to design a simple Display UI and upload it to LTS5. This UI has a button , when user click the button. The Web UI will jump to a new page.
2.1	111
56.1	112
5.1	113	== 2.2 Install Software Running Environment ==
2.1	114
26.2	115	The ESP MCU can be developed using ESP-IDF, Arduino, or MicroPython. For this project, we utilize ESP-IDF for compilation and Visual Studio Code (VSCode) for editing.
2.1	116
26.2	117	=== 2.2.1 Install VSCode and ESP-IDF extension ===
	118
56.1	119
26.2	120	Firstly, download and install VSCode for your computer's operating system from the official website: [[Download Visual Studio Code - Mac, Linux, Windows>>url:https://code.visualstudio.com/download]].
	121
	122	Next, you need to install the ESP-IDF extension within VSCode. The detailed operation steps are illustrated in image 1.
	123
51.2	124	[[image:image-20240928110211-5.png\|\|height="508" width="866"]]
	125
26.2	126	image 1 ESP-IDF extension install
	127
	128	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]]
	129
56.1	130
5.1	131	=== 2.2.2 Install SquareLine Studio ===
2.1	132
56.1	133
26.2	134	The version we are utilizing for this software is 1.4.2. You can download it from the official link: [[SquareLine Studio - Download the current version of SquareLine Studio>>url:https://squareline.io/downloads#lastRelease]].
2.1	135
26.2	136	Please note that this software necessitates the registration of a license prior to usage, and various licenses come with distinct limitations. For instance, the free version imposes restrictions such as a limit of 1 component, 150 widgets, and 10 screens. However, for first-time downloads, you are granted unrestricted access for a period of 30 days without the need for immediate registration.
2.1	137
56.1	138
26.2	139	== 2.3 Simple usage of SquareLine Studio and export UI code ==
2.1	140
56.1	141
26.2	142	After launching and logging in to this software, create a project as shown in the following image 2. The version of LVGL is 8.3.11.
2.1	143
51.2	144	[[image:image-20240928103357-2.png\|\|height="680" width="708"]]
28.2	145
51.2	146	image 2 create a SquareLine project
26.2	147
	148	Next, we need to make some settings for this project. By clicking in the specified order on image 3, we can see the page as shown in image 4.
	149
	150	[[image:1727229582471-566.png]]
	151
	152	image 3 project settings
	153
51.2	154	[[image:image-20240928105309-4.png\|\|height="526" width="556"]]
	155
26.2	156	image 4 modify project settings
	157
51.2	158	Now we can start to use this software. Here are some usage information for this software.
26.2	159
56.1	160	~1. add widget
26.2	161
51.2	162	To add a widget, you should click a widget you want to add at the area entitled “Widgets”. In image , demonstrate a add process of label, button, and image 5.
26.2	163
51.2	164	[[image:image-20240928111412-6.png\|\|height="526" width="864"]]
26.2	165
51.2	166	image 5 add widgets
26.2	167
56.1	168	2. modify widget
26.2	169
51.2	170	The area for modifying widgets is called "Inspector". There are four parts in the "Inspector" tab. We use three of them more frequently, excluding "COMPONENT". The second part is aimed at adjusting the layout, size, position, alignment, flags, and states, etc. of widgets. The name of the second part indicates the type of widget it is representing, and in image 6, it is "BUTTON".
26.2	171
51.2	172	[[image:1727485118799-984.png]]
26.2	173
51.2	174	image 6 the button widget's "Inspector" tab
26.2	175
51.2	176	Second part: "Layout" means a auto position-management for widgets contained in the parent widget. "Transform" includes size, position and align modification.
26.2	177
51.2	178	[[image:1727485251053-655.png]]
26.2	179
51.2	180	image 7 the button widget's "BUTTON" tab
26.2	181
51.2	182	Third part: It is an area of style setting.
26.2	183
54.1	184	Fourth part: It is an area for adding events. In image 8, it is adding a click event to a button. If the button is clicked after the click event is added as shown in image 8, the current screen will fade into another specified screen, and the switching process will last 500ms.
26.2	185
51.2	186	[[image:1727485480434-713.png\|\|height="395" width="290"]]
26.2	187
51.2	188	image 8 add event for button
	189
56.1	190	3. change label widget content
51.2	191
54.1	192	Modify the content in text as shown in image 9, the text content of label widget will be changed accordingly.
51.2	193
	194	[[image:image-20240928090825-1.png\|\|height="327" width="391"]]
	195
	196	image 9 modify text content of label widget
	197
56.1	198	4. Add image into project
51.2	199
	200	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.
	201
	202	[[image:image-20240928113424-9.png\|\|height="355" width="505"]]
	203
	204	image 10 add image file into SquareLine Studio project
	205
	206	[[image:image-20240928114139-10.png\|\|height="559" width="810"]]
	207
	208	image 11 use image widget in SquareLine Studio
	209
56.1	210	5. The relationship between widgets
51.2	211
	212	There are two common relationships between widgets: one is parallel, the other is parent-child. The parallel relationship means that widgets' relative position is based on a collective object of reference. In parent-child relationship, the parts of the child object that are outside the boundaries of the parent object are not visible by default. Therefore, we need to adjust the position of the child object so that it falls within the range of the parent object, allowing it to be seen as illustrated in image 13.
	213
	214	[[image:1727486567182-334.png\|\|height="318" width="278"]]
	215
	216	image 12 move label1 to make label1 widget be a child of button1 widget(1)
	217
	218	[[image:image-20240928112001-8.png\|\|height="431" width="796"]]
	219
	220	image 13 move label1 to make label1 widget be a child of button1 widget(2)
	221
56.1	222	6. Preview the final effect
51.2	223
	224	An advantage of this kind of software is that you can edit the UI with quick previews. In other words, it provides a way of combining graphical programming with simulation immediately.
	225
	226	[[image:1727487368023-281.png]]
	227
	228	image 14 click on the triangle icon to start or end the simulation
	229
	230	For more detailed usage, please visit the official link: [[SquareLine Studio 1.4.2 Documentation ~\| SquareLine Studio>>url:https://docs.squareline.io/docs/squareline/]].
	231
	232
26.2	233	== 2.4 Integrate UI Code to ESP-IDF Project ==
	234
56.1	235
26.2	236	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.
	237
	238	[[image:1727229798126-306.png]]
	239
51.2	240	image 15 export UI file
26.2	241
51.2	242	[[image:1727229821582-258.png\|\|height="333" width="662"]]
26.2	243
51.2	244	image 16 exported UI file
26.2	245
51.2	246	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	247
54.1	248	[[image:image-20240928144830-11.png]]
26.2	249
51.2	250	image 17 open CMakeLists.txt
26.2	251
51.2	252	[[image:1727229892636-154.png\|\|height="521" width="407"]]
26.2	253
51.2	254	image 18 modify CMakeLists.txt
26.2	255
	256	The last step of integrating is adding two lines of code in main.c file.
	257
	258	[[image:1727229926561-300.png]]
	259
51.2	260	image 19 add "ui.h"
26.2	261
	262	[[image:1727229955611-607.png]]
	263
51.2	264	image 20 add "ui_init()"
26.2	265
56.1	266
51.2	267	== 2.5 Brief introduction of hello world project ==
2.1	268
56.1	269
51.2	270	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.
	271
56.1	272
51.2	273	== 2.6 Test Result ==
	274
56.1	275
26.2	276	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	277
51.2	278	[[image:1727488067077-684.png\|\|height="402" width="574"]]
26.2	279
51.2	280	image 21 screen1
26.2	281
51.2	282	[[image:1727488157579-949.png\|\|height="397" width="572"]]
26.2	283
51.2	284	image 22 screen2
26.2	285
56.1	286
5.1	287	= 3. Example Project 1: LoRa Central Display =
2.1	288
7.1	289	[[image:image-20240916101737-1.png\|\|height="468" width="683"]]
2.1	290
7.1	291
8.1	292	= 4. Example Project 2: LoRaWAN RS485 Alarm =
2.1	293
75.1	294	(% class="wikigeneratedid" %)
	295	= 5. The way to add a new panel to project =
2.1	296
75.1	297	~1. Design a panel in SquareLine Studio, using image 5.1 below as a reference.
	298
	299	[[image:image-20241121113445-1.png\|\|height="584" width="934"]]
	300
	301	image 5.1 a panel about water_leak
	302
	303	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.
	304
	305	[[image:image-20241121141120-4.png\|\|height="383" width="795"]]
	306
	307	image 5.2 ui files exported
	308
	309	3. Delete or rename some file. Here are the steps:
	310
	311	3.1 Delete the 'components' directory.
	312	3.2 Delete 'filelist.txt'.
	313	3.3 Delete 'ui_helpers.c' and 'ui_helpers.h'.
	314	3.4 Rename 'ui_ScreenMain.c' in the 'screens' directory to 'ui_water_leak_style.c'.
	315	3.5 Rename the 'screens' directory to 'styles'.
	316
	317	[[image:image-20241121151934-10.png\|\|height="303" width="792"]]
	318
	319	image 5.3 rest file 1
	320
	321	[[image:image-20241121142925-7.png\|\|height="141" width="793"]]
	322
	323	image 5.4 rest file 2
	324
	325	4. Open this project in vscode.
	326
	327	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.
	328
	329	[[image:image-20241121181957-17.png\|\|height="438" width="516"]]
	330
	331	image 5.5 before add
	332
	333	[[image:image-20241121182239-18.png\|\|height="520" width="518"]]
	334
	335	image 5.6 after add
	336
	337	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.
	338
	339	[[image:image-20241121171629-11.png]]
	340
	341	image 5.7 before-modified font file
	342
	343	[[image:image-20241121171901-12.png]]
	344
	345	image 5.8 modified font file
	346
	347	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.
	348
	349	[[image:image-20241121172714-13.png]]
	350
	351	image 5.9 before-modified image file
	352
	353	[[image:image-20241121172908-14.png]]
	354
	355	image 5.10 modified image file
	356
	357	7. Modify the ui_water_leak/CMakeLists.txt. Open this file, and modify it from image 5.11 to image 5.12.
	358
	359	[[image:image-20241121180030-15.png]]
	360
	361	image 5.11 before modification
	362
	363	[[image:image-20241121180517-16.png]]
	364
	365	image 5.12 after modification
	366
	367	8.
	368
	369
	370
	371
	372
	373
	374
	375
	376
	377
	378
2.1	379	= 6. FAQ =
	380
7.1	381	== 6.1 ==
2.1	382
	383
	384	= 7. Order Info =
	385
4.4	386	== 7.1 Part Number ==
2.1	387
56.1	388
4.4	389	Part Number: (% style="color:#4472c4" %)LTS5
2.1	390
	391
4.4	392	== 7.2 Packing Info ==
2.1	393
56.1	394
4.4	395	Package Includes:
2.1	396
4.4	397	* LTS5 HMI Touch Screen
	398	* 5V,2A DC Power Adapter.
	399	* USB Type C Program Cable
2.1	400
	401	= 8. Support =
	402
56.1	403
2.1	404	* 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.
	405	* 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]].
	406
	407	= 9. Reference material =
	408
56.1	409
4.2	410	* Datasheet
	411	* Source Code
4.3	412	* Mechinical
2.1	413
	414	= 10. FCC Warning =
	415
	416
	417	This device complies with part 15 of the FCC Rules.Operation is subject to the following two conditions:
	418
	419	(1) This device may not cause harmful interference;
	420
	421	(2) this device must accept any interference received,including interference that may cause undesired operation.
	422

Wiki source code of LTS5 LoRa HMI Touch Screen

Applications

Navigation