clean commit

Author: jeremyabel

.gitignore

@@ -0,0 +1,20 @@
+# OS X
+.DS_Store*
+Icon?
+._*
+
+# Windows
+Thumbs.db
+ehthumbs.db
+Desktop.ini
+
+# Linux
+.directory
+*~
+
+# npm
+node_modules
+*.log
+*.gz
+
+index.js

README.md

@@ -0,0 +1,36 @@
+![img](https://github.com/googlecreativelab/anypixel/blob/master/header.png)
+
+[AnyPixel.js](http://googlecreativelab.github.io/anypixel) 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.
+
+![buttonwall](https://github.com/googlecreativelab/anypixel/blob/master/buttonwall.jpg)
+
+## 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.
+
+## 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](https://github.com/googlecreativelab/anypixel/tree/master/frontend/previewer) and run one of the [examples](https://github.com/googlecreativelab/anypixel/tree/master/frontend/examples).
+
+### Build your own app 
+Building your own app is easy with the Anypixel framework. To get started, check out the [framework documentation](https://github.com/googlecreativelab/anypixel/tree/master/frontend/framework) and the [example app](https://github.com/googlecreativelab/anypixel/tree/master/frontend/examples/getting-started):
+
+``` 
+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() * 3)];
+	ctx.fillRect(event.detail.x - 1, event.detail.y - 1, 2, 2);
+}); 
+```

backend/.gitignore

@@ -0,0 +1,10 @@
+node_modules
+temp
+.tmp
+dist
+.sass-cache
+.map
+bower_components
+package
+.DS_Store
+index.js

backend/README.md

@@ -0,0 +1,73 @@
+# AnyPixel - Backend
+The AnyPixel backend consists of four applications which work together to provide an interface 
+between the javascript-driven AnyPixel apps (the [_frontend_](https://github.com/googlecreativelab/anypixel/tree/master/frontend)) and the physical display 
+[hardware](https://github.com/googlecreativelab/anypixel/tree/master/hardware). 
+
+- **AppServer** - A node.js server which locally hosts the AnyPixel apps.
+
+- **ChromeBridge** - A Chrome app which displays AnyPixel apps and handles the communication between the AppServer apps and the physical display hardware. 
+
+- **UdpManager** - A node.js app which distributes data packets from ChromeBridge to the individual hardware components.
+
+- **Emulator** - A Chrome app for debugging, which simulates the network communications 
+between ChromeBridge and the physical display hardware.
+
+![img](https://github.com/googlecreativelab/anypixel/blob/master/backend/flow.png)
+
+## Installation & Startup
+_These instructions assume a basic familiarity with the command line of your particular system. 
+For a good introduction to the command line, check out 
+[The Command Line Crash Course](http://cli.learncodethehardway.org/book/)._
+
+### Getting Started
+1. **Download and install [node.js](https://nodejs.org/en/).**
+
+2. **Install [browserify](http://browserify.org/)** - `$ npm install -g browserify`
+
+---------
+
+### AppServer
+1. **Install node components** - In the /appserver directory, do: `$ npm install`
+
+2. **Start the server** - In the /appserver directory, do `$ npm start`
+
+To stop the server, do `$ npm stop`
+
+_For more info on adding your own apps to the AppServer, see the [AppServer README](https://github.com/googlecreativelab/anypixel/tree/master/backend/appserver)._
+
+---------
+
+### UdpManager
+1. **Install node components** - In the /udp-manager directory, do: `$npm install`
+
+2. **Start the manager** - In the /udp-manager directory, do `$ npm start`
+
+To stop the manager, do `$ npm stop` 
+
+---------
+
+### Emulator
+1. **Install node components** - In the /emulator directory, do: `$npm install`
+
+2. **Install and launch the Chrome app** - Follow the ChromeBridge installation instructions above, 
+except when loading the extension, select the **/emulator** folder instead.
+
+---------
+
+### ChromeBridge
+1. **Install node components** - In the /chromebridge directory, do: `$ npm install`
+
+2. **Open the Chrome Extensions page** - In the Chrome browser, navigate to `chrome://extensions`
+
+3. **Enable Developer mode:**
+![img](https://github.com/googlecreativelab/anypixel/blob/master/backend/extension.png)
+
+4. **Load the extension** - Click the "Load unpacked extension..." button and select the 
+/chromebridge folder. The ChromeBridge app will be added to the top of the extensions list.
+
+4. **Ensure the AppServer and the Emulator are running** - or plug in your physical display hardware.
+
+5. **Launch the app** - click the "Launch" button under the extension title:
+![img](https://github.com/googlecreativelab/anypixel/blob/master/backend/launch.png)
+
+_For more info on using the ChromeBridge app, see the [ChromeBridge README](https://github.com/googlecreativelab/anypixel/tree/master/backend/chromebridge)_.

backend/appserver/README.md

@@ -0,0 +1,67 @@
+# Backend - AppServer
+AppServer is a node.js app which runs Anypixel apps from an [Express](http://expressjs.com/) server. This is what holds the canvas that your Anypixel app will draw on. Each frame it will send the pixel data from this canvas to ChromeBridge, where it will be sent on to the physical display itself. It also provides a RESTful API for changing the current app and for listing the available apps.
+
+![img](https://github.com/googlecreativelab/anypixel/blob/master/backend/appserver/flow.png)
+
+## Getting Started
+
+1. **Install node components** - `$ npm install`
+
+2. **Start the server** - `$ npm start`
+
+To stop the server, do `$ npm stop` <br />
+
+**To add your own apps:** <br />
+Copy your app folder into `/public/apps` and make sure you have an index.js file in your root app directory.
+
+## API
+
+### Get App
+Renders an HTML page containing the requested app.
+
+* **URL:** <br />
+  /app/:app_name
+
+* **Method:** <br />
+  `GET`
+
+* **URL Parameters:** <br />
+  `app_name=[string]`
+
+* **Success Response:**
+  * **Code:** 200 <br />
+    **Content:** Rendered EJS template HTML containing the requested app.
+    
+* **Error Response:**
+  * **Code:** 404 <br />
+    **Content:** `Invalid app name`
+
+### Get Available Apps
+Returns an array of the valid app names and directories
+
+* **URL:** <br />
+  /api/apps
+
+* **Method:** <br />
+  `GET`
+
+* **URL Parameters:** <br />
+  None
+
+* **Success Response:**
+  * **Code:** 200 <br />
+   **Content:** <br />
+   ```
+   {
+	    success: true,
+	    apps: [
+		    {
+			    name: "My App",
+			    path: "myApp"
+		    }
+	   ]
+   }
+   ```
+
+* **Error Response:** <br />
+None

backend/appserver/appserver.js

@@ -0,0 +1,113 @@
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+var path       = require('path');
+var http       = require('http');
+var fs         = require('fs');
+var express    = require('express');
+var bodyParser = require('body-parser');
+var app        = express();
+
+/**
+ * An Express server which hosts the current Anypixel app and provides a RESTful api with functions 
+ * for changing the current app and getting a list of all available apps.
+ */
+
+// Express config
+app.set('views', path.join(__dirname, 'views'));
+app.set('view engine', 'ejs');
+app.use(bodyParser.json());
+app.use(bodyParser.urlencoded({extended: true}));
+app.use(express.static(path.join(__dirname, 'public')));
+app.use(function(req, res, next) {
+  res.header("Access-Control-Allow-Origin", "*");
+  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
+  next();
+});
+
+// Start the server on port 8000
+var server = http.createServer(app).listen(8000, function() {
+  console.log('AnyPixel AppServer | Listening on port ' + server.address().port);
+});
+
+
+/**
+ * Serves a requested app with a given app_name
+ */
+app.get('/app/:app_name', function(req, res) {
+  // Check if app exists
+  var dir_name = req.params.app_name;
+  var filename = path.join(__dirname, 'public', 'apps', dir_name, 'index.js');
+  if (!fs.existsSync(filename)) {
+    console.log('Invalid app name: ' + dir_name);
+    return res.status(404).send('Invalid app name');
+  }
+
+  console.log('Serving: ' + req.params.app_name);
+
+  // Render
+  res.render('app', {
+    layout: false,
+    app: {
+      name: req.params.app_name,
+      base: '/apps/' + dir_name + '/',
+      path: 'index.js'
+    }
+  });
+});
+
+/**
+ * Returns an alphabetical list of all valid apps in the /public/apps directory
+ * Valid apps must contain a package.json file with the display_name parameter set.
+ */
+app.get('/api/apps', function(req, res) {
+  // List all available apps
+  var apps_root_path = path.join(__dirname, 'public', 'apps');
+  
+  fs.readdir(apps_root_path, function(err, dirs) {
+    
+    // Filter out system directories (/.git, for example)
+    dirs = dirs.filter(function(val) {
+      return !(val.substr(0, 1) == '.');
+    });
+
+    // For each directory, get the app name from the package.json file
+    var apps = [];
+    dirs.forEach(function(dir) {
+      var package_json_path = path.join(apps_root_path, dir, 'package.json');
+      try {
+        var app_desc = JSON.parse(fs.readFileSync(package_json_path, 'utf8'));
+        apps.push({
+          name: app_desc.display_name,
+          path: dir
+        });
+      } catch(e) {}
+    });
+
+    // Sort alphabetically
+    apps = apps.sort(function(a, b) {
+      if (a.name < b.name) return -1;
+      if (a.name > b.name) return 1;
+      return 0;
+    });
+
+    // Return success
+    res.json({
+      success: true, 
+      apps: apps
+    });
+  });
+});

backend/appserver/flow.png

@@ -0,0 +1,18 @@
+{
+  "name": "anypixel-app-server",
+  "description": "Application that hosts and serves AnyPixel apps",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "preinstall": "npm install -g forever",
+    "postinstall": "npm run build",
+    "build": "browserify -d src/app-runner.js > public/js/index.js",
+    "start": "forever start --minUptime 1000 --spinSleepTime 1000 appserver.js",
+    "stop": "forever stop appserver.js"
+  },
+  "dependencies": {
+    "body-parser": "1.14.x",
+    "ejs": "2.3.x",
+    "express": "4.13.x"
+  }
+}