Final changes.

README.md

@@ -13,9 +13,11 @@ Uses [QR Code Generator](http://www.d-project.com/qrcode/index.html) (MIT). Kudo
 
 ### develop branch
 
-* adds options to set version range
+* adds version range
-* adds optioinal label or image
+* adds quiet zone
+* adds optional label or image
 * adds rounded corners
+* adds image output
 * adds demo
 
 

src/demo/index.html

@@ -24,7 +24,7 @@
 	<div id="container"></div>
 
 	<div class="control left">
-		<a id="banner" href="http://larsjung.de/qrcode/">{{pkg.displayName}} · Demo</a>
+		<a id="banner" href="http://larsjung.de/qrcode/">{{pkg.displayName}} {{pkg.version}}</a>
 		<hr/>
 		<label for="render">RENDER MODE</label>
 		<select id="render">
@@ -43,7 +43,7 @@
 		<textarea id="text">http://larsjung.de/qrcode/</textarea>
 		<hr/>
 		<label for="minversion">MINVERSION:</label>
-		<input id="minversion" type="range" value="5" min="1" max="10" step="1" />
+		<input id="minversion" type="range" value="6" min="1" max="10" step="1" />
 		<label for="eclevel">ERROR CORRECTION LEVEL</label>
 		<select id="eclevel">
 			<option value="L">L - Low (7%)</option>
@@ -55,8 +55,8 @@
 		<input id="quiet" type="range" value="1" min="0" max="4" step="1" />
 		<label for="radius">CORNER RADIUS (not in Opera):</label>
 		<input id="radius" type="range" value="50" min="0" max="50" step="10" />
-		<hr/>
+		<!-- <hr/> -->
-		<a id="download" download="qrcode.png">DOWNLOAD</a>
+		<!-- <a id="download" download="qrcode.png">DOWNLOAD</a> -->
 	</div>
 
 	<div class="control right">
@@ -71,16 +71,16 @@
 		<hr/>
 		<label for="label">LABEL</label>
 		<input id="label" type="text" value="jQuery.qrcode" />
-		<label for="font">FONT</label>
+		<label for="fontsize">LABEL SIZE:</label>
-		<input id="font" type="text" value="Ubuntu" />
-		<label for="fontsize">FONT HEIGHT:</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>
 		<input id="fontcolor" type="color" value="#ff9818" />
 		<hr/>
 		<label for="image">IMAGE</label>
 		<input id="image" type="file" />
-		<label for="imagesize">IMAGE HEIGHT:</label>
+		<label for="imagesize">IMAGE SIZE:</label>
 		<input id="imagesize" type="range" value="13" min="1" max="30" step="1" />
 	</div>
 

src/demo/scripts.js

@@ -23,8 +23,7 @@ var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]',
 
 	updateQrCode = function () {
 
-		var mode = parseInt($("#mode").val(), 10),
+		var options = {
-			options = {
 				render: $("#render").val(),
 				ecLevel: $("#eclevel").val(),
 				minVersion: parseInt($("#minversion").val(), 10),
@@ -35,6 +34,8 @@ var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]',
 				radius: parseInt($("#radius").val(), 10) * 0.01,
 				quiet: parseInt($("#quiet").val(), 10),
 
+				mode: parseInt($("#mode").val(), 10),
+
 				label: $("#label").val(),
 				labelsize: parseInt($("#fontsize").val(), 10) * 0.01,
 				fontname: $("#font").val(),
@@ -44,14 +45,6 @@ var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]',
 				imagesize: parseInt($("#imagesize").val(), 10) * 0.01
 			};
 
-		if (mode === 1 || mode === 2) {
-			options.ext = 'label';
-			options.boxed = mode === 2;
-		} else if (mode === 3 || mode === 4) {
-			options.ext = 'image';
-			options.boxed = mode === 4;
-		}
-
 		$("#container").empty().qrcode(options);
 	},
 

src/jquery.qrcode.js

@@ -93,12 +93,12 @@
 				sb = st + sh,
 				pad = 0.01;
 
-			if (settings.boxed) {
+			if (settings.mode === 1) {
-				// Box
-				qr.addBlank(sl - pad, st - pad, sr + pad, sb + pad);
-			} else {
 				// Strip
 				qr.addBlank(0, st - pad, size, sb + pad);
+			} else {
+				// Box
+				qr.addBlank(sl - pad, st - pad, sr + pad, sb + pad);
 			}
 
 			context.fillStyle = settings.fontcolor;
@@ -109,9 +109,8 @@
 
 		drawBackgroundImage = function (qr, context, settings) {
 
-			var size = settings.size;
+			var size = settings.size,
-
+				w = settings.image.naturalWidth || 1,
-			var w = settings.image.naturalWidth || 1,
 				h = settings.image.naturalHeight || 1,
 				sh = settings.imagesize,
 				sw = sh * w / h,
@@ -121,13 +120,14 @@
 				sb = st + sh,
 				pad = 0.01;
 
-			if (settings.boxed) {
+			if (settings.mode === 3) {
-				// Box
-				qr.addBlank(sl - pad, st - pad, sr + pad, sb + pad);
-			} else {
 				// Strip
 				qr.addBlank(0, st - pad, size, sb + pad);
+			} else {
+				// Box
+				qr.addBlank(sl - pad, st - pad, sr + pad, sb + pad);
 			}
+
 			context.drawImage(settings.image, sl*size, st*size, sw*size, sh*size);
 		},
 
@@ -138,9 +138,10 @@
 				context.fillRect(settings.left, settings.top, settings.size, settings.size);
 			}
 
-			if (settings.ext === 'label') {
+			var mode = settings.mode;
+			if (mode === 1 || mode === 2) {
 				drawBackgroundLabel(qr, context, settings);
-			} else if (settings.ext === 'image') {
+			} else if (mode === 3 || mode === 4) {
 				drawBackgroundImage(qr, context, settings);
 			}
 		},
@@ -413,8 +414,13 @@
 			// quiet zone in modules
 			quiet: 0,
 
-			// extras: 'label' or 'image'
+			// modes
-			extra: null,
+			// 0: normal
+			// 1: label strip
+			// 2: label box
+			// 3: image strip
+			// 4: image box
+			mode: 0,
 
 			label: 'no label',
 			labelsize: 0.1,
@@ -422,9 +428,7 @@
 			fontcolor: '#000',
 
 			image: null,
-			imagesize: 0.1,
+			imagesize: 0.1
-
-			boxed: true
 		};
 
 	// Register the plugin