55 lines
2.4 KiB
JavaScript
55 lines
2.4 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) => {
|
|
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); |