Permalink
Browse files

Merge pull request #10 from oros/master

Pull request back to BlackBerry repo.
  • Loading branch information...
2 parents d91c964 + ec94aaa commit c4aeed722686011a3c58be47cc8f18188eb29193 Erik Oros committed Oct 5, 2012
@@ -247,4 +247,10 @@ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+--------------------------------------------------
+Dependencies:
+* icon_options.png, icon_reset.png and icon_rules.png courtesy of Rory Craig-Barnes, available under public domain.
+* monkey-icon.png courtesy of Martin Berube, available as freeware, allowed commercial usage.
+* icon.png courtesy of OCAL, available under public domain.
@@ -1,3 +1,10 @@
+<h2>Tested On</h2>
+<p>
+<ul>
+<li>BlackBerry PlayBook OS 2.1.0.1032</li>
+<li>BlackBerry Dev Alpha 10.0.9.388</li>
+</ul>
+</p>
<h2>Background</h2>
<p>
This sample's primary intent is to provide a number of WebGL concepts working in one place. This
@@ -23,4 +23,8 @@
<author>Erik Oros</author>
<content src="index.html" />
<name>PeaksAndValleys</name>
+ <feature id="blackberry.app.event" />
+ <feature id="blackberry.identity" />
+ <feature id="blackberry.invoke" />
+ <feature id="blackberry.invoke.BrowserArguments" />
</widget>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -18,23 +18,98 @@
<html>
<head>
- <meta name="viewport" content="target-densitydpi=device-dpi,user-scalable=no,initial-scale=1.0"/>
+ <script type="text/javascript">
+ /*global window, document */
+
+ (function () {
+ 'use strict';
+ var meta;
+
+ meta = document.createElement("meta");
+ meta.setAttribute('name', 'viewport');
+ meta.setAttribute('content', 'initial-scale=' + (1.0 / window.devicePixelRatio) + ',user-scalable=no');
+ document.getElementsByTagName('head')[0].appendChild(meta);
+ }());
+ </script>
+
<style type="text/css">
body {
- background-color: #000000;
- height: 512px;
+ background-color: black;
margin: 0;
- overflow: hidden;
padding: 0;
- width: 1024px;
+ width: 100%;
+ height: 100%;
+ }
+ #container {
+ position: fixed;
+ width: 100%;
+ top: 0px;
+ bottom: 0px;
+ }
+ #easle {
+ position: fixed;
+ width: 100%;
+ top: 0px;
+ bottom: 88px;
+ }
+ #glCanvas {
+ width: 100%;
+ height: 100%;
+ border: none;
+ }
+ #license {
+ position: absolute;
+ z-index: 999;
+ width: 50%;
+ max-height: 512px;
+ background: black;
+ color: white;
+ overflow: scroll;
+ overflow-x: hidden;
+ -webkit-transform: translate3d(200%, 0, 0);
+ -webkit-transition: all 300ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
+ }
+ #license.open {
+ -webkit-transform: translate3d(100%, 0, 0);
+ }
+ #footer {
+ position: fixed;
+ width: 100%;
+ height: 88px;
+ bottom: 0px;
+ }
+ #toggleLicense {
+ position: fixed;
+ right: 10px;
+ bottom: 10px;
}
</style>
</head>
<body>
- <div id="glDiv" style="border: none; margin: 0; padding: 0;">
- <canvas id="glCanvas" style="border: none;" height="512" width="1024">
- </canvas>
+ <div id="container">
+ <div id="easle">
+ <canvas id="glCanvas" width="1024" height="512"></canvas>
+ </div>
+ <div id="license">
+ <p style="padding: 0px 20px;">This sample's primary intent is to provide a number of WebGL concepts working in one place. This is not intended to be a market-ready application for end consumers. While it can be fun to run around the countryside, this is primarily a WebGL learning resource. Some key concepts include:</p>
+ <ul>
+ <li>Rendering objects in solid colours.</li>
+ <li>Rendering objects with textures applied.</li>
+ <li>Blending texures and colours on a single object.</li>
+ <li>Ambient and directional lighting.</li>
+ <li>Skybox generation.</li>
+ <li>Terrain generation.</li>
+ <li>Touch controls.</li>
+ </ul>
+ <p style="padding: 0px 20px;">For full licensing information, please visit the <a id="invokeBrowser" href="#">BlackBerry/WebGL-Samples</a> Github repository.</p>
+ </div>
+ <div id="footer">
+ <div id="toggleLicense">
+ <img src="images/icon_rules.png" />
+ </div>
+ </div>
</div>
+
<script type="text/javascript" src="js/glMatrix-0.9.5.min.js"></script>
<script type="text/javascript" src="js/Utils.js"></script>
<script type="text/javascript" src="js/GLSkybox.js"></script>
@@ -43,13 +118,47 @@
<script type="text/javascript" src="js/virtualjoystick.js"></script>
<script type="text/javascript" src="js/Game.js"></script>
<script type="text/javascript">
- /*global window, document, console, Game */
+ /*global window, document, console, Game, blackberry */
var game = null;
+ function invokeBrowser() {
+ "use strict";
+ var args, uri;
+
+ if (typeof blackberry === 'undefined') {
+ console.log('blackberry does not exist.');
+ } else {
+ if (typeof blackberry.invoke === 'undefined') {
+ console.log('blackberry.invoke does not exist.');
+ } else {
+ uri = 'https://github.com/blackberry/WebGL-Samples/tree/master/PeaksAndValleys';
+ if (typeof blackberry.invoke.BrowserArguments === 'undefined') {
+ /* BB10 */
+ blackberry.invoke.invoke({ uri: uri }, function () {}, function () {});
+ } else {
+ /* PlayBook */
+ args = new blackberry.invoke.BrowserArguments(uri);
+ blackberry.invoke.invoke(blackberry.invoke.APP_BROWSER, args);
+ }
+ }
+ }
+ return false;
+ }
+
+ function toggleLicense() {
+ "use strict";
+ if (document.querySelector('#license').className === 'open') {
+ document.querySelector('#license').className = '';
+ } else {
+ document.querySelector('#license').className = 'open';
+ }
+ }
function ready() {
"use strict";
try {
+ document.querySelector('#toggleLicense').addEventListener('click', toggleLicense, false);
+ document.querySelector('#invokeBrowser').addEventListener('click', invokeBrowser, false);
game = new Game();
} catch (err) {
console.log("ready: " + err);
@@ -47,8 +47,7 @@ var VirtualJoystick = function () {
this.links = [0, 0, 0]; // This helps us keep track of which touch point coincides with
/* Associate these controls with our WebGL <div>. */
- this._container = document.querySelector("#glDiv");
- this._container.style.position = "relative";
+ this._container = document.querySelector("#easle");
/* Build each touch point control. */
for (i = 0; i < this.touchPoints.length; i = i + 1) {
@@ -78,8 +77,8 @@ var VirtualJoystick = function () {
cross = this._buildCrossHairs("cyan");
cross.style.position = "absolute";
cross.style.display = "";
- cross.style.left = "496px";
- cross.style.top = "240px";
+ cross.style.left = (window.innerWidth / 2.0 - 16.0) + "px";
+ cross.style.top = ((window.innerHeight - 88.0) / 2.0 - 16.0) + "px";
this._container.appendChild(cross);
__bind = function (fn, me) {
@@ -233,12 +232,12 @@ VirtualJoystick.prototype._onMouseDown = function (event) {
"use strict";
/* Only respond to touch events inside of our WebGL canvas. */
- if (event.clientY > 512) {
+ if (event.clientY > window.innerWidth / 2.0) {
return;
}
/* If the touch event occurs on the left side of the screen... */
- if (event.clientX < 512) {
+ if (event.clientX < window.innerWidth / 2.0) {
/* ...initialize links[0] to reference this.touchPoints[0]. */
this.links[0] = 0;
} else {
@@ -266,7 +265,7 @@ VirtualJoystick.prototype._onTouchStart = function (event) {
var i = 0;
try {
/* Check that we're within our WebGL control. */
- if (event.clientY > 512) {
+ if (event.clientY > window.innerWidth / 2.0) {
return;
}
@@ -279,7 +278,7 @@ VirtualJoystick.prototype._onTouchStart = function (event) {
}
/* Link this touch point to the corresponding left or right joystick. */
- if (event.changedTouches[0].clientX < 512) {
+ if (event.changedTouches[0].clientX < window.innerWidth / 2.0) {
this.links[event.changedTouches[0].identifier] = 0;
} else {
this.links[event.changedTouches[0].identifier] = 1;
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit c4aeed7

Please sign in to comment.