Product How-To on: Creating an embedded user interface with the Prism UI development toolkit - Embedded.com

Product How-To on: Creating an embedded user interface with the Prism UI development toolkit

Prism was created to provide a complete framework and toolset for designing and deploying advanced graphical interfaces on embedded systems, providing everything need to generate professional quality graphics for display on resource-constrained embedded targets. 

Prism includes a graphical drawing engine and widget set called the Prism Runtime Framework, and Prism also includes Prism Insight, a desktop application program used to quickly and easily create Prism applications.

Prism Runtime Framework incorporates a complete high-performance graphical drawing library and GUI widget set. This framework provides all of the necessary nuts and bolts to enable developers to create professional quality graphics for display on nearly any target system capable of graphical output.

Prism Runtime Framework allows incorporation of any number of fonts, images, strings and other assets seamlessly on your embedded target, with or without a file system. The widget set includes a wide variety of buttons, panels, scroll bars, text display and rich text editing controls, sliders, charts, graphs, animations, icons, and other graphical widget types.

Developers can easily add their own custom widgets to the framework. Any combination of input devices including keypad, keyboard, touch screen, mouse, and multi-touch capable input devices can be utilized within this framework.

Variations of Prism Runtime Framework are available for all color depths, screen resolutions, and hardware capabilities. Color depths ranging from monochrome to full 32-bit-per-pixel drawing with alpha channel are fully supported. Prism Runtime Framework is provided ready to run on an embedded target without requiring any underlying support.

Prism Runtime Framework is also provided in convenient desktop configurations, meaning that it is possible to build and execute a complete UI design in a Microsoft Windows or Linux/X11 environment well before the availability of your target hardware.

A simple data schema is a built-in component of the Framework. Graphical widgets can be data producers, data consumers, or both. Your system software can also easily produce or consume data to interact with the user interface.

This mechanism greatly simplifies the task of coding the functionality of your user interface, and reduces or even eliminates the man-hours required to “hook-up” your graphical widgets when using competitive toolkits.

The framework can be configured such that even when running on grayscale or low color depth displays, the software internally runs in hi color depth, thus enabling the advanced capabilities set.

The final graphical output is then down sampled to the compatible output color format. This allows sophisticated effects like alpha-blending and anti-aliasing to be accomplished even on color-depth limited target devices.

Combined, these components provide all of the necessary nuts and bolts to allow a developer to create professional quality graphics for display on nearly any target system capable of graphical output.

Prism Insight allows you to incorporate any number of fonts, images, strings and other assets seamlessly on your embedded target, with or without a file system. Insight allows you to graphically describe you UI appearance and function, and generates source code that build into your final application.

The Prism Runtime Framework widget set includes a wide variety of buttons, panels, scroll bars, text display and rich text editing controls, sliders, charts, graphs, animations, icons, and many graphical widget types. Any combination of input devices including keypad, keyboard, touch screen, mouse, and multi-touch capable input devices can be utilized with this framework.

The steps following describe how to use the various pages or modes of Prism Insight to design and deploy an embedded UI application.

Using Prism Insight to design a UI
There are two methods of creating your own user-interface. You can manually write software that makes calls into the Prism Runtime Framework, or you can use the Prism Insight program to visually design your interface and let Prism Insight generate the required source code for you.

This example demonstrates a very simple media player application project, but the concepts presented apply no matter what type of product you are actually building or how complex your application might be.

Prism Insight has three main modes of operation: Configuration Mode, Application Mode, and Resource Mode. Each mode is selected by clicking on the corresponding notebook tab in the top left of the workspace. When you first start Insight and open or create a project, Insight will be in Configuration Mode (Figure 1 below ).

Figure 1. Configuration Mode

In Configuration Mode, you can change settings that modify the Prism Core library build options and affect what services and features are available to your application.

With the evaluation package you are not allowed to modify the Prism library configuration settings because the library has been pre-built for you, but you might want to examine each configuration page to observe the types of options available. For example you can configure the target operating system, the target screen resolution and color depth, and the type of file system support (if any).

Next click on the “Application” tab of the Insight workspace to enter Application Mode. In this mode, the screens you are designing are displayed in the right-hand window, and the properties for these screens and their associated child controls are displayed in the lower left window. Click on the Module named “MainScreen”. You should now see a display similar to Figure 2 below :

Figure 2: Main Screen

The upper-left hand window is the Project window. This displays a tree-structured view of each screen and it’s child controls. The right-hand window is called the ScreenSim window, and it displays the actual screen you are designing.

