Merge pull request #1 from basic-experimental/testing

Merge testing branch into main branch
Wolfyxon · Jun 1, 2024 · 912e7b7 · 912e7b7
2 parents 1b50fdd + 6d7d67e
commit 912e7b7
Show file tree

Hide file tree

Showing 16 changed files with 88 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -188,8 +188,8 @@ <h4>Gamepad controls</h4>
                       <a href="other/qr">
                           <img class="app-icon" src="img/appIcons/qr.png">
                           <div class="app-text">
-                              <p class="app-name">QR Code generator</p>
-                              <p class="app-description">Turn text into QR codes</p>
+                              <p class="app-name">QR and barcode generator</p>
+                              <p class="app-description">Turn text into QR/barcodes</p>
                               <span class="tag tag-dsi"></span>
                           </div>
                       </a>
@@ -387,4 +387,4 @@ <h3>Links & contact</h3>
       </div>
   </div>
 </body>
-</html>
+</html>
diff --git a/other/qr/img/ERROR.png b/other/qr/img/ERROR.png
diff --git a/other/qr/img/aztec.gif b/other/qr/img/aztec.gif
diff --git a/other/qr/img/codabar.gif b/other/qr/img/codabar.gif
diff --git a/other/qr/img/code128.gif b/other/qr/img/code128.gif
diff --git a/other/qr/img/code39.gif b/other/qr/img/code39.gif
diff --git a/other/qr/img/datamatrix.gif b/other/qr/img/datamatrix.gif
diff --git a/other/qr/img/ean13.gif b/other/qr/img/ean13.gif
diff --git a/other/qr/img/ean8.gif b/other/qr/img/ean8.gif
diff --git a/other/qr/img/pdf417.gif b/other/qr/img/pdf417.gif
diff --git a/other/qr/img/qrcode.gif b/other/qr/img/qrcode.gif
diff --git a/other/qr/img/upca.gif b/other/qr/img/upca.gif
diff --git a/other/qr/img/upce.gif b/other/qr/img/upce.gif
diff --git a/other/qr/index.html b/other/qr/index.html
@@ -16,16 +16,36 @@
 <body>
     <div id="screens">
         <div id="top-screen">
+                <h3>QR and barcode generator</h3>
             <img id="qr" src="http://api.qrserver.com/v1/create-qr-code/?size=200x200&data=Hello World" alt="Error getting the QR code">
         </div>
         <div id="bottom-screen">
-            <h3>QR code generator</h3>
-            <input type="text" id="text" placeholder="Input text...">
-            <br>
+            <span style="white-space: nowrap;"><input type="radio" id="aztec" name="codeSelectRadio" value="aztec">
+            <label for="aztec">Aztec&nbsp;<img src="./img/aztec.gif" height="25px"></label></span>
+            <span style="white-space: nowrap;"><input type="radio" id="codabar" name="codeSelectRadio" value="codabar">
+            <label for="codabar">Codabar&nbsp;<img src="./img/codabar.gif" height="25px"></label></span>
+            <span style="white-space: nowrap;"><input type="radio" id="code39" name="codeSelectRadio" value="code39">
+            <label for="code39">Code39&nbsp;<img src="./img/code39.gif" height="25px"></label></span>
+            <span style="white-space: nowrap;"><input type="radio" id="code128" name="codeSelectRadio" value="code128">
+            <label for="code128">Code128&nbsp;<img src="./img/code128.gif" height="25px"></label></span>
+            <span style="white-space: nowrap;"><input type="radio" id="datamatrix" name="codeSelectRadio" value="datamatrix">
+            <label for="datamatrix">Data Matrix&nbsp;<img src="./img/datamatrix.gif" height="25px"></label></span>
+            <span style="white-space: nowrap;"><input type="radio" id="ean8" name="codeSelectRadio" value="ean8">
+            <label for="ean8">EAN-8&nbsp;<img src="./img/ean8.gif" height="25px"></label></span>
+            <span style="white-space: nowrap;"><input type="radio" id="ean13" name="codeSelectRadio" value="ean13">
+            <label for="ean13">EAN-13&nbsp;<img src="./img/ean13.gif" height="25px"></label></span>
+            <span style="white-space: nowrap;"><input type="radio" id="pdf417" name="codeSelectRadio" value="pdf417">
+            <label for="pdf417">PDF-417&nbsp;<img src="./img/pdf417.gif" height="25px"></label></span>
+            <span style="white-space: nowrap;"><input type="radio" id="qrcode" name="codeSelectRadio" value="qrcode" checked>
+            <label for="qrcode">QR Code&nbsp;<img src="./img/qrcode.gif" height="25px"></label></span>
+            <span style="white-space: nowrap;"><input type="radio" id="upca" name="codeSelectRadio" value="upca">
+            <label for="upca">UPC-A&nbsp;<img src="./img/upca.gif" height="25px"></label></span>
+            <span style="white-space: nowrap;"><input type="radio" id="upce" name="codeSelectRadio" value="upce">
+            <label for="upce">UPC-E&nbsp;<img src="./img/upce.gif" height="25px"></label></span>
             <button id="btn-gen">Generate</button>
