From a9de99cd643fbb1bb1555fd7206202fb600093e6 Mon Sep 17 00:00:00 2001
From: Matthew Kosarek <mattkae@protonmail.com>
Date: Wed, 17 Nov 2021 06:58:13 -0500
Subject: (mkosarek) Fixing the displacement displayer

---
 2d/softbody/softbody_1.html | 79 +++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 77 insertions(+), 2 deletions(-)

(limited to '2d/softbody/softbody_1.html')

diff --git a/2d/softbody/softbody_1.html b/2d/softbody/softbody_1.html
index f103545..12ee272 100644
--- a/2d/softbody/softbody_1.html
+++ b/2d/softbody/softbody_1.html
@@ -54,6 +54,7 @@
 <script src="./softbody_1/dist/output.js"></script>
 <script>
   window.onload = function() {
+      // -- Play/Stop Logic
       function addButtonListener(pPlay, pStop, pDisableElementList) {
           var lPlayElement = document.getElementById(pPlay),
               lStopElement = document.getElementById(pStop);
@@ -82,6 +83,66 @@
       addButtonListener('gl_canvas_play_damped', 'gl_canvas_stop_damped', [
 
       ]);
+
+      // -- Slider logic
+      var sliderList = document.querySelectorAll('input[type=range]'),
+          attachListener = function(element) {
+              var output = element.nextElementSibling;
+              var updateOutput = function() {
+                  var value = Number(element.value);
+                  output.innerHTML = value;
+              }
+              
+              element.addEventListener('input', updateOutput);
+              element.addEventListener('change', updateOutput);
+              updateOutput();
+          };
+
+      for(var i = 0; i < sliderList.length; i++) {
+          attachListener(sliderList[i]);
+      }
+
+      // -- Add callbacks for sliders
+      Module.onRuntimeInitialized = function() {
+          var Undamped_SetLength = Module.cwrap('Undamped_SetLength', 'void', ['number']),
+              Undamped_SetDisplacement = Module.cwrap('Undamped_SetDisplacement', 'void', ['number']),
+              Undamped_SetK = Module.cwrap('Undamped_SetK', 'void', ['number']),
+              Undamped_SetMass = Module.cwrap('Undamped_SetMass', 'void', ['number']),
+              lengthSlider = document.getElementById('undamped_spring_length'),
+              displacementSlider = document.getElementById('undamped_start_position'),
+              kSlider = document.getElementById('undamped_spring_constant'),
+              massSlider = document.getElementById('undamped_spring_mass'),
+              setLength = function(value) {
+                  value = Number(value);
+                  Undamped_SetLength(value);
+
+                  var currentDisplacementValue = displacementSlider.value;
+                  var bound = value / 2.0;
+                  displacementSlider.setAttribute('max', bound);
+                  displacementSlider.setAttribute('min', -bound);
+
+                  if (currentDisplacementValue < -bound) currentDisplacementValue = -bound;
+                  else if (currentDisplacementValue > bound) currentDisplacementValue = bound;
+
+                  var event = new Event('change');  
+                  displacementSlider.value = currentDisplacementValue;
+                  displacementSlider.dispatchEvent(event);
+              },
+              setDisplacement = function(value) {
+                  Undamped_SetDisplacement(value);
+              },
+              setK = function(value) {
+                  Undamped_SetK(value);
+              },
+              setMass = function(mass) {
+                  Undamped_SetMass(mass);
+              };
+
+          lengthSlider.addEventListener('change', function(event) { setLength(Number(event.target.value)); });
+          displacementSlider.addEventListener('change', function(event) { setDisplacement(Number(event.target.value)); });
+          kSlider.addEventListener('change', function(event) { setK(Number(event.target.value)); });
+          massSlider.addEventListener('change', function(event) { setMass(Number(event.target.value)); });
+      };
   }
   
 </script>
@@ -104,12 +165,26 @@
     <p>
       <span class='widget_container'>
         <label for='undamped_spring_length'>Spring Length (m)</label>
-        <input type='range' id='undamped_spring_length'/>
+        <input type='range' id='undamped_spring_length' min="50" max="300" value="150"/>
+        <span></span>
       </span>
       
       <span class='widget_container'>
         <label for='undamped_start_position'>Start Displacement (m)</label>
-        <input type='range' id='undamped_start_position'/>
+        <input type='range' id='undamped_start_position' min='-75' max='75' value='0'/>
+        <span></span>
+      </span>
+
+      <span class='widget_container'>
+        <label for='undamped_spring_constant'>Spring Constant (N / m)</label>
+        <input type='range' id='undamped_spring_constant' min='0.1' max='5.0' value='1.0' step='0.1'/>
+        <span></span>
+      </span>
+
+      <span class='widget_container'>
+        <label for='undamped_spring_mass'>Mass (kg)</label>
+        <input type='range' id='undamped_spring_mass' min='0.1' max='10.0' value='1.0' step='0.1'/>
+        <span></span>
       </span>
       
     </p>
-- 
cgit v1.2.1