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

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

Browse Source
This commit is contained in:
Tyler Clarke
2025-05-28 09:44:13 -04:00
parent a6ffe95009
commit cca14927ba
3 changed files with 15 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -27,8 +27,9 @@
<button onclick="render()">Finish</button>
</div>
<div id="finalresult" style="display: none;">
<canvas id="final" width="720" height="480"></canvas>
<canvas id="final" width="1440" height="960"></canvas>
<button onclick="download()">Download!</button>
<button onclick="window.location.reload()">Take Another Picture</button>
</div>
<script src="main.js"></script>
</body>

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

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

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

@@ -20,6 +20,7 @@ function takepicture() {
ctx.canvas.classList.remove("offscreen");
document.getElementById("camview").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) {
canvas.width = box.height;
canvas.height = box.width;
@@ -88,22 +89,22 @@ window.app = {
enter() {
let canvas = document.getElementById("final");
let ctx = canvas.getContext("2d");
ctx.font = "bold 48px sans-serif";
ctx.font = "bold 96px sans-serif";
ctx.filLStyle = "black";
ctx.fillText(document.getElementById("title").value, 0, 48);
ctx.font = "bold 24px sans-serif";
ctx.fillText(new Date().toLocaleString(), 0, 76);
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, 104);
ctx.fillText(res, 0, 208);
});
ctx.fillText("https://maps.google.com/maps?q=" + lat + "," + long, 0, 128);
ctx.fillText("Notes: " + document.getElementById("notes").value, 0, 154);
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, 160, 720 * 1/2, image.height / image.width * 720 * 1/2);
ctx.drawImage(image, 0, 320, 720, image.height / image.width * 720);
maps_static(lat, long, img => {
ctx.drawImage(img, 365, 160);
ctx.drawImage(img, 365 * 2, 320);
});
},
exit() {
@@ -126,7 +127,7 @@ 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=355x300&key=AIzaSyD_zbdxwN7_aOMNH69eAL9bSS814Ix-UM8&markers=label:S%7C" + lat + "," + long;
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);