From b2756c6e34c09edac166dbc5c6252999775b6b52 Mon Sep 17 00:00:00 2001 From: Katherine McAuliffe Date: Wed, 10 Feb 2016 09:17:39 -0800 Subject: [PATCH 1/5] add buttons example and APIs --- examples/buttons/butkus.json | 13 +++++ examples/buttons/butkus.pbi8 | Bin 0 -> 328 bytes examples/buttons/butkus.png | Bin 0 -> 264 bytes examples/buttons/index.html | 106 +++++++++++++++++++++++++++++++++++ examples/readme.md | 1 + src/symbols-manual.js | 18 ++++++ 6 files changed, 138 insertions(+) create mode 100644 examples/buttons/butkus.json create mode 100644 examples/buttons/butkus.pbi8 create mode 100644 examples/buttons/butkus.png create mode 100644 examples/buttons/index.html diff --git a/examples/buttons/butkus.json b/examples/buttons/butkus.json new file mode 100644 index 0000000..651ed60 --- /dev/null +++ b/examples/buttons/butkus.json @@ -0,0 +1,13 @@ +{ + "input": { + "memoryFormat": "smallest", + "original": "some.url", + "storageFormat": "png" + }, + "output": { + "data": "iVBORw0KGgoAAAANSUhEUgAAABcAAAAZBAMAAAAoDqjjAAAAFVBMVEX///9VVQD/qlWqqlUAAAD//6qqVQCmRoadAAAAm0lEQVR42m3PwRECMQgFUOggkAr40QIIHexYgc4WYP9NGMh6Uk68TJIPREQi0ugqAWCXGFm2oQW0HzBm9tP+QA/guDDqUd8IxeNA94IzbjAuUCMJb/QdYURYnVbqvTJl43wmesugcb7WoByNWGbChWdbl3y9sYmeGA5VC3QkQlV7QC3/cjXILKytFxRW6+mGVCa/w8Pf12hSle0Hnx4abYUujacAAAAASUVORK5CYII=", + "gbitmapFormat": 4, + "outputFormat": "png" + }, + "success": true +} \ No newline at end of file diff --git a/examples/buttons/butkus.pbi8 b/examples/buttons/butkus.pbi8 new file mode 100644 index 0000000000000000000000000000000000000000..0a0117dbf581118757f75a2e1466bba804f7dd93 GIT binary patch literal 328 zcmY+=v2DXZ3A@rLfgJ1Q>m@x0hwax-zMJR}?`d=CBVf$0j!Ex^h^3gIH6o@W7I(B* i@Sf%;(t(xR#>1YYKQ1zH$i9ha zJSUd$-&f*9Rgm8vpGo{KE=rePXfY;Cmx$c9kadf^LE5*={~Y)q>@av0c%S3wV~6ie z#(4&M0m_{DUt|+qBIbs@+G~{hxJIq&^n${D*A~e1Mx-5TO^=>lvv*_XJPE!~?h+NJ z&}s+W|3#)Jbk?jD7YTd)vMoey|KY>;uV(~Jeak*yPAa!muXj1nnGBw;elF{r5}E+{ Ce`h5C literal 0 HcmV?d00001 diff --git a/examples/buttons/index.html b/examples/buttons/index.html new file mode 100644 index 0000000..9ac3925 --- /dev/null +++ b/examples/buttons/index.html @@ -0,0 +1,106 @@ + + + + + + + + Buttons Example + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

Buttons Example

+

+ This is a simple example of how to implement Pebble button clicks in RockyJS using a keyboard's directional arrow keys. +

+
+ +
+ +
+ +
+

What's going on?

+

+ This example demonstrates how to interact with RockyJS bound to a canvas. Using the left, right, up, and down arrows on your keyboard you can simulate the back, select, up, and down buttons of the Pebble respectively. +

+ + rocky.onPress(type, callback) +

+ Options for type are 'back', 'select', 'up', or 'down'. +

+

+ Source for this example can be found at [link TBD]. +

