move files

g200kg · Jul 24, 2020 · cd18449 · cd18449
1 parent 6e6106e
commit cd18449
Show file tree

Hide file tree

Showing 28 changed files with 480 additions and 1,059 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,7 @@
+# jekyll
+_site/
+Gemfile.lock
+
 # bower
 bower_components/
 !bower_components/polymer/LICENSE.txt

diff --git a/Gemfile b/Gemfile
@@ -0,0 +1,3 @@
+source 'https://rubygems.org'
+gem 'github-pages', group: :jekyll_plugins
+gem 'jekyll-redirect-from'
diff --git a/_config.yml b/_config.yml
@@ -1 +1,3 @@
-theme: jekyll-theme-midnight
+theme: jekyll-theme-midnight
+plugins:
+ - jekyll-redirect-from
diff --git a/example.md → docs/attributesexamples.md b/example.md → docs/attributesexamples.md
@@ -1,3 +1,6 @@
+---
+pageid: AttributesExamples
+---
 <link rel="stylesheet" href="./docstyle.css">
 
 <script>
@@ -6,32 +9,9 @@
  };
 </script>
 
-<script src="./webaudio-controls.js"></script>
-
-Basic Usage :
-<div style="display:flex;width:100%;flex-wrap:wrap">
-<div class="item"><a href="./index.html">Overview</a></div>
-<div class="item"><a href="./install.html">Install</a></div>
-<div class="item"><a href="./components.html">How it works</a></div>
-<div class="item"><a href="./specs.html">Attributes, Functions, Events</a></div>
-<div class="item"><a href="./options.html">WebAudioControlsOptions</a></div>
-<div class="item"><a href="./knobimage.html">Creating Knob Images</a></div>
-<div class="item"><a href="./defstyle.html">Default Style of Controls</a></div>
-<div class="item cur"><a href="./example.html">Examples of Various Attributes</a></div>
-</div>
-<br/>
-
-Advanced Usage and Application Notes :
-<div style="display:flex;width:100%;flex-wrap:wrap">
-<div class="item"><a href="./knobsamples.html">Knob Samples from KnobGallery</a></div>
-<div class="item"><a href="./keyboard.html">Working Keyboard Demo</a></div>
-<div class="item"><a href="./knobsize.html">Determining Knob Size</a></div>
-<div class="item"><a href="./tracking.html">Slider tracking "rel" and "abs"</a></div>
-<div class="item"><a href="./nonlinear.html">Non-Linear Knobs / Sliders</a></div>
-<div class="item"><a href="./multifader.html">Multi-Touch Device Support</a></div>
-<div class="item"><a href="./midisupport.html">MIDI Support</a></div>
-<div class="item"><a href="./resizetest.html">Resizing After Creation</a></div>
-</div>
+<script src="../webaudio-controls.js"></script>
+
+{% include_relative gnavi.html %}
 
 ---
 
@@ -73,48 +53,48 @@ Examples of color variation by `colors` attribute.
 An external Knob image-file can be assigned by the `src` attribute. 
 Also, specify the range of the value in `min`/`max`. The initial value is "60". The value is changed in `step` of "20". 
 
-<webaudio-knob id="knob3" src="./knobs/LittlePhatty.png"
+<webaudio-knob id="knob3" src="../knobs/LittlePhatty.png"
  sprites="100" value="60" min="-100" max="100" step="20" diameter="64" valuetip="1"></webaudio-knob>
 
 ```html
  <webaudio-knob id="knb3"
- src="./knobs/LittlePhatty.png" diameter="64"
+ src="../knobs/LittlePhatty.png" diameter="64"
  sprites="100" value="60"
  min="-100" max="100" step="20">
  </webaudio-knob>
 ```
 
 The knob image will be resized to specified size (even recommended to prepare required size image for clear display). 
 
-<webaudio-knob id="knb4" src="./knobs/LittlePhatty.png" sprites="100" diameter="32"></webaudio-knob><br/>
+<webaudio-knob id="knb4" src="../knobs/LittlePhatty.png" sprites="100" diameter="32"></webaudio-knob><br/>
 
 ```html
  <webaudio-knob id="knb4"
- src="./knobs/LittlePhatty.png" diameter="32"
+ src="../knobs/LittlePhatty.png" diameter="32"
  sprites="100">
  </webaudio-knob>
 ```
 
 Non-square image can be used with specifying `width`/`height` instead of diameter. 
 
