KioWare - Kiosk System Software - Documentation

See All User Docs

KioWare | Platform: Windows® | Version: 6.8.0

Configuration Tool

Tool Bar Designer:

For applications which require user interface features such as navigation buttons, an address bar, or custom url link buttons, the Tool Bar Designer is a WYSIWYG editor used to create multiple tool bars.

The following screenshot shows a top tool bar with an embedded logo, an address bar and a busy indicator, and left tool bar with forward, backward, home and logoff navigation buttons.

Tool Bars

Add Tool Bar

There are two ways to create a new toolbar:

Click the mouse right button, select Add Tool Bar
Click the Add Tool Bar button.

To create a new tool bar, the tool bar docking position (top, bottom, left or right) and tool bar name needs to be entered. The tool bar name is purely informational and useful when multiple tool bars are defined. Refer to the following screenshot.

Note: there is a 50 toolbar limit.

Edit Tool Bar

There are three ways to edit a tool bar:

Click the tool bar to highlight it, click the Edit Tool Bar button, then select the tool bar to be edited from the displayed list (refer to the following screenshot).
Click the tool bar to highlight it, click the mouse right button, select Edit Tool Bar
Doubleclick the tool bar.

Top/Bottom Tool Bar

Name

Enter a name that describes the tool bar (ex, Top Tool Bar). This information is purely for informational purposes and is particularly useful when multiple tool bars are being used.

Size and Position

Height

Enter the height of the tool bar in pixels

Full Screen Width

If checked, the tool bar will be the entire width of the screen

Width

If not full screen width, then enter the width of the tool bar in pixels

Left Offset

If the tool bar is not full screen width, but needs to offset from the left screen edge (ex, because of a left tool bar that is full screen height), enter the offset in pixels.

Docking

The position of the tool bar can be docked either to the top or the bottom of the screen.

Skin

Background Color

Click the Change button to select a background color for the tool bar

Text Color

Click the Change button to select a default text color for the tool bar

Background Bitmap

If checked, a bitmap will be used for the background of the tool bar. Click the Change button to select the bitmap image. Image file must reside in the skins directory.

Left/Right Tool Bar

Name

Enter a name that describes the tool bar (ex, Top Tool Bar). This information is purely for informational purposes and is particularly useful when multiple tool bars are being used.

Size and Position

Width

Enter the width of the tool bar in pixels

Full Screen Height

If checked, the tool bar will be the entire width of the screen

Height

If not full screen height, then enter the height of the tool bar in pixels

Top Offset

If the tool bar is not full screen height, but needs to offset from the top screen edge (ex, because of a top tool bar that is full screen width), enter the offset in pixels.

Docking

The position of the tool bar can be docked either to the left or the right of the screen.

Access List

KioWare has the capability to display tool bars only on certain pages, and access control lists are the means for defining which tool bars to display.

Add URL

Add a new domain to the list of URLs that will either enable or prevent the display of the tool bar

Add Page

Add a new page to the list of pages that will either enable or prevent the display of the tool bar

Delete URL

Delete a domain from the list of URLs

The list of URLs can either enable or prevent the display of the tool bar. Within an individual enabled URL, the optional list of pages can be used to further enable or prevent display of the tool bar.

Skin

Background Color

Click the Change button to select a background color for the tool bar

Text Color

Click the Change button to select a default text color for the tool bar

Background Bitmap

If checked, a bitmap will be used for the background of the tool bar. Click the Change button to select the bitmap image. Image file must reside in the skins directory.

Delete Tool Bar

There are three ways to delete a tool bar:

Click the tool bar to highlight it, then click the Delete Tool Bar button
Click the tool bar to highlight it, click the mouse right button, then select Delete Tool Bar
Click the Delete Tool Bar button and select the tool bar from the displayed list (refer to the following screenshot).

Controls

Add Control

There are three ways to create a new control:

Click the tool bar to highlight it, then click the Add Control button.
Click the tool bar to highlight it, click the mouse right button, select Add Control
Click the Add Control button, select the tool bar.

Select the control to add from the list. Refer the following screenshot.

