feat(examples): update imgui example

thi-ng · Aug 3, 2019 · 19360b9 · 19360b9
1 parent dcd19bc
commit 19360b9
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 19 deletions.
diff --git a/examples/imgui/index.html b/examples/imgui/index.html
@@ -9,19 +9,48 @@
             href="https://unpkg.com/tachyons@4/css/tachyons.min.css"
             rel="stylesheet"
         />
-        <style></style>
+        <link
+            href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono&display=swap"
+            rel="stylesheet"
+        />
+        <style>
+            li {
+                line-height: 2;
+            }
+            kbd {
+                border: 1px white solid;
+                border-radius: 0.125rem;
+                padding: 0.125rem;
+                font-size: 80%;
+                font-family: "IBM Plex Mono", monospace;
+            }
+        </style>
     </head>
-    <body class="sans-serif bg-black white ma3">
+    <body class="sans-serif bg-black white ma3 f7">
         <div id="app"></div>
         <div>
             <h3>Key controls</h3>
+            The entire UI is fully keyboard controllable:
             <ul>
-                <li>Tab / Shift + Tab &mdash; switch focus</li>
-                <li>Enter &mdash; Activate focused element</li>
-                <li>Up / Down &mdash; adjust slider value</li>
+                <li><kbd>Tab/Shift+Tab</kbd> &mdash; Switch focus</li>
+                <li><kbd>Enter</kbd> &mdash; Activate focused button</li>
+                <li>
+                    <kbd>Up/Down</kbd> or drag mouse &mdash; Adjust slider value
+                </li>
+                <li>
+                    <kbd>Shift+Up/Down</kbd> &mdash; Adjust slider value (x5)
+                </li>
+                <li>
+                    <kbd>Alt+Up/Down</kbd> / Drag &mdash; Adjust RGB sliders
+                    uniformly (grayscale)
+                </li>
+                <li>
+                    <kbd>Left/Right</kbd> &mdash; Move cursor in text field (if
+                    focused)
+                </li>
                 <li>
-                    Alt + click / drag &mdash; adjust RGB sliders together
-                    (grayscale)
+                    <kbd>Alt+Left/Right</kbd> &mdash; Move cursor to prev/next
+                    word
                 </li>
             </ul>
         </div>

diff --git a/examples/imgui/src/index.ts b/examples/imgui/src/index.ts
@@ -8,33 +8,43 @@ import {
     IMGUI,
     slider,
     sliderGroup,
+    textField,
     textLabel
 } from "@thi.ng/imgui";
 import { PI } from "@thi.ng/math";
+import { float } from "@thi.ng/strings";
 import { map, range2d } from "@thi.ng/transducers";
 import { mulN } from "@thi.ng/vectors";
 
 const app = () => {
     const gui = new IMGUI({
         width: 640,
         height: 480,
-        theme: DEFAULT_THEME
+        theme: {
+            ...DEFAULT_THEME,
+            font: "10px 'IBM Plex Mono'",
+            cursor: "#ff6"
+        }
     });
     let isUiVisibe = false;
-    let rad = [20];
-    let numCircles = [2];
+    let rad = [10];
+    let numCircles = [16];
     let rgb = [0.5, 0.5, 0.5];
+    let txt: any = ["Hello there! This is a test, do not panic!"];
     return () => {
         gui.begin();
         // prettier-ignore
-        if (button(gui,"show",0,0,100,20,isUiVisibe ? "Hide UI" : "Show UI")) {
+        if (button(gui,"show", 0, 0, 100, 20, isUiVisibe ? "Hide UI" : "Show UI")) {
             isUiVisibe = !isUiVisibe;
         }
         // prettier-ignore
         if (isUiVisibe) {
-            slider(gui, "numc", 0, 22, 100, 20, 1, 20, 1, numCircles, 0, "Circles", "Grid size");
-            slider(gui, "rad", 0, 44, 100, 20, 2, 20, 1, rad, 0, "Radius", "Circle radius");
-            sliderGroup(gui, "col", 102, 22, 100, 20, 0, 22, 0, 1, 0.05, rgb, ["R","G","B"], ["Red", "Green", "Blue"]);
+            slider(gui, "numc", 0, 22, 100, 20, 1, 20, 1, numCircles, 0, "Circles");
+            slider(gui, "rad", 0, 44, 100, 20, 2, 20, 1, rad, 0, "Radius", undefined, "Circle radius");
+            sliderGroup(gui, "col", 102, 22, 100, 20, 0, 22, 0, 1, 0.05, rgb, ["R","G","B"], float(2), ["Red", "Green", "Blue"]);
+            if (textField(gui, "txt", 0, 88, 202, 20, txt)) {
+                console.log(txt[0]);
+            }
         }
         const { key, hotID, activeID, focusID, lastID } = gui;
         // prettier-ignore
@@ -44,17 +54,21 @@ const app = () => {
             textLabel([10, 470], "#fff", `IDs: ${hotID || "none"} / ${activeID || "none"}`)
         );
         gui.end();
-        const r = rad[0];
-        const numC = numCircles[0] >> 1;
+        const n = numCircles[0] >> 1;
         return [
             canvas,
             { ...gui.attribs },
             [
                 "g",
-                { fill: rgb, translate: [320, 240], rotate: PI / 4, scale: r },
+                {
+                    fill: rgb,
+                    translate: [320, 240],
+                    rotate: PI / 4,
+                    scale: rad[0]
+                },
                 ...map(
-                    (p) => circle(mulN(p, p, sin(gui.time, 0.25, 1, 2)), 1),
-                    range2d(-numC, numC + 1, -numC, numC + 1)
+                    (p) => circle(mulN(p, p, sin(gui.time, 0.25, 0.5, 2.5)), 1),
+                    range2d(-n, n + 1, -n, n + 1)
                 )
             ],
             gui