Categories
Uncategorized

7 Free Resources for Embedded UI Design

7 Free Resources for Embedded UI Design

Designing an embedded HMI’s User Interface (UI) and User Experience (UX) can be a daunting task. We hate that the old adage is true: Engineers make great musicians, not so great graphic designers. Just because we are engineers doesn’t mean that all hope is lost. We’ve compiled seven free resources to equip you and your creative team (if you’re lucky enough to have one), with an arsenal to leverage when drafting your UI design.

1. Color Swatches

A challenge often faced by developers creating their own UI designs is how to either select their color scheme or properly translate their companies brand colors onto an embedded system which is often far less capable than a modern computer or mobile device. You may now be wondering how to select an LCD friendly color swatch that closely matches brand colors. Google has a beautiful library of module LCD-friendly color swatches to choose from. Marketing teams can provide developers with Google Color Swatch hex codes that most closely match brand colors. This reduces coding/development time in color translation by preventing weeks of choosing and testing hex codes by trial and error. If there’s one rule we want you to remember, it’s our most important one; “utilize turnkey resources whenever possible.” It will spare you from going down numerous rabbit holes.
  • Developers & Engineers: Once you have your team’s color hex code preferences, you can apply those to your GUI development in SHIPTide. We’ve got more information on that here. Don’t have a team of UI designers? We can help. Contact us to request free mockup of one of your product screens.
  • Marketing Teams: Need ASE files for your Adobe Illustrator of Photoshop design files? Download them here.

2. PLACEHOLDER ICONS

Icons are the name of the game for intuitive UI design. However, don’t jump the gun and purchase Icons you may not need until later in the process. Instead, we recommend you download the Material Design Icons set (also provided by Google) to use as placeholders. Download icons in either white or black and use them as the placeholder for your UI development. Search for a specific action or use case here. A special note about Icons: There is a license note provided for Google Icons. If your legal team deems this acceptable for continued use in your product – follow their instructions. However, we recommend, that to protect your team and product, you engage in a small custom icon project with a graphic designer. This short-term project will save you many headaches downstream. Using your sample icons for what you’d like to use, and some others for design style preferences, you’ll be equipped to provide them with a strong design brief. Need help with this? Contact our team. We can help.

3. Royalty-Free Stock Photos

In need of great stock photos but don’t know where to start? We recommend using royalty free stock photos as early draft placeholders (or if your budget is small – as final photos). Once you have a final approach to the design approach, you can purchase other stock photos (if this is your marketing team and budget preference). The following are just some of our favorite royalty free stock photo sites: Note: We caution you to ensure your legal team reviews the license requirements before final GUI phase.

4. Free GUI BUilder

We can’t help but brag about our free graphic user interface (GUI) builder tool – SHIPTide. It’s specifically designed for developers, enabling them to completely specify all aspects of the user interface (UX, UI, layout, events, actions, and resources like fonts, images, hex codes, etc). Enjoy the benefits of quickly deploying testing of GUI architecture through this free software. Download here. We also provide a free arsenal of training videos for your use. Go ahead, we dare you not to try it.

5. Open Source & Multi-Language Fonts

We love quality open source resources that are intuitively built – so we may appear a little biased. You’ll understand why in a minute. Fonts can be a worrisome topic. While marketing teams enjoy the tailored look of a purchased font – those fonts are not open to thousands plus product uses and often come with heavy licensing restrictions. The alternative is to make a major investment in a custom, royalty free font. After we picked our jaws off the floor in that endeavor with our clients, we recommend the use of an existing resource: Google Noto Fonts. Our current favorite is the Noto Sans Display Condensed. We love how any of these fonts are responsive to language changes. Therefore, allowing you to scale the lifetime of your GUI with small layout tweaks in the future. Excited? Go ahead, download the full package here (warning, direct download).

6. PINTEREST – YES, YOU HEARD US RIGHT

After you stop laughing at our recipe pins, we want to encourage you to look at our UI Design Boards here. Pinterest can allow you and your creative team to quickly share inspiring product samples using leading UI design. We dare you not to copy our pins. In return, we won’t tell your colleagues about the lasagna recipe you’re about to pin as well.

7. FREE ILLUSTRATOR TEMPLATE

We’ve created UI templates to inspire you to leverage the above mentioned free resources. Quick here to download the right size illustrator file for your product module.

A Serious Tip for the Thoughtful Engineer

Don’t feel like you have to go it alone. Have more UI or UX questions about your product? We can help! Contact us .

Interested in accelerating your UI Design?

We can help! Our team of developers and graphic designers can become an extension of your own team – allowing you to move quickly and efficiently. Contact us to get started.
Categories
Uncategorized

The Anatomy of a Display Module: Software