+ +
+ + + diff --git a/examples/readme.md b/examples/readme.md index 454885e..9317a41 100644 --- a/examples/readme.md +++ b/examples/readme.md @@ -8,5 +8,6 @@ This folder contains a variety of examples designed to help you understand some - [Vector Graphics](pdc/index.html) – Draws and modifies vector graphics. - [GPath](gpath/index.html) – Shows how to use APIs around `GPath`. - [Text](text/index.html) – Shows how to draw text and use fonts. + - [Buttons](buttons/index.html) - Shows how to interact using keyboard arrows. - [Community Examples](community.html) - Additional examples built by community members. diff --git a/src/symbols-manual.js b/src/symbols-manual.js index 58f66cc..7381973 100644 --- a/src/symbols-manual.js +++ b/src/symbols-manual.js @@ -462,6 +462,24 @@ Rocky.addManualSymbols = function(obj) { }); }; + obj.buttonHandler = {}; + + obj.onPress = function onPress(type, callback) { + this.buttonHandler[type] = callback; + }; + + document.addEventListener('keydown', function(event) { + if (event.keyCode === 37 && obj.buttonHandler.back) { + obj.buttonHandler['back'].bind(obj)(); + } else if (event.keyCode === 38 && obj.buttonHandler.up) { + obj.buttonHandler['up'].bind(obj)(); + } else if (event.keyCode === 39 && obj.buttonHandler.select) { + obj.buttonHandler['select'].bind(obj)(); + } else if (event.keyCode === 40 && obj.buttonHandler.down) { + obj.buttonHandler['down'].bind(obj)(); + } + }); + return ['Data', 'Resources']; }; From db03cd871557c084d7caf0332bd8628ea18986ee Mon Sep 17 00:00:00 2001 From: Katherine McAuliffe Date: Wed, 10 Feb 2016 15:07:00 -0800 Subject: [PATCH 2/5] change integrated API to module --- examples/buttons/index.html | 20 +++++++++++--------- examples/buttons/modules/buttons.js | 19 +++++++++++++++++++ src/symbols-manual.js | 18 ------------------ 3 files changed, 30 insertions(+), 27 deletions(-) create mode 100644 examples/buttons/modules/buttons.js diff --git a/examples/buttons/index.html b/examples/buttons/index.html index 9ac3925..61aa517 100644 --- a/examples/buttons/index.html +++ b/examples/buttons/index.html @@ -18,6 +18,8 @@ + + @@ -53,7 +55,7 @@

What's going on?

This example demonstrates how to interact with RockyJS bound to a canvas. Using the left, right, up, and down arrows on your keyboard you can simulate the back, select, up, and down buttons of the Pebble respectively.

- rocky.onPress(type, callback) + onPress(type, callback)

Options for type are 'back', 'select', 'up', or 'down'.

@@ -80,25 +82,25 @@

