<commit_before># webaudio-controls

**WebAudioControls** is GUI parts library for Web application using [Polymer] WebComponents.  
Especially suitable for audio-applications like VST plugins.  

**WebAudioControls** is consist of following components  

Component | Description 
---|---
webaudio-knob | Rotating or some other frame-by-frame animation knob
webaudio-slider | Vertical or Horizontal slider
webaudio-switch | Toggle/Kick/Radio switches
webaudio-param | Editable value display field
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/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/WebMusicDevelopersJP/webaudio-controls/master/sample1.html)  

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

## To Operate  
Operation | Component | Description
---|---|---
**Click** | Switch/Param | toggle / activate the switch or focus the param
**Drag** | Knob/Slider | up/right to increase value / down/left to decrease value
**Shift+Drag** | Knob/Slider | fine control
**Ctrl+Click / Command+Click(Mac)** | Knob/Slider/Switch | set to default value
**Edit with Keyboard** | Param | edit the value directly
**MouseWheel** | Knob/Slider | rotate upward to increase value / downward to decrease value
**Shift+MouseWheel** | Knob/Slider | fine control
**Mouse Button Press / Touch** | Keyboard | play keyboard. multi-touch is supported

---
## How to use

- bower install

    cd webcomponents
    bower install

- 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

    <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

### webaudio-knob
<commit_msg>README tweak<commit_after># webaudio-controls

**WebAudioControls** is GUI parts library for Web application using [Polymer] WebComponents.  
Especially suitable for audio-applications like VST plugins.  

**WebAudioControls** is consist of following components  

Component | Description 
---|---
webaudio-knob | Rotating or some other frame-by-frame animation knob
webaudio-slider | Vertical or Horizontal slider
webaudio-switch | Toggle/Kick/Radio switches
webaudio-param | Editable value display field
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/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/WebMusicDevelopersJP/webaudio-controls/master/sample1.html)  

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

## To Operate  
Operation | Component | Description
---|---|---
**Click** | Switch/Param | toggle / activate the switch or focus the param
**Drag** | Knob/Slider | up/right to increase value / down/left to decrease value
**Shift+Drag** | Knob/Slider | fine control
**Ctrl+Click / Command+Click(Mac)** | Knob/Slider/Switch | set to default value
**Edit with Keyboard** | Param | edit the value directly
**MouseWheel** | Knob/Slider | rotate upward to increase value / downward to decrease value
**Shift+MouseWheel** | Knob/Slider | fine control
**Mouse Button Press / Touch** | Keyboard | play keyboard. multi-touch is supported

---
## How to use

- bower install

```
    cd webcomponents  
    bower install
```

- 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

```
    <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

### webaudio-knob

{'fraction_non_alphanumeric': 0.13099601593625498, 'fraction_numerical': 0.008924302788844622, 'mean_word_length': 4.664259927797834, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 29, 'https://': 12, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 12, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2027343', 'n_tokens_mistral': 2053, 'n_tokens_neox': 1887, 'n_words': 465}