From 01c9699f185c234f5d8fcc5483a94ccf87df887f Mon Sep 17 00:00:00 2001 From: ricknjacky Date: Tue, 26 Jan 2021 01:26:19 +0530 Subject: [PATCH 1/3] Prototype function to class Bugfix-1 Bugfix ratios Bugfix for Ui elements --- js/widgets/temperament.js | 819 +++++++++++++++++++------------------- 1 file changed, 412 insertions(+), 407 deletions(-) diff --git a/js/widgets/temperament.js b/js/widgets/temperament.js index 3e3fb140a1..832e702dca 100644 --- a/js/widgets/temperament.js +++ b/js/widgets/temperament.js @@ -9,32 +9,36 @@ // License along with this library; if not, write to the Free Software // Foundation, 51 Franklin Street, Suite 500 Boston, MA 02110-1335 USA -function TemperamentWidget() { - const BUTTONDIVWIDTH = 430; - const OUTERWINDOWWIDTH = 685; - const INNERWINDOWWIDTH = 600; - const BUTTONSIZE = 53; - const ICONSIZE = 32; - let temperamentTableDiv = document.createElement("div"); - let temperamentCell = null; - this.inTemperament = null; - this.lastTriggered = null; - this.notes = []; - this.frequencies = []; - this.intervals = []; - this.ratios = []; - this.scale = []; - this.cents = []; - this.scaleNotes = []; - this.pitchNumber = 0; - this.circleIsVisible = true; - this.playbackForward = true; +const temperamentTableDiv = document.createElement("div"); +let temperamentCell = null; + +class TemperamentWidget { + static BUTTONDIVWIDTH = 430; + static OUTERWINDOWWIDTH = 685; + static INNERWINDOWWIDTH = 600; + static BUTTONSIZE = 53; + static ICONSIZE = 32; + constructor(){ + this.inTemperament = null; + this.lastTriggered = null; + this.notes = []; + this.frequencies = []; + this.intervals = []; + this.ratios = []; + this.scale = []; + this.cents = []; + this.scaleNotes = []; + this.pitchNumber = 0; + this.circleIsVisible = true; + this.playbackForward = true; + } + /** * @deprecated */ - this._addButton = function(row, icon, iconSize, label) { - let cell = row.insertCell(-1); + _addButton (row, icon, iconSize, label) { + const cell = row.insertCell(-1); cell.innerHTML = '    '; - cell.style.width = BUTTONSIZE + "px"; + cell.style.width = TemperamentWidget.BUTTONSIZE + "px"; cell.style.minWidth = cell.style.width; cell.style.maxWidth = cell.style.width; cell.style.height = cell.style.width; @@ -55,18 +59,18 @@ function TemperamentWidget() { cell.style.maxHeight = cell.style.height; cell.style.backgroundColor = platformColor.selectorBackground; - cell.onmouseover = function() { - this.style.backgroundColor = platformColor.selectorBackgroundHOVER; + cell.onmouseover = (event) => { + event.target.style.backgroundColor = platformColor.selectorBackgroundHOVER; }; - cell.onmouseout = function() { - this.style.backgroundColor = platformColor.selectorBackground; + cell.onmouseout = (event) => { + event.target.style.backgroundColor = platformColor.selectorBackground; }; return cell; }; - this._circleOfNotes = function() { + _circleOfNotes () { this.circleIsVisible = false; this.toggleNotesButton(); temperamentTableDiv.style.display = "inline"; @@ -76,15 +80,15 @@ function TemperamentWidget() { temperamentTableDiv.style.backgroundColor = "white"; temperamentTableDiv.style.height = "300px"; temperamentTableDiv.innerHTML = '
'; - let temperamentTable = docById("temperamentTable"); + const temperamentTable = docById("temperamentTable"); temperamentTable.style.position = "relative"; - let radius = 150; - let height = 2 * radius + 60; + const radius = 150; + const height = 2 * radius + 60; let html = '
Done
'; - docById("frequencySlider1").oninput = function() { + docById("frequencySlider1").oninput = () => { let frequency, ratio, labels, ratioDifference; docById("frequencydiv1").innerHTML = docById( "frequencySlider1" ).value; frequency = docById("frequencySlider1").value; - ratio = frequency / that.frequencies[0]; + ratio = frequency / this.frequencies[0]; labels = []; ratioDifference = []; - that.temporaryRatios = that.ratios.slice(); - that.temporaryRatios[i] = ratio; - that._logo.resetSynth(0); - that._logo.synth.trigger( + this.temporaryRatios = this.ratios.slice(); + this.temporaryRatios[i] = ratio; + logo.resetSynth(0); + logo.synth.trigger( 0, frequency, Singer.defaultBPMFactor * 0.01, "electronic synth", null, null ); - that.createMainWheel(that.temporaryRatios); + this.createMainWheel(this.temporaryRatios); }; - docById("done").onclick = function() { + docById("done").onclick = () =>{ let frequency1; - that.ratios = that.temporaryRatios.slice(); - that.typeOfEdit = "nonequal"; - that.createMainWheel(); - frequency1 = that.frequencies[0]; - that.frequencies = []; - for (let j = 0; j < that.ratios.length; j++) { - that.frequencies[j] = that.ratios[j] * frequency1; - that.frequencies[j] = that.frequencies[j].toFixed(2); + this.ratios = this.temporaryRatios.slice(); + this.typeOfEdit = "nonequal"; + this.createMainWheel(); + frequency1 = this.frequencies[0]; + this.frequencies = []; + for (let j = 0; j < this.ratios.length; j++) { + this.frequencies[j] = this.ratios[j] * frequency1; + this.frequencies[j] = this.frequencies[j].toFixed(2); } - that.checkTemperament(that.ratios); + this.checkTemperament(this.ratios); docById("noteInfo").remove(); }; - docById("close").onclick = function() { - that.temporaryRatios = that.ratios.slice(); - that.createMainWheel(); + docById("close").onclick = () =>{ + this.temporaryRatios = this.ratios.slice(); + this.createMainWheel(); docById("noteInfo").remove(); }; }; - this._graphOfNotes = function() { + _graphOfNotes () { this.circleIsVisible = true; this.toggleNotesButton(); temperamentTableDiv.innerHTML = ""; @@ -508,8 +512,8 @@ function TemperamentWidget() { '
'; docById("tableOfNotes").innerHTML = pitchNumberColumn; - let startingPitch = this._logo.synth.startingPitch; - let that = this; + let startingPitch = logo.synth.startingPitch; + let notesRow = []; let notesCell = []; let noteToPlay = []; @@ -531,23 +535,23 @@ function TemperamentWidget() { platformColor.selectorBackground; notesCell[(i, 0)].style.textAlign = "center"; - notesCell[(i, 0)].onmouseover = function() { - this.style.backgroundColor = + notesCell[(i, 0)].onmouseover = (event) => { + event.target.style.backgroundColor = platformColor.selectorBackgroundHOVER; }; - notesCell[(i, 0)].onmouseout = function() { - this.style.backgroundColor = platformColor.selectorBackground; + notesCell[(i, 0)].onmouseout = () => { + event.target.style.backgroundColor = platformColor.selectorBackground; }; playImage = docById("play_" + i); - playImage.onmouseover = function(event) { - this.style.cursor = "pointer"; + playImage.onmouseover = (event) => { + event.target.style.cursor = "pointer"; }; - playImage.onclick = function(event) { - that.playNote(event.target.dataset.id); + playImage.onclick = (event) => { + this.playNote(event.target.dataset.id); }; //Pitch Number @@ -621,11 +625,11 @@ function TemperamentWidget() { } }; - this.edit = function() { + edit () { this.editMode = null ; - this._logo.synth.setMasterVolume(0); - this._logo.synth.stop(); - let that = this; + logo.synth.setMasterVolume(0); + logo.synth.stop(); + if (docById("wheelDiv2") != null) { docById("wheelDiv2").style.display = "none"; this.notesCircle.removeWheel(); @@ -633,7 +637,7 @@ function TemperamentWidget() { temperamentTableDiv.innerHTML = ""; temperamentTableDiv.innerHTML = '
'; let editMenus = ["Equal", "Ratios", "Arbitrary", "Octave Space"]; let menus = ""; @@ -656,40 +660,40 @@ function TemperamentWidget() { menuItems[0].style.background = "#c8C8C8"; this.equalEdit(); - menuItems[0].onclick = function(event) { + menuItems[0].onclick = (event) => { menuItems[1].style.background = platformColor.selectorBackground; menuItems[2].style.background = platformColor.selectorBackground; menuItems[3].style.background = platformColor.selectorBackground; menuItems[0].style.background = "#c8C8C8"; - that.equalEdit(); + this.equalEdit(); }; - menuItems[1].onclick = function(event) { + menuItems[1].onclick = (event) => { menuItems[0].style.background = platformColor.selectorBackground; menuItems[2].style.background = platformColor.selectorBackground; menuItems[3].style.background = platformColor.selectorBackground; menuItems[1].style.background = "#c8C8C8"; - that.ratioEdit(); + this.ratioEdit(); }; - menuItems[2].onclick = function(event) { + menuItems[2].onclick = (event) => { menuItems[0].style.background = platformColor.selectorBackground; menuItems[1].style.background = platformColor.selectorBackground; menuItems[3].style.background = platformColor.selectorBackground; menuItems[2].style.background = "#c8C8C8"; - that.arbitraryEdit(); + this.arbitraryEdit(); }; - menuItems[3].onclick = function(event) { + menuItems[3].onclick = (event) => { menuItems[0].style.background = platformColor.selectorBackground; menuItems[1].style.background = platformColor.selectorBackground; menuItems[2].style.background = platformColor.selectorBackground; menuItems[3].style.background = "#c8C8C8"; - that.octaveSpaceEdit(); + this.octaveSpaceEdit(); }; }; - this.equalEdit = function() { + equalEdit () { this.editMode = "equal"; docById("userEdit").innerHTML = ""; let equalEdit = docById("userEdit"); @@ -701,9 +705,9 @@ function TemperamentWidget() { this.pitchNumber + '">'; equalEdit.style.paddingLeft = "80px"; - let that = this; + - function addDivision(preview) { + const addDivision = (preview) => { // Add Buttons let divAppend = document.createElement("div"); divAppend.id = "divAppend"; @@ -736,8 +740,8 @@ function TemperamentWidget() { addDivision(false); - divAppend.onmouseover = function() { - this.style.cursor = "pointer"; + divAppend.onmouseover = (event) => { + event.target.style.cursor = "pointer"; }; let pitchNumber = this.pitchNumber; @@ -753,11 +757,11 @@ function TemperamentWidget() { let index = []; this.tempRatios = []; - divAppend.addEventListener("click", function(event) { - that.performEqualEdit(event); + divAppend.addEventListener("click", (event) => { + performEqualEdit(event); }); - this.performEqualEdit = function(event) { + const performEqualEdit = (event) => { let angle1, angle2, divisionAngle, power, frequency; pitchNumber1 = Number(docById("octaveIn").value); pitchNumber2 = Number(docById("octaveOut").value); @@ -772,7 +776,7 @@ function TemperamentWidget() { ratio2[i] = this.tempRatios[i]; ratio2[i] = ratio2[i].toFixed(2); } - ratio4 = ratio1.filter(function(val) { + ratio4 = ratio1.filter((val) => { return ratio2.indexOf(val) == -1; }); @@ -782,7 +786,7 @@ function TemperamentWidget() { } this.tempRatios = this.tempRatios.concat(ratio3); - this.tempRatios.sort(function(a, b) { + this.tempRatios.sort((a, b) => { return a - b; }); pitchNumber = this.tempRatios.length - 1; @@ -855,43 +859,43 @@ function TemperamentWidget() { docById("preview").style.marginLeft = "80px"; //make temperary - ratios = this.tempRatios.slice(); + this.ratios = this.tempRatios.slice(); frequency = this.frequencies[0]; this.eqTempHzs = []; for (let i = 0; i <= pitchNumber; i++) { - this.eqTempHzs[i] = ratios[i] * frequency; + this.eqTempHzs[i] = this.ratios[i] * frequency; this.eqTempHzs[i] = this.eqTempHzs[i].toFixed(2); } this.eqTempPitchNumber = pitchNumber; this.checkTemperament(compareRatios); - docById("done_").onclick = function() { + docById("done_").onclick = () =>{ //Go to main Circle of Notes - that.ratios = that.tempRatios.slice(); - frequency = that.frequencies[0]; - that.frequencies = []; + this.ratios = this.tempRatios.slice(); + frequency = this.frequencies[0]; + this.frequencies = []; for (let i = 0; i <= pitchNumber; i++) { - that.frequencies[i] = that.ratios[i] * frequency; - that.frequencies[i] = that.frequencies[i].toFixed(2); + this.frequencies[i] = this.ratios[i] * frequency; + this.frequencies[i] = this.frequencies[i].toFixed(2); } - that.pitchNumber = pitchNumber; - that.eqTempPitchNumber = null ; - that.eqTempHzs = [] ; - that.checkTemperament(compareRatios); - that._circleOfNotes(); + this.pitchNumber = pitchNumber; + this.eqTempPitchNumber = null ; + this.eqTempHzs = [] ; + this.checkTemperament(compareRatios); + this._circleOfNotes(); }; - docById("preview").onclick = function() { - that.equalEdit(); - that.eqTempPitchNumber = null ; - that.eqTempHzs = [] ; + docById("preview").onclick = () =>{ + this.equalEdit(); + this.eqTempPitchNumber = null ; + this.eqTempHzs = [] ; }; } }; }; - this.ratioEdit = function() { + ratioEdit () { this.editMode = "ratio"; docById("userEdit").innerHTML = ""; let ratioEdit = docById("userEdit"); @@ -901,9 +905,9 @@ function TemperamentWidget() { ratioEdit.innerHTML += 'Recursion        '; ratioEdit.style.paddingLeft = "100px"; - let that = this; + - function addButtons(preview) { + const addButtons = (preview) => { let divAppend = document.createElement("div"); divAppend.id = "divAppend"; if (preview) { @@ -935,15 +939,15 @@ function TemperamentWidget() { addButtons(false); - divAppend.onmouseover = function() { - this.style.cursor = "pointer"; + divAppend.onmouseover = (event) => { + event.target.style.cursor = "pointer"; }; - divAppend.onclick = function(event) { + divAppend.onclick = (event) => { let input1 = docById("ratioIn").value; let input2 = docById("ratioOut").value; let recursion = docById("recursion").value; - let len = that.frequencies.length; + let len = this.frequencies.length; let ratio1 = input1 / input2; let ratio = []; let frequency = []; @@ -951,126 +955,126 @@ function TemperamentWidget() { let ratioDifference = []; let index = []; let compareRatios = []; - that.tempRatios = that.ratios.slice(); + this.tempRatios = this.ratios.slice(); - calculateRatios = function(i) { - if (frequency[i] < that.frequencies[len - 1]) { - for (let j = 0; j < that.tempRatios.length; j++) { - ratioDifference[j] = ratio[i] - that.tempRatios[j]; + const calculateRatios = (i) => { + if (frequency[i] < this.frequencies[len - 1]) { + for (let j = 0; j < this.tempRatios.length; j++) { + ratioDifference[j] = ratio[i] - this.tempRatios[j]; if (ratioDifference[j] < 0) { index.push(j); - that.tempRatios.splice(index[i], 0, ratio[i]); + this.tempRatios.splice(index[i], 0, ratio[i]); break; } if (ratioDifference[j] == 0) { index.push(j); - that.tempRatios.splice(index[i], 1, ratio[i]); + this.tempRatios.splice(index[i], 1, ratio[i]); break; } } } else { ratio[i] = ratio[i] / 2; - frequency[i] = that.frequencies[0] * ratio[i]; + frequency[i] = this.frequencies[0] * ratio[i]; calculateRatios(i); } }; for (let i = 0; i < recursion; i++) { ratio[i] = Math.pow(ratio1, i + 1); - frequency[i] = that.frequencies[0] * ratio[i]; + frequency[i] = this.frequencies[0] * ratio[i]; calculateRatios(i); } - that.tempRatios.sort(function(a, b) { + this.tempRatios.sort((a, b) => { return a - b; }); - let pitchNumber = that.tempRatios.length - 1; + let pitchNumber = this.tempRatios.length - 1; if (event.target.innerHTML == "Done") { - that.ratios = that.tempRatios.slice(); - that.typeOfEdit = "nonequal"; - that.pitchNumber = that.ratios.length - 1; - frequency1 = that.frequencies[0]; - that.frequencies = []; - for (let i = 0; i <= that.pitchNumber; i++) { - that.frequencies[i] = that.ratios[i] * frequency1; - that.frequencies[i] = that.frequencies[i].toFixed(2); + this.ratios = this.tempRatios.slice(); + this.typeOfEdit = "nonequal"; + this.pitchNumber = this.ratios.length - 1; + frequency1 = this.frequencies[0]; + this.frequencies = []; + for (let i = 0; i <= this.pitchNumber; i++) { + this.frequencies[i] = this.ratios[i] * frequency1; + this.frequencies[i] = this.frequencies[i].toFixed(2); } - for (let i = 0; i < that.ratios.length; i++) { - compareRatios[i] = that.ratios[i]; + for (let i = 0; i < this.ratios.length; i++) { + compareRatios[i] = this.ratios[i]; compareRatios[i] = compareRatios[i].toFixed(2); } - that.checkTemperament(compareRatios); - that._circleOfNotes(); + this.checkTemperament(compareRatios); + this._circleOfNotes(); } else if (event.target.innerHTML == "Preview") { //Preview Notes docById("userEdit").innerHTML = '
'; - that.createMainWheel(that.tempRatios, pitchNumber); + this.createMainWheel(this.tempRatios, pitchNumber); for (let i = 0; i < pitchNumber; i++) { - that.notesCircle.navItems[i].fillAttr = "#e0e0e0"; - that.notesCircle.navItems[i].sliceHoverAttr.fill = + this.notesCircle.navItems[i].fillAttr = "#e0e0e0"; + this.notesCircle.navItems[i].sliceHoverAttr.fill = "#e0e0e0"; - that.notesCircle.navItems[i].slicePathAttr.fill = "#e0e0e0"; - that.notesCircle.navItems[i].sliceSelectedAttr.fill = + this.notesCircle.navItems[i].slicePathAttr.fill = "#e0e0e0"; + this.notesCircle.navItems[i].sliceSelectedAttr.fill = "#e0e0e0"; } - that.notesCircle.refreshWheel(); + this.notesCircle.refreshWheel(); docById("userEdit").style.paddingLeft = "0px"; addButtons(true); divAppend.style.marginTop = docById("wheelDiv2").style.height; docById("preview").style.marginLeft = "100px"; //make temperary - ratios = that.tempRatios.slice(); - that.typeOfEdit = "nonequal"; - that.NEqTempPitchNumber = ratios.length - 1; - frequency1 = that.frequencies[0]; - that.NEqTempHzs = []; - for (let i = 0; i <= that.NEqTempPitchNumber; i++) { - that.NEqTempHzs[i] = ratios[i] * frequency1; - that.NEqTempHzs[i] = that.NEqTempHzs[i].toFixed(2); + this.ratios = this.tempRatios.slice(); + this.typeOfEdit = "nonequal"; + this.NEqTempPitchNumber = this.ratios.length - 1; + frequency1 = this.frequencies[0]; + this.NEqTempHzs = []; + for (let i = 0; i <= this.NEqTempPitchNumber; i++) { + this.NEqTempHzs[i] = this.ratios[i] * frequency1; + this.NEqTempHzs[i] = this.NEqTempHzs[i].toFixed(2); } - for (let i = 0; i < ratios.length; i++) { - compareRatios[i] = ratios[i]; + for (let i = 0; i < this.ratios.length; i++) { + compareRatios[i] = this.ratios[i]; compareRatios[i] = compareRatios[i].toFixed(2); } - that.checkTemperament(compareRatios); + this.checkTemperament(compareRatios); - docById("done_").onclick = function() { + docById("done_").onclick = () =>{ //Go to main Circle of Notes - that.ratios = that.tempRatios.slice(); - that.pitchNumber = that.ratios.length - 1; - frequency1 = that.frequencies[0]; - that.frequencies = []; - for (let i = 0; i <= that.pitchNumber; i++) { - that.frequencies[i] = that.ratios[i] * frequency1; - that.frequencies[i] = that.frequencies[i].toFixed(2); + this.ratios = this.tempRatios.slice(); + this.pitchNumber = this.ratios.length - 1; + frequency1 = this.frequencies[0]; + this.frequencies = []; + for (let i = 0; i <= this.pitchNumber; i++) { + this.frequencies[i] = this.ratios[i] * frequency1; + this.frequencies[i] = this.frequencies[i].toFixed(2); } - for (let i = 0; i < that.ratios.length; i++) { - compareRatios[i] = that.ratios[i]; + for (let i = 0; i < this.ratios.length; i++) { + compareRatios[i] = this.ratios[i]; compareRatios[i] = compareRatios[i].toFixed(2); } - that.checkTemperament(compareRatios); - that._circleOfNotes(); - that.NEqTempPitchNumber = null ; - that.NEqTempHzs = [] ; + this.checkTemperament(compareRatios); + this._circleOfNotes(); + this.NEqTempPitchNumber = null ; + this.NEqTempHzs = [] ; }; - docById("preview").onclick = function() { - that.ratioEdit(); - that.NEqTempPitchNumber = null ; - that.NEqTempHzs = [] ; + docById("preview").onclick = () =>{ + this.ratioEdit(); + this.NEqTempPitchNumber = null ; + this.NEqTempHzs = [] ; }; } }; }; - this.arbitraryEdit = function() { + arbitraryEdit () { this.editMode = "arbitrary" ; docById("userEdit").innerHTML = ""; let arbitraryEdit = docById("userEdit"); @@ -1083,7 +1087,7 @@ function TemperamentWidget() { let angle1 = []; this.tempRatios1 = this.ratios.slice(); - this._createInnerWheel = function(ratios, pitchNumber) { + this._createInnerWheel = (ratios, pitchNumber) => { if (this.wheel1 !== undefined) { docById("wheelDiv4").display = "none"; this.wheel1.removeWheel(); @@ -1157,8 +1161,8 @@ function TemperamentWidget() { this.wheel1.slicePathCustom.menuRadius = menuRadius; if (docById("frequencySlider") !== null) { - docById("frequencySlider").oninput = function() { - that._refreshInnerWheel(); + docById("frequencySlider").oninput = () => { + this._refreshInnerWheel(); }; } this.wheel1.createWheel(); @@ -1169,7 +1173,7 @@ function TemperamentWidget() { arbitraryEdit.innerHTML += '    :   

