From 98e590a5714cc00cc8110f5a39a72589755e232f Mon Sep 17 00:00:00 2001 From: Abhishek Kumar Date: Fri, 29 Jan 2021 17:13:49 +0530 Subject: [PATCH 1/3] fixed linting errors --- js/widgets/tempo.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/js/widgets/tempo.js b/js/widgets/tempo.js index 5aa3dbd2bc..e28eff4a1e 100644 --- a/js/widgets/tempo.js +++ b/js/widgets/tempo.js @@ -12,6 +12,19 @@ // This widget enable us to manipulate the beats per minute. It // behaves like a metronome and updates the master BPM block. +/* global logo, _, saveLocally, getDrumSynthName */ + +/* + Global locations + js/activity.js + logo, saveLocally + js/utils/musicutils.js + getDrumSynthName + js/utils/utils.js + _ +*/ + +/*exported Tempo */ class Tempo { static TEMPOSYNTH = "bottle"; static TEMPOINTERVAL = 5; @@ -187,7 +200,7 @@ class Tempo { __save(i) { setTimeout(() => { - console.debug("saving a BPM block for " + this.BPMs[i]); + // console.debug("saving a BPM block for " + this.BPMs[i]); const delta = i * 42; const newStack = [ [0, ["setbpm3", {}], 100 + delta, 100 + delta, [null, 1, 2, 5]], From fa4649b51c46a6c77dfb18ef57360a80ce203f24 Mon Sep 17 00:00:00 2001 From: Abhishek Kumar Date: Fri, 29 Jan 2021 17:15:54 +0530 Subject: [PATCH 2/3] moved init to top --- js/widgets/tempo.js | 304 ++++++++++++++++++++++---------------------- 1 file changed, 152 insertions(+), 152 deletions(-) diff --git a/js/widgets/tempo.js b/js/widgets/tempo.js index e28eff4a1e..8637e0aae4 100644 --- a/js/widgets/tempo.js +++ b/js/widgets/tempo.js @@ -43,6 +43,158 @@ class Tempo { this.tempoCanvases = []; } + init() { + this._directions = []; + this._widgetFirstTimes = []; + this._widgetNextTimes = []; + this._firstClickTimes = null; + this._intervals = []; + this.isMoving = true; + if (this._intervalID != undefined && this._intervalID != null) { + clearInterval(this._intervalID); + } + + this._intervalID = null; + logo.synth.loadSynth(0, getDrumSynthName(Tempo.TEMPOSYNTH)); + + if (this._intervalID != null) { + clearInterval(this._intervalID); + } + + const widgetWindow = window.widgetWindows.windowFor(this, "tempo"); + this.widgetWindow = widgetWindow; + widgetWindow.clear(); + widgetWindow.show(); + + widgetWindow.onclose = () => { + if (this._intervalID != null) { + clearInterval(this._intervalID); + } + widgetWindow.destroy(); + }; + + const pauseBtn = widgetWindow.addButton("pause-button.svg", Tempo.ICONSIZE, _("Pause")); + pauseBtn.onclick = () => { + if (this.isMoving) { + this.pause(); + pauseBtn.innerHTML = + '' + + _('; + this.isMoving = false; + } else { + this.resume(); + pauseBtn.innerHTML = + '' + + _('; + this.isMoving = true; + } + }; + + this._save_lock = false; + widgetWindow.addButton( + "export-chunk.svg", + Tempo.ICONSIZE, + _("Save tempo"), + "" + ).onclick = () => { + // Debounce button + if (!this._get_save_lock()) { + this._save_lock = true; + this._saveTempo(); + setTimeout(() => (this._save_lock = false), 1000); + } + }; + + this.bodyTable = document.createElement("table"); + this.widgetWindow.getWidgetBody().appendChild(this.bodyTable); + + let r1, r2, r3, tcCell; + for (let i = 0; i < this.BPMs.length; i++) { + this._directions.push(1); + this._widgetFirstTimes.push(logo.firstNoteTime); + if (this.BPMs[i] <= 0) { + this.BPMs[i] = 30; + } + + this._intervals.push((60 / this.BPMs[i]) * 1000); + this._widgetNextTimes.push(this._widgetFirstTimes[i] - this._intervals[i]); + + r1 = this.bodyTable.insertRow(); + r2 = this.bodyTable.insertRow(); + r3 = this.bodyTable.insertRow(); + widgetWindow.addButton( + "up.svg", + Tempo.ICONSIZE, + _("speed up"), + r1.insertCell() + ).onclick = ((i) => () => this.speedUp(i))(i); + widgetWindow.addButton( + "down.svg", + Tempo.ICONSIZE, + _("slow down"), + r2.insertCell() + ).onclick = ((i) => () => this.slowDown(i))(i); + + this.BPMInputs[i] = widgetWindow.addInputButton(this.BPMs[i], r3.insertCell()); + this.tempoCanvases[i] = document.createElement("canvas"); + this.tempoCanvases[i].style.width = Tempo.TEMPOWIDTH + "px"; + this.tempoCanvases[i].style.height = Tempo.TEMPOHEIGHT + "px"; + this.tempoCanvases[i].style.margin = "1px"; + this.tempoCanvases[i].style.background = "rgba(255, 255, 255, 1)"; + tcCell = r1.insertCell(); + tcCell.appendChild(this.tempoCanvases[i]); + tcCell.setAttribute("rowspan", "3"); + + // The tempo can be set from the interval between successive clicks on the canvas. + this.tempoCanvases[i].onclick = ((id) => () => { + const d = new Date(); + let newBPM, BPMInput; + if (this._firstClickTime == null) { + this._firstClickTime = d.getTime(); + } else { + newBPM = parseInt((60 * 1000) / (d.getTime() - this._firstClickTime)); + if (newBPM > 29 && newBPM < 1001) { + this.BPMs[id] = newBPM; + this._updateBPM(id); + BPMInput = this.BPMInputs[id]; + BPMInput.value = this.BPMs[id]; + this._firstClickTime = null; + } else { + this._firstClickTime = d.getTime(); + } + } + })(i); + + this.BPMInputs[i].addEventListener( + "keyup", + ((id) => (e) => { + if (e.keyCode === 13) { + this._useBPM(id); + } + })(i) + ); + } + + logo.textMsg(_("Adjust the tempo with the buttons.")); + this.resume(); + + widgetWindow.sendToCenter(); + } + _updateBPM(i) { this._intervals[i] = (60 / this.BPMs[i]) * 1000; @@ -225,156 +377,4 @@ class Tempo { _get_save_lock() { return this._save_lock; } - - init() { - this._directions = []; - this._widgetFirstTimes = []; - this._widgetNextTimes = []; - this._firstClickTimes = null; - this._intervals = []; - this.isMoving = true; - if (this._intervalID != undefined && this._intervalID != null) { - clearInterval(this._intervalID); - } - - this._intervalID = null; - logo.synth.loadSynth(0, getDrumSynthName(Tempo.TEMPOSYNTH)); - - if (this._intervalID != null) { - clearInterval(this._intervalID); - } - - const widgetWindow = window.widgetWindows.windowFor(this, "tempo"); - this.widgetWindow = widgetWindow; - widgetWindow.clear(); - widgetWindow.show(); - - widgetWindow.onclose = () => { - if (this._intervalID != null) { - clearInterval(this._intervalID); - } - widgetWindow.destroy(); - }; - - const pauseBtn = widgetWindow.addButton("pause-button.svg", Tempo.ICONSIZE, _("Pause")); - pauseBtn.onclick = () => { - if (this.isMoving) { - this.pause(); - pauseBtn.innerHTML = - '' + - _('; - this.isMoving = false; - } else { - this.resume(); - pauseBtn.innerHTML = - '' + - _('; - this.isMoving = true; - } - }; - - this._save_lock = false; - widgetWindow.addButton( - "export-chunk.svg", - Tempo.ICONSIZE, - _("Save tempo"), - "" - ).onclick = () => { - // Debounce button - if (!this._get_save_lock()) { - this._save_lock = true; - this._saveTempo(); - setTimeout(() => (this._save_lock = false), 1000); - } - }; - - this.bodyTable = document.createElement("table"); - this.widgetWindow.getWidgetBody().appendChild(this.bodyTable); - - let r1, r2, r3, tcCell; - for (let i = 0; i < this.BPMs.length; i++) { - this._directions.push(1); - this._widgetFirstTimes.push(logo.firstNoteTime); - if (this.BPMs[i] <= 0) { - this.BPMs[i] = 30; - } - - this._intervals.push((60 / this.BPMs[i]) * 1000); - this._widgetNextTimes.push(this._widgetFirstTimes[i] - this._intervals[i]); - - r1 = this.bodyTable.insertRow(); - r2 = this.bodyTable.insertRow(); - r3 = this.bodyTable.insertRow(); - widgetWindow.addButton( - "up.svg", - Tempo.ICONSIZE, - _("speed up"), - r1.insertCell() - ).onclick = ((i) => () => this.speedUp(i))(i); - widgetWindow.addButton( - "down.svg", - Tempo.ICONSIZE, - _("slow down"), - r2.insertCell() - ).onclick = ((i) => () => this.slowDown(i))(i); - - this.BPMInputs[i] = widgetWindow.addInputButton(this.BPMs[i], r3.insertCell()); - this.tempoCanvases[i] = document.createElement("canvas"); - this.tempoCanvases[i].style.width = Tempo.TEMPOWIDTH + "px"; - this.tempoCanvases[i].style.height = Tempo.TEMPOHEIGHT + "px"; - this.tempoCanvases[i].style.margin = "1px"; - this.tempoCanvases[i].style.background = "rgba(255, 255, 255, 1)"; - tcCell = r1.insertCell(); - tcCell.appendChild(this.tempoCanvases[i]); - tcCell.setAttribute("rowspan", "3"); - - // The tempo can be set from the interval between successive clicks on the canvas. - this.tempoCanvases[i].onclick = ((id) => () => { - const d = new Date(); - let newBPM, BPMInput; - if (this._firstClickTime == null) { - this._firstClickTime = d.getTime(); - } else { - newBPM = parseInt((60 * 1000) / (d.getTime() - this._firstClickTime)); - if (newBPM > 29 && newBPM < 1001) { - this.BPMs[id] = newBPM; - this._updateBPM(id); - BPMInput = this.BPMInputs[id]; - BPMInput.value = this.BPMs[id]; - this._firstClickTime = null; - } else { - this._firstClickTime = d.getTime(); - } - } - })(i); - - this.BPMInputs[i].addEventListener( - "keyup", - ((id) => (e) => { - if (e.keyCode === 13) { - this._useBPM(id); - } - })(i) - ); - } - - logo.textMsg(_("Adjust the tempo with the buttons.")); - this.resume(); - - widgetWindow.sendToCenter(); - } } From f95d14c42759b71046e0944a3cad122c96567d84 Mon Sep 17 00:00:00 2001 From: Abhishek Kumar Date: Fri, 29 Jan 2021 17:23:58 +0530 Subject: [PATCH 3/3] added JS docs --- js/widgets/tempo.js | 45 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/js/widgets/tempo.js b/js/widgets/tempo.js index 8637e0aae4..32c8a80b84 100644 --- a/js/widgets/tempo.js +++ b/js/widgets/tempo.js @@ -195,6 +195,11 @@ class Tempo { widgetWindow.sendToCenter(); } + /** + * @private + * @param {number} i + * @returns {void} + */ _updateBPM(i) { this._intervals[i] = (60 / this.BPMs[i]) * 1000; @@ -211,10 +216,18 @@ class Tempo { } } + /** + * @public + * @returns {void} + */ pause() { clearInterval(this._intervalID); } + /** + * @public + * @returns {void} + */ resume() { // Reset widget time since we are restarting. We will no longer keep synch with the turtles. const d = new Date(); @@ -234,6 +247,11 @@ class Tempo { }, Tempo.TEMPOINTERVAL); } + /** + * @private + * @param {number} i + * @returns {void} + */ _useBPM(i) { this.BPMs[i] = this.BPMInputs[i].value; if (this.BPMs[i] > 1000) { @@ -248,6 +266,11 @@ class Tempo { this.BPMInputs[i].value = this.BPMs[i]; } + /** + * @public + * @param {number} i + * @returns {void} + */ speedUp(i) { this.BPMs[i] = parseFloat(this.BPMs[i]) + Math.round(0.1 * this.BPMs[i]); @@ -259,6 +282,11 @@ class Tempo { this.BPMInputs[i].value = this.BPMs[i]; } + /** + * @public + * @param {number} i + * @returns {void} + */ slowDown(i) { this.BPMs[i] = parseFloat(this.BPMs[i]) - Math.round(0.1 * this.BPMs[i]); if (this.BPMs[i] < 30) { @@ -269,6 +297,10 @@ class Tempo { this.BPMInputs[i].value = this.BPMs[i]; } + /** + * @private + * @returns {void} + */ _draw() { // First thing to do is figure out where we are supposed to be based on the elapsed time. const d = new Date(); @@ -350,6 +382,11 @@ class Tempo { } } + /** + * @private + * @param {number} i + * @returns {void} + */ __save(i) { setTimeout(() => { // console.debug("saving a BPM block for " + this.BPMs[i]); @@ -367,6 +404,10 @@ class Tempo { }, 200 * i); } + /** + * @private + * @returns {void} + */ _saveTempo() { // Save a BPM block for each tempo. for (let i = 0; i < this.BPMs.length; i++) { @@ -374,6 +415,10 @@ class Tempo { } } + /** + * @private + * @returns {HTMLElement} + */ _get_save_lock() { return this._save_lock; }