LTS5 LoRa HMI Touch Screen

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.

28

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.

30

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.

32

33

The LA66 LoRa module can be programmed to support either private LoRa protocols or the LoRaWAN protocol.

== 1.2 Features ==

* ESP32-WROOM MCU: 8MB RAM & 16MB ROM

39

* Dragino LA66 LoRa Module

40

* Support Private LoRa protocol or LoRaWAN protocol

41

* Support WiFi & BLE wireless protocol

42

* 5.0" HMI touch screen

43

* Support LVGL case. SquareLine program.

44

* Support RS485 Interface

45

* Open Source Project

* Wall Attachable.

* 5V DC power

* IP Rating: IP52

== 1.3 Specifications ==

**LoRa**:

* 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

**WiFi:**

* 802.11b/g/n

* 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

**Bluetooth:**

* Bluetooth V4.2 BR/EDR and Bluetooth LE standard

73

* Class-1, Class-2, and Class-3 transmitters.

* AFH

* CVSD and SBC

**Display:**

* 5.0 Inch , 800 x 480

80

* IPS Capacitive Touch SCreen

81

* RGB color.

82

* Display Area: 120.7*75.80 mm

83

84

== 1.4 Power Consumption ==

85

86

87

* External 5V DC power adapter

88

89

== 1.5 Storage & Operation Temperature ==

90

91

92

* Operation Temperature: -20 ~~ 70°C (No Dew)

93

* Storage Temperature: -30 ~~ 70°C (No Dew)

94

95

== 1.6 Applications ==

96

97

98

* Smart Buildings & Home Automation

99

* Logistics and Supply Chain Management

* Smart Metering

* Smart Agriculture

* Smart Cities

* Smart Factory

= 2. Getting Started with Hello World =

106

107

== 2.1 About this demo ==

108

109

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.

111

112

113

== 2.2 Install Software Running Environment ==

114

115

116

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.

117

118

119

=== 2.2.1 Install VSCode and ESP-IDF extension ===

120

121

122

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]].

123

124

Next, you need to install the ESP-IDF extension within VSCode. The detailed operation steps are illustrated in image 1.

125

126

[[image:image-20240928110211-5.png||height="508" width="866"]]

127

128

image 1 ESP-IDF extension install

129

130

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]]

131

132

133

=== 2.2.2 Install SquareLine Studio ===

134

135

136

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]].

137

138

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.

139

140

141

== 2.3 Simple usage of SquareLine Studio and export UI code ==

142

143

144

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.

145

146

[[image:image-20240928103357-2.png||height="680" width="708"]]

147

148

image 2 create a SquareLine project

149

150

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.

151

152

[[image:1727229582471-566.png]]

153

154

image 3 project settings

155

156

[[image:image-20240928105309-4.png||height="526" width="556"]]

157

158

image 4 modify project settings

159

160

Now we can start to use this software. Here are some usage information for this software.

**~1. add widget**

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.

165

166

[[image:image-20240928111412-6.png||height="526" width="864"]]

image 5 add widgets

**2. modify widget**

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".

173

174

[[image:1727485118799-984.png]]

175

176

image 6 the button widget's "Inspector" tab

177

178

Second part: "Layout" means a auto position-management for widgets contained in the parent widget. "Transform" includes size, position and align modification.

179

180

[[image:1727485251053-655.png]]

181

182

image 7 the button widget's "BUTTON" tab

183

184

Third part: It is an area of style setting.

185

186

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.

187

188

[[image:1727485480434-713.png||height="395" width="290"]]

189

190

image 8 add event for button

191

192

**3. change label widget content**

193

194

Modify the content in text as shown in image 9, the text content of label widget will be changed accordingly.

195

196

[[image:image-20240928090825-1.png||height="327" width="391"]]

197

198

image 9 modify text content of label widget

199

200

**4. Add image into project**

201

202

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.

203

204

[[image:image-20240928113424-9.png||height="355" width="505"]]

205

206

image 10 add image file into SquareLine Studio project

207

208

[[image:image-20240928114139-10.png||height="559" width="810"]]

209

210

image 11 use image widget in SquareLine Studio

211

212

**5. The relationship between widgets**

213

214

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.

215

216

[[image:1727486567182-334.png||height="318" width="278"]]

217

218

image 12 move label1 to make label1 widget be a child of button1 widget(1)

219

220

[[image:image-20240928112001-8.png||height="431" width="796"]]

221

222

image 13 move label1 to make label1 widget be a child of button1 widget(2)

223

224

**6. Preview the final effect**

225

226

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.

227

228

[[image:1727487368023-281.png]]

229

230

image 14 click on the triangle icon to start or end the simulation

231

232

