Introducing aruco-marker

.gitignore

@@ -0,0 +1 @@
+node_modules

.travis.yml

@@ -0,0 +1,5 @@
+language: node_js
+
+node_js:
+  - 0.10
+  - 0.8

CHANGELOG.md

@@ -0,0 +1,4 @@
+0.1.0
+-----
+
+* Initial release

Gruntfile.js

@@ -0,0 +1,68 @@
+module.exports = function(grunt) {
+
+  // Project configuration.
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+    banner: '/*! <%= pkg.name %> <%= pkg.version %> <%= grunt.template.today("yyyy-mm-dd") %> - MIT Licensed, see http://github.com/bhollis/aruco-marker-js */\n',
+    copy: {
+      main: {
+        src: '<%= pkg.name %>.js',
+        dest: 'build/<%= pkg.name %>.js'
+      },
+    },
+    uglify: {
+      build: {
+        src: '<%= pkg.name %>.js',
+        dest: 'build/<%= pkg.name %>.min.js'
+      }
+    },
+    usebanner: {
+      dist: {
+        options: {
+          position: 'top',
+          banner: '<%= banner %>',
+          linebreak: false,
+        },
+        files: {
+          src: [ 'build/*.js' ]
+        }
+      }
+    },
+    jshint: {
+      // define the files to lint
+      files: ['Gruntfile.js', '<%= pkg.name %>.js', 'test/**/*.js'],
+      // configure JSHint (documented at http://www.jshint.com/docs/)
+      options: {
+        // more options here if you want to override JSHint defaults
+        globals: {
+          module: true
+        }
+      }
+    },
+    jasmine_node: {
+      projectRoot: ".",
+      verbose: true,
+      forceExit: true,
+      jUnit: {
+        report: false,
+        savePath : "./build/reports/jasmine/",
+        useDotNotation: true,
+        consolidate: true
+      }
+    },
+    watch: {
+      files: ['<%= jshint.files %>'],
+      tasks: ['test']
+    }
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-copy');
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-contrib-jshint');
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-jasmine-node');
+  grunt.loadNpmTasks('grunt-banner');
+
+  grunt.registerTask('test', ['jshint', 'jasmine_node']);
+  grunt.registerTask('default', ['jshint', 'test', 'copy', 'uglify', 'usebanner']);
+};

MIT-LICENSE.txt

@@ -0,0 +1,20 @@
+Copyright (c) 2014 Benjamin Hollis
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,44 @@
+# Generate SVG Aruco Marker Images with JavaScript
+
+`aruco-marker` is a JavaScript library that can generate marker images (fiducials) for the [Aruco](http://www.uco.es/investiga/grupos/ava/node/26) augmented reality marker library. Aruco codes can be recognized by the original Aruco C++ library, or in the browser by [js-aruco](https://code.google.com/p/js-aruco/). `aruco-marker` generates images as SVG, making them easy to scale to any size or print out.
+
+# Usage
+
+`aruco-marker` is available for use directly in the browser, or via AMD (RequireJS), or in NodeJS. It is installable as `aruco-marker` from either NPM or Bower.
+
+```javascript
+// In Node or RequireJS, require the library - otherwise 
+// ArucoMarker is already available as a browser global.
+var ArucoMarker = require('aruco-marker');
+
+var myMarker = new ArucoMarker(155);
+var svgImage = myMarker.toSVG('500px'); // the size is optional
+document.getElementById('marker').innerHTML = svgImage;
+```
+
+# Demo
+
+Clone the repository and open `demos/index.html` to see a demo of generating random Aruco 
+codes.
+
+# SVG to Canvas
+
+While SVG images are very flexible and are perfect for most applications, you can use [this technique](https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas) to draw an SVG image to an HTML Canvas in order to obtain an image data URL if you need a raster image.
+
+# Developing
+
+First, install NodeJS however you like for your system (on OSX, I use `brew install node`).
+
+Then check out and build the project:
+
+```bash
+npm install -g grunt-cli
+git clone https://github.com/bhollis/aruco-marker-js
+cd aruco-marker-js
+npm install
+grunt
+```
+
+## License
+
+Copyright (c) 2014 Benjamin Hollis. MIT Licensed, see [MIT-LICENSE.txt] for details.

aruco-marker.js

@@ -0,0 +1,90 @@
+// Export for use via AMD, Node.js, or a browser global.
+// See https://github.com/umdjs/umd/blob/master/returnExportsGlobal.js
+(function (root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define([], function () {
+      return (root.ArucoMarker = factory());
+    });
+  } else if (typeof exports === 'object') {
+    // Node. Does not work with strict CommonJS, but
+    // only CommonJS-like enviroments that support module.exports,
+    // like Node.
+    module.exports = factory();
+  } else {
+    // Browser globals
+    root.ArucoMarker = factory();
+  }
+}(this, function () {
+
+  // Create an ArucoMarker object by its ID, which can then be used to generate images.
+  // The id must be in the range [0..1023]
+  // Based on https://github.com/rmsalinas/aruco/blob/master/trunk/src/arucofidmarkers.cpp
+  function ArucoMarker(id) {
+    if (id < 0 || id > 1023) {
+      throw new RangeError('Marker ID must be in the range [0..1023]');
+    }
+
+    this.id = id;
+  }
+
+  ArucoMarker.prototype = {
+    // Generate a marker as a 5x5 matrix of 0s and 1s.
+    markerMatrix: function() {
+      var ids = [16, 23, 9, 14];
+      var index, val, x, y;
+      var marker = [[0, 0, 0, 0, 0],
+                 [0, 0, 0, 0, 0],
+                 [0, 0, 0, 0, 0],
+                 [0, 0, 0, 0, 0],
+                 [0, 0, 0, 0, 0]];
+
+      for (y = 0; y < 5; y++) {
+        index = (this.id >> 2 * (4 - y)) & 3;
+        val = ids[index];
+        for (x = 0; x < 5; x++) {
+          if ((val >> (4 - x)) & 1) {
+            marker[y][x] = 1;
+          } else {
+            marker[y][x] = 0;
+          }
+        }
+      }
+
+      return marker;
+    },
+
+    // Create an SVG image of the marker, as a string.
+    // Optionally pass a size (in any SVG-compatible units) or leave it out to size it on your own.
+    toSVG: function(size) {
+      var x, y, originX, originY;
+      var marker = this.markerMatrix();
+
+      if (size) {
+        size = 'height="' + size + '" width="' + size + '"';
+      } else {
+        size = '';
+      }
+
+      var image = '<svg ' + size + ' viewBox="0 0 7 7" version="1.1" xmlns="http://www.w3.org/2000/svg">\n' +
+        '  <rect x="0" y="0" width="7" height="7" fill="black"/>\n';
+
+      for (y = 0; y < 5; y++) {
+        for (x = 0; x < 5; x++) {
+          if (marker[x][y] === 1) {
+            image += '  <rect x="' + (5 - x) + '" y="' + (5 - y) +
+              '" width="1" height="1" fill="white" ' +
+              // Slight stroke to get around aliasing issues with adjacent rectangles
+              'stroke="white" stroke-width="0.01" />\n';
+          }
+        }
+      }
+
+      image += '</svg>';
+
+      return image;
+    }
+  };
+
+  return ArucoMarker;
+}));

