preserveMIDILearn

g200kg · Jul 25, 2020 · 0d00071 · 0d00071
1 parent 82b87b5
commit 0d00071
Show file tree

Hide file tree

Showing 10 changed files with 156 additions and 72 deletions.
diff --git a/docs/defaultstyles.md b/docs/defaultstyles.md
@@ -52,9 +52,9 @@ The captured events are displayed on the Events window on the right.
  <span style="position:absolute;left:240px;top:20px">&lt;webaudio-slider&gt;</span>
  <span style="position:absolute;left:370px;top:160px">&lt;webaudio-switch&gt;</span>
  <span style="position:absolute;left:320px;top:210px">&lt;webaudio-keyboard&gt;</span>
- <span style="position:absolute;left:460px;top:50px">toggle(default)</span>
- <span style="position:absolute;left:460px;top:90px">kick</span>
- <span style="position:absolute;left:460px;top:130px">radio</span>
+ <span style="position:absolute;left:465px;top:50px">toggle(default)</span>
+ <span style="position:absolute;left:465px;top:90px">kick</span>
+ <span style="position:absolute;left:465px;top:130px">radio</span>
  <div style="position:absolute;left:48px;top:420px">
  <div id="events" style="background:rgba(128,128,255,0.5);padding:10px;color:#fff;text-align:left;width:400px;height:150px;overflow:scroll"></div>
  </div>

diff --git a/docs/determiningknobsize.md b/docs/determiningknobsize.md
@@ -270,7 +270,8 @@ If the `src` attribute specifies an `image`, and `width`, `height`, and `diamet
 
 If the `src` image and size are specified, the `src` image will be resized to the specified size.
 ```html
-<webaudio-switch src="../knobs/redbutton128.png" diameter="40"></webaudio-switch>
+<webaudio-switch src="../knobs/redbutton128.png" diameter="40">
+</webaudio-switch>
 ```
 
 ---

diff --git a/docs/howitworks.md b/docs/howitworks.md
@@ -121,8 +121,12 @@ for(var i = 0; i < elms.length; ++i){
 <script>
 elms=document.getElementsByTagName("webaudio-switch");
 for(var i=0;i<elms.length;++i){
- elms[i].addEventListener("change",(event)=>{console.log("change", event.target.id, event.target.value)});
- elms[i].addEventListener("click",(event)=>{console.log("click", event.target.id, event.target.value)});
+ elms[i].addEventListener("change",(event)=>{
+ console.log("change", event.target.id, event.target.value)
+ });
+ elms[i].addEventListener("click",(event)=>{
+ console.log("click", event.target.id, event.target.value)
+ });
 }
 </script>
 ```

diff --git a/docs/index.md b/docs/index.md
@@ -95,7 +95,7 @@ Knob/Switch images are from <a href="http:https://www.g200kg.com/en/webknobman/gallery
 ---
 
 <script>
