Best Practices - Page Designer

Overview

Page Designer in Powervision makes it simple to design a full user interface without writing any code. Simply drag and drop widgets, gauges, text fields, and other objects onto the design canvas, then adjust their properties to create a functioning user interface.

This article will show you how to create an appealing UI using just the built in tools without importing any graphics.

Open this configuration and follow along as you work through this tutorial.          

1.1 Layers      

Layers are like sheets of stacked acetate. You can see through transparent areas of a layer to the layers below. Moving a Page/Tools/Widgets from one Layer to another is like sliding a sheet of acetate in a stack. There is a good animation to describe this in the Walkthrough Tutorial at the 10 Minute mark.

In Page Designer we have 5 layers in hierarchical order. The Overlay layer being the topmost layer and the Main layer the bottom layer. Best practice is to build Gauge screens in the Main layer, all your Menu’s in the Menu Layer, & Popups in the Popup Layer. Popups are typically used to temporarily display a message. The overlay layer is typically used to display highest priority information.

Use Opacity by setting the Alpha value in Custom Colors on an upper layers background to shade the layers below for a nice effect or use a gradient.

   

                               Main Layer Page                                                       Popup Layer Page

                                     

                                        Combined image with opacity on the Popup layer

 

1.2 Pages & Page Views        

The page can be considered a main screen. The same page can have multiple views of itself in the screen by creating page views. Only one page view is ever visible at a time. A Page view is a duplicate of the main page that shares the same graphical objects (assets) but may have one or more of the objects turned off. This is useful for making menus or stylized views of the same page and many other uses. Button functionality is unique to each page view which is very useful for navigation, menu selections, and many more. The PV780 and PV450 templates make use of this in the menu pages. Since the same assets are shared across all of the views if a change is needed you only have to do it in one place.

The following screens share many of the same assets, so instead of creating duplicates of these assets on multiple pages, creating new Page Views instead allows you to use the same assets across all of the views. Which asset is visible in each view is selected in the "Show in View" section of each individual page views properties.

 

1.3 Properties

Every page and object on the page has properties that can be set by the user to set the position and size, colors, data source, as well as a host of other items depending on the objects complexity. Simply select the object and its properties window will open up.

Always select "Show Advanced" at the bottom of the properties window to show every feature available. 

Don't forget to name the object using the recommended naming convention. This is especially important if you need to manipulate the object in scripting or using animation. Select "include in programming" if this is the case.     

            

2.1 Fonts 

Picking the right fonts will make the design more readable and give it a more professional look. 

Fonts can be added by clicking “Edit Font Groups” button in configuration tab.

Monospaced fonts are the preferred type for text gauges. In a monospaced font, each character is equally spaced, these fonts ensure that each digit in the gauge uses the same width or spacing no matter if the digit is a 1 or an 8. The following example is Google’s mono spaced font.

https://fonts.google.com/specimen/Roboto+Mono

The default font used in Powervision PrimSans is a monospaced font.

2.2 Color Scheme

Use a minimal number of colors to keep the display from looking too busy. If possible select colors from your marketing teams corporate color palette. For best outdoor visibility use a lighter background with darker text and gauge dials.

If the display will be used at night don't forget to select the proper colors for night mode. These usually include dark grays for gauge dials and orange-red for text, both of which will create less eye strain at night.

3.0 Toolbox: Widgets & Gauges

All the tools we can use in Powervision to create a page/screen are available here.

Use smart widgets to dynamically change text, images, and gauges. These allow you to have multiple views of the same gauge or object similar to pave views. The best example of this is to change the units on a rotary gauge based on a menu selection. See the PV780 Template oil gauge as an example.

3.1 Rectangle & Ellipse Widgets

A surprising amount of styling can be done using simple rectangles and ellipses. Foreground and background primitives in the properties of a rectangle/ellipse widgets can be used to differentiate between touched vs non touched states. Below are a couple of touch vs non touch states created using primitives in these widgets.

 

Use gradients to add dimension to your widgets. The color change can be subtle just to add appeal, or drastic to depict safe zones and warning zones in a bar gauge. Below are a few examples of gradient and radial fills.

  

This popup layer page was created entirely with Rectangle and Ellipse Widgets. The Semi-Transparent background is a Rectangle widget with Radial Gradient. The Popup Box is a black box with a crimson outline and the Crimson header was created using a foreground primitive. The Close Button is an Ellipse Widget.

 

3.2 Bar Gauge

• Revealing Bar Gauge: This can be achieved by filling a bar gauge from right to left, with a gradient rectangle widget underneath it with the same dimensions.

          100%              50% 

• Ruler: This can be created by attaching a white arrow to a bar gauge with no fill or no background.

                                  

• Sider: This can be created by filling a bag gauge to the respective touch position. In the image below, A crimson bar gauge is filled, and the white rectangle widget is moved to the respective touch spot using “Animate Position” action in programming.

                                  

• Curved Bar Gauges have similar properties when compared to bar gauges, with extra properties for the curve.

                                 

 

3.3 Rotary Gage

                                 

                                   This style of rotary gauge can be created with the following technique

• Create a large center hub (black circle in the middle)
• Set the background color to represent the dial with no outline
• Use rectangle widgets rotated at an angle in a container to mask off the bottom portion of the dial
• Set the needle width to zero at the hub then desired width at the dial to reverse so it points inward

3.4 Container Widget

A Container widget allows you to group multiple widgets and gauges together into one screen object. 

While animating multiple widgets at the same time, its easier to group them and animate the whole container than animating all the widgets separately. This is especially true when using the "visibility" property to show/hide an object.

When “Clip” property of a container widget is set to true, boundaries of that container will act as the clipping window. This is useful to create new shapes without having to create and import a graphic from a third party tool. Use Ellipses and Rectangles rotated and moved partially outside the bounding box to create new shapes as we did in the rotary gauge in section 3.3.

            A full circle is clipped into a portion of the circle by using clipping property in the following image.

                                 

 

3.5 Wormhole Widget

The Wormhole widget is used to share a single widget or a gauge across multiple pages. This allows the developer to make changes on the original widget/gauge and Powervision propagates these changes to all the wormholes. A Wormhole can be connected to a widget on any page or layer, select the "include in programming" checkbox and the widget will be available to the wormhole.

This is a very processor efficient method of reusing the same asset across multiple pages without having to create a duplicate copy each time.

Tip: Containers can be wormholed.

The screen below was created by using wormhole widgets collected together from several different pages.

                                   

 

3.6 List Widget

It is recommended to use list widgets to populate Lists (ex: DM1) in Powervision. This widget will have similar properties to a Container widget. The list widget can also be used to create menus. (Note: not available on iMX35 platforms.)