Improved static-images example

example/static_images.html

@@ -29,23 +29,21 @@ <h3>Working with static images</h3>
             <strong>Code128</strong> and <strong>EAN</strong> encoded barcodes.
         </p>
       <div class="controls">
-        <button class="next">Next</button>
-        <fieldset class="reader-group">
-            <label>UPC-E</label>
-            <input type="radio" name="reader" checked="checked" value="upc_e" />
-            <label>EAN-8</label>
-            <input type="radio" name="reader" value="ean_8" />
-            <label>UPC</label>
-            <input type="radio" name="reader" value="upc" />
-            <label>Codabar</label>
-            <input type="radio" name="reader" value="codabar" />
-            <label>Code39</label>
-            <input type="radio" name="reader" value="code_39" />
-            <label>Code128</label>
-            <input type="radio" name="reader" value="code_128" />
-            <label>EAN</label>
-            <input type="radio" name="reader" value="ean" />
-        </fieldset>
+          <fieldset class="input-group">
+              <button class="next">Next</button>
+          </fieldset>
+          <fieldset class="reader-config-group">
+              <span>Barcode-Type</span>
+              <select name="decoder_readers;input-stream_src">
+                  <option value="code_128" selected="selected">Code 128</option>
+                  <option value="code_39">Code 39</option>
+                  <option value="ean">EAN</option>
+                  <option value="ean_8">EAN-8</option>
+                  <option value="upc">UPC</option>
+                  <option value="upc_e">UPC-E</option>
+                  <option value="codabar">Codabar</option>
+              </select>
+          </fieldset>
       </div>
       <div id="result_strip">
         <ul class="thumbnails"></ul>

example/static_images.js

@@ -1,41 +1,95 @@
 $(function() {
     var App = {
         init: function() {
-            Quagga.init({
-                inputStream: { name: "Test",
-                   type: "ImageStream",
-                   src: "../test/fixtures/" + App.config.reader + "/",
-                   length: App.config.length
-                },
-                decoder : {
-                    readers : [App.config.reader + "_reader"]
-                }
-            }, function() {
+            Quagga.init(this.state, function() {
                 App.attachListeners();
                 Quagga.start();
             });
         },
         config: {
-            reader: "upc_e",
+            reader: "code_128",
             length: 10
         },
         attachListeners: function() {
+            var self = this;
+
             $(".controls").on("click", "button.next", function(e) {
                 e.preventDefault();
                 Quagga.start();
             });
-            
-            $(".controls .reader-group").on("change", "input", function(e) {
+
+            $(".controls .reader-config-group").on("change", "input, select", function(e) {
                 e.preventDefault();
-                App.detachListeners();
-                Quagga.stop();
-                App.config.reader = e.target.value;
-                App.init();
+                var $target = $(e.target),
+                    value = $target.attr("type") === "checkbox" ? $target.prop("checked") : $target.val(),
+                    name = $target.attr("name"),
+                    states = self._convertNameToStates(name);
+
+                console.log("Value of "+ states + " changed to " + value);
+                self.setState(states, value);
             });
         },
         detachListeners: function() {
             $(".controls").off("click", "button.next");
-            $(".controls .reader-group").off("change", "input");
+            $(".controls .reader-config-group").off("change", "input, select");
+        },
+        _accessByPath: function(obj, path, val) {
+            var parts = path.split('.'),
+                depth = parts.length,
+                setter = (typeof val !== "undefined") ? true : false;
+
+            return parts.reduce(function(o, key, i) {
+                if (setter && (i + 1) === depth) {
+                    o[key] = val;
+                }
+                return key in o ? o[key] : {};
+            }, obj);
+        },
+        _convertNameToStates: function(names) {
+            return names.split(";").map(this._convertNameToState.bind(this));
+        },
+        _convertNameToState: function(name) {
+            return name.replace("_", ".").split("-").reduce(function(result, value) {
+                return result + value.charAt(0).toUpperCase() + value.substring(1);
+            });
+        },
+        setState: function(paths, value) {
+            var self = this;
+
+            paths.forEach(function(path) {
+                var mappedValue;
+                if (typeof self._accessByPath(self.inputMapper, path) === "function") {
+                    mappedValue = self._accessByPath(self.inputMapper, path)(value);
+                }
+                self._accessByPath(self.state, path, mappedValue);
+            });
+
+            console.log(JSON.stringify(self.state));
+            App.detachListeners();
+            Quagga.stop();
+            App.init();
+        },
+        inputMapper: {
+            decoder: {
+                readers: function(value) {
+                    return [value + "_reader"];
+                }
+            },
+            inputStream: {
+                src: function(value) {
+                    return "../test/fixtures/" + value + "/"
+                }
+            }
+        },
+        state: {
+            inputStream: { name: "Test",
+                type: "ImageStream",
+                src: "../test/fixtures/code_128/",
+                length: 10
+            },
+            decoder : {
+                readers : ["code_128_reader"]
+            }
         }
     };