admin/clarkeis.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixes
All checks were successful
ClarkeIS Build / Build-Docker-Image (push) Successful in 40s
Details

Browse Source
This commit is contained in:
Tyler Clarke
2025-07-28 20:43:13 -04:00
parent 5522c8a133
commit 881ea4053c
3 changed files with 75 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
site/camera-info/index.html
View File

@@ -10,14 +10,12 @@
<body>
<video id="magic_video" class="offscreen">video stream unavailable</video>
<div id="home" style="display: none;">
<button onclick="setdetails()" style="display: none; align-self: end;" id="endcamera">Next</button>
<button onclick="takepicture()" style="align-self: end;">Take Picture!</button>
<canvas id="precanvas" class="offscreen"></canvas>
<div id="camview">
<div id="video-container">
<video id="preview">video stream unavailable</video>
</div>
<div id="picbar">
<button id="takepicture" onclick="takepicture()">Take Picture!</button>
<button onclick="setdetails()" style="display: none; align-self: end;" id="endcamera">Next</button>
</div>
<canvas id="precanvas" class="offscreen"></canvas>
<video id="preview">video stream unavailable</video>
</div>
<div id="details" style="display: none;">
<span>Longitude: <input type="number" id="long"/></span>
@@ -28,7 +26,7 @@
<button onclick="render()">Finish</button>
</div>
<div id="finalresult" style="display: none;">
<iframe id="final" width="1440" height="960"></iframe>
<iframe id="final"></iframe>
<button onclick="download()">Download!</button>
<button onclick="window.location.reload()">Take Another Picture</button>
</div>

74
site/camera-info/main.css
View File

@@ -1,6 +1,9 @@
body {
body, html {
margin: 0px;
padding: 0px;
overflow: clip;
width: 100vw;
height: 100vh;
}
body > div {
@@ -8,25 +11,19 @@ body > div {
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
body > div > * {
margin: 20px;
}
#camview {
max-width: 100vw;
box-shadow: 0px 0px 50px 0px black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30px;
box-sizing: border-box;
}
@media (orientation:portrait) {
@@ -68,9 +65,23 @@ body > div > * {
flex-shrink: 0;
}
#precanvas.took {
position: absolute;
right: 0px;
top: 0px;
max-height: 25vh;
z-index: 7700;
margin: 0px;
}
#preview {
width: 100%;
width: 100vw;
display: inline-block;
position: absolute;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
margin: 0px;
}
@@ -89,3 +100,48 @@ video.unbounded {
#final {
border: 1px solid black;
}
#picbar {
position: absolute;
bottom: 50px;
left: 50vw;
transform: translateX(-50%);
z-index: 2;
display: flex;
flex-direction: row;
width: max-content;
}
button {
border-radius: calc(infinity * 1px);
padding: 10px;
font-size: 1.5em;
border: none;
margin: 10px;
background-color: lightgrey;
}
button:hover {
background-color: grey;
}
input {
font-size: 1.5em;
}
#details > span {
font-size: 1.5em;
}
* {
font-family: sans-serif;
}
#finalresult {
align-items: stretch;
}
iframe {
flex-grow: 3;
}

6
site/camera-info/main.js
View File

@@ -1,3 +1,5 @@
function frame(e) {
for (let el of document.querySelectorAll("body > div")) {
if (el.style.display != "none") {
@@ -18,7 +20,7 @@ function takepicture() {
video.classList.add("unbounded");
document.getElementById("endcamera").style.display = "";
ctx.canvas.classList.remove("offscreen");
document.getElementById("camview").classList.add("took")
document.getElementById("precanvas").classList.add("took")
// si c'est portrait, nous doivons le tourner à landscape (parce que le canvas ont besoin d'un photo landscape pour marcher bien)
// [un peu plus tard] pourquoi a-moi apprendré le français? c'est horrible
if (box.height > box.width) {
@@ -125,7 +127,7 @@ window.app = {
});
//ctx.drawImage(image, 0, 320, 720, image.height / image.width * 720);
const dataURI = await pdfDoc.saveAsBase64({ dataUri: true });
iframe.src = dataURI;
iframe.src = dataURI + "#toolbar=0&navpanes=0";
})()
},
exit() {