GUI Overview
Introduction
In this article, you will learn the recommended options for developing GUI (Graphical User Interface) with Torizon and the key aspects of deciding between them.
Choosing a GUI Framework
Take a look at useful resources for a smart framework selection process:
- Framework Options: concept, useful links of demos and documentation
- Framework Comparison: comparing integration, development, and performance aspects of the frameworks
- Comparison Aspects: a brief discussion about the factors used for comparison
Framework Options
GTK
Complete cross-platform widget-based toolkit for GUI, with a rich and open-source ecosystem.
Qt
Complete Framework with IDEs for GUI design and programming.
- Official Website
- Online Discussion
- Documentation
- Toradex Documentation (C++)
- Toradex Documentation (Python)
- Qt with Containers
Slint
Rust-based toolkit focused on high-performance and low memory footprint.
Flutter
Framework focused on building apps for multiple platforms from a single codebase.
Crank
Complete Framework with IDE.
JavaScript Web-Based
Run your GUI inside a browser. You will be able to use any of the thousands of available frameworks. Most used ones are:
- React
- Angular
- Vue.js
- Node (for backend)
Toradex provides easy integration of hardware-accelerated browsers with Torizon: check our Web Browser Documentation article.
Resources:
Other options
Other options include:
- LVGL: light UI framework with targeting resource-contrained devices. Supports Linux using Framebuffer
- WxWidgets: cross-platform GUI library for C++, with bidings for Python, Perl and Ruby
- Dear ImGUI : provides great 3D resources
Keep in mind that each Programming languange provides their own approaches for interacting with this libraries.
Framework Comparison
There are a few notable aspects of each GUI framework that can help you to make aware decisions.
Integration Aspects
| Community |
|
|
| |
|
|
|
|
| |
|
|
|
|
| |
| Community | Dart - can bind to other languages |
|
| |
|
|
|
|
| |
| Community | JavaScript, HTML & CSS triad |
|
|
Development & Performance Aspects
|
| Mostly code-based | Low |
| |
|
|
| Low |
| |
As advanced or as simple as needed |
| Mostly code-based | Low, it can run even on MCUs |
| |
|
|
| Mid |
| |
|
|
| Low |
| |
|
|
| High |
|
Comparison Aspects
When comparing GUI frameworks for your project, it is essential to consider different aspects according to the project's particular requirements. Take a look at the aspects above and how they can change your decision.
Cost & Support
The billing method and the price are the first aspect to consider: the companies behind the frameworks can charge per developer seat, per project, and/or by device. Open-source frameworks, while typically free to use, may require compliance with certain licensing terms or lack comprehensive technical support. Commercial frameworks, on the other hand, may involve upfront licensing fees or ongoing subscription costs but often offer dedicated support and additional features. The choice between open-source and commercial licensing depends on the project's budget and the level of support required. The total cost and escalation options should also make sense for the stage and size of your project.
Licensing costs are not the only ones to consider. Hardware demanding frameworks will impact the choice of the hardware, raising the total hardware cost. Choosing a framework that strikes the right balance between graphical richness and efficient resource utilization is important to avoid excessive hardware requirements and potential cost overruns.
Cost of delay due to difficult support or missing documentation should also be considered. Some frameworks provide intuitive and feature-rich development environments, speeding up the development process and reducing the associated costs. Others may require more extensive customization or have steeper learning curves, which can lead to increased development time and resources. Considering the available development resources and expertise within the development team is crucial to assessing the potential impact on costs.
Programming Languages
The programming language used to develop the GUI directly impacts development productivity, code maintainability, performance, and ecosystem support. Here are some factors to consider:
- Compatibility with Embedded Platforms: It is essential to select a programming language that is compatible with the target platform. Although you can make any language work with Toradex modules, there are supported templates for projects with Torizon OS.
- Development Productivity: Some languages provide higher-level abstractions, libraries, and frameworks that simplify GUI development and reduce the amount of code required. Consider the learning curve, available development tools, and community support for a language to gauge its impact on development productivity. Using one of the templates available for Torizon OS can speedup the learning process.
- Performance and Efficiency: Choosing a programming language that allows for efficient memory management and low-level hardware access can be important for achieving optimal performance.
- Ecosystem and Third-Party Libraries: Popular programming languages tend to have extensive libraries, frameworks, and toolchains specifically tailored for GUI development.
- Developer Skill Set: Consider the expertise and skill set of the development team when choosing a programming language for GUI development in embedded systems.However, it is also an opportunity to introduce new languages and expand the skill set of the team if the chosen language offers significant advantages or aligns better with the project's requirements.
Graphical Backend
The Graphical Backend refers to the underlying software and/or hardware components responsible for rendering and displaying graphics on the screen.
GUI frameworks often rely on specific graphics libraries to interface with the graphical backend. The availability and compatibility of these libraries with the target embedded platform can affect the choice of a GUI framework.
Some embedded systems have dedicated graphics hardware capable of accelerating graphics rendering tasks. In such cases, choosing a GUI framework that can leverage the hardware acceleration features can lead to improved performance and responsiveness. It's essential to consider whether the GUI framework supports the specific hardware acceleration capabilities provided by the graphical backend.
Future-proofness
Open source projects should provide great community support and documentation, as well as active community around it. Some paid frameworks are well supported by their providing companies, but longevity can be tightly coupled to strategic and unpredictable decisions. For instance, Microsoft is known to have short lived GUI frameworks, while GTK has a long live under community maintenance.
Final User Experience
The complexity of the user interface can play decisive role when deciding a GUI frameworks. Some frameworks can limit how rich a GUI can be, due to developing effort, hardware demand, or even due to concept limitation. Some aspects to consider regarding final user experience: visual appeal, responsiveness, performance, intuitiveness, and customizability.
Development Experience & Documentation
The development experience can relate directly to the cost and time to market since it affects the skill set needed for hiring and the productivity of the development workflow. Good documentation, support and overall development style of the framework should be carefully evaluated before deciding a GUI framework.
Design Experience
Some frameworks provides great separation between image/design code and behavior code. The overal need for decoupling between the graphical development and code development process should be evaluated before deciding a GUI framework. The resources for designing provided by the framework should also be considered. If rich GUIs are needed, developing and maintenance cost using hard-to-code frameworks will deserve attention and can drive a decision in favor of paid and simpler ones.
Hardware Demand
Embedded systems often have limited resources, including memory, processing power, and energy. The graphical backend's resource requirements and the efficiency of the GUI framework in utilizing these resources can be crucial factors.
Performance
While fast and responsive UIs are desirable, achieve good results depends mostly on the complexity of the UI and the efficiency of the GUI Framework in conjunction with the Graphical Backend. Some frameworks are great in using hardware acceleration, enabling great performance. Others frameworks can rely in simpler component sets to ensure performance. Some aspects to consider regarding the performance: rendering efficiency, event handling, responsiveness, memory footprint, and resource utilization.
Need Help?
If you need help deciding your GUI framework, we have a great Partner Network. They can help you with application and GUI development.
Contact Us so we can connect you with a suitable partner.
More Information
Slint
Slint's Fast and Easy UI Toolkit with Torizon and NXP i.MX 8 Apalis System on Module | EW2023
Flutter
Flutter on Embedded Linux