DESIGN YOUR NEXT GRAPHICAL UI FOR INDUSTRIAL HMI APPLICATIONS USING NXP'S i.MX RT1170, GUI GUIDER AND LVGL - NXP Community
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
DESIGN YOUR NEXT GRAPHICAL UI FOR INDUSTRIAL HMI APPLICATIONS USING NXP’S i.MX RT1170, GUI GUIDER AND LVGL Justin Mortimer, Director of Marketing Shelby Unger, MCU Ecosystem Product Marketer MARCH 2021 PUBLIC NXP, THE NXP LOGO AND NXP SECURE CONNECTIONS FOR A SMARTER W ORLD ARE TRADEMARKS OF NXP B.V. ALL OTHER PRODUCT OR SERVICE NAMES ARE THE PROPERTY OF THEIR RES PECTIVE OW NERS. © 2021 NXP B.V.
AGENDA
• NXP and Industrial HMIs
• Graphics software for NXP MCUs
• Introduction to LVGL
− Features
− Using LVGL with NXP devices
• GUI design made easier with GUI Guider
− Overview of GUI Guider by NXP
PUBLIC 1
Industrial HMIs PUBLIC NXP, THE NXP LOGO AND NXP SECURE CONNECTIONS FOR A SMARTER W ORLD ARE TRADEMARKS OF NXP B.V. ALL OTHER PRODUCT OR SERVICE NAMES ARE THE PROPERTY OF THEIR RES PECTIVE OW NERS. © 2021 NXP B.V. 2 PUBLIC 2
2007
A P I V O TA L P O I N T F O R
EDGE COMPUTING
“A WIDESCREEN IPOD WITH TOUCH
CONTROLS; A REVOLUTIONARY MOBILE
PHONE; AND A BREAKTHROUGH
I N T E R N E T C O M M U N I C AT I O N S D E V I C E . ”
“AN IPOD, A PHONE, AND AN INTERNET
C O M M U N I C AT O R … A R E Y O U G E T T I N G
I T ? T H E S E A R E N O T T H R E E S E PA R AT E
DEVICES. THIS IS ONE DEVICE, AND WE
ARE CALLING IT ... IPHONE.“
-STEVE JOBS
PUBLIC 3
U S E R I N T E R FA C E E V O L U T I O N
PUBLIC 4
U S E R I N T E R FA C E E V O L U T I O N
PUBLIC 5
U S E R I N T E R FA C E E V O L U T I O N
PUBLIC 6
U S E R I N T E R FA C E E V O L U T I O N
PUBLIC 7
U S E R I N T E R FA C E E V O L U T I O N
PUBLIC 8
U S E R I N T E R FA C E E V O L U T I O N
PUBLIC 9U S E R I N T E R FA C E E V O L U T I O N
PUBLIC 105 T H WAV E O F C O M P U T I N G – A G E O F E D G E C O M P U T I N G
Mainframe Mini-Computer Personal Mobile Edge
Computing Computing Computing 5.0
10,000
4.0
Units Shipped (Millions)
100
3.0
2.0
1 1.0
0.01
1950 -
1960 -
1970 -
1980 -
1990 -
2000 -
2010 -
2020E -
Source: Jefferies
PUBLIC 11N X P H U M AN M AC H I N E I N T E R FA C E L E A D E R S H I P
One or more displays
Graphical User Interface
Video or image processing
SHOW
One or more microphones
Wireless or wired connection
Audio processing
to cloud or network services
Wake words
Encode or compress data CONNECT HEAR
Cloud-based speech recognition
Recognize some faces Speaker output
SEE SPEAK Audible alarms
Touch screens and buttons
FEEL
Pressure, motion, IR sensors
PUBLIC 12N X P ’ S L E AD E R S H I P I N G R AP H I C S
SHOW
PUBLIC 13N X P AD D R E S S E S A B R E AD T H O F H M I D I S P L AY O P T I O N S W I T H M C U S AN D M P U S
Multiple controls
and screens
• Complex animations and
screen transitions
• Full color
• High resolution
• Dedicated graphics hardware
Simple graphic elements
• Limited animations
• Low resolution
• Basic color
• Low power devices
ENTRY LEVEL UI ADVANCED UI
PUBLIC 14I N T R O D U C I N G I . M X R T 11 7 0 | U LT I M AT E E D G E P R O C E S S I N G M I C R O C O N T R O L L E R
High Performance per Watt; Machine Learning Increased Accessibility
Low Cost of Ownership at the Edge & Security
Performance
1 GHz Arm® Cortex®-M7 with 512 KB TCM
400 MHz Cortex-M4 with 256KB TCM IoT
6468 total CoreMarks Smart home
Consumer audio
Advanced Security Emerging consumer & retail
Secure Boot
High-Performance Crypto
Inline Encryption Engine (IEE)
On-The-Fly AES Decryption (OTFAD) Industrial
Tamper Detection Factory automation
Power & energy
Building control
Rich Integration Aerospace, defense & transportation
2MB SRAM Healthcare
2D GPU and 2D Accelerator
MIPI CSI / DSI
2 x 1Gbps Ethernet Automotive
In-vehicle HMI
Low Power Two-wheel motorcycle/scooter cluster
28nm FD-SOI Process
Optimized for both active power & leakage power
PUBLIC 15Graphics Software for NXP MCUs PUBLIC NXP, THE NXP LOGO AND NXP SECURE CONNECTIONS FOR A SMARTER W ORLD ARE TRADEMARKS OF NXP B.V. ALL OTHER PRODUCT OR SERVICE NAMES ARE THE PROPERTY OF THEIR RES PECTIVE OW NERS. © 2021 NXP B.V. 16 PUBLIC 16
G R AP H I C S M I D D L E WA R E C O M PA R I S O N
PROVIDER / UI DEVELOPMENT MCUXpresso SDK
TYPE BUSINESS MODEL OPTIMIZATION
PRODUCT TOOL INTEGRATION
Free pre-compiled libraries via NXP
Free MCUXpresso SDK (source code AppWizard - ✓
license available from SEGGER)
Free Open source GUI Guider PXP, VG Lite ✓
Developer seats, volume-based product Embedded Wizard
Premium
line license Studio
PXP, VG Lite ✓
Developer seats, volume-based product
Premium
line license
Storyboard Designer PXP, VG Lite ✓
Developer seats, volume-based product Qt Design Studio,
Premium PXP, VG Lite -
line license Qt Creator
Free via NXP MCUXpresso SDK (with Azure RTOS GUIX
Free
Azure RTOS ThreadX only) Studio
- ✓
PUBLIC 17LVGL PUBLIC NXP, THE NXP LOGO AND NXP SECURE CONNECTIONS FOR A SMARTER W ORLD ARE TRADEMARKS OF NXP B.V. ALL OTHER PRODUCT OR SERVICE NAMES ARE THE PROPERTY OF THEIR RES PECTIVE OW NERS. © 2021 NXP B.V. 18 PUBLIC 18
LV G L O P E N - S O U R C E G R AP H I C S L I B R A RY
• LVGL is a free and open-source graphics library providing
everything necessary to create rich embedded GUIs
• High-level UI technology
− Use with any microcontroller or display
− RTOS, External memory and GPU supported but not required
− Scalable to operate with little memory (80 kB Flash, 12 kB
RAM)
• Powerful building blocks
− API includes over 30 customizable widgets
− Set widgets’ appearances with styles
▪ Heavily inspired by CSS
▪ Styles can be animated when widgets change states
− Themes are available to help accelerate GUI design
• Support for advanced graphics effects such
as animations, anti-aliasing, opacity, and smooth scrolling
PUBLIC 19U S I N G LV G L O N N X P D E V I C E S
• Use the online MCUXpresso SDK
Builder to build a new SDK for a
supported platform
• Select Optional Middleware and include
LVGL
• Or download an SDK directly within
MCUXpresso IDE – LVGL will be
included automatically
PUBLIC 20LV G L – S U P P O R T F O R N X P H AR D WA R E AC C E L E R AT I O N
PXP VG Lite *
• PXP acceleration support is available in the • VG Lite acceleration support is available in
MCUXpresso SDK starting with version 2.8.2 LVGL GitHub repository
• Features: − Coming soon in the MCUXpresso SDK
− RGB565 color format • Features:
− Area fill + optional transparency − RGB565 color format
− BLIT + optional transparency − Area fill + optional transparency
− Color keying + optional transparency − BLIT + optional transparency
− Recoloring (color tint) + optional transparency
− RTOS integration layer
− Default FreeRTOS and bare metal code provided
* Note that only aligned buffers will be processed by the GPU
PUBLIC 21N X P M C U FAM I L I E S W I T H LV G L S U P P O R T
Graphics Display Interface /
Core Frequency Memory Resolutions
Acceleration Controller
2 MB SRAM eLCDIF LCDIFv2
Cortex-M7 and 1 GHz / 400 Up to WXGA
i.MX RT1170 2x Quad/Octal Mem Interface PXP GPU
Cortex-M4 MHz 1366x768
8/16/32-bit EMI MIPI-DSI
High Performance
Cortex-M33
200 MHz / 5 MB SRAM Up to XGA
i.MX RT500 and Fusion F1 GPU MIPI-DSI
200 MHz 2x Quad/Octal Mem Interface 1024x768
DSP
512 KB SRAM Up to WXGA
i.MX RT106x Cortex-M7 600 MHz PXP eLCDIF
8/16-bit EMI 1366x768
512 KB SRAM Up to WXGA
i.MX RT105x Cortex-M7 600 MHz PXP eLCDIF
8/16-bit EMI 1366x768
512 KB Flash, 200 KB RAM Up to XGA
Mainstream
LPC546xx Cortex-M4 220 MHz – LCDIF
Up to 32-bit EMI 1024x768
360 KB RAM LCDIF Up to XGA
LPC54S/540xx Cortex-M4 180 MHz –
Up to 32-bit EMI 1024x768
Up to FWVGA
LPC55S69 Cortex-M33 150 MHz 320 KB RAM, 640 KB Flash – SPI
Optimized
854x480
Power
1 MB SRAM, 2 MB Flash SPI or Up to FWVGA
K28 Cortex-M4 150 MHz –
32-bit EMI 8080 parallel with FlexIO 854x480
Note: - LCDIF, eLCDIF, and LCDIFv2 include parallel RGB display interface.
PUBLIC 22
- This table is not a comprehensive list of supported NXP microcontrollers.GUI Guider PUBLIC NXP, THE NXP LOGO AND NXP SECURE CONNECTIONS FOR A SMARTER W ORLD ARE TRADEMARKS OF NXP B.V. ALL OTHER PRODUCT OR SERVICE NAMES ARE THE PROPERTY OF THEIR RES PECTIVE OW NERS. © 2021 NXP B.V. 23 PUBLIC 23
GUI GUIDER
• New tool from NXP for developing ready-to-run
GUIs with open-source LVGL graphics library
− Download from www.nxp.com/gui-guider
• Free for use with NXP devices only
• Includes built in support for the following devices
(but can be used without a template):
− i.MX RT1050
− i.MX RT106x
− LPC54628
− LPC54018/S018
− i.MX RT1170 (coming soon)
− i.MX RT500 (coming soon)
PUBLIC 24E AS I LY C U S T O M I Z E G U I AP P E AR A N C E
• Drag-and-drop programming with
automatic code generation
• More than 30 LVGL widgets supported
• Modify widget properties for a unique
look and feel
• Use widgets in combination with custom
images and fonts
PUBLIC 25AD D E V E N T S AN D AN I M AT I O N S
• Use events and actions to define
GUI behavior
• Option for custom action code
• Animate widget properties and
transitions
PUBLIC 26B U I LT I N S U P P O R T F O R N X P D E V E L O P M E N T B O AR D S
• Several NXP development boards
fully supported in GUI Guider
• Option to enable/disable hardware
acceleration
• Reference demo examples available
PUBLIC 27M U LT I P L E WAY S T O S I M U L AT E G U I B E H AV I O R
GUI Guider simulator for quick evaluation of Run GUI application directly on supported
GUI appearance and behavior target development board
PUBLIC 28U S E S E A M L E S S LY W I T H M C U X P R E S S O S O F T WA R E AN D T O O L S
Export
Include code in project
Generated Code
GUI Guider
Build & Debug
Target Board
MCUXpresso IDE PUBLIC 29GET STARTED NOW
1. Explore i.MX RT1170 Crossover MCUs
− https://www.nxp.com/IMXRT1170
2. Download GUI Guider
− Website: https://www.nxp.com/gui_guider
− Training: https://www.nxp.com/guider_training
3. Learn more about LVGL
− NXP Website: https://www.nxp.com/lvgl
− Online community: https://forum.lvgl.io/
− LVGL blog: https://blog.lvgl.io/
− Learn LVGL: https://lvgl.academy/
PUBLIC 30NXP, THE NXP LOGO AND NXP SECURE CONNECTIONS FOR A SMARTER WORLD ARE TRADEMARKS OF NXP B.V. ALL OTHER PRODUCT OR SERVICE NAMES ARE THE PROPERTY OF THEIR RESPECTIVE OWNERS. © 2021 NXP B.V.
You can also read