'; octaveSpaceEdit.style.paddingLeft = "70px"; - let that = this; + - let divAppend = document.createElement("div"); + const divAppend = document.createElement("div"); divAppend.id = "divAppend"; divAppend.innerHTML = "Done"; divAppend.style.textAlign = "center"; @@ -1416,11 +1420,11 @@ function TemperamentWidget() { divAppend.style.overflow = "auto"; octaveSpaceEdit.append(divAppend); - divAppend.onmouseover = function() { - this.style.cursor = "pointer"; + divAppend.onmouseover = (event) => { + event.target.style.cursor = "pointer"; }; - divAppend.onclick = function() { + divAppend.onclick = () => { let startRatio = docById("startNote").value; let endRatio = docById("endNote").value; let ratio = startRatio / endRatio; @@ -1434,29 +1438,29 @@ function TemperamentWidget() { } let powers = []; let compareRatios = []; - let frequency = that.frequencies[0]; - that.frequencies = []; + const frequency = this.frequencies[0]; + this.frequencies = []; for (let i = 0; i < len; i++) { powers[i] = 12 * - (Math.log10(that.ratios[i]) / Math.log10(that.powerBase)); - that.ratios[i] = Math.pow(ratio, powers[i] / 12); - compareRatios[i] = that.ratios[i].toFixed(2); - that.frequencies[i] = that.ratios[i] * frequency; - that.frequencies[i] = that.frequencies[i].toFixed(2); + (Math.log10(this.ratios[i]) / Math.log10(this.powerBase)); + this.ratios[i] = Math.pow(ratio, powers[i] / 12); + compareRatios[i] = this.ratios[i].toFixed(2); + this.frequencies[i] = this.ratios[i] * frequency; + this.frequencies[i] = this.frequencies[i].toFixed(2); } - that.powerBase = ratio; - that.typeOfEdit = "nonequal"; - that.checkTemperament(compareRatios); + this.powerBase = ratio; + this.typeOfEdit = "nonequal"; + this.checkTemperament(compareRatios); if (ratio != 2) { - that.octaveChanged = true; + this.octaveChanged = true; } - that._circleOfNotes(); + this._circleOfNotes(); }; }; - this.checkTemperament = function(ratios) { + checkTemperament (ratios) { let intervals = []; let selectedTemperament; let t, temperamentRatios, ratiosEqual; @@ -1472,7 +1476,7 @@ function TemperamentWidget() { } ratiosEqual = ratios.length == temperamentRatios.length && - ratios.every(function(element, index) { + ratios.every((element, index) => { return element === temperamentRatios[index]; }); @@ -1491,7 +1495,7 @@ function TemperamentWidget() { } }; - this._save = function() { + _save () { let notesMatch = false; // let index = []; this.notes = []; @@ -1519,7 +1523,7 @@ function TemperamentWidget() { centsDiff[j] = cents - this.cents[j]; centsDiff1[j] = Math.abs(cents - this.cents[j]); } - min = centsDiff1.reduce(function(a, b) { + min = centsDiff1.reduce((a, b) => { return Math.min(a, b); }); idx = centsDiff1.indexOf(min); @@ -1546,7 +1550,7 @@ function TemperamentWidget() { // Global value OCTAVERATIO = this.powerBase; - let value = this._logo.blocks.findUniqueTemperamentName( + let value = logo.blocks.findUniqueTemperamentName( this.inTemperament ); this.inTemperament = value ; // change from temporary "custom" to "custom1" or "custom2" .. @@ -1554,7 +1558,7 @@ function TemperamentWidget() { [0, "temperament1", 100, 100, [null, 1, 2, null]], [1, ["text", { value: value }], 0, 0, [0]], [2, ["storein"], 0, 0, [0, 3, 4, 5]], - [3, ["text", { value: this._logo.synth.startingPitch }], 0, 0, [2]], + [3, ["text", { value: logo.synth.startingPitch }], 0, 0, [2]], [4, ["number", { value: this.frequencies[0] }], 0, 0, [2]], [5, ["octavespace"], 0, 0, [2, 6, 9]], [6, ["divide"], 0, 0, [5, 7, 8]], @@ -1600,7 +1604,7 @@ function TemperamentWidget() { ]); newStack.push([ idx + 2, - ["namedbox", { value: this._logo.synth.startingPitch }], + ["namedbox", { value: logo.synth.startingPitch }], 0, 0, [idx + 1] @@ -1711,7 +1715,7 @@ function TemperamentWidget() { ]); newStack.push([ idx + 2, - ["namedbox", { value: this._logo.synth.startingPitch }], + ["namedbox", { value: logo.synth.startingPitch }], 0, 0, [idx + 1] @@ -1800,20 +1804,20 @@ function TemperamentWidget() { previousBlock = idx + 10; } } - this._logo.blocks.loadNewBlocks(newStack); - this._logo.textMsg(_("New action block generated!")); + logo.blocks.loadNewBlocks(newStack); + logo.textMsg(_("New action block generated!")); - let len = this._logo.synth.startingPitch.length; - let note = this._logo.synth.startingPitch.substring(0, len - 1); - let octave = this._logo.synth.startingPitch.slice(-1); + let len = logo.synth.startingPitch.length; + let note = logo.synth.startingPitch.substring(0, len - 1); + let octave = logo.synth.startingPitch.slice(-1); let newStack1 = [ [0, "settemperament", 100, 100, [null, 1, 2, 3, null]], [1, ["temperamentname", { value: this.inTemperament }], 0, 0, [0]], [2, ["notename", { value: note }], 0, 0, [0]], [3, ["number", { value: octave }], 0, 0, [0]] ]; - this._logo.blocks.loadNewBlocks(newStack1); - this._logo.textMsg(_("New action block generated!")); + logo.blocks.loadNewBlocks(newStack1); + logo.textMsg(_("New action block generated!")); let number; if (isCustom(this.inTemperament)) { @@ -1831,14 +1835,14 @@ function TemperamentWidget() { } if (isCustom(this.inTemperament)) { - this._logo.customTemperamentDefined = true; - this._logo.blocks.protoBlockDict["custompitch"].hidden = false; - this._logo.blocks.palettes.updatePalettes("pitch"); + logo.customTemperamentDefined = true; + logo.blocks.protoBlockDict["custompitch"].hidden = false; + logo.blocks.palettes.updatePalettes("pitch"); } }; - this.playNote = function(pitchNumber) { - this._logo.resetSynth(0); + playNote (pitchNumber) { + logo.resetSynth(0); let duration = 1 / 2; let notes; if (docById("wheelDiv4") == null) { @@ -1849,19 +1853,19 @@ function TemperamentWidget() { notes = this.tempRatios1[pitchNumber] * this.frequencies[0]; } - this._logo.synth.trigger( + logo.synth.trigger( 0, notes, Singer.defaultBPMFactor * duration, "electronic synth", null, null ); }; - this.playAll = function() { + playAll () { let p = 0; this.playbackForward = true; this._playing = !this._playing; - this._logo.resetSynth(0); + logo.resetSynth(0); - let cell = this.playButton; + const cell = this.playButton; if (this._playing) { cell.innerHTML = '  ' + _(  '; } else { - this._logo.synth.setMasterVolume(0); - this._logo.synth.stop(); + logo.synth.setMasterVolume(0); + logo.synth.stop(); cell.innerHTML = '  ' + _(  '; } - let duration = 1 / 2; - let startingPitch = this._logo.synth.startingPitch; - let startingPitchOcatve = Number(startingPitch.slice(-1)); + const duration = 1 / 2; + const startingPitch = logo.synth.startingPitch; + const startingPitchOcatve = Number(startingPitch.slice(-1)); let octave = startingPitchOcatve - 1; let startPitch = pitchToFrequency( startingPitch.substring(0, startingPitch.length - 1), @@ -1902,7 +1906,7 @@ function TemperamentWidget() { 0, "C Major" ); - let that = this; + let pitchNumber = this.pitchNumber; if (this.editMode == "equal" && this.eqTempPitchNumber) pitchNumber = this.eqTempPitchNumber ; else if (this.editMode == "ratio" && this.NEqTempPitchNumber) pitchNumber = this.NEqTempPitchNumber ; @@ -1910,16 +1914,16 @@ function TemperamentWidget() { pitchNumber = this.tempRatios1.length - 1; } - __playLoop = function(i) { + const __playLoop = (i) => { let j; if (i === pitchNumber) { - that.playbackForward = false; + this.playbackForward = false; } if (i === 0) { p++; } - if (that._playing) { - that._logo.synth.trigger( + if (this._playing) { + logo.synth.trigger( 0, startPitch, Singer.defaultBPMFactor * duration, @@ -1927,66 +1931,66 @@ function TemperamentWidget() { null, null ); - that.playNote(i); + this.playNote(i); } - if (that.circleIsVisible == false && docById("wheelDiv4") == null) { + if (this.circleIsVisible == false && docById("wheelDiv4") == null) { if (i === pitchNumber) { - that.notesCircle.navItems[0].fillAttr = "#808080"; - that.notesCircle.navItems[0].sliceHoverAttr.fill = + this.notesCircle.navItems[0].fillAttr = "#808080"; + this.notesCircle.navItems[0].sliceHoverAttr.fill = "#808080"; - that.notesCircle.navItems[0].slicePathAttr.fill = "#808080"; - that.notesCircle.navItems[0].sliceSelectedAttr.fill = + this.notesCircle.navItems[0].slicePathAttr.fill = "#808080"; + this.notesCircle.navItems[0].sliceSelectedAttr.fill = "#808080"; } else { - that.notesCircle.navItems[i].fillAttr = "#808080"; - that.notesCircle.navItems[i].sliceHoverAttr.fill = + this.notesCircle.navItems[i].fillAttr = "#808080"; + this.notesCircle.navItems[i].sliceHoverAttr.fill = "#808080"; - that.notesCircle.navItems[i].slicePathAttr.fill = "#808080"; - that.notesCircle.navItems[i].sliceSelectedAttr.fill = + this.notesCircle.navItems[i].slicePathAttr.fill = "#808080"; + this.notesCircle.navItems[i].sliceSelectedAttr.fill = "#808080"; } - if (that.playbackForward == false && i < pitchNumber) { + if (this.playbackForward == false && i < pitchNumber) { if (i === pitchNumber - 1) { - that.notesCircle.navItems[0].fillAttr = "#c8C8C8"; - that.notesCircle.navItems[0].sliceHoverAttr.fill = + this.notesCircle.navItems[0].fillAttr = "#c8C8C8"; + this.notesCircle.navItems[0].sliceHoverAttr.fill = "#c8C8C8"; - that.notesCircle.navItems[0].slicePathAttr.fill = + this.notesCircle.navItems[0].slicePathAttr.fill = "#c8C8C8"; - that.notesCircle.navItems[0].sliceSelectedAttr.fill = + this.notesCircle.navItems[0].sliceSelectedAttr.fill = "#c8C8C8"; } else { - that.notesCircle.navItems[i + 1].fillAttr = "#c8C8C8"; - that.notesCircle.navItems[i + 1].sliceHoverAttr.fill = + this.notesCircle.navItems[i + 1].fillAttr = "#c8C8C8"; + this.notesCircle.navItems[i + 1].sliceHoverAttr.fill = "#c8C8C8"; - that.notesCircle.navItems[i + 1].slicePathAttr.fill = + this.notesCircle.navItems[i + 1].slicePathAttr.fill = "#c8C8C8"; - that.notesCircle.navItems[ + this.notesCircle.navItems[ i + 1 ].sliceSelectedAttr.fill = "#c8C8C8"; } } else { if (i !== 0) { - that.notesCircle.navItems[i - 1].fillAttr = "#c8C8C8"; - that.notesCircle.navItems[i - 1].sliceHoverAttr.fill = + this.notesCircle.navItems[i - 1].fillAttr = "#c8C8C8"; + this.notesCircle.navItems[i - 1].sliceHoverAttr.fill = "#c8C8C8"; - that.notesCircle.navItems[i - 1].slicePathAttr.fill = + this.notesCircle.navItems[i - 1].slicePathAttr.fill = "#c8C8C8"; - that.notesCircle.navItems[ + this.notesCircle.navItems[ i - 1 ].sliceSelectedAttr.fill = "#c8C8C8"; } } - that.notesCircle.refreshWheel(); + this.notesCircle.refreshWheel(); } else if ( - that.circleIsVisible == true && + this.circleIsVisible == true && docById("wheelDiv4") == null ) { docById("pitchNumber_" + i).style.background = platformColor.labelColor; - if (that.playbackForward == false && i < pitchNumber) { + if (this.playbackForward == false && i < pitchNumber) { j = i + 1; docById("pitchNumber_" + j).style.background = platformColor.selectorBackground; @@ -1999,56 +2003,56 @@ function TemperamentWidget() { } } else if (docById("wheelDiv4") !== null) { if (i === pitchNumber) { - that.wheel1.navItems[0].fillAttr = "#808080"; - that.wheel1.navItems[0].sliceHoverAttr.fill = "#808080"; - that.wheel1.navItems[0].slicePathAttr.fill = "#808080"; - that.wheel1.navItems[0].sliceSelectedAttr.fill = "#808080"; + this.wheel1.navItems[0].fillAttr = "#808080"; + this.wheel1.navItems[0].sliceHoverAttr.fill = "#808080"; + this.wheel1.navItems[0].slicePathAttr.fill = "#808080"; + this.wheel1.navItems[0].sliceSelectedAttr.fill = "#808080"; } else { - that.wheel1.navItems[i].fillAttr = "#808080"; - that.wheel1.navItems[i].sliceHoverAttr.fill = "#808080"; - that.wheel1.navItems[i].slicePathAttr.fill = "#808080"; - that.wheel1.navItems[i].sliceSelectedAttr.fill = "#808080"; + this.wheel1.navItems[i].fillAttr = "#808080"; + this.wheel1.navItems[i].sliceHoverAttr.fill = "#808080"; + this.wheel1.navItems[i].slicePathAttr.fill = "#808080"; + this.wheel1.navItems[i].sliceSelectedAttr.fill = "#808080"; } - if (that.playbackForward == false && i < pitchNumber) { + if (this.playbackForward == false && i < pitchNumber) { if (i === pitchNumber - 1) { - that.wheel1.navItems[0].fillAttr = "#e0e0e0"; - that.wheel1.navItems[0].sliceHoverAttr.fill = "#e0e0e0"; - that.wheel1.navItems[0].slicePathAttr.fill = "#e0e0e0"; - that.wheel1.navItems[0].sliceSelectedAttr.fill = + this.wheel1.navItems[0].fillAttr = "#e0e0e0"; + this.wheel1.navItems[0].sliceHoverAttr.fill = "#e0e0e0"; + this.wheel1.navItems[0].slicePathAttr.fill = "#e0e0e0"; + this.wheel1.navItems[0].sliceSelectedAttr.fill = "#e0e0e0"; } else { - that.wheel1.navItems[i + 1].fillAttr = "#e0e0e0"; - that.wheel1.navItems[i + 1].sliceHoverAttr.fill = + this.wheel1.navItems[i + 1].fillAttr = "#e0e0e0"; + this.wheel1.navItems[i + 1].sliceHoverAttr.fill = "#e0e0e0"; - that.wheel1.navItems[i + 1].slicePathAttr.fill = + this.wheel1.navItems[i + 1].slicePathAttr.fill = "#e0e0e0"; - that.wheel1.navItems[i + 1].sliceSelectedAttr.fill = + this.wheel1.navItems[i + 1].sliceSelectedAttr.fill = "#e0e0e0"; } } else { if (i !== 0) { - that.wheel1.navItems[i - 1].fillAttr = "#e0e0e0"; - that.wheel1.navItems[i - 1].sliceHoverAttr.fill = + this.wheel1.navItems[i - 1].fillAttr = "#e0e0e0"; + this.wheel1.navItems[i - 1].sliceHoverAttr.fill = "#e0e0e0"; - that.wheel1.navItems[i - 1].slicePathAttr.fill = + this.wheel1.navItems[i - 1].slicePathAttr.fill = "#e0e0e0"; - that.wheel1.navItems[i - 1].sliceSelectedAttr.fill = + this.wheel1.navItems[i - 1].sliceSelectedAttr.fill = "#e0e0e0"; } } - that.wheel1.refreshWheel(); + this.wheel1.refreshWheel(); } - if (that.playbackForward) { + if (this.playbackForward) { i += 1; } else { i -= 1; } - if (i <= pitchNumber && i >= 0 && that._playing && p < 2) { - setTimeout(function() { + if (i <= pitchNumber && i >= 0 && this._playing && p < 2) { + setTimeout(() => { __playLoop(i); }, Singer.defaultBPMFactor * 1000 * duration); } else { @@ -2060,48 +2064,48 @@ function TemperamentWidget() { '" alt="' + _("Play") + '" height="' + - ICONSIZE + + TemperamentWidget.ICONSIZE + '" width="' + - ICONSIZE + + TemperamentWidget.ICONSIZE + '" vertical-align="middle" align-content="center">  '; if (i !== -1) { - setTimeout(function() { + setTimeout(() => { if ( - that.circleIsVisible == false && + this.circleIsVisible == false && docById("wheelDiv4") == null ) { - that.notesCircle.navItems[i - 1].fillAttr = + this.notesCircle.navItems[i - 1].fillAttr = "#c8C8C8"; - that.notesCircle.navItems[ + this.notesCircle.navItems[ i - 1 ].sliceHoverAttr.fill = "#c8C8C8"; - that.notesCircle.navItems[ + this.notesCircle.navItems[ i - 1 ].slicePathAttr.fill = "#c8C8C8"; - that.notesCircle.navItems[ + this.notesCircle.navItems[ i - 1 ].sliceSelectedAttr.fill = "#c8C8C8"; - that.notesCircle.refreshWheel(); + this.notesCircle.refreshWheel(); } else if ( - that.circleIsVisible == true && + this.circleIsVisible == true && docById("wheelDiv4") == null ) { j = i - 1; docById("pitchNumber_" + j).style.background = platformColor.selectorBackground; } else if (docById("wheelDiv4") !== null) { - that.wheel1.navItems[i - 1].fillAttr = "#e0e0e0"; - that.wheel1.navItems[i - 1].sliceHoverAttr.fill = + this.wheel1.navItems[i - 1].fillAttr = "#e0e0e0"; + this.wheel1.navItems[i - 1].sliceHoverAttr.fill = "#e0e0e0"; - that.wheel1.navItems[i - 1].slicePathAttr.fill = + this.wheel1.navItems[i - 1].slicePathAttr.fill = "#e0e0e0"; - that.wheel1.navItems[i - 1].sliceSelectedAttr.fill = + this.wheel1.navItems[i - 1].sliceSelectedAttr.fill = "#e0e0e0"; - that.wheel1.refreshWheel(); + this.wheel1.refreshWheel(); } }, Singer.defaultBPMFactor * 1000 * duration); } - that._playing = false; + this._playing = false; } }; if (this._playing) { @@ -2109,14 +2113,15 @@ function TemperamentWidget() { } }; - this.init = function(logo) { - this._logo = logo; + init(logo) { + logo = logo; - let w = window.innerWidth; + + const w = window.innerWidth; this._cellScale = w / 1200; - let iconSize = ICONSIZE * this._cellScale; + const iconSize = TemperamentWidget.ICONSIZE * this._cellScale; - let widgetWindow = window.widgetWindows.windowFor(this, "temperament"); + const widgetWindow = window.widgetWindows.windowFor(this, "temperament"); this.widgetWindow = widgetWindow; widgetWindow.clear(); widgetWindow.show(); @@ -2125,25 +2130,25 @@ function TemperamentWidget() { widgetWindow.getWidgetBody().style.height = "500px"; widgetWindow.getWidgetBody().style.width = "500px"; - let that = this; + - widgetWindow.onclose = function() { - that._logo.synth.setMasterVolume(0); - that._logo.synth.stop(); + widgetWindow.onclose = () => { + logo.synth.setMasterVolume(0); + logo.synth.stop(); if (docById("wheelDiv2") != null) { docById("wheelDiv2").style.display = "none"; - that.notesCircle.removeWheel(); + this.notesCircle.removeWheel(); } if (docById("wheelDiv3") != null) { docById("wheelDiv3").style.display = "none"; - that.wheel.removeWheel(); + this.wheel.removeWheel(); } if (docById("wheelDiv4") != null) { docById("wheelDiv4").style.display = "none"; - that.wheel1.removeWheel(); + this.wheel1.removeWheel(); } - this.destroy(); + widgetWindow.destroy(); }; this._playing = false; @@ -2155,10 +2160,10 @@ function TemperamentWidget() { temperamentCell = row.insertCell(); temperamentCell.innerHTML = this.inTemperament; - temperamentCell.style.width = 2 * BUTTONSIZE + "px"; + temperamentCell.style.width = 2 * TemperamentWidget.BUTTONSIZE + "px"; temperamentCell.style.minWidth = temperamentCell.style.width; temperamentCell.style.maxWidth = temperamentCell.style.width; - temperamentCell.style.height = BUTTONSIZE + "px"; + temperamentCell.style.height = TemperamentWidget.BUTTONSIZE + "px"; temperamentCell.style.minHeight = temperamentCell.style.height; temperamentCell.style.maxHeight = temperamentCell.style.height; temperamentCell.style.textAlign = "center"; @@ -2167,24 +2172,24 @@ function TemperamentWidget() { this.playButton = widgetWindow.addButton( "play-button.svg", - ICONSIZE, + TemperamentWidget.ICONSIZE, _("Play all") ); - this.playButton.onclick = function() { - that.playAll(); + this.playButton.onclick = () =>{ + this.playAll(); }; widgetWindow.addButton( "export-chunk.svg", - ICONSIZE, + TemperamentWidget.ICONSIZE, _("Save") - ).onclick = function() { - that._save(); + ).onclick = () =>{ + this._save(); }; let noteCell = widgetWindow.addButton( "play-button.svg", - ICONSIZE, + TemperamentWidget.ICONSIZE, _("Table") ); @@ -2195,7 +2200,7 @@ function TemperamentWidget() { this.scaleNotes = _buildScale(this.scale); this.scaleNotes = this.scaleNotes[0]; this.powerBase = 2; - let startingPitch = this._logo.synth.startingPitch; + let startingPitch = logo.synth.startingPitch; let str = []; let note = []; this.notes = []; @@ -2226,7 +2231,7 @@ function TemperamentWidget() { ]; this.ratios[i] = TEMPERAMENT[this.inTemperament][pitchNumber][0]; } - this.frequencies[i] = this._logo.synth + this.frequencies[i] = logo.synth .getCustomFrequency((this.notes[i][0] + this.notes[i][1] + "") ,this.inTemperament ) .toFixed(2); this.cents[i] = @@ -2255,7 +2260,7 @@ function TemperamentWidget() { } str[i] = note[i] + str[i][1]; - this.frequencies[i] = this._logo.synth + this.frequencies[i] = logo.synth ._getFrequency(str[i], true, this.inTemperament) .toFixed(2); this.intervals[i] = t.interval[i]; @@ -2265,7 +2270,7 @@ function TemperamentWidget() { this.ratiosNotesPair[i] = [this.ratios[i], this.notes[i]]; } } - this.toggleNotesButton = function() { + this.toggleNotesButton = () => { if (this.circleIsVisible) { noteCell.getElementsByTagName("img")[0].src = "header-icons/circle.svg"; @@ -2281,21 +2286,21 @@ function TemperamentWidget() { this._circleOfNotes(); - noteCell.onclick = function(event) { - that.editMode = null ; - if (that.circleIsVisible) { - that._circleOfNotes(); + noteCell.onclick = (event) => { + this.editMode = null ; + if (this.circleIsVisible) { + this._circleOfNotes(); } else { - that._graphOfNotes(); + this._graphOfNotes(); } }; widgetWindow.addButton( "add2.svg", - ICONSIZE, + TemperamentWidget.ICONSIZE, _("Add pitches") - ).onclick = function(event) { - that.edit(); + ).onclick = (event) => { + this.edit(); }; widgetWindow.sendToCenter(); From 7c91e7017054e59da60fb58003ce5e87724c0986 Mon Sep 17 00:00:00 2001 From: ricknjacky Date: Tue, 26 Jan 2021 09:50:40 +0530 Subject: [PATCH 2/3] Lint and add JSDoc Widgetblocks.js modification for logo Linting finishes for temprament JSDoc styling comments Typo in JSDoc --- js/blocks/WidgetBlocks.js | 2 +- js/widgets/temperament.js | 850 ++++++++++++++++++-------------------- 2 files changed, 410 insertions(+), 442 deletions(-) diff --git a/js/blocks/WidgetBlocks.js b/js/blocks/WidgetBlocks.js index faa8b9cb82..6c3f2e70ca 100644 --- a/js/blocks/WidgetBlocks.js +++ b/js/blocks/WidgetBlocks.js @@ -210,7 +210,7 @@ function setupWidgetBlocks() { logo.setDispatchBlock(blk, turtle, listenerName); let __listener = function(event) { - logo.temperament.init(logo); + logo.temperament.init(); }; logo.setTurtleListener(turtle, listenerName, __listener); diff --git a/js/widgets/temperament.js b/js/widgets/temperament.js index 832e702dca..7c33932005 100644 --- a/js/widgets/temperament.js +++ b/js/widgets/temperament.js @@ -1,16 +1,36 @@ -// Copyright (c) 2018 Riya Lohia -// -// This program is free software; you can redistribute it and/or -// modify it under the terms of the The GNU Affero General Public -// License as published by the Free Software Foundation; either -// version 3 of the License, or (at your option) any later version. -// -// You should have received a copy of the GNU Affero General Public -// License along with this library; if not, write to the Free Software -// Foundation, 51 Franklin Street, Suite 500 Boston, MA 02110-1335 USA +/** + * @file This contains the prototype of the JavaScript Editor Widget. + * @author Riya Lohia + * + * @copyright 2018 Riya Lohia + * + * @license + * This program is free software; you can redistribute it and/or modify it under the terms of the + * The GNU Affero General Public License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * You should have received a copy of the GNU Affero General Public License along with this + * library; if not, write to the Free Software Foundation, 51 Franklin Street, Suite 500 Boston, + * MA 02110-1335 USA. +*/ + +/* + global platformColor, docById, wheelnav, slicePath, logo, Singer, isCustom, + TEMPERAMENT, OCTAVERATIO: true, rationalToFraction, _, getNoteFromInterval, + FLAT, SHARP, pitchToFrequency, updateTemperaments, _buildScale + */ + +/* exported TemperamentWidget */ const temperamentTableDiv = document.createElement("div"); let temperamentCell = null; +/** + * @class + * @classdesc pertains to setting up all features of the temperament widget and its UI features. + * + * Private members' names begin with underscore '_". + */ + class TemperamentWidget { static BUTTONDIVWIDTH = 430; @@ -18,6 +38,9 @@ class TemperamentWidget { static INNERWINDOWWIDTH = 600; static BUTTONSIZE = 53; static ICONSIZE = 32; + /** + * @constructor + */ constructor(){ this.inTemperament = null; this.lastTriggered = null; @@ -69,8 +92,11 @@ class TemperamentWidget { return cell; }; - - _circleOfNotes () { +/** + * Renders the circle of notes UI and all the subcomponents in the DOM widget. + * @returns {void} + */ + _circleOfNotes() { this.circleIsVisible = false; this.toggleNotesButton(); temperamentTableDiv.style.display = "inline"; @@ -98,13 +124,13 @@ class TemperamentWidget { temperamentTable.innerHTML = html; temperamentTable.style.width = "300px"; - let canvas = docById("circ"); + const canvas = docById("circ"); canvas.style.position = "absolute"; canvas.style.zIndex = 1; canvas.style.background = "rgba(255, 255, 255, 0.85)"; - let ctx = canvas.getContext("2d"); - let centerX = canvas.width / 2; - let centerY = canvas.height / 2; + const ctx = canvas.getContext("2d"); + const centerX = canvas.width / 2; + const centerY = canvas.height / 2; ctx.beginPath(); ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); @@ -126,7 +152,7 @@ class TemperamentWidget { pitchNumber = this.pitchNumber; } - let labels = []; + const labels = []; let label; for (let j = 0; j < pitchNumber; j++) { label = j.toString(); @@ -145,18 +171,14 @@ class TemperamentWidget { this.notesCircle.sliceInitPathCustom = this.notesCircle.slicePathCustom; this.notesCircle.initWheel(labels); angle = []; - let baseAngle = []; - let sliceAngle = []; - let angleDiff = []; + const baseAngle = []; + const sliceAngle = []; + const angleDiff = []; for (let i = 0; i < this.notesCircle.navItemCount; i++) { this.notesCircle.navItems[i].fillAttr = "#c8C8C8"; - this.notesCircle.navItems[i].titleAttr.font = - "20 20px Impact, Charcoal, sans-serif"; - this.notesCircle.navItems[i].titleSelectedAttr.font = - "20 20px Impact, Charcoal, sans-serif"; - angle[i] = - 270 + - 360 * (Math.log10(ratios[i]) / Math.log10(this.powerBase)); + this.notesCircle.navItems[i].titleAttr.font = "20 20px Impact, Charcoal, sans-serif"; + this.notesCircle.navItems[i].titleSelectedAttr.font = "20 20px Impact, Charcoal, sans-serif"; + angle[i] = 270 + 360 * (Math.log10(ratios[i]) / Math.log10(this.powerBase)); if (i !== 0) { if (i == pitchNumber - 1) { angleDiff[i - 1] = angle[0] + 360 - angle[i]; @@ -166,8 +188,7 @@ class TemperamentWidget { } if (i === 0) { sliceAngle[i] = 360 / pitchNumber; - baseAngle[i] = - this.notesCircle.navAngle - sliceAngle[0] / 2; + baseAngle[i] = this.notesCircle.navAngle - sliceAngle[0] / 2; } else { baseAngle[i] = baseAngle[i - 1] + sliceAngle[i - 1]; sliceAngle[i] = 2 * (angle[i] - baseAngle[i]); @@ -241,12 +262,12 @@ class TemperamentWidget { } if (divAppend1 !== undefined) { - divAppend1.onclick = () =>{ - let ratio = this.ratios[0]; + divAppend1.onclick = () => { + const ratio = this.ratios[0]; this.ratios = []; this.ratios[0] = ratio; this.ratios[1] = this.powerBase; - let frequency = this.frequencies[0]; + const frequency = this.frequencies[0]; this.frequencies = []; this.frequencies[0] = frequency; this.frequencies[1] = frequency * this.powerBase; @@ -257,15 +278,14 @@ class TemperamentWidget { } if (divAppend2 !== undefined) { - divAppend2.onclick = () =>{ - let powers = []; - let compareRatios = []; - let frequency = this.frequencies[0]; + divAppend2.onclick = () => { + const powers = []; + const compareRatios = []; + const frequency = this.frequencies[0]; this.frequencies = []; for (let i = 0; i < this.ratios.length; i++) { - powers[i] = - 12 * + powers[i] = 12 * (Math.log10(this.ratios[i]) / Math.log10(this.powerBase)); this.ratios[i] = Math.pow(2, powers[i] / 12); @@ -281,11 +301,16 @@ class TemperamentWidget { } docById("temperamentTable").addEventListener("click", (e) => { - this.showNoteInfo(e, angle); + this.showNoteInfo(e); }); }; - - showNoteInfo = (event, angle) => { +/** + * Triggered when the a note is pressed. + * + * @param {Object} event + * @returns {void} + */ + showNoteInfo = (event) => { let x, y, frequency, noteDefined; let cents, centsDiff, centsDiff1, min, index; @@ -294,12 +319,8 @@ class TemperamentWidget { event.target.id == "wheelnav-wheelDiv2-slice-" + i || (event.target.innerHTML == i && event.target.innerHTML !== "") ) { - x = - event.clientX - - docById("wheelDiv2").getBoundingClientRect().left; - y = - event.clientY - - docById("wheelDiv2").getBoundingClientRect().top; + x = event.clientX - docById("wheelDiv2").getBoundingClientRect().left; + y = event.clientY - docById("wheelDiv2").getBoundingClientRect().top; frequency = this.frequencies[i]; if (docById("noteInfo") !== null) { docById("noteInfo").remove(); @@ -324,15 +345,12 @@ class TemperamentWidget { if (this.ratios[i] == this.ratiosNotesPair[j][0]) { noteDefined = true; docById("noteInfo").innerHTML += - '
  Note : ' + - this.ratiosNotesPair[j][1] + - "
"; + '
  Note : ' + this.ratiosNotesPair[j][1] + "
"; break; } } if (noteDefined == false) { - cents = - 1200 * (Math.log10(this.ratios[i]) / Math.log10(2)); + cents = 1200 * (Math.log10(this.ratios[i]) / Math.log10(2)); centsDiff = []; centsDiff1 = []; for (let j = 0; j < this.cents.length; j++) { @@ -363,15 +381,13 @@ class TemperamentWidget { } } docById("noteInfo").innerHTML += - '
  Frequency : ' + - frequency + - "
"; + '
  Frequency : ' + frequency + "
"; docById("noteInfo").style.top = "130px"; docById("noteInfo").style.left = "132px"; docById("noteInfo").style.position = "absolute"; docById("noteInfo").style.zIndex = 10; - docById("close").onclick = () =>{ + docById("close").onclick = () => { docById("noteInfo").remove(); }; @@ -384,8 +400,15 @@ class TemperamentWidget { } }; + /** + * Triggered when the user wants to edit frequency. + * + * @param {Object} event + * @returns {void} + */ + editFrequency = (event) => { - let i = Number(event.target.dataset.message); + const i = Number(event.target.dataset.message); docById("noteInfo").style.width = "180px"; @@ -406,29 +429,31 @@ class TemperamentWidget { '

Done
'; docById("frequencySlider1").oninput = () => { - let frequency, ratio, labels, ratioDifference; - docById("frequencydiv1").innerHTML = docById( - "frequencySlider1" - ).value; - frequency = docById("frequencySlider1").value; - ratio = frequency / this.frequencies[0]; - labels = []; - ratioDifference = []; + + docById("frequencydiv1").innerHTML = docById("frequencySlider1").value; + const frequency = docById("frequencySlider1").value; + const ratio = frequency / this.frequencies[0]; + // labels = []; + // ratioDifference = []; this.temporaryRatios = this.ratios.slice(); this.temporaryRatios[i] = ratio; logo.resetSynth(0); logo.synth.trigger( - 0, frequency, Singer.defaultBPMFactor * 0.01, "electronic synth", null, null + 0, + frequency, + Singer.defaultBPMFactor * 0.01, + "electronic synth", + null, + null ); this.createMainWheel(this.temporaryRatios); }; - docById("done").onclick = () =>{ - let frequency1; + docById("done").onclick = () => { this.ratios = this.temporaryRatios.slice(); this.typeOfEdit = "nonequal"; this.createMainWheel(); - frequency1 = this.frequencies[0]; + const frequency1 = this.frequencies[0]; this.frequencies = []; for (let j = 0; j < this.ratios.length; j++) { this.frequencies[j] = this.ratios[j] * frequency1; @@ -438,14 +463,19 @@ class TemperamentWidget { docById("noteInfo").remove(); }; - docById("close").onclick = () =>{ + docById("close").onclick = () => { this.temporaryRatios = this.ratios.slice(); this.createMainWheel(); docById("noteInfo").remove(); }; }; + /** + * Triggered when graph of notes UI element is stelected + * displays circular graph of all the notes present. + * @returns {void} + */ - _graphOfNotes () { + _graphOfNotes() { this.circleIsVisible = true; this.toggleNotesButton(); temperamentTableDiv.innerHTML = ""; @@ -455,9 +485,9 @@ class TemperamentWidget { } temperamentTableDiv.innerHTML = '
'; - let notesGraph = docById("notesGraph"); - let headerNotes = notesGraph.createTHead(); - let rowNotes = headerNotes.insertRow(0); + const notesGraph = docById("notesGraph"); + const headerNotes = notesGraph.createTHead(); + headerNotes.insertRow(0); let menuLabels = []; if (isCustom(this.inTemperament)) { menuLabels = ["Play", "Pitch Number", "Ratio", "Frequency"]; @@ -482,7 +512,7 @@ class TemperamentWidget { docById("menu").innerHTML = menus; - let menuItems = document.querySelectorAll("#menuLabels"); + const menuItems = document.querySelectorAll("#menuLabels"); for (let i = 0; i < menuLabels.length; i++) { menuItems[i].style.background = platformColor.labelColor; menuItems[i].style.height = 30 + "px"; @@ -512,12 +542,11 @@ class TemperamentWidget { '
'; docById("tableOfNotes").innerHTML = pitchNumberColumn; - let startingPitch = logo.synth.startingPitch; - let notesRow = []; - let notesCell = []; - let noteToPlay = []; - let ratios = []; + + const notesRow = []; + const notesCell = []; + const ratios = []; let playImage; for (let i = 0; i <= this.pitchNumber; i++) { @@ -531,16 +560,14 @@ class TemperamentWidget { i + '">  '; notesCell[(i, 0)].style.width = 40 + "px"; - notesCell[(i, 0)].style.backgroundColor = - platformColor.selectorBackground; + notesCell[(i, 0)].style.backgroundColor = platformColor.selectorBackground; notesCell[(i, 0)].style.textAlign = "center"; notesCell[(i, 0)].onmouseover = (event) => { - event.target.style.backgroundColor = - platformColor.selectorBackgroundHOVER; + event.target.style.backgroundColor = platformColor.selectorBackgroundHOVER; }; - notesCell[(i, 0)].onmouseout = () => { + notesCell[(i, 0)].onmouseout = (event) => { event.target.style.backgroundColor = platformColor.selectorBackground; }; @@ -558,8 +585,7 @@ class TemperamentWidget { notesCell[(i, 1)] = notesRow[i].insertCell(-1); notesCell[(i, 1)].id = "pitchNumber_" + i; notesCell[(i, 1)].innerHTML = i; - notesCell[(i, 1)].style.backgroundColor = - platformColor.selectorBackground; + notesCell[(i, 1)].style.backgroundColor = platformColor.selectorBackground; notesCell[(i, 1)].style.textAlign = "center"; ratios[i] = this.ratios[i]; @@ -568,8 +594,7 @@ class TemperamentWidget { //Ratio notesCell[(i, 2)] = notesRow[i].insertCell(-1); notesCell[(i, 2)].innerHTML = ratios[i]; - notesCell[(i, 2)].style.backgroundColor = - platformColor.selectorBackground; + notesCell[(i, 2)].style.backgroundColor = platformColor.selectorBackground; notesCell[(i, 2)].style.textAlign = "center"; if (!isCustom(this.inTemperament)) { @@ -577,16 +602,14 @@ class TemperamentWidget { notesCell[(i, 3)] = notesRow[i].insertCell(-1); notesCell[(i, 3)].innerHTML = this.intervals[i]; notesCell[(i, 3)].style.width = 120 + "px"; - notesCell[(i, 3)].style.backgroundColor = - platformColor.selectorBackground; + notesCell[(i, 3)].style.backgroundColor = platformColor.selectorBackground; notesCell[(i, 3)].style.textAlign = "center"; //Notes notesCell[(i, 4)] = notesRow[i].insertCell(-1); notesCell[(i, 4)].innerHTML = this.notes[i]; notesCell[(i, 4)].style.width = 50 + "px"; - notesCell[(i, 4)].style.backgroundColor = - platformColor.selectorBackground; + notesCell[(i, 4)].style.backgroundColor = platformColor.selectorBackground; notesCell[(i, 4)].style.textAlign = "center"; //Mode @@ -601,16 +624,14 @@ class TemperamentWidget { notesCell[(i, 5)].innerHTML = "Non Scalar"; } notesCell[(i, 5)].style.width = 100 + "px"; - notesCell[(i, 5)].style.backgroundColor = - platformColor.selectorBackground; + notesCell[(i, 5)].style.backgroundColor = platformColor.selectorBackground; notesCell[(i, 5)].style.textAlign = "center"; } //Frequency notesCell[(i, 6)] = notesRow[i].insertCell(-1); notesCell[(i, 6)].innerHTML = this.frequencies[i]; - notesCell[(i, 6)].style.backgroundColor = - platformColor.selectorBackground; + notesCell[(i, 6)].style.backgroundColor = platformColor.selectorBackground; notesCell[(i, 6)].style.textAlign = "center"; if (isCustom(this.inTemperament)) { @@ -624,8 +645,12 @@ class TemperamentWidget { } } }; - - edit () { + /** + * Triggerred when any one of the UI edit elemnts is selected + * + * @returns {void} + */ + edit() { this.editMode = null ; logo.synth.setMasterVolume(0); logo.synth.stop(); @@ -639,7 +664,7 @@ class TemperamentWidget { '
'; - let editMenus = ["Equal", "Ratios", "Arbitrary", "Octave Space"]; + const editMenus = ["Equal", "Ratios", "Arbitrary", "Octave Space"]; let menus = ""; for (let i = 0; i < editMenus.length; i++) { @@ -660,7 +685,7 @@ class TemperamentWidget { menuItems[0].style.background = "#c8C8C8"; this.equalEdit(); - menuItems[0].onclick = (event) => { + menuItems[0].onclick = () => { menuItems[1].style.background = platformColor.selectorBackground; menuItems[2].style.background = platformColor.selectorBackground; menuItems[3].style.background = platformColor.selectorBackground; @@ -668,7 +693,7 @@ class TemperamentWidget { this.equalEdit(); }; - menuItems[1].onclick = (event) => { + menuItems[1].onclick = () => { menuItems[0].style.background = platformColor.selectorBackground; menuItems[2].style.background = platformColor.selectorBackground; menuItems[3].style.background = platformColor.selectorBackground; @@ -676,7 +701,7 @@ class TemperamentWidget { this.ratioEdit(); }; - menuItems[2].onclick = (event) => { + menuItems[2].onclick = () => { menuItems[0].style.background = platformColor.selectorBackground; menuItems[1].style.background = platformColor.selectorBackground; menuItems[3].style.background = platformColor.selectorBackground; @@ -684,7 +709,7 @@ class TemperamentWidget { this.arbitraryEdit(); }; - menuItems[3].onclick = (event) => { + menuItems[3].onclick = () => { menuItems[0].style.background = platformColor.selectorBackground; menuItems[1].style.background = platformColor.selectorBackground; menuItems[2].style.background = platformColor.selectorBackground; @@ -693,10 +718,16 @@ class TemperamentWidget { }; }; - equalEdit () { + /** + * Triggerred when the Equal edit option is selected, + * + * @returns {void} + */ + + equalEdit() { this.editMode = "equal"; docById("userEdit").innerHTML = ""; - let equalEdit = docById("userEdit"); + const equalEdit = docById("userEdit"); equalEdit.style.backgroundColor = "#c8C8C8"; equalEdit.innerHTML = '
Pitch Number         To   

'; @@ -706,17 +737,15 @@ class TemperamentWidget { '">'; equalEdit.style.paddingLeft = "80px"; - + let divAppend; const addDivision = (preview) => { // Add Buttons - let divAppend = document.createElement("div"); + divAppend = document.createElement("div"); divAppend.id = "divAppend"; if (preview) { - divAppend.innerHTML = - '
Back
Done
'; + divAppend.innerHTML = '
Back
Done
'; } else { - divAppend.innerHTML = - '
Preview
Done
'; + divAppend.innerHTML = '
Preview
Done
'; } divAppend.style.textAlign = "center"; divAppend.style.marginLeft = "-80px"; @@ -725,13 +754,13 @@ class TemperamentWidget { divAppend.style.overflow = "auto"; equalEdit.append(divAppend); - let divAppend1 = docById("preview"); + const divAppend1 = docById("preview"); divAppend1.style.height = "30px"; divAppend1.style.marginLeft = "3px"; divAppend1.style.backgroundColor = platformColor.selectorBackground; divAppend1.style.width = "215px"; - let divAppend2 = docById("done_"); + const divAppend2 = docById("done_"); divAppend2.style.height = "30px"; divAppend2.style.marginRight = "3px"; divAppend2.style.backgroundColor = platformColor.selectorBackground; @@ -748,20 +777,17 @@ class TemperamentWidget { let pitchNumber1 = Number(docById("octaveIn").value); let pitchNumber2 = Number(docById("octaveOut").value); let divisions = Number(docById("divisions").value); - let ratio = []; - let compareRatios = []; - let ratio1 = []; - let ratio2 = []; - let ratio3 = []; + const ratio = []; + const compareRatios = []; + const ratio1 = []; + const ratio2 = []; + const ratio3 = []; let ratio4; - let index = []; + const index = []; this.tempRatios = []; divAppend.addEventListener("click", (event) => { - performEqualEdit(event); - }); - const performEqualEdit = (event) => { let angle1, angle2, divisionAngle, power, frequency; pitchNumber1 = Number(docById("octaveIn").value); pitchNumber2 = Number(docById("octaveOut").value); @@ -780,7 +806,7 @@ class TemperamentWidget { return ratio2.indexOf(val) == -1; }); - for(let i = 0; i < ratio4.length; i++) { + for (let i = 0; i < ratio4.length; i++) { index[i] = ratio1.indexOf(ratio4[i]); ratio3[i] = ratio[index[i]]; } @@ -793,31 +819,17 @@ class TemperamentWidget { this.typeOfEdit = "equal"; this.divisions = divisions; } else { - pitchNumber = - divisions + - Number(pitchNumber) - - Math.abs(pitchNumber1 - pitchNumber2); - angle1 = - 270 + + pitchNumber = divisions + Number(pitchNumber) - Math.abs(pitchNumber1 - pitchNumber2); + angle1 = 270 + 360 * - (Math.log10(this.tempRatios[pitchNumber1]) / - Math.log10(this.powerBase)); - angle2 = - 270 + + (Math.log10(this.tempRatios[pitchNumber1]) / Math.log10(this.powerBase)); + angle2 = 270 + 360 * - (Math.log10(this.tempRatios[pitchNumber2]) / - Math.log10(this.powerBase)); + (Math.log10(this.tempRatios[pitchNumber2]) / Math.log10(this.powerBase)); divisionAngle = Math.abs(angle2 - angle1) / divisions; - this.tempRatios.splice( - pitchNumber1 + 1, - Math.abs(pitchNumber1 - pitchNumber2) - 1 - ); + this.tempRatios.splice(pitchNumber1 + 1, Math.abs(pitchNumber1 - pitchNumber2) - 1); for (let i = 0; i < divisions - 1; i++) { - power = - (Math.min(angle1, angle2) + - divisionAngle * (i + 1) - - 270) / - 360; + power = (Math.min(angle1, angle2) + divisionAngle * (i + 1) - 270) / 360; ratio[i] = Math.pow(this.powerBase, power); this.tempRatios.splice(pitchNumber1 + 1 + i, 0, ratio[i]); compareRatios[i] = this.tempRatios[i]; @@ -841,16 +853,13 @@ class TemperamentWidget { this._circleOfNotes(); } else if (event.target.innerHTML === "Preview") { //Preview Notes - docById("userEdit").innerHTML = - '
'; + docById("userEdit").innerHTML = '
'; this.createMainWheel(this.tempRatios, pitchNumber); for (let i = 0; i < pitchNumber; i++) { this.notesCircle.navItems[i].fillAttr = "#e0e0e0"; - this.notesCircle.navItems[i].sliceHoverAttr.fill = - "#e0e0e0"; + this.notesCircle.navItems[i].sliceHoverAttr.fill = "#e0e0e0"; this.notesCircle.navItems[i].slicePathAttr.fill = "#e0e0e0"; - this.notesCircle.navItems[i].sliceSelectedAttr.fill = - "#e0e0e0"; + this.notesCircle.navItems[i].sliceSelectedAttr.fill = "#e0e0e0"; } this.notesCircle.refreshWheel(); docById("userEdit").style.paddingLeft = "0px"; @@ -869,7 +878,7 @@ class TemperamentWidget { this.eqTempPitchNumber = pitchNumber; this.checkTemperament(compareRatios); - docById("done_").onclick = () =>{ + docById("done_").onclick = () => { //Go to main Circle of Notes this.ratios = this.tempRatios.slice(); frequency = this.frequencies[0]; @@ -880,25 +889,29 @@ class TemperamentWidget { } this.pitchNumber = pitchNumber; - this.eqTempPitchNumber = null ; - this.eqTempHzs = [] ; + this.eqTempPitchNumber = null; + this.eqTempHzs = []; this.checkTemperament(compareRatios); this._circleOfNotes(); }; - docById("preview").onclick = () =>{ + docById("preview").onclick = () => { this.equalEdit(); - this.eqTempPitchNumber = null ; - this.eqTempHzs = [] ; + this.eqTempPitchNumber = null; + this.eqTempHzs = []; }; } - }; - }; + }); + }/** + * Triggerred when the Ratios edit option is selected, + * + * @returns {void} + */ - ratioEdit () { + ratioEdit() { this.editMode = "ratio"; docById("userEdit").innerHTML = ""; - let ratioEdit = docById("userEdit"); + const ratioEdit = docById("userEdit"); ratioEdit.style.backgroundColor = "#c8C8C8"; ratioEdit.innerHTML = '
Ratio         :   

'; @@ -906,16 +919,14 @@ class TemperamentWidget { 'Recursion        '; ratioEdit.style.paddingLeft = "100px"; - + let divAppend; const addButtons = (preview) => { - let divAppend = document.createElement("div"); + divAppend = document.createElement("div"); divAppend.id = "divAppend"; if (preview) { - divAppend.innerHTML = - '
Back
Done
'; + divAppend.innerHTML = '
Back
Done
'; } else { - divAppend.innerHTML = - '
Preview
Done
'; + divAppend.innerHTML = '
Preview
Done
'; } divAppend.style.textAlign = "center"; divAppend.style.marginLeft = "-100px"; @@ -924,13 +935,13 @@ class TemperamentWidget { divAppend.style.overflow = "auto"; ratioEdit.append(divAppend); - let divAppend1 = docById("preview"); + const divAppend1 = docById("preview"); divAppend1.style.height = "30px"; divAppend1.style.marginLeft = "3px"; divAppend1.style.backgroundColor = platformColor.selectorBackground; divAppend1.style.width = "215px"; - let divAppend2 = docById("done_"); + const divAppend2 = docById("done_"); divAppend2.style.height = "30px"; divAppend2.style.marginRight = "3px"; divAppend2.style.backgroundColor = platformColor.selectorBackground; @@ -944,17 +955,17 @@ class TemperamentWidget { }; divAppend.onclick = (event) => { - let input1 = docById("ratioIn").value; - let input2 = docById("ratioOut").value; - let recursion = docById("recursion").value; - let len = this.frequencies.length; - let ratio1 = input1 / input2; - let ratio = []; - let frequency = []; + const input1 = docById("ratioIn").value; + const input2 = docById("ratioOut").value; + const recursion = docById("recursion").value; + const len = this.frequencies.length; + const ratio1 = input1 / input2; + const ratio = []; + const frequency = []; let frequency1; - let ratioDifference = []; - let index = []; - let compareRatios = []; + const ratioDifference = []; + const index = []; + const compareRatios = []; this.tempRatios = this.ratios.slice(); const calculateRatios = (i) => { @@ -987,7 +998,7 @@ class TemperamentWidget { this.tempRatios.sort((a, b) => { return a - b; }); - let pitchNumber = this.tempRatios.length - 1; + const pitchNumber = this.tempRatios.length - 1; if (event.target.innerHTML == "Done") { this.ratios = this.tempRatios.slice(); @@ -1009,16 +1020,13 @@ class TemperamentWidget { this._circleOfNotes(); } else if (event.target.innerHTML == "Preview") { //Preview Notes - docById("userEdit").innerHTML = - '
'; + docById("userEdit").innerHTML = '
'; this.createMainWheel(this.tempRatios, pitchNumber); for (let i = 0; i < pitchNumber; i++) { this.notesCircle.navItems[i].fillAttr = "#e0e0e0"; - this.notesCircle.navItems[i].sliceHoverAttr.fill = - "#e0e0e0"; + this.notesCircle.navItems[i].sliceHoverAttr.fill = "#e0e0e0"; this.notesCircle.navItems[i].slicePathAttr.fill = "#e0e0e0"; - this.notesCircle.navItems[i].sliceSelectedAttr.fill = - "#e0e0e0"; + this.notesCircle.navItems[i].sliceSelectedAttr.fill = "#e0e0e0"; } this.notesCircle.refreshWheel(); docById("userEdit").style.paddingLeft = "0px"; @@ -1043,7 +1051,7 @@ class TemperamentWidget { } this.checkTemperament(compareRatios); - docById("done_").onclick = () =>{ + docById("done_").onclick = () => { //Go to main Circle of Notes this.ratios = this.tempRatios.slice(); this.pitchNumber = this.ratios.length - 1; @@ -1061,29 +1069,33 @@ class TemperamentWidget { this.checkTemperament(compareRatios); this._circleOfNotes(); - this.NEqTempPitchNumber = null ; - this.NEqTempHzs = [] ; + this.NEqTempPitchNumber = null; + this.NEqTempHzs = []; }; - docById("preview").onclick = () =>{ + docById("preview").onclick = () => { this.ratioEdit(); - this.NEqTempPitchNumber = null ; - this.NEqTempHzs = [] ; + this.NEqTempPitchNumber = null; + this.NEqTempHzs = []; }; } }; }; + /** + * Triggerred when the Arbitrary edit option is selected, + * + * @returns {void} + */ - arbitraryEdit () { - this.editMode = "arbitrary" ; + arbitraryEdit() { + this.editMode = "arbitrary"; docById("userEdit").innerHTML = ""; - let arbitraryEdit = docById("userEdit"); - arbitraryEdit.innerHTML = - '
'; + const arbitraryEdit = docById("userEdit"); + arbitraryEdit.innerHTML = '
'; arbitraryEdit.style.paddingLeft = "0px"; - let radius = 128; - let height = 2 * radius; + const radius = 128; + const height = 2 * radius; let angle1 = []; this.tempRatios1 = this.ratios.slice(); @@ -1098,7 +1110,7 @@ class TemperamentWidget { if (pitchNumber == undefined) { pitchNumber = this.pitchNumber; } - let labels = []; + const labels = []; let label; for (let j = 0; j < pitchNumber; j++) { label = j.toString(); @@ -1120,19 +1132,15 @@ class TemperamentWidget { this.wheel1.sliceInitPathCustom = this.wheel1.slicePathCustom; this.wheel1.initWheel(labels); - let baseAngle = []; - let sliceAngle = []; - let angle = []; - let angleDiff = []; + const baseAngle = []; + const sliceAngle = []; + const angle = []; + const angleDiff = []; for (let i = 0; i < this.wheel1.navItemCount; i++) { this.wheel1.navItems[i].fillAttr = "#e0e0e0"; - this.wheel1.navItems[i].titleAttr.font = - "20 20px Impact, Charcoal, sans-serif"; - this.wheel1.navItems[i].titleSelectedAttr.font = - "20 20px Impact, Charcoal, sans-serif"; - angle[i] = - 270 + - 360 * (Math.log10(ratios[i]) / Math.log10(this.powerBase)); + this.wheel1.navItems[i].titleAttr.font = "20 20px Impact, Charcoal, sans-serif"; + this.wheel1.navItems[i].titleSelectedAttr.font = "20 20px Impact, Charcoal, sans-serif"; + angle[i] = 270 + 360 * (Math.log10(ratios[i]) / Math.log10(this.powerBase)); if (i !== 0) { if (i == this.pitchNumber - 1) { angleDiff[i - 1] = angle[0] + 360 - angle[i]; @@ -1167,8 +1175,7 @@ class TemperamentWidget { } this.wheel1.createWheel(); }; - arbitraryEdit.innerHTML += - '
'; + arbitraryEdit.innerHTML += '
'; this._createInnerWheel(); arbitraryEdit.innerHTML += @@ -1178,13 +1185,13 @@ class TemperamentWidget { height + "px>"; - let canvas = docById("circ1"); + const canvas = docById("circ1"); canvas.style.position = "absolute"; canvas.style.zIndex = 1; canvas.style.marginTop = "-305px"; - let ctx = canvas.getContext("2d"); - let centerX = canvas.width / 2; - let centerY = canvas.height / 2; + const ctx = canvas.getContext("2d"); + const centerX = canvas.width / 2; + const centerY = canvas.height / 2; ctx.beginPath(); ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); @@ -1219,20 +1226,18 @@ class TemperamentWidget { this.wheel.titleRotateAngle = 90; this.wheel.navItemsEnabled = false; - let minutes = []; - let angle = []; - let angleDiff1 = []; - let baseAngle1 = []; - let sliceAngle1 = []; + const minutes = []; + const angle = []; + const angleDiff1 = []; + const baseAngle1 = []; + const sliceAngle1 = []; angle1 = []; for (let i = 0; i <= pitchNumber; i++) { if (i !== pitchNumber) { minutes.push("|"); } //Change angles of outer circle - angle[i] = - 270 + - 360 * (Math.log10(ratios[i]) / Math.log10(this.powerBase)); + angle[i] = 270 + 360 * (Math.log10(ratios[i]) / Math.log10(this.powerBase)); if (i !== 0) { if (i == pitchNumber - 1) { angleDiff1[i - 1] = angle[0] + 360 - angle[i]; @@ -1283,11 +1288,11 @@ class TemperamentWidget { event.target.style.cursor = "pointer"; }; - divAppend.onclick = () =>{ + divAppend.onclick = () => { this.ratios = this.tempRatios1.slice(); this.typeOfEdit = "nonequal"; this.pitchNumber = this.ratios.length - 1; - let compareRatios = []; + const compareRatios = []; const frequency1 = this.frequencies[0]; this.frequencies = []; for (let i = 0; i < this.ratios.length; i++) { @@ -1303,25 +1308,24 @@ class TemperamentWidget { this.checkTemperament(compareRatios); this._circleOfNotes(); }; - }; - + } +/** + * Triggerred when in Arbritrary edit option + * The slider with option to slide the values of frequesncies opens. + * + * @returns {void} + */ arbitraryEditSlider (event, angle, ratios, pitchNumber) { const frequency = this.frequencies[0]; - let frequencies = []; + const frequencies = []; for (let j = 0; j <= pitchNumber; j++) { frequencies[j] = ratios[j] * frequency; frequencies[j] = frequencies[j].toFixed(2); } - let x, y; + for (let i = 0; i < pitchNumber; i++) { if (event.target.parentNode.id == "wheelnav-wheelDiv3-title-" + i) { - x = - event.clientX - - docById("wheelDiv3").getBoundingClientRect().left; - y = - event.clientY - - docById("wheelDiv3").getBoundingClientRect().top; if (docById("noteInfo1") !== null) { docById("noteInfo1").remove(); } @@ -1348,27 +1352,31 @@ class TemperamentWidget { docById("frequencySlider").oninput = () => { this._refreshInnerWheel(); }; - docById("done").onclick = () =>{ + docById("done").onclick = () => { this.tempRatios1 = this.tempRatios.slice(); - let pitchNumber = this.tempRatios1.length - 1; + const pitchNumber = this.tempRatios1.length - 1; this._createOuterWheel(this.tempRatios1, pitchNumber); }; - docById("close").onclick = () =>{ + docById("close").onclick = () => { this.tempRatios = this.tempRatios1.slice(); - let pitchNumber = this.tempRatios.length - 1; + const pitchNumber = this.tempRatios.length - 1; this._createInnerWheel(this.tempRatios, pitchNumber); docById("noteInfo1").remove(); }; } } - }; - - _refreshInnerWheel () { + } +/** + * Triggerred when in Arbritrary edit option + * The slider with option to slide the values of frequesncies opens for a refreshed value. + * + * @returns {void} + */ + _refreshInnerWheel() { docById("frequencydiv").innerHTML = docById("frequencySlider").value; const frequency = docById("frequencySlider").value; - let ratio = frequency / this.frequencies[0]; - let labels = []; - let ratioDifference = []; + const ratio = frequency / this.frequencies[0]; + const ratioDifference = []; this.tempRatios = this.tempRatios1.slice(); let index; @@ -1386,20 +1394,29 @@ class TemperamentWidget { break; } } - let pitchNumber = this.tempRatios.length - 1; + const pitchNumber = this.tempRatios.length - 1; logo.resetSynth(0); logo.synth.trigger( - 0, frequency, Singer.defaultBPMFactor * 0.01, "electronic synth", null, null + 0, + frequency, + Singer.defaultBPMFactor * 0.01, + "electronic synth", + null, + null ); this._createInnerWheel(this.tempRatios, pitchNumber); }; - - octaveSpaceEdit () { - this.editMode = "octave" ; +/** + * Triggerred when in octave space edit option. + * + * @returns {void} + */ + octaveSpaceEdit() { + this.editMode = "octave"; docById("userEdit").innerHTML = ""; - let len = this.ratios.length; - let octaveRatio = this.ratios[len - 1]; - let octaveSpaceEdit = docById("userEdit"); + const len = this.ratios.length; + const octaveRatio = this.ratios[len - 1]; + const octaveSpaceEdit = docById("userEdit"); octaveSpaceEdit.style.backgroundColor = "#c8C8C8"; octaveSpaceEdit.innerHTML = '

Octave Space      { return element === temperamentRatios[index]; }); @@ -1493,9 +1511,13 @@ class TemperamentWidget { this.inTemperament = "custom"; temperamentCell.innerHTML = this.inTemperament; } - }; - - _save () { + } +/** + * Triggerred when Save button is pressed. New action blocks are generated. + * + * @returns {void} + */ + _save() { let notesMatch = false; // let index = []; this.notes = []; @@ -1507,16 +1529,12 @@ class TemperamentWidget { notesMatch = false; if (this.ratios[i] == this.ratiosNotesPair[j][0]) { notesMatch = true; - this.notes[i] = - this.ratiosNotesPair[j][1][0] + - "(+0)" + - this.ratiosNotesPair[j][1][1]; + this.notes[i] = this.ratiosNotesPair[j][1][0] + "(+0)" + this.ratiosNotesPair[j][1][1]; break; } } if (!notesMatch) { - cents = - 1200 * (Math.log10(this.ratios[i]) / Math.log10(2)); + cents = 1200 * (Math.log10(this.ratios[i]) / Math.log10(2)); centsDiff = []; centsDiff1 = []; for (let j = 0; j < this.cents.length; j++) { @@ -1529,15 +1547,13 @@ class TemperamentWidget { idx = centsDiff1.indexOf(min); if (centsDiff[idx] < 0) { - this.notes[i] = - this.ratiosNotesPair[idx][1][0] + + this.notes[i] = this.ratiosNotesPair[idx][1][0] + "(-" + centsDiff1[idx].toFixed(0) + ")" + this.ratiosNotesPair[idx][1][1]; } else { - this.notes[i] = - this.ratiosNotesPair[idx][1][0] + + this.notes[i] = this.ratiosNotesPair[idx][1][0] + "(+" + centsDiff1[idx].toFixed(0) + ")" + @@ -1550,11 +1566,9 @@ class TemperamentWidget { // Global value OCTAVERATIO = this.powerBase; - let value = logo.blocks.findUniqueTemperamentName( - this.inTemperament - ); + const value = logo.blocks.findUniqueTemperamentName(this.inTemperament); this.inTemperament = value ; // change from temporary "custom" to "custom1" or "custom2" .. - let newStack = [ + const newStack = [ [0, "temperament1", 100, 100, [null, 1, 2, null]], [1, ["text", { value: value }], 0, 0, [0]], [2, ["storein"], 0, 0, [0, 3, 4, 5]], @@ -1562,20 +1576,8 @@ class TemperamentWidget { [4, ["number", { value: this.frequencies[0] }], 0, 0, [2]], [5, ["octavespace"], 0, 0, [2, 6, 9]], [6, ["divide"], 0, 0, [5, 7, 8]], - [ - 7, - ["number", { value: rationalToFraction(OCTAVERATIO)[0] }], - 0, - 0, - [6] - ], - [ - 8, - ["number", { value: rationalToFraction(OCTAVERATIO)[1] }], - 0, - 0, - [6] - ], + [7,["number", { value: rationalToFraction(OCTAVERATIO)[0] }],0,0,[6]], + [8,["number", { value: rationalToFraction(OCTAVERATIO)[1] }],0,0,[6]], [9, "vspace", 0, 0, [5, 10]] ]; let previousBlock = 9; @@ -1585,9 +1587,7 @@ class TemperamentWidget { if ( this.inTemperament === "equal" || this.inTemperament === "1/3 comma meantone" || - (this.typeOfEdit === "equal" && - this.divisions === this.pitchNumber) - ) { + (this.typeOfEdit === "equal" &&this.divisions === this.pitchNumber)) { newStack.push([ idx, "definefrequency", @@ -1673,10 +1673,7 @@ class TemperamentWidget { [ "text", { - value: this.notes[i].substring( - 0, - this.notes[i].length - 1 - ) + value: this.notes[i].substring(0,this.notes[i].length - 1) } ], 0, @@ -1729,10 +1726,7 @@ class TemperamentWidget { ]); newStack.push([ idx + 4, - [ - "number", - { value: rationalToFraction(this.ratios[i])[0] } - ], + ["number", { value: rationalToFraction(this.ratios[i])[0] }], 0, 0, [idx + 3] @@ -1777,10 +1771,7 @@ class TemperamentWidget { [ "text", { - value: this.notes[i].substring( - 0, - this.notes[i].length - 1 - ) + value: this.notes[i].substring(0,this.notes[i].length - 1) } ], 0, @@ -1807,10 +1798,10 @@ class TemperamentWidget { logo.blocks.loadNewBlocks(newStack); logo.textMsg(_("New action block generated!")); - let len = logo.synth.startingPitch.length; - let note = logo.synth.startingPitch.substring(0, len - 1); - let octave = logo.synth.startingPitch.slice(-1); - let newStack1 = [ + const len = logo.synth.startingPitch.length; + const note = logo.synth.startingPitch.substring(0, len - 1); + const octave = logo.synth.startingPitch.slice(-1); + const newStack1 = [ [0, "settemperament", 100, 100, [null, 1, 2, 3, null]], [1, ["temperamentname", { value: this.inTemperament }], 0, 0, [0]], [2, ["notename", { value: note }], 0, 0, [0]], @@ -1839,26 +1830,45 @@ class TemperamentWidget { logo.blocks.protoBlockDict["custompitch"].hidden = false; logo.blocks.palettes.updatePalettes("pitch"); } - }; + } + /** + * Triggerred when play button is pressed on a single note in table + *Notes are displayed in sequence and can be played one after another + * + * @returns {void} + */ - playNote (pitchNumber) { + playNote(pitchNumber) { logo.resetSynth(0); - let duration = 1 / 2; + const duration = 1 / 2; let notes; if (docById("wheelDiv4") == null) { notes = this.frequencies[pitchNumber]; - if (this.editMode=="equal" && this.eqTempHzs && this.eqTempHzs.length) notes = this.eqTempHzs[pitchNumber] ; - else if (this.editMode=="ratio" && this.NEqTempHzs && this.NEqTempHzs.length) notes = this.NEqTempHzs[pitchNumber] ; + if (this.editMode=="equal" && this.eqTempHzs && this.eqTempHzs.length) + notes = this.eqTempHzs[pitchNumber] ; + else if (this.editMode=="ratio" && this.NEqTempHzs && this.NEqTempHzs.length) + notes = this.NEqTempHzs[pitchNumber] ; } else { notes = this.tempRatios1[pitchNumber] * this.frequencies[0]; } logo.synth.trigger( - 0, notes, Singer.defaultBPMFactor * duration, "electronic synth", null, null + 0, + notes, + Singer.defaultBPMFactor * duration, + "electronic synth", + null, + null ); - }; + } + /** + * Triggerred when play button is pressed + *All Notes are played in sequence from the start. + * + * @returns {void} + */ - playAll () { + playAll() { let p = 0; this.playbackForward = true; this._playing = !this._playing; @@ -1899,8 +1909,8 @@ class TemperamentWidget { const duration = 1 / 2; const startingPitch = logo.synth.startingPitch; const startingPitchOcatve = Number(startingPitch.slice(-1)); - let octave = startingPitchOcatve - 1; - let startPitch = pitchToFrequency( + const octave = startingPitchOcatve - 1; + const startPitch = pitchToFrequency( startingPitch.substring(0, startingPitch.length - 1), octave, 0, @@ -1908,8 +1918,10 @@ class TemperamentWidget { ); let pitchNumber = this.pitchNumber; - if (this.editMode == "equal" && this.eqTempPitchNumber) pitchNumber = this.eqTempPitchNumber ; - else if (this.editMode == "ratio" && this.NEqTempPitchNumber) pitchNumber = this.NEqTempPitchNumber ; + if (this.editMode == "equal" && this.eqTempPitchNumber) + pitchNumber = this.eqTempPitchNumber ; + else if (this.editMode == "ratio" && this.NEqTempPitchNumber) + pitchNumber = this.NEqTempPitchNumber ; if (docById("wheelDiv4") !== null) { pitchNumber = this.tempRatios1.length - 1; } @@ -1937,68 +1949,47 @@ class TemperamentWidget { if (this.circleIsVisible == false && docById("wheelDiv4") == null) { if (i === pitchNumber) { this.notesCircle.navItems[0].fillAttr = "#808080"; - this.notesCircle.navItems[0].sliceHoverAttr.fill = - "#808080"; + this.notesCircle.navItems[0].sliceHoverAttr.fill = "#808080"; this.notesCircle.navItems[0].slicePathAttr.fill = "#808080"; - this.notesCircle.navItems[0].sliceSelectedAttr.fill = - "#808080"; + this.notesCircle.navItems[0].sliceSelectedAttr.fill = "#808080"; } else { this.notesCircle.navItems[i].fillAttr = "#808080"; - this.notesCircle.navItems[i].sliceHoverAttr.fill = - "#808080"; + this.notesCircle.navItems[i].sliceHoverAttr.fill = "#808080"; this.notesCircle.navItems[i].slicePathAttr.fill = "#808080"; - this.notesCircle.navItems[i].sliceSelectedAttr.fill = - "#808080"; + this.notesCircle.navItems[i].sliceSelectedAttr.fill = "#808080"; } if (this.playbackForward == false && i < pitchNumber) { if (i === pitchNumber - 1) { this.notesCircle.navItems[0].fillAttr = "#c8C8C8"; - this.notesCircle.navItems[0].sliceHoverAttr.fill = - "#c8C8C8"; - this.notesCircle.navItems[0].slicePathAttr.fill = - "#c8C8C8"; - this.notesCircle.navItems[0].sliceSelectedAttr.fill = - "#c8C8C8"; + this.notesCircle.navItems[0].sliceHoverAttr.fill = "#c8C8C8"; + this.notesCircle.navItems[0].slicePathAttr.fill = "#c8C8C8"; + this.notesCircle.navItems[0].sliceSelectedAttr.fill = "#c8C8C8"; } else { this.notesCircle.navItems[i + 1].fillAttr = "#c8C8C8"; - this.notesCircle.navItems[i + 1].sliceHoverAttr.fill = - "#c8C8C8"; - this.notesCircle.navItems[i + 1].slicePathAttr.fill = - "#c8C8C8"; - this.notesCircle.navItems[ - i + 1 - ].sliceSelectedAttr.fill = "#c8C8C8"; + this.notesCircle.navItems[i + 1].sliceHoverAttr.fill = "#c8C8C8"; + this.notesCircle.navItems[i + 1].slicePathAttr.fill = "#c8C8C8"; + this.notesCircle.navItems[i + 1].sliceSelectedAttr.fill = "#c8C8C8"; } } else { if (i !== 0) { this.notesCircle.navItems[i - 1].fillAttr = "#c8C8C8"; - this.notesCircle.navItems[i - 1].sliceHoverAttr.fill = - "#c8C8C8"; - this.notesCircle.navItems[i - 1].slicePathAttr.fill = - "#c8C8C8"; - this.notesCircle.navItems[ - i - 1 - ].sliceSelectedAttr.fill = "#c8C8C8"; + this.notesCircle.navItems[i - 1].sliceHoverAttr.fill = "#c8C8C8"; + this.notesCircle.navItems[i - 1].slicePathAttr.fill = "#c8C8C8"; + this.notesCircle.navItems[i - 1].sliceSelectedAttr.fill = "#c8C8C8"; } } this.notesCircle.refreshWheel(); - } else if ( - this.circleIsVisible == true && - docById("wheelDiv4") == null - ) { - docById("pitchNumber_" + i).style.background = - platformColor.labelColor; + } else if (this.circleIsVisible == true && docById("wheelDiv4") == null) { + docById("pitchNumber_" + i).style.background = platformColor.labelColor; if (this.playbackForward == false && i < pitchNumber) { j = i + 1; - docById("pitchNumber_" + j).style.background = - platformColor.selectorBackground; + docById("pitchNumber_" + j).style.background = platformColor.selectorBackground; } else { if (i !== 0) { j = i - 1; - docById("pitchNumber_" + j).style.background = - platformColor.selectorBackground; + docById("pitchNumber_" + j).style.background = platformColor.selectorBackground; } } } else if (docById("wheelDiv4") !== null) { @@ -2019,26 +2010,19 @@ class TemperamentWidget { this.wheel1.navItems[0].fillAttr = "#e0e0e0"; this.wheel1.navItems[0].sliceHoverAttr.fill = "#e0e0e0"; this.wheel1.navItems[0].slicePathAttr.fill = "#e0e0e0"; - this.wheel1.navItems[0].sliceSelectedAttr.fill = - "#e0e0e0"; + this.wheel1.navItems[0].sliceSelectedAttr.fill = "#e0e0e0"; } else { this.wheel1.navItems[i + 1].fillAttr = "#e0e0e0"; - this.wheel1.navItems[i + 1].sliceHoverAttr.fill = - "#e0e0e0"; - this.wheel1.navItems[i + 1].slicePathAttr.fill = - "#e0e0e0"; - this.wheel1.navItems[i + 1].sliceSelectedAttr.fill = - "#e0e0e0"; + this.wheel1.navItems[i + 1].sliceHoverAttr.fill = "#e0e0e0"; + this.wheel1.navItems[i + 1].slicePathAttr.fill = "#e0e0e0"; + this.wheel1.navItems[i + 1].sliceSelectedAttr.fill = "#e0e0e0"; } } else { if (i !== 0) { this.wheel1.navItems[i - 1].fillAttr = "#e0e0e0"; - this.wheel1.navItems[i - 1].sliceHoverAttr.fill = - "#e0e0e0"; - this.wheel1.navItems[i - 1].slicePathAttr.fill = - "#e0e0e0"; - this.wheel1.navItems[i - 1].sliceSelectedAttr.fill = - "#e0e0e0"; + this.wheel1.navItems[i - 1].sliceHoverAttr.fill = "#e0e0e0"; + this.wheel1.navItems[i - 1].slicePathAttr.fill = "#e0e0e0"; + this.wheel1.navItems[i - 1].sliceSelectedAttr.fill = "#e0e0e0"; } } @@ -2056,8 +2040,7 @@ class TemperamentWidget { __playLoop(i); }, Singer.defaultBPMFactor * 1000 * duration); } else { - cell.innerHTML = - '    '; if (i !== -1) { setTimeout(() => { - if ( - this.circleIsVisible == false && - docById("wheelDiv4") == null - ) { - this.notesCircle.navItems[i - 1].fillAttr = - "#c8C8C8"; - this.notesCircle.navItems[ - i - 1 - ].sliceHoverAttr.fill = "#c8C8C8"; - this.notesCircle.navItems[ - i - 1 - ].slicePathAttr.fill = "#c8C8C8"; - this.notesCircle.navItems[ - i - 1 - ].sliceSelectedAttr.fill = "#c8C8C8"; + if (this.circleIsVisible == false && docById("wheelDiv4") == null) { + this.notesCircle.navItems[i - 1].fillAttr = "#c8C8C8"; + this.notesCircle.navItems[i - 1].sliceHoverAttr.fill = "#c8C8C8"; + this.notesCircle.navItems[i - 1].slicePathAttr.fill = "#c8C8C8"; + this.notesCircle.navItems[i - 1].sliceSelectedAttr.fill = "#c8C8C8"; this.notesCircle.refreshWheel(); - } else if ( - this.circleIsVisible == true && - docById("wheelDiv4") == null - ) { + } else if (this.circleIsVisible == true && docById("wheelDiv4") == null) { j = i - 1; - docById("pitchNumber_" + j).style.background = - platformColor.selectorBackground; + docById("pitchNumber_" + j).style.background = platformColor.selectorBackground; } else if (docById("wheelDiv4") !== null) { this.wheel1.navItems[i - 1].fillAttr = "#e0e0e0"; - this.wheel1.navItems[i - 1].sliceHoverAttr.fill = - "#e0e0e0"; - this.wheel1.navItems[i - 1].slicePathAttr.fill = - "#e0e0e0"; - this.wheel1.navItems[i - 1].sliceSelectedAttr.fill = - "#e0e0e0"; + this.wheel1.navItems[i - 1].sliceHoverAttr.fill = "#e0e0e0"; + this.wheel1.navItems[i - 1].slicePathAttr.fill = "#e0e0e0"; + this.wheel1.navItems[i - 1].sliceSelectedAttr.fill = "#e0e0e0"; + this.wheel1.refreshWheel(); } }, Singer.defaultBPMFactor * 1000 * duration); @@ -2111,15 +2078,18 @@ class TemperamentWidget { if (this._playing) { __playLoop(0); } - }; + } + /** + * Initialises the temperament widget + * + * @returns {void} + */ - init(logo) { - logo = logo; + init() { const w = window.innerWidth; this._cellScale = w / 1200; - const iconSize = TemperamentWidget.ICONSIZE * this._cellScale; const widgetWindow = window.widgetWindows.windowFor(this, "temperament"); this.widgetWindow = widgetWindow; @@ -2153,9 +2123,9 @@ class TemperamentWidget { this._playing = false; - let buttonTable = document.createElement("table"); - let header = buttonTable.createTHead(); - let row = header.insertRow(0); + const buttonTable = document.createElement("table"); + const header = buttonTable.createTHead(); + const row = header.insertRow(0); row.id = "buttonsRow"; temperamentCell = row.insertCell(); @@ -2167,15 +2137,14 @@ class TemperamentWidget { temperamentCell.style.minHeight = temperamentCell.style.height; temperamentCell.style.maxHeight = temperamentCell.style.height; temperamentCell.style.textAlign = "center"; - temperamentCell.style.backgroundColor = - platformColor.selectorBackground; + temperamentCell.style.backgroundColor = platformColor.selectorBackground; this.playButton = widgetWindow.addButton( "play-button.svg", TemperamentWidget.ICONSIZE, _("Play all") ); - this.playButton.onclick = () =>{ + this.playButton.onclick = () => { this.playAll(); }; @@ -2183,11 +2152,11 @@ class TemperamentWidget { "export-chunk.svg", TemperamentWidget.ICONSIZE, _("Save") - ).onclick = () =>{ + ).onclick = () => { this._save(); }; - let noteCell = widgetWindow.addButton( + const noteCell = widgetWindow.addButton( "play-button.svg", TemperamentWidget.ICONSIZE, _("Table") @@ -2200,9 +2169,9 @@ class TemperamentWidget { this.scaleNotes = _buildScale(this.scale); this.scaleNotes = this.scaleNotes[0]; this.powerBase = 2; - let startingPitch = logo.synth.startingPitch; - let str = []; - let note = []; + const startingPitch = logo.synth.startingPitch; + const str = []; + const note = []; this.notes = []; this.frequencies = []; this.cents = []; @@ -2232,10 +2201,12 @@ class TemperamentWidget { this.ratios[i] = TEMPERAMENT[this.inTemperament][pitchNumber][0]; } this.frequencies[i] = logo.synth - .getCustomFrequency((this.notes[i][0] + this.notes[i][1] + "") ,this.inTemperament ) + .getCustomFrequency( + this.notes[i][0] + this.notes[i][1] + "", + this.inTemperament + ) .toFixed(2); - this.cents[i] = - 1200 * (Math.log10(this.ratios[i]) / Math.log10(2)); + this.cents[i] = 1200 * (Math.log10(this.ratios[i]) / Math.log10(2)); this.ratiosNotesPair[i] = [this.ratios[i], this.notes[i]]; } else { if (isCustom(this.inTemperament)) { @@ -2265,20 +2236,17 @@ class TemperamentWidget { .toFixed(2); this.intervals[i] = t.interval[i]; this.ratios[i] = t[this.intervals[i]]; - this.cents[i] = - 1200 * (Math.log10(this.ratios[i]) / Math.log10(2)); + this.cents[i] = 1200 * (Math.log10(this.ratios[i]) / Math.log10(2)); this.ratiosNotesPair[i] = [this.ratios[i], this.notes[i]]; } } this.toggleNotesButton = () => { if (this.circleIsVisible) { - noteCell.getElementsByTagName("img")[0].src = - "header-icons/circle.svg"; + noteCell.getElementsByTagName("img")[0].src = "header-icons/circle.svg"; noteCell.getElementsByTagName("img")[0].title = "circle"; noteCell.getElementsByTagName("img")[0].alt = "circle"; } else { - noteCell.getElementsByTagName("img")[0].src = - "header-icons/table.svg"; + noteCell.getElementsByTagName("img")[0].src = "header-icons/table.svg"; noteCell.getElementsByTagName("img")[0].title = "table"; noteCell.getElementsByTagName("img")[0].alt = "table"; } @@ -2286,8 +2254,8 @@ class TemperamentWidget { this._circleOfNotes(); - noteCell.onclick = (event) => { - this.editMode = null ; + noteCell.onclick = () => { + this.editMode = null; if (this.circleIsVisible) { this._circleOfNotes(); } else { @@ -2304,5 +2272,5 @@ class TemperamentWidget { }; widgetWindow.sendToCenter(); - }; + } } From 6a86702073aa8d385f0d089380b5d7ae51778965 Mon Sep 17 00:00:00 2001 From: Anindya Kundu Date: Wed, 27 Jan 2021 01:35:34 +0530 Subject: [PATCH 3/3] Move init to top and format code --- js/widgets/temperament.js | 745 +++++++++++++++++--------------------- 1 file changed, 332 insertions(+), 413 deletions(-) diff --git a/js/widgets/temperament.js b/js/widgets/temperament.js index 7c33932005..cbe08d36fa 100644 --- a/js/widgets/temperament.js +++ b/js/widgets/temperament.js @@ -12,7 +12,7 @@ * You should have received a copy of the GNU Affero General Public License along with this * library; if not, write to the Free Software Foundation, 51 Franklin Street, Suite 500 Boston, * MA 02110-1335 USA. -*/ + */ /* global platformColor, docById, wheelnav, slicePath, logo, Singer, isCustom, @@ -24,24 +24,24 @@ const temperamentTableDiv = document.createElement("div"); let temperamentCell = null; + /** * @class * @classdesc pertains to setting up all features of the temperament widget and its UI features. * * Private members' names begin with underscore '_". */ - - class TemperamentWidget { static BUTTONDIVWIDTH = 430; static OUTERWINDOWWIDTH = 685; static INNERWINDOWWIDTH = 600; static BUTTONSIZE = 53; static ICONSIZE = 32; + /** * @constructor */ - constructor(){ + constructor() { this.inTemperament = null; this.lastTriggered = null; this.notes = []; @@ -55,12 +55,200 @@ class TemperamentWidget { this.circleIsVisible = true; this.playbackForward = true; } - + + /** + * Initialises the temperament widget. + * @returns {void} + */ + init() { + const w = window.innerWidth; + this._cellScale = w / 1200; + + const widgetWindow = window.widgetWindows.windowFor(this, "temperament"); + this.widgetWindow = widgetWindow; + widgetWindow.clear(); + widgetWindow.show(); + + widgetWindow.getWidgetBody().append(temperamentTableDiv); + widgetWindow.getWidgetBody().style.height = "500px"; + widgetWindow.getWidgetBody().style.width = "500px"; + + widgetWindow.onclose = () => { + logo.synth.setMasterVolume(0); + logo.synth.stop(); + if (docById("wheelDiv2") != null) { + docById("wheelDiv2").style.display = "none"; + this.notesCircle.removeWheel(); + } + if (docById("wheelDiv3") != null) { + docById("wheelDiv3").style.display = "none"; + this.wheel.removeWheel(); + } + if (docById("wheelDiv4") != null) { + docById("wheelDiv4").style.display = "none"; + this.wheel1.removeWheel(); + } + + widgetWindow.destroy(); + }; + + this._playing = false; + + const buttonTable = document.createElement("table"); + const header = buttonTable.createTHead(); + const row = header.insertRow(0); + row.id = "buttonsRow"; + + temperamentCell = row.insertCell(); + temperamentCell.innerHTML = this.inTemperament; + temperamentCell.style.width = 2 * TemperamentWidget.BUTTONSIZE + "px"; + temperamentCell.style.minWidth = temperamentCell.style.width; + temperamentCell.style.maxWidth = temperamentCell.style.width; + temperamentCell.style.height = TemperamentWidget.BUTTONSIZE + "px"; + temperamentCell.style.minHeight = temperamentCell.style.height; + temperamentCell.style.maxHeight = temperamentCell.style.height; + temperamentCell.style.textAlign = "center"; + temperamentCell.style.backgroundColor = platformColor.selectorBackground; + + this.playButton = widgetWindow.addButton( + "play-button.svg", + TemperamentWidget.ICONSIZE, + _("Play all") + ); + this.playButton.onclick = () => { + this.playAll(); + }; + + widgetWindow.addButton( + "export-chunk.svg", + TemperamentWidget.ICONSIZE, + _("Save") + ).onclick = () => { + this._save(); + }; + + const noteCell = widgetWindow.addButton( + "play-button.svg", + TemperamentWidget.ICONSIZE, + _("Table") + ); + + let t = TEMPERAMENT[this.inTemperament]; + this.pitchNumber = t.pitchNumber; + this.octaveChanged = false; + this.scale = this.scale[0] + " " + this.scale[1]; + this.scaleNotes = _buildScale(this.scale); + this.scaleNotes = this.scaleNotes[0]; + this.powerBase = 2; + const startingPitch = logo.synth.startingPitch; + const str = []; + const note = []; + this.notes = []; + this.frequencies = []; + this.cents = []; + this.intervals = []; + this.ratios = []; + this.ratiosNotesPair = []; + + let pitchNumber; + for (let i = 0; i <= this.pitchNumber; i++) { + if ( + isCustom(this.inTemperament) && + TEMPERAMENT[this.inTemperament]["0"][1] !== undefined + ) { + //If temperament selected is custom and it is defined by user. + pitchNumber = i + ""; + if (i === this.pitchNumber) { + this.notes[i] = [ + TEMPERAMENT[this.inTemperament]["0"][1], + Number(TEMPERAMENT[this.inTemperament]["0"][2]) + 1 + ]; + this.ratios[i] = this.powerBase; + } else { + this.notes[i] = [ + TEMPERAMENT[this.inTemperament][pitchNumber][1], + TEMPERAMENT[this.inTemperament][pitchNumber][2] + ]; + this.ratios[i] = TEMPERAMENT[this.inTemperament][pitchNumber][0]; + } + this.frequencies[i] = logo.synth + .getCustomFrequency( + this.notes[i][0] + this.notes[i][1] + "", + this.inTemperament + ) + .toFixed(2); + this.cents[i] = 1200 * (Math.log10(this.ratios[i]) / Math.log10(2)); + this.ratiosNotesPair[i] = [this.ratios[i], this.notes[i]]; + } else { + if (isCustom(this.inTemperament)) { + // If temperament selected is custom and it is not defined by user + // then custom temperament behaves like equal temperament. + t = TEMPERAMENT["equal"]; + } + str[i] = getNoteFromInterval(startingPitch, t.interval[i]); + this.notes[i] = str[i]; + note[i] = str[i][0]; + + if ( + str[i][0].substring(1, str[i][0].length) === FLAT || + str[i][0].substring(1, str[i][0].length) === "b" + ) { + note[i] = str[i][0].replace(FLAT, "b"); + } else if ( + str[i][0].substring(1, str[i][0].length) === SHARP || + str[i][0].substring(1, str[i][0].length) === "#" + ) { + note[i] = str[i][0].replace(SHARP, "#"); + } + + str[i] = note[i] + str[i][1]; + this.frequencies[i] = logo.synth + ._getFrequency(str[i], true, this.inTemperament) + .toFixed(2); + this.intervals[i] = t.interval[i]; + this.ratios[i] = t[this.intervals[i]]; + this.cents[i] = 1200 * (Math.log10(this.ratios[i]) / Math.log10(2)); + this.ratiosNotesPair[i] = [this.ratios[i], this.notes[i]]; + } + } + this.toggleNotesButton = () => { + if (this.circleIsVisible) { + noteCell.getElementsByTagName("img")[0].src = "header-icons/circle.svg"; + noteCell.getElementsByTagName("img")[0].title = "circle"; + noteCell.getElementsByTagName("img")[0].alt = "circle"; + } else { + noteCell.getElementsByTagName("img")[0].src = "header-icons/table.svg"; + noteCell.getElementsByTagName("img")[0].title = "table"; + noteCell.getElementsByTagName("img")[0].alt = "table"; + } + }; + + this._circleOfNotes(); + + noteCell.onclick = () => { + this.editMode = null; + if (this.circleIsVisible) { + this._circleOfNotes(); + } else { + this._graphOfNotes(); + } + }; + + widgetWindow.addButton( + "add2.svg", + TemperamentWidget.ICONSIZE, + _("Add pitches") + ).onclick = () => { + this.edit(); + }; + + widgetWindow.sendToCenter(); + } /** * @deprecated */ - _addButton (row, icon, iconSize, label) { + _addButton(row, icon, iconSize, label) { const cell = row.insertCell(-1); cell.innerHTML = '   { this.showNoteInfo(e); }); - }; -/** + } + + /** * Triggered when the a note is pressed. - * * @param {Object} event * @returns {void} */ showNoteInfo = (event) => { let x, y, frequency, noteDefined; let cents, centsDiff, centsDiff1, min, index; - + for (let i = 0; i < this.notesCircle.navItemCount; i++) { if ( event.target.id == "wheelnav-wheelDiv2-slice-" + i || @@ -402,14 +589,11 @@ class TemperamentWidget { /** * Triggered when the user wants to edit frequency. - * * @param {Object} event * @returns {void} */ - editFrequency = (event) => { const i = Number(event.target.dataset.message); - docById("noteInfo").style.width = "180px"; docById("noteInfo").style.height = "130px"; @@ -429,7 +613,6 @@ class TemperamentWidget { '

Done
'; docById("frequencySlider1").oninput = () => { - docById("frequencydiv1").innerHTML = docById("frequencySlider1").value; const frequency = docById("frequencySlider1").value; const ratio = frequency / this.frequencies[0]; @@ -439,11 +622,11 @@ class TemperamentWidget { this.temporaryRatios[i] = ratio; logo.resetSynth(0); logo.synth.trigger( - 0, - frequency, - Singer.defaultBPMFactor * 0.01, + 0, + frequency, + Singer.defaultBPMFactor * 0.01, "electronic synth", - null, + null, null ); this.createMainWheel(this.temporaryRatios); @@ -469,12 +652,12 @@ class TemperamentWidget { docById("noteInfo").remove(); }; }; + /** - * Triggered when graph of notes UI element is stelected - * displays circular graph of all the notes present. + * Triggered when graph of notes UI element is stelected displays circular graph of all the + * notes present. * @returns {void} */ - _graphOfNotes() { this.circleIsVisible = true; this.toggleNotesButton(); @@ -492,14 +675,7 @@ class TemperamentWidget { if (isCustom(this.inTemperament)) { menuLabels = ["Play", "Pitch Number", "Ratio", "Frequency"]; } else { - menuLabels = [ - "Play", - "Pitch Number", - "Ratio", - "Interval", - "Note", - "Frequency" - ]; + menuLabels = ["Play", "Pitch Number", "Ratio", "Interval", "Note", "Frequency"]; menuLabels.splice(5, 0, this.scale); } notesGraph.innerHTML = @@ -542,8 +718,6 @@ class TemperamentWidget { '
'; docById("tableOfNotes").innerHTML = pitchNumberColumn; - - const notesRow = []; const notesCell = []; const ratios = []; @@ -594,7 +768,7 @@ class TemperamentWidget { //Ratio notesCell[(i, 2)] = notesRow[i].insertCell(-1); notesCell[(i, 2)].innerHTML = ratios[i]; - notesCell[(i, 2)].style.backgroundColor = platformColor.selectorBackground; + notesCell[(i, 2)].style.backgroundColor = platformColor.selectorBackground; notesCell[(i, 2)].style.textAlign = "center"; if (!isCustom(this.inTemperament)) { @@ -644,17 +818,17 @@ class TemperamentWidget { notesCell[(i, 2)].style.width = 60 + "px"; } } - }; + } + /** - * Triggerred when any one of the UI edit elemnts is selected - * + * Triggerred when any one of the UI edit elemnts is selected. * @returns {void} */ edit() { - this.editMode = null ; + this.editMode = null; logo.synth.setMasterVolume(0); logo.synth.stop(); - + if (docById("wheelDiv2") != null) { docById("wheelDiv2").style.display = "none"; this.notesCircle.removeWheel(); @@ -672,9 +846,8 @@ class TemperamentWidget { } docById("menu").innerHTML = menus; - docById("editOctave").innerHTML += - ''; - let menuItems = document.querySelectorAll("#editMenus"); + docById("editOctave").innerHTML += ''; + const menuItems = document.querySelectorAll("#editMenus"); for (let i = 0; i < editMenus.length; i++) { menuItems[i].style.background = platformColor.selectorBackground; menuItems[i].style.height = 30 + "px"; @@ -716,14 +889,12 @@ class TemperamentWidget { menuItems[3].style.background = "#c8C8C8"; this.octaveSpaceEdit(); }; - }; + } /** - * Triggerred when the Equal edit option is selected, - * + * Triggerred when the Equal edit option is selected. * @returns {void} */ - equalEdit() { this.editMode = "equal"; docById("userEdit").innerHTML = ""; @@ -736,16 +907,18 @@ class TemperamentWidget { this.pitchNumber + '">'; equalEdit.style.paddingLeft = "80px"; - + let divAppend; const addDivision = (preview) => { // Add Buttons divAppend = document.createElement("div"); divAppend.id = "divAppend"; if (preview) { - divAppend.innerHTML = '
Back
Done
'; + divAppend.innerHTML = + '
Back
Done
'; } else { - divAppend.innerHTML = '
Preview
Done
'; + divAppend.innerHTML = + '
Preview
Done
'; } divAppend.style.textAlign = "center"; divAppend.style.marginLeft = "-80px"; @@ -765,7 +938,7 @@ class TemperamentWidget { divAppend2.style.marginRight = "3px"; divAppend2.style.backgroundColor = platformColor.selectorBackground; divAppend2.style.width = "205px"; - } + }; addDivision(false); @@ -787,7 +960,6 @@ class TemperamentWidget { this.tempRatios = []; divAppend.addEventListener("click", (event) => { - let angle1, angle2, divisionAngle, power, frequency; pitchNumber1 = Number(docById("octaveIn").value); pitchNumber2 = Number(docById("octaveOut").value); @@ -819,13 +991,14 @@ class TemperamentWidget { this.typeOfEdit = "equal"; this.divisions = divisions; } else { - pitchNumber = divisions + Number(pitchNumber) - Math.abs(pitchNumber1 - pitchNumber2); - angle1 = 270 + - 360 * - (Math.log10(this.tempRatios[pitchNumber1]) / Math.log10(this.powerBase)); - angle2 = 270 + - 360 * - (Math.log10(this.tempRatios[pitchNumber2]) / Math.log10(this.powerBase)); + pitchNumber = + divisions + Number(pitchNumber) - Math.abs(pitchNumber1 - pitchNumber2); + angle1 = + 270 + + 360 * (Math.log10(this.tempRatios[pitchNumber1]) / Math.log10(this.powerBase)); + angle2 = + 270 + + 360 * (Math.log10(this.tempRatios[pitchNumber2]) / Math.log10(this.powerBase)); divisionAngle = Math.abs(angle2 - angle1) / divisions; this.tempRatios.splice(pitchNumber1 + 1, Math.abs(pitchNumber1 - pitchNumber2) - 1); for (let i = 0; i < divisions - 1; i++) { @@ -889,25 +1062,25 @@ class TemperamentWidget { } this.pitchNumber = pitchNumber; - this.eqTempPitchNumber = null; - this.eqTempHzs = []; + this.eqTempPitchNumber = null; + this.eqTempHzs = []; this.checkTemperament(compareRatios); this._circleOfNotes(); }; docById("preview").onclick = () => { this.equalEdit(); - this.eqTempPitchNumber = null; - this.eqTempHzs = []; + this.eqTempPitchNumber = null; + this.eqTempHzs = []; }; } }); - }/** - * Triggerred when the Ratios edit option is selected, - * + } + + /** + * Triggerred when the Ratios edit option is selected. * @returns {void} */ - ratioEdit() { this.editMode = "ratio"; docById("userEdit").innerHTML = ""; @@ -918,15 +1091,17 @@ class TemperamentWidget { ratioEdit.innerHTML += 'Recursion        '; ratioEdit.style.paddingLeft = "100px"; - + let divAppend; const addButtons = (preview) => { divAppend = document.createElement("div"); divAppend.id = "divAppend"; if (preview) { - divAppend.innerHTML = '
Back
Done
'; + divAppend.innerHTML = + '
Back
Done
'; } else { - divAppend.innerHTML = '
Preview
Done
'; + divAppend.innerHTML = + '
Preview
Done
'; } divAppend.style.textAlign = "center"; divAppend.style.marginLeft = "-100px"; @@ -946,7 +1121,7 @@ class TemperamentWidget { divAppend2.style.marginRight = "3px"; divAppend2.style.backgroundColor = platformColor.selectorBackground; divAppend2.style.width = "205px"; - } + }; addButtons(false); @@ -1033,7 +1208,7 @@ class TemperamentWidget { addButtons(true); divAppend.style.marginTop = docById("wheelDiv2").style.height; docById("preview").style.marginLeft = "100px"; - + //make temperary this.ratios = this.tempRatios.slice(); this.typeOfEdit = "nonequal"; @@ -1050,7 +1225,7 @@ class TemperamentWidget { compareRatios[i] = compareRatios[i].toFixed(2); } this.checkTemperament(compareRatios); - + docById("done_").onclick = () => { //Go to main Circle of Notes this.ratios = this.tempRatios.slice(); @@ -1080,15 +1255,14 @@ class TemperamentWidget { }; } }; - }; + } + /** - * Triggerred when the Arbitrary edit option is selected, - * + * Triggerred when the Arbitrary edit option is selected. * @returns {void} */ - arbitraryEdit() { - this.editMode = "arbitrary"; + this.editMode = "arbitrary"; docById("userEdit").innerHTML = ""; const arbitraryEdit = docById("userEdit"); arbitraryEdit.innerHTML = '
'; @@ -1139,7 +1313,8 @@ class TemperamentWidget { for (let i = 0; i < this.wheel1.navItemCount; i++) { this.wheel1.navItems[i].fillAttr = "#e0e0e0"; this.wheel1.navItems[i].titleAttr.font = "20 20px Impact, Charcoal, sans-serif"; - this.wheel1.navItems[i].titleSelectedAttr.font = "20 20px Impact, Charcoal, sans-serif"; + this.wheel1.navItems[i].titleSelectedAttr.font = + "20 20px Impact, Charcoal, sans-serif"; angle[i] = 270 + 360 * (Math.log10(ratios[i]) / Math.log10(this.powerBase)); if (i !== 0) { if (i == this.pitchNumber - 1) { @@ -1271,8 +1446,6 @@ class TemperamentWidget { this._createOuterWheel(); - - const divAppend = document.createElement("div"); divAppend.id = "divAppend"; divAppend.innerHTML = "Done"; @@ -1309,21 +1482,20 @@ class TemperamentWidget { this._circleOfNotes(); }; } -/** - * Triggerred when in Arbritrary edit option + + /** + * Triggerred when in Arbritrary edit option. * The slider with option to slide the values of frequesncies opens. - * * @returns {void} */ - arbitraryEditSlider (event, angle, ratios, pitchNumber) { + arbitraryEditSlider(event, angle, ratios, pitchNumber) { const frequency = this.frequencies[0]; const frequencies = []; for (let j = 0; j <= pitchNumber; j++) { frequencies[j] = ratios[j] * frequency; frequencies[j] = frequencies[j].toFixed(2); } - - + for (let i = 0; i < pitchNumber; i++) { if (event.target.parentNode.id == "wheelnav-wheelDiv3-title-" + i) { if (docById("noteInfo1") !== null) { @@ -1366,10 +1538,10 @@ class TemperamentWidget { } } } -/** - * Triggerred when in Arbritrary edit option + + /** + * Triggerred when in Arbritrary edit option. * The slider with option to slide the values of frequesncies opens for a refreshed value. - * * @returns {void} */ _refreshInnerWheel() { @@ -1397,22 +1569,22 @@ class TemperamentWidget { const pitchNumber = this.tempRatios.length - 1; logo.resetSynth(0); logo.synth.trigger( - 0, - frequency, - Singer.defaultBPMFactor * 0.01, - "electronic synth", - null, + 0, + frequency, + Singer.defaultBPMFactor * 0.01, + "electronic synth", + null, null ); this._createInnerWheel(this.tempRatios, pitchNumber); - }; -/** + } + + /** * Triggerred when in octave space edit option. - * * @returns {void} */ octaveSpaceEdit() { - this.editMode = "octave"; + this.editMode = "octave"; docById("userEdit").innerHTML = ""; const len = this.ratios.length; const octaveRatio = this.ratios[len - 1]; @@ -1423,7 +1595,6 @@ class TemperamentWidget { octaveRatio + '" style="width:50px;">    :   

'; octaveSpaceEdit.style.paddingLeft = "70px"; - const divAppend = document.createElement("div"); divAppend.id = "divAppend"; @@ -1473,12 +1644,11 @@ class TemperamentWidget { this._circleOfNotes(); }; } + /** - * Checks for temperament - * + * Checks for temperament. * @returns {void} */ - checkTemperament(ratios) { const intervals = []; let selectedTemperament; @@ -1493,7 +1663,8 @@ class TemperamentWidget { temperamentRatios[j] = t[intervals[j]]; temperamentRatios[j] = temperamentRatios[j].toFixed(2); } - ratiosEqual = ratios.length == temperamentRatios.length && + ratiosEqual = + ratios.length == temperamentRatios.length && ratios.every((element, index) => { return element === temperamentRatios[index]; }); @@ -1512,9 +1683,9 @@ class TemperamentWidget { temperamentCell.innerHTML = this.inTemperament; } } -/** + + /** * Triggerred when Save button is pressed. New action blocks are generated. - * * @returns {void} */ _save() { @@ -1529,7 +1700,8 @@ class TemperamentWidget { notesMatch = false; if (this.ratios[i] == this.ratiosNotesPair[j][0]) { notesMatch = true; - this.notes[i] = this.ratiosNotesPair[j][1][0] + "(+0)" + this.ratiosNotesPair[j][1][1]; + this.notes[i] = + this.ratiosNotesPair[j][1][0] + "(+0)" + this.ratiosNotesPair[j][1][1]; break; } } @@ -1547,13 +1719,15 @@ class TemperamentWidget { idx = centsDiff1.indexOf(min); if (centsDiff[idx] < 0) { - this.notes[i] = this.ratiosNotesPair[idx][1][0] + + this.notes[i] = + this.ratiosNotesPair[idx][1][0] + "(-" + centsDiff1[idx].toFixed(0) + ")" + this.ratiosNotesPair[idx][1][1]; } else { - this.notes[i] = this.ratiosNotesPair[idx][1][0] + + this.notes[i] = + this.ratiosNotesPair[idx][1][0] + "(+" + centsDiff1[idx].toFixed(0) + ")" + @@ -1567,7 +1741,7 @@ class TemperamentWidget { OCTAVERATIO = this.powerBase; const value = logo.blocks.findUniqueTemperamentName(this.inTemperament); - this.inTemperament = value ; // change from temporary "custom" to "custom1" or "custom2" .. + this.inTemperament = value; // change from temporary "custom" to "custom1" or "custom2" .. const newStack = [ [0, "temperament1", 100, 100, [null, 1, 2, null]], [1, ["text", { value: value }], 0, 0, [0]], @@ -1576,8 +1750,8 @@ class TemperamentWidget { [4, ["number", { value: this.frequencies[0] }], 0, 0, [2]], [5, ["octavespace"], 0, 0, [2, 6, 9]], [6, ["divide"], 0, 0, [5, 7, 8]], - [7,["number", { value: rationalToFraction(OCTAVERATIO)[0] }],0,0,[6]], - [8,["number", { value: rationalToFraction(OCTAVERATIO)[1] }],0,0,[6]], + [7, ["number", { value: rationalToFraction(OCTAVERATIO)[0] }], 0, 0, [6]], + [8, ["number", { value: rationalToFraction(OCTAVERATIO)[1] }], 0, 0, [6]], [9, "vspace", 0, 0, [5, 10]] ]; let previousBlock = 9; @@ -1587,7 +1761,8 @@ class TemperamentWidget { if ( this.inTemperament === "equal" || this.inTemperament === "1/3 comma meantone" || - (this.typeOfEdit === "equal" &&this.divisions === this.pitchNumber)) { + (this.typeOfEdit === "equal" && this.divisions === this.pitchNumber) + ) { newStack.push([ idx, "definefrequency", @@ -1595,13 +1770,7 @@ class TemperamentWidget { 0, [previousBlock, idx + 1, idx + 8, idx + 12] ]); - newStack.push([ - idx + 1, - "multiply", - 0, - 0, - [idx, idx + 2, idx + 3] - ]); + newStack.push([idx + 1, "multiply", 0, 0, [idx, idx + 2, idx + 3]]); newStack.push([ idx + 2, ["namedbox", { value: logo.synth.startingPitch }], @@ -1609,49 +1778,13 @@ class TemperamentWidget { 0, [idx + 1] ]); - newStack.push([ - idx + 3, - ["power"], - 0, - 0, - [idx + 1, idx + 4, idx + 5] - ]); - newStack.push([ - idx + 4, - ["number", { value: this.powerBase }], - 0, - 0, - [idx + 3] - ]); - newStack.push([ - idx + 5, - ["divide"], - 0, - 0, - [idx + 3, idx + 6, idx + 7] - ]); - newStack.push([ - idx + 6, - ["number", { value: i }], - 0, - 0, - [idx + 5] - ]); - newStack.push([ - idx + 7, - ["number", { value: this.pitchNumber }], - 0, - 0, - [idx + 5] - ]); + newStack.push([idx + 3, ["power"], 0, 0, [idx + 1, idx + 4, idx + 5]]); + newStack.push([idx + 4, ["number", { value: this.powerBase }], 0, 0, [idx + 3]]); + newStack.push([idx + 5, ["divide"], 0, 0, [idx + 3, idx + 6, idx + 7]]); + newStack.push([idx + 6, ["number", { value: i }], 0, 0, [idx + 5]]); + newStack.push([idx + 7, ["number", { value: this.pitchNumber }], 0, 0, [idx + 5]]); newStack.push([idx + 8, "vspace", 0, 0, [idx, idx + 9]]); - newStack.push([ - idx + 9, - ["pitch"], - 0, - 0, - [idx + 8, idx + 10, idx + 11, null] - ]); + newStack.push([idx + 9, ["pitch"], 0, 0, [idx + 8, idx + 10, idx + 11, null]]); if (!isCustom(this.inTemperament)) { newStack.push([ idx + 10, @@ -1673,7 +1806,7 @@ class TemperamentWidget { [ "text", { - value: this.notes[i].substring(0,this.notes[i].length - 1) + value: this.notes[i].substring(0, this.notes[i].length - 1) } ], 0, @@ -1703,13 +1836,7 @@ class TemperamentWidget { 0, [previousBlock, idx + 1, idx + 6, idx + 10] ]); - newStack.push([ - idx + 1, - "multiply", - 0, - 0, - [idx, idx + 2, idx + 3] - ]); + newStack.push([idx + 1, "multiply", 0, 0, [idx, idx + 2, idx + 3]]); newStack.push([ idx + 2, ["namedbox", { value: logo.synth.startingPitch }], @@ -1717,13 +1844,7 @@ class TemperamentWidget { 0, [idx + 1] ]); - newStack.push([ - idx + 3, - ["divide"], - 0, - 0, - [idx + 1, idx + 4, idx + 5] - ]); + newStack.push([idx + 3, ["divide"], 0, 0, [idx + 1, idx + 4, idx + 5]]); newStack.push([ idx + 4, ["number", { value: rationalToFraction(this.ratios[i])[0] }], @@ -1733,22 +1854,13 @@ class TemperamentWidget { ]); newStack.push([ idx + 5, - [ - "number", - { value: rationalToFraction(this.ratios[i])[1] } - ], + ["number", { value: rationalToFraction(this.ratios[i])[1] }], 0, 0, [idx + 3] ]); newStack.push([idx + 6, "vspace", 0, 0, [idx, idx + 7]]); - newStack.push([ - idx + 7, - ["pitch"], - 0, - 0, - [idx + 6, idx + 8, idx + 9, null] - ]); + newStack.push([idx + 7, ["pitch"], 0, 0, [idx + 6, idx + 8, idx + 9, null]]); if (!isCustom(this.inTemperament)) { newStack.push([ @@ -1771,7 +1883,7 @@ class TemperamentWidget { [ "text", { - value: this.notes[i].substring(0,this.notes[i].length - 1) + value: this.notes[i].substring(0, this.notes[i].length - 1) } ], 0, @@ -1811,7 +1923,7 @@ class TemperamentWidget { logo.textMsg(_("New action block generated!")); let number; - if (isCustom(this.inTemperament)) { + if (isCustom(this.inTemperament)) { TEMPERAMENT[this.inTemperament] = []; TEMPERAMENT[this.inTemperament]["pitchNumber"] = this.pitchNumber; updateTemperaments(); @@ -1831,43 +1943,41 @@ class TemperamentWidget { logo.blocks.palettes.updatePalettes("pitch"); } } + /** - * Triggerred when play button is pressed on a single note in table - *Notes are displayed in sequence and can be played one after another - * + * Triggerred when play button is pressed on a single note in table. + * Notes are displayed in sequence and can be played one after another. * @returns {void} */ - playNote(pitchNumber) { logo.resetSynth(0); const duration = 1 / 2; let notes; if (docById("wheelDiv4") == null) { notes = this.frequencies[pitchNumber]; - if (this.editMode=="equal" && this.eqTempHzs && this.eqTempHzs.length) - notes = this.eqTempHzs[pitchNumber] ; - else if (this.editMode=="ratio" && this.NEqTempHzs && this.NEqTempHzs.length) - notes = this.NEqTempHzs[pitchNumber] ; + if (this.editMode == "equal" && this.eqTempHzs && this.eqTempHzs.length) + notes = this.eqTempHzs[pitchNumber]; + else if (this.editMode == "ratio" && this.NEqTempHzs && this.NEqTempHzs.length) + notes = this.NEqTempHzs[pitchNumber]; } else { notes = this.tempRatios1[pitchNumber] * this.frequencies[0]; } logo.synth.trigger( 0, - notes, - Singer.defaultBPMFactor * duration, + notes, + Singer.defaultBPMFactor * duration, "electronic synth", null, null ); } + /** - * Triggerred when play button is pressed - *All Notes are played in sequence from the start. - * + * Triggerred when play button is pressed. + * All Notes are played in sequence from the start. * @returns {void} */ - playAll() { let p = 0; this.playbackForward = true; @@ -1916,12 +2026,12 @@ class TemperamentWidget { 0, "C Major" ); - + let pitchNumber = this.pitchNumber; - if (this.editMode == "equal" && this.eqTempPitchNumber) - pitchNumber = this.eqTempPitchNumber ; - else if (this.editMode == "ratio" && this.NEqTempPitchNumber) - pitchNumber = this.NEqTempPitchNumber ; + if (this.editMode == "equal" && this.eqTempPitchNumber) + pitchNumber = this.eqTempPitchNumber; + else if (this.editMode == "ratio" && this.NEqTempPitchNumber) + pitchNumber = this.NEqTempPitchNumber; if (docById("wheelDiv4") !== null) { pitchNumber = this.tempRatios1.length - 1; } @@ -1985,11 +2095,12 @@ class TemperamentWidget { docById("pitchNumber_" + i).style.background = platformColor.labelColor; if (this.playbackForward == false && i < pitchNumber) { j = i + 1; - docById("pitchNumber_" + j).style.background = platformColor.selectorBackground; + docById("pitchNumber_" + j).style.background = platformColor.selectorBackground; } else { if (i !== 0) { j = i - 1; - docById("pitchNumber_" + j).style.background = platformColor.selectorBackground; + docById("pitchNumber_" + j).style.background = + platformColor.selectorBackground; } } } else if (docById("wheelDiv4") !== null) { @@ -2040,7 +2151,8 @@ class TemperamentWidget { __playLoop(i); }, Singer.defaultBPMFactor * 1000 * duration); } else { - cell.innerHTML = '   { - logo.synth.setMasterVolume(0); - logo.synth.stop(); - if (docById("wheelDiv2") != null) { - docById("wheelDiv2").style.display = "none"; - this.notesCircle.removeWheel(); - } - if (docById("wheelDiv3") != null) { - docById("wheelDiv3").style.display = "none"; - this.wheel.removeWheel(); - } - if (docById("wheelDiv4") != null) { - docById("wheelDiv4").style.display = "none"; - this.wheel1.removeWheel(); - } - - widgetWindow.destroy(); - }; - - this._playing = false; - - const buttonTable = document.createElement("table"); - const header = buttonTable.createTHead(); - const row = header.insertRow(0); - row.id = "buttonsRow"; - - temperamentCell = row.insertCell(); - temperamentCell.innerHTML = this.inTemperament; - temperamentCell.style.width = 2 * TemperamentWidget.BUTTONSIZE + "px"; - temperamentCell.style.minWidth = temperamentCell.style.width; - temperamentCell.style.maxWidth = temperamentCell.style.width; - temperamentCell.style.height = TemperamentWidget.BUTTONSIZE + "px"; - temperamentCell.style.minHeight = temperamentCell.style.height; - temperamentCell.style.maxHeight = temperamentCell.style.height; - temperamentCell.style.textAlign = "center"; - temperamentCell.style.backgroundColor = platformColor.selectorBackground; - - this.playButton = widgetWindow.addButton( - "play-button.svg", - TemperamentWidget.ICONSIZE, - _("Play all") - ); - this.playButton.onclick = () => { - this.playAll(); - }; - - widgetWindow.addButton( - "export-chunk.svg", - TemperamentWidget.ICONSIZE, - _("Save") - ).onclick = () => { - this._save(); - }; - - const noteCell = widgetWindow.addButton( - "play-button.svg", - TemperamentWidget.ICONSIZE, - _("Table") - ); - - let t = TEMPERAMENT[this.inTemperament]; - this.pitchNumber = t.pitchNumber; - this.octaveChanged = false; - this.scale = this.scale[0] + " " + this.scale[1]; - this.scaleNotes = _buildScale(this.scale); - this.scaleNotes = this.scaleNotes[0]; - this.powerBase = 2; - const startingPitch = logo.synth.startingPitch; - const str = []; - const note = []; - this.notes = []; - this.frequencies = []; - this.cents = []; - this.intervals = []; - this.ratios = []; - this.ratiosNotesPair = []; - - let pitchNumber; - for (let i = 0; i <= this.pitchNumber; i++) { - if ( - isCustom(this.inTemperament) && - TEMPERAMENT[this.inTemperament]["0"][1] !== undefined - ) { - //If temperament selected is custom and it is defined by user. - pitchNumber = i + ""; - if (i === this.pitchNumber) { - this.notes[i] = [ - TEMPERAMENT[this.inTemperament]["0"][1], - Number(TEMPERAMENT[this.inTemperament]["0"][2]) + 1 - ]; - this.ratios[i] = this.powerBase; - } else { - this.notes[i] = [ - TEMPERAMENT[this.inTemperament][pitchNumber][1], - TEMPERAMENT[this.inTemperament][pitchNumber][2] - ]; - this.ratios[i] = TEMPERAMENT[this.inTemperament][pitchNumber][0]; - } - this.frequencies[i] = logo.synth - .getCustomFrequency( - this.notes[i][0] + this.notes[i][1] + "", - this.inTemperament - ) - .toFixed(2); - this.cents[i] = 1200 * (Math.log10(this.ratios[i]) / Math.log10(2)); - this.ratiosNotesPair[i] = [this.ratios[i], this.notes[i]]; - } else { - if (isCustom(this.inTemperament)) { - // If temperament selected is custom and it is not defined by user - // then custom temperament behaves like equal temperament. - t = TEMPERAMENT["equal"]; - } - str[i] = getNoteFromInterval(startingPitch, t.interval[i]); - this.notes[i] = str[i]; - note[i] = str[i][0]; - - if ( - str[i][0].substring(1, str[i][0].length) === FLAT || - str[i][0].substring(1, str[i][0].length) === "b" - ) { - note[i] = str[i][0].replace(FLAT, "b"); - } else if ( - str[i][0].substring(1, str[i][0].length) === SHARP || - str[i][0].substring(1, str[i][0].length) === "#" - ) { - note[i] = str[i][0].replace(SHARP, "#"); - } - - str[i] = note[i] + str[i][1]; - this.frequencies[i] = logo.synth - ._getFrequency(str[i], true, this.inTemperament) - .toFixed(2); - this.intervals[i] = t.interval[i]; - this.ratios[i] = t[this.intervals[i]]; - this.cents[i] = 1200 * (Math.log10(this.ratios[i]) / Math.log10(2)); - this.ratiosNotesPair[i] = [this.ratios[i], this.notes[i]]; - } - } - this.toggleNotesButton = () => { - if (this.circleIsVisible) { - noteCell.getElementsByTagName("img")[0].src = "header-icons/circle.svg"; - noteCell.getElementsByTagName("img")[0].title = "circle"; - noteCell.getElementsByTagName("img")[0].alt = "circle"; - } else { - noteCell.getElementsByTagName("img")[0].src = "header-icons/table.svg"; - noteCell.getElementsByTagName("img")[0].title = "table"; - noteCell.getElementsByTagName("img")[0].alt = "table"; - } - }; - - this._circleOfNotes(); - - noteCell.onclick = () => { - this.editMode = null; - if (this.circleIsVisible) { - this._circleOfNotes(); - } else { - this._graphOfNotes(); - } - }; - - widgetWindow.addButton( - "add2.svg", - TemperamentWidget.ICONSIZE, - _("Add pitches") - ).onclick = (event) => { - this.edit(); - }; - - widgetWindow.sendToCenter(); - } }