For this assignment (Adobe Gen Pro App Design course, Jun 2015, Class 4), we were to create a simple Wheel of Fortune app in Brackets and PhoneGap following the tutorial by Mark Shufflebottom (https://vimeo.com/126309355). We were to try to design it so a user could pick it up on sight (“Don’t Make Me Think!”), yet provide multiple outcomes in the form of a 16-segment circular image that rotates on a tap or swipe and then stops at a randomly selected segment. Our instructors also asked us to consider how we might use such an app in the classroom.

 

Being a musician, I considered how I could use the app to teach music. I thought it would be fun for both teachers and students (especially younger students) to have an app help create random melodies. I locked onto that thought and then transformed the Wheel of Fortune app into a random melody maker.

 

The skinny: When you start up the app, it shows a clean design with the app name, a partial wheel segmented into various music notes and symbols, an arrow that points at the active segment, and a Help button. If you swipe left, the wheel rotates clockwise to a randomly selected segment. Press the arrow: If the segment refers to a note, the app will play that tone; if not a note, the app will suggest something related, such as “choose a rest.” Press the Help button, and a popup tells you all of the above, and in addition suggests that you write down the sequence as it progresses and then either sing it or play it back on a keyboard when you have finished. (I did not have time to investigate how to get the app to record. That would be the next step.)

 

Sound simple? Ha. Simple designs that actually work often have a Hemi under the hood to make it appear that way.

 

(Notes: This post provides only partial code for this project. I assume the reader will view the tutorial and then understand the changes I have made. Also, Mark S. provided the original images.)

Creating the wheel took the first third of my project time.

 

1) In Photoshop, I surrounded the tutorial wheel image using a circular marquee, inverted the selection, and deleted all of the extra baggage that the tutorial image carried with it.

 

2) I created four template layers: A letter for the note name (Arial font), and a note, staff lines, and a ledger line for the music symbols (Finale’s Maestro font).

 

3) I created a segment “identifier” by copying all four templates, adjusting their content (such as the note’s letter name or whether the note stem points up or down) and positions (such as where the note sits on the staff), and then grouping them into a single Smart Object.

 

4) I copied that Smart Object to other Smart Objects and used Edit Contents to create each individual segment identifier. I created enough of these (13) to make a complete chromatic octave from C to C.

 

5) I overlaid the wheel with a circle object, placed and rotated each identifier in its respective segment, and set the top edge of each identifier flush with the circle to create an overall aligned, uniform appearance. I chose three non-note symbols to fill the remaining segments and placed them as simple text objects. I set all 16 segments in counterclockwise order such that they generally run three notes up the scale followed by a non-note symbol. I then hid the circular “guide.”

 

6) I filled each segment background with the appropriate color. Segments referring to white notes (on a keyboard) became white. Those referring to black notes became a very dark grey (so I could retain the segment lines, which are black). Those referring to non-note symbols became a decreasing intensity of red (dark red, burnt orange, yellow) around the circle. The wheel is basically a circular keyboard.

 

7) I filled the center circle with a gradient that passes through all three of the non-note colors, to make the entire wheel appear more cohesive.

 

8) I saved the image as PNG, to keep the outer transparency.

I wanted to help the user figure out how to work the app, but with as little clutter as possible. The tutorial app builds instructions into the design, such as stating “Tap to Spin” at the top. I considered keeping that idea, but where would I then put the remaining instructions? Rather than fill up my beautiful black space with words, I opted to KISS and provide only a clearly labeled Help button for when the user is unable to figure it out unaided. This also freed up the header area for the app name.

 

I first tried out a simple <p> element with the word “Help,” which when tapped would display an Alert through a jQuery tap event. However, I didn’t like the word “Alert” showing up at the top of what is supposed to be a “Help” dialog. “Alert! You have Help!” sounds a bit too strong for a user to have to bear. Unfortunately, after researching a way to change “Alert” to a different word, I discovered from numerous posts that it is simply not possible, and this by design to dissuade evil hackers.

 

Fortunately, these same doomsday posts also suggested an alternative: popup messages. I went to the jQuery Mobile Demo pages, found a simple popup solution, and implemented it. I think it works nicely.

The tutorial explains how the wheel spins to a random segment, so I post here only a summary: A tap (or a swipe) triggers a jQuery event. The event handler calls Math.random() to select a random number from 0 to 1. It then multiplies it by 16 (there are 16 segments), retrieves the integer portion via Math.floor(), and multiplies the result by 22.5 (360 degrees divided by 16 segments) to determine how many degrees to rotate. It adds this to 11.25 so that the rotation always lands in the middle of a segment and not on a black line. It finally uses CSS transform and rotate to rotate the wheel.

I wanted the user to be able to play the tone corresponding to a note segment. For example, if the user lands on the “C” segment, it should play a C. If the user lands on the “Ab” segment, it should play an Ab. How to tell the app which segment is which?

 

I use two facts to resolve this issue.

 

1) I know exactly which degree corresponds to which segment. For example, I know that the “C” segment is the first segment, and that the value 11.25 or any 360-multiple added to 11.25 will take the wheel there. I also know that “G” is the 10th segment, and that the value 213.75 or any 360-multiple added to 213.75 will take the wheel there. And so on.

 

2) I know that rotate ignores 360-multiples, as discussed above.

 

So I simply use one variable to track the total number of degrees rotated (which can be infinite, and rotate will still know what to do), and I assign another variable to ride alongside the first but which always subtracts 360 whenever it goes over. The first variable will always tell the app where to rotate, and always clockwise. The second variable will always tell the app which segment is active.

 

I could then use a switch statement to tell the app what to do with whatever segment is active, based on the second variable’s segment-identifying value.

Playing audio presented a far greater challenge than I expected. I have previously taken a course in HTML and JavaScript, and there I successfully recreated the textbook’s examples of how to implement the HTML5 <audio> tag. I tried the same thing in my app, and it failed miserably.

 

I spent some sleep researching the problem, and although I never did find out why my textbook’s solution would not work, I did find a solution that works. It creates an <audio> element, as well as an event handler, on the fly as the page loads. All I had left to do then was change the src audio file, depending on the switch result for the current segment, and then play it.

 

I recorded the sound samples from Finale 2014. I created a new sheet music document, added a single measure with two beats, added a quarter note, and exported it as an MP3 file. I then opened the audio file in my WavePad sound editor and cropped off the end silence so the total playback time is 0.8s. To create each of the other audio files, I changed the note in Finale, re-exported to MP3, and re-cropped.

I wanted the user to be able to incorporate other music elements into the melody, such as rests and dynamics. I had three segments available, so I arbitrarily chose a quarter rest and two dynamics (forte and piano). I then added Alerts that inform the user respectively to choose some type of rest or to make the melody loud or soft at that point in the sequence.

 

If I had more time, I would try to find a non-Alert solution similar to that for the popup Help button. However, this class ends in less than two weeks! What I have done will have to do for now.