Visual knob element for Web Audio using Polymer
Pull request Compare This branch is 1 commit ahead, 8 commits behind agektmr:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
img
js
webcomponents
README.md
docs.json
index - Copy.html
index.html
smoke.html
webaudio-knob-kinds.xhtml
webaudio-knob.html

README.md

Polymer Knob Example

Live Demo

http://demo.agektmr.com/polymer/knob/

How to use

  • load polymer.js
  • link to webaudio-knob component
<script src="http://www.polymer-project.org/polymer-all/polymer/polymer.js">
<link rel="import" href="https://raw.github.com/agektmr/webaudio-knob/master/components/knob.html">
  • insert webaudio-knob element
<webaudio-knob src="img/MiniBrute.png" min="-127" max="127" value="0" step="3" diameter="" splites="100"></webaudio-knob>
  • create imperatively
var knob = document.createElement('webaudio-knob');
  • value can be changed by simply dragging up and down
  • with 'shift' key pressed, value changes by 1 (otherwise per step)

Attributes

'min'

description: min value of the knob
default: 0

'max'

description: max value of the knob
default: 127

'value'

description: value of the knob
default: 0

'step'

description: value change steps by moving mouse
default: 3

'splites'

description: number of splites your knob image has
default: 30

'diameter'

description: diameter of single knob
default: 64

'src'

description: path to knob image resource (relative from where you are refering)
default: 'img/org_amp.png'

Events

'change'

description: 'change' event emitted everytime value changes

var knobs = document.getElementsByTagName('webaudio-knob');
for (var i = 0; i < knobs.length; i++) {
  var knob = knobs[i];
  knob.addEventListener('change', function(e) {
    console.log(e.target.value);
  });
}

Creating knob images

  • Go to WebKnobMan
  • 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