googlecreativelab / anypixel

A web-friendly way for anyone to build unusual displays

AnyPixel.js is an open-source software and hardware library that makes it possible to use the web to create big, unusual, interactive displays. Anyone can fork the code and the schematics to create their own display at any scale.

The first display using this platform is in the 8th Avenue lobby at the Google NYC office. To create this installation, we used 5880 off-the-shelf arcade buttons with LEDs inside them as our pixels. AnyPixel.js’ straightforward hardware/software framework makes it easy to build any display where each pixel is an interactive element.

What You'll Find

• /hardware - EAGLE schematics, board layouts, CAD files, wiring diagrams, and blueprints.
• /firmware - microcontroller code, written for the STM32 family of devices.
• /backend - node.js and chrome applications for communicating with the hardware.
• /frontend - the app framework, an in-browser previewer, and 12 example apps written by Googlers and friends worldwide.
• /rpi-example - a simple starter example connecting a Raspberry Pi with AnyPixel to a single button for round trip communication.

Getting Started

Check out the examples

We've included 12 example apps written by Googlers and friends for the 8th Avenue lobby display in NYC. To check them out, install the previewer and run one of the examples.

Build your own app

Building your own app is easy with the Anypixel framework. To get started, check out the framework documentation and the example app:

var anypixel = require('anypixel'); 
var ctx = anypixel.canvas.getContext2D();

var colors = ['#F00', '#0F0', '#00F'];

/**  
 * * Listen for onButtonDown events and draw a 2x2 rectangle at the event site
 */
document.addEventListener('onButtonDown', function(event) {   
	ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
	ctx.fillRect(event.detail.x - 1, event.detail.y - 1, 2, 2);
}); 

Contributors

• Jeremy Abel
• Kyle Phillips
• Nick Fox-Gieg
• Jeramy Morrill
• Manny Tan
• Felix Woitzel
• Anders Hoff
• Dimitry Bentsionov
• Nick Stahlnecker
• Nick Jonas
• Patrick Miller

Note

Third party directories may have different (non-Apache 2.0) licenses.

anypixel's Issues

Previewer

Thanks for this great library.
Where can we download the previewer ?

Regards

Trying to get in touch regarding a security issue

Hey there!

I'd like to report a security issue but cannot find contact instructions on your repository.

If not a hassle, might you kindly add a SECURITY.md file with an email, or another contact method? GitHub recommends this best practice to ensure security issues are responsibly disclosed, and it would serve as a simple instruction for security researchers in the future.

Thank you for your consideration, and I look forward to hearing from you!

(cc @huntr-helper)

Emulator Not Working

While those backend application installed, any reasons that only ChromeBridge working fine but Emulator without showing the blue box on the top left corner?
Anyone got an idea?

Link to wiki?

