actual panning content, for stereo panner

_manual/17_mixing/02_panning.html

@@ -1,9 +1,6 @@
 ---
 layout: default
-title: Panning Control
+title: Panning
 ---                        
 
-
-  
-  
-  
+{% children %}

_manual/17_mixing/02_panning/01_stereo_panner.html

@@ -3,24 +3,95 @@ layout: default
 title: Stereo Panner
 ---                        
 
-<h2>Stereo Panner</h2>
+<p>
+The default stereo panner distributes 2 inputs to 2 outputs. Its
+behaviour is controlled by two parameters, width and position. The
+default settings for the stereo panner
+are width=100%>, position=center (L=50%,
+R=50%). This panner assumes that you have 2 uncorrelated,
+independent signals that you wish to distribute to two outputs. 
+</p>
+<div class="well">
+<p>
+  With the default values it is not possible to alter the position,
+  since the width is already spread entirely across both outputs. To
+  alter the position, you must first reduce the width.
+</p>
+</div>
+
+<h2>Stereo Panner User Interface</h2>
+
+<img src="/images/stereo-panner-annotated.png" alt=""/>
 
 <p>
-The stereo panner distributes 2 inputs to 2 outputs. Its behaviour is
-controlled by two parameters, <code>width</code>
-and <code>position</code> (the latter could also be referred to as
-"direction", or "azimuth" without loss of accuracy).
+  The panner user interface consists of 3 elements, divided between
+  the top and bottom half. Click and/or drag in the top half to
+  control position; click and/or drag in the bottom half to control
+  width (see below for details).
+<p>
+<p>
+  In the top half is the position indicator, which shows where the
+  center of the stereo image is relative to the left and right
+  edges. When this is the middle of the panner, the stereo image is
+  centered between the left and right outputs. When it all the way to
+  the left, the stereo image collapses to just the left speaker. 
+</p>
+<p>
+  In the bottom half are two signal indicators, one marked "L" and the
+  other "R". The distance between these two shows the width of the
+  stereo image. If the width is reduced to zero, there will only be a
+  single signal indicator marked "M" (for mono), and whose color will
+  change to indicate the special state.
 </p>
 
 <p>
-The default settings for the stereo panner
-are <code>width=100%</code>, <code>position=center</code>. With these
-values it is not possible to alter the position, since the width is
-already spread entirely across both outputs. To alter the position,
-you must first reduce the width.
+  It is possible to invert the outputs (see below) so that whatever
+  would have gone to the right channel goes to the left and vice
+  versa. When this happens, the entire movable part of the panner
+  changes color to indicate clearly that this is the case. 
 </p>
 
-<h4>Using the mouse</h4>
+<h3>Position vs. L/R</h3>
+
+<p>
+  Although the implementation of the panner uses the "position"
+  parameter, when the user interface displays it numerically, it shows a pair of numbers that
+  will be familiar to most audio engineers. 
+</p>
+
+<table>
+<tr><th>Position</th><th>L/R</th><th>English</th></tr>
+<tr><td>0</td><td>L=50% R=50%</td><td>signal image is midway between
+    left and right speakers</td></tr>
+
+<tr><td>-1</td><td>L=100% R=0%</td><td>signal image is entirely
+    at the left speaker </td></tr>
+
+<tr><td>1</td><td>L=0% R=100%</td><td>signal image is entirely
+    at the right speaker</td></tr>
+</table>
+
+<p>
+One way to remember this sort of convention is that the middle of the
+USA is not Kansas, but "Los Angeles: 50% New York: 50%". 
+</p>
+
+<h2>Examples In Use</h2>
+
+<table>
+<tr><th>Appearance</th><th>Settings</th></tr>
+<tr><td><img src="/images/stereo-panner.png"></td><td>Width=100%,
+    L=50 R=50</td></tr>
+<tr><td><img src="/images/stereo-panner-zero.png"></td><td>Width=0%,
+    L=50 R=50</td></tr>
+<tr><td><img src="/images/stereo-panner-inverted.png"></td><td>Width=-100%, Position = 0 (center)</td></tr>
+<tr><td><img src="/images/stereo-panner-right.png"></td><td>Width=36%,
+    L=44 R=56</td></tr>
+<tr><td><img src="/images/stereo-panner-hard-right.png"></td><td>Width=0%,
+    L=0 R=100</td></tr>
+</table>
+
+<h2>Using the mouse</h2>
 
 <p>Mouse operations in the upper half of the panner adjust the position
   parameter, constrained by the current width setting. 
@@ -30,49 +101,50 @@ you must first reduce the width.
   parameter, constrained by the current position setting. 
 </p>
 
-
 <p>To change the position smoothly, press the right button and drag
   within the top half of the panner, then release. The position will
-  be limited by the current width setting.
+  be limited by the current width setting. <em>Note: you do not need
+  to grab the position indicator in order to drag</em>
 </p>
 
 <p>To change the width smoothly, press the right button and drag
   within the lower half of the panner, then release. The width will be
-  limited by the current position setting.
+  limited by the current position setting.<em>Note: you do not need to
+  grab the L/R indicators in order to drag</em>
 </p>
 
 <dl class="faq">
 
 <dt>Reset to defaults</dt>
