Skip to main content
Version: 8.1

Vision - Web Browser Component

" "

Component Palette Icon

" "

Description

The Web Browser component in Designer allows you to embed a full web browser inside of an Ignition Client. This component becomes available in Designer after you download the Web Browser module from the Inductive Automation's website. The Web Browser module installs the same way as any other modules. Once this component is added onto a window, it will behave just like any other web browser when it is inside a Client.

Client machines need to meet the following minimum requirements to use this component. The component may not work properly if the requirements are not met.

Operating System Requirements

note

This component utilizes JxBrowser. As a result it will only run on 64-bit operating systems that are supported by JxBrowser (ARM OS's are not supported at this time): https://jxbrowser-support.teamdev.com/docs/guides/introduction/requirements.html

Windows

  • Microsoft Windows 7, 8, 8.1, 10, Server 2008 R2, Server 2012/2012 R2, Server 2016, Server 2019, 64-bit.
  • Oracle (Sun) JRE 1.6.x and higher, 64-bit.

Linux

  • Ubuntu 14.04+, Debian 8+, RedHat Enterprise Linux 7, openSUSE 13.3+, Fedora 24+, 64-bit
  • Oracle (Sun) JRE 1.6.x and higher, 64-bit.
Required Linux Libraries

Missing Libraries
The Web Browser Component depends on an embedded version of the Chromium browser. Required dependencies on some Linux distributions, such libgcrypt and libgconf-2-4, are not bundled with the embedded browser and must be separately installed on the system. Running the following commands as applicable can resolve the issue:

sudo apt-get install libgconf-2-4
sudo apt install libgcrypt20

Consult the Chromium installation instructions for your distribution for more detailed information.

Mac OS X

  • Mac OS X 10.10.x - 11 (Intel)
  • Apple or Oracle (Sun) JRE 1.6.x and higher, 64-bit.

Properties

NameDescriptionProperty TypeScriptingCategory
BorderThe border surrounding this component. Options are No border, Etched (Lowered), Etched (Raised), Bevel (Lowered), Bevel (Raised), Bevel (Double), and Field Border.
Note: The border is unaffected by rotation.

Changed in 8.1.21
As of 8.1.21, the "Button Border" and "Other Border" options are removed.
Border.borderCommon
EnabledIf disabled, a component cannot be used.boolean.componentEnabledCommon
FTP Proxy PortFTP Proxy Port sets the proxy port for FTP connections. This setting is only used when Use Proxies is checked.int.ftpProxyPortData
FTP Proxy ServerFTP Proxy Server sets the proxy server for FTP connections. This setting is only used when Use Proxies is checked. Can be emptyString.ftpProxyServerData
HTTP Proxy PortHTTP Proxy Port sets the proxy port for HTTP connections. This setting is only used when Use Proxies is checked.int.httpProxyPortData
HTTP Proxy ServerHTTP Proxy Server sets the proxy server for HTTP connections. This setting is only used when Use Proxies is checked. Can be emptyString.httpProxyServerData
HTTPS Proxy PortHTTPS Proxy Port sets the proxy port for HTTPS connections. This setting is only used when Use Proxies is checked.int.httpsProxyPortData
HTTPS Proxy ServerHTTPS Proxy Server sets the proxy server for HTTPS connections. This setting is only used when Use Proxies is checked. Can be emptyString.httpsProxyServerData
ModeData source for browser. Mode controls whether Starting URL or Starting HTML will be used.int.modeData
NameThe name of this component.String.nameCommon
Popups AllowedThis flag is used to allow popups in the web page displayed.boolean.popupsAllowedBehavior
Proxy ExceptionsA comma delimited list of rules for websites that will bypass the proxy servers. An example sting would be *foo.com,<local>,127.0.1. This setting is only used when Use Proxies is checked.String.proxyExceptionsData
Proxy PasswordThe password to use for proxy authentication. This setting is only used when Use Proxies and Use Proxy Authentication are checked.String.proxyPasswordData
Proxy UsernameThe username to use for proxy authentication. This setting is only used when Use Proxies and Use Proxy Authentication are checked.String.proxyUsernameData
SOCKS Proxy PortThe port number for SOCKS proxies.int.socksProxyPort
SOCKS Proxy ServerThe host name to use for SOCKS proxies. Can be empty.String.socksProxyServer
Show Navigation ButtonsShow the navigation buttons at the top of the frame.boolean.showNavigationBehavior
Starting HTMLThe initial HTML displayed when the Mode is set to HTML.
Starting HTML is <html><body> </body></html> by default, which gives a blank page.
String.startingHtmlData
Starting URLThe initial URL displayed when the Mode is set to URL. Starting URL is blank by default.String.startingUrlData
Touchscreen ModeControls when this input components responds if touchscreen mode is enabled.int.touchscreenModeBehavior
Use ProxiesIf checked, the Web Browser will try to use the proxy settings.boolean.useProxiesData
Use Proxy AuthenticationIf checked, the browser will use the username and password for proxy authentication. This setting is only used when Use Proxies is checked.boolean.useProxyAuthenticationData
VisibleIf disabled, the component will be hidden.boolean.visibleCommon
Zoom LevelThe zoom level the web page is displayed in. 0.0 is normal, positive numbers zoom in, negative numbers zoom out.double.zoomLevelBehavior

Scripting

See the Vision - Web Browser Component Scripting Functions page for the full list of scripting functions available for this component.

Event Handlers

Event handlers allow you to run a script based off specific triggers. See the full list of available event handlers on the Component Events page

Customizers

Examples

Setting Chromium Switches via JVM Arguments

The Web Browser component is based off of the JxBrowser library, which in turn is based upon the Chromium engine. As a result, the Web Browser component can be further customized by manipulating Chromium Switches.

caution

Implementing these switches is considered unsupported because they can drastically change the behavior of the Web Browser component. The exception to this case is when a member of our support team requests a switch be added to help troubleshoot an issue. For the sake of clarity, instructions on how to manipulate the switches via the Designer Launcher and Vision Client Launcher are listed below, but we generally do not recommend users implement these switches.

If you're going to make use of a switch, then you would do so on the Designer Launcher's/Vision Client Launcher application, under the JVM Arguments field. Below is an example on how to configure a switch for a client using the Vision Client Launcher. The same method applies for the Designer Launcher.

  1. Open the Vision Client Launcher.

  2. Once open, either create a new application or manage the settings on an existing application.

  3. Once the Settings are open, add a new entry into the JVM Arguments text area. Arguments for Chromium Switches must have a prefix of -Dignition.chromium.switch. followed by the argument. Below is a example where we set the argument mute-audio :

    -Dignition.chromium.switch.mute-audio

  4. Following this change, audio from the Web Browser component will be muted once the client is launched.