UI

[devongovett]

Sorry about the wait on this. If I remember correctly, you need something that looks like one of those digital tuners that shows what note you're playing, the percentage error, and how loud you're playing. Did I miss anything?

Questions:

• The percentage error will be plus or minus a percentage (0 to 100) or plus or minus a decimal (0 to 1)?
• How will I get the volume? By decibels, some sort of percentage for the meter or what?
• How will I get the note? Just a string representing the note name (A, Bb, or C#) or something else?

Let me know, and I'll get coding! :)

[jussi-kalliokoski]

Nope, you didn't miss anything, except that it could have some analog flavor to it as well, but that's your call. ;)

Answers:

• Decimals, from -1.0 to 1.0
• Yes, decibels, as -Infinity to 0.0 where anything above zero is clipping.
• Hmm, probably C#3, Bb2, etc.

[devongovett]

OK, assuming the numbers after the note names are the octaves on a standard piano?

[jussi-kalliokoski]

Yes, according to the MIDI numbering scheme: {A0: 27.5Hz, A4: 440Hz}

[devongovett]

Alright, so this isn't totally done yet, but I thought I'd show a work in progress and get some feedback. Here's what I've got so far:

Obviously I'm still working on finding a place to put what octave of the note is being played as well as the volume here, but as you can see, the general idea is that the wheel of notes rotates so that the note being played is pointed at by the green arrow. When the note isn't in tune the arrow will look grayish instead of green and either the sharp or flat sign will light up in red to highlight which direction it is off in, and the difference from the actual pitch is shown by the rotation of the wheel (the arrow will point between notes). Obviously the actual frequency will be displayed in the digital screen at the bottom. The "pitch.js" text will probably not be there. :)

Questions:

1. Of course this has to be integrated into the rest of a page. What were you envisioning that would look like? Kinda like the codecs pages?
2. Where should the volume meter go?
3. Where should the octave be represented? Should it be represented, or is the frequency enough? I kinda think it should...

Let me know what you think!

[devongovett]

Alternatively, here's a version with a crack at showing the octave. I think volume isn't actually really necessary or that useful to show here, but octave is for most people who don't know the frequencies off hand. :)

Might be a little crowded... Thoughts?

[jussi-kalliokoski]

Actually, if the UI is going to be like that, it's probably simplest if the only input it takes is the frequency. The rest are pretty easily derived from that, let's assume the note wheel's angle is in radians and at zero, it's C:

function getNote (frequency, reference) {
    if (!frequency) return null;

    reference = reference || 440;

    return 69 + 12 * Math.log(frequency / reference) / Math.LN2;
}

function getAngle (midiNote) {
    return midiTone ? Math.PI * (midiNote % 12) / 6 : 0;
}

function getOctave (midiNote) {
    return ~~(midiNote / 12);
}

[devongovett]

Widget mockup:

[jussi-kalliokoski]

A repo for the demo.

To curious outsiders: don't worry, the repo will become open as soon as we release the Kraken!

[devongovett]

404'ing for me too... Should we just put the UI in a folder on this repo?

[jussi-kalliokoski]

The permissions should be fixed now!

[devongovett]

OK, awesome. Pushed. Closing this issue now. Resume tracking on that repo.