Web Browser

Table of Contents

  1. Usage and Interaction
  2. Input
  3. Browser Functionality
  4. Progress and Status
  5. Flash and Silverlight
  6. Outputs
    1. Content
    2. Cursor
  7. JavaScript
    1. Methods/Events
    2. Properties
    3. Execute On Load
  8. Limitations


Web Browser An interactive Internet browser that can be used to render HTML or browse the web.

The Web Browser node renders web pages into a texture so their contents can be used inside a Ventuz scene. This is done based on the ​Webkit/​Chromium technology, the former being the basis for the majority of modern web browsers on the market. The node supports HTML as well as ​Adobe Flash and ​Microsoft Silverlight content.

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 same 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 how the layouting is done (i.e. change the font size, ...).
The TransparentBackgroung property controls whether the web view background has a default color or is transparent.

Same as 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 act similar to an Overlay Rectangle and render the texture as a 2D fullscreen overlay. When 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 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 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:

Independent 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.

If the Rectangle needs to be transformed, an appropriate Axis should be inserted in front of the Web Browser node so that both the interaction node and the geometry are transformed consistently


Input

The Web Browser Node accepts Keyboard, Mouse and Touch input to interact with the rendered content. 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) that 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.

Local mouse information is not transmitted via the Ventuz Input Subsystem to other Ventuz machines in the same network cluster.


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

The 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 Property Editor accepts hexadecimal numbers if they are entered with a leading "0x" or "#"


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:

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.

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 (Flash/Silverlight) has crashed but the browser is still operational, the PluginCrashed event is fired instead. The most common example is a video player written in Flash crashing while the actual browser (scrolling, navigation, ...) still works. 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.

Flash and Silverlight

Flash and Silverlight are two popular media formats for rich internet sites. Both of these can be rendered by the Web Browser node if the respective plug-ins are installed on the system. Installers can be downloaded at:

Adobe Flash and Microsoft Silverlight have direct system access that circumvents Ventuz. If for example a Flash embedded video goes to fullscreen, Windows will have Ventuz drop out of fullscreen mode. Similar, a Flash content can manipulate the sound device which may disrupt correct operation of Ventuz. Beware of Flash/Silverlight content that uses hardware resources.


Adobe Flash and Microsoft Silverlight are the only plugins officially supported. A common problem with other plugins is that they open up their own window when used from Ventuz.


Outputs

The Web Browser node provides a large number of outputs that can be used to react on what the user is doing inside the browser. For the touch output properties, see the Touch Button documentation.

Content


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

Java Script functions alert and window.prompt as well any other popup windows are not supported!


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 has to be explicitly triggered inside the script code by calling the function ventuz.updateOutputs().

Updating Ventuz output properties from inside JavaScript code can be very slow! Use with care.


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())

Limitations

As with any technology as complex as a web browser, there are certain limitations one has to be aware of. The most important one concerns MultiTouch input.

Although the Web Browser accepts MultiTouch input, the underlying technology works based on mouse input. So only one touch is used and none of the gestures implemented in the browser variants of MultiTouch devices is supported at this point.


Other known limitations which may or may not be relieved in the future include:

As of Ventuz4, the browser node is available in the 64bit version of Ventuz.

See also: