webaudio-controls

GUI parts library for Web application using WebComponents

---

Project maintained by g200kg Hosted on GitHub Pages — Theme by mattgraham

Basic Usage :

• Overview
• Install
• How it works
• Detail&Specs
• WebAudioControlsOptions
• Creating Knob Images
• Default Styles
• Attributes Examples

Advanced Usage and Application Notes :

• Knob Samples from KnobGallery
• Working Keyboard Demo
• Determining Knob Size
• Slider tracking "rel" and "abs"
• Non-Linear Knobs / Sliders
• Multi-Touch Device Support
• MIDI Support
• Resizing After Creation

---

Creating knob images

webaudio-knob with sprites attribute is 0 use a single frame knob image that indicate center position. For example,

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,

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 – Java based Knob image creation tool.
• WebKnobMan – WebApp version of the JknobMan
• KnobGallery – knob data sharing space

---

Here is a brief instruction to export knob-image from KnobGallery

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

---