-
-            <p>https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=</p>
+            <br>
+            <input type="text" id="text" placeholder="Input text...">
         </div>
     </div>
 </body>
-</html>
+</html>
diff --git a/other/qr/qr.css b/other/qr/qr.css
@@ -1,13 +1,14 @@
 #qr {
-    width: 200px;
-    height: 200px;
+    max-width: 300px;
+    max-height: 140px;
     display: block;
     margin-left: auto;
     margin-right: auto;
     margin-top: 2%;
 }
 
 #text {
+    margin-top: 2%;
     width: 90%;
 }
 
@@ -17,13 +18,27 @@
 
 #btn-gen {
     margin-top: 2%;
-    height: 15%;
-    width: 50%;
+    height: 10%;
+    width: 45%;
     border: 2px green solid;
     border-radius: 5px;
     background-color: limegreen;
 }
 
 #btn-gen:active {
     background: lime;
-}
+}
+
+label{
+  font-size: 17px;
+  display: inline-block;
+  width: 120px;
+}
+
+input[name="codeSelectRadio"] {
+  transform: scale(1.2);
+}
+
+h3{
+  text-align: center;
+}
diff --git a/other/qr/qr.js b/other/qr/qr.js
@@ -1,9 +1,47 @@
 window.addEventListener('load', function() {
 	const qr = document.getElementById('qr'),
 		input = document.getElementById('text');
+		codeSelectors = document.getElementsByName('codeSelectRadio');
 
+	function getSelectedCode(){
+		for(var i = 0; i < codeSelectors.length; i++){
+			if(codeSelectors[i].checked){
+				return codeSelectors[i].value;
+			}
+		}
+	}
+
+	function loadImageAsDataURL(url, callback) { // 3DS refuses to wait for api when just setting the src, so I need to request it through JS
+    		var xhr = new XMLHttpRequest();
+    		xhr.open('GET', url, true);
+    		xhr.responseType = 'blob';
+
+    		xhr.onload = function() {
+        		if (this.status === 200) {
+            			var reader = new FileReader();
+            			reader.onloadend = function() {
+                			var base64data = reader.result;
+                			callback(base64data);
+            			}
+            			reader.readAsDataURL(this.response);
+        		} else {
+            			callback('./img/ERROR.png'); // Return the error image (likely the code type does not support the input)
+        		}
+    		};
+
+    		xhr.onerror = function() {
+        		console.error("Request failed");
+    		};
+
+   		xhr.send();
+	}
+
+
 	function generate(str) {
-		qr.src = 'http://api.qrserver.com/v1/create-qr-code/?size=200x200&data=' + decodeURIComponent(str);
+		var imageUrl = 'https://barcodeapi.org/api/' + getSelectedCode() + '/' + decodeURIComponent(str);
+		loadImageAsDataURL(imageUrl, function(dataUrl) {
+    			qr.src = dataUrl;
+		});
 	}
 
 	document.getElementById('btn-gen').addEventListener('click', function() {