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

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

@@ -1,6 +1,9 @@
body { body, html {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
overflow: clip;
width: 100vw;
height: 100vh;
} }
body > div { body > div {
@@ -8,25 +11,19 @@ body > div {
top: 0px; top: 0px;
left: 0px; left: 0px;
width: 100vw; width: 100vw;
height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
body > div > * {
margin: 20px;
}
#camview { #camview {
max-width: 100vw; max-width: 100vw;
box-shadow: 0px 0px 50px 0px black;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 30px;
box-sizing: border-box;
} }
@media (orientation:portrait) { @media (orientation:portrait) {
@@ -68,9 +65,23 @@ body > div > * {
flex-shrink: 0; flex-shrink: 0;
} }
#precanvas.took {
position: absolute;
right: 0px;
top: 0px;
max-height: 25vh;
z-index: 7700;
margin: 0px;
}
#preview { #preview {
width: 100%; width: 100vw;
display: inline-block; display: inline-block;
position: absolute;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
margin: 0px;
} }
@@ -89,3 +100,48 @@ video.unbounded {
#final { #final {
border: 1px solid black; 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) { function frame(e) {
for (let el of document.querySelectorAll("body > div")) { for (let el of document.querySelectorAll("body > div")) {
if (el.style.display != "none") { if (el.style.display != "none") {
@@ -18,7 +20,7 @@ function takepicture() {
video.classList.add("unbounded"); video.classList.add("unbounded");
document.getElementById("endcamera").style.display = ""; document.getElementById("endcamera").style.display = "";
ctx.canvas.classList.remove("offscreen"); 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) // 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 // [un peu plus tard] pourquoi a-moi apprendré le français? c'est horrible
if (box.height > box.width) { if (box.height > box.width) {
@@ -125,7 +127,7 @@ window.app = {
}); });
//ctx.drawImage(image, 0, 320, 720, image.height / image.width * 720); //ctx.drawImage(image, 0, 320, 720, image.height / image.width * 720);
const dataURI = await pdfDoc.saveAsBase64({ dataUri: true }); const dataURI = await pdfDoc.saveAsBase64({ dataUri: true });
iframe.src = dataURI; iframe.src = dataURI + "#toolbar=0&navpanes=0";
})() })()
}, },
exit() { exit() {