Steven/SignatureCardFrontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ALMOST works

Browse Source
This commit is contained in:
Steven Tracey 2023-06-06 16:12:31 -04:00
parent d28bdf14ec
commit e487a11761
4 changed files with 103 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@ -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>

9
stylesheet.css
View File

@ -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;

57
websocket.js
View File

@ -1,20 +1,55 @@
let liveGenWS = new WebSocket("ws://localhost:8080/backend/generate/live");
liveGenWS.addEventListener("open", (e) => {
console.log("Websocket connection opened");
}, false);
liveGenWS.addEventListener("message", (e) => {
console.log(e.data);
}, false);
let location = document.getElementById("location");
let name = document.getElementById("full_name");
let backgroundLayer = document.getElementById("backgroundLayer");
let loc = document.getElementById("location");
let locationLayer = document.getElementById("locationLayer");
let fullName = document.getElementById("full_name");
let nameLayer = document.getElementById("nameLayer");
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) => {
liveGenWS.send("")
let dataType = "";
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);

46
websocket/index.html
View File

@ -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>