Control List
Forward	Button: go to next page in history list
Back	Button: go to previous page in history list
Home	Button: go to the startpage URL
Print	Button: print the page
Logoff	Button: end the user session
Busy Indicator	Display: series of images that rotate during page load
Refresh	Button: refresh the current page
Address Bar	Input Box: enter URL
Scroll Down	Button: scroll down the page
Scroll Up	Button: scroll up the page
Scroll Right	Button: scroll right on the page
Scroll Left	Button: scroll left on the page
Custom Link	Button: navigate to a defined URL
Exit	Button: exit KioWare (Note: not recommended for most applications)
Text Label	Display: text to display
Picture	Display: bitmap image to display
Volume Up	Button: turns speaker volume up
Volume Down	Button: turns speaker volume down
Phone Dialer	Button: enables phone dialing
Phone Status	Display: available to .Net addin developers to set phone status info images
Virtual Keyboard	Button: displays the keyboard configured in the Keyboard/Printing tab section of the config tool. However this keyboard is different than other types. This keyboard looks the same but will work with non-HTML elements, such as Flash, PDF and other programs. This button will use the default configured keyboard unless a keyboard access list is set up that has a match for the particular domain/page you are currently on.

Note: there is a 100 control limit per toolbar.

Edit Control

There are four ways to edit a control:

Click the control to highlight it, click the Edit Control button
Click the control to highlight it, click the mouse right button, select Edit Control
Doubleclick the control.
Click the Edit Control button, select the toolbar and control from the displayed list (refer to the following screenshot)

Navigation, Refresh, Print, Scroll, Logoff and Exit Buttons

Description

Enter a name that describes the button (ex, Forward). The description is displayed when button labeling is enabled.

Position

Left Edge

Pixel coordinate of the left edge of the button. Zero is the left edge of the toolbar.

Right Edge

Pixel coordinate of the right edge of the button. Zero is the left edge of the toolbar.

Top Edge

Pixel coordinate of the top edge of the button. Zero is the bottom edge of the toolbar.

Bottom Edge

Pixel coordinate of the bottom edge of the button. Zero is the bottom edge of the toolbar.

Use height and width of bitmap

If checked, the right edge and bottom edge coordinates will be calculated from the size of the bitmap

Label

Label the control

If checked, the control Description will be displayed below the control.

Word Wrap Width

The number of characters to display before wrapping to a new line.

Change Font

Select the font name, style and size for the label

Skin

Image used for the button. If no image is specified a default bitmap image will be used. Depending on the behavior of the button, there can be an up, down or disabled image associated with the button. Image files must reside in the skins directory.

To use custom skins in KioWare, if you havn't done so already, set the skin directory

Change

Click the Change button to associate a different skin image with the control

Skin Filenames
Button	Button Up	Button Down	Disabled
Forward	Forward-Off.bmp	Forward-On.bmp	Forward-Disabled.bmp
Back	Back-Off.bmp	Back-On.bmp	Back-Disabled.bmp
Home	Home-Off.bmp	Home-On.bmp	n/a
Print	Print-Off.bmp	Print-On.bmp	n/a
Logoff	Logoff-Off.bmp	Logoff-On.bmp	n/a
Refresh	Refresh-Off.bmp	Refresh-On.bmp	n/a
Exit	Logout-Off.bmp	Logout-On.bmp	n/a
Scroll Down	ScrollDown-Off.bmp	ScrollDown-on.bmp	n/a
Scroll Up	ScrollUp-Off.bmp	ScrollUp-On.bmp	n/a
Scroll Right	ScrollRight-Off.bmp	ScrollRight-On.bmp	n/a
Scroll Left	ScrollLeft-Off.bmp	ScrollLeft-On.bmp	n/a

Custom Skins

When creating the images, follow these rules:

Images must be .bmp or .png files
They must end with, -Off, -On, or -Disabled depending upon what it will be used for
Examples: phone-Off.bmp phone-On.bmp

Changing Skins Walkthrough

Changing skins has several important steps that must be followed in order for everything to work properly.

The first step is to create skin images. Button skins have 3 states:

1. Off/Up - When the button is NOT pressed.
2. On/Down - When the button IS pressed.
3. Disabled - Only applies to Back and Forward.

