Home Automation Graphics Instructions

This graphics library has been created to enable the creation of high quality web pages for viewing 
on a PC or on a touchscreen webpad which is running in full screen “kiosk” mode. Three types of 
objects are supplied:

1) Icons suitable for use in a home context, but some also usable in commercial applications

2) Buttons suitable for use with the icons and text; there are four colours (blue, glass, grey, and lilac), 
and four styles:
 Round  (also small grey round)
 Round ended long  (also blue large round ended long)
 Square
 Square ended long

There are in fact two sets of buttons for each colour; one set designed to be placed on the 
background elements supplied, and the other designed to be placed on the background colour 
recommended below. Two sets are required to avoid the edges of the buttons looking a little 
“ragged”, which occurs if they are placed on the wrong background colour. 

There are three versions of each button. This is to allow them to be made “dynamic”, displaying 
differently depending on whether momentarily “touched” or latched. This feature is not yet 
implemented in Niagara so you can choose whichever version you prefer and just use the one type.

The buttons have been sized to enable use on touchscreens for use with fingers, and to enable the 
icons (and/or text) to be super-imposed).

3) Backgrounds for use with the buttons; there are four colours (blue, glass, grey, and lilac) in two styles:
 Straight 
 Curved (wavy in the case of lilac)

The intention is to enable Niagara partners to easily create good looking web pages using the 
background elements with an appropriately shaded background colour for the remainder of the screen. 
These can be set in the GxPage background properties using RGB references:

Blue  use pale blue  = R:126, G:140, B:182
Glass  use white = R:255, G:255, B:255
Grey   use white = R:255, G:255, B:255
Lilac use pale lilac = R:229, G:203, B:229

Although other colours could be used, the ones given are recommended (there are .txt files in each 
folder with these details), because of the anti-aliasing applied to the button edges. This is particularly 
significant for curves, where a clean edge can only be achieved by use of anti-aliasing. 

The background elements have been sized for use on 800 x 600 pixel displays, and look best when 
viewed in full screen mode (selectable in IE6 from the ‘View’ menu).

Icons can be used on top of round or square buttons, or on their own. Use an image Px object and 
resize to cover the button it sits above. By enabling the binding option in its properties it can then 
be linked to another Px View, enabling single click (or finger touch) navigation. 

