From 565498f5a71a8703cf7171f7413d549840c446db Mon Sep 17 00:00:00 2001 From: Eiji Kitamura Date: Fri, 16 May 2014 23:34:00 +0900 Subject: [PATCH] README tweak --- README.md | 38 +++++++++++++++++++++----------------- 1 file changed, 21 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 0b2de0e..7f49da2 100644 --- a/README.md +++ b/README.md @@ -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 @@ -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) + + +- link to webaudio-knob etc. component + - insert `webaudio-knob/slider/switch/param/keyboard` element -> <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 @@ -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,