These images must be named a certain way and be in a certain format (BMP, PNG).

Naming:

You need to create at least Off and On state images for each button. The off state image filename must end with -Off and the on state image must end with -On, as seen in the table above.

**Note: Many people make the mistake of naming their images as "image-On.bmp.bmp" because Windows Explorer, by default, will not show file extentions for files that it recognizes. Be careful not to put an extra extension on your image files.

Format:

Images must be saved by your image editor as either Bitmap/BMP or PNG.

Tip: If you want buttons that will look nice with rounded edges and such, create images that are 32 bit (has transparency) and save them as PNG's.

Note: You cannot simply put a .bmp or .png on the end of the file. It must be encoded/saved in the actual format.

The next step is to set the skins directory. All of your skin images must be copied into your skins directory, which could be anywhere on your machine. After choosing a location for your skins, set the skins directory in the designer by pressing the Options button.

Now when you press the Change button for the Skin when editing a button your skins should show up in the list.

Address Bar

Description

Enter a name that describes the address bar (ex, Address Bar). The description is purely for information purposes.

Position

Left Edge

Pixel coordinate of the left edge of the button. Zero is the left edge of the toolbar.

Right Edge

Pixel coordinate of the right edge of the button. Zero is the left edge of the toolbar.

Top Edge

Pixel coordinate of the top edge of the button. Zero is the bottom edge of the toolbar.

Bottom Edge

Pixel coordinate of the bottom edge of the button. Zero is the bottom edge of the toolbar.

Use height and width of bitmap

If checked, the right edge and bottom edge coordinates will be calculated from the size of the bitmap

Busy Indicator

Description

Enter a name that describes the busy indicator (ex, Busy). The description is purely for information purposes.

Position

Left Edge

Pixel coordinate of the left edge of the busy indicator. Zero is the left edge of the toolbar.

Right Edge

Pixel coordinate of the right edge of the busy indicator. Zero is the left edge of the toolbar.

Top Edge

Pixel coordinate of the top edge of the busy indicator. Zero is the bottom edge of the toolbar.

Bottom Edge

Pixel coordinate of the bottom edge of the busy indicator. Zero is the bottom edge of the toolbar.

Use height and width of bitmap

If checked, the right edge and bottom edge coordinates will be calculated from the size of the bitmap

Skin

Images used for the busy indicator. If no image is specified a default bitmap image will be used. Depending on the behavior of the button, there can be an up, down or disabled image associated with the button. Image files must reside in the skins directory.

Change

Click the Change button to associate a different skin image with the control

Skin Filenames

busy0000.bmp - busy0015.bmp (upto sixteen images)

Note: For custom skins, button image names are constrained only by having '0000' - '0015' at the end of the filenames.
The first image name cannot be 0001, it MUST be 0000.

Custom URL

Description

Enter a name that describes the button (ex, KioWare). The description is displayed when button labeling is enabled. The description is displayed in the context when enabled.

Position

Left Edge

Pixel coordinate of the left edge of the button. Zero is the left edge of the toolbar.

Right Edge

Pixel coordinate of the right edge of the button. Zero is the left edge of the toolbar.

Top Edge

Pixel coordinate of the top edge of the button. Zero is the bottom edge of the toolbar.

Bottom Edge

Pixel coordinate of the bottom edge of the button. Zero is the bottom edge of the toolbar.

Use height and width of bitmap

If checked, the right edge and bottom edge coordinates will be calculated from the size of the bitmap

Label

Label the control

If checked, the control Description will be displayed below the control.

Word Wrap Width

The number of characters to display before wrapping to a new line.

Change Font

Select the font name, style and size for the label

Link

Enter the URL that will be loaded when the button is clicked. Ex., http://www.kioware.com

Add link to the context menu

If checked, the control Description will be displayed on the context menu (mouse right click button).

Skin

Image used for the button. If no image is specified a default bitmap image will be used. There must be an up and a down button image, and the image files must reside in the skins directory.

Change

Click the Change button to associate a different skin image with the control

Skin Filenames
Button Up	Button Down
CustomLink1-off.bmp - CustomLink99-off.bmp	CustomLink1-on.bmp - CustomLink99-on.bmp