-webAudioControlsMidiManager.addMidiListener(function(event) {
+webAudioControlsWidgetManager.addMidiListener(function(event) {
  var data = event.data;
  var channel = data[0] & 0xf;
  var controlNumber = data[1];

diff --git a/docs/midisupport.md b/docs/midisupport.md
@@ -6,6 +6,7 @@ pageid: MidiSupport
 <script>
  WebAudioControlsOptions={
  useMidi:1,
+ preserveMidiLearn:1,
  };
 </script>
 
@@ -22,21 +23,25 @@ pageid: MidiSupport
 <div>
  <div style="position:relative;background-image: url('../img/bg.png');width:512px;height:240px;margin:30px auto;padding:0px;">
   <webaudio-knob id="knob1" midilearn="1" midicc="1.1" style="position:absolute;left:48px;top:76px" src="../knobs/LittlePhatty.png" value="50" step="1" diameter="64" tooltip="Knob1 tooltip %d"></webaudio-knob>
-  <webaudio-knob midilearn="1" midicc="8.7" style="position:absolute;left:128px;top:76px" src="../knobs/LittlePhatty.png" value="1" min="0" max="3" step="0.01" diameter="64" sprites="100" tooltip="Knob2 tooltip <br/> %.2f Hz" conv="(x)=>{return Math.pow(10,x)*20}"></webaudio-knob>
-  <webaudio-knob midilearn="1" midicc="1.22" id="knob3" style="position:absolute;left:232px;top:48px" src="../knobs/vernier.png" value="30" max="100" step="1" diameter="128" sprites="50" valuetip="0" tooltip="Knob3"></webaudio-knob>
+  <webaudio-knob id="knob2" midilearn="1" midicc="8.7" style="position:absolute;left:128px;top:76px" src="../knobs/LittlePhatty.png" value="1" min="0" max="3" step="0.01" diameter="64" sprites="100" tooltip="Knob2 tooltip <br/> %.2f Hz" conv="(x)=>{return Math.pow(10,x)*20}"></webaudio-knob>
+  <webaudio-knob id="knob3" midilearn="1" midicc="1.22" style="position:absolute;left:232px;top:48px" src="../knobs/vernier.png" value="30" max="100" step="1" diameter="128" sprites="50" valuetip="0" tooltip="Knob3"></webaudio-knob>
   <webaudio-param style="position:absolute;left:328px;top:162px" link="knob3"></webaudio-param>
-  <webaudio-slider midilearn="1" midicc="1.23" style="position:absolute;left:368px;top:24px" src="../img/vsliderbody.png" knobsrc="../img/vsliderknob.png" value="0" min="0" max="100" step="1" basewidth="24" baseheight="128" knobwidth="24" knobheight="24" ditchLength="100" tooltip="Slider-L"></webaudio-slider>
-  <webaudio-slider midilearn="1" midicc="1.24" style="position:absolute;left:400px;top:24px" src="../img/vsliderbody.png" knobsrc="../img/vsliderknob.png" value="0" min="0" max="100" step="1" basewidth="24" baseheight="128" knobwidth="24" knobheight="24" ditchLength="100" units="%" tooltip="Slider-R"></webaudio-slider>
-  <webaudio-switch midilearn="1" style="position:absolute;left:440px;top:38px" src="../knobs/switch_toggle.png" value="0" height="56" width="56" tooltip="Switch-A Tooltip text test"></webaudio-switch>
-  <webaudio-switch midilearn="1" style="position:absolute;left:440px;top:102px" src="../knobs/switch_toggle.png" value="0" height="56" width="56" tooltip="Switch-B"></webaudio-switch>
+  <webaudio-slider id="sli1" midilearn="1" midicc="1.23" style="position:absolute;left:368px;top:24px" src="../img/vsliderbody.png" knobsrc="../img/vsliderknob.png" value="0" min="0" max="100" step="1" basewidth="24" baseheight="128" knobwidth="24" knobheight="24" ditchLength="100" tooltip="Slider-L"></webaudio-slider>
+  <webaudio-slider id="sli2" midilearn="1" midicc="1.24" style="position:absolute;left:400px;top:24px" src="../img/vsliderbody.png" knobsrc="../img/vsliderknob.png" value="0" min="0" max="100" step="1" basewidth="24" baseheight="128" knobwidth="24" knobheight="24" ditchLength="100" units="%" tooltip="Slider-R"></webaudio-slider>
+  <webaudio-switch id="sw1" midilearn="1" style="position:absolute;left:440px;top:38px" src="../knobs/switch_toggle.png" value="0" height="56" width="56" tooltip="Switch-A Tooltip text test"></webaudio-switch>
+  <webaudio-switch id="sw2" midilearn="1" style="position:absolute;left:440px;top:102px" src="../knobs/switch_toggle.png" value="0" height="56" width="56" tooltip="Switch-B"></webaudio-switch>
  </div>
 </div>
 
 To enable MIDI related functions, specify `useMidi:1` in `WebAudioControlsOptions` before loading `webaudio-controls.js`. 
+In addition, define `preserveMidiLearn:1` to retain the result of MIDI learn on next access. If you do not define this, the results of MIDI learn will be discarded when reloaded. 
+
+Technically speaking, the results of MIDI learn are kept in WebAudioControlsMidiLearn in localStorage. If you want to force discard the result of MIDI learn, remove it from your Javascript program.
 
 ```html
 <script>WebAudioControlsOptions = {
  useMidi:1,
+ preserveMidiLearn:1,
 }</script>
 <script src="webaudio-controls.js"></script>
 ```
@@ -61,17 +66,19 @@ Example: associate a knob with a controller on channel 7, cc number 7:
 ```
 
 **External midi event listener (hook)** : 
- You can also declare in your HTML file your own midi event listener (for example for listening to program changes events): use the `webAudioControlsMidiManager` object, that comes with an `addMidiListener` method. Like that you will benefit from the MIDI code included in the webaudio-controls. Here is an example (also, look at the source code of this page, and open the devtool console to see midi messages received by the hook at the end of the HTML file).
+ You can also declare in your HTML file your own midi event listener (for example for listening to program changes events): use the `webAudioControlsWidgetManager` object (Formerly known as `webAudioControlsMidiManager`, it is also available under this name), that comes with an `addMidiListener` method. Like that you will benefit from the MIDI code included in the webaudio-controls. Here is an example (also, look at the source code of this page, and open the devtool console to see midi messages received by the hook at the end of the HTML file).
 
 ```html
 <script>
 // add this to your html page that uses webaudiocontrols
-webAudioControlsMidiManager.addMidiListener(function(event) {
+webAudioControlsWidgetManager.addMidiListener(function(event) {
  var data = event.data;
  var channel = data[0] & 0xf;
  var controlNumber = data[1];
 
- console.log("Midi event hook: data:[" + data + "] channel:" + channel + " cc:"+controlNumber);
+ console.log(
+ "Midi event hook: data:[" + data + "] channel:" 
+ + channel + " cc:"+controlNumber);
 
  // do whatever you want with the event
  // ...
@@ -80,13 +87,14 @@ webAudioControlsMidiManager.addMidiListener(function(event) {
 ```
 
 Demo at: 
- [https://wasabi.i3s.unice.fr/AmpSimFA/](https://wasabi.i3s.unice.fr/AmpSimFA/) and at [https://wasabi.i3s.unice.fr/AmpSimFA/sample1.html](https://wasabi.i3s.unice.fr/AmpSimFA/sample1.html)
+ [https://wasabi.i3s.unice.fr/AmpSimFA/](https://wasabi.i3s.unice.fr/AmpSimFA/) 
+ and at [https://wasabi.i3s.unice.fr/AmpSimFA/sample1.html](https://wasabi.i3s.unice.fr/AmpSimFA/sample1.html)
 
 
 ---
 
 <script>
-webAudioControlsMidiManager.addMidiListener(function(event) {
+webAudioControlsWidgetManager.addMidiListener(function(event) {
  var data = event.data;
  var channel = data[0] & 0xf;
  var controlNumber = data[1];

diff --git a/docs/multitouch.md b/docs/multitouch.md
@@ -73,10 +73,14 @@ The MIDI function can be controlled by right-clicking each element to display a
 ---
 
 ```html
- <webaudio-slider width="50" height="300" midicc="0.0" midilearn="1"></webaudio-slider>
- <webaudio-slider width="50" height="300" midicc="0.1" midilearn="1"></webaudio-slider>
- <webaudio-slider width="50" height="300" midicc="0.2" midilearn="1"></webaudio-slider>
- <webaudio-slider width="50" height="300" midicc="0.3" midilearn="1"></webaudio-slider>
+ <webaudio-slider width="50" height="300" midicc="0.0" midilearn="1">
+ </webaudio-slider>
+ <webaudio-slider width="50" height="300" midicc="0.1" midilearn="1">
+ </webaudio-slider>
+ <webaudio-slider width="50" height="300" midicc="0.2" midilearn="1">
+ </webaudio-slider>
+ <webaudio-slider width="50" height="300" midicc="0.3" midilearn="1">
+ </webaudio-slider>
  .
  .
  .

diff --git a/docs/nonlinear.md b/docs/nonlinear.md
@@ -104,8 +104,10 @@ function valueconv(x){
  return (x/1000).toFixed(2) + " kHz";
 }
 </script>
-<webaudio-knob id="knob2" valuetip="1" min="0" max="100" conv="valueconv"></webaudio-knob>
-<webaudio-param link="knob2" width="80"></webaudio-param>
+<webaudio-knob id="knob2" valuetip="1" min="0" max="100" conv="valueconv">
+</webaudio-knob>
+<webaudio-param link="knob2" width="80">
+</webaudio-param>
 ```
 
 ---
diff --git a/docs/resizetest.md b/docs/resizetest.md
@@ -71,18 +71,28 @@ Size :
 
 ## Slider
 Size :
-<button onclick="$('#sl1')[0].height=50;$('#sl1')[0].width=10">Small</button>
-<button onclick="$('#sl1')[0].height=100;$('#sl1')[0].width=20">Mid</button>
-<button onclick="$('#sl1')[0].height=200;$('#sl1')[0].width=40">Large</button> 
-<webaudio-slider id="sl1" height="100" width="20"></webaudio-slider> 
+<button onclick="$('#sl1')[0].height=50;$('#sl1')[0].width=10">
+ Small
+</button>
+<button onclick="$('#sl1')[0].height=100;$('#sl1')[0].width=40">
+ Mid
+</button>
+<button onclick="$('#sl1')[0].height=200;$('#sl1')[0].width=80">
+ Large
+</button> 
+<webaudio-slider id="sl1" height="100" width="20">
+</webaudio-slider> 
 
 <br/>
 
 ```html
-<button onclick="$('#sl1')[0].height=50;$('#sl1')[0].width=10">Small</button>
-<button onclick="$('#sl1')[0].height=100;$('#sl1')[0].width=20">Mid</button>
-<button onclick="$('#sl1')[0].height=200;$('#sl1')[0].width=40">Large</button> 
-<webaudio-slider id="sl1" height="100" width="20"></webaudio-slider> 
+<button onclick="$('#sl1')[0].height=50;$('#sl1')[0].width=10">
+ Small</button>
+<button onclick="$('#sl1')[0].height=100;$('#sl1')[0].width=40">
+ Mid</button>
+<button onclick="$('#sl1')[0].height=200;$('#sl1')[0].width=80">
+ Large</button> 
+<webaudio-slider id="sl1" height="100" width="40"></webaudio-slider> 
 ```
 
 <br/>
@@ -99,9 +109,12 @@ Size :
 <br/>
 
 ```html
-<button onclick="$('#sw1')[0].height=25;$('#sw1')[0].width=25">Small</button>
-<button onclick="$('#sw1')[0].height=50;$('#sw1')[0].width=50">Mid</button>
-<button onclick="$('#sw1')[0].height=100;$('#sw1')[0].width=100">Large</button> 
+<button onclick="$('#sw1')[0].height=25;$('#sw1')[0].width=25">
+ Small</button>
+<button onclick="$('#sw1')[0].height=50;$('#sw1')[0].width=50">
+ Mid</button>
+<button onclick="$('#sw1')[0].height=100;$('#sw1')[0].width=100">
+ Large</button> 
 <webaudio-switch id="sw1" height="50" width="50"></webaudio-switch>
 ```
 
@@ -125,9 +138,12 @@ Keys :
 
 ```html
 Size :
-<button onclick="$('#kb1')[0].width=100;$('#kb1')[0].height=20;">Small</button>
-<button onclick="$('#kb1')[0].width=200;$('#kb1')[0].height=40;">Mid</button>
-<button onclick="$('#kb1')[0].width=400;$('#kb1')[0].height=80;">Large</button> 
+<button onclick="$('#kb1')[0].width=100;$('#kb1')[0].height=20;">
+ Small</button>
+<button onclick="$('#kb1')[0].width=200;$('#kb1')[0].height=40;">
+ Mid</button>
+<button onclick="$('#kb1')[0].width=400;$('#kb1')[0].height=80;">
+ Large</button> 
 Keys :
 <button onclick="$('#kb1')[0].keys=13;">13 Keys</button>
 <button onclick="$('#kb1')[0].keys=25;">25 Keys</button>

diff --git a/docs/webaudiocontrolsoptions.md b/docs/webaudiocontrolsoptions.md
@@ -35,30 +35,31 @@ The items that can be set are as follows
 
 name | default | description
 ------------|---------|----------------
-useMidi |0 | enable control from midi devices
-midilearn |0 | enable midilearn function for each knobs/sliders/switches
-outline |0 | border display when focused
+useMidi |0 | If `1`, enable control from midi devices.
+midilearn |0 | If `1`, enable midilearn function for each knobs/sliders/switches.
+preserveMidiLearn|0 | If `1`, save the MIDI learn result in localStorage and maintain when the next access.
+outline |0 | Outline style when focused. Specify detail like `"1px solid #ff8888"` or `"1"` for default `"1px solid #ccc"` style.
 valuetip |0 | valuetip display
 knobWidth |null | width for knobs
 knobHeight |null | height for knobs
 knobDiameter|64 | diameter for knobs
 knobSrc |null | knob image source
 knobSprites |null | knob image number of frames
-knobColors |"#e00;#000;#fff"| color setting for knobs
+knobColors |`"#e00;#000;#fff"`| color setting for knobs
 sliderWidth |24 | width for sliders
 sliderHeight|128 | height for sliders
 sliderSrc |null | background image of sliders
 sliderKnobWidth|0 | width of the slider thumb
 sliderKnobHeight|0 | height of the slider thumb
 sliderKnobSrc|null | image of the slider thumb
-sliderColors|"#e00;#333;#fcc"| color setting for sliders
+sliderColors|`"#e00;#333;#fcc"`| color setting for sliders
 switchWidth |0 | width for switches
 switchHeight|0 | height for switches
 switchDiameter|24 | diameter for switches
-switchColors|"#e00;#000;#fcc"| color setting for switches
+switchColors|`"#e00;#000;#fcc"`| color setting for switches
 paramWidth |32 | width for param
 paramHeight |20 | height for param
 paramSrc |null | param background image source
-paramColors |"#fff;#000"| color setting for param
+paramColors |`"#fff;#000"`| color setting for param
 
 ---