feat: deviceorientation to control lensflare

index.html

@@ -72,23 +72,17 @@
           <!-- autocomplete off prevents browsers from remebering the value on page reloads -->
           <form autocomplete="off">
             <div class="buttons">
-              <button id="save" class="button is-primary">
+              <button class="button is-primary save-image">
                 Save Image
               </button>
-              <button id="share" class="button is-secondary">
+              <button class="button is-secondary share-image">
                 <i class="fa-solid fa-share-from-square fa-fw mr-1"></i>
                 Share
               </button>
             </div>
 
             <div class="field">
-              <!--
-              <label class="label">
-                Use Gyroscope
-                <input type="checkbox" class="is-pulled-right">
-              </label>
-              -->
-              <button id="lensflare" class="button is-medium is-fullwidth">
+              <button class="button is-medium is-fullwidth lensflare">
                 Lensflare
               </button>
             </div>
@@ -236,13 +230,21 @@
 
       <!-- autocomplete off prevents browsers from remebering the value on page reloads -->
       <form autocomplete="off">
-        <button id="save" class="button is-primary">
-          Save Image
-        </button>
-        <button id="share" class="button is-secondary">
-          <i class="fa-solid fa-share-from-square fa-fw mr-1"></i>
-          Share
-        </button>
+        <div class="buttons">
+          <button class="button is-primary save-image">
+            Save Image
+          </button>
+          <button class="button is-secondary share-image">
+            <i class="fa-solid fa-share-from-square fa-fw mr-1"></i>
+            Share
+          </button>
+        </div>
+
+        <div class="field">
+          <button class="button is-medium is-fullwidth lensflare">
+            Lensflare
+          </button>
+        </div>
 
         <p class="menu-label">
         Color Correction

main.js

@@ -32,18 +32,25 @@ document.addEventListener("DOMContentLoaded", function() {
   document.getElementById("cheese").addEventListener("click", take_picture);
   document.getElementById("upload-image").addEventListener("change", upload_image)
 
-  document.getElementById("save").addEventListener("click", save_image)
-  document.getElementById("share").addEventListener("click", share_image)
+  for (let element of document.getElementsByClassName("save-image")) {
+    element.addEventListener("click", save_image)
+  }
+  for (let element of document.getElementsByClassName("share-image")) {
+    element.addEventListener("click", share_image)
+  }
 
-  document.getElementById("lensflare").addEventListener("click", function(event) {
-    lensflare_active = !lensflare_active;
-    if (lensflare_active) {
-      event.target.classList.add("is-primary");
-    } else {
-      event.target.classList.remove("is-primary");
-    }
-    draw(true);
-  });
+  for (let element of document.getElementsByClassName("lensflare")) {
+    element.addEventListener("click", function(event) {
+      event.preventDefault();
+      lensflare_active = !lensflare_active;
+      if (lensflare_active) {
+        event.target.classList.add("is-primary");
+      } else {
+        event.target.classList.remove("is-primary");
+      }
+      draw(true);
+    });
+  }
 
   document.getElementById("viewport").addEventListener("mousemove", function(event) {
     if (event.buttons === 1 && lensflare_active) {
@@ -54,6 +61,23 @@ document.addEventListener("DOMContentLoaded", function() {
     }
   });
 
+  window.addEventListener("deviceorientation", function(event) {
+    if (lensflare_active) {
+      cursor.x = event.gamma / 360 * 4;
+      cursor.y = (event.beta - 90) / 360 * 4;
+      console.log(cursor);
+      // draw(true);
+    }
+  });
+
+  function animation() {
+    if (lensflare_active) {
+      draw(true);
+    }
+    requestAnimationFrame(animation)
+  };
+  animation();
+
   window.addEventListener("resize", () => draw(true))
 
   video.addEventListener("canplay", function() {