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

This getting started example demonstrates how to design and deploy a simple display UI for the LTS5 device. The example includes:

111

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.

115

116

117

By completing this demo, you will gain foundational knowledge for customizing the LTS5 interface and building more advanced IoT applications.

118

119

120

== 2.2 Install Software Running Environment ==

121

122

123

The **ESP MCU** supports development using **ESP-IDF**, **Arduino**, or **MicroPython**. For this project, we use **ESP-IDF** for compilation and **Visual Studio Code (VS Code)** as the development environment.

124

125

126

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

127

128

129

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

130

131

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

132

133

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

134

135

image 1 ESP-IDF extension install

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

139

140

=== 2.2.2 Install SquareLine Studio ===

141

142

143

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

144

145

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.

146

147

148

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

149

150

151

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.

152

153

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

154

155

image 2 create a SquareLine project

156

157

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.

158

159

[[image:1727229582471-566.png]]

160

161

image 3 project settings

162

163

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

164

165

image 4 modify project settings

166

167

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.

172

173

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

180

181

[[image:1727485118799-984.png]]

182

183

image 6 the button widget's "Inspector" tab

184

185

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

186

187

[[image:1727485251053-655.png]]

188

189

image 7 the button widget's "BUTTON" tab

190

191

Third part: It is an area of style setting.

192

193

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.

194

195

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

196

197

image 8 add event for button

198

199

**3. change label widget content**

200

201

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

202

203

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

204

205

image 9 modify text content of label widget

206

207

**4. Add image into project**

208

209

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.

210

211

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

212

213

image 10 add image file into SquareLine Studio project

214

215

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

216

217

image 11 use image widget in SquareLine Studio

218

219

**5. The relationship between widgets**

220

221

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.

222

223

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

224

225

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

226

227

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

228

229

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

230

231

**6. Preview the final effect**

232

233

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.

234

235

[[image:1727487368023-281.png]]

236

237

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

238

239

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

240

241

242

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

243

244

245

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.

246

247

[[image:1727229798126-306.png]]

248

249

image 15 export UI file

250

251

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

252

253

image 16 exported UI file

254

255

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

256

257

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

258

259

image 17 open CMakeLists.txt

260

261

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

262

263

image 18 modify CMakeLists.txt

264

265

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

266

267

[[image:1727229926561-300.png]]

image 19 add "ui.h"

[[image:1727229955611-607.png]]

272

273

image 20 add "ui_init()"

274

275

276

== 2.5 Brief introduction of hello world project ==

277

278

279

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.

280

281

282

== 2.6 Test Result ==

283

284

285

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.

286

287

[[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 =

297

298

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

299

300

301

= 4. Example Project 2: LoRaWAN RS485 Alarm =

302

303

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

304

305

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

306

307

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

308

309

image 5.1 a panel about water_leak

310

311

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

312

313

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

314

315

image 5.2 ui files exported

316

317

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

318

319

Step1 Delete the 'components' directory.

320

Step2 Delete 'filelist.txt'.

321

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

322

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

323

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

324

325

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

326

327

image 5.3 rest file (1)

328

329

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

330

331

image 5.4 rest file (2)

332

333

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

334

335

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.

336

337

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

338

339

image 5.5 extra_lib/CMakeLists.txt before add

340

341

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

342

343

image 5.6 extra_lib/CMakeLists.txt after add

344

345

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

346

347

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

348

349

image 5.7 before-modified font file

350

351

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

352

353

image 5.8 modified font file

354

355

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.

356

357

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

358

359

image 5.9 before-modified image file

360

361

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

362

363

image 5.10 modified image file

364

365

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

366

367

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

368

369

image 5.11 ui_water_leak/CMakeLists.txt before modification

370

371

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

372

373

image 5.12 ui_water_leak/CMakeLists.txt after modification

374

375

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

376

377

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

378

379

image 5.13 ui_water_leak.h (1) before modification

380

381

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

382

383

image 5.14 ui_water_leak.h (2) before modification

384

385

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

386

387

image 5.15 ui_water_leak.h (1) after modification

388

389

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

390

391

image 5.16 ui_water_leak.h (2) before modification

392

393

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

394

395

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

396

397

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

398

399

image 5.17 ui_water_leak.c (1) before modification

400

401

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

402

403

image 5.18 ui_water_leak.c (2) before modification

404

405

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

406

407

image 5.19 ui_water_leak.c (3) before modification

408

409

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

410

411

image 5.20 ui_water_leak.c (1) after modification

412

413

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

414

415

image 5.21 ui_water_leak.c (2) after modification

416

417

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

418

419

image 5.22 ui_water_leak.c (3) after modification

420

421

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

422

423

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

424

425

image 5.23 ui_water_leak_events_.h before modification

426

427

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

428

429

image 5.24 ui_water_leak_events_.h after modification

430

431

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

432

433

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

434

435

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

436

437

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

438

439

size_t index = panel->panel_obj_index;

440

441

deleteElement(&arr, index);

442

443

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

444

445

image 5.25 ui_water_leak_events_.c before modification

446

447

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

448

449

image 5.26 ui_water_leak_events_.c after modification

450

451

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

452

453

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

454

455

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

456

457

add '#include "ui.h"'

458

459

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

460

461

image 5.27 ui_water_leak_style.c (1) before modification

462

463

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

464

465

image 5.28 ui_water_leak_style.c (1) after modification

466

467

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

468

469

delete code as shown in image 5.29

470

471

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

472

473

image 5.29 ui_water_leak_style.c (2)

474

475

Step3. The image 5.30, 5.31 show the change.

476

477

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

478

479

image 5.30 ui_water_leak_style.c (3) before modification

480

481

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

482

483

image 5.31 ui_water_leak_style.c (3) after modification

484

485

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

486

487

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

488

489

image 5.32 ui_water_leak_style.c (4)

490

491

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

492

493

image 5.33 ui_water_leak_style.c (4)

494

495

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

496

497

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

498

499

image 5.34 ui_water_leak_style.c (5)

500

501

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

502

503

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

508

509

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

514

515

panel_with_type union_sensor;

516

517

union_sensor.panel_type = WATER_LEAK_TYPE;

......

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

522

523

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

532

533

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

534

535

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

536

537

image 5.39 sort.c (1)

538

539

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

550

551

552

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

553

554

555

== 7.2 Packing Info ==

556

557

558

**Package Includes**:

559

560

* LTS5 HMI Touch Screen

561

* 5V,2A DC Power Adapter.

562

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

568

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

569

570

= 9. Reference material =

* Datasheet

* Source Code

* Mechinical