Structure Prototypes
DigiBachJS-I.js is the most important file for the whole applet. For each individual data point, HTML is automatically generated and placed into page and functionality is created specific for those elements. Really, whatever HTML is present on the page is just a skeleton to be built into by this code. There are a few details about this project that made programming it this way necessary:
- Huge dataset of ~1000
- Certain "partner" elements needed to be intrinsically linked (ie album button and data point)
- For any given performer under a piece, their element needed to be linked to a specific audio file.
Part of what makes this possible is having a predictable naming convention for variables, objects, and filenames. The Piano menu only actually changes three variables, then calling upon a separate function to then adjust what's visible based on them. Since all elements have predicable Classes and ID's, it becomes easy for the applet to show exactly what was intended.
Score Images: function scoreFile(composer, piece, form, number, chroma, chromatrans, key, note, attackMULT)
Performer and Editor Data: function audioFile(OnOff, composer, piece, PerfvsEdit, performer, note, palmerData, data, attackRate, form, chroma, key, instrument, volume, position)
Scatterplot Data: function scatterPoint(composer, piece, form, chroma, chromanote, key, aRate, pHeight)
This prototype's purpose is to create HTML img tags, and create the Tempo and Attack Axis.
It also puts in the Tempo "note" that floats on top of each pieces plot, signifying what the common note duration is.
this.putinNote Looks at the note input variable and converts it into a text note ♩ depending on what it is.
this.createScore
Creates tags under the given piece (placed into the .scoreContainer element) and attaches the image source url. Since file names and locations are predictable, this url is constructed automatically.
this.insertAAxis Uses HTML Canvas to create the Attack axis image for that specific score. This is the axis on the right-hand side. A separate one for each piece is necessary because the axis is scaled differently for each piece (depending on the input variable attackMULT). This also allows the axis to only go as high as it is needed.
this.insertTAxis Same as insertAAxis, uses HTML Canvas to create the Attack axis image for that specific score. This is the axis on the right-hand side. A separate one for each piece is necessary because the axis is scaled differently for each piece (depending on the input variable attackMULT). This also allows the axis to only go as high as it is needed.
This prototypes purpose is to take the data called upon and inject it into the applet, creating a lot of HTML and defining a lot of javascript functionality. The first chunk is spent defining variables that will later be used for ID's and Classes.
this.name Builds naming system of the form "Bach_WTC1_Tureck_Prelude_11_Minor". This is used to call on this object later, grab the audio file, and more.
this.initialize Creates the actual button and assigns it it's default classes in it's specified 'spot'.
this.dataInitialize Creates data point, inserts data into "folders" inside. It changes the class of the data point depending on if it's a harpsichord, piano, or editor. Note that in the future this "styling" was meant to by dynamic and not hard-coded like this
The if-statement makes it so if the input variable OnOff is Off for that datapoint, then it skips out on the next chunk of programming and is styled as a "blackDot". It skips this.play, this.autoEnable, and this.fX.
this.play Creates a function for this specific element (that's linked between the album button and datapoint) so that when the button is clicked, the function playPiece is called with that specific URL for the audio file.
this.autoEnable Assigns a click function to the specific element so that everytime it's clicked, the variable menuPERFORMER is changed to the performers assigned classname (eg it becomes "cTureck").
this.fX
Adds click and hover effects that are linked between the specific element (so that if you hover or click either the data point or album button, both intrinsically linked elements show the effects. The if statement for iOS if ( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) removes the hover effect under iOS devices because of the stupid way Apple handles clicking... They make it so that if there is a hover effect present, tapping on the element once shows that hover effect, and tapping twice finally clicks.
Note that this is where the if OnOff statement ends. The name of this object is added into a list_of_files that will be iterated on later to do all this magic.
this.toolTIPS This adds in the data into a tooltip within the datapoint (it was appended in this.dataInitialization) and creates a hover effect so that it shows up.
Similar to the audioFile prototype, this takes in data and creates hover, click effects, and tooltips. The main difference is that clicking a point here changes the menu variables. Also, since these points do not move, they can be placed within here.
