finalize camera-info updates

site/camera-info/main.js

@@ -23,6 +23,7 @@ function takepicture() {
   document.getElementById("precanvas").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
+    // [encore plus tard...] c'est "ai-je", pas "a-moi" - j'étais bête!
   if (box.height > box.width) {
     canvas.width = box.height;
     canvas.height = box.width;
@@ -91,39 +92,57 @@ window.app = {
     enter() {
       (async () => {
         let iframe = document.getElementById("final");
-        const pdfDoc = await PDFLib.PDFDocument.create();
+        const pdfDoc = await PDFLib.PDFDocument.create()
+        const helvetica = await pdfDoc.embedFont(PDFLib.StandardFonts.Helvetica);
+        const helveticaBold = await pdfDoc.embedFont(PDFLib.StandardFonts.HelveticaBold);
         const page = pdfDoc.addPage([1440, 960]);
+	page.setFont(helveticaBold)
         page.moveTo(0, 960 - 96);
-        page.drawText(document.getElementById("title").value, { size : 96 });
+        page.drawText(document.getElementById("title").value, { size : 85, font: helveticaBold });
         page.moveTo(0, 960 - 152);
-        page.drawText(new Date().toLocaleString(), { size : 48});
+        let datestring = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][new Date().getMonth()] + " " + new Date().getDate()
+                          + ", " + new Date().getUTCFullYear() + " at " + new Date().toLocaleTimeString();
+        page.drawText(datestring, { 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.drawText("https://maps.google.com/maps?q=" + lat + "," + long, { size : 48, color: PDFLib.rgb(0, 0.5, 1) });
         page.moveTo(0, 960 - 308);
-        page.drawText("Notes: " + document.getElementById("notes").value, { size : 48 });
+        page.drawText(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 embeddedMap = await pdfDoc.embedPng(static);
+        let dimsMap = embeddedMap.scale(1);
         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, {
+        let embeddedPicture = await pdfDoc.embedPng(static2);
+        let dimsPicture = embeddedPicture.scale(1);
+
+	let mapAspect = dimsMap.width / dimsMap.height;
+	let picAspect = dimsPicture.width / dimsPicture.height;
+	let mapRatio = mapAspect / (mapAspect + picAspect); // the proportion of the width filled by the map
+        let picRatio = 1 - mapRatio;
+
+	const fullWidth = 1440;
+	let mapWidth = mapRatio * fullWidth;
+	let picWidth = picRatio * fullWidth;
+
+	let combinedHeight = mapWidth / mapAspect;
+
+        page.drawImage(embeddedMap, {
+          x: fullWidth - mapWidth,
+          y: 960 - 320 - combinedHeight,
+          width : mapWidth,
+          height : combinedHeight
+        });
+        page.drawImage(embeddedPicture, {
           x: 0,
-          y: 960 - 320 - dims2.height / dims2.width * 720,
-          width : 720,
-          height : dims2.height / dims2.width * 720
+          y: 960 - 320 - combinedHeight,
+          width : picWidth,
+          height : combinedHeight
         });
         //ctx.drawImage(image, 0, 320, 720, image.height / image.width * 720);
         const dataURI = await pdfDoc.saveAsBase64({ dataUri: true });
@@ -172,4 +191,4 @@ function download() {
   anchor.href = canvas.src;
   anchor.download = getFilename();
   anchor.click();
-}
+}