What's going on?

}; (function() { - rocky.onPress("back", function() { + onPress("back", function() { console.log("Back Button Pressed"); currentText = "Back lets us run away."; - this.mark_dirty(); + rocky.mark_dirty(); }); - rocky.onPress("up", function() { + onPress("up", function() { console.log("Up Button Pressed"); currentText = "Up and away we go!"; - this.mark_dirty(); + rocky.mark_dirty(); }); - rocky.onPress("select", function() { + onPress("select", function() { console.log("Select Button Pressed"); currentText = "Select is the best button."; - this.mark_dirty(); + rocky.mark_dirty(); }); - rocky.onPress("down", function() { + onPress("down", function() { console.log("Down Button Pressed"); currentText = "Down into the depths we go."; - this.mark_dirty(); + rocky.mark_dirty(); }); })(); diff --git a/examples/buttons/modules/buttons.js b/examples/buttons/modules/buttons.js new file mode 100644 index 0000000..46cda95 --- /dev/null +++ b/examples/buttons/modules/buttons.js @@ -0,0 +1,19 @@ +var buttonHandler = {}; + +window.onPress = function onPress(type, callback) { + if (['back', 'up', 'select', 'down'].indexOf(type) >= 0) { + buttonHandler[type] = callback; + } else { console.log('Invalid button called.');} +}; + +document.addEventListener('keydown', function(event) { + if (event.keyCode === 37 && buttonHandler.back) { + buttonHandler['back'](); + } else if (event.keyCode === 38 && buttonHandler.up) { + buttonHandler['up'](); + } else if (event.keyCode === 39 && buttonHandler.select) { + buttonHandler['select'](); + } else if (event.keyCode === 40 && buttonHandler.down) { + buttonHandler['down'](); + } +}); diff --git a/src/symbols-manual.js b/src/symbols-manual.js index 7381973..58f66cc 100644 --- a/src/symbols-manual.js +++ b/src/symbols-manual.js @@ -462,24 +462,6 @@ Rocky.addManualSymbols = function(obj) { }); }; - obj.buttonHandler = {}; - - obj.onPress = function onPress(type, callback) { - this.buttonHandler[type] = callback; - }; - - document.addEventListener('keydown', function(event) { - if (event.keyCode === 37 && obj.buttonHandler.back) { - obj.buttonHandler['back'].bind(obj)(); - } else if (event.keyCode === 38 && obj.buttonHandler.up) { - obj.buttonHandler['up'].bind(obj)(); - } else if (event.keyCode === 39 && obj.buttonHandler.select) { - obj.buttonHandler['select'].bind(obj)(); - } else if (event.keyCode === 40 && obj.buttonHandler.down) { - obj.buttonHandler['down'].bind(obj)(); - } - }); - return ['Data', 'Resources']; }; From d239c4886b2c7677f2eac21e81f805f8df0c8ef3 Mon Sep 17 00:00:00 2001 From: Katherine McAuliffe Date: Wed, 10 Feb 2016 15:42:12 -0800 Subject: [PATCH 3/5] remove scrolling with button presses --- examples/buttons/modules/buttons.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/examples/buttons/modules/buttons.js b/examples/buttons/modules/buttons.js index 46cda95..f43cf7f 100644 --- a/examples/buttons/modules/buttons.js +++ b/examples/buttons/modules/buttons.js @@ -3,17 +3,21 @@ var buttonHandler = {}; window.onPress = function onPress(type, callback) { if (['back', 'up', 'select', 'down'].indexOf(type) >= 0) { buttonHandler[type] = callback; - } else { console.log('Invalid button called.');} + } else { console.log('Invalid type passed to onPress.');} }; document.addEventListener('keydown', function(event) { if (event.keyCode === 37 && buttonHandler.back) { + event.preventDefault(); buttonHandler['back'](); } else if (event.keyCode === 38 && buttonHandler.up) { + event.preventDefault(); buttonHandler['up'](); } else if (event.keyCode === 39 && buttonHandler.select) { + event.preventDefault(); buttonHandler['select'](); } else if (event.keyCode === 40 && buttonHandler.down) { + event.preventDefault(); buttonHandler['down'](); } }); From 9de6d08a539de67dca26ba0164197ce2f33226bd Mon Sep 17 00:00:00 2001 From: Katherine McAuliffe Date: Wed, 17 Feb 2016 14:51:50 -0800 Subject: [PATCH 4/5] remove uneeded butkus files --- examples/buttons/butkus.json | 13 ------------- examples/buttons/butkus.pbi8 | Bin 328 -> 0 bytes examples/buttons/butkus.png | Bin 264 -> 0 bytes 3 files changed, 13 deletions(-) delete mode 100644 examples/buttons/butkus.json delete mode 100644 examples/buttons/butkus.pbi8 delete mode 100644 examples/buttons/butkus.png diff --git a/examples/buttons/butkus.json b/examples/buttons/butkus.json deleted file mode 100644 index 651ed60..0000000 --- a/examples/buttons/butkus.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "input": { - "memoryFormat": "smallest", - "original": "some.url", - "storageFormat": "png" - }, - "output": { - "data": "iVBORw0KGgoAAAANSUhEUgAAABcAAAAZBAMAAAAoDqjjAAAAFVBMVEX///9VVQD/qlWqqlUAAAD//6qqVQCmRoadAAAAm0lEQVR42m3PwRECMQgFUOggkAr40QIIHexYgc4WYP9NGMh6Uk68TJIPREQi0ugqAWCXGFm2oQW0HzBm9tP+QA/guDDqUd8IxeNA94IzbjAuUCMJb/QdYURYnVbqvTJl43wmesugcb7WoByNWGbChWdbl3y9sYmeGA5VC3QkQlV7QC3/cjXILKytFxRW6+mGVCa/w8Pf12hSle0Hnx4abYUujacAAAAASUVORK5CYII=", - "gbitmapFormat": 4, - "outputFormat": "png" - }, - "success": true -} \ No newline at end of file diff --git a/examples/buttons/butkus.pbi8 b/examples/buttons/butkus.pbi8 deleted file mode 100644 index 0a0117dbf581118757f75a2e1466bba804f7dd93..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 328 zcmY+=v2DXZ3A@rLfgJ1Q>m@x0hwax-zMJR}?`d=CBVf$0j!Ex^h^3gIH6o@W7I(B* i@Sf%;(t(xR#>1YYKQ1zH$i9ha zJSUd$-&f*9Rgm8vpGo{KE=rePXfY;Cmx$c9kadf^LE5*={~Y)q>@av0c%S3wV~6ie z#(4&M0m_{DUt|+qBIbs@+G~{hxJIq&^n${D*A~e1Mx-5TO^=>lvv*_XJPE!~?h+NJ z&}s+W|3#)Jbk?jD7YTd)vMoey|KY>;uV(~Jeak*yPAa!muXj1nnGBw;elF{r5}E+{ Ce`h5C From 546d46ccc90debb75f3ca67d9b3cf127aa1c67f4 Mon Sep 17 00:00:00 2001 From: Katherine McAuliffe Date: Wed, 17 Feb 2016 15:05:47 -0800 Subject: [PATCH 5/5] Heiko's comments --- examples/buttons/index.html | 19 +++++++++---------- examples/buttons/modules/buttons.js | 26 +++++++++++++------------- 2 files changed, 22 insertions(+), 23 deletions(-) diff --git a/examples/buttons/index.html b/examples/buttons/index.html index 61aa517..21b3c9c 100644 --- a/examples/buttons/index.html +++ b/examples/buttons/index.html @@ -68,20 +68,19 @@

What's going on?