From fe87e0f7223b3cf04d30c1f286b223b7cf568e35 Mon Sep 17 00:00:00 2001
From: Gregg Tavares <github@greggman.com>
Date: Wed, 25 Dec 2024 10:26:17 -0800
Subject: [PATCH] Add onChange example

---
 examples/js/index/index.js |  4 ++--
 index.html                 | 48 ++++++++++++++++++++++++++++++++++++--
 2 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/examples/js/index/index.js b/examples/js/index/index.js
index 89d4374..44d5cad 100644
--- a/examples/js/index/index.js
+++ b/examples/js/index/index.js
@@ -243,8 +243,8 @@ function log(...args) {
   const lineNo = parseInt(logElem.dataset.lineNo || 1);
   const lines = logElem.textContent.split('\\n');
   lines.push(\`\${lineNo}: \${args.join(' ')}\`);
-  if (lines.length > 3) {
-    lines.shift();
+  if (lines.length > 5) {
+    lines.splice(0, lines.length - 5);
   }
   logElem.textContent = lines.join('\\n');
   logElem.dataset.lineNo = lineNo + 1;
diff --git a/index.html b/index.html
index 1532635..a942824 100644
--- a/index.html
+++ b/index.html
@@ -304,6 +304,8 @@ <h2>Canvas:</h2>
 const s = {
   period1: 1,
   period2: 4,
+  period3: 10,
+  period4: 40,
 };
 
 //gui.add(s, 'period1', 0, 5);
@@ -313,13 +315,22 @@ <h2>Canvas:</h2>
   waveData.shift();
   const v = performance.now() * 0.001;
   const s1 = Math.sin(v * s.period1);
-  const s2 = Math.sin(v * s.period2)
+  const s2 = Math.sin(v * s.period2);
   waveData.push(s1 + s2);
 }, 200);
 
+setInterval(() => {
+  waveData2.shift();
+  const v = performance.now() * 0.001;
+  const s1 = Math.sin(v * s.period3);
+  const s2 = Math.sin(v * s.period4);
+  waveData2.push(s1 + s2);
+}, 10);
+
   ">
     <pre><code class="language-javascript">
 const waveData = new Array(100).fill(0);
+const waveData2 = new Array(100).fill(0);
 
 const gui = new GUI();
 helpers.graph(
@@ -330,6 +341,14 @@ <h2>Canvas:</h2>
     max: +2,
     interval: 200,
   });
+helpers.graph(
+  gui.addCanvas('wave 2').canvas, 
+  waveData2,
+  {
+    min: -2,
+    max: +2,
+    interval: 10,
+  });
     </code></pre>
   </div>
 
@@ -502,9 +521,34 @@ <h2>TextNumbers:</h2>
     </code></pre>
   </div>
 
+  <!-- ============================================================ -->
+  <h2>Respond to changes:</h2>
+  <p>Get called when the user changes a value.</p>
+
+  <div data-example>
+    <pre><code class="language-javascript">
+const s = {
+  count: 123,
+  name: 'Buffy',
+  speed: 45,
+};
+
+const gui = new GUI();
+gui.add(s, 'count').onChange(logCount);
+gui.add(s, 'name').onChange(logName);
+gui.add(s, 'speed', 0, 100).onChange(logSpeed);
+gui.onChange(logAll);  // or folder
+
+function logCount(v) { log('count:', v); }
+function logName(v) { log('name:', v); }
+function logSpeed(v) { log('speed:', v); }
+function logAll() { log(JSON.stringify(s)); }
+    </code></pre>
+  </div>
+
   <!-- ============================================================ -->
   <h2>Listen:</h2>
-  <p>Listens for changes.</p>
+  <p>Listens for changes. (auto update)</p>
 
   <div data-example>
     <pre><code class="language-javascript">