From 8b628ba9459191c8f7496412f252a3464148ae1f Mon Sep 17 00:00:00 2001
From: rexim <reximkut@gmail.com>
Date: Thu, 29 Apr 2021 02:49:36 +0700
Subject: [PATCH] Introduce the progress bar for emote rendering

---
 TODO.org   |  3 ++-
 index.html |  4 ++++
 index.js   | 16 ++++++++++------
 main.css   | 10 ++++++++++
 4 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/TODO.org b/TODO.org
index 27b1795..5a72800 100644
--- a/TODO.org
+++ b/TODO.org
@@ -1,5 +1,6 @@
 - [-] Alpha
-  - [ ] GIF rendering progress is not reported
+  - [ ] Smooth progress report on the first phase of the emote
+    rendering (the OpenGL one)
   - [X] Preview window is upside down (the actual problem is
     gl.readPixel returns upside down image (because thank you OpenGL
     coordinate system) so we render upside down)
diff --git a/index.html b/index.html
index 03323ba..93c21b8 100644
--- a/index.html
+++ b/index.html
@@ -28,6 +28,10 @@ <h2>Select a Filter</h2>
     <h2>Render</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</p>
     <div class="widget">
+      <div class="widget-element progress-bar">
+        <div class="progress" id="render-progress">
+        </div>
+      </div>
       <img id="render-preview" class="widget-element" />
       <div class="widget-element"><input id="render" type="submit" value="Render" /></div>
     </div>
diff --git a/index.js b/index.js
index 0fd85f2..e51ad61 100644
--- a/index.js
+++ b/index.js
@@ -188,10 +188,12 @@ function render(gl, canvas, program) {
         height: canvas.height,
     });
 
-    let fps = 30;
-    let dt = 1.0 / fps;
-    let duration = Math.PI / 3.0;
-    let frameCount = 100;
+    const fps = 30;
+    const dt = 1.0 / fps;
+    const duration = Math.PI / 3.0;
+    const frameCount = 100;
+
+    const renderProgress = document.getElementById("render-progress");
 
     let t = 0.0;
     while (t <= duration) {
@@ -218,11 +220,13 @@ function render(gl, canvas, program) {
             }
         }
 
-        console.log(canvas.width);
         gif.addFrame(new ImageData(pixels, canvas.width, canvas.height), {
             delay: dt * 1000,
             dispose: 2,
         });
+
+        renderProgress.style.width = `${(t / duration) * 50}%`;
+
         t += dt;
     }
 
@@ -232,7 +236,7 @@ function render(gl, canvas, program) {
     });
 
     gif.on('progress', (p) => {
-        console.log(`progress ${p}`);
+        renderProgress.style.width = `${50 + p * 50}%`;
     });
 
     gif.render();
diff --git a/main.css b/main.css
index 55b195d..10dc6a6 100644
--- a/main.css
+++ b/main.css
@@ -29,3 +29,13 @@ h2 {
     margin: 0 auto;
     padding-top: 10px;
 }
+
+.progress-bar {
+    width: 100%;
+}
+
+.progress {
+    width: 0%;
+    height: 20px;
+    background: #07a;
+}