GUI: make room for logarithmic filter frequency and tempo sync toggles (

#1, #5)
attilammagyar · May 9, 2023 · 62715b7 · 62715b7
1 parent ce2ad37
commit 62715b7
Show file tree

Hide file tree

Showing 15 changed files with 72 additions and 12 deletions.
diff --git a/gui/img/about.png b/gui/img/about.png
diff --git a/gui/img/controllers.png b/gui/img/controllers.png
diff --git a/gui/img/effects.bmp b/gui/img/effects.bmp
diff --git a/gui/img/effects.png b/gui/img/effects.png
diff --git a/gui/img/envelopes.png b/gui/img/envelopes.png
diff --git a/gui/img/knob_states-controlled.png b/gui/img/knob_states-controlled.png
diff --git a/gui/img/knob_states-free.png b/gui/img/knob_states-free.png
diff --git a/gui/img/knob_states-none.png b/gui/img/knob_states-none.png
diff --git a/gui/img/lfos.bmp b/gui/img/lfos.bmp
diff --git a/gui/img/lfos.png b/gui/img/lfos.png
diff --git a/gui/img/synth.bmp b/gui/img/synth.bmp
diff --git a/gui/img/synth.png b/gui/img/synth.png
diff --git a/gui/img/vst_logo.png b/gui/img/vst_logo.png
diff --git a/gui/js80p.xcf b/gui/js80p.xcf
diff --git a/gui/mockup.html b/gui/mockup.html
@@ -176,6 +176,41 @@
   font-weight: bold;
 }
 
+.block h1 label {
+  display: inline-block;
+  height: 16px;
+  overflow: hidden;
+  font-size: 12px;
+  font-weight: normal;
+  vertical-align: bottom;
+}
+
+.block h1 label.freq {
+  position: relative;
+  left: 14px;
+}
+
+.block h1 label.sync {
+  margin-right: 3px;
+  float: right;
+  margin-top: 2px;
+}
+
+.block h1 input {
+  position: relative;
+  background-color: black;
+  border: inset 2px #889;
+  width: 17px;
+  height: 12px;
+  border-radius: 5px;
+  top: -1px;
+  filter: none;
+}
+
+#osc-2 .block h1 input {
+  top: 0px;
+}
+
 .knob {
   display: inline-block;
   width: 58px;
@@ -313,9 +348,6 @@
   text-align: left;
 }
 
-.label {
-}
-
 .border > span {
   font-size: 12px;
   z-index: 2000;
@@ -449,26 +481,38 @@
         <h1>Oscillator 1 (modulator)</h1>
         <div id="osc-1-main" class="osc-main block"></div>
         <div id="osc-1-filter-1" class="block osc-filter">
-          <h1>Filter 1</h1>
+          <h1>
+            Filter 1
+            <label class="freq"><input type="text" /> LOG FREQ</label>
+          </h1>
         </div>
         <div id="osc-1-wave" class="osc-main block">
           <h1>Custom waveform harmonics</h1>
         </div>
         <div id="osc-1-filter-2" class="block osc-filter">
-          <h1>Filter 2</h1>
+          <h1>
+            Filter 2
+            <label class="freq"><input type="text" /> LOG FREQ</label>
+          </h1>
         </div>
       </div>
       <div id="osc-2" class="osc main-block block">
         <h1>Oscillator 2 (carrier)</h1>
         <div id="osc-2-main" class="osc-main block"></div>
         <div id="osc-2-filter-1" class="block">
-          <h1>Filter 1</h1>
+          <h1>
+            Filter 1
+            <label class="freq"><input type="text" /> LOG FREQ</label>
+          </h1>
         </div>
         <div id="osc-2-wave" class="osc-main block">
           <h1>Custom waveform harmonics</h1>
         </div>
         <div id="osc-2-filter-2" class="block">
-          <h1>Filter 2</h1>
+          <h1>
+            Filter 2
+            <label class="freq"><input type="text" /> LOG FREQ</label>
+          </h1>
         </div>
       </div>
     </div>
@@ -488,15 +532,24 @@ <h1>Distortion</h1>
         <div id="distortion-params" class="block"></div>
       </div>
       <div id="low-shelf" class="effect main-block block">
-        <h1>Filter 1</h1>
+        <h1>
+          Filter 1
+          <label class="freq"><input type="text" /> LOG FREQ</label>
+        </h1>
         <div id="low-shelf-params" class="block"></div>
       </div>
       <div id="high-shelf" class="effect main-block block">
-        <h1>Filter 2</h1>
+        <h1>
+          Filter 2
+          <label class="freq"><input type="text" /> LOG FREQ</label>
+        </h1>
         <div id="high-shelf-params" class="block"></div>
       </div>
       <div id="echo" class="effect main-block block">
-        <h1>Echo</h1>
+        <h1>
+          Echo
+          <label class="sync">TEMPO SYNC <input type="text" /></label>
+        </h1>
         <div id="echo-params" class="block"></div>
       </div>
       <div id="reverb" class="effect main-block block">
@@ -587,7 +640,7 @@ <h1>Reverb</h1>
 
 window.onload = function ()
 {
-    var i, o, s, d, h, k1, k2, k3;
+    var i, o, s, d, h, k1, k2, k3, l, n;
 
     if (String(window.location).match(/#hide/)) {
         document.getElementsByTagName("body")[0].setAttribute("class", "hide-objects");
@@ -736,11 +789,18 @@ <h1>Reverb</h1>
         k1.setAttribute("class", "block");
         h = document.createElement("h1");
         h.innerHTML = "LFO " + String(i);
+        l = document.createElement("label");
+        l.innerHTML = "TEMPO SYNC ";
+        l.setAttribute("class", "sync");
+        n = document.createElement("input");
+        n.setAttribute("type", "text");
+        l.appendChild(n);
+        h.appendChild(l);
         d.appendChild(h);
         d.appendChild(k1);
 
         create_knob(k1, "WAV", "triangle");
-        create_knob(k1, "FRQ Hz", "0.01");
+        create_knob(k1, "FREQ Hz", "0.01");
         create_knob(k1, "PHS deg", "50");
         create_knob(k1, "MIN %", "50");
         create_knob(k1, "MAX %", "50");