You can select any graphical object by clicking on it in either the Project window tree view or the ScreenSim window. When you click on the top-level window or any child element, the properties of that object are displayed in the lower-left window, named the “Properties Window”.

Click on various objects to observe the types of properties settings that you can change. You can also click on any object in the right side WYSIWYG view, and move, drag, or resize that object to create the screen layout you require.

Next, click on the Resources tab of the Project window to enter Resource Mode (Figure 3 below ). Resources are strings, color, fonts, and graphics that are available to your application. In resource mode you can add resources and modify existing resources. The top-node of the Resource view is the String Table. Click on the “String Table” node and you will see the Insight String Table Editor displayed on the right, as shown here below:

Figure 3: Resource Mode

This editor allows you to define the static string resources used by your application. The StringTableEditor also allows you to define the languages your application will support, import and export the string table in various formats, and perform many other useful operations.

The Prism Core library always uses U16 character encoding internally, which means any application created using Prism is multi-language enabled. The Prism String Table Editor allows you to manipulate your string data in ASCII, U16, and UTF8 encoding formats.

The example project also includes two “Themes”. Themes are fonts, colors, and images (JPG, GIF, PNG, or BMP format graphics) that are used by your application. You can define as many themes as you like.

The example project uses two themes to introduce you to the theme concept, but most applications will use only one theme. When your project is built and running on your target, you can switch themes at run time or even load new themes from a file system or any remote source.

Each theme contains any number of image group folders, a font folder, and a color folder. Image Groups are simply logical groups of images. Many projects utilize hundreds or even thousands of images, and the image group folders are simply a method for organizing the graphics that you will use as part of your Insight application. For example you might have one image group for button graphics, another image group for backgrounds, and an image group for animations.

When you add an image to an image group, the source file can be PNG, JPG, GIF, or BMP format. Prism Insight immediately reads and decodes the source image to create a PrismBitmap which is the native image format utilized by the Prism Core library. The image is color converted to your target system color settings, dithered, and compressed depending on your settings for each image.

The Font folder contains the fonts that you have been added to project. You can create new fonts by clicking on the Font folder and clicking on the Render New Font button. This invokes the FontRender utility, which allows you to create new PrismFont resources from TrueType, BDF, or other input font types.

The color folder contains the Fixed, Default, and Custom colors for each theme. The Fixed colors are 16 pre-defined colors that are always available and cannot be modified. The Default colors are the colors used by various Prism panels and graphical widgets for drawing themselves when you have not specified a particular color for a particular graphical object. You can modify the Default colors to globally modify the colors used by your application.

The Custom colors are unique colors you have defined. You can define new colors and add them to the project by right-clicking on any Default or Custom color, or by clicking the Edit Default Colors or Edit Custom Colors buttons. Once custom colors are defined, you can assign them to any graphical object.

Generating Source Code
The best way to learn how to use Prism Insight is to simply experiment with the example project. Add new graphics, new screens, or new fonts and apply them to the graphical objects. To create an entirely new screen, switch to Application Mode, right click on the project name and select “Add Module” or use the Project|Add Module menu command.

When you are finished with your modifications, you can generate the source code for the application and build (compile and link) the application to make a new executable. The process is exactly the same when you are running on your embedded target, you will simply use a different toolset (compiler and linker) and link with a different version the Prism Core library.

To generate source code, go to Application Mode and right-click on any module name in the project view. Select the “Update Current Source Module” command. This command instructs Prism Insight to update the source file associated with this module.

If you have altered the resources used by the application, you will also need to generate a new resource file. Resource files contain your applications graphics, fonts, strings, and colors. Resource files can be in source code format to be compiled and linked with your application modules, or in binary format to be loaded from a filesystem or distributed via any electronic means.

To generate a new resource file, click the Resource tab of the Project window to go into Resource Mode. Click on the top-level project name or on any Theme to see the resource file generation options on the right. You have complete control over what is included in the project resource file.

You can select which themes to include, which languages, or whether or not to include the string table in your resource file, etc. Once you have made your selections, click the Generate Resource file button to generate the resource file.

Building an executable image. When you are done updating the source modules and resources, you simply use your own compiler/linker tools to build your application using the source files generated by Insight.

Ken Maxwell, president and cofounder of Blue Water Embedded , architected the PRISM GUI toolkit, an advanced GUI development solution targeting the embedded market. In Ken's 25 years of embedded software experience, he has targeted real-time software for graphical user interfaces, formerly founding Swell Software and authoring the PEG product line, as well as writing real-time software for robots and industrial control industries. He may be reached at info@bwembedded.com .

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.