Wiki source code of LTS5 LoRa HMI Touch Screen

Version 60.1 by BoYang Xie on 2024/11/21 14:11

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
56.1	50
2.1	51	== 1.3 Specification ==
	52
56.1	53
4.9	54	LoRa:
	55
55.1	56	* Frequency Range: 870 MHz ~~ 960 MHz
	57	* TCXO crystal to ensure RF performance on low temperature
	58	* Maximum Power +22 dBm constant RF output
	59	* High sensitivity: -148 dBm
	60	* LoRa Tx Current: <90 mA at +17 dBm, 108 mA at +22 dBm
	61	* LoRa Rx current: <9 mA
4.9	62
4.7	63	WiFi:
	64
	65	* 802.11b/g/n
	66	* Up to 150 Mbps data rate in 802.11n mode
	67	* Support A-MPDU and A-MSDU aggregation
	68	* zero point four μ S protection interval
	69	* Working channel center frequency range: 2412~~2484 MHz
	70
	71	Bluetooth:
	72
	73	* Bluetooth V4.2 BR/EDR and Bluetooth LE standard
	74	* Class-1, Class-2, and Class-3 transmitters.
	75	* AFH
	76	* CVSD and SBC
	77
4.2	78	Display:
2.1	79
4.9	80	* 5.0 Inch , 800 x 480
	81	* IPS Capacitive Touch SCreen
4.11	82	* RGB color.
	83	* Display Area: 120.7*75.80 mm
2.1	84
	85	== 1.4 Power Consumption ==
	86
56.1	87
4.5	88	* External 5V DC power adapter
2.1	89
56.1	90
2.1	91	== 1.5 Storage & Operation Temperature ==
	92
56.1	93
4.10	94	* Operation Temperature: -20 ~~ 70°C (No Dew)
	95	* Storage Temperature: -30 ~~ 70°C (No Dew)
2.1	96
56.1	97
2.1	98	== 1.6 Applications ==
	99
56.1	100
2.1	101	* Smart Buildings & Home Automation
	102	* Logistics and Supply Chain Management
	103	* Smart Metering
	104	* Smart Agriculture
	105	* Smart Cities
	106	* Smart Factory
	107
56.1	108
51.2	109	= 2. Getting Started with Hello World =
2.1	110
5.1	111	== 2.1 About this demo ==
2.1	112
56.1	113
51.2	114	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	115
56.1	116
5.1	117	== 2.2 Install Software Running Environment ==
2.1	118
26.2	119	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	120
26.2	121	=== 2.2.1 Install VSCode and ESP-IDF extension ===
	122
56.1	123
26.2	124	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]].
	125
	126	Next, you need to install the ESP-IDF extension within VSCode. The detailed operation steps are illustrated in image 1.
	127
51.2	128	[[image:image-20240928110211-5.png\|\|height="508" width="866"]]
	129
26.2	130	image 1 ESP-IDF extension install
	131
	132	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]]
	133
56.1	134
5.1	135	=== 2.2.2 Install SquareLine Studio ===
2.1	136
56.1	137
26.2	138	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	139
26.2	140	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	141
56.1	142
26.2	143	== 2.3 Simple usage of SquareLine Studio and export UI code ==
2.1	144
56.1	145
26.2	146	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	147
51.2	148	[[image:image-20240928103357-2.png\|\|height="680" width="708"]]
28.2	149
51.2	150	image 2 create a SquareLine project
26.2	151
	152	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.
	153
	154	[[image:1727229582471-566.png]]
	155
	156	image 3 project settings
	157
51.2	158	[[image:image-20240928105309-4.png\|\|height="526" width="556"]]
	159
26.2	160	image 4 modify project settings
	161
51.2	162	Now we can start to use this software. Here are some usage information for this software.
26.2	163
56.1	164	~1. add widget
26.2	165
51.2	166	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	167
51.2	168	[[image:image-20240928111412-6.png\|\|height="526" width="864"]]
26.2	169
51.2	170	image 5 add widgets
26.2	171
56.1	172	2. modify widget
26.2	173
51.2	174	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	175
51.2	176	[[image:1727485118799-984.png]]
26.2	177
51.2	178	image 6 the button widget's "Inspector" tab
26.2	179
51.2	180	Second part: "Layout" means a auto position-management for widgets contained in the parent widget. "Transform" includes size, position and align modification.
26.2	181
51.2	182	[[image:1727485251053-655.png]]
26.2	183
51.2	184	image 7 the button widget's "BUTTON" tab
26.2	185
51.2	186	Third part: It is an area of style setting.
26.2	187
54.1	188	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	189
51.2	190	[[image:1727485480434-713.png\|\|height="395" width="290"]]
26.2	191
51.2	192	image 8 add event for button
	193
