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

updates to camera-info
All checks were successful
ClarkeIS Build / Build-Docker-Image (push) Successful in 44s
Details

Browse Source
This commit is contained in:
Tyler Clarke
2025-07-16 21:29:15 -04:00
parent 0d85452718
commit 5522c8a133
3 changed files with 46 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,6 +5,7 @@
<link rel="stylesheet" href="main.css" /> <link rel="stylesheet" href="main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="manifest" href="manifest.json" /> <link rel="manifest" href="manifest.json" />
<script src="https://unpkg.com/pdf-lib"></script>
</head> </head>
<body> <body>
<video id="magic_video" class="offscreen">video stream unavailable</video> <video id="magic_video" class="offscreen">video stream unavailable</video>
@@ -27,7 +28,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;">
<canvas id="final" width="1440" height="960"></canvas> <iframe id="final" width="1440" height="960"></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>

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

@@ -87,8 +87,5 @@ video.unbounded {
} }
#final { #final {
max-width: 100vw;
border: 1px solid black; border: 1px solid black;
max-width: 80vw;
max-height: 80vh;
} }

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

@@ -87,27 +87,46 @@ window.app = {
}, },
"finalresult": { "finalresult": {
enter() { enter() {
let canvas = document.getElementById("final"); (async () => {
let ctx = canvas.getContext("2d"); let iframe = document.getElementById("final");
ctx.fillStyle = "white"; const pdfDoc = await PDFLib.PDFDocument.create();
ctx.fillRect(0, 0, 1440, 960); const page = pdfDoc.addPage([1440, 960]);
ctx.font = "bold 96px sans-serif"; page.moveTo(0, 960 - 96);
ctx.fillStyle = "black"; page.drawText(document.getElementById("title").value, { size : 96 });
ctx.fillText(document.getElementById("title").value, 0, 96); page.moveTo(0, 960 - 152);
ctx.font = "bold 48px sans-serif"; page.drawText(new Date().toLocaleString(), { size : 48});
ctx.fillText(new Date().toLocaleString(), 0, 152); let lat = document.getElementById("lat").value;
let lat = document.getElementById("lat").value; let long = document.getElementById("long").value;
let long = document.getElementById("long").value; let res = await reverse_geocode(lat, long);
reverse_geocode(lat, long).then(res => { page.moveTo(0, 960 - 208);
ctx.fillText(res, 0, 208); page.drawText(res, { size : 48 });
}); page.moveTo(0, 960 - 256);
ctx.fillText("https://maps.google.com/maps?q=" + lat + "," + long, 0, 256); page.drawText("https://maps.google.com/maps?q=" + lat + "," + long, { size : 48 });
ctx.fillText("Notes: " + document.getElementById("notes").value, 0, 308); page.moveTo(0, 960 - 308);
let image = document.getElementById("precanvas"); page.drawText("Notes: " + document.getElementById("notes").value, { size : 48 });
ctx.drawImage(image, 0, 320, 720, image.height / image.width * 720); let static = await maps_static(lat, long);
maps_static(lat, long, img => { let embeddedImage = await pdfDoc.embedPng(static);
ctx.drawImage(img, 365 * 2, 320); let dims = embeddedImage.scale(1);
}); page.drawImage(embeddedImage, {
x: 365 * 2,
y: 960 - 320 - dims.height,
width : dims.width,
height : dims.height
});
let image = document.getElementById("precanvas");
let static2 = await fetch(image.toDataURL('image/png')).then(res => res.arrayBuffer());
let embeddedImage2 = await pdfDoc.embedPng(static2);
let dims2 = embeddedImage2.scale(1);
page.drawImage(embeddedImage2, {
x: 0,
y: 960 - 320 - dims2.height / dims2.width * 720,
width : 720,
height : dims2.height / dims2.width * 720
});
//ctx.drawImage(image, 0, 320, 720, image.height / image.width * 720);
const dataURI = await pdfDoc.saveAsBase64({ dataUri: true });
iframe.src = dataURI;
})()
}, },
exit() { exit() {
@@ -125,15 +144,8 @@ async function reverse_geocode(lat, long) {
} }
function maps_static(lat, long, cbk) { async function maps_static(lat, long) {
let img = document.createElement("img"); return await fetch("https://maps.googleapis.com/maps/api/staticmap?size=710x600&key=AIzaSyD_zbdxwN7_aOMNH69eAL9bSS814Ix-UM8&markers=label:S%7C" + lat + "," + long).then((res) => res.arrayBuffer());
document.body.appendChild(img);
img.classList.add("offscreen");
img.src = "https://maps.googleapis.com/maps/api/staticmap?size=710x600&key=AIzaSyD_zbdxwN7_aOMNH69eAL9bSS814Ix-UM8&markers=label:S%7C" + lat + "," + long;
img.crossOrigin = "anonymous";
img.onload = () => {
cbk(img);
};
} }
@@ -148,14 +160,14 @@ function getFilename() {
title += '-'; title += '-';
} }
} }
return title + ".png"; return title + ".pdf";
} }
function download() { function download() {
let canvas = document.getElementById("final"); let canvas = document.getElementById("final");
let anchor = document.createElement("a"); let anchor = document.createElement("a");
anchor.href = canvas.toDataURL(); anchor.href = canvas.src;
anchor.download = getFilename(); anchor.download = getFilename();
anchor.click(); anchor.click();
} }