cef/tests/cefclient/res/uiplugin.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="window.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="window.uiapp.modifyRotation(-2.0);">
<input type="button" value="Increment Rotation" onclick="window.uiapp.modifyRotation(2.0);">
<input type="button" value="Reset Rotation" name="reset_button" onclick="window.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>