From ddfe83e16c0d924e0be89ca723f9b4ea85fa79c6 Mon Sep 17 00:00:00 2001 From: Anindya Kundu Date: Tue, 26 Jan 2021 07:22:50 +0530 Subject: [PATCH] Fix linting errors and format code --- js/blocks/WidgetBlocks.js | 2 +- js/widgets/temperament.js | 1200 ++++++++++++++++--------------------- 2 files changed, 503 insertions(+), 699 deletions(-) diff --git a/js/blocks/WidgetBlocks.js b/js/blocks/WidgetBlocks.js index ab66c3f02d..1c430fbe94 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 3c858151af..6fd853b041 100644 --- a/js/widgets/temperament.js +++ b/js/widgets/temperament.js @@ -12,7 +12,18 @@ * 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 @@ -20,20 +31,17 @@ * * Private members' names begin with underscore '_". */ - -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 */ - constructor(){ + constructor() { this.inTemperament = null; this.lastTriggered = null; this.notes = []; @@ -47,12 +55,11 @@ class TemperamentWidget { this.circleIsVisible = true; this.playbackForward = true; } - /** * @deprecated */ - _addButton (row, icon, iconSize, label) { + _addButton(row, icon, iconSize, label) { const cell = row.insertCell(-1); cell.innerHTML = '  { - 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; @@ -275,17 +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 * - (Math.log10(this.ratios[i]) / - Math.log10(this.powerBase)); + powers[i] = 12 * (Math.log10(this.ratios[i]) / Math.log10(this.powerBase)); this.ratios[i] = Math.pow(2, powers[i] / 12); compareRatios[i] = this.ratios[i].toFixed(2); this.frequencies[i] = this.ratios[i] * frequency; @@ -299,25 +299,21 @@ class TemperamentWidget { } docById("temperamentTable").addEventListener("click", (e) => { - this.showNoteInfo(e, angle); + this.showNoteInfo(e); }); - }; + } - showNoteInfo = (event, angle) => { + 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 || (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(); @@ -342,15 +338,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++) { @@ -381,15 +374,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(); }; @@ -403,8 +394,7 @@ class TemperamentWidget { }; editFrequency = (event) => { - let i = Number(event.target.dataset.message); - + const i = Number(event.target.dataset.message); docById("noteInfo").style.width = "180px"; docById("noteInfo").style.height = "130px"; @@ -424,29 +414,28 @@ 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]; 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; @@ -456,14 +445,14 @@ class TemperamentWidget { docById("noteInfo").remove(); }; - docById("close").onclick = () =>{ + docById("close").onclick = () => { this.temporaryRatios = this.ratios.slice(); this.createMainWheel(); docById("noteInfo").remove(); }; }; - _graphOfNotes () { + _graphOfNotes() { this.circleIsVisible = true; this.toggleNotesButton(); temperamentTableDiv.innerHTML = ""; @@ -473,21 +462,14 @@ 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"]; } 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 = @@ -500,7 +482,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"; @@ -530,12 +512,9 @@ 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++) { @@ -549,13 +528,11 @@ 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 = () => { @@ -576,8 +553,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]; @@ -586,8 +562,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)) { @@ -595,16 +570,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 @@ -619,16 +592,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)) { @@ -641,13 +612,13 @@ class TemperamentWidget { notesCell[(i, 2)].style.width = 60 + "px"; } } - }; + } - edit () { - this.editMode = null ; + edit() { + this.editMode = null; logo.synth.setMasterVolume(0); logo.synth.stop(); - + if (docById("wheelDiv2") != null) { docById("wheelDiv2").style.display = "none"; this.notesCircle.removeWheel(); @@ -657,7 +628,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++) { @@ -665,9 +636,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"; @@ -678,7 +648,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; @@ -686,7 +656,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; @@ -694,7 +664,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; @@ -702,19 +672,19 @@ 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; menuItems[3].style.background = "#c8C8C8"; this.octaveSpaceEdit(); }; - }; + } - equalEdit () { + equalEdit() { this.editMode = "equal"; docById("userEdit").innerHTML = ""; - let equalEdit = docById("userEdit"); + const equalEdit = docById("userEdit"); equalEdit.style.backgroundColor = "#c8C8C8"; equalEdit.innerHTML = '
Pitch Number         To   

'; @@ -723,11 +693,10 @@ class TemperamentWidget { this.pitchNumber + '">'; equalEdit.style.paddingLeft = "80px"; - const addDivision = (preview) => { // Add Buttons - let divAppend = document.createElement("div"); + const divAppend = document.createElement("div"); divAppend.id = "divAppend"; if (preview) { divAppend.innerHTML = @@ -743,151 +712,95 @@ 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; divAppend2.style.width = "205px"; - } - - addDivision(false); - - divAppend.onmouseover = (event) => { - event.target.style.cursor = "pointer"; - }; - let pitchNumber = this.pitchNumber; - 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 = []; - let ratio4; - let 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); - divisions = Number(docById("divisions").value); - this.tempRatios = this.ratios.slice(); - if (pitchNumber1 === pitchNumber2) { - for (let i = 0; i < divisions; i++) { - ratio[i] = Math.pow(this.powerBase, i / divisions); - ratio1[i] = ratio[i].toFixed(2); - } - for (let i = 0; i < this.tempRatios.length; i++) { - ratio2[i] = this.tempRatios[i]; - ratio2[i] = ratio2[i].toFixed(2); - } - ratio4 = ratio1.filter((val) => { - return ratio2.indexOf(val) == -1; - }); - - for(let i = 0; i < ratio4.length; i++) { - index[i] = ratio1.indexOf(ratio4[i]); - ratio3[i] = ratio[index[i]]; - } + divAppend.onmouseover = (event) => { + event.target.style.cursor = "pointer"; + }; - this.tempRatios = this.tempRatios.concat(ratio3); - this.tempRatios.sort((a, b) => { - return a - b; - }); - pitchNumber = this.tempRatios.length - 1; - 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)); - divisionAngle = Math.abs(angle2 - angle1) / divisions; - 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; - ratio[i] = Math.pow(this.powerBase, power); - this.tempRatios.splice(pitchNumber1 + 1 + i, 0, ratio[i]); - compareRatios[i] = this.tempRatios[i]; - compareRatios[i] = compareRatios[i].toFixed(2); - } - this.typeOfEdit = "nonequal"; - } + let pitchNumber = this.pitchNumber; + let pitchNumber1 = Number(docById("octaveIn").value); + let pitchNumber2 = Number(docById("octaveOut").value); + let divisions = Number(docById("divisions").value); + const ratio = []; + const compareRatios = []; + const ratio1 = []; + const ratio2 = []; + const ratio3 = []; + let ratio4; + const index = []; + this.tempRatios = []; + + divAppend.addEventListener("click", (event) => { + let angle1, angle2, divisionAngle, power, frequency; + pitchNumber1 = Number(docById("octaveIn").value); + pitchNumber2 = Number(docById("octaveOut").value); + divisions = Number(docById("divisions").value); + this.tempRatios = this.ratios.slice(); + if (pitchNumber1 === pitchNumber2) { + for (let i = 0; i < divisions; i++) { + ratio[i] = Math.pow(this.powerBase, i / divisions); + ratio1[i] = ratio[i].toFixed(2); + } + for (let i = 0; i < this.tempRatios.length; i++) { + ratio2[i] = this.tempRatios[i]; + ratio2[i] = ratio2[i].toFixed(2); + } + ratio4 = ratio1.filter((val) => { + return ratio2.indexOf(val) == -1; + }); - if (event.target.innerHTML === "Done") { - //Go to main Circle of Notes - this.ratios = this.tempRatios.slice(); - frequency = this.frequencies[0]; - this.frequencies = []; - for (let i = 0; i <= pitchNumber; i++) { - this.frequencies[i] = this.ratios[i] * frequency; - this.frequencies[i] = this.frequencies[i].toFixed(2); - } + for (let i = 0; i < ratio4.length; i++) { + index[i] = ratio1.indexOf(ratio4[i]); + ratio3[i] = ratio[index[i]]; + } - this.pitchNumber = pitchNumber; - this.checkTemperament(compareRatios); - this._circleOfNotes(); - } else if (event.target.innerHTML === "Preview") { - //Preview Notes - 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].slicePathAttr.fill = "#e0e0e0"; - this.notesCircle.navItems[i].sliceSelectedAttr.fill = - "#e0e0e0"; - } - this.notesCircle.refreshWheel(); - docById("userEdit").style.paddingLeft = "0px"; - addDivision(true); - divAppend.style.marginTop = docById("wheelDiv2").style.height; - docById("preview").style.marginLeft = "80px"; - - //make temperary - this.ratios = this.tempRatios.slice(); - frequency = this.frequencies[0]; - this.eqTempHzs = []; - for (let i = 0; i <= pitchNumber; i++) { - this.eqTempHzs[i] = this.ratios[i] * frequency; - this.eqTempHzs[i] = this.eqTempHzs[i].toFixed(2); + this.tempRatios = this.tempRatios.concat(ratio3); + this.tempRatios.sort((a, b) => { + return a - b; + }); + pitchNumber = this.tempRatios.length - 1; + 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)); + divisionAngle = Math.abs(angle2 - angle1) / divisions; + 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; + ratio[i] = Math.pow(this.powerBase, power); + this.tempRatios.splice(pitchNumber1 + 1 + i, 0, ratio[i]); + compareRatios[i] = this.tempRatios[i]; + compareRatios[i] = compareRatios[i].toFixed(2); + } + this.typeOfEdit = "nonequal"; } - this.eqTempPitchNumber = pitchNumber; - this.checkTemperament(compareRatios); - docById("done_").onclick = () =>{ + if (event.target.innerHTML === "Done") { //Go to main Circle of Notes this.ratios = this.tempRatios.slice(); frequency = this.frequencies[0]; @@ -898,35 +811,77 @@ class TemperamentWidget { } this.pitchNumber = pitchNumber; - this.eqTempPitchNumber = null ; - this.eqTempHzs = [] ; this.checkTemperament(compareRatios); this._circleOfNotes(); - }; + } else if (event.target.innerHTML === "Preview") { + //Preview Notes + 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].slicePathAttr.fill = "#e0e0e0"; + this.notesCircle.navItems[i].sliceSelectedAttr.fill = "#e0e0e0"; + } + this.notesCircle.refreshWheel(); + docById("userEdit").style.paddingLeft = "0px"; + addDivision(true); + divAppend.style.marginTop = docById("wheelDiv2").style.height; + docById("preview").style.marginLeft = "80px"; - docById("preview").onclick = () =>{ - this.equalEdit(); - this.eqTempPitchNumber = null ; - this.eqTempHzs = [] ; - }; - } + //make temperary + this.ratios = this.tempRatios.slice(); + frequency = this.frequencies[0]; + this.eqTempHzs = []; + for (let i = 0; i <= pitchNumber; i++) { + this.eqTempHzs[i] = this.ratios[i] * frequency; + this.eqTempHzs[i] = this.eqTempHzs[i].toFixed(2); + } + this.eqTempPitchNumber = pitchNumber; + this.checkTemperament(compareRatios); + + docById("done_").onclick = () => { + //Go to main Circle of Notes + this.ratios = this.tempRatios.slice(); + frequency = this.frequencies[0]; + this.frequencies = []; + for (let i = 0; i <= pitchNumber; i++) { + this.frequencies[i] = this.ratios[i] * frequency; + this.frequencies[i] = this.frequencies[i].toFixed(2); + } + + this.pitchNumber = pitchNumber; + this.eqTempPitchNumber = null; + this.eqTempHzs = []; + this.checkTemperament(compareRatios); + this._circleOfNotes(); + }; + + docById("preview").onclick = () => { + this.equalEdit(); + this.eqTempPitchNumber = null; + this.eqTempHzs = []; + }; + } + }); }; - }; - ratioEdit () { + addDivision(false); + } + + ratioEdit() { this.editMode = "ratio"; docById("userEdit").innerHTML = ""; - let ratioEdit = docById("userEdit"); + const ratioEdit = docById("userEdit"); ratioEdit.style.backgroundColor = "#c8C8C8"; ratioEdit.innerHTML = '
Ratio         :   

'; ratioEdit.innerHTML += 'Recursion        '; ratioEdit.style.paddingLeft = "100px"; - const addButtons = (preview) => { - let divAppend = document.createElement("div"); + const divAppend = document.createElement("div"); divAppend.id = "divAppend"; if (preview) { divAppend.innerHTML = @@ -942,128 +897,71 @@ 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; divAppend2.style.width = "205px"; - } - - addButtons(false); - divAppend.onmouseover = (event) => { - event.target.style.cursor = "pointer"; - }; + divAppend.onmouseover = (event) => { + event.target.style.cursor = "pointer"; + }; - 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 = []; - let frequency1; - let ratioDifference = []; - let index = []; - let compareRatios = []; - this.tempRatios = this.ratios.slice(); - - 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); - this.tempRatios.splice(index[i], 0, ratio[i]); - break; - } - if (ratioDifference[j] == 0) { - index.push(j); - this.tempRatios.splice(index[i], 1, ratio[i]); - break; + divAppend.onclick = (event) => { + 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; + const ratioDifference = []; + const index = []; + const compareRatios = []; + this.tempRatios = this.ratios.slice(); + + 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); + this.tempRatios.splice(index[i], 0, ratio[i]); + break; + } + if (ratioDifference[j] == 0) { + index.push(j); + this.tempRatios.splice(index[i], 1, ratio[i]); + break; + } } + } else { + ratio[i] = ratio[i] / 2; + frequency[i] = this.frequencies[0] * ratio[i]; + calculateRatios(i); } - } else { - ratio[i] = ratio[i] / 2; + }; + + for (let i = 0; i < recursion; i++) { + ratio[i] = Math.pow(ratio1, i + 1); 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] = this.frequencies[0] * ratio[i]; - calculateRatios(i); - } - this.tempRatios.sort((a, b) => { - return a - b; - }); - let pitchNumber = this.tempRatios.length - 1; - - if (event.target.innerHTML == "Done") { - 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 < this.ratios.length; i++) { - compareRatios[i] = this.ratios[i]; - compareRatios[i] = compareRatios[i].toFixed(2); - } - - this.checkTemperament(compareRatios); - this._circleOfNotes(); - } else if (event.target.innerHTML == "Preview") { - //Preview Notes - 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].slicePathAttr.fill = "#e0e0e0"; - this.notesCircle.navItems[i].sliceSelectedAttr.fill = - "#e0e0e0"; - } - this.notesCircle.refreshWheel(); - docById("userEdit").style.paddingLeft = "0px"; - addButtons(true); - divAppend.style.marginTop = docById("wheelDiv2").style.height; - docById("preview").style.marginLeft = "100px"; - - //make temperary - 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); - } + this.tempRatios.sort((a, b) => { + return a - b; + }); + const pitchNumber = this.tempRatios.length - 1; - for (let i = 0; i < this.ratios.length; i++) { - compareRatios[i] = this.ratios[i]; - compareRatios[i] = compareRatios[i].toFixed(2); - } - this.checkTemperament(compareRatios); - - docById("done_").onclick = () =>{ - //Go to main Circle of Notes + if (event.target.innerHTML == "Done") { this.ratios = this.tempRatios.slice(); + this.typeOfEdit = "nonequal"; this.pitchNumber = this.ratios.length - 1; frequency1 = this.frequencies[0]; this.frequencies = []; @@ -1079,29 +977,82 @@ class TemperamentWidget { this.checkTemperament(compareRatios); this._circleOfNotes(); - this.NEqTempPitchNumber = null ; - this.NEqTempHzs = [] ; - }; + } else if (event.target.innerHTML == "Preview") { + //Preview Notes + 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].slicePathAttr.fill = "#e0e0e0"; + this.notesCircle.navItems[i].sliceSelectedAttr.fill = "#e0e0e0"; + } + this.notesCircle.refreshWheel(); + docById("userEdit").style.paddingLeft = "0px"; + addButtons(true); + divAppend.style.marginTop = docById("wheelDiv2").style.height; + docById("preview").style.marginLeft = "100px"; - docById("preview").onclick = () =>{ - this.ratioEdit(); - this.NEqTempPitchNumber = null ; - this.NEqTempHzs = [] ; - }; - } + //make temperary + 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 < this.ratios.length; i++) { + compareRatios[i] = this.ratios[i]; + compareRatios[i] = compareRatios[i].toFixed(2); + } + this.checkTemperament(compareRatios); + + docById("done_").onclick = () => { + //Go to main Circle of Notes + 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 < this.ratios.length; i++) { + compareRatios[i] = this.ratios[i]; + compareRatios[i] = compareRatios[i].toFixed(2); + } + + this.checkTemperament(compareRatios); + this._circleOfNotes(); + this.NEqTempPitchNumber = null; + this.NEqTempHzs = []; + }; + + docById("preview").onclick = () => { + this.ratioEdit(); + this.NEqTempPitchNumber = null; + this.NEqTempHzs = []; + }; + } + }; }; - }; - arbitraryEdit () { - this.editMode = "arbitrary" ; + addButtons(false); + } + + 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(); @@ -1116,7 +1067,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(); @@ -1138,19 +1089,16 @@ 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].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)); + 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]; @@ -1185,8 +1133,7 @@ class TemperamentWidget { } this.wheel1.createWheel(); }; - arbitraryEdit.innerHTML += - '
'; + arbitraryEdit.innerHTML += '
'; this._createInnerWheel(); arbitraryEdit.innerHTML += @@ -1196,13 +1143,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); @@ -1237,20 +1184,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]; @@ -1284,8 +1229,6 @@ class TemperamentWidget { this._createOuterWheel(); - - const divAppend = document.createElement("div"); divAppend.id = "divAppend"; divAppend.innerHTML = "Done"; @@ -1301,11 +1244,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++) { @@ -1321,25 +1264,18 @@ class TemperamentWidget { this.checkTemperament(compareRatios); this._circleOfNotes(); }; - }; + } - arbitraryEditSlider (event, angle, ratios, pitchNumber) { + 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(); } @@ -1366,27 +1302,26 @@ 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 () { + _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; @@ -1404,27 +1339,31 @@ 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" ; + 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         :   

'; octaveSpaceEdit.style.paddingLeft = "70px"; - const divAppend = document.createElement("div"); divAppend.id = "divAppend"; @@ -1443,26 +1382,23 @@ class TemperamentWidget { }; divAppend.onclick = () => { - let startRatio = docById("startNote").value; - let endRatio = docById("endNote").value; - let ratio = startRatio / endRatio; + const startRatio = docById("startNote").value; + const endRatio = docById("endNote").value; + const ratio = startRatio / endRatio; let msg; if (ratio != 2) { - msg = - "Octave Space has changed. This changes temperament significantly"; + msg = "Octave Space has changed. This changes temperament significantly"; if (!confirm(msg)) { return; } } - let powers = []; - let compareRatios = []; + const powers = []; + const compareRatios = []; const frequency = this.frequencies[0]; this.frequencies = []; for (let i = 0; i < len; i++) { - powers[i] = - 12 * - (Math.log10(this.ratios[i]) / Math.log10(this.powerBase)); + powers[i] = 12 * (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; @@ -1476,14 +1412,14 @@ class TemperamentWidget { } this._circleOfNotes(); }; - }; + } - checkTemperament (ratios) { - let intervals = []; + checkTemperament(ratios) { + const intervals = []; let selectedTemperament; let t, temperamentRatios, ratiosEqual; - for (let temperament in TEMPERAMENT) { + for (const temperament in TEMPERAMENT) { if (!isCustom(temperament)) { t = TEMPERAMENT[temperament]; temperamentRatios = []; @@ -1511,9 +1447,9 @@ class TemperamentWidget { this.inTemperament = "custom"; temperamentCell.innerHTML = this.inTemperament; } - }; + } - _save () { + _save() { let notesMatch = false; // let index = []; this.notes = []; @@ -1526,15 +1462,12 @@ class TemperamentWidget { 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.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++) { @@ -1568,11 +1501,9 @@ class TemperamentWidget { // Global value OCTAVERATIO = this.powerBase; - let value = logo.blocks.findUniqueTemperamentName( - this.inTemperament - ); - this.inTemperament = value ; // change from temporary "custom" to "custom1" or "custom2" .. - let newStack = [ + const value = logo.blocks.findUniqueTemperamentName(this.inTemperament); + 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]], [2, ["storein"], 0, 0, [0, 3, 4, 5]], @@ -1580,20 +1511,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; @@ -1603,8 +1522,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, @@ -1613,13 +1531,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 }], @@ -1627,49 +1539,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, @@ -1691,10 +1567,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, @@ -1724,13 +1597,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 }], @@ -1738,41 +1605,23 @@ 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] } - ], + ["number", { value: rationalToFraction(this.ratios[i])[0] }], 0, 0, [idx + 3] ]); 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([ @@ -1795,10 +1644,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, @@ -1825,10 +1671,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]], @@ -1838,7 +1684,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(); @@ -1857,26 +1703,33 @@ class TemperamentWidget { logo.blocks.protoBlockDict["custompitch"].hidden = false; logo.blocks.palettes.updatePalettes("pitch"); } - }; + } - 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 ); - }; + } - playAll () { + playAll() { let p = 0; this.playbackForward = true; this._playing = !this._playing; @@ -1917,17 +1770,19 @@ 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, "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; } @@ -1955,63 +1810,43 @@ 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; @@ -2037,26 +1872,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"; } } @@ -2088,37 +1916,21 @@ class TemperamentWidget { '" vertical-align="middle" align-content="center">  '; 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; } 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); @@ -2129,15 +1941,11 @@ class TemperamentWidget { if (this._playing) { __playLoop(0); } - }; - - 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; @@ -2148,8 +1956,6 @@ class TemperamentWidget { widgetWindow.getWidgetBody().style.height = "500px"; widgetWindow.getWidgetBody().style.width = "500px"; - - widgetWindow.onclose = () => { logo.synth.setMasterVolume(0); logo.synth.stop(); @@ -2171,9 +1977,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(); @@ -2185,15 +1991,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(); }; @@ -2201,11 +2006,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") @@ -2218,9 +2023,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 = []; @@ -2250,10 +2055,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)) { @@ -2283,20 +2090,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"; } @@ -2304,8 +2108,8 @@ class TemperamentWidget { this._circleOfNotes(); - noteCell.onclick = (event) => { - this.editMode = null ; + noteCell.onclick = () => { + this.editMode = null; if (this.circleIsVisible) { this._circleOfNotes(); } else { @@ -2317,10 +2121,10 @@ class TemperamentWidget { "add2.svg", TemperamentWidget.ICONSIZE, _("Add pitches") - ).onclick = (event) => { + ).onclick = () => { this.edit(); }; widgetWindow.sendToCenter(); - }; + } }