-<webaudio-knob id="knb5" src="./img/hsw5.png" sprites="4" value="2" min="0" max="4" width="128" height="32"></webaudio-knob><br/>
+<webaudio-knob id="knb5" src="../img/hsw5.png" sprites="4" value="2" min="0" max="4" width="128" height="32"></webaudio-knob><br/>
 
 ```html
  <webaudio-knob id="knb5" 
- src="./img/hsw5.png" sprites="4" 
+ src="../img/hsw5.png" sprites="4" 
  width="128" height="32"
  value="2" min="0" max="4">
  </webaudio-knob>
 ```
 
 `webaudio-knob` can has tooltip-text and editable parameter display field with `webaudio-param`. 
 
-<webaudio-knob id="knb6" src="./knobs/LittlePhatty.png" sprites="100" diameter="64" valuetip="0" tooltip="Knob Test : %s"></webaudio-knob>
+<webaudio-knob id="knb6" src="../knobs/LittlePhatty.png" sprites="100" diameter="64" valuetip="0" tooltip="Knob Test : %s"></webaudio-knob>
 <webaudio-param link="knb6"></webaudio-param><br/>
 
 ```html
  <webaudio-knob id="knb6"
- src="./knobs/LittlePhatty.png"
+ src="../knobs/LittlePhatty.png"
  sprites="100" diameter="64"
  tooltip="Knob Test %s">
  </webaudio-knob>
@@ -154,24 +134,24 @@ These are examples of color variation by `colors` attribute :
 
 If you specify a slider background image and a thumb image, it will look like this.
 
-<webaudio-slider id="sli3" direction="horz" src="./img/hsliderbody.png" knobsrc="./img/hsliderknob.png"></webaudio-slider><br/>
+<webaudio-slider id="sli3" direction="horz" src="../img/hsliderbody.png" knobsrc="../img/hsliderknob.png"></webaudio-slider><br/>
 
 ```html
  <webaudio-slider id="sli3" direction="horz"
- src="./img/hsliderbody.png"
- knobsrc="./img/hsliderknob.png">
+ src="../img/hsliderbody.png"
+ knobsrc="../img/hsliderknob.png">
  </webaudio-slider>
 ```
 
 Value step is specified, resized, tooltip-text and webaudio-param are added. 
 
-<webaudio-slider id="sli4" direction="horz" src="./img/hsliderbody.png" knobsrc="./img/hsliderknob.png" min="0" max="1" step="0.1" width="60" height="20" valuetip="0" tooltip="Slider Test"></webaudio-slider>
+<webaudio-slider id="sli4" direction="horz" src="../img/hsliderbody.png" knobsrc="../img/hsliderknob.png" min="0" max="1" step="0.1" width="60" height="20" valuetip="0" tooltip="Slider Test"></webaudio-slider>
 <webaudio-param link="sli4"></webaudio-param><br/>
 
 ```html
  <webaudio-slider id="sli4" direction="horz"
- src="./img/hsliderbody.png"
- knobsrc="./img/hsliderknob.png"
+ src="../img/hsliderbody.png"
+ knobsrc="../img/hsliderknob.png"
  min="0" max="1" step="0.1"
  width="60" height="20"
  tooltip="Slider Test">
@@ -206,49 +186,49 @@ An example of color variation by `colors` attribute.
 
 This is an example when a background image file is specified by `src` attribute. If the size is not specified, the image will be displayed at its original size, but if the `width` and `height` are specified, the image will be resized.
 
-<webaudio-switch id="sw3a" src="./knobs/switch_toggle.png" width="32" height="32"></webaudio-switch>
-<webaudio-switch id="sw3b" src="./knobs/switch_toggle.png" width="64" height="64"></webaudio-switch> 
+<webaudio-switch id="sw3a" src="../knobs/switch_toggle.png" width="32" height="32"></webaudio-switch>
+<webaudio-switch id="sw3b" src="../knobs/switch_toggle.png" width="64" height="64"></webaudio-switch> 
 
 ```html
- <webaudio-switch id="sw3a" src="./knobs/switch_toggle.png"
+ <webaudio-switch id="sw3a" src="../knobs/switch_toggle.png"
  width="32" height="32">
  </webaudio-switch>
- <webaudio-switch id="sw3b" src="./knobs/switch_toggle.png"
+ <webaudio-switch id="sw3b" src="../knobs/switch_toggle.png"
  width="64" height="64">
  </webaudio-switch>
 ```
 
 This is a 'kick' type switch. This switch is 'on' only while pressing. 
 
