58 lines
2.5 KiB
HTML
58 lines
2.5 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>User Interface App Example</title>
|
||
|
|
</head>
|
||
|
|
<body bottommargin="2" rightmargin="0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="font-family: Verdana, Arial;">
|
||
|
|
<div align="center">
|
||
|
|
<table border="0" cellpadding="0" cellspacing="0" width="99.9%" height="100%">
|
||
|
|
<tr>
|
||
|
|
<td height="100%" align="center" valign="top">
|
||
|
|
<table border="0" cellpadding="2" cellspacing="0">
|
||
|
|
<tr>
|
||
|
|
<td colspan="2" style="font-size: 18pt;">User Interface App Example</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td colspan="2" style="font-size: 8pt;"><i>An embedded OpenGL plugin window that communicates with the Chromium browser control via JavaScript calls.</i>
|
||
|
|
<a href="#" onclick="cef.uiapp.viewSource(); return false;">View Page Source</a></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td colspan="2" height="10"></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td width="100" valign="top"><img src="logoball.png" width="100" height="101"></td>
|
||
|
|
<td style="font-size: 10pt;"><span style="font-size: 12pt;">You can make the square rotate!</span>
|
||
|
|
<ul>
|
||
|
|
<li>Click the square with the left mouse button or click the <b>Decrement Rotation</b> button to decrement the rotation value.</li>
|
||
|
|
<li>Click the square with the right mouse button or click the <b>Increment Rotation</b> button to increment the rotation value.</li>
|
||
|
|
<li>Click the <b>Reset Rotation</b> button to reset the rotation value to zero.</li>
|
||
|
|
</ul>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<div style="padding: 2px; margin: 5px; border: red 1px solid; width: 350px;">
|
||
|
|
<embed type="application/x-client-ui-plugin" width=350 height=350></embed>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<form name="control">
|
||
|
|
Rotation Value: <input type="text" name="rotation_field" value="0" size="5" readonly>
|
||
|
|
<br/><input type="button" value="Decrement Rotation" onclick="cef.uiapp.modifyRotation(-2.0);">
|
||
|
|
<input type="button" value="Increment Rotation" onclick="cef.uiapp.modifyRotation(2.0);">
|
||
|
|
<input type="button" value="Reset Rotation" name="reset_button" onclick="cef.uiapp.resetRotation();" disabled>
|
||
|
|
</form>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<script language="JavaScript">
|
||
|
|
// Called by the application after rotation has been changed.
|
||
|
|
// |val| is the new rotation value.
|
||
|
|
function notifyNewRotation(val)
|
||
|
|
{
|
||
|
|
document.control.rotation_field.value = val;
|
||
|
|
document.control.reset_button.disabled = (val == 0);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|