Merge branch 'develop'

README.md

@@ -1,16 +1,24 @@
 # jQuery.qrcode
 
-* Website with download, docs and demo: <http://larsjung.de/qrcode>
+* Website with download, docs and demo: <http://larsjung.de/qrcode/>
-* Sources: <http://github.com/lrsjng/jQuery.qrcode>
+* Sources: <https://github.com/lrsjng/jQuery.qrcode>
 
-jQuery.qrcode is provided under the terms of the [MIT License](http://github.com/lrsjng/jQuery.qrcode/blob/master/LICENSE.txt).
+jQuery.qrcode is provided under the terms of the [MIT License](https://github.com/lrsjng/jQuery.qrcode/blob/develop/LICENSE.md).
-
+It makes use of [QR Code Generator](http://www.d-project.com/qrcode/index.html) (MIT).
-Uses [QR Code Generator](http://www.d-project.com/qrcode/index.html) (MIT). Kudos to [jquery.qrcode.js](http://github.com/jeromeetienne/jquery-qrcode) (MIT).
+Kudos to [jquery.qrcode.js](https://github.com/jeromeetienne/jquery-qrcode).
 
 
 ## Changelog
 
 
+### v0.7.0 - *2013-08-17*
+
+* some fixes
+* adds image support for fore- and background
+* adds label and image positioning
+* updates build process
+
+
 ### v0.6.0 - *2013-07-28*
 
 * adds version range

makefile.js

@@ -2,17 +2,61 @@
 'use strict';
 
 
+module.exports = function (make) {
+
+
 	var path = require('path'),
-	child_process = require('child_process');
+		pkg = require('./package.json'),
 
-
+		$ = make.fQuery,
-var pkg = require('./package.json'),
 
 		root = path.resolve(__dirname),
-	src = path.resolve(root, 'src'),
+		src = path.join(root, 'src'),
-	build = path.resolve(root, 'build'),
+		build = path.join(root, 'build');
 
-	jshint = {
+
+	make.version('>=0.10.0');
+	make.defaults('release');
+
+
+	make.before(function () {
+
+		var moment = make.moment();
+
+		make.env = {
+			pkg: pkg,
+			stamp: moment.format('YYYY-MM-DD HH:mm:ss')
+		};
+
+		$.info({ method: 'before', message: pkg.version + ' ' + make.env.stamp });
+	});
+
+
+	make.target('check-version', [], 'add git info to dev builds').async(function (done, fail) {
+
+		if (!/\+$/.test(pkg.version)) {
+			done();
+			return;
+		}
+
+		$.git(root, function (err, result) {
+
+			pkg.version += result.buildSuffix;
+			$.info({ method: 'check-version', message: 'version set to ' + pkg.version });
+			done();
+		});
+	});
+
+
+	make.target('clean', [], 'delete build folder').sync(function () {
+
+		$.DELETE(build);
+	});
+
+
+	make.target('lint', [], 'lint all JavaScript files with JSHint').sync(function () {
+
+		var options = {
 				// Enforcing Options
 				bitwise: true,
 				curly: true,
@@ -26,128 +70,43 @@ var pkg = require('./package.json'),
 				undef: true,
 
 				// Environments
-		browser: true,
+				browser: true
-
-		// Globals
-		predef: [
-			"jQuery", "qrcode"
-		]
 			},
-
+			global = {
-	mapperSrc = function (blob) {
+				'jQuery': true,
-
+				'qrcode': true
-		return blob.source.replace(src, build);
-	},
-
-	mapperRoot = function (blob) {
-
-		return blob.source.replace(root, build);
 			};
 
-
+		$(src + ': jquery.qrcode.js, demo/scripts.js').log(-3)
-module.exports = function (make) {
+			.jshint(options, global);
-
-	var Event = make.Event,
-		$ = make.fQuery,
-		moment = make.moment,
-		stamp, replacements;
-
-
-	make.version('>=0.8.1');
-	make.defaults('release');
-
-
-	make.before(function () {
-
-		stamp = moment();
-
-		replacements = {
-			pkg: pkg,
-			stamp: stamp.format('YYYY-MM-DD HH:mm:ss')
-		};
-
-		Event.info({ method: 'before', message: pkg.version + ' ' + replacements.stamp });
 	});
 
 
-	make.target('check-version', [], 'add git info to dev builds').async(function (done, fail) {
+	make.target('build', ['check-version'], 'build all updated files').sync(function () {
-
-		if (!/-dev$/.test(pkg.version)) {
-			done();
-			return;
-		}
-
-		$.git(root, function (err, result) {
-
-			pkg.version += '-' + result.revListOriginMasterHead.length + '-' + result.revParseHead.slice(0, 7);
-			Event.info({
-				method: 'check-version',
-				message: 'version set to ' + pkg.version
-			});
-			done();
-		});
-	});
-
-
-	make.target('clean', [], 'delete build folder')
-		.sync(function () {
-
-			$.rmfr($.I_AM_SURE, build);
-		});
-
-
-	make.target('lint', [], 'lint all JavaScript files with JSHint')
-		.sync(function () {
 
 		$(src + ': jquery.qrcode.js')
-				.jshint(jshint);
-		});
-
-
-	make.target('build', ['check-version'], 'build all updated files')
-		.sync(function () {
-
-			var scriptName = pkg.name;
-
-			$(src + '/demo/*')
-				.handlebars(replacements)
-				.write($.OVERWRITE, mapperSrc);
-
-			$(src + ': ' + scriptName + '.js')
 			.includify()
-				.handlebars(replacements)
+			.handlebars(make.env)
-				.write($.OVERWRITE, path.join(build, scriptName + '-' + pkg.version + '.js'))
+			.WRITE($.map.p(src, build).s('.js', '-' + pkg.version + '.js'))
-				.write($.OVERWRITE, path.join(build, 'demo', scriptName + '.js'))
 			.uglifyjs()
-				.write($.OVERWRITE, path.join(build, scriptName + '-' + pkg.version + '.min.js'));
+			.WRITE($.map.p(src, build).s('.js', '-' + pkg.version + '.min.js'));
+
+		$(src + ': **, ! *.js')
+			.handlebars(make.env)
+			.WRITE($.map.p(src, build));
 
 		$(root + ': README*, LICENSE*')
-				.write($.OVERWRITE, mapperRoot);
+			.handlebars(make.env)
+			.WRITE($.map.p(root, build));
 	});
 
 
-	make.target('release', ['clean', 'build'], 'create a zipball')
+	make.target('release', ['clean', 'build'], 'create a zipball').async(function (done, fail) {
-		.async(function (done, fail) {
 
-			var target = path.join(build, pkg.name + '-' + pkg.version + '.zip'),
+		$(build + ': **').shzip({
-				cmd = 'zip',
+			target: path.join(build, pkg.name + '-' + pkg.version + '.zip'),
-				args = ['-ro', target, '.'],
+			dir: build,
-				options = { cwd: build },
+			callback: done
-				proc = child_process.spawn(cmd, args, options);
-
-			Event.info({ method: 'exec', message: cmd + ' ' + args.join(' ') });
-
-			proc.stderr.on('data', function (data) {
-				process.stderr.write(data);
-			});
-			proc.on('exit', function (code) {
-				if (code) {
-					Event.error({ method: 'exec', message: cmd + ' exit code ' + code });
-					fail();
-				} else {
-					Event.ok({ method: 'exec', message: 'created zipball ' + target });
-					done();
-				}
 		});
 	});
 };

package.json

@@ -1,5 +1,13 @@
 {
   "name": "jquery.qrcode",
   "displayName": "jQuery.qrcode",
-	"version": "0.6.0"
+  "version": "0.7.0",
+  "description": "generate QR codes dynamically",
+  "url": "http://larsjung.de/qrcode/",
+  "author": "Lars Jung",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lrsjng/jQuery.qrcode.git"
+  }
 }

src/demo/index.html

@@ -15,7 +15,7 @@
 	<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet'>
 	<link href='styles.css' rel='stylesheet'>
 	<script src="jquery-1.10.2.js"></script>
-	<script src="jquery.qrcode.js"></script>
+	<script src="../jquery.qrcode-{{pkg.version}}.js"></script>
 	<script src="ff-range.js"></script>
 	<script src="scripts.js"></script>
 </head>
@@ -35,10 +35,10 @@
 		<hr/>
 		<label for="size">SIZE:</label>
 		<input id="size" type="range" value="400" min="100" max="1000" step="50" />
-		<label for="color">COLOR</label>
+		<label for="fill">FILL</label>
-		<input id="color" type="color" value="#333333" />
+		<input id="fill" type="color" value="#333333" />
-		<label for="bg-color">BACKGROUND COLOR</label>
+		<label for="background">BACKGROUND</label>
-		<input id="bg-color" type="color" value="#ffffff" />
+		<input id="background" type="color" value="#ffffff" />
 		<label for="text">CONTENT</label>
 		<textarea id="text">http://larsjung.de/qrcode/</textarea>
 		<hr/>
@@ -69,10 +69,15 @@
 			<option value="4">4 - Image-Box</option>
 		</select>
 		<hr/>
+		<label for="msize">SIZE:</label>
+		<input id="msize" type="range" value="11" min="0" max="40" step="1" />
+		<label for="mposx">POS X:</label>
+		<input id="mposx" type="range" value="50" min="0" max="100" step="1" />
+		<label for="mposy">POS Y:</label>
+		<input id="mposy" type="range" value="50" min="0" max="100" step="1" />
+		<hr/>
 		<label for="label">LABEL</label>
 		<input id="label" type="text" value="jQuery.qrcode" />
-		<label for="fontsize">LABEL SIZE:</label>
-		<input id="fontsize" type="range" value="11" min="1" max="20" step="1" />
 		<label for="font">FONT NAME</label>
 		<input id="font" type="text" value="Ubuntu" />
 		<label for="fontcolor">FONT COLOR:</label>
@@ -80,8 +85,6 @@
 		<hr/>
 		<label for="image">IMAGE</label>
 		<input id="image" type="file" />
-		<label for="imagesize">IMAGE SIZE:</label>
-		<input id="imagesize" type="range" value="13" min="1" max="30" step="1" />
 	</div>
 
 	<img id="img-buffer" src="dummy.png" />

src/demo/scripts.js

@@ -1,24 +1,27 @@
 
-var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]',
+(function ($) {
+	'use strict';
+
+	var isOpera = Object.prototype.toString.call(window.opera) === '[object Opera]',
 
 		guiValuePairs = [
 			["size", "px"],
 			["minversion", ""],
 			["quiet", " modules"],
 			["radius", "%"],
-		["fontsize", "%"],
+			["msize", "%"],
-		["imagesize", "%"]
+			["mposx", "%"],
+			["mposy", "%"]
 		],
 
 		updateGui = function () {
 
-		for (var idx in guiValuePairs) {
+			$.each(guiValuePairs, function (idx, pair) {
 
-			var pair = guiValuePairs[idx],
+				var $label = $('label[for="' + pair[0] + '"]');
-				$label = $('label[for="' + pair[0] + '"]');
 
 				$label.text($label.text().replace(/:.*/, ': ' + $('#' + pair[0]).val() + pair[1]));
-		}
+			});
 		},
 
 		updateQrCode = function () {
@@ -27,8 +30,11 @@ var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]',
 					render: $("#render").val(),
 					ecLevel: $("#eclevel").val(),
 					minVersion: parseInt($("#minversion").val(), 10),
-				color: $("#color").val(),
+
-				bgColor: $("#bg-color").val(),
+					fill: $("#fill").val(),
+					background: $("#background").val(),
+					// fill: $("#img-buffer")[0],
+
 					text: $("#text").val(),
 					size: parseInt($("#size").val(), 10),
 					radius: parseInt($("#radius").val(), 10) * 0.01,
@@ -36,13 +42,15 @@ var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]',
 
 					mode: parseInt($("#mode").val(), 10),
 
+					mSize: parseInt($("#msize").val(), 10) * 0.01,
+					mPosX: parseInt($("#mposx").val(), 10) * 0.01,
+					mPosY: parseInt($("#mposy").val(), 10) * 0.01,
+
 					label: $("#label").val(),
-				labelsize: parseInt($("#fontsize").val(), 10) * 0.01,
 					fontname: $("#font").val(),
 					fontcolor: $("#fontcolor").val(),
 
-				image: $("#img-buffer")[0],
+					image: $("#img-buffer")[0]
-				imagesize: parseInt($("#imagesize").val(), 10) * 0.01
 				};
 
 			$("#container").empty().qrcode(options);
@@ -91,3 +99,5 @@ $(function () {
 		$(window).load(update);
 		update();
 	});
+
+}(jQuery));

src/demo/styles.css

@@ -101,10 +101,7 @@ input, textarea, select {
 
 input[type="range"] {
 	-webkit-appearance: none;
-/*	height: 8px;
+	cursor: pointer;
-	margin-top: 4px;
-	margin-bottom: 4px;
-*/	cursor: pointer;
 }
 input::-webkit-slider-thumb {
 	-webkit-appearance: none;

src/jquery.qrcode.js

@@ -79,16 +79,17 @@
 
 		drawBackgroundLabel = function (qr, context, settings) {
 
-			var font = "bold " + (settings.labelsize * settings.size) + "px " + settings.fontname,
+			var size = settings.size,
+				font = "bold " + (settings.mSize * size) + "px " + settings.fontname,
 				ctx = $('<canvas/>')[0].getContext("2d");
 
 			ctx.font = font;
 
 			var w = ctx.measureText(settings.label).width,
-				sh = settings.labelsize,
+				sh = settings.mSize,
-				sw = w / settings.size,
+				sw = w / size,
-				sl = (1 - sw)/2,
+				sl = (1 - sw) * settings.mPosX,
-				st = (1 - sh)/2,
+				st = (1 - sh) * settings.mPosY,
 				sr = sl + sw,
 				sb = st + sh,
 				pad = 0.01;
@@ -102,9 +103,8 @@
 			}
 
 			context.fillStyle = settings.fontcolor;
-			context.textAlign = "center";
 			context.font = font;
-			context.fillText($("#label").val(), 0.5 * settings.size, 0.5 * settings.size + 0.3 * settings.labelsize * settings.size);
+			context.fillText(settings.label, sl*size, st*size + 0.75 * settings.mSize * size);
 		},
 
 		drawBackgroundImage = function (qr, context, settings) {
@@ -112,10 +112,10 @@
 			var size = settings.size,
 				w = settings.image.naturalWidth || 1,
 				h = settings.image.naturalHeight || 1,
-				sh = settings.imagesize,
+				sh = settings.mSize,
 				sw = sh * w / h,
-				sl = (1 - sw)/2,
+				sl = (1 - sw) * settings.mPosX,
-				st = (1 - sh)/2,
+				st = (1 - sh) * settings.mPosY,
 				sr = sl + sw,
 				sb = st + sh,
 				pad = 0.01;
@@ -133,8 +133,10 @@
 
 		drawBackground = function (qr, context, settings) {
 
-			if (settings.bgColor) {
+			if ($(settings.background).is('img')) {
-				context.fillStyle = settings.bgColor;
+				context.drawImage(settings.background, 0, 0, settings.size, settings.size);
+			} else if (settings.background) {
+				context.fillStyle = settings.background;
 				context.fillRect(settings.left, settings.top, settings.size, settings.size);
 			}
 
@@ -270,8 +272,22 @@
 					fn(qr, context, settings, l, t, w, row, col);
 				}
 			}
-			context.fillStyle = settings.color;
+			if ($(settings.fill).is('img')) {
+				context.strokeStyle = 'rgba(0,0,0,0.5)';
+				context.lineWidth = 2;
+				context.stroke();
+				var prev = context.globalCompositeOperation;
+				context.globalCompositeOperation = "destination-out";
 				context.fill();
+				context.globalCompositeOperation = prev;
+
+				context.clip();
+				context.drawImage(settings.fill, 0, 0, settings.size, settings.size);
+				context.restore();
+			} else {
+				context.fillStyle = settings.fill;
+				context.fill();
+			}
 		},
 
 		// Draws QR code to the given `canvas` and returns it.
@@ -314,7 +330,7 @@
 
 				// some shortcuts to improve compression
 			var settings_size = settings.size,
-				settings_bgColor = settings.bgColor,
+				settings_bgColor = settings.background,
 				math_floor = Math.floor,
 
 				moduleCount = qr.moduleCount,
@@ -338,7 +354,7 @@
 					margin: 0,
 					width: moduleSize,
 					height: moduleSize,
-					'background-color': settings.color
+					'background-color': settings.fill
 				},
 
 				$div = $('<div/>').data('qrcode', qr).css(containerCSS);
@@ -399,11 +415,11 @@
 			// size in pixel
 			size: 200,
 
-			// code color
+			// code color or image element
-			color: '#000',
+			fill: '#000',
 
-			// background color, `null` for transparent background
+			// background color or image element, `null` for transparent background
-			bgColor: null,
+			background: null,
 
 			// content
 			text: 'no text',
@@ -422,13 +438,15 @@
 			// 4: image box
 			mode: 0,
 
+			mSize: 0.1,
+			mPosX: 0.5,
+			mPosY: 0.5,
+
 			label: 'no label',
-			labelsize: 0.1,
 			fontname: 'sans',
 			fontcolor: '#000',
 
-			image: null,
+			image: null
-			imagesize: 0.1
 		};
 
 	// Register the plugin