Navigation Bar Settings

Settings


Show Navigation Bar

This setting allows you to decide whether to show Kiosk Pro's Navigation Bar on all pages of your presentation. 

Default: On

The Navigation Bar is located at the bottom of the iPad screen. The back and forward buttons allow the visitor to move within the navigation history of their session, as in a standard browser. The home button returns the visitor to the Homepage configured in Kiosk Pro's settings. In Basic, the Navigation Bar can also contain the print icon and custom links if enabled.

Some websites may require this type of navigation; however, you may prefer to hide these buttons and use a custom user interface built with HTML/JavaScript/CSS or only allow the visitor to navigate via the links on your page.

Our Plus and Enterprise versions allow you to show or hide the bottom navigation depending on the type of content being shown, which allows you more flexibility and control over when the bar is active.


Show Navigation Bar With

Updated in version 7.5 to add support for distinguishing between remote or local content

This setting allows more granular control of our Navigation Bar, allowing you to show it for only the file types you need. You can also choose whether to show it while viewing remote stored remotely or content stored locally for each type of file.

Default: All are set to On

This adds an extra level of control for users who prefer not to use the Navigation Bar for their main html content, but need a way for visitors to exit back from PDF's or other files that may not always contain their own navigation systems.

Standard Web Browser

Includes .html and other traditional web file types such as .php and .aspx. If a file type is not specifically defined in one of the categories below, it will be included in the standard web browser category.

PDF Files

Includes only .pdf files.

Presentation Files

Includes PowerPoint and Keynote files (.ppt, .pptx, .key).

Document Files

Includes .doc, .docx, .xls, .xlsx, and .txt formats.

Multimedia Files

Includes all unembedded audio, video and image files. This means that a link directly to an .mp4 video file would be included, but to an .html file with an embedded .mp4 video would not.

New Tab or Window

Includes pages opened as a new tab or new window, either via a "target=blank" attribute in HTML or via JavaScript. Please note that using the Back icon in the Navigation Bar may duplicate pages in the navigation history.


Show Icons

Coming in 8.2

These settings allow you to choose which icons should be included in the standard Navigation Bar. You can toggle the Home, Forward, Back and PDF Multipage icons.

Show Home Icon

This icon returns Kiosk Pro to your Homepage.

Default: On

Show Forward Icon

This icon moves forward in the navigation history.

Default: On

Show Back Icon

This icon moves backward in the navigation history.

Default: On

Show PDF Multipage Icon

This icon displays when a PDF is shown, allowing the visitor to view a thumbnail menu of all the PDF pages available.

Default: On

Icon Color

This setting allows you to change your Navigation Bar icon colors based on predefined choices.

Options:

  • Red (255,46,46)
  • Yellow (255,193,26)
  • Green (11,211,24)
  • Blue (42,170,220)
  • Light Grey (229,229,229) (default)
  • Dark Grey (133,133,133)
  • Black (35,35,35)
  • White (250,250,250)

Each color choice shows a thumbnail of the Home icon in that color, as well as the RGB code.

Note: This setting is not supported on devices running iOS 6 or earlier.


Bar Background

This setting changes the color of the bottom navigation bar background.

Default: 84,84,84

This setting must be filled out in R,G,B decimal format, separated by commas, and will not accept hexadecimal or other formats.

Custom Links

This feature allows you to add up to six custom links with labels of your choice to the Navigation Bar of Kiosk Pro. The Navigation Bar must be enabled to use this feature.

Navigation bar shown with three custom links, no button background color set.

Links are comprised of a label shown on the Navigation Bar button and a link address where you want the visitor directed when he or she presses the button.

Enable

Default: Off

RGB Button Background Color

This setting allows you to change the color for the link button backgrounds. If the setting is left blank, no button background is shown and label text appears directly on the navigation bar. This must be filled out in R,G,B decimal format, separated by commas, and will not accept hexadecimal or other formats.

Default: blank

RGB Text Color

This setting allows you to coordinate the color of your link text with your site or corporate color scheme. This must be filled out in R,G,B decimal format, separated by commas, and will not accept hexadecimal or other formats.

Default: 255,255,255 (white)

Label

The label text is shown on the navigation bar to identify each custom link. Each label must be paired with a matching link to be shown.

Label text that is too long will be cut off so you will want to check your links after you set them up to make sure none have been abridged.

To be shown, each label must be paired with a matching link. Links can direct to either:

  • remotely-stored content. In this case, the link is set as a full URL. For example, 'http://www.ipadkiosks.com'.
  • locally-stored content. In this case, the link is set relative to the Kiosk Pro Documents folder where the content is stored. For example, 'index.html'.