-<webaudio-switch id="sw4" src="./knobs/switch_toggle.png" type="kick" width="54" height="54"></webaudio-switch> 
+<webaudio-switch id="sw4" src="../knobs/switch_toggle.png" type="kick" width="54" height="54"></webaudio-switch> 
 
 ```html
  <webaudio-switch id="sw4"
  type="kick" 
- src="./knobs/switch_toggle.png"
+ src="../knobs/switch_toggle.png"
  width="54" height="54">
  </webaudio-switch>
 ```
 
 These are 'radio' type switches. In this mode, only one switch is activated in the group. A group is composed of those that match the `group` attribute. 
 
-<webaudio-switch id="sw5a" src="./knobs/switch_toggle.png" type="radio" group="radio1" width="54" height="54" invert="1" value="1" tooltip="Radio-A"></webaudio-switch>
-<webaudio-switch id="sw5b" src="./knobs/switch_toggle.png" type="radio" group="radio1" width="54" height="54" invert="1" tooltip="Radio-B"></webaudio-switch>
-<webaudio-switch id="sw5c" src="./knobs/switch_toggle.png" type="radio" group="radio1" width="54" height="54" invert="1" tooltip="Radio-C"></webaudio-switch><br/>
+<webaudio-switch id="sw5a" src="../knobs/switch_toggle.png" type="radio" group="radio1" width="54" height="54" invert="1" value="1" tooltip="Radio-A"></webaudio-switch>
+<webaudio-switch id="sw5b" src="../knobs/switch_toggle.png" type="radio" group="radio1" width="54" height="54" invert="1" tooltip="Radio-B"></webaudio-switch>
+<webaudio-switch id="sw5c" src="../knobs/switch_toggle.png" type="radio" group="radio1" width="54" height="54" invert="1" tooltip="Radio-C"></webaudio-switch><br/>
 
 ```html
  <webaudio-switch id="sw5a"
- src="./knobs/switch_toggle.png"
+ src="../knobs/switch_toggle.png"
  type="radio" group="radio1"
  width="54" height="54" invert="1" value="1" tooltip="Radio-A">
  </webaudio-switch>
  <webaudio-switch id="sw5b"
- src="./knobs/switch_toggle.png"
+ src="../knobs/switch_toggle.png"
  type="radio" group="radio1"
  width="54" height="54" invert="1" tooltip="Radio-B">
  </webaudio-switch>
  <webaudio-switch id="sw5c"
- src="./knobs/switch_toggle.png"
+ src="../knobs/switch_toggle.png"
  type="radio" group="radio1"
  width="54" height="54" invert="1" tooltip="Radio-C">
  </webaudio-switch>

diff --git a/docs/creatingknobimages.md b/docs/creatingknobimages.md
@@ -0,0 +1,49 @@
+---
+pageid: CreatingKnobImages
+---
+<link rel="stylesheet" href="./docstyle.css">
+
+<script>
+ WebAudioControlsOptions={
+
+ };
+</script>
+
+<script src="../webaudio-controls.js"></script>
+
+{% include_relative gnavi.html %}
+
+---
+
+## Creating knob images
+webaudio-knob with sprites attribute is `0` use a single frame knob image that indicate center position.
+For example, 
+
+![](../img/testknob.png) 
+
+This image will be rotated from -135deg to +135deg. This approach will works well if the image is flat designed, but more complex animation (for example, drop-shadowed, highlighted or something elastic) will need pre-rendered frame-by-frame animation as below.
+
+webaudio-knob (with non zero "sprites") use a vertical 'stitched' multi-frames animation image, and webaudio-switch use a vertical 'stitched' two-frames animation image.
+For example, 
+
+![](../img/LittlePhatty_sample.png)
+![](../img/switch_toggle.png) 
+
+This knob example has only 5 frames but it should has more frames for smooth animation. I recommend to use JKnobMan / WebKnobMan for making these stitched images,
+
+- [JKnobMan](http:https://www.g200kg.com/en/software/knobman.html) -- Java based Knob image creation tool.
+- [WebKnobMan](http:https://www.g200kg.com/en/webknobman/) -- WebApp version of the JknobMan
+- [KnobGallery](http:https://www.g200kg.com/en/webknobman/gallery.php) -- knob data sharing space
+
+---
+
+Here is a brief instruction to export knob-image from KnobGallery
+
+- Go to [KnobGallery](http:https://www.g200kg.com/en/webknobman/gallery.php)
+- Find your favorite knob design and click 'Open with WebKnobMan'
+- Click on 'Export' to download `png` file
+- Of course, you can create your own!
+
+**Note: comply with license requirements**
+
+---
diff --git a/defstyle.md → docs/defaultstyles.md b/defstyle.md → docs/defaultstyles.md
@@ -1,3 +1,6 @@
+---
+pageid: DefaultStyles
+---
 <link rel="stylesheet" href="./docstyle.css">
 
 <script>
@@ -6,32 +9,9 @@
  };
 </script>
 
-<script src="./webaudio-controls.js"></script>
+<script src="../webaudio-controls.js"></script>
 
-Basic Usage :
-<div style="display:flex;width:100%;flex-wrap:wrap">
-<div class="item"><a href="./index.html">Overview</a></div>
-<div class="item"><a href="./install.html">Install</a></div>
-<div class="item"><a href="./components.html">How it works</a></div>
-<div class="item"><a href="./specs.html">Attributes, Functions, Events</a></div>
-<div class="item"><a href="./options.html">WebAudioControlsOptions</a></div>
-<div class="item"><a href="./knobimage.html">Creating Knob Images</a></div>
-<div class="item cur"><a href="./defstyle.html">Default Style of Controls</a></div>
-<div class="item"><a href="./example.html">Examples of Various Attributes</a></div>
-</div>
-<br/>
-
-Advanced Usage and Application Notes :
-<div style="display:flex;width:100%;flex-wrap:wrap">
-<div class="item"><a href="./knobsamples.html">Knob Samples from KnobGallery</a></div>
-<div class="item"><a href="./keyboard.html">Working Keyboard Demo</a></div>
-<div class="item"><a href="./knobsize.html">Determining Knob Size</a></div>
-<div class="item"><a href="./tracking.html">Slider tracking "rel" and "abs"</a></div>
-<div class="item"><a href="./nonlinear.html">Non-Linear Knobs / Sliders</a></div>
-<div class="item"><a href="./multifader.html">Multi-Touch Device Support</a></div>
-<div class="item"><a href="./midisupport.html">MIDI Support</a></div>
-<div class="item"><a href="./resizetest.html">Resizing After Creation</a></div>
-</div>
+{% include_relative gnavi.html %}
 
 ---
 

diff --git a/specs.md → docs/detailspecs.md b/specs.md → docs/detailspecs.md
@@ -1,3 +1,6 @@
+---
+pageid: DetailSpecs
+---
 <link rel="stylesheet" href="./docstyle.css">
 
 <script>
@@ -6,32 +9,9 @@
  };
 </script>
 
-<script src="./webaudio-controls.js"></script>
-
-Basic Usage :
-<div style="display:flex;width:100%;flex-wrap:wrap">
-<div class="item"><a href="./index.html">Overview</a></div>
-<div class="item"><a href="./install.html">Install</a></div>
-<div class="item"><a href="./components.html">How it works</a></div>
-<div class="item cur"><a href="./specs.html">Attributes, Functions, Events</a></div>
-<div class="item"><a href="./options.html">WebAudioControlsOptions</a></div>
-<div class="item"><a href="./knobimage.html">Creating Knob Images</a></div>
-<div class="item"><a href="./defstyle.html">Default Style of Controls</a></div>
-<div class="item"><a href="./example.html">Examples of Various Attributes</a></div>
-</div>
-<br/>
-
-Advanced Usage and Application Note :
-<div style="display:flex;width:100%;flex-wrap:wrap">
-<div class="item"><a href="./knobsamples.html">Knob Samples from KnobGallery</a></div>
-<div class="item"><a href="./keyboard.html">Working Keyboard Demo</a></div>
-<div class="item"><a href="./knobsize.html">Determining Knob Size</a></div>
-<div class="item"><a href="./tracking.html">Slider tracking "rel" and "abs"</a></div>
-<div class="item"><a href="./nonlinear.html">Non-Linear Knobs / Sliders</a></div>
-<div class="item"><a href="./multifader.html">Multi-Touch Device Support</a></div>
-<div class="item"><a href="./midisupport.html">MIDI Support</a></div>
-<div class="item"><a href="./resizetest.html">Resizing After Creation</a></div>
-</div>
+<script src="../webaudio-controls.js"></script>
+
+{% include_relative gnavi.html %}
 
 ---