Web Browser Asset

    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.

    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:

    1. Go the following webpage: http://get.adobe.com/flashplayer/otherversions/
    2. Select the row for your Windows operating system in Step 1.
    3. 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.
    4. Download and run the installer.
    5. Restart IntuiFace Player or Composer if they were running during Flash Player installation.
    6. Use the Default style of the Web Browser asset.

    Notes

    1. It is not sufficient to have already installed the Flash Player in Web browsers on each computer. The above steps must still be followed.
    2. Interactions with your Flash media will be limited to a single touchpoint. Multi-touch interactions are not supported.
    3. 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.

    Container_Property.jpg

    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)

    Web-browser-appearance-properties.jpg

    Controls

    • Show navigation bar   displays address bar and next/previous buttons under the browser
    • Scrollbars   specify whether to permit the appearance of vertical and horizontal scrollbars if required by the website. By default, IntuiFace hides scrollbars, but some websites require scrollbars to function properly.

    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   Specify how a webpage should interpret a finger swipe.
      • Scroll: 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.
      • 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   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.

    Web-browser-behavior-properties.jpg

    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.

    TransparentPixel.png

    The screenshot below illustrates the set of triggers and actions specific to the Web Browser Asset (click to zoom)
    Triggers-web-browser.jpg

    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 Pan and zoom and Scroll
    • 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.

    TransparentPixel.png

    The screenshot below illustrates the set of actions specific to the Web Browser Asset (click to zoom)
    Actions-Web-browser.jpg

    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 Maps, 3D objects and 360 degree HTML components

    Many Web components enable you to display and interact with 360° panorama (e.g. from krpano) and 3D content. To manipulate this kind of content on a touch display using the Web Browser Asset, you will likely need to set the Interaction mode property of the Web Browser asset to Pan and zoom. You can think of this setting as telling the Web Browser Asset to associate a finger swipe with left-mouse-click+drag; if set to "Scroll", a finger swipe is associated with the mouse wheel.

    The "Pan and zoom" setting was originally added to handle map interaction - like Google Maps - but can be applied to most components that require a pan & zoom touch interaction.

    3D Model rendering:

    The rendering of a 3D model is fully dependent on the GPU (Graphics card). Having a more powerful graphics card will allow you to smoothly manipulate bigger 3D models. We recommend the use of a GPU similar to GTX970 or higher for models having more than 30K facets. Otherwise, reducing the number of facets of your 3D model below 15k will improve performances.

    Play Local HTML files on Windows PCs

    Although you will typically be displaying online (live) HTML content in the Web Browser Asset, it is also possible - on Windows PCs - 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. This approach is particularly useful if there is more than one file containing local content.

    ExcelLocalFiles.jpg

    Through binding you can associate the Home page property of the Web Browser Asset to the appropriate cell in your Excel file. You can use a filter applied to the Excel spreadsheet in order to specify which page to display.

    NOTE : For security reasons, only specific file extensions in the Interface Asset folder are authorized for experience publishing. See this article for a list of permitted file types.

    To see the use of local HTML files in action, download this sample experience.

    IntuiFace Version 5: Choosing between Default and Legacy browser options

    In IntuiFace Version 5, on Windows PCs only, the Web Browser Asset lets you choose between one of two Web rendering engines. On all other supported platforms (iPad, Android, Chrome, Samsung SSP) there is only one browser option so the selection of a rendering engine is ignored.

    1. 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.
    2. 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.

    Known limitations

    On Windows PCs

    • MP4 videos are not supported. You can use the following formats with the respective encoding:
      • WEBM using Google/ON2's VP8 Video (VP80) codec
      • OGV using Xiph.org's Theora Video (theo) codec
    • 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, PDF, Webcam, geolocation & notifications 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 "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.