Move demo to use the new control request scheme

Prior to this we'd pass a bunch of callbacks into the LS frame handler, but LS changed to return a list of requests.
Raikiri · Nov 5, 2024 · a73be79 · a73be79
1 parent aa0aa44
commit a73be79
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 38 deletions.
diff --git a/web/demo.html b/web/demo.html
@@ -82,7 +82,7 @@
 [rendergraph]
 void RenderGraphMain()
 {{
-  Image img = GetImage(ivec2(128, 128), rgba8);
+  Image img = GetImage(uvec2(128, 128), rgba8);
   ColorPass(
     SliderFloat("R", 0.0f, 1.0f) + 0.5f,
     SliderFloat("G", 0.0f, 1.0f),

diff --git a/web/demo.js b/web/demo.js
@@ -1,42 +1,38 @@
-
 import Module from "./dist/LegitScriptWasm.js"
 
-Init(
-  document.querySelector('#editor'),
-  document.querySelector('results')
-)
+Init(document.querySelector("#editor"), document.querySelector("results"))
 
 function CompileLegitScript(legitScriptCompiler, content, imControls) {
-  const debugOutputEl = document.querySelector('results result.compilation pre')
+  const debugOutputEl = document.querySelector("results result.compilation pre")
   try {
-    const result = legitScriptCompiler.LegitScriptLoad(content, imControls)
+    const result = legitScriptCompiler.LegitScriptLoad(content)
     debugOutputEl.innerText = result
 
     if (result.includes('"error":')) {
-      debugOutputEl.style = 'border:2px solid yellow'
+      debugOutputEl.style = "border:2px solid yellow"
     } else {
-      debugOutputEl.style = 'border:2px solid green'
+      debugOutputEl.style = "border:2px solid green"
     }
     return true
   } catch (e) {
     debugOutputEl.innerText = `${e.name} ${e.message}\n ${e.stack}`
-    debugOutputEl.style = 'border:2px solid red'
+    debugOutputEl.style = "border:2px solid red"
     return false
   }
 }
 
 async function Init(editorEl, resultsEl) {
   const initialContent = editorEl.value
-  const legitScriptCompiler = await Module();
+  const legitScriptCompiler = await Module()
 
-  const controlEl = document.querySelector('inputs controls')
-  const TextualOutputName =  '@@textualOutput'
+  const controlEl = document.querySelector("inputs controls")
+  const TextualOutputName = "@@textualOutput"
   const imControlContext = {}
   const imControls = {
     floatSlider(name, value, lo, hi) {
-      const step = 0.01;
+      const step = 0.01
       if (!imControlContext[name]) {
-        const el = document.createElement('p')
+        const el = document.createElement("p")
         el.innerHTML = `
           ${name}
           <input type="range" min="${lo}" max="${hi}" value="${value}" step="${step}" />
@@ -47,16 +43,16 @@ async function Init(editorEl, resultsEl) {
       }
 
       const el = imControlContext[name]
-      const input = el.querySelector('input')
+      const input = el.querySelector("input")
       value = parseFloat(input.value)
-      el.querySelector('.value').innerText = value
+      el.querySelector(".value").innerText = value
 
       return value
     },
     intSlider(name, value, lo, hi) {
-      const step = 1;
+      const step = 1
       if (!imControlContext[name]) {
-        const el = document.createElement('p')
+        const el = document.createElement("p")
         el.innerHTML = `
           ${name}
           <input type="range" min="${lo}" max="${hi}" value="${value}" step="${step}" />
@@ -67,46 +63,78 @@ async function Init(editorEl, resultsEl) {
       }
 
       const el = imControlContext[name]
-      const input = el.querySelector('input')
+      const input = el.querySelector("input")
       value = parseInt(input.value)
-      el.querySelector('.value').innerText = value
+      el.querySelector(".value").innerText = value
 
       return value
     },
-    text(value) {
-      if (!imControlContext[TextualOutputName]) {
-        const el = document.createElement('pre')
-        imControlContext[TextualOutputName] = el
+    text(name, value) {
+      if (!imControlContext[name]) {
+        const el = document.createElement("pre")
+        imControlContext[name] = el
         controlEl.appendChild(el)
       }
 
-      const el = imControlContext[TextualOutputName]
-      el.innerText += value + '\n'
-    }
+      const el = imControlContext[name]
+      el.innerText = value + "\n"
+    },
   }
 
-  const compilationTimingEl = resultsEl.querySelector('.compilation .timings')
+  const compilationTimingEl = resultsEl.querySelector(".compilation .timings")
 
   function Compile() {
     const start = Date.now()
-    CompileLegitScript(legitScriptCompiler, editorEl.value, imControls)
+    CompileLegitScript(legitScriptCompiler, editorEl.value)
     compilationTimingEl.innerText = `${Date.now() - start}ms`
   }
 
   Compile()
-  editorEl.addEventListener('keyup', Compile)
+  editorEl.addEventListener("keyup", Compile)
 
-  const frameTimingEl = document.querySelector('results result.frame .timings')
-  const frameOutputEl = document.querySelector('results result.frame pre')
+  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(
+      '[{"name": "@swapchain_size", "type": "uvec2", "value":{"x":512, "y":512}}]'
+    )
+
+    const result = JSON.parse(frameResult)
+    if (result.context_requests) {
+      const toRemove = new Set(Object.keys(imControlContext))
+      let textualIndex = 0
+      for (const request of result.context_requests) {
+        if (request.type === "FloatRequest") {
+          imControls.floatSlider(
+            request.name,
+            request.value,
+            request.lo,
+            request.hi
+          )
+          toRemove.delete(request.name)
+        } else if (request.type === "IntRequest") {
+          imControls.intSlider(
+            request.name,
+            request.value,
+            request.lo,
+            request.hi
+          )
+          toRemove.delete(request.name)
+        } else if (request.type === "TextRequest") {
+          const name = TextualOutputName + textualIndex++
+          imControls.text(name, request.text)
+          toRemove.delete(name)
+        }
+      }
+
+      for (const key of toRemove) {
+        controlEl.removeChild(imControlContext[key])
+        delete imControlContext[key]
+      }
     }
 
-    const frameResult = legitScriptCompiler.LegitScriptFrame('[{"name": "@swapchain_size", "type": "uvec2", "value":{"x":512, "y":512}}]')
     frameTimingEl.innerText = `${(performance.now() - start).toFixed(2)}ms`
     if (frameResult !== frameOutputEl.innerText) {
       frameOutputEl.innerText = frameResult