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

I am idot, java is error

Browse Source
This commit is contained in:
Steven Tracey 2023-06-06 23:49:30 -04:00
parent e487a11761
commit a9f3be99cb
3 changed files with 50 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
stylesheet.css
View File

@ -301,7 +301,7 @@ input[type="checkbox"], input[type="radio"] {
height: 225px; height: 225px;
border: solid 2px var(--theme-gray) border: solid 2px var(--theme-gray)
} }
.card canvas { .card img {
position: absolute; position: absolute;
height: auto; height: auto;
} }

59
websocket.js
View File

@ -21,24 +21,51 @@ liveGenWS.addEventListener("open", (e) => {
liveGenWS.send("start;"); liveGenWS.send("start;");
}, false); }, false);
liveGenWS.addEventListener("message", (e) => { liveGenWS.addEventListener("message", (e) => {
if (e.data instanceof ArrayBuffer || e.data instanceof Blob) { const constDataType = dataType;
let blob = e.data; if (e.data instanceof ArrayBuffer || e.data instanceof Blob) {
if (e.data instanceof ArrayBuffer) { let blob = e.data;
blob = new Blob([e.data], { type: "image/png" }); 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 => { let urlCreator = window.URL || window.webkitURL;
const layerElem = document.getElementById(constDataType + "Layer"); let imageUrl = urlCreator.createObjectURL(blob);
let ctx = layerElem.getContext("2d"); updateLayer(constDataType, imageUrl).then(() => console.log("Updated Layer: " + constDataType));
ctx.clearRect(0, 0, 404, 225); } else if (typeof e.data === "string") {
ctx.drawImage(imgBmp, 0, 0); dataType = e.data;
}); }
} else if (typeof e.data === "string") {
dataType = e.data;
}
console.log(e.data);
}, false); }, 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) { function handleUpdate(val, elem) {
liveGenWS.send(val + ";" + elem.value); liveGenWS.send(val + ";" + elem.value);
} }

12
websocket/index.html
View File

@ -45,12 +45,12 @@
<main> <main>
<div class="card"> <div class="card">
<a id="card" href="#"> <a id="card" href="#">
<canvas id="backgroundLayer" width="404" height="225" style="z-index: 0;"></canvas> <img id="backgroundLayer" src="#" width="404" height="225" style="z-index: 0;">
<canvas id="nameLayer" width="404" height="225" style="z-index: 1;"></canvas> <img id="nameLayer" src="#" width="404" height="225" style="z-index: 1;">
<canvas id="titleLayer" width="404" height="225" style="z-index: 2;"></canvas> <img id="titleLayer" src="#" width="404" height="225" style="z-index: 2;">
<canvas id="emailLayer" width="404" height="225" style="z-index: 3;"></canvas> <img id="emailLayer" src="#" width="404" height="225" style="z-index: 3;">
<canvas id="locationLayer" width="404" height="225" style="z-index: 4;"></canvas> <img id="locationLayer" src="#" width="404" height="225" style="z-index: 4;">
<canvas id="numbersLayer" width="404" height="225" style="z-index: 5;"></canvas> <img id="numbersLayer" src="#" width="404" height="225" style="z-index: 5;">
</a> </a>
</div> </div>
<div class="container"> <div class="container">