Merge pull request #8 from gaiborjosue/main

feat(frameworks): Added xtk and papaya frameworks
mpsych · Dec 12, 2023 · fc5bc8f · fc5bc8f
2 parents 2dc5d19 + 924b75b
commit fc5bc8f
Show file tree

Hide file tree

Showing 12 changed files with 401 additions and 10 deletions.
diff --git a/dist/boostlet.min.js b/dist/boostlet.min.js
diff --git a/dist/boostlet.min.js.map b/dist/boostlet.min.js.map
diff --git a/examples/plotly.js b/examples/plotly.js
@@ -1,6 +1,7 @@
 script = document.createElement("script");
 script.type = "text/javascript";
 script.src = "https://boostlet.org/dist/boostlet.min.js";
+
 script.onload = run;
 document.head.appendChild(script);
 eval(script);

diff --git a/examples/sobel.js b/examples/sobel.js
@@ -1,6 +1,7 @@
 script = document.createElement("script");
 script.type = "text/javascript";
 script.src = "https://boostlet.org/dist/boostlet.min.js";
+
 script.onload = run;
 document.head.appendChild(script);
 eval(script);

diff --git a/gfx/boostlet.png b/gfx/boostlet.png
diff --git a/gfx/favicon.png b/gfx/favicon.png
diff --git a/gfx/papaya.png b/gfx/papaya.png
diff --git a/gfx/xtk.png b/gfx/xtk.png
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="shortcut icon" type="image/png" href="./gfx/favicon.png">
   <title>BOOSTLET.js</title>
   <style>
     a {
@@ -18,6 +19,21 @@
     header {
       background-color: #fff;
       padding: 20px;
+      text-align: center;
+    }
+
+    .header-content {
+        margin: 0 auto;
+        padding: 0 20px;
+        display: flex;
+        align-items: center;
+    }
+
+    h1 {
+        font-family: 'Roboto', sans-serif;
+        font-weight: 700;
+        font-size: 28px;
+        margin: 0;
     }
 
     .content {
@@ -54,13 +70,10 @@
         background-color: black;
         color: white;
         border: none;
-        padding: 10px 20px;
+        padding: 10px 30px;
         cursor: pointer;
         border-radius: 10px;
-        font-family: 'Haettenschweiler', sans-serif;
-        font-weight: bolder;
-        font-size: 32px;
-        width: 240px;
+        width: 150px;
         height: 60px;
     }
 
@@ -151,6 +164,22 @@
         display: block;
     }
 
+    /* Responsive */
+    @media (max-width: 600px) {
+        .header-content {
+            flex-direction: column;
+        }
+
+        h1 {
+            font-size: 20px;
+            padding-top: 10px;
+        }
+
+        .logo {
+            height: 50px;
+        }
+    }
+
   </style>
   <script type="text/javascript">
 
@@ -243,9 +272,10 @@
 </head>
 <body>
   <header>
-    <div class="logodiv">
-      <a href=''><button class="logo">BOOSTLET.js</button></a>&nbsp;&nbsp;&nbsp;<strong>image processing plugins for the web</strong>
-    </div>
+    <div class="header-content">
+      <a href='https://boostlet.org/'><img src='gfx/boostlet.png' alt='Logo' class='logo'></a>
+      &nbsp;&nbsp;&nbsp;&nbsp;<h1>image processing plugins for the web</h1>
+  </div>
   </header>
   <main>
     <div class="content">
@@ -303,6 +333,28 @@
         </a>
         </div>
 
+        <div class="image-container">
+          <a href="https://gaiborjosue.github.io/API_Images/xtk.html" target="_blank">
+              <img src="gfx/xtk.png" alt="xtk">
+                  <div class='overlay'>
+                      <span class='sitename'>XTK Demo</span>
+                      <span class='tech'>xtk.js 2D Slice</span>
+
+                  </div>
+        </a>
+        </div>
+
+        <div class="image-container">
+        <a href="https://gaiborjosue.github.io/API_Images/papaya.html" target="_blank">
+            <img src="gfx/papaya.png" alt="papaya">
+                <div class='overlay'>
+                    <span class='sitename'>Papaya Demo</span>
+                    <span class='tech'>papaya.js</span>
+
+                </div>
+        </a>
+        </div>
+
       </div>
       <br><br>
       <div id='faq'>
@@ -323,4 +375,4 @@
     </div>
   </main>
 </body>
-</html>
+</html>
diff --git a/src/frameworks/papaya.js b/src/frameworks/papaya.js
@@ -0,0 +1,52 @@
+import { Framework } from "../framework.js";
+
+import { Util } from "../util.js";
+
+export class Papaya extends Framework {
+  constructor(instance) {
+    super(instance);
+    this.name = "papaya";
+  }
+
+  get_image(from_canvas) {
+    let canvas = this.instance[0].viewer.canvas;
+    let ctx = canvas.getContext("2d");
+
+    let image = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    let rgba_image = Util.rgba_to_grayscale(image.data)
+
+    return { data: rgba_image, width: image.width, height: image.height };
+    // return {'data':pixels, 'width':image.width, 'height':image.height};
+  }
+
+  set_image(new_pixels) {
+    let originalcanvas = this.instance[0].viewer.canvas;
+
+    let newcanvas = window.document.createElement("canvas");
+    newcanvas.width = originalcanvas.width;
+    newcanvas.height = originalcanvas.height;
+
+    let ctx = newcanvas.getContext("2d");
+
+    let newPixelsRgba = Util.grayscale_to_rgba(new_pixels);
+
+    let newPixelsClamped = new Uint8ClampedArray(newPixelsRgba);
+
+    let newImageData = new ImageData(
+      newPixelsClamped,
+      newcanvas.width,
+      newcanvas.height
+    );
+
+    // Draw the new image data onto the canvas
+    ctx.putImageData(newImageData, 0, 0);
+
+    newcanvas.onclick = function () {
+      // on click, we will restore the nv canvas
+      newcanvas.parentNode.replaceChild(originalcanvas, newcanvas);
+    };
+
+    // replace nv canvas with new one
+    originalcanvas.parentNode.replaceChild(newcanvas, originalcanvas);
+  }
+}