THE ANATOMY OF A DISPLAY MODULE: SOFTWARE

Doing so reveals a non-trivial table of the software stacks required to build a display module:

 HARDWARE FEATURE SOFTWARE REQUIRED
 MCU, Flash, RAM
  • RTOS
  • Serial NOR Flash driver, partition manager & block mode driver abstraction
  • e.MMC Flash Peripheral driver, partition manager & block mode driver abstraction
  • File system
  • Transactional SPI Peripheral driver and abstraction (for Serial  NOR)
  • SDRAM driver and chip initialization
  • Timer driver
  • Power mode driver and manager
  • Watchdog driver
 LCD
  • Video controller driver
  • Hardware accelerator driver
  • Graphics primitives libraries
 Touchscreen
  • I2C driver
  • Touchscreen controller driver
  • Touchscreen application stack
  • GPIO driver
  • Interrupt controller driver
 Backlight
  • GPIO driver
  • PWM driver
 Embedded Peripherals
  • GPIO peripheral drivers and abstraction stack
  • ADC peripheral drivers and abstraction stack
  • UART peripheral drivers, packet serializers/deserializers, abstraction stack
  • PWM peripheral drivers
  • DMA peripheral drivers and arbitration stack
  • USB Host/Device peripheral drivers, stacks, class drivers, event frameworks
  • SPI peripheral drivers & abstraction layer
  • I2C peripheral drivers & abstraction layer
 Ambient light sensor
  • ADC driver & abstraction layer
  • Timer driver & abstraction layer 
Security and encryption engines
  • Cryptographic driver
  • Cryptographic libraries (AES, SHA-256,  etc.)
Board to Board Communication
  • RTOS
  • USB peripheral drivers, abstraction stacks, and classes
  • Memory manager
  • UART drivers
  • Ethernet peripheral drivers and abstraction stacks
  • Protocol stacks (USB, TCP/IP, TLS/SSL, MQTT)
  • Interrupt control

The above list is just a base list of all the software that is required to get a display module up and running and performing its basic functions. This doesn’t even include the software necessary to run the actual GUI and move the files and data to interact and controls the outside world. On top of this is higher-level software to manage and coordinate events, error conditions, and GUI assets such as fonts, images, and multi-language text. And further, bootloaders, upgrader systems, and various abstraction layers are wise to ensure your system is maintainable and somewhat portable to future hardware! Look at that base list again carefully. There are several components and software stacks on that list that are not trivial either. Can you imagine how much time it would take to develop each software stack for production if you started from scratch?

Starting a development effort of this magnitude would cost a small fortune if a team were to start from scratch or even use the “example” code from a silicon vendor. There are many silicon vendors who advertise “free libraries” and “free GUI tools” to supposedly make it “easy” to develop within their ecosystem. However, as you can clearly see so far, a free library or tool is only one piece of a much larger puzzle. The silicon vendor may save you some time in writing the GUI library but what use is it if you still have to architect, integrate and write tens of thousands of lines of code to use the “free” library? So, what can developers do to get to market quickly and not spend a fortune developing software? Teams can learn from Serious Integrated’s success by leveraging existing technologies and software stacks and then building their value-added capabilities on top of that foundation.

Every Serious Integrated HMI Module (SIM), under the hood, runs fully licensed, commercially robust software stacks including an RTOS, encryption libraries, USB and network connectivity stacks among many other software components. Serious leverages those existing and robust capabilities to jump start development and then built the HMI infrastructure components and capabilities that their clients needed on top of that foundation.

On top of all this commercial RTOS and stack software as well as the Serious HMI infrastructure, developers using a SIM can use the high-level SHIPTide software to quickly and easily develop their own HMI’s. They don’t need to understand what’s happening behind the scenes but instead can focus on the look and feel and the environmental interactions that are necessary for their application starting on day 1. This dramatically decreases development time and cost for applications that require a display and need to interact with their environment and communicate with the cloud. SHIPTide, along with the Serious Human Interface™ Platform (SHIP) firmware pre-installed on the modules, is much (much) more than a graphic library or a GUI development tool – it is everything you need to develop and deploy complete HMI applications without embedded software or hardware development at all.

If SHIP and SHIPTide sounds intriguing, you may want to check-out the getting started video that shows how to create and deploy a simple GUI in 60 seconds which can be found in the Training Videos section. In our next post, we’ll start exploring how the modern embedded software devleoperneeds to reframe their minds about the way they engineer their products.

A SERIOUS TIP FOR THE THOUGHTFUL ENGINEER

As we have seen in today’s post, there is a lot of software that is used to get a display module up and running. Creating all this software from scratch would take considerable time and money and allow a competitor that leveraged existing technologies to gain the advantage. To compete in today’s fast-paced and competitive market, can you leverage an existing display module like the SIM543 to accelerate your development cycle and beat the competition to market? What steps do you need to take to make sure you don’t waste time recreating the wheel?

