Merge pull request #5 from tmpvar/emscripten-sliders

Add sliders/text output to demo
Raikiri · Oct 17, 2024 · 48bb545 · 48bb545
2 parents a4cb283 + 02b61f9
commit 48bb545
Show file tree

Hide file tree

Showing 3 changed files with 160 additions and 30 deletions.
diff --git a/web/LegitScriptEmscriptenApi.cpp b/web/LegitScriptEmscriptenApi.cpp
@@ -2,25 +2,23 @@
 #include <iostream>
 
 #include <emscripten/bind.h>
+#include <emscripten/val.h>
 #include <json.hpp>
 
 #include "LegitScriptJsonApi.h"
 
-std::string LegitScriptLoad(std::string source) {
-
-  ls::InitScript([](std::string name, float val, float min_val, float max_val) -> float
+std::string LegitScriptLoad(std::string source, emscripten::val imControls) {
+  ls::InitScript([imControls](std::string name, float val, float min_val, float max_val) -> float
     {
-      std::cout << "Slider int: " << val << "[" << min_val << ", " << max_val << "]\n";
-      return val;
+      return imControls.call<float>("floatSlider", name, val, min_val, max_val);
     },
-    [](std::string name, int val, int min_val, int max_val) -> int
+    [imControls](std::string name, int val, int min_val, int max_val) -> int
     {
-      std::cout << "Slider float: " << val << "[" << min_val << ", " << max_val << "]\n";
-      return val;
+      return imControls.call<int>("intSlider", name, val, min_val, max_val);
     },
-    [](std::string text) -> void
+    [imControls](std::string text) -> void
     {
-      std::cout << "Text: " << text << "\n";
+      imControls.call<void>("text", text);
     });
 
   using json = nlohmann::json;

diff --git a/web/demo.html b/web/demo.html
@@ -18,27 +18,62 @@
       font-family: sans-serif;
     }
 
-    textarea#editor {
+    section {
+      display:block;
+    }
+
+    inputs {
+      width: 1000px;
+      height: 50%;
+      display: flex;
+      flex-direction: row;
+    }
+
+    inputs textarea#editor {
       background-color: #222;
       color: #fff;
+      width: 100%;
       height: 500px;
-      width:90%;
+      padding: 1em;
+      flex: 2 0 calc(100% - 2em);
+    }
+
+
+    inputs controls {
+      width:100%;
+      border: 1px solid rgb(41, 118, 182);
+      flex: 1 0 calc(100% - 4em);
+      margin-left: 1em;
       padding: 1em;
     }
 
-    #compilation-result {
+    results {
+      display: flex;
+    }
+
+    results result.compilation pre {
       background-color: #222;
       color: #fff;
       height: 500px;
       width:90%;
       padding: 1em;
+      overflow: auto;
+    }
+
+    results result.frame pre {
+      background-color: #222;
+      color: #fff;
+      height: 500px;
+      width:400px;
+      padding: 1em;
+      overflow: auto;
     }
   </style>
 
 </head>
 <body>
-
   <section>
+  <inputs>
     <textarea id="editor">
 void ColorPass(in float r, in float g, in float b, out vec4 out_color)
 {{
@@ -62,12 +97,29 @@
     float b = SliderFloat("Float param", -42.0f, 42.0f);
     //float e = SliderFloat("Float param", -42.0f, 42.0f);
     Text("script int: " + formatInt(a) + " float: " + formatFloat(b));
+    Text("should be 12345.52345, but is actually " + formatFloat(12345.52345, '0', 1, 7));
   }
 }}
-    </textarea>
-    <h2>result</h2>
-    <pre id="compilation-result">
-    </pre>
+      </textarea>
+      <controls>
+          <h2>Controls</h2>
+      </controls>
+    <inputs>
+    </section>
+    <section>
+      <results>
+        <result class="compilation">
+          <h2>compilation result</h2>
+          <p class="timings"></p>
+          <pre></pre>
+        </result>
+        <result class="frame">
+          <h2>frame result</h2>
+          <p class="timings"></p>
+          <pre></pre>
+        </result>
+      </results>
+    </section>
     <script type="module" src="./demo.js"></script>
   </section>
 </body>

