anypixel

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:

• Anypixel-Emulator
• Anypixel-Example

Usage

var anypixel = require('anypixel');

Canvas

The canvas object is a thin wrapper around the drawing canvas:

anypixel.canvas.getContext2D(); // Returns the '2d' context
anypixel.canvas.getContext3D(); // Returns the 'webgl' context

Config

The config object contains the following display properties:

anypixel.config.width;     // Width of the canvas, in pixels
anypixel.config.height;    // Height of the canvas, in pixels
anypixel.config.canvasId;  // The DOM ID of the canvas element

Events

onButtonDown: dispatched when a button is pressed

document.addEventListener('onButtonDown', function(event) {
    // event.detail.x: x-axis coordinate
    // event.detail.y: y-axis coordinate
});

**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 }); ```