Hello Kyo,
The entire WebGL GUI application is displayed within a single HTML Canvas element. Interleaving the GUI contents with external HTML contents is thus not possible. What you can do, is to arrange other HTML contents behind or in front of the Canvas element.
When generating code for WebGL, Embedded Wizard creates an EmWiApp.html file. This file can be considered as template demonstrating how to integrate the WebGL GUI application with other HTML contents. You can modify this file and enhance it by IFRAMEs, or other HTML elements. Note the CANVAS element in this file. It represents the 'view-port' for the GUI application.
If you follow the above explained approach, the usage of Applet could be reasonable. You could, for example, implement the Aplet interface so that size/position alternations of the Applet view are relayed to the 'HTML world' and used to adjust the position/size of the IFRAME. This corresponds to the approach "Integrate with a separate graphics layer" explained in the section Choice the appropriate screen update mode.
Further hint: if you intent to arrange the HTML contents behind the GUI application and you want them to shine through the CANVAS element, you have to configure the GUI application so that it use opacity information for the Canvas element. To achieve this you modify the initialization code in the EmWiApp.html file as shown below:
Without this adaptation the CANVAS element will be opaque regardless the GUI contents. Following is the description of the optional parameters you can pass in the _Init() invocation:
// ---------------------------------------------------------------------------
// The Init() function initializes the EmWi application within the Web-Browser
// and establishes a connection to the canvas element identified with the name
// aCanvas. The function returns true if the initialization was successful.
// The parameter aSettings exists for optional initialization settings. These
// are passed as values of an object. Following values are possible:
//
// - 'FullScreenUpdate' : Determines the application's screen update mode.
// If this value is 'true' entire screen is redrawn each time the update
// is performed. If this value is 'false' only changed areas are redrawn.
// This, however, expects the WebGL implementation to preserve the content
// of the framebuffer between two consecutive screen update. This mode can
// impact the overall performance or even fail. The default value is 'true'.
//
// - 'Alpha' : Determines whether the WebGL canvas uses the alpha channel to
// store opacity values. If this value is 'true', alpha channel is used and
// HTML content can be seen through transparent areas of the WebGL canvas.
// If this value is 'false', the WebGL canvas will cover all HTML contents
// lying behind it. The default value is 'false'.
//
// - 'Debug' : Determines whether additional error state verification should
// be performed and controls additional debug log outputs. Per default the
// value is 'false'.
//
// - 'OnKeyEvent' : Determines a keyboard code translation function. Each time
// a keyboard down or press event is received, the assigned function is
// called and allows user specific key code conversion. When the function
// is called, the key event as it was received from the browser is passed
// to this function in its unique parameter. Thereupon the function can
// evaluate the events, and decide whether and how the event should be
// percepted by the EmWi application. In the return value the function
// should return either 'null' or an object containing one of the members:
// 'KeyCode' or 'CharCode'. The member 'KeyCode' can be initialized with
// the a value from the enumration Core::KeyCode. The value 'CharCode' can
// be initialized with a unicode character code.
// The returned value 'null' means, that no specific conversion was
// performed. Thereupon the runtime environment will perform the default
// event conversion.
// ---------------------------------------------------------------------------
I hope it helps you further.
Best regards
Paul Banach