diff --git a/web/demo.js b/web/demo.js
@@ -2,14 +2,14 @@
 import Module from "./dist/LegitScriptWasm.js"
 
 Init(
-  document.querySelector('#editor')
+  document.querySelector('#editor'),
+  document.querySelector('results')
 )
 
-function CompileLegitScript(legitScriptCompiler, content) {
-  const debugOutputEl = document.getElementById('compilation-result')
-
+function CompileLegitScript(legitScriptCompiler, content, imControls) {
+  const debugOutputEl = document.querySelector('results result.compilation pre')
   try {
-    const result = legitScriptCompiler.LegitScriptLoad(content)
+    const result = legitScriptCompiler.LegitScriptLoad(content, imControls)
     debugOutputEl.innerText = result
 
     if (result.includes('"error":')) {
@@ -25,14 +25,94 @@ function CompileLegitScript(legitScriptCompiler, content) {
   }
 }
 
-async function Init(editorEl) {
+async function Init(editorEl, resultsEl) {
   const initialContent = editorEl.value
   const legitScriptCompiler = await Module();
-  CompileLegitScript(legitScriptCompiler, initialContent)
-  editorEl.addEventListener('keyup', (e) => {
-    CompileLegitScript(legitScriptCompiler, editorEl.value)
-  })
 
-  // TODO: actually run frames
-  // console.log('LegitScriptFrame', JSON.parse(legitScriptCompiler.LegitScriptFrame(1024, 512, Date.now())))
+  const controlEl = document.querySelector('inputs controls')
+  const TextualOutputName =  '@@textualOutput'
+  const imControlContext = {}
+  const imControls = {
+    floatSlider(name, value, lo, hi) {
+      const step = 0.01;
+      if (!imControlContext[name]) {
+        const el = document.createElement('p')
+        el.innerHTML = `
+          ${name}
+          <input type="range" min="${lo}" max="${hi}" value="${value}" step="${step}" />
+          (<span class="value">${value}</span>)
+        `
+        imControlContext[name] = el
+        controlEl.appendChild(el)
+      }
+
+      const el = imControlContext[name]
+      const input = el.querySelector('input')
+      value = parseFloat(input.value)
+      el.querySelector('.value').innerText = value
+
+      return value
+    },
+    intSlider(name, value, lo, hi) {
+      const step = 1;
+      if (!imControlContext[name]) {
+        const el = document.createElement('p')
+        el.innerHTML = `
+          ${name}
+          <input type="range" min="${lo}" max="${hi}" value="${value}" step="${step}" />
+          (<span class="value">${value}</span>)
+        `
+        imControlContext[name] = el
+        controlEl.appendChild(el)
+      }
+
+      const el = imControlContext[name]
+      const input = el.querySelector('input')
+      value = parseInt(input.value)
+      el.querySelector('.value').innerText = value
+
+      return value
+    },
+    text(value) {
+      if (!imControlContext[TextualOutputName]) {
+        const el = document.createElement('pre')
+        imControlContext[TextualOutputName] = el
+        controlEl.appendChild(el)
+      }
+
+      const el = imControlContext[TextualOutputName]
+      el.innerText += value + '\n'
+    }
+  }
+
+  const compilationTimingEl = resultsEl.querySelector('.compilation .timings')
+
+  function Compile() {
+    const start = Date.now()
+    CompileLegitScript(legitScriptCompiler, editorEl.value, imControls)
+    compilationTimingEl.innerText = `${Date.now() - start}ms`
+  }
+
+  Compile()
+  editorEl.addEventListener('keyup', Compile)
+
+  const frameTimingEl = document.querySelector('results result.frame .timings')
+  const frameOutputEl = document.querySelector('results result.frame pre')
+  function Frame() {
+    const start = performance.now()
+
+    // Special case, clear the textual output
+    if (imControlContext[TextualOutputName]) {
+      imControlContext[TextualOutputName].innerText = ''
+    }
+
+    const frameResult = legitScriptCompiler.LegitScriptFrame(1024, 512, performance.now())
+    frameTimingEl.innerText = `${(performance.now() - start).toFixed(2)}ms`
+    if (frameResult !== frameOutputEl.innerText) {
+      frameOutputEl.innerText = frameResult
+    }
+    setTimeout(Frame, 100)
+  }
+
+  Frame(0)
 }