Description
IntuiFace provides an integrated Web browser for navigating the
Internet. This browser is based upon Chromium, fully supporting
HTML5, CSS3, JavaScript and WebGL.
To see the extent of our HTML5 support, just add a Web Browser
asset into your IntuiFace project and set its URL to http://www.html5test.com.
Windows PCs Only: Choosing between Default and Legacy browser
options
The Web Browser Asset, at its core, is a Web rendering engine.
On Windows, you can choose between one of two rendering engines. On
all other supported platforms (iPad, Android, Chrome, Samsung SSP,
webOS) there is only one browser option so the selection of a
rendering engine is ignored.
Default It's based upon the CefSharp Web rendering engine. This
is the style selected by default when adding the Web Browser asset
into your experience. First introduced in IntuiFace Version 5.3,
this engine is based on a very recent version of Chromium, the heart of the
Google Chrome browser.
Legacy It's based upon the Awesomium Web rendering engine. This
engine is based on a fairly old version of Chromium.
The only reason to choose Legacy is for
backwards compatibility with IntuiFace experiences built before
IntuiFace Version 5.3.
To switch between the Default and
Legacy options, open either the Quick Properties
or All Properties panel, click the icon in the upper left corner of
the panel and select the appropriate option.
Installation prerequisite for embedding Adobe Flash in the Web
Browser asset
NOTE: There is a dedicated Flash Animation
interface asset. You can see it here.
To enable Flash animations to operate correctly in the Web
Browser asset, you must download and install the Adobe Flash Player
on every PC running Composer and Player for Windows:
Go the following webpage: http://get.adobe.com/flashplayer/otherversions/
Select the row for your Windows operating system in
Step 1.
Select FP NN for Opera and Chromium -
PPAPI in Step 2.
NN = Any version. The version number does not matter. If more than
one version is listed, use the latest.
Download and run the installer.
Restart IntuiFace Player or Composer if they were running
during Flash Player installation.
Use the Default style of the Web Browser
asset.
Notes
It is not sufficient to have already installed the Flash Player
in Web browsers on each computer. The above steps must still be
followed.
Interactions with your Flash media will be limited to a single
touchpoint. Multi-touch interactions are not supported.
Some Web pages may not display correctly (cropping, incorrect
page rendering) due to limitations in the Web browser asset. Please
see below the list of known
limitations.
Proxy Settings
On Windows, the IntuiFace Web Browser asset uses the proxy
settings for Internet Explorer. To configure these settings, open
the Internet Options Control Panel and select the
Connections tab. Use the LAN
Settings section to update your proxy settings.
Clearing the browser cache
If you need to empty the cache used by the Web Browser asset,
delete all files in the following folder:
"Default" style of Web Browser asset:
%TEMP%\IntuiFace\CEF\cache where the
'%TEMP%variable is usually represented
byC:\Users{userName}\AppData\Local\Temp`
"Legacy" style of Web Browser asset:
%TEMP%\Awesomium\Cache where the '%TEMP%variable
is usually represented
byC:\Users{userName}\AppData\Local\Temp`
Properties Triggers &
Actions
Properties
See our list of common
properties for details about properties shared by all asset
types.
The Container property must be set to
Static or Pin to enable users to
scroll or zoom pages in the Web browser. If
Container is set to Pin, the user
must manually pin the browser in order to scroll or zoom
it.
Content & Container
Content
Home page defines the default starting
page when the Web browser is first displayed. For a webpage located
on your local file system, enter the path using the following
syntax:
file:///[drive letter]:/[folder name/[folder name]/.../[file
name]
For example:
file:///C:/ProjectFiles/Project_Five/test/index.html
NOTE: You need to treat this file path like a
URL. As a result, spaces must be replaced by %20. For example:
file:///C:/Program%20Files/Documents/Project_Five/test/index.html
Appearance
Web Browser
Webpage width To be properly rendered,
some webpages require a specific width – expressed in pixels
- rather than adjusting dynamically to any browser width. In such a
case, specify this width in pixels. NOTE: This width applies to
the webpage displayed inside the Web Browser Asset, not to the
container itself.
Zoom change the zoom level for content
within the browser
Navigation bar style – Navigation buttons style
– Address bar style
These properties enable you to define the appearance of the
navigation bar, buttons and address bar. The "Show navigation bar"
property (see below) must be checked for these style properties to
appear.
Flat bar / buttons are displayed with
no volume effect
Radius allows you to define the shape
of the bar / buttons from a rectangle (0) to an ellipse (50)
Fill color defines the fill color of
the bar / buttons
Outline color defines an outline color
for the bar / buttons
Font color defines the font color for
the text of the address bar (this property is only available for
the address bar)
Controls
Show navigation bar displays address
bar and next/previous buttons under the browser
Behavior
Web Browser
Allow scroll lets users scroll the
pages in the Web browser
Allow zoom lets users zoom the pages in
the Web browser
Allow navigation If set to true, links
to new webpages will be active. If set to false, no navigation from
the current webpage will be possible
Interaction mode (Version 3.6 or
later) Specify how a webpage should interpret a finger swipe.
Page pan and zoom: When the Web browser is static or
pinned, a finger swipe acts like the wheel of your mouse. For most
webpages, this is the appropriate setting.
Map pan and zoom: When the Web browser is static or
pinned, a finger swipe acts like left-click+hold-and-drag with your
mouse. This is the appropriate setting for webpages displaying
interactive maps or interactive Adobe Flash content. If you want to
prevent browsing to non-map/non-Flash webpages, either add the
current page's URL to the Navigation Whitelist
(see next property) or set the Allow navigation
property to false.
Navigation Whitelist (Version 3.6
or later) A list of semi-colon separated strings, each string
containing a URL or part of a URL. (e.g. intuilab.com;google.com)
Only webpages whose URL contains at least one string in the
Navigation Whitelist can be visited. Attempts to
navigate to any other URL will be forbidden. If this field is
empty, no URLs will be filtered.
Forms & URL entry
Allow form entry If set to true, the
user can fill out an online form. If set to false, typing into an
online form is blocked.
Allow entry of new URLs If set to true,
the user can type a new URL to navigate to another Web page at
runtime. If set to false, the entry of new URLs is blocked.
Display keyboard inside browser If set
to true, the keyboard is displayed within the Web browser page
itself. If set to false, the keyboard is displayed outside of the
Web browser page.
Keyboard Choose between two onscreen
keyboard layout options. The first, ALPHANUMERIC, is an
alphanumeric layout. The second, NUMPAD, enables the input of just
numbers.
Over 30 alphanumeric layouts are supported by IntuiFace. The
default layout reflects the language of the local device. For
example, if the operating system is set to display French then a
French keyboard layout is presented. To change the layout, open the
menu item Project -> Project
Settings at the top of Composer. Now change the
Keyboard language property to the language of
choice. This is a global setting.
Triggers
See Triggers Overview
to get details of common triggers shared by all assets
Web Browser specific triggers
Interaction mode changes: Raised when the
interaction mode is changed.
Is browsed back: Raised when the Web browser
is navigated backward.
Is browsed forward: Raised when the Web
browser is navigated forward.
Is reloaded: Raised when a user refreshes the
Web Browser.
Link is clicked: Raised when a link has been
clicked.
Loading is stopped: Raised when a user stops a
webpage from loading.
URL changed: Raised when the URL has been
changed.
Keyboard is hidden: Raised whrn the keyboard
is hidden.
Keyboard is shown Raised when the keyboard
becomes visible.
Detects disallowed navigation: Raised when the
"Allow Navigation" property is set to false and
the user clicks a link.
Detects submission of blacklisted URL: Raised
when the user attempts to navigate to a website not in the
white-list.
The screenshot below illustrates the set of triggers and actions
specific to the Web Browser Asset (click to zoom)
Actions
See Actions Overview to
get details of common actions shared by all assets
Web Browser specific actions
Backward: Go back to a previously loaded
page
Clear cache: Clears the cache of the web
browser.
Forward: Go forward in the web browser.
Open URL: Open a new URL in the web
browser.
Reload: Reload the current page in the web
browser.
Set interaction mode: Set the interaction mode
between Map pan and zoom and Page pan and
zoom
Stop loading: Stop the page load in the Web
browser.
Change home page: Replaces the Web browser's
defined homepage
Hide keyboard: Close the Web browser
associated keyboard.
Show keyboard: Open the Web browser associated
keyboard.
The screenshot below illustrates the set of actions specific to
the Web Browser Asset (click to zoom)
Tips and
Tricks
Not everything possible in a native Web Browser is possible
within IntuiFace - see Known Limitations
below - but sometimes there are special methods for making things
work.
Some objectives are discussed below. The items in the following
list are discussed on this page:
Open a Google Maps location in full screen
Avoid the username/password pop-up dialog box
Display only relevant portions of the browser using a
crop technique
Manipulate 360 degree
HTML components
Many web components will let you display a 360° panorama or
scene rendered from a 3D modeler. To be able to manipulate this
kind of content properly on a touch device using the Web Browser
asset, you will likely need to set the Interaction
mode property of the Web Browser asset to Map pan
and zoom.
This behavior was originally added to handle Google
Maps but can be applied to most components that require a
pan & zoom touch interaction.
You can generate 360° HTML panorama using tools such as
krpano.
Play local HTML files
Most of the time, you will display online (live) HTML content
using the Web Browser asset but it is also possible to display
local HTML content. You would need to do this, for example, if you
knew your device was going to be offline or if the HTML content was
only available locally.
The easiest approach to working with local HTML content is to
store relative paths to that content in an
Excel spreadsheet.
Through
binding you can associate the Home page
property of your Web Browser asset to the appropriate cell in your
Excel file. This approach is particularly useful if there is more
than one file containing local content. You can use a
filter applied to the Excel spreadsheet in order to specify
which page to display.
Known
limitations
On Windows PCs
No support for website links opened in a new browser window
(i.e. _blank)
Other than Flash, all plugin-based content such as Java,
Microsoft Silverlight, ActiveX and PDF are not supported.
If the Web Browser asset is somewhere on a multi-screen display
other than Screen 1, dropdown lists will not respond to touch
events. A mouse would have to be used.
Virtual keyboard input is not possible within Flash animation
(e.g. Flash-based forms will not work)
The "Open URL" action requires the entered URL to be preceded
by http:// or https://
No support for proxies or htaccess authentication
No support for multi-touch interaction in webpages or embedded
Flash animation. However, dual touch gestures are supported for Web
elements like interactive maps when setting the
Interaction mode property to "Map pan and zoom".
To permit use of a responsively designed website, the first
<html> or <head> tag of the
webpage should not contain any attribute. For example, if your
webpage contains tags such as : <html lang=en>,
the CSS media queries will be ignored and responsive capabilities
will not work. This snippet of HTML illustrates the correct
approach:
<!DOCTYPE html> <html> <head>
<title>My title</title> …
To adjust the size of a responsive webpage, use the "Webpage
width" property of the Web Browser asset, not the handle of the
container in Composer's edit window. Only by changing the
resolution, via the "Webpage width" property, will you trigger a
responsive adjustment of the webpage layout.
On iPad and Android tablets
See
this page for any existing limitations.
On Samsung SMART Signage
Platform.
See this
page for any existing limitations.