CASE STUDY SNAPSHOT
Customer : A multinational in the domain of fire and safety catering to multiple geographiesSize : < 50
Project vertical : Consumer Electronics
Challenge : Need to develop Smartwatch GUI design on STM32 Platform
Solution : Port Sparklet Embedded Graphics library & design and develop UI for Smartwatch
Services Availed : Sparklet, UI/UX design services, Embedded Software Development Services
Tools and Technologies :
- Frameworks: Sparklet
- MCU: STMicro STM32H7A3 MCU
- Programming Language: C
- Development Tool: STM32CubeIDE
INTRODUCTION
Impressed by our HMI demonstrations in an event, a startup based out of India approached us with a requirement to develop UI framework for proof-of-concept development for their smart watch designs. Embien helped them achieve the STM32 based Smartwatch GUI design quickly and integrated with their business logic as well.
CHALLENGE
While the screen development and UI porting was fairly straight forward, the Sparklet port for STM32 MCUs was not available at that time. As the hardware was finalized already, and most of the functional logic was ready, Embien quickly had to port Sparklet on to the STM32 MCU and develop the PoC on top of that.
SOLUTION
Our Sparklet engineering team understood the requirements and took up the task of porting the embedded GUI library onto the STM32 MCU. The port was optimized for the underlying platform to utilize the ChromART DMA2D engine supported by the STM32 chip. All the other features of the Sparklet were tested to ensure seamless operation on the STM32 platform. All of our validation suites were run on the target platform and profiled. Functional and Performance issues identified were quickly fixed and a robust engine created.
Smartwatches
Wristwatches have evolved drastically ever since the last half-century – right from the discovery of digital watches in the 1960s to the ones we call “smartwatches” today. Smartwatches have become an integral part of our connected lifestyle. They are wrist-sized form factor devices that include all the functionalities of a smartphone and, are also capable of communicating with the cloud, and other streaming services via Bluetooth-connected smartphones (or) directly through Wi-Fi.
With the ever-growing demand for feature-rich wearables, OEMs have begun to boost their wearable performance by enhancing processor performance, improving battery life, upgrading monitoring and tracking features, enabling seamless connectivity, creating attractive user-friendly smartwatch GUI design and interfaces, etc., to stay ahead in the competitive market.
Embien Specialization in GUI Design and Development
Present-day manufacturers intend to attract tech-savvy millennials, young and elderly users by adding several health-monitoring features, and enabling real-time access to health status, biometrics, etc., in their wearable products. This can be achieved only by building UI screens that are user-friendly in nature. As a result, developers are expected to build user interfaces that can sense, process, and analyze multiple embedded sensor data, internally.
At Embien, our team has designed and developed intuitive GUI screens by incorporating the latest cutting-edge technologies for a variety of wearables and consumer electronic products. We minimized constraints by effectively assessing and enhancing UI prototypes & included user feedback in the primary phase of the test framework using an iterative approach. Apart from this, we created practical guidelines for effective user interface development, which will help improve the usability and elevate the overall user experience of user interface prototypes.
Sparklet architecture for STM32 port is captured below.
Sparklet architecture for STM32 port
This smartwatch was developed on a STMicro STM32H7A3 MCU microcontroller that is ideal for wearable device development. The display was a 1.78-inch TFT panel with touch support. It was a high-performance microcontroller with real-time capabilities that supports additional features like digital signal processing, low power/voltage operation, etc., Embien’s Embedded Graphics team developed a quick solution to enable easy integration of four different GUI screens using its Sparklet GUI Library. Flint – the IDE for Sparklet development, helped create multiple working simulations quickly and create the final smartwatch GUI design in a matter of few weeks.
Graphical User Interface Development for Smart Watches
As per the customer requirement, Embien designed and developed intuitive GUI screens for the STM32 based smartwatch. After brainstorming multiple wireframe ideas, we created the actual design using Photoshop - an industry leading image editing software. Once the customer approval was obtained, the final UI was rendered and exported as images. These images were imported in the Flint IDE and complete UI logic was developed without any major coding. Finally, the business logic was integrated, and firmware was made to run on the smart watch controller.
The below images depict some of the different GUI screens designed for the smartwatch, namely: Clock Screen, Menu Screen, Heart Rate Screen, and Result Screen:
 |
 |
 |
 |
The clock screen had different views – analog and digital – with the analog design having clock movement mimicking actual clock-hands. The interactive menu screen supported all touch interactions like swipe, slide, pinch etc. A Graph was used to display the acquired ECG data along with derived heart rate information. We incorporated smooth graphics and enabled features such as zoom-in, zoom-out, auto-scale supported. Fast anti-aliasing and auto-scaling was employed for a smooth rendering of the lines. An interface that presents the results of various activities like step count, calories burnt, etc., was displayed in a dynamic way using progress bar animations. Users were provided with options to set the desired goal to finish a task. Upon completion, users were given the honor in terms of the leader board.
BENEFITS
Embien’s Graphics team successfully designed and developed GUI Screens for the STM32 based smartwatch along with a well-developed mobile application interface within a short period of time.
- Power-Duo of Sparklet and Flint helped achieve this with minimal effort.
- Sparklet could be ported on to the target MCU quickly.
- Sparklet leveraged the underlying ChromART DMA2D acceleration available.
- Multiple UI design choices given to customer to choose from for the smartwatch GUI design.
- With multiple widgets and gesture support, a lively interface was designed.
CONCLUSION
With a highly modular and scalable design, it is possible to port our Sparklet embedded graphics library onto any target microcontroller. Embien has been working extensively with OEMs and Tier 1 vendors in enabling the latest features for their wearables, IoT Gateways, Home Security Systems, Industrial HMI’s, PoS Terminals, instrument clusters etc. Apart from its embedded hardware and firmware development skills, Embien's expertise in the field of UI/UX development has aided in building intuitive GUI screens for various electronic devices such as this STM32 based smartwatch GUI design.