Web Browser

The Web Browser node renders web pages into a texture so their content can be used inside a Ventuz scene. Since Ventuz 5.3 this is done based on the ​Chromium Embedded Framework CEF.

The Web Browser node implements not just the rendering but also the rest of the functionality expected from a browser. Mouse, touch and keyboard input can be used to navigate and interact with the shown content and a navigation history can be used to go back to previously visited pages.

Usage and Interaction

By default, the Web Browser node will take a URL and render its content onto a texture. As an alternative, the NavigationMode property can be changed from URL to HTML to render the content specified in the HTML property. In both cases, the resulting texture is provided by the Texture output property and can be used the same way as any other texture in Ventuz. The resolution of the texture (which is also used as the virtual window resolution passed to the browser layout engine) can be specified with the WebBrowserHeight and WebBrowserWidth properties. If both are zero, the size of the Renderer Window will be used instead. WebBrowserAutoMipMap autogenerates mipmaps for improved rendering quality. However, this may cost some performance and is not supported by all graphics cards. Zoom can be set to a percentage between 10% to 500% to influence the layout (i.e. change the font size, ...).

Just like the other interaction nodes, the Web Browser node has an implicit behavior which causes the node to actually use the texture instead of just generating it. If the ScreenAligned property is set, the Web Browser node will render the texture as a 2D full-screen overlay. When it is deactivated, the node will instead act similar to a Texture Node, activate the texture in the render engine and thus cause subsequent geometries to be rendered using this texture. The implicit behavior can be disabled altogether by deactivating the BehaviorApply property.

Similar to the Touch Paint node, the ScreenAligned property will also influence how mouse/touch input is mapped to the browser window. In the screen-aligned mode, the browser output directly matches the renderer window so the touch coordinates are directly mapped to the virtual browser window. When used in the object-mode (= non screen-aligned), both the geometry under the Web Browser node and the orientation of the world space at the Web Browser node become relevant:

Regardless of the actual geometry, the node will calculate the intersection point between a ray from the camera position through the touch position and the X/Y-plane at the hierarchy position of the browser node. To be more precise, the point -0.5/0.5/0.0 will be mapped to the upper left corner and the point 0.5/-0.5/0.0 to the lower left corner of the virtual browser window. This exactly matches the geometry of a Rectangle node with its default parameters.

Input

The Web Browser Node accepts Keyboard, Mouse and Touch input to interact with the rendered content.

Multitouch ´

The Ventuz Multi Touch subsystem directly injects the touch information into the browser and therefore the browser can easily handle pages supporting multitouch.

Mouse

The position of the mouse cursor and state of the left mouse button are actually transmitted to the Web Browser node as a virtual touch to ensure consistent behavior between mouse and touch input. When LocalMouse is enabled, the browser will receive additional mouse information (such as mouse wheel movement) which a touch cannot represent. Since this information is independent of the MultiTouch subsystem, it will be transmitted to all browser instances that have the LocalMouse property enabled.

If ControlEnabled is set to false, all input will be ignored. There is however an additional mechanism to simulate keyboard input that is not affected by this property. The InjectChar method accepts an integer value which is translated to a unicode character. When the method is invoked, the browser reacts as if this key would have been inserted via the hardware keyboard. Note that this is not the same as pressing a hardware key. For example, to generate the letter â on a German keyboard takes two key presses, first the ^ key and then the a key. In order to support more languages, the inject method accepts a character and not a key press. There are however a number of special character codes supported:

Code	Description
13	Return
9	Tab
8	Backspace
127	Delete
27	Escape

To pass an integer value as part of the method invocation, either the output event of a Script node or an Event node has to be used. For the latter, the value can be specified in its Argument property.

The unicode values for the most commonly used characters can be found ​here and ​here. Additional information on other character sets can be found ​here.

Browser Functionality

A dedicated browser application implements a number of functions via its menu bar. Since those won't be part of the rendered output content, Ventuz provides them as input methods:

• Load: Load the URL/HTML specified in the NavigationURL or NavigationHTML respectively.
• Reload: Reloads the current content (same as pressing F5/Refresh in a dedicated browser application).
• Stop: Stops/interrupt the current loading process.
• Forward: Go one page forward in the navigation history.
• Backward: Go page backward in the navigation history.

The methods Cut, Copy, Paste, SelectAll represent the familiar editing functionality that is usually found in the menu bar of an application. When invoked, they will copy from or copy to the default windows clip board same as a dedicated browser application would do.

Browser Cache

All Browser instances are using the following location to cache files

%HOMEDRIVE%\ProgramData\Ventuz5\WebCache

With the property Cached disabled no files are written or read from the cache.

Progress and Status

When loading a new page, the browser has to fetch resources (e.g. images, ... ) and layout the HTML content. While the browser is busy processing the content, the Loading flag is true. Once layouting is done, the Finished event is fired. To prevent the user from seeing the page building up, the Paused property can be activated which will block the browser from updating its texture. Any processing that is running on the webpage (for example a Flash animation) and any interaction (mouse, keyboard, ...) continues to work same as before. Once Finished is triggered, deactivate the Paused property to present the completed result to the user.

