diff --git a/src/examples/module-library.js b/src/examples/module-library.js index e0a5a15..1828c0c 100644 --- a/src/examples/module-library.js +++ b/src/examples/module-library.js @@ -56,7 +56,8 @@ $(function(){ {"src":"meemoo:ui/mouse","info":{"title":"mouse","author":"meemoo","description":"sends mouse coordinates as percentage"}}, {"src":"meemoo:ui/motion","info":{"title":"motion","author":"meemoo","description":"sends device motion (accelerometer) data as percentage (Chrome and iOS only)"}}, {"src":"meemoo:ui/leap","info":{"title":"leap","author":"meemoo","description":"leap motion hand tracker"}}, - {"src":"meemoo:ui/facetracker","info":{"title":"facetracker","author":"meemoo","description":"checks image for face, sends coordinates"}} + {"src":"meemoo:ui/facetracker","info":{"title":"facetracker","author":"meemoo","description":"checks image for face, sends coordinates"}}, + {"src":"meemoo:ui/makeymakey","info":{"title":"makeymakey","author":"meemoo","description":"makeymakey board"}} ], animation: [ {"src":"meemoo:variable/animation","info":{"title":"animation","author":"meemoo","description":"holds a stack of canvases to use as an animation"}}, diff --git a/src/nodes/ui-makeymakey.js b/src/nodes/ui-makeymakey.js new file mode 100644 index 0000000..e4a19e4 --- /dev/null +++ b/src/nodes/ui-makeymakey.js @@ -0,0 +1,120 @@ +/*global Stats:true*/ + +// extends src/nodes/time.js which extends src/node-box-native-view.js + +$(function(){ + + var template = + 'makeymakey
'+ + '';; + + Iframework.NativeNodes["ui-makeymakey"] = Iframework.NativeNodes["ui"].extend({ + + template: _.template(template), + info: { + title: "makeymakey", + description: "makeymakey board" + }, + events: { + "change .active": "changeActive" + }, + initializeModule: function(){ + var self = this; + + Mousetrap.bind('space', function () { + if (self._active) { + self.sendSpace(); + } + }); + + Mousetrap.bind('up', function () { + if (self._active) { + self.sendUp(); + } + }); + + Mousetrap.bind('down', function () { + if (self._active) { + self.sendDown(); + } + }); + + Mousetrap.bind('right', function () { + if (self._active) { + self.sendRight(); + } + }); + + Mousetrap.bind('left', function () { + if (self._active) { + self.sendLeft(); + } + }); + + $(window).click(function (event) { + if (self._active) { + self.sendClick(event); + } + }); + }, + _active: true, + changeActive: function(event){ + if (event.target.checked) { + this._active = true; + } else { + this._active = false; + } + }, + sendSpace: function() { + this.send("space", "bang"); + this.$(".info").text('Space!'); + }, + sendClick: function(evt) { + this.send("click", "bang"); + this.$(".info").text('Click!'); + }, + sendUp: function() { + this.send("up", "bang"); + this.$(".info").text('Up!'); + }, + sendDown: function() { + this.send("down", "bang"); + this.$(".info").text('Down!'); + }, + sendLeft: function() { + this.send("left", "bang"); + this.$(".info").text('Left!'); + }, + sendRight: function() { + this.send("right", "bang"); + this.$(".info").text('Right!'); + }, + remove: function() { + var keys = ['space', 'up', 'down', 'left', 'right']; + for (key in keys) { + Mousetrap.unbind(key, 'keydown'); + } + $(window).unbind('click'); + }, + outputs: { + space: { + type: "bang" + }, + click: { + type: "bang" + }, + up: { + type: "bang" + }, + down: { + type: "bang" + }, + left: { + type: "bang" + }, + right: { + type: "bang" + } + } + }); +});