Anypixel
A web-friendly way to build unusual displays.
Welcome to the "beta" version of the Anypixel framework. The Anypixel framework is designed to make it easy to develop content for unusual physical interactive displays.
Anypixel provides a canvas, a few button events, and some information about the display. The rest is up to you!
Getting Started
- Install the previewer tool:
npm install -g https://anypixel-storage.appspot.com/npm/anypixel-previewer.tar.gz
See the Anypixel-Emulator repository for more information about using the previewer tool.
- Check out the getting-started example app
Anypixel works by injecting your app into a template HTML page which communicates with the button wall. Only one .js file is injected; if you're using multiple .js files, we recommend bundling them together. In the example app, we use [Browserify](browserify.org) to do this.
For more info:
Usage
var anypixel = ;
Canvas
The canvas
object is a thin wrapper around the drawing canvas:
anypixelcanvas; // Returns the '2d' contextanypixelcanvas; // Returns the 'webgl' context
Config
The config
object contains the following display properties:
anypixelconfigwidth; // Width of the canvas, in pixelsanypixelconfigheight; // Height of the canvas, in pixelsanypixelconfigcanvasId; // The DOM ID of the canvas element
Events
onButtonDown: dispatched when a button is pressed
document;
**onButtonUp**: dispatched when a button is no longer pressed ```js document.addEventListener('onButtonUp', function(event) { // event.detail.x: x-axis coordinate // event.detail.y: y-axis coordinate }); ```