WIP 20121204 - GUI galore

screenshot of sorollet.js UI

The example I posted a week ago wasn't specially user friendly, so I've mostly worked on improving the interaction and the display of synth settings. For this I've written some custom GUI widgets but basically it's knobs and a graphical representation of the volume and pitch envelopes. Now it is easier to understand what affects what. If you don't believe me, compare the current version with the old one :-)

I also wrote a very simple Keyboard GUI that not only tells you which keys correspond to which notes, but also lets you click on it to trigger notes. This helped me improve the keyboard handling, as I was capturing ALL keyboard presses and that wasn't an specially good practice. Now the example will only capture key presses if you're focused on the Keyboard widget.

I'm also notoriously clumsy when it comes to GUI programming, so please be slightly forgetful if you find interaction issues. Better yet, send me a patch or a pull request with the fix for the issue, so I can learn from you!

Oh and I believe I've also fixed the mysterious issue of the sound stopping randomly. It happened because of a confirmed Chrome bug, but one of the workarounds in the issue page worked well. Yay!

I still have many things to polish. Stay tuned--or play with the synth meanwhile!