ALMOST works

index.html

@@ -60,7 +60,12 @@
                 <h1 class="text-center mt mb h1">Signature Card Creator</h1>
                 <div class="card">
                     <a id="card" href="#">
-                        <img class="hidden" id="cardImg" alt="card"/>
+                        <canvas id="backgroundLayer" width="404" height="225" style="z-index: 0;"></canvas>
+                        <canvas id="nameLayer" width="404" height="225" style="z-index: 1;"></canvas>
+                        <canvas id="titleLayer" width="404" height="225" style="z-index: 2;"></canvas>
+                        <canvas id="emailLayer" width="404" height="225" style="z-index: 3;"></canvas>
+                        <canvas id="locationLayer" width="404" height="225" style="z-index: 4;"></canvas>
+                        <canvas id="numbersLayer" width="404" height="225" style="z-index: 5;"></canvas>
                     </a>
                 </div>
                 <label for="card" class="text-center"></label>

stylesheet.css

@@ -116,7 +116,7 @@ textarea {
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
-  background-color: var(--theme-blue);
+  background-color: var(--background-color);
 }
 
 select {
@@ -297,9 +297,14 @@ input[type="checkbox"], input[type="radio"] {
 
 .card {
   margin: auto;
-  width: 24em;
+  width: 404px;
+  height: 225px;
   border: solid 2px var(--theme-gray)
 }
+.card canvas {
+  position: absolute;
+  height: auto;
+}
 
 .fade {
   position: absolute;

websocket.js

@@ -1,20 +1,55 @@
 let liveGenWS = new WebSocket("ws://localhost:8080/backend/generate/live");
 
-liveGenWS.addEventListener("open", (e) => {
+let backgroundLayer = document.getElementById("backgroundLayer");
-    console.log("Websocket connection opened");
+let loc = document.getElementById("location");
-}, false);
+let locationLayer = document.getElementById("locationLayer");
-liveGenWS.addEventListener("message", (e) => {
+let fullName = document.getElementById("full_name");
-    console.log(e.data);
+let nameLayer = document.getElementById("nameLayer");
-}, false);
-
-let location = document.getElementById("location");
-let name = document.getElementById("full_name");
 let title = document.getElementById("title");
+let titleLayer = document.getElementById("titleLayer");
 let email = document.getElementById("email");
+let emailLayer = document.getElementById("emailLayer");
 let extension = document.getElementById("extension");
 let directNumber = document.getElementById("directNumber");
 let cellNumber = document.getElementById("cellNumber");
+let numbersLayer = document.getElementById("numbersLayer");
 
-location.addEventListener("selectionchange", (e) => {
+let dataType = "";
-    liveGenWS.send("")
+
+liveGenWS.addEventListener("open", (e) => {
+    console.log("Websocket connection opened");
+    liveGenWS.send("start;");
 }, false);
+liveGenWS.addEventListener("message", (e) => {
+     if (e.data instanceof ArrayBuffer || e.data instanceof Blob) {
+         let blob = e.data;
+         if (e.data instanceof ArrayBuffer) {
+             blob = new Blob([e.data], { type: "image/png" });
+         }
+         const constDataType = dataType;
+         createImageBitmap(blob, 0, 0, 1080, 602, { resizeWidth: 404, resizeHeight: 225 }).then(imgBmp => {
+             const layerElem = document.getElementById(constDataType + "Layer");
+             let ctx = layerElem.getContext("2d");
+             ctx.clearRect(0, 0, 404, 225);
+             ctx.drawImage(imgBmp, 0, 0);
+         });
+     } else if (typeof e.data === "string") {
+         dataType = e.data;
+     }
+    console.log(e.data);
+}, false);
+
+function handleUpdate(val, elem) {
+    liveGenWS.send(val + ";" + elem.value);
+}
+
+loc.addEventListener("selectionchange", (e) => {
+    handleUpdate("location", loc);
+    handleUpdate("background", loc);
+}, false);
+fullName.addEventListener("keyup", (e) => handleUpdate("name", fullName), false);
+title.addEventListener("keyup", (e) => handleUpdate("title", title), false);
+email.addEventListener("keyup", (e) => handleUpdate("email", email), false);
+extension.addEventListener("keyup", (e) => handleUpdate("extension", extension), false);
+directNumber.addEventListener("keyup", (e) => handleUpdate("directNumber", directNumber), false);
+cellNumber.addEventListener("keyup", (e) => handleUpdate("cellNumber", cellNumber), false);

websocket/index.html

@@ -43,6 +43,16 @@
     </nav>
 
     <main>
+        <div class="card">
+            <a id="card" href="#">
+                <canvas id="backgroundLayer" width="404" height="225" style="z-index: 0;"></canvas>
+                <canvas id="nameLayer" width="404" height="225" style="z-index: 1;"></canvas>
+                <canvas id="titleLayer" width="404" height="225" style="z-index: 2;"></canvas>
+                <canvas id="emailLayer" width="404" height="225" style="z-index: 3;"></canvas>
+                <canvas id="locationLayer" width="404" height="225" style="z-index: 4;"></canvas>
+                <canvas id="numbersLayer" width="404" height="225" style="z-index: 5;"></canvas>
+            </a>
+        </div>
         <div class="container">
             <div class="mt mb">
                 <label for="code">Code to Execute:</label>
@@ -54,12 +64,42 @@
                 <textarea id="output" rows="8" cols="120" readonly></textarea>
                 <button id="clearOutput" class="btn btn-primary">Clear</button>
             </div>
+            <div class="form-group">
+                <label for="location">Location:</label>
+                <select class="form-control" id="location" name="location"></select>
+            </div>
+            <div class="form-group">
+                <label for="full_name">Full Name &amp; Credentials</label>
+                <input type="text" class="form-control" id="full_name" name="full_name" maxlength="36" required="">
+            </div>
+            <div class="form-group">
+                <label for="title">Title</label>
+                <input type="text" class="form-control" id="title" name="title" maxlength="48" required="">
+            </div>
+            <div class="form-group">
+                <label for="email">Email</label>
+                <input type="email" class="form-control" id="email" name="email" required="">
+            </div>
+            <div class="form-group">
+                <input type="checkbox" id="directNumberCheckbox" onclick="handleCheckbox()">
+                <label for="directNumberCheckbox">Direct Line</label>
+            </div>
+            <div class="form-group" id="directNumberInput" style="display:none">
+                <label for="directNumber">Direct Line:</label>
+                <input type="text" class="form-control" id="directNumber" name="directNumber" maxlength="15" required="">
+            </div>
+            <div class="form-group" id="extensionInput">
+                <label for="extension">Extension</label>
+                <input type="tel" class="form-control" id="extension" name="extension" required="">
+            </div>
+            <div class="form-group">
+                <label for="cellNumber">Cell Number</label>
+                <input type="tel" class="form-control" id="cellNumber" name="cellNumber" maxlength="15" required="">
+            </div>
         </div>
     </main>
 
     <footer>Made by the best intern!</footer>
-    <script src="../darkmode.js"></script>
-    <script src="../websocket.js"></script>
     <script>
         (()=>{
             const console_log = window.console.log;
@@ -78,5 +118,7 @@
             document.getElementById("output").value = "";
         }, false);
     </script>
+    <script src="../darkmode.js"></script>
+    <script src="../websocket.js"></script>
 </body>
 </html>