56.1	194	3. change label widget content
51.2	195
54.1	196	Modify the content in text as shown in image 9, the text content of label widget will be changed accordingly.
51.2	197
	198	[[image:image-20240928090825-1.png\|\|height="327" width="391"]]
	199
	200	image 9 modify text content of label widget
	201
56.1	202	4. Add image into project
51.2	203
	204	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.
	205
	206	[[image:image-20240928113424-9.png\|\|height="355" width="505"]]
	207
	208	image 10 add image file into SquareLine Studio project
	209
	210	[[image:image-20240928114139-10.png\|\|height="559" width="810"]]
	211
	212	image 11 use image widget in SquareLine Studio
	213
56.1	214	5. The relationship between widgets
51.2	215
	216	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.
	217
	218	[[image:1727486567182-334.png\|\|height="318" width="278"]]
	219
	220	image 12 move label1 to make label1 widget be a child of button1 widget(1)
	221
	222	[[image:image-20240928112001-8.png\|\|height="431" width="796"]]
	223
	224	image 13 move label1 to make label1 widget be a child of button1 widget(2)
	225
56.1	226	6. Preview the final effect
51.2	227
	228	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.
	229
	230	[[image:1727487368023-281.png]]
	231
	232	image 14 click on the triangle icon to start or end the simulation
	233
	234	For more detailed usage, please visit the official link: [[SquareLine Studio 1.4.2 Documentation ~\| SquareLine Studio>>url:https://docs.squareline.io/docs/squareline/]].
	235
	236
26.2	237	== 2.4 Integrate UI Code to ESP-IDF Project ==
	238
56.1	239
26.2	240	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.
	241
	242	[[image:1727229798126-306.png]]
	243
51.2	244	image 15 export UI file
26.2	245
51.2	246	[[image:1727229821582-258.png\|\|height="333" width="662"]]
26.2	247
51.2	248	image 16 exported UI file
26.2	249
51.2	250	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	251
54.1	252	[[image:image-20240928144830-11.png]]
26.2	253
51.2	254	image 17 open CMakeLists.txt
26.2	255
51.2	256	[[image:1727229892636-154.png\|\|height="521" width="407"]]
26.2	257
51.2	258	image 18 modify CMakeLists.txt
26.2	259
	260	The last step of integrating is adding two lines of code in main.c file.
	261
	262	[[image:1727229926561-300.png]]
	263
51.2	264	image 19 add "ui.h"
26.2	265
	266	[[image:1727229955611-607.png]]
	267
51.2	268	image 20 add "ui_init()"
26.2	269
56.1	270
51.2	271	== 2.5 Brief introduction of hello world project ==
2.1	272
56.1	273
51.2	274	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.
	275
56.1	276
51.2	277	== 2.6 Test Result ==
	278
56.1	279
26.2	280	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	281
51.2	282	[[image:1727488067077-684.png\|\|height="402" width="574"]]
26.2	283
51.2	284	image 21 screen1
26.2	285
51.2	286	[[image:1727488157579-949.png\|\|height="397" width="572"]]
26.2	287
51.2	288	image 22 screen2
26.2	289
56.1	290
5.1	291	= 3. Example Project 1: LoRa Central Display =
2.1	292
7.1	293	[[image:image-20240916101737-1.png\|\|height="468" width="683"]]
2.1	294
7.1	295
8.1	296	= 4. Example Project 2: LoRaWAN RS485 Alarm =
2.1	297
	298
	299	= 6. FAQ =
	300
7.1	301	== 6.1 ==
2.1	302
	303
	304	= 7. Order Info =
	305
4.4	306	== 7.1 Part Number ==
2.1	307
56.1	308
4.4	309	Part Number: (% style="color:#4472c4" %)LTS5
2.1	310
	311
4.4	312	== 7.2 Packing Info ==
2.1	313
56.1	314
4.4	315	Package Includes:
2.1	316
4.4	317	* LTS5 HMI Touch Screen
	318	* 5V,2A DC Power Adapter.
	319	* USB Type C Program Cable
2.1	320
56.1	321
2.1	322	= 8. Support =
	323
56.1	324
2.1	325	* 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.
	326	* 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]].
	327
56.1	328
2.1	329	= 9. Reference material =
	330
56.1	331
4.2	332	* Datasheet
	333	* Source Code
4.3	334	* Mechinical
2.1	335
56.1	336
2.1	337	= 10. FCC Warning =
	338
	339
	340	This device complies with part 15 of the FCC Rules.Operation is subject to the following two conditions:
	341
	342	(1) This device may not cause harmful interference;
	343
	344	(2) this device must accept any interference received,including interference that may cause undesired operation.
	345

Wiki source code of LTS5 LoRa HMI Touch Screen

Applications

Navigation