After taking a look at the documentation, I have found that some of the links that lead to the wiki is not available (eg. https://github.com/googlecreativelab/anypixel/wiki/Communications-Packets leads back to the main project page) - Is there a hidden wiki somewhere, or is it simply not published yet?

Anypixel Homepage Header

Hey,

I'd love to learn about how the header animation with the symbols was made. Does that use anypixel? Is the codebase for that available to study?

Thanks

Index.js is missing in the previewer src folder

Hi!

I need to create my own version of the previewer to accurately represent the physical button wall we have in use here. However, I noticed that the index.js file is missing in the previewer/src folder. I'm assuming it's because all index.js files are ignored in .gitignore and the file in question isn't excluded.

Could you add the file to the repo as it's needed to build the previewer.js file?

Thank you!

Suggest hardware steps

Having amazing specs for hardware, it would be useful to have suggestions about what to do with me for software-only folks like myself. I would like to see:

1. Possible places, URLs or at least type of places that can manufacture this stuff
2. Approximate costs (obviously this would be locale specific, but any data is better than no data)
3. Assembly instructions or at least a video walk through of this wall internals

Thank you so much for your incredible efforts!

Clear canvas

Hi!

I'm playing with the previewer app to see what can I build, and I've got problems when I try to clear some section.

Here is the simplest version of the code I'm trying to get working:

var anypixel = require('anypixel'); 
var ctx = anypixel.canvas.getContext2D();

/**
 * On load, draw a square
 */
document.addEventListener('DOMContentLoaded', function() {
  ctx.fillStyle = '#F00';
  ctx.fillRect(0, 0, 10, 10); // This is happening as expected
});

/**
 * On button down, clear the square
 */
document.addEventListener('onButtonDown', function(event) {
  ctx.clearRect(0, 0, 10, 10); // This is not working
});

I can only see it working (in the preview app) when I enable the color correction mode, but without it, the square still drown.

I think I'm not doing something in the right way, but I couldn't be able to find any documentation.

Thanks!

---

Tested on Ubuntu Linux 16.04, with Chrome 71, Chromium 71 and Firefox 64

hardware question

Hi
It is a wonderfun idea. 👍

We are lack of mechanical drawings. A Mechanical Engineer tell me thart there are some files missing in the path /hardware/mechanical . So that we can't manufacture mechanical structure .

Please check these files by the PATH : /hardware/mechanical . Plesae help me . @avindra @mannytan @streeter @hapticdata ^_^

Many thanks.
email :wangjcvip#gmail.com ( replace #b with @)

Specify LED compatibility and grid definition

Loving this project and am dying to try it out. Great work!

There are two major areas which would greatly help in understanding how to set up this project:

1. What type of LEDs are supported? I'm assuming WS2812 as those are fairly common, though without this specified I'm not sure what LEDs anypixel.js can talk to.

2. How is the LED grid defined, or can it even be defined? There's many ways to set up the LEDs -- i.e in linear or nonlinear strips, individual LEDs connected in columns or rows... knowing how to specify this is essential for setting up the pixel grid.

Compile questions

Regarding the controller firmware, we encountered a problem when compiling "project_config.c" mentioning the macro defenition #ifdef REV1 has to be defined but couldn't seen from any of the files. According to the REV number on the PCB board is 3 rather than 1. Is this a versioning problem or can anyone help? Thanks. The files are downloaded offline directly from the repository. Thanks.

Simple diet-project to get started

If I'm having confusion and pretty high level questions like:

• what's a PWM module?
• as the physical size of the project grows, which parts am I gonna need to keep buying more of?
• widget X can do ABC, but widget Y can do ABC and XYZ... I wonder if I should buy widget Y?

are these, or questions like them, just the beginning and it's only gonna get worse moving forward? My guess is that a lot of web developers will see this and say to themselves, "cool. definitely want to build that." But that thought will then quickly be followed by another of, "shit. what's a PCB? is this going to cost me a small fortune? will I need to buy tools for this? i hope i don't electrocute myself..."

I think the idea mentioned at the end of this comment might be something that would be helpful at providing people with no hardware experience a context to learn in and enough basic knowledge that they could tool around with that and then afterwards have enough confidence to go off and figure out the rest on their own.

Could I use Espruino to build a prototype?

Hello!
Firstly, I must say, you folks are amazing! This is an incredible technology you developed, and the best part, is that is an open library! Really, you guys are amazing.
My friends and I are little hackers when come to new technology of this type and we wanted to build an inexpensive prototype for fun.
We were thinking in buying an Espruino Board with and RGB-123 LED Matrix to prototype. You probably know what an Espruino Board is, but just in case, I will put the site (http://www.espruino.com/EspruinoBoard) and the specifications here:

• Less than half the size of a business card ( 54mm x 41mm )
• STM32F103RCT6 32-bit 72MHz ARM Cortex M3 CPU
• 256KB of Flash memory, 48KB of RAM
• Micro USB connector
• Input Voltage Range of 3.6v to 15v
• Battery connector (JST PHR-2 2 Pin)
• Built-in SD card connector
• Red, Green and Blue LEDs
• Pads to allow HC-05 Bluetooth modules to be added
• 0.1" Pin spacing
• 44 GPIO Pins, capable of: 26 PWM Pins, 16 ADC Pins, 3 USARTs, 2 SPI, 2 I2C and 2 DACs
• Prototype area which can be used in many different configurations, for example: Servo Headers, Up to - - 14x 500mA outputs, 2x .NET Gadgeteer connectors, or NRF24L01+ wireless transceiver modules
• Rev 1v4: CE and RoHS certification
  We were thinking about the Espruino because it uses a STM32F103RCT6 microcontroller - if I am not mistaken, it is the same kind you use - and it supports JavaScript, besides being relative low-cost and small.
  What you think about using the Espruino for this application? Do you have any recommendations? Does the application have any different specification if using the Espruino?

Thank you for all your time and knowledge,
You are truly incredible,
Fernando Nazário and Friends

P.S: sorry if I made any english mistakes. I am from Brazil and probably there will be few (euphemism) errors here.

Manufacturing the hardware boards - PCB / Firmware Programming questions

I'm looking at quotes for producing the controller and display boards on a small scale (~50).

1. Is there a solder-type requirement for making these boards or do the components care what solder is used?

It's unclear to me how to "set the correct memory layout for each device in the linker script."

2. Where is the referenced linker script and do I adjust it before uploading firmware for each board and MCU (controller and display)?
   2.a Do I need to send this instruction to the PCB manufacturer, will they understand what that means?
   2.b. Are there any instructions needed for properly uploading the provided firmware to the boards or do I just compile and upload everything as a single hex file as is?

3. What is the SMT oven profile for these boards?

4. Is conformal coating needed?

Approximate Cost

Hey,

We're looking at building one of these as an internal project for our office - but I'd love to know the approximate cost to build?

If you have any ballpark figures - It'd be great to know.

Steve