time and amp zoom sliders, names

ArdenButterfield · ArdenButterfield · commit 17628a9e3b91 · 2025-12-07T16:56:12.000-05:00
diff --git a/all-panels/index.html b/all-panels/index.html
@@ -15,10 +15,18 @@
     <script src="../waves.js"></script>
     <script src="../widget.js"></script>
     <script src="../interaction.js"></script>
+    <title>Digital Audio Workbench</title>
   </head>
     <body>
     <main>
       <div class="timeline">
+
+        <h1>Digital Audio Workbench</h1>
+
+        <h2>By Arden Butterfield, Josh Rohs, Travis J. West & Marcelo M. Wanderley
+        with contributions by Eduardo Meneses, Christian Frisson, Erivan Duarte, Laurent Tarabout, and Maxwell Gentili-Morin</h2>
+        <h3>Copyright IDMIL/McGill University, 2025</h3>
+
         <div class="section" id="input-section">
           <div class="titlebar">
             <div class="section-title">
@@ -140,13 +148,13 @@ <h2>Reconstructed</h2>
         </div>
       </div>
     </main>
-    <footer>
-      <div>Digital Audio Workbench </div>
-      <div>By Josh Rohs, Travis J. West, Arden Butterfield & Marcelo M. Wanderley </div>
-      <div>with contributions by Eduardo Meneses, Christian Frisson, and Erivan Duarte</div>
-      <div>Copyright <a href="//www-new.idmil.org/">IDMIL</a>/McGill University, 2020 </div>
-    </footer>
-
+    <div class="global-panel">
+      <div id="global-panel-collapse-button" onclick="collapseGlobalPanel()"></div>
+      <div class="contents">
+        <div class="slider" id="time-zoom-slider"></div>
+        <div class="slider" id="amp-zoom-slider"></div>
+      </div>
+    </div>
   <script>
     createWidgets();
   </script>
diff --git a/interaction.js b/interaction.js
@@ -7,4 +7,14 @@ function collapseClick(id) {
     collapse.style.display = 'none';
     document.getElementById(id).textContent = "\u26F6";
   }
+}
+
+function collapseGlobalPanel() {
+  let collapse = document.getElementById("global-panel-collapse-button").parentNode.querySelector('.contents');
+  if (collapse.style.display === 'none') {
+    collapse.style.display = 'block';
+  } else {
+    collapse.style.display = 'none';
+  }
+
 }
diff --git a/styles.css b/styles.css
@@ -1,10 +1,26 @@
 body {
   font-family: Cantarell, sans-serif;
+  margin: 0;
 }
 
+h1 {
+    text-align: center;
+}
+
+h2 {
+    font-size: 1em;
+    text-align: center;
+    font-weight: normal;
+}
+
+h3 {
+    font-style: italic;
+    text-align: center;
+    font-weight: normal;
+}
 footer{
   font-family: Cantarell, sans-serif;
-  padding: 5px 10px 0px;
+  padding: 5px 10px 0;
   background : lightgrey;
   font-size: 9pt;
   color: grey;
@@ -67,4 +83,32 @@ main {
 
 .slider {
     position: relative;
-}
+}
+
+.global-panel {
+    bottom: 30px;
+    right: 30px;
+    border: 1px solid grey;
+    border-radius: 5px;
+    background-color: lightgrey;
+    position: fixed;
+    display: flex;
+    gap: 10px;
+    min-height: 40px;
+}
+
+
+#global-panel-collapse-button:hover {
+    background-color: darkblue;
+}
+
+#global-panel-collapse-button {
+    width: 20px;
+    background: blue;
+}
+
+.global-panel .contents {
+    padding: 1em;
+
+}
+
diff --git a/widget.js b/widget.js
@@ -107,7 +107,9 @@ let sliderIdLookups = {
   'sample-rate-slider' : SampleRateSlider,
   'dither-slider' : DitherSlider,
   'quantization-slider' : BitDepthSlider,
-  'delta-sigma-step-slider' : DeltaSigmaStepSlider
+  'delta-sigma-step-slider' : DeltaSigmaStepSlider,
+  'time-zoom-slider' : TimeZoomSlider,
+  'amp-zoom-slider' : AmpZoomSlider
 }
 
 function createWidgets() {