Note: for custom skins, button image names are constrained only by having '1-Off'/'1-On' - '99-Off'/'99-On' at the end of the filenames.

Text Label

Description

Enter a name that describes the label (ex, Title). The description is purely for information purposes.

Position

Left Edge

Pixel coordinate of the left edge of the label. Zero is the left edge of the toolbar.

Right Edge

Pixel coordinate of the right edge of the label. Zero is the left edge of the toolbar.

Top Edge

Pixel coordinate of the top edge of the label. Zero is the bottom edge of the toolbar.

Bottom Edge

Pixel coordinate of the bottom edge of the label. Zero is the bottom edge of the toolbar.

Label

Word Wrap Width

The number of characters to display before wrapping to a new line.

Change Font

Select the font name, style and size for the label

Picture

Description

Enter a name that describes the picture (ex, Logo). The description is purely for information purposes.

Position

Left Edge

Pixel coordinate of the left edge of the picture. Zero is the left edge of the toolbar.

Right Edge

Pixel coordinate of the right edge of the picture. Zero is the left edge of the toolbar.

Top Edge

Pixel coordinate of the top edge of the picture. Zero is the bottom edge of the toolbar.

Bottom Edge

Pixel coordinate of the bottom edge of the picture. Zero is the bottom edge of the toolbar.

Use height and width of bitmap

If checked, the right edge and bottom edge coordinates will be calculated from the size of the bitmap

Skin

Image to be displayed. Image file must reside in the skins directory.

Change

Click the Change button to select a different image.

Phone Dialer

The Phone Dialer control is a special kind of control that contains a phone number list to allow the user to dial specified numbers. If you checked Hide button when not active, the dialer button will only show up on the toolbar according to these conditions:
If you are using a dialing access list: You are on a page that matches the access list.
If not using a dialing access list: A call is activated on the page. Note: If the page is navigated away from, the button will be hidden again.

This list is just like the toolbar access list except that it pertains to phone dialing. If an entry in the list matches, the dialing button will be enabled, and when pressed, will call the number in the list that is assigned to the match.

If Show Numeric Dialing Pad is checked the user will be able to dial numbers during the call. This is useful when the user needs to interact with automated messages; (Press 1 for sales, Press 2 for support...).

If the dialer window is hidden, this button will flash, indicating that a call is in progress. It can then be pressed to show the dialer window again.

Control Alignment and Spacing

Left/Right Tool Bar

To align the left edge of a series of controls:

Select the controls to align by holding the Ctrl key and using your mouse to select the controls.
Click the mouse right button to display the tool bar context menu
Select Align left edge. Note: controls will be moved so that their left edge matches the position of the first control selected

To align the vertical spacing of a series of controls:

Select the controls to align by holding the Ctrl key and using your mouse to select the controls.
Click the mouse right button to display the tool bar context menu
Select Evenly space down. Note: controls will be moved so that they are evenly positioned vertically between the top and bottom controls.

Top/Bottom Tool Bar

To align the top edge of a series of controls:

Select the controls to align by holding the Ctrl key and using your mouse to select the controls.
Click the mouse right button to display the tool bar context menu
Select Align tops. Note: controls will be moved so that their top edge matches the position of the first control selected

To align the horizontal spacing of a series of controls:

Select the controls to align by holding the Ctrl key and using your mouse to select the controls.
Click the mouse right button to display the tool bar context menu
Select Evenly space across. Note: controls will be moved so that they are evenly positioned horizontally between the left and right controls.

Options / Skins Directory

Change

Click the Change skins directory. All images associated with button, busy indicator, toolbar background and picture controls must reside in one skins directory.

Button Mouse Over Highlighting

This feature will cause a highlight over every button on your toolbar when the mouse moves over it. Check Enable and then move the slider to the right if you want the highlight to be brighter.

Delete Control

There are four ways to delete a control:

Click the control to highlight it, then click the Delete Control button
Click the control to highlight it, then press the Delete keyboard key
Click the control to highlight it, click the mouse right button, then select Delete Control
Click the Delete Control button and select the tool bar, and then the control to be deleted from the displayed list (refer to the following screenshot).