-<dd>Click <key class="mod3">button 1</key></dd>
+<dd>Click <key class="mod3">right button</key></dd>
 
 <dt>Change to a "hard left"</dt>
-<dd>Double click <key class="mod1">button 1</key> in the upper left half
+<dd>Double click <key class="mod2">right button</key> in the upper left half
   of the panner</dd>
 
 <dt>Change to a "hard right"</dt>
-<dd>Double click <key class="mod1">button 1</key> in the upper right half
+<dd>Double click <key class="mod2">right button</key> in the upper right half
   of the panner</dd>
 
 <dt>Move position as far left as possible, given width</dt>
-<dd>Double click <key>button 1</key> in the upper left half of the
+<dd>Double click <key>right button</key> in the upper left half of the
   panner</dd>
 
 <dt>Move position as far right as possible, given width</dt>
-<dd>Double click <key>button 1</key> in the upper right half of the
+<dd>Double click <key>right button</key> in the upper right half of the
   panner</dd>
 
 <dt>Set the position to center</dt>
-<dd>Click <key>button 1</key> in the upper middle of the panner</dd>
+<dd>Click <key>right button</key> in the upper middle of the panner</dd>
 
-<dt>Reset width to 180&deg; (100%)</dt>
-<dd>Double click <key>button 1</key> on the lower left side</dd>
+<dt>Reset to maximum possible width</dt>
+<dd>Double click <key>right button</key> on the lower left side</dd>
 
-<dt>Reset width to -180&deg; (inverted 100%)</dt>
-<dd>Double click <key>button 1</key> on the lower right side</dd>
+<dt>Invert (flip channel assignments)</dt>
+<dd>Double click <key>right button</key> on the lower right side</dd>
 
 <dt>Set width to 0&deg;</dt>
-<dd>Double click <key>button 1</key> in the lower middle</dd>
+<dd>Double click <key>right button</key> in the lower middle</dd>
 </dl>
 
 <h4>Keyboard bindings</h4>
@@ -81,45 +153,35 @@ When the pointer is within a stereo panner user interface, the following
 keybindings are available to operate on that panner:
 
 <dl>
-<dt><key>&uarr;</key></dt>
-<dd>increase width by 1&deg;</dd>
-<dt><key class="mod1">&uarr;</key></dt>
-<dd>increase width by 5&deg</dd>
-<dt><key>&darr;</key></dt>
-<dd>decrease width by 1&deg;</dd>
-<dt><key class="mod1">&darr;</key></dt>
-<dd>decrease width by 5&deg;</dd>
-<dt><key class="mod2">&uarr;</key></dt>
-<dd>reset width to 180&deg; (100%)</dd>
-<dt><key>&larr;</key></dt>
-<dd>move position 1&deg; to the left</dd>
-<dt><key>&rarr;</key></dt>
-<dd>move position 1&deg to the right</dd>
-<dt><key>0</key></dt>
-<dd>reset position to center</dd>
+  <dt><key>&uarr;</key> / <key class="mod1">&uarr;</key></dt>
+  <dd>increase width by 1&deg; / 5&deg;</dd>
+  <dt><key>&darr;</key> / <key class="mod1">&darr;</key></dt>
+  <dd>decrease width by 1&deg; / 5&deg;</dd>
+  <dt><key>&larr;</key> / <key class="mod1">&larr;</key></dt>
+  <dd>move position 1&deg; / 5&deg; to the left</dd>
+  <dt><key>&rarr;</key> / <key class="mod1">&rarr;</key></dt>
+  <dd>move position 1&deg / 5&deg; to the right</dd>
+  <dt><key>0</key></dt>
+  <dd>reset position to center</dd>
+  <dt><key class="mod2">&uarr;</key></dt>
+  <dd>reset width to 180&deg; (100%)</dd>
 </dl>
 
-<h4>Using the scroll wheel</h4>
+<h4>Using the scroll wheel/touch scroll</h4>
 
 When the pointer is within a stereo panner user interface, the scroll
 wheel may be used as follows:
 
 <dl>
-<dt>scroll left</dt>
-<dd>increase width by 1&deg;</dd>
+<dt>left / <key class="mod1">left</key></dt>
+<dd>increase width by 1&deg; / 5&deg;</dd>
 
-<dt><key class="mod1">scroll left</key></dt>
-<dd>increase width by 5&deg;</dd>
+<dt>right / <key class="mod1">right</key></dt>
+<dd>decrease width by 1&deg; / 5&deg;</dd>
 
-<dt>scroll left</dt>
-<dd>decrease width by 1&deg;</dd>
+<dt>up / <key class="mod1">up</key></dt>
+<dd>move position 1&deg; / 5&deg; to the left</dd>
 
-<dt><key class="mod1">scroll left<key></dt>
-<dd>decrease width by 5&deg;</dd>
-
-<dt>scroll up</dt>
-<dd>move position 1&deg; to the right</dd>
-
-<dt>scroll down</dt>
-<dd>move position 1&deg; to the right</dd>
+<dt>down / <key class="mod1">down</key></dt>
+<dd>move position 1&deg; / 5&deg;to the right</dd>
 </dl>