Categories
Uncategorized

The Anatomy of a Display Module: Hardware

Blogs

The Anatomy of a Display Module: Hardware

Welcome to the inaugural Serious Integrated blog! Our hope is that these blogs will help reframe the way you think about developing embedded systems and lead you to develop more polished, efficient and modern embedded systems from user friendly human machine interfaces (HMI) through communication and control. Let’s kick-off this first blog with a look at the hardware that makes up the anatomy of a display module.

A display module is not just a Liquid Crystal Display (LCD) that will present a picture to a user and a touch screen for human interaction. A display module is a highly integrated real-time embedded system that is tuned to efficiently interact and communicate with its environment. The LCD and touch screen are certainly important, outward facing factors but behind the scenes, there is much more to a display module than meets the eye. Let’s examine the major hardware components that are included in a display module using the Serious Integrated Module 543 (SIM543) as an example.

Summary of Major Components

The display module is made up of several components which include:

  • The LCD
  • A touch screen
  • Touch controller
  • Backlight
  • Video controller
  • Hardware accelerators
  • Memory controllers
  • ADC/DAC’s
  • Embedded peripherals (SPI, I2C, UART, I2S, GPIO, etc.)
  • USB
  • An ambient light sensor
  • Security and encryption engines

It turns out that this isn’t even an exhaustive list but just a quick summary of the major components. The complete list can be gleaned from the SIM543 block diagram shown below:

SIM543 Block Diagram

 

A Deeper Dive

As you have probably already surmised, a display module is a complicated embedded system and not something that a development team should lightly decide to develop on their own. Let’s take a few moments to discuss a few of these major components.

First, let’s look at the SIM543’s heart, the Renesas Synergy™ S7G2 microcontroller. This real-time microcontroller provides the SIM543 module with an efficient, 32-bit microcontroller that provides all the peripherals and capabilities that one would expect from a modern real-time processor. These capabilities are made accessible to the HMI developer to communicate and interact with external devices through various peripheral interfaces. This makes it possible for the display module to interact in complex ways with its environment and even the cloud if the designer so desires. These capabilities are available through the 60-pin expansion connector or through other connectors available on the SIM.

As would be expected, the S7G2 has a very powerful graphics subsystem that can generate beautiful graphics and interface to a wide variety of LCD’s. To ensure that the graphics and application run smoothly, the SIM543 has several different memory sources that are available for application and storage purposes. These include an internal 3-megabyte flash storage for application code and graphics, an external 2 gigabyte e.MMC flash memory chip which expands this capability and then 640 kilobytes of internal RAM with an additional 32 megabytes of external SDRAM.

Each SIM will also vary slightly in the additional capabilities that are built into the display module. For example, the SIM543 also includes a piezo electric buzzer, an RGB LED and an ambient light sensor. These can be used in an HMI to notify a user audibly or visually that their device requires their attention or even to adjust the backlight duty cycle based on lighting conditions.

Simple & Elegant Interaction: 5 Connections

While the capabilities that are available in a SIM may at first seem a bit overwhelming, the SIM provides a simple and elegant manner for interacting with it. For example, examine the diagram below. You’ll quickly notice that there are just five connections that a developer needs to be familiar with. First, there is a device USB port that can be used to load a GUI, update the module’s firmware, and communicate with the module during development, production programming, and even in the final system. The SHIP programming port (SPP) also exposes the same USB device port but with a fast attach/detach magnetic connector generally used in the production line equipping of the module as it is installed in the final system. Next, depending on the application, a developer can use the JST 16-pin expansion connector and/or the FCI-60 pin expansion connector to interface to external devices such as control boards, communication devices and so on. The expansion capabilities are left only to the imagination and the requirements of the end application. Finally, there is also a USB host connector available on some models where an application may require an external USB thumb drive for in-system GUI and firmware updates.

As we’ve started to explore, there is far more to a display module than simply an LCD and touch screen. Properly utilizing these capabilities in an application successfully and quickly will dramatically depend upon the software that is used to develop the HMI and that runs the display module. In our next post, we’ll start exploring the software that is required to drive the SIM543 module along with the SHIP Tide software that allows a developer to quickly create an HMI.

A Serious Tip for the Thoughtful Engineer

As we have seen in today’s post, a display module is not a simple device. Developing one from scratch will take considerable time and be filled with unknown issues; For example, the ability to easily scale the solution and / or support multiple LCD’s. The quickest way to market is to leverage existing technologies and not try to create the entire solution yourself. Ask yourself where your value add is in the design and for everything else, leverage what already exists.