You can also use the following commands to mimic the actions of certain icons or to allow the user to refresh the page:

  • "kiosk://back" - for the back action
  • "kiosk://forward" - for the forward action
  • "kiosk://home" - for the home action
  • "kiosk://print" - for the print action
  • "kiosk://multipage" -for multipage view of PDFs (Please note that this link will not disappear on other types of pages like the multipage view in the standard navigation bar and so it is only recommended for use when the navigation bar will only be shown with PDF files or all kiosk content is in PDF format. )
  • "kiosk://refresh" - to refresh the page that the user is currently viewing

Custom Graphics

Note: If this setting is enabled, the standard Navigation Bar (as well as any custom links set) will not be shown.

This feature gives you the ability to fully customize the graphics and functionality of the Navigation Bar shown by Kiosk Pro by allowing you to set the height, define a background image and up to 8 icons (.png on transparent background so these can include text, an image or both) and associated links.

You can also define a highlight "up-state" background and/or icon image to display on specific pages.

Image files must be stored locally on the device in the Kiosk Pro documents folder and cannot be accessed on a remote server.

Enable

Default: Off

This setting allows you to determine the height of the touch area available for your custom Navigation Bar graphics. This is set in points, so if you're using an iPad with a Retina screen, your background and icon images should be twice the height of this. For example, for the default of 60 pt, your button would need to have a height of 120 px on a Retina screen.

Default: 60

Background Image

This is the default background image of your custom Navigation Bar. The width of the image should match the total width in pixels of the device you are using.

Highlight Background Image

This is the image for the highlighted up-state for the background of the Navigation Bar. The dimensions of the Highlight Background Image should match the dimensions of the regular Background Image. Only the area that matches the highlight folder(s) of a specific link will be shown.

Base Image

This is the image representing the icon and/or text associated with a link in the Navigation Bar. The image should be saved as a .png file with a transparent background.

The Base Image height should match the height set as the Navigation Bar Height. Since the Navigation Bar Height is set in points, you'll want the Base Image height to be the same number on a non-Retina screen or be twice the amount on a Retina screen.

Kiosk Pro automatically spaces icons by dividing the number of links set by the width of the screen (1024 x 768 px for non-Retina, 2048 x 1536 for Retina). On an iPad Air displayed in landscape orientation (2048 px) with all 8 links set, each touch area would be 256 px wide. If the number is not a whole number, round to the nearest whole number (i.e.7 links would be 146.29, round to 146). Link set 1 will be displayed furthest to the left of the screen with link set 2 to its right and so on.

If you want the navigation icons spaced apart further, you can use one or more fully transparent .pngs set as extra base images to provide spacing. For example, if your design looked like this:

you could make this happen by creating 7 Link sets, setting Link set 1 as your 'paint it' icon, Link set 2 as an empty 'blank.png' the same size, and repeat:

Highlight Image

This the image file representing highlighted up-state for the Base Image of a link. It will be shown when Kiosk Pro determines a match between the loaded URL currently being viewed and the Highlight Folder URL. The dimensions of the Highlight Image should match the dimensions of the regular Base Image and the image should be saved as a .png file with a transparent or matching background.

This is the URL Kiosk Pro will load when the area associated with this link set is touched. Links can direct to either:

  • remotely-stored content. In this case, the link is set as a full URL. For example, 'http://www.ipadkiosks.com'.
  • locally-stored content. In this case, the link is set relative to the Kiosk Pro Documents folder where the content is stored. For example, 'index.html'.

You can also use the following commands to mimic the actions of Kiosk Pro's standard Navigation Bar:

  • "kiosk://back" - for the back action
  • "kiosk://forward" - for the forward action
  • "kiosk://home" - for the home action
  • "kiosk://print" - for the print action
  • "kiosk://multipage" -for multipage view of PDFs (Please note that this link will not disappear on other types of pages like the multipage view in the standard navigation bar and so it is only recommended for use when the navigation bar will only be shown with PDF files or all kiosk content is in PDF format. )
  • "kiosk://refresh" - to refresh the page that the user is currently viewing

Highlight Folder

This is the URL Kiosk Pro will check when determining whether to show the highlight state of the background and/or the Base Image. This setting can be used with URL's at the domain level (as in http://www.example.com), the folder level (as in http://www.example.com/folder/ ), or the page level (as in http://www.example.com/folder/page.html).

Still stuck? How can we help? How can we help?