_manual/17_mixing/02_panning/01_stereo_panner.html~

@@ -1,127 +0,0 @@
----
-layout: default
-title: Stereo Panner
----                        
-
-<h2>Panning</h2>
-
-<h3>Stereo Panner</h3>
-
-<p>
-The stereo panner distributes 2 inputs to 2 outputs. Its behaviour is
-controlled by two parameters, <code>width</code>
-and <code>position</code> (the latter could also be referred to as
-"direction", or "azimuth" without loss of accuracy).
-</p>
-
-<p>
-The default settings for the stereo panner
-are <code>width=100%</code>, <code>position=center</code>. With these
-values it is not possible to alter the position, since the width is
-already spread entirely across both outputs. To alter the position,
-you must first reduce the width.
-</p>
-
-<h4>Using the mouse</h4>
-
-<p>Mouse operations in the upper half of the panner adjust the position
-  parameter, constrained by the current width setting. 
-</p>
-
-<p>Mouse operations in the lower half of the panner adjust the width
-  parameter, constrained by the current position setting. 
-</p>
-
-
-<p>To change the position smoothly, press the right button and drag
-  within the top half of the panner, then release. The position will
-  be limited by the current width setting.
-</p>
-
-<p>To change the width smoothly, press the right button and drag
-  within the lower half of the panner, then release. The width will be
-  limited by the current position setting.
-</p>
-
-<dl class="faq">
-
-<dt>Reset to defaults</dt>
-<dd>Click <key class="mod3">button 1</key></dd>
-
-<dt>Change to a "hard left"</dt>
-<dd>Double click <key class="mod1">button 1</key> in the upper left half
-  of the panner</dd>
-
-<dt>Change to a "hard right"</dt>
-<dd>Double click <key class="mod1">button 1</key> in the upper right half
-  of the panner</dd>
-
-<dt>Move position as far left as possible, given width</dt>
-<dd>Double click <key>button 1</key> in the upper left half of the
-  panner</dd>
-
-<dt>Move position as far right as possible, given width</dt>
-<dd>Double click <key>button 1</key> in the upper right half of the
-  panner</dd>
-
-<dt>Set the position to center</dt>
-<dd>Click <key>button 1</key> in the upper middle of the panner</dd>
-
-<dt>Reset width to 180&deg; (100%)</dt>
-<dd>Double click <key>button 1</key> on the lower left side</dd>
-
-<dt>Reset width to -180&deg; (inverted 100%)</dt>
-<dd>Double click <key>button 1</key> on the lower right side</dd>
-
-<dt>Set width to 0&deg;</dt>
-<dd>Double click <key>button 1</key> in the lower middle</dd>
-</dl>
-
-<h4>Keyboard bindings</h4>
-
-When the pointer is within a stereo panner user interface, the following
-keybindings are available to operate on that panner:
-
-<dl>
-<dt><key>&uarr;</key></dt>
-<dd>increase width by 1&deg;</dd>
-<dt><key class="mod1">&uarr;</key></dt>
-<dd>increase width by 5&deg</dd>
-<dt><key>&darr;</key></dt>
-<dd>decrease width by 1&deg;</dd>
-<dt><key class="mod1">&darr;</key></dt>
-<dd>decrease width by 5&deg;</dd>
-<dt><key class="mod2">&uarr;</key></dt>
-<dd>reset width to 180&deg; (100%)</dd>
-<dt><key>&larr;</key></dt>
-<dd>move position 1&deg; to the left</dd>
-<dt><key>&rarr;</key></dt>
-<dd>move position 1&deg to the right</dd>
-<dt><key>0</key></dt>
-<dd>reset position to center</dd>
-</dl>
-
-<h4>Using the scroll wheel</h4>
-
-When the pointer is within a stereo panner user interface, the scroll
-wheel may be used as follows:
-
-<dl>
-<dt>scroll left</dt>
-<dd>increase width by 1&deg;</dd>
-
-<dt><key class="mod1">scroll left</key></dt>
-<dd>increase width by 5&deg;</dd>
-
-<dt>scroll left</dt>
-<dd>decrease width by 1&deg;</dd>
-
-<dt><key class="mod1">scroll left<key></dt>
-<dd>decrease width by 5&deg;</dd>
-
-<dt>scroll up</dt>
-<dd>move position 1&deg; to the right</dd>
-
-<dt>scroll down</dt>
-<dd>move position 1&deg; to the right</dd>
-</dl>

_manual/17_mixing/02_panning/02_mono_panner.html~

@@ -1,6 +0,0 @@
----
-layout: default
-title: Stereo Panner
----                        
-
-<h2>Stereo Panner</h2>

source/css/app.css

@@ -280,6 +280,10 @@
     content: "Alt-";
 }
 
+.mod3:before {
+    content: "Shift-";
+}
+
 .mod4:before {
     content: "Win-";
 }
@@ -304,6 +308,10 @@
     content: "Ctrl-";
 }
 
+.mac .mod3:before {
+    content: "Shift-";
+}
+
 .mac .mod4:before {
     content: "Opt-";
 }