Skip to content

Commit f385403

Browse files
paulrosenpaulrosen
committed
Flatten the parameters for the new abcjs with only one parameter object.
1 parent 66a7a18 commit f385403

File tree

1 file changed

+85
-102
lines changed

1 file changed

+85
-102
lines changed

‎pages/audio.vue‎

Lines changed: 85 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -11,49 +11,49 @@
1111
<v-card-text :class="optionsOpen ? 'opened' : 'closed'">
1212
<h2>General Params</h2>
1313
<v-layout wrap justify-start align-center>
14-
<TextInputItem label="Quarter Notes Per Minute" :help="helpText.qpm" v-model="midiParams.qpm"></TextInputItem>
15-
<TextInputItem label="Instrument number (program)" :help="helpText.program" v-model="midiParams.program"></TextInputItem>
16-
<TextInputItem label="Half-steps to transpose" :help="helpText.transpose" v-model="midiParams.transpose"></TextInputItem>
17-
<TextInputItem label="Index of the Tune" :help="helpText.startingTune" v-model="renderParams.startingTune"></TextInputItem>
14+
<TextInputItem label="Quarter Notes Per Minute" :help="helpText.qpm" v-model="abcjsParams.qpm"></TextInputItem>
15+
<TextInputItem label="Instrument number (program)" :help="helpText.program" v-model="abcjsParams.program"></TextInputItem>
16+
<TextInputItem label="Half-steps to transpose" :help="helpText.transpose" v-model="abcjsParams.transpose"></TextInputItem>
17+
<TextInputItem label="Index of the Tune" :help="helpText.startingTune" v-model="abcjsParams.startingTune"></TextInputItem>
1818
<TextInputItem label="Sound Font Location" :help="helpText.soundFontUrl" v-model="soundFontUrl"></TextInputItem>
1919
</v-layout>
2020
<h2>Download Params</h2>
2121
<v-layout wrap justify-start align-center>
22-
<CheckboxItem label="Downloadable MIDI?" :help="helpText.generateDownload" v-model="midiParams.generateDownload"></CheckboxItem>
23-
<TextInputItem label="Download Link Label (%T=title)" :help="helpText.downloadLabel" v-model="midiParams.downloadLabel"></TextInputItem>
24-
<TextInputItem label="Pre-Download Text" :help="helpText.preTextDownload" v-model="midiParams.preTextDownload"></TextInputItem>
25-
<TextInputItem label="Post-Download Text" :help="helpText.postTextDownload" v-model="midiParams.postTextDownload"></TextInputItem>
26-
<TextInputItem label="Download Class" :help="helpText.downloadClass" v-model="midiParams.downloadClass"></TextInputItem>
22+
<CheckboxItem label="Downloadable MIDI?" :help="helpText.generateDownload" v-model="abcjsParams.generateDownload"></CheckboxItem>
23+
<TextInputItem label="Download Link Label (%T=title)" :help="helpText.downloadLabel" v-model="abcjsParams.downloadLabel"></TextInputItem>
24+
<TextInputItem label="Pre-Download Text" :help="helpText.preTextDownload" v-model="abcjsParams.preTextDownload"></TextInputItem>
25+
<TextInputItem label="Post-Download Text" :help="helpText.postTextDownload" v-model="abcjsParams.postTextDownload"></TextInputItem>
26+
<TextInputItem label="Download Class" :help="helpText.downloadClass" v-model="abcjsParams.downloadClass"></TextInputItem>
2727
</v-layout>
2828
<h2>Inline Params</h2>
2929
<v-layout wrap justify-start align-center>
30-
<CheckboxItem label="Inline MIDI?" :help="helpText.generateInline" v-model="midiParams.generateInline"></CheckboxItem>
31-
<CheckboxItem label="Show Loop Toggle?" :help="helpText.loopToggle" v-model="midiParams.inlineControls.loopToggle"></CheckboxItem>
32-
<CheckboxItem label="Standard Controls?" :help="helpText.standard" v-model="midiParams.inlineControls.standard"></CheckboxItem>
33-
<CheckboxItem label="Tempo Control?" :help="helpText.tempo" v-model="midiParams.inlineControls.tempo"></CheckboxItem>
34-
<CheckboxItem label="Hide?" :help="helpText.hide" v-model="midiParams.inlineControls.hide"></CheckboxItem>
35-
<CheckboxItem label="Auto Play?" :help="helpText.startPlaying" v-model="midiParams.inlineControls.startPlaying"></CheckboxItem>
36-
<TextInputItem label="Pre-Inline Text (%T=title)" :help="helpText.preTextInline" v-model="midiParams.inlineControls.preTextInline"></TextInputItem>
37-
<TextInputItem label="Post-Inline Text (%T=title)" :help="helpText.postTextInline" v-model="midiParams.inlineControls.postTextInline"></TextInputItem>
38-
<TextInputItem label="Loop Tooltip" :help="helpText.tooltipLoop" v-model="midiParams.inlineControls.tooltipLoop"></TextInputItem>
39-
<TextInputItem label="Reset Tooltip" :help="helpText.tooltipReset" v-model="midiParams.inlineControls.tooltipReset"></TextInputItem>
40-
<TextInputItem label="Play Tooltip" :help="helpText.tooltipPlay" v-model="midiParams.inlineControls.tooltipPlay"></TextInputItem>
41-
<TextInputItem label="Progress Tooltip" :help="helpText.tooltipProgress" v-model="midiParams.inlineControls.tooltipProgress"></TextInputItem>
42-
<TextInputItem label="Tempo Tooltip" :help="helpText.tooltipTempo" v-model="midiParams.inlineControls.tooltipTempo"></TextInputItem>
30+
<CheckboxItem label="Inline MIDI?" :help="helpText.generateInline" v-model="abcjsParams.generateInline"></CheckboxItem>
31+
<CheckboxItem label="Show Loop Toggle?" :help="helpText.loopToggle" v-model="abcjsParams.inlineControls.loopToggle"></CheckboxItem>
32+
<CheckboxItem label="Standard Controls?" :help="helpText.standard" v-model="abcjsParams.inlineControls.standard"></CheckboxItem>
33+
<CheckboxItem label="Tempo Control?" :help="helpText.tempo" v-model="abcjsParams.inlineControls.tempo"></CheckboxItem>
34+
<CheckboxItem label="Hide?" :help="helpText.hide" v-model="abcjsParams.inlineControls.hide"></CheckboxItem>
35+
<CheckboxItem label="Auto Play?" :help="helpText.startPlaying" v-model="abcjsParams.inlineControls.startPlaying"></CheckboxItem>
36+
<TextInputItem label="Pre-Inline Text (%T=title)" :help="helpText.preTextInline" v-model="abcjsParams.inlineControls.preTextInline"></TextInputItem>
37+
<TextInputItem label="Post-Inline Text (%T=title)" :help="helpText.postTextInline" v-model="abcjsParams.inlineControls.postTextInline"></TextInputItem>
38+
<TextInputItem label="Loop Tooltip" :help="helpText.tooltipLoop" v-model="abcjsParams.inlineControls.tooltipLoop"></TextInputItem>
39+
<TextInputItem label="Reset Tooltip" :help="helpText.tooltipReset" v-model="abcjsParams.inlineControls.tooltipReset"></TextInputItem>
40+
<TextInputItem label="Play Tooltip" :help="helpText.tooltipPlay" v-model="abcjsParams.inlineControls.tooltipPlay"></TextInputItem>
41+
<TextInputItem label="Progress Tooltip" :help="helpText.tooltipProgress" v-model="abcjsParams.inlineControls.tooltipProgress"></TextInputItem>
42+
<TextInputItem label="Tempo Tooltip" :help="helpText.tooltipTempo" v-model="abcjsParams.inlineControls.tooltipTempo"></TextInputItem>
4343
</v-layout>
4444

