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" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="manifest" href="manifest.json" />
<script src="https://unpkg.com/pdf-lib"></script>
</head>
<body>
<video id="magic_video" class="offscreen">video stream unavailable</video>
@@ -27,7 +28,7 @@
<button onclick="render()">Finish</button>
</div>
<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="window.location.reload()">Take Another Picture</button>
</div>

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

@@ -87,8 +87,5 @@ video.unbounded {
}
#final {
max-width: 100vw;
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": {
enter() {
let canvas = document.getElementById("final");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "white";
ctx.fillRect(0, 0, 1440, 960);
ctx.font = "bold 96px sans-serif";
ctx.fillStyle = "black";
ctx.fillText(document.getElementById("title").value, 0, 96);
ctx.font = "bold 48px sans-serif";
ctx.fillText(new Date().toLocaleString(), 0, 152);
let lat = document.getElementById("lat").value;
let long = document.getElementById("long").value;
reverse_geocode(lat, long).then(res => {
ctx.fillText(res, 0, 208);
});
ctx.fillText("https://maps.google.com/maps?q=" + lat + "," + long, 0, 256);
ctx.fillText("Notes: " + document.getElementById("notes").value, 0, 308);
let image = document.getElementById("precanvas");
ctx.drawImage(image, 0, 320, 720, image.height / image.width * 720);
maps_static(lat, long, img => {
ctx.drawImage(img, 365 * 2, 320);
});
(async () => {
let iframe = document.getElementById("final");
const pdfDoc = await PDFLib.PDFDocument.create();
const page = pdfDoc.addPage([1440, 960]);
page.moveTo(0, 960 - 96);
page.drawText(document.getElementById("title").value, { size : 96 });
page.moveTo(0, 960 - 152);
page.drawText(new Date().toLocaleString(), { size : 48});
let lat = document.getElementById("lat").value;
let long = document.getElementById("long").value;
let res = await reverse_geocode(lat, long);
page.moveTo(0, 960 - 208);
page.drawText(res, { size : 48 });
page.moveTo(0, 960 - 256);
page.drawText("https://maps.google.com/maps?q=" + lat + "," + long, { size : 48 });
page.moveTo(0, 960 - 308);
page.drawText("Notes: " + document.getElementById("notes").value, { size : 48 });
let static = await maps_static(lat, long);
let embeddedImage = await pdfDoc.embedPng(static);
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() {
@@ -125,15 +144,8 @@ async function reverse_geocode(lat, long) {
}
function maps_static(lat, long, cbk) {
let img = document.createElement("img");
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);
};
async function maps_static(lat, long) {
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());
}
@@ -148,14 +160,14 @@ function getFilename() {
title += '-';
}
}
return title + ".png";
return title + ".pdf";
}
function download() {
let canvas = document.getElementById("final");
let anchor = document.createElement("a");
anchor.href = canvas.toDataURL();
anchor.href = canvas.src;
anchor.download = getFilename();
anchor.click();
}