diff --git a/site/camera-info/index.html b/site/camera-info/index.html index 8640329..8ca9574 100644 --- a/site/camera-info/index.html +++ b/site/camera-info/index.html @@ -27,8 +27,9 @@ diff --git a/site/camera-info/main.css b/site/camera-info/main.css index 622c1f6..0fd7a43 100644 --- a/site/camera-info/main.css +++ b/site/camera-info/main.css @@ -80,4 +80,6 @@ video.unbounded { #final { max-width: 100vw; border: 1px solid black; + max-width: 80vw; + max-height: 80vh; } \ No newline at end of file diff --git a/site/camera-info/main.js b/site/camera-info/main.js index fc06107..7cd7a57 100644 --- a/site/camera-info/main.js +++ b/site/camera-info/main.js @@ -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);