pebble · PebbleKat · Feb 10, 2016 · Feb 10, 2016 · Feb 10, 2016 · Feb 17, 2016
diff --git a/examples/buttons/butkus.json 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
+}
diff --git a/examples/buttons/butkus.pbi8 b/examples/buttons/butkus.pbi8
diff --git a/examples/buttons/butkus.png b/examples/buttons/butkus.png
diff --git a/examples/buttons/index.html b/examples/buttons/index.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+    <title>Buttons Example</title>
+
+    <!-- build:template
+    <script src="../../<%= rockyjs_path %>"></script>
+    /build -->
+    <!-- build:remove -->
+    <!-- this template/remove construct is a workaround as processhtml doesn't support variables for values -->
+    <script src="../../src/html-binding.js"></script>
+    <script src="../../src/symbols-manual.js"></script>
+    <script src="../../src/symbols-generated.js"></script>
+    <script src="../../src/transpiled.js"></script>
+    <!-- /build -->
+
+    <!-- build:css ../../css/bootstrap.min.css -->
+    <link href="../../html/css/bootstrap.min.css" rel="stylesheet">
+    <!-- /build -->
+    <!-- build:css ../../css/style.css -->
+    <link href="../../html/css/style.css" rel="stylesheet">
+    <!-- /build -->
+
+    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
+
+    <link rel="stylesheet" href="../common/css/style.css">
+</head>
+<body>
+<div class="container">
+    <div class="page-header">
+        <h1>Buttons Example</h1>
+        <p class="lead">
+            This is a simple example of how to implement Pebble button clicks in RockyJS using a keyboard's directional arrow keys. 
+        </p>
+    </div>
+
+    <div class="col-md-6">
+        <canvas id="pebble" class="rocky" width="432" height="504"></canvas>    
+    </div>
+
+    <div class="col-md-6">
+        <h2>What's going on?</h2>
+        <p>
+            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. 
+        </p>
+
+        <code>rocky.onPress(type, callback)</code>
+        <p>
+            Options for <code>type</code> are 'back', 'select', 'up', or 'down'.
+        </p>
+        <p>
+            Source for this example can be found at [link TBD].
+    </div>
+    <!-- build:template
+    <%= github_banner %>
+    /build -->
+</div>
+</body>
+<script>
+var rocky = Rocky.bindCanvas(document.getElementById("pebble"));
+rocky.export_global_c_symbols();
+
+/**** App ****/
+
+var currentText = "Press an arrow key";
+
+rocky.update_proc = function (ctx, bounds) {  
+  graphics_context_set_text_color(ctx, GColorBlack);
+  graphics_draw_text(ctx, currentText, fonts_get_system_font(FONT_KEY_GOTHIC_24_BOLD), 
+                     bounds, GTextOverflowModeWordWrap, GTextAlignmentLeft, null);
+};
+
+(function() {
+  rocky.onPress("back", function() {
+    console.log("Back Button Pressed");
+    currentText = "Back lets us run away.";
+    this.mark_dirty();
+  });
+  rocky.onPress("up", function() {
+    console.log("Up Button Pressed");
+    currentText = "Up and away we go!";
+    this.mark_dirty();
+  });
+  rocky.onPress("select", function() {
+    console.log("Select Button Pressed");
+    currentText = "Select is the best button.";
+    this.mark_dirty();
+  });
+  rocky.onPress("down", function() {
+    console.log("Down Button Pressed");
+    currentText = "Down into the depths we go.";
+    this.mark_dirty();
+  });
+})();
+
+</script>
+</html>
diff --git 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
@@ -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'];
 };