For more detailed usage, please visit the official link: [[SquareLine Studio 1.4.2 Documentation ~| SquareLine Studio>>url:https://docs.squareline.io/docs/squareline/]].

233

234

235

== 2.4 Integrate UI Code to ESP-IDF Project ==

236

237

238

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.

239

240

[[image:1727229798126-306.png]]

241

242

image 15 export UI file

243

244

[[image:1727229821582-258.png||height="333" width="662"]]

245

246

image 16 exported UI file

247

248

Create a empty directory entitled "ui" in path "basic_prj/app_components/ui/", and then copy all UI code exported to this directory.

249

250

[[image:image-20240928144830-11.png]]

251

252

image 17 open CMakeLists.txt

253

254

[[image:1727229892636-154.png||height="521" width="407"]]

255

256

image 18 modify CMakeLists.txt

257

258

The last step of integrating is adding two lines of code in main.c file.

259

260

[[image:1727229926561-300.png]]

image 19 add "ui.h"

[[image:1727229955611-607.png]]

265

266

image 20 add "ui_init()"

267

268

269

== 2.5 Brief introduction of hello world project ==

270

271

272

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.

273

274

275

== 2.6 Test Result ==

276

277

278

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.

279

280

[[image:1727488067077-684.png||height="402" width="574"]]

image 21 screen1

[[image:1727488157579-949.png||height="397" width="572"]]

image 22 screen2

= 3. Example Project 1: LoRa Central Display =

290

291

[[image:image-20240916101737-1.png||height="468" width="683"]]

292

293

294

= 4. Example Project 2: LoRaWAN RS485 Alarm =

295

296

= 5. The way to add a new panel to project =

297

298

**~1. Design a panel in SquareLine Studio, using image 5.1 below as a reference.**

299

300

[[image:image-20241121113445-1.png||height="584" width="934"]]

301

302

image 5.1 a panel about water_leak

303

304

**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.

305

306

[[image:image-20241121141120-4.png||height="383" width="795"]]

307

308

image 5.2 ui files exported

309

310

**3. Delete or rename some file.** Here are the steps:

311

312

Step1 Delete the 'components' directory.

313

Step2 Delete 'filelist.txt'.

314

Step3 Delete 'ui_helpers.c' and 'ui_helpers.h'.

315

Step4 Rename 'ui_ScreenMain.c' in the 'screens' directory to 'ui_water_leak_style.c'.

316

Step5 Rename the 'screens' directory to 'styles'.

317

318

[[image:image-20241121151934-10.png||height="303" width="792"]]

319

320

image 5.3 rest file (1)

321

322

[[image:image-20241121142925-7.png||height="141" width="793"]]

323

324

image 5.4 rest file (2)

325

326

**4. Open this project in vscode.**

327

328

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.

329

330

[[image:image-20241121181957-17.png||height="438" width="516"]]

331

332

image 5.5 extra_lib/CMakeLists.txt before add

333

334

[[image:image-20241121182239-18.png||height="520" width="518"]]

335

336

image 5.6 extra_lib/CMakeLists.txt after add

337

338

**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.

339

340

[[image:image-20241121171629-11.png]]

341

342

image 5.7 before-modified font file

343

344

[[image:image-20241121171901-12.png]]

345

346

image 5.8 modified font file

347

348

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.

349

350

[[image:image-20241121172714-13.png]]

351

352

image 5.9 before-modified image file

353

354

[[image:image-20241121172908-14.png]]

355

356

image 5.10 modified image file

357

358

**7. Modify the ui_water_leak/CMakeLists.txt.** Open this file, and modify it from image 5.11 to image 5.12.

359

360

[[image:image-20241121180030-15.png]]

361

362

image 5.11 ui_water_leak/CMakeLists.txt before modification

363

364

[[image:image-20241121180517-16.png]]

365

366

image 5.12 ui_water_leak/CMakeLists.txt after modification

367

368

**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.

369

370

[[image:image-20241122094200-23.png]]

371

372

image 5.13 ui_water_leak.h (1) before modification

373

374

[[image:image-20241122094320-24.png||height="852" width="554"]]

375

376

image 5.14 ui_water_leak.h (2) before modification

377

378

[[image:image-20241122094600-25.png||height="1078" width="554"]]

379

380

image 5.15 ui_water_leak.h (1) after modification

381

382

[[image:image-20241122094719-26.png||height="941" width="583"]]

383

384

image 5.16 ui_water_leak.h (2) before modification

385

386

**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.

387

388

_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.

389

390

[[image:image-20241122102929-27.png||height="619" width="426"]]

391

392

image 5.17 ui_water_leak.c (1) before modification

393

394

[[image:image-20241122112838-30.png||height="551" width="628"]]

395

396

image 5.18 ui_water_leak.c (2) before modification

397

398

[[image:image-20241122110815-29.png||height="725" width="712"]]

399

400

image 5.19 ui_water_leak.c (3) before modification

401

402

[[image:image-20241122113158-31.png||height="872" width="677"]]

403

404

image 5.20 ui_water_leak.c (1) after modification

405

406

[[image:image-20241122113259-33.png||height="874" width="724"]]

407

408

image 5.21 ui_water_leak.c (2) after modification

409

410

[[image:image-20241122113359-34.png||height="804" width="746"]]

411

412

image 5.22 ui_water_leak.c (3) after modification

413

414

**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.

415

416

[[image:image-20241122134113-35.png||height="380" width="421"]]

417

418

image 5.23 ui_water_leak_events_.h before modification

419

420

[[image:image-20241122134420-37.png||height="201" width="283"]]

421

422

image 5.24 ui_water_leak_events_.h after modification

423

424

**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.

425

426

Step1. '#include "ui.h"'~-~->'#include "ui_water_leak.h"'

427

428

Step2. add code below in delete_object() function definition.

429

430

panel_all * panel = find_upper_by_SensorPanel(&arr,((lv_obj_t *)(e->user_data~)~)~);

431

432

size_t index = panel->panel_obj_index;

433

434

deleteElement(&arr, index);

435

436

[[image:image-20241122135023-38.png||height="358" width="372"]]

437

438

image 5.25 ui_water_leak_events_.c before modification

439

440

[[image:image-20241122135258-39.png||height="403" width="559"]]

441

442

image 5.26 ui_water_leak_events_.c after modification

443

444

**12. Modify ui_water_leak_style.c file.**

445

446

Step1. '#include "../ui.h"'~-~->#include '"../ui_water_leak.h"'

447

448

add '#include "../../sort.h"'

449

450

add '#include "ui.h"'

451

452

[[image:image-20241122141536-41.png||height="361" width="612"]]

453

454

image 5.27 ui_water_leak_style.c (1) before modification

455

456

[[image:image-20241122142129-42.png||height="386" width="613"]]

457

458

image 5.28 ui_water_leak_style.c (1) after modification

459

460

Step2. modify 'void ui_ScreenMain_screen_init(void)'~-~->'panel_with_type create_water_leak(uint8_t index)'

461

462

delete code as shown in image 5.29

463

464

[[image:image-20241122145620-44.png||height="757" width="671"]]

465

466

image 5.29 ui_water_leak_style.c (2)

467

468

Step3. The image 5.30, 5.31 show the change.

469

470

[[image:image-20241122152026-45.png||height="277" width="828"]]

471

472

image 5.30 ui_water_leak_style.c (3) before modification

473

474

[[image:image-20241122152542-46.png||height="293" width="830"]]

475

476

image 5.31 ui_water_leak_style.c (3) after modification

477

478

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).

479

480

[[image:image-20241122153958-47.png]]

481

482

image 5.32 ui_water_leak_style.c (4)

483

484

[[image:image-20241122154755-49.png||height="864" width="513"]]

485

486

image 5.33 ui_water_leak_style.c (4)

487

488

Step5. Delete event function in code which was just pasted in extra_lib/sort.h(The process is shown in image 5.34).

489

490

[[image:image-20241122155650-50.png||height="922" width="513"]]

491

492

image 5.34 ui_water_leak_style.c (5)

493

494

Step6. Add some lines of code in extra_lib/sort.h as shown in image 5.35.

495

496

[[image:image-20241122161934-51.png]]

image 5.35

Step7. Add a line of code in extra_lib/sort.h as shown in image 5.36.

501

502

[[image:image-20241122162852-53.png||height="330" width="529"]]

image 5.37

Step8. Add some code in ui_water_leak_style.c as shown in image 5.38 from line534 to line 576 in detail.

507

508

panel_with_type union_sensor;

509

510

union_sensor.panel_type = WATER_LEAK_TYPE;

......

lv_obj_set_x(union_sensor.panel_union.door.ui_PanelSensorDoor, x_by_index(index));

515

516

lv_obj_set_y(union_sensor.panel_union.door.ui_PanelSensorDoor, y_by_index(index));

return union_sensor;

[[image:image-20241122171211-54.png||height="635" width="792"]]

image 5.38

**13. Modify sort.c file.**

525

526

Add a line of code ~-~-'#include "ui_water_leak.h"' as shown in image 5.39 line 16.

527

528

[[image:image-20241122173718-56.png||height="378" width="579"]]

529

530

image 5.39 sort.c (1)

531

532

There are still some changes need to be done in sort.c, and omit here for the moment.

= 6. FAQ =

== 6.1 ==

= 7. Order Info =

== 7.1 Part Number ==

543

544

545

Part Number: (% style="color:#4472c4" %)LTS5

546

547

548

== 7.2 Packing Info ==

549

550

551

**Package Includes**:

552

553

* LTS5 HMI Touch Screen

554

* 5V,2A DC Power Adapter.

555

* USB Type C Program Cable

= 8. Support =

* 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.

561

* 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]].

562

563

= 9. Reference material =

* Datasheet

* Source Code

* Mechinical