4545
<h2>Callback Params</h2>
4646
<v-layout wrap justify-start align-center>
47-
<CheckboxItem label="Listener?" :help="helpText.doListener" v-model="midiParams.doListener"></CheckboxItem>
48-
<CheckboxItem label="Animate?" :help="helpText.doAnimate" v-model="midiParams.doAnimate"></CheckboxItem>
49-
<TextInputItem label="Callback Context" :help="helpText.context" v-model="midiParams.context"></TextInputItem>
47+
<CheckboxItem label="Listener?" :help="helpText.doListener" v-model="abcjsParams.doListener"></CheckboxItem>
48+
<CheckboxItem label="Animate?" :help="helpText.doAnimate" v-model="abcjsParams.doAnimate"></CheckboxItem>
49+
<TextInputItem label="Callback Context" :help="helpText.context" v-model="abcjsParams.context"></TextInputItem>
5050
</v-layout>
5151

5252
<h2>Metronome Params</h2>
5353
<v-layout wrap justify-start align-center>
54-
<TextInputItem label="Drum String" :help="helpText.drum" v-model="midiParams.drum" dlgWidth="500"></TextInputItem>
55-
<TextInputItem label="Number of Bars" :help="helpText.drumBars" v-model="midiParams.drumBars"></TextInputItem>
56-
<TextInputItem label="Number Of Intro Bars" :help="helpText.drumIntro" v-model="midiParams.drumIntro"></TextInputItem>
54+
<TextInputItem label="Drum String" :help="helpText.drum" v-model="abcjsParams.drum" dlgWidth="500"></TextInputItem>
55+
<TextInputItem label="Number of Bars" :help="helpText.drumBars" v-model="abcjsParams.drumBars"></TextInputItem>
56+
<TextInputItem label="Number Of Intro Bars" :help="helpText.drumIntro" v-model="abcjsParams.drumIntro"></TextInputItem>
5757
</v-layout>
5858

