Fix evgeni#11: add (optional) image in the middle of QR code

.gitmodules

@@ -1,6 +1,6 @@
 [submodule "jquery-qrcode"]
 	path = jquery-qrcode
-	url = https://github.com/jeromeetienne/jquery-qrcode.git
+	url = https://github.com/lrsjng/jquery-qrcode.git
 [submodule "github-fork-ribbon-css"]
 	path = github-fork-ribbon-css
 	url = https://github.com/simonwhitaker/github-fork-ribbon-css.git

index.html

@@ -61,7 +61,7 @@
             <label for="ssid" class="control-label">SSID</label>
             <div class="input-group">
                 <span id="basic-addon-ssid" class="input-group-addon"><i class="glyphicon glyphicon-signal"></i></span>
-                <input type="text" id="ssid" name="ssid" class="form-control" placeholder="SSID" aria-describedby="basic-addon-ssid" required>
+                <input type="text" id="ssid" name="ssid" class="form-control" placeholder="SSID" aria-describedby="basic-addon-ssid" required value="test">
             </div>
         </div>
 
@@ -80,11 +80,22 @@
             <label class="control-label">Key</label>
             <div class="input-group">
                 <span id="basic-addon1" class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
-                <input type="password" id="key" name="key" class="form-control" placeholder="key" aria-describedby="basic-addon1" required>
+                <input type="password" id="key" name="key" class="form-control" placeholder="key" aria-describedby="basic-addon1" required value="test">
                 <span class="input-group-btn"><button class="btn btn-default" type="button" id="display-key"><i class="glyphicon glyphicon-eye-open" id="display-key-icon"></i></button></span>
            </div>
         </div>
 
+        <div class="form-group">
+            <label class="control-label">Image</label>
+            <div class="input-group">
+                <input id="image" type="file">
+                <div class="hidden">
+                    <img id="img-buffer">
+                </div>
+            </div>
+        </div>
+
+
         <div class="form-group">
             <label class="pull-left control-label" for="hidden">Hidden</label>
             <div class="input-group">
@@ -160,7 +171,7 @@ <h3>Other</h3>
     </footer>
     <script src="jquery/jquery-3.3.1.min.js"></script>
     <script src="bootstrap/dist/js/bootstrap.min.js"></script>
-    <script src="jquery-qrcode/jquery.qrcode.min.js"></script>
+    <script src="jquery-qrcode/dist/jquery-qrcode.min.js"></script>
     <script src="jquery.storage.js/jquery.storage.js"></script>
     <script type="text/javascript">
         function escape_string (string) {
@@ -198,8 +209,26 @@ <h3>Other</h3>
                 qrstring += 'H:true';
             }
             qrstring += ';';
+
+
+            var qrCodeOptions = {
+                text: qrstring,
+                ecLevel: 'H',
+                radius: 0.5,
+                quiet: 1,
+                background: '#FFF',
+                mode: 0
+            }
+
+            if($('#img-buffer')[0].src) {
+                qrCodeOptions.image = $('#img-buffer')[0];
+                qrCodeOptions.mode = 4;
+                qrCodeOptions.mSize = 0.3;
+            }
+
             $('#qrcode').empty();
-            $('#qrcode').qrcode(qrstring);
+            $('#qrcode').qrcode(qrCodeOptions);
+
             $('#showssid').text('SSID: '+ssid);
             $('#save').show();
             $('#print').css('display', 'inline-block');
@@ -268,7 +297,20 @@ <h3>Other</h3>
             $('#history-drop').hide();
         };
 
+        function loadImage () {
+            var input = $('#image')[0];
+            if (input.files && input.files[0]) {
+                var reader = new FileReader();
+                reader.onload = function (event) {
+                    $('#img-buffer').attr('src', event.target.result);
+                };
+                reader.readAsDataURL(input.files[0]);
+            }
+        }
+
         $(document).ready(function(){
+            $('#image').on('change', loadImage);
+
             $('#form').submit(function() {
                 generate();
                 return false;