diff options
Diffstat (limited to 'native_client_sdk/src/examples/mouselock/mouselock.html')
| -rw-r--r-- | native_client_sdk/src/examples/mouselock/mouselock.html | 108 |
1 files changed, 108 insertions, 0 deletions
diff --git a/native_client_sdk/src/examples/mouselock/mouselock.html b/native_client_sdk/src/examples/mouselock/mouselock.html new file mode 100644 index 0000000..eaa44dc --- /dev/null +++ b/native_client_sdk/src/examples/mouselock/mouselock.html @@ -0,0 +1,108 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html> +<!-- +Copyright (c) 2011 The Native Client Authors. All rights reserved. +Use of this source code is governed by a BSD-style license that can be +found in the LICENSE file. +--> +<head> + <meta http-equiv="Pragma" content="no-cache" /> + <meta http-equiv="Expires" content="-1" /> + <script type="text/javascript" src="../common/check_browser.js"></script> + <script> + // Check for Native Client support in the browser before the DOM loads. + var isValidBrowser = false; + var browserSupportStatus = 0; + // Fullscreen and mouselock support is in Chrome version 16. + var CHROME_MINIMUM_VERSION = 16; + + var checker = new browser_version.BrowserChecker( + CHROME_MINIMUM_VERSION, + navigator["appVersion"], + navigator["plugins"]); + checker.checkBrowser(); + + isValidBrowser = checker.getIsValidBrowser(); + browserSupportStatus = checker.getBrowserSupportStatus(); + + function handleMessage(message_event) { + console.log(message_event.data); + } + </script> + <title>Full-screen and Mouse-lock Example</title> +</head> +<body title="This tooltip should not be shown if the mouse is locked."> + <h1>Full-screen and Mouse-lock Example</h1> + <ul> + <li>There are two different kinds of fullscreen mode: "tab fullscreen" and + "browser fullscreen". + <ul> + <li>Tab fullscreen refers to when a tab enters fullscreen mode via the + JS or Pepper fullscreen API.</li> + <li>Browser fullscreen refers to the user putting the browser itself + into fullscreen mode from the UI (e.g., pressing F11).</li> + </ul> + <span style="font-weight:bold"> + NOTE: Mouse lock is only allowed in "tab fullscreen" mode. + </span> + </li> + <li>Lock mouse: + <ul> + <li>left click in the grey box; or</li> + <li>right click in the box to ensure that it is focused and + then press Enter key. (You could verify that the tooltip window is + dismissed properly by this second approach.)</li> + </ul> + </li> + <li>Unlock mouse voluntarily (i.e., NaCl module unlocks mouse): + <ul> + <li>press Enter.</li> + </ul> + </li> + <li>Unlock mouse involuntarily (i.e. Chrome unlocks mouse): + <ul> + <li>lose focus; or</li> + <li>press Esc key; or</li> + <li>exit from the "tab fullscreen" mode.</li> + </ul> + </li> + </ul> + <p>Clicking the mouse inside the grey square takes the NaCl module to/from + combined fullscreen and mouselock mode.</p> + <p>While in fullscreen, pressing Enter will exit/enter mouse lock mode.</p> + <!-- Load the published .nexe. This includes the 'src' attribute which + shows how to load multi-architecture modules. Each entry in the "nexes" + object in the .nmf manifest file is a key-value pair: the key is the runtime + ('x86-32', 'x86-64', etc.); the value is a URL for the desired NaCl module. + To load the debug versions of your .nexes, set the 'src' attribute to the + _dbg.nmf version of the manifest file. + + Note: The <EMBED> element is wrapped inside a <DIV>, which has both a 'load' + and a 'message' event listener attached. This wrapping method is used + instead of attaching the event listeners directly to the <EMBED> element to + ensure that the listeners are active before the NaCl module 'load' event + fires. This also allows you to use PPB_Messaging.PostMessage() (in C) or + pp::Instance.PostMessage() (in C++) from within the initialization code in + your NaCl module. + --> + <div id="listener"> + <script type="text/javascript"> + if (browserSupportStatus == + browser_version.BrowserChecker.StatusValues.CHROME_VERSION_TOO_OLD) { + alert('This example will only work on Chrome version ' + + CHROME_MINIMUM_VERSION + + ' or later.'); + } else { + var listener = document.getElementById('listener') + listener.addEventListener('message', handleMessage, true); + // Create two instances of the NaCl module. + listener.innerHTML = '<embed id="mouselock_view" ' + + 'type="application/x-nacl" ' + + 'src="mouselock.nmf" ' + + 'width="300" height="300" />'; + } + </script> + </div> +</body> +</html> |