5959
<h2>Commands</h2>
@@ -113,7 +113,7 @@ import abcjs from 'abcjs/midi;
113113
},
114114
data() {
115115
return {
116-
midiParams: {
116+
abcjsParams: {
117117
qpm: "",
118118
program: "",
119119
transpose: "",
@@ -143,8 +143,7 @@ import abcjs from 'abcjs/midi;
143143
drum: "",
144144
drumBars: "1",
145145
drumIntro: "0",
146-
},
147-
renderParams: {
146+
148147
startingTune: "0",
149148
},
150149
@@ -212,13 +211,7 @@ ${this.formatDrumTable()}`,
212211
};
213212
},
214213
watch: {
215-
'midiParams': {
216-
handler: function () {
217-
this.redraw();
218-
},
219-
deep: true
220-
},
221-
'renderParams': {
214+
'abcjsParams': {
222215
handler: function () {
223216
this.redraw();
224217
},
@@ -246,11 +239,11 @@ ${this.formatDrumTable()}`,
246239
abcjs.midi.stopPlaying();
247240
},
248241
constructMidiParams() {
249-
this.midiParams.listener = this.midiParams.doListener ? this.listenerCallback : undefined;
250-
this.midiParams.animate = this.midiParams.doAnimate ?
242+
this.abcjsParams.listener = this.abcjsParams.doListener ? this.listenerCallback : undefined;
243+
this.abcjsParams.animate = this.abcjsParams.doAnimate ?
251244
{ listener: this.animateCallback, target: this.tunes[0] }
252245
: undefined;
253-
return this.midiParams;
246+
return this.abcjsParams;
254247
},
255248
formatDrumTable() {
256249
return `<table class="datatable table drum-examples"><tr><th>Time Sig</th><th>Drum String</th><th>Num Bars</th><th>Bars of Intro</th></tr>
@@ -268,85 +261,78 @@ ${this.formatDrumTable()}`,
268261
},
269262
formatInlineControls() {
270263
let params = "";
271-
if (!this.midiParams.inlineControls.standard)
264+
if (!this.abcjsParams.inlineControls.standard)
272265
params += "\n standard: false,";
273-
if (this.midiParams.inlineControls.loopToggle)
266+
if (this.abcjsParams.inlineControls.loopToggle)
274267
params += "\n loopToggle: true,";
275-
if (this.midiParams.inlineControls.hide)
268+
if (this.abcjsParams.inlineControls.hide)
276269
params += "\n hide: true,";
277-
if (this.midiParams.inlineControls.startPlaying)
270+
if (this.abcjsParams.inlineControls.startPlaying)
278271
params += "\n startPlaying: true,";
279-
if (this.midiParams.inlineControls.tempo)
272+
if (this.abcjsParams.inlineControls.tempo)
280273
params += "\n tempo: true,";
281-
if (this.midiParams.inlineControls.tooltipLoop !== "Click to toggle play once/repeat.")
282-
params += `\n tooltipLoop: "${this.midiParams.inlineControls.tooltipLoop}",`;
283-
if (this.midiParams.inlineControls.tooltipReset !== "Click to go to beginning.")
284-
params += `\n tooltipReset: "${this.midiParams.inlineControls.tooltipReset}",`;
285-
if (this.midiParams.inlineControls.tooltipPlay !== "Click to play/pause.")
286-
params += `\n tooltipPlay: "${this.midiParams.inlineControls.tooltipPlay}",`;
287-
if (this.midiParams.inlineControls.tooltipProgress !== "Click to change the playback position.")
288-
params += `\n tooltipProgress: "${this.midiParams.inlineControls.tooltipProgress}",`;
289-
if (this.midiParams.inlineControls.tooltipTempo !== "Change the playback speed.")
290-
params += `\n tooltipTempo: "${this.midiParams.inlineControls.tooltipTempo}",`;
274+
if (this.abcjsParams.inlineControls.tooltipLoop !== "Click to toggle play once/repeat.")
275+
params += `\n tooltipLoop: "${this.abcjsParams.inlineControls.tooltipLoop}",`;
276+
if (this.abcjsParams.inlineControls.tooltipReset !== "Click to go to beginning.")
277+
params += `\n tooltipReset: "${this.abcjsParams.inlineControls.tooltipReset}",`;
278+
if (this.abcjsParams.inlineControls.tooltipPlay !== "Click to play/pause.")
279+
params += `\n tooltipPlay: "${this.abcjsParams.inlineControls.tooltipPlay}",`;
280+
if (this.abcjsParams.inlineControls.tooltipProgress !== "Click to change the playback position.")
281+
params += `\n tooltipProgress: "${this.abcjsParams.inlineControls.tooltipProgress}",`;
282+
if (this.abcjsParams.inlineControls.tooltipTempo !== "Change the playback speed.")
283+
params += `\n tooltipTempo: "${this.abcjsParams.inlineControls.tooltipTempo}",`;
291284
return params;
292285
},
293286
formatMidiParams() {
294287
let params = "";
295-
if (this.midiParams.qpm !== "")
296-
params += `\n qpm: ${this.midiParams.qpm},`;
297-
if (this.midiParams.program !== "")
298-
params += `\n program: ${this.midiParams.program},`;
299-
if (this.midiParams.transpose !== "")
300-
params += `\n transpose: ${this.midiParams.transpose},`;
301-
if (this.midiParams.generateDownload)
288+
if (this.abcjsParams.qpm !== "")
289+
params += `\n qpm: ${this.abcjsParams.qpm},`;
290+
if (this.abcjsParams.program !== "")
291+
params += `\n program: ${this.abcjsParams.program},`;
292+
if (this.abcjsParams.transpose !== "")
293+
params += `\n transpose: ${this.abcjsParams.transpose},`;
294+
if (this.abcjsParams.generateDownload)
302295
params += "\n generateDownload: true,";
303-
if (!this.midiParams.generateInline)
296+
if (!this.abcjsParams.generateInline)
304297
params += "\n generateInline: false,";
305-
if (this.midiParams.downloadClass !== "")
306-
params += `\n downloadClass: "${this.midiParams.downloadClass}",`;
307-
if (this.midiParams.preTextDownload !== "")
308-
params += `\n preTextDownload: "${this.midiParams.preTextDownload}",`;
309-
if (this.midiParams.postTextDownload !== "")
310-
params += `\n postTextDownload: "${this.midiParams.postTextDownload}",`;
311-
if (this.midiParams.preTextInline !== "")
312-
params += `\n preTextInline: "${this.midiParams.preTextInline}",`;
313-
if (this.midiParams.postTextInline !== "")
314-
params += `\n postTextInline: "${this.midiParams.postTextInline}",`;
315-
if (this.midiParams.drum !== "")
316-
params += `\n drum: ${this.midiParams.drum},`;
317-
if (this.midiParams.drumBars !== "1")
318-
params += `\n drumBars: ${this.midiParams.drumBars},`;
319-
if (this.midiParams.drumIntro !== "0")
320-
params += `\n drumIntro: ${this.midiParams.drumIntro},`;
321-
if (this.midiParams.doListener)
298+
if (this.abcjsParams.downloadClass !== "")
299+
params += `\n downloadClass: "${this.abcjsParams.downloadClass}",`;
300+
if (this.abcjsParams.preTextDownload !== "")
301+
params += `\n preTextDownload: "${this.abcjsParams.preTextDownload}",`;
302+
if (this.abcjsParams.postTextDownload !== "")
303+
params += `\n postTextDownload: "${this.abcjsParams.postTextDownload}",`;
304+
if (this.abcjsParams.preTextInline !== "")
305+
params += `\n preTextInline: "${this.abcjsParams.preTextInline}",`;
306+
if (this.abcjsParams.postTextInline !== "")
307+
params += `\n postTextInline: "${this.abcjsParams.postTextInline}",`;
308+
if (this.abcjsParams.drum !== "")
309+
params += `\n drum: ${this.abcjsParams.drum},`;
310+
if (this.abcjsParams.drumBars !== "1")
311+
params += `\n drumBars: ${this.abcjsParams.drumBars},`;
312+
if (this.abcjsParams.drumIntro !== "0")
313+
params += `\n drumIntro: ${this.abcjsParams.drumIntro},`;
314+
if (this.abcjsParams.doListener)
322315
params += `\n listener: function(abcjsElement, currentEvent, context) {},`;
323-
if (this.midiParams.doAnimate)
316+
if (this.abcjsParams.doAnimate)
324317
params += `\n animate: { listener: function(abcjsElement, currentEvent, context) {}, target: tunes[0], qpm: 120 },`;
325-
if (this.midiParams.context)
326-
params += `\n context: ${this.midiParams.context},`;
318+
if (this.abcjsParams.context)
319+
params += `\n context: ${this.abcjsParams.context},`;
327320
328321
const inlineControls = this.formatInlineControls();
329322
if (inlineControls !== '')
330323
params += `\n inlineControls: {${inlineControls}\n },`;
331324
325+
if (this.abcjsParams.startingTune !== "1")
326+
params += `\n startingTune: ${this.abcjsParams.startingTune},`;
327+
332328
if (params === "")
333329
params = "{ }";
334330
else
335331
params = `{${params}
336332
}`;
337333
return params;
338334
},
339-
formatRenderParams() {
340-
let params = "";
341-
if (this.renderParams.startingTune !== "1")
342-
params += `\n startingTune: ${this.renderParams.startingTune},`;
343-
if (params === "")
344-
params = "{ }";
345-
else
346-
params = `{${params}
347-
}`;
348-
return params;
349-
},
335+
350336
formatSoundFontCall() {
351337
const comment = this.soundFontUrl === "" ? "//" : "";
352338
return `${comment}abcjs.midi.setSoundFont("${this.soundFontUrl}");`;
@@ -426,14 +412,11 @@ ${this.formatElements(range.elements)},
426412
redraw() {
427413
this.listenerOutput = null;
428414
this.animationOutput = null;
429-
const midiParams = this.formatMidiParams();
430-
const renderParams = this.formatRenderParams();
415+
const abcjsParams = this.formatMidiParams();
431416
this.javascriptString = `abcjs.renderMidi(
432417
"midi-id",
433418
abcString,
434-
{ },
435-
${midiParams},
436-
${renderParams});
419+
${abcjsParams});
437420
438421
abcjs.midi.startPlaying(document.querySelector(".abcjs-inline-midi"));
439422
@@ -443,8 +426,8 @@ ${this.formatSoundFontCall()}`;
443426
444427
const soundFontUrl = this.soundFontUrl === "" ? "https://paulrosen.github.io/midi-js-soundfonts/FluidR3_GM/" : this.soundFontUrl;
445428
abcjs.midi.setSoundFont(soundFontUrl);
446-
this.tunes = this.renderAbc()("paper", this.inputAbc(), {}, {}, this.renderParams);
447-
this.renderMidi()("midi-id", this.inputAbc(), {}, this.constructMidiParams(), this.renderParams);
429+
this.tunes = this.renderAbc()("paper", this.inputAbc(), this.abcjsParams);
430+
this.renderMidi()("midi-id", this.inputAbc(), this.constructMidiParams());
448431
},
449432
}
450433
}

0 commit comments

Comments
 (0)