Pixel Display Library

Made with ❤ by Benpai

Actions

Show array 1 Show array 2 Start animation Render image Clear display

Config

Background color:
Foreground color:

Features

• No dependencies
• Works in most major browsers
• Animation support
• Wide application
• Easy to use
• Highly configurable

Installation

Download the latest minified javascript file and include it at the end of the body.

Download pixeldisplay.min.js <script src="pixeldisplay.min.js"></script>

Usage

<canvas id="display" height="100px" width="100px" data-density="10"></canvas>

The canvas element must be in the HTML somewhere. You can have more than one on a page. You must set the height, width, and either data-density or data-pixel-height and data-pixel-width. You can also set the default colours for the display using data-foreground-color and data-background-color. These will default to black and white respectively.

var display = new Display('#display');

Create a new Display object for each canvas you're using. The parameter is the selector for the canvas element in the HTML. The default selector is #display.

display.renderArray(array);

Render an array on the display canvas. Takes an array as parameter. The array must be the length of the amount of pixels in the display, and comprised of 1's and 0's. It's drawn onto the canvas from left to right, top to bottom. See the examples below.

display.renderImage('image.png', h=0, w=0, x=0, y=0);

Render an image from a url on the display canvas. The image must be hosted on the same domain as the page, or have an Access-Control-Allow-Origin value of *. Setting the height or width to 0 defaults to the height or width of the canvas.

display.clear();

Clear the display.

var animation = new Animation(display, [array1, array2], delay=500);

Create a new Animation object for each animation you want to play. The first parameter must be the Display object to be played on. The second parameter is an array of the arrays in the animation sequence. The third parameter is the delay between frames in milliseconds. By default it's 500 ms.

animation.start();

Start the animation on the designated Display.

animation.stop();

Stop the animation on the designated Display.

Examples

Draw a simple image from an array

<canvas id="display" height="100px" width="100px" data-density="4"></canvas>

var image = [
    1,0,0,0,
    0,1,0,0,
    0,0,1,0,
    0,0,0,1
];

var d = new Display();
d.renderArray(image);

Render an image onto a display with non-square pixels

<canvas id="display" height="100px" width="100px" data-pixel-height="10" data-pixel-width="20"></canvas>

var d = new Display();
d.renderImage('rainbow.png');

Supported Browsers

The Pixel Display library has been tested and working on Chrome, Firefox, and Microsoft Edge. It does not work on IE. Other browsers are yet to be tested.

Bugs and Issues

If you encounter a bug, need some help or find an issue in the code, you can submit an issue on Github.