Skip to content

Commit

Permalink
README tweak
Browse files Browse the repository at this point in the history
  • Loading branch information
Eiji Kitamura committed May 16, 2014
1 parent a46e03e commit 565498f
Showing 1 changed file with 21 additions and 17 deletions.
38 changes: 21 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,18 @@ webaudio-keyboard | Mouse/Touch playable keyboard. multi-touch support.
Chrome / Firefox / Safari / Opera / IE compatible
iOS and Android touch devices compatible

[Live Demo sample1 (with external image-files)](https://rawgithub.com/g200kg/webaudio-controls/master/sample1.html)
[Live Demo sample2 (with code example)](https://rawgithub.com/g200kg/webaudio-controls/master/sample2.html)
[Live Demo sample3 (Knob/Slider/Switch/Param/Keyboard default style)](https://rawgithub.com/g200kg/webaudio-controls/master/sample3.html)
[Live Demo sample4 (webaudio-keyboard to webMIDIAPI)](https://rawgithub.com/g200kg/webaudio-controls/master/sample4.html)
[Live Demo sample1 (with external image-files)](https://rawgithub.com/WebMusicDevelopersJP/webaudio-controls/master/sample1.html)
[Live Demo sample2 (with code example)](https://rawgithub.com/WebMusicDevelopersJP/webaudio-controls/master/sample2.html)
[Live Demo sample3 (Knob/Slider/Switch/Param/Keyboard default style)](https://rawgithub.com/WebMusicDevelopersJP/webaudio-controls/master/sample3.html)
[Live Demo sample4 (webaudio-keyboard to webMIDIAPI)](https://rawgithub.com/WebMusicDevelopersJP/webaudio-controls/master/sample4.html)
(need Mac+ChromeCanary+flagEnabled+MIDIdevice or Win+JazzPlugin or Mac+JazzPlugin+MidiDevice)
[Renoid : Practical application using webaudio-controls](http://www.g200kg.com/renoid/)

Using with external image-files.
[![](img/demo.png)](https://rawgithub.com/g200kg/webaudio-controls/master/sample1.html)
[![](img/demo.png)](https://rawgithub.com/WebMusicDevelopersJP/webaudio-controls/master/sample1.html)

Default style with no external image-files.
[![](img/sample3.png)](https://rawgithub.com/g200kg/webaudio-controls/master/sample3.html)
[![](img/sample3.png)](https://rawgithub.com/WebMusicDevelopersJP/webaudio-controls/master/sample3.html)

## To Operate
Operation | Component | Description
Expand All @@ -44,18 +44,22 @@ Operation | Component | Description
---
## How to use

- load polymer.js
> <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.0.20130816/polymer.min.js"></script>
- bower install
cd webcomponents
bower install

- link to webaudio-knob component
> <link rel="import" href="components/controls.html" >
- load platform.js (polymer.js will be included inside webaudio-controls.html)
<script src="platform/platform.js"></script>

- link to webaudio-knob etc. component
<link rel="import" href="webcomponents/webaudio-controls.html">

- insert `webaudio-knob/slider/switch/param/keyboard` element
> &lt;webaudio-knob src="img/LittlePhatty.png" sprites="100" min="0" max="100"&gt;&lt;/webaudio-knob&gt;
> &lt;webaudio-slider src="img/hsliderbody.png"&gt;&lt;/webaudio-slider&gt;
> &lt;webaudio-switch src="img/switch_toggle.png" width="32" height="32"&gt;&lt;/webaudio-switch&gt;
> &lt;webaudio-param src="" link="knob-1"&gt;&lt;/webaudio-param&gt;
> &lt;webaudio-keyboard keys="25" &gt;&lt;/webaudio-keyboard&gt;
<webaudio-knob src="img/LittlePhatty.png" sprites="100" min="0" max="100"></webaudio-knob>
<webaudio-slider src="img/hsliderbody.png"></webaudio-slider>
<webaudio-switch src="img/switch_toggle.png" width="32" height="32"></webaudio-switch>
<webaudio-param src="" link="knob-1"></webaudio-param>
<webaudio-keyboard keys="25" ></webaudio-keyboard>

---
## Attributes
Expand Down Expand Up @@ -198,8 +202,8 @@ This image will be rotated from -135deg to +135deg. This approach will works wel

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,
![](https://raw.github.com/g200kg/webaudio-controls/master/img/LittlePhatty_sample.png)
![](https://raw.github.com/g200kg/webaudio-controls/master/img/switch_toggle.png)
![](https://raw.github.com/WebMusicDevelopersJP/webaudio-controls/master/img/LittlePhatty_sample.png)
![](https://raw.github.com/WebMusicDevelopersJP/webaudio-controls/master/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,

Expand Down

0 comments on commit 565498f

Please sign in to comment.