Due to the complexity of a browser layout engine and many ill-formatted HTML sites on the internet, it is to be expected that the browser will crash at one point or the other. If the complete browser has crashed, the Crashed event is fired. If just one of the plug-ins has crashed but the browser is still operational, the PluginCrashed event is fired instead. Call Recover to create a new instance of the browser. The web browser does not recover automatically from a crash, because this could end up in an infinite recovery loop. The user should decide when (and if at all) to recover a crashed web browser.

Content

• CurrentURL: The URL of the currently displayed HTML page.
• TargetURL: If the cursor hovers over a link, this provides the URL the link leads to.
• Title: The title of the currently displayed HTML page.
• Tooltip: If the content contains a tooltip for the current position of the cursor, it will be provided in this property.

Cursor

The Cursor property indicates the current (mouse) cursor shape suggested by the current touch position. If the cursor output property is bound to a numerical input its value is interpreted as shown below here:

Value	Name	Value	Name	Value	Name	Value	Name
0	Pointer (default)
1	Cross	2	Hand	3	Ibeam	4	Wait
5	Help	6	EastResize	7	NorthResize	8	NortheastResize
9	NorthwestResize	10	SouthResize	11	SoutheastResize	12	SouthwestResize
13	WestResize	14	NorthSouthResize	15	EastWestResize	16	NortheastSouthwestResize
17	NorthwestSoutheastResize	18	ColumnResize	19	RowResize	20	MiddlePanning
21	EastPanning	22	NorthPanning	23	NortheastPanning	24	NorthwestPanning
25	SouthPanning	26	SoutheastPanning	27	SouthwestPanning	28	WestPanning
29	Move	30	VerticalText	31	Cell	32	ContextMenu
33	Alias	34	Progress	35	NoDrop	36	Copy
37	None	38	NotAllowed	39	ZoomIn	40	ZoomOut
41	Custom

JavaScript

The Web Browser node supports the ​JavaScript scripting language both as part of the content as well as a means of interaction between Ventuz and the site content. This is done by defining input/output properties, methods and events in the Custom Model editor at the bottom of the Property Editor.

Methods/Events

Ventuz methods defined on the custom model trigger a global JavaScript method of the same name. The event can have an optional integer argument that is passed as input parameter to the JavaScript function. This is usually done by binding an Event node to the method on the Web Browser node and setting the Event nodes Argument property to the desired value.

Ventuz events can be triggered inside the JavaScript by calling a function of the same name on the global ventuz object. Events also support an optional integer argument.

The following example calculates the square root of the argument passed to the Ventuz Custom Model method CalculateSquare, prints it to the HTML content and then triggers the Ventuz Custom Model event with the result as an argument:

<html>
<head>
<title>Method Test</title>
</head>
<body>
<script type="text/javascript">
function CalculateSquare(value) {
  var result = value * value;
  document.write("The square of " + value + " is " + result + "<br>");
  ventuz.Result(result);
}
</script>
</body>
</html>

Properties

Ventuz properties can also be connected to the script code via the Custom Model. They become available as members of the global ventuz object. Changes in the input properties are automatically reflected in the script code but updating outputs have to be explicitly triggered inside the script code by calling the function ventuz.updateOutputs().

The example above can thus be rewritten using properties (here value as input float and result as output float property) instead of event arguments:

<html>
<head>
<title>Method Test</title>
</head>
<body>
<script type="text/javascript">
function CalculateSquare() {
  ventuz.result = ventuz.value * ventuz.value;
  document.write("The square of " + ventuz.value + " is " + ventuz.result+ "<br>");
  ventuz.updateOutputs();
}
</script>
</body>
</html>

Execute On Load

The property WebBrowserJavaScript can optionally contain a ​JavaScript snippet that is injected and executed on every loaded page. This opens many possibilities to operate on external pages.

Example 1:

document.body.style["background-color"] = "Red";

This code sets the background of every loaded page to Red.

Example 2:

UP = function() { window.scrollBy(0,-5); }
DW = function() { window.scrollBy(0,5); }

Creates two methods called UP and DW in the Custom Model to invoke the defined JS functions. The displayed window will scroll up/down when Ventuz invokes these methods. (See also function ​scrollBy())

Transparent Background

This Option will let you make the Background of a Website transparent.

document.body.style["background-color"] = "Transparent";

Limitations

As with any technology as complex as a web browser, there are certain limitations one has to be aware of.

• The maximum resolution of the web browser is 4096 x 4096 pixel.
• A touch is immediately claimed by the Web Browser, so a combination of Touch Translation node with the Web Browser node is not possible.
• User login prompts and other popup windows are not supported.

Copyright 2004-2017 Ventuz Technology Group