82 lines
2.9 KiB
JavaScript
82 lines
2.9 KiB
JavaScript
let liveGenWS = new WebSocket("ws://localhost:8080/backend/generate/live");
|
|
|
|
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");
|
|
|
|
let dataType = "";
|
|
|
|
liveGenWS.addEventListener("open", (e) => {
|
|
console.log("Websocket connection opened");
|
|
liveGenWS.send("start;");
|
|
}, false);
|
|
liveGenWS.addEventListener("message", (e) => {
|
|
const constDataType = dataType;
|
|
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" });
|
|
}
|
|
let urlCreator = window.URL || window.webkitURL;
|
|
let imageUrl = urlCreator.createObjectURL(blob);
|
|
updateLayer(constDataType, imageUrl).then(() => console.log("Updated Layer: " + constDataType));
|
|
} else if (typeof e.data === "string") {
|
|
dataType = e.data;
|
|
}
|
|
}, false);
|
|
|
|
async function updateLayer(type, imageUrl) {
|
|
let workingLayer;
|
|
switch (type) {
|
|
case "location": {
|
|
workingLayer = locationLayer;
|
|
break;
|
|
}
|
|
case "background": {
|
|
workingLayer = backgroundLayer;
|
|
break;
|
|
}
|
|
case "name": {
|
|
workingLayer = nameLayer;
|
|
break;
|
|
}
|
|
case "title": {
|
|
workingLayer = titleLayer;
|
|
break;
|
|
}
|
|
case "email": {
|
|
workingLayer = emailLayer;
|
|
break;
|
|
}
|
|
case "extension" || "directNumber" || "cellNumber": {
|
|
workingLayer = numbersLayer;
|
|
break;
|
|
}
|
|
}
|
|
workingLayer.src = imageUrl;
|
|
}
|
|
|
|
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); |