bower.json

@@ -0,0 +1,17 @@
+{
+  "name": "aruco-marker",
+  "version": "0.1.0",
+  "authors": [
+    "Ben Hollis <ben@benhollis.net>"
+  ],
+  "main": "aruco-marker.js",
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "demos"
+  ]
+}

build/aruco-marker.js

@@ -0,0 +1,91 @@
+/*! aruco-marker 0.1.0 2014-02-15 - MIT Licensed */
+// Export for use via AMD, Node.js, or a browser global.
+// See https://github.com/umdjs/umd/blob/master/returnExportsGlobal.js
+(function (root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define([], function () {
+      return (root.ArucoMarker = factory());
+    });
+  } else if (typeof exports === 'object') {
+    // Node. Does not work with strict CommonJS, but
+    // only CommonJS-like enviroments that support module.exports,
+    // like Node.
+    module.exports = factory();
+  } else {
+    // Browser globals
+    root.ArucoMarker = factory();
+  }
+}(this, function () {
+
+  // Create an ArucoMarker object by its ID, which can then be used to generate images.
+  // The id must be in the range [0..1023]
+  // Based on https://github.com/rmsalinas/aruco/blob/master/trunk/src/arucofidmarkers.cpp
+  function ArucoMarker(id) {
+    if (id < 0 || id > 1023) {
+      throw new RangeError('Marker ID must be in the range [0..1023]');
+    }
+
+    this.id = id;
+  }
+
+  ArucoMarker.prototype = {
+    // Generate a marker as a 5x5 matrix of 0s and 1s.
+    markerMatrix: function() {
+      var ids = [16, 23, 9, 14];
+      var index, val, x, y;
+      var marker = [[0, 0, 0, 0, 0],
+                 [0, 0, 0, 0, 0],
+                 [0, 0, 0, 0, 0],
+                 [0, 0, 0, 0, 0],
+                 [0, 0, 0, 0, 0]];
+
+      for (y = 0; y < 5; y++) {
+        index = (this.id >> 2 * (4 - y)) & 3;
+        val = ids[index];
+        for (x = 0; x < 5; x++) {
+          if ((val >> (4 - x)) & 1) {
+            marker[y][x] = 1;
+          } else {
+            marker[y][x] = 0;
+          }
+        }
+      }
+
+      return marker;
+    },
+
+    // Create an SVG image of the marker, as a string.
+    // Optionally pass a size (in any SVG-compatible units) or leave it out to size it on your own.
+    toSVG: function(size) {
+      var x, y, originX, originY;
+      var marker = this.markerMatrix();
+
+      if (size) {
+        size = 'height="' + size + '" width="' + size + '"';
+      } else {
+        size = '';
+      }
+
+      var image = '<svg ' + size + ' viewBox="0 0 7 7" version="1.1" xmlns="http://www.w3.org/2000/svg">\n' +
+        '  <rect x="0" y="0" width="7" height="7" fill="black"/>\n';
+
+      for (y = 0; y < 5; y++) {
+        for (x = 0; x < 5; x++) {
+          if (marker[x][y] === 1) {
+            image += '  <rect x="' + (5 - x) + '" y="' + (5 - y) +
+              '" width="1" height="1" fill="white" ' +
+              // Slight stroke to get around aliasing issues with adjacent rectangles
+              'stroke="white" stroke-width="0.01" />\n';
+          }
+        }
+      }
+
+      image += '</svg>';
+
+      return image;
+    }
+  };
+
+  return ArucoMarker;
+}));

demos/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset='utf-8'>
+    <title>BenHollis.net</title>
+  </head>
+  <body>
+    <h1>Random Aruco Markers</h1>
+
+    <div id="marker">
+    </div>
+
+    <script src="../build/aruco-marker.js"></script>
+    <script>
+      function randomMarker() {
+        var id = Math.floor(Math.random() * 1024);
+
+        var el = document.getElementById('marker');
+        el.innerHTML = '<p>ID: ' + id + '</p>' + (new ArucoMarker(id).toSVG('500px'));
+      }
+
+      randomMarker();
+      setInterval(randomMarker, 3000);
+    </script>
+  </body>
+</html>