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> <button onclick="render()">Finish</button>
</div> </div>
<div id="finalresult" style="display: none;"> <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="download()">Download!</button>
<button onclick="window.location.reload()">Take Another Picture</button>
</div> </div>
<script src="main.js"></script> <script src="main.js"></script>
</body> </body>

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

@@ -80,4 +80,6 @@ video.unbounded {
#final { #final {
max-width: 100vw; max-width: 100vw;
border: 1px solid black; 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"); ctx.canvas.classList.remove("offscreen");
document.getElementById("camview").classList.add("took") 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) // 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) { if (box.height > box.width) {
canvas.width = box.height; canvas.width = box.height;
canvas.height = box.width; canvas.height = box.width;
@@ -88,22 +89,22 @@ window.app = {
enter() { enter() {
let canvas = document.getElementById("final"); let canvas = document.getElementById("final");
let ctx = canvas.getContext("2d"); let ctx = canvas.getContext("2d");
ctx.font = "bold 48px sans-serif"; ctx.font = "bold 96px sans-serif";
ctx.filLStyle = "black"; ctx.filLStyle = "black";
ctx.fillText(document.getElementById("title").value, 0, 48); ctx.fillText(document.getElementById("title").value, 0, 96);
ctx.font = "bold 24px sans-serif"; ctx.font = "bold 48px sans-serif";
ctx.fillText(new Date().toLocaleString(), 0, 76); 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;
reverse_geocode(lat, long).then(res => { 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("https://maps.google.com/maps?q=" + lat + "," + long, 0, 256);
ctx.fillText("Notes: " + document.getElementById("notes").value, 0, 154); ctx.fillText("Notes: " + document.getElementById("notes").value, 0, 308);
let image = document.getElementById("precanvas"); 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 => { maps_static(lat, long, img => {
ctx.drawImage(img, 365, 160); ctx.drawImage(img, 365 * 2, 320);
}); });
}, },
exit() { exit() {
@@ -126,7 +127,7 @@ function maps_static(lat, long, cbk) {
let img = document.createElement("img"); let img = document.createElement("img");
document.body.appendChild(img); document.body.appendChild(img);
img.classList.add("offscreen"); 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.crossOrigin = "anonymous";
img.onload = () => { img.onload = () => {
cbk(img); cbk(img);