mirror of https://github.com/espruino/BangleApps
use simpler chord format, added many more chords
Tom Wallroth
parent
c150e388b6
commit
8919208caf
|
|
@ -1,30 +1,103 @@
|
|||
const chords = {
|
||||
// name: [name, ...finger_placement, fret],
|
||||
c: ["C", "0x", "33", "22", "x", "11", "x", 0],
|
||||
d: ["D", "0x", "0x", "x", "21", "33", "22", 0],
|
||||
dm: ["Dm", "0x", "0x", "x", "22", "33", "11", 0],
|
||||
e: ["E", "x", "22", "23", "11", "x", "x", 0],
|
||||
em: ["Em", "x", "22", "23", "x", "x", "x", 0],
|
||||
em7: ["Em7", "x", "11", "x", "x", "x", "x", 0],
|
||||
f: ["F", "0x", "0x", "33", "22", "11", "11", 0],
|
||||
g: ["G", "32", "21", "x", "x", "x", "33", 0],
|
||||
a: ["A", "0x", "x", "21", "22", "23", "x", 0],
|
||||
am: ["Am", "0x", "x", "23", "22", "11", "x", 0],
|
||||
a7: ["A7", "0x", "x", "21", "x", "23", "x", 0],
|
||||
b7: ["B7", "0x", "22", "11", "23", "x", "24", 0],
|
||||
cadd9: ["Cadd9", "0x", "32", "21", "x", "33", "34", 0],
|
||||
dadd11: ["Dadd11", "0x", "33", "22", "x", "11", "x", 3],
|
||||
csus2: ["Csus2", "0x", "33", "x", "x", "11", "0x", 0],
|
||||
gadd9: ["Gadd9", "32", "0x", "x", "21", "x", "33", 0],
|
||||
aadd9: ["Aadd9", "11", "33", "34", "22", "x", "x", 5],
|
||||
fsharp7add11: ["F#7add11", "21", "43", "44", "32", "x", "x", 0],
|
||||
d9: ["D9", "0x", "22", "11", "23", "23", "0x", 4],
|
||||
g7: ["G7", "33", "22", "x", "x", "34", "11", 0],
|
||||
bflatd: ["Bb/D", "0x", "33", "11", "11", "11", "0x", 3],
|
||||
e7sharp9: ["E7#9", "0x", "22", "11", "23", "34", "0x", 6],
|
||||
a11: ["A11", "33", "0x", "34", "22", "11", "0x", 0],
|
||||
a9: ["A9", "32", "0x", "33", "21", "34", "0x", 3],
|
||||
}
|
||||
const chords = [
|
||||
// name: [name, placement, fingers, fret],
|
||||
// sourced from https://github.com/spilth/chord_diagrams/blob/main/lib/chord_diagrams/fingerings.csv
|
||||
['A', 'x02220', '', 0],
|
||||
['B', 'x24442', '', 0],
|
||||
['Bb', 'x13331', '', 0],
|
||||
['C', 'x32010', '', 0],
|
||||
['C#', 'x46664', '', 0],
|
||||
['D', 'xx0232', '', 0],
|
||||
['D#', 'x68886', '', 0],
|
||||
['E', '022100', '', 0],
|
||||
['Eb', 'x68886', '', 0],
|
||||
['F', '133211', '', 0],
|
||||
['F#', '244322', '', 0],
|
||||
['G', '320003', '', 0],
|
||||
['G#', '466544', '', 0],
|
||||
['C5', 'x355xx', '', 0],
|
||||
['D5', 'x577xx', '', 0],
|
||||
['D#5', 'x688xx', '', 0],
|
||||
['C6', 'x32210', '', 0],
|
||||
['D6', 'xx0202', '', 0],
|
||||
['E6', '022120', '', 0],
|
||||
['G6', '320000', '', 0],
|
||||
['A7', '002020', '', 0],
|
||||
['B7', 'x21202', '', 0],
|
||||
['C7', 'x32310', '', 0],
|
||||
['C#7', 'x46464', '', 0],
|
||||
['D7', 'x00212', '', 0],
|
||||
['E7', '020100', '', 0],
|
||||
['E7sus4', '020200', '', 0],
|
||||
['F7', '131211', '', 0],
|
||||
['F#7', '242322', '', 0],
|
||||
['G7', '320001', '', 0],
|
||||
['G#7', '464544', '', 0],
|
||||
['AM7', 'x02120', '', 0],
|
||||
['CM7', 'x32000', '', 0],
|
||||
['DM7', 'xx0222', '', 0],
|
||||
['EM7', 'xx2444', '', 0],
|
||||
['FM7', '132211', '', 0],
|
||||
['Cadd9', 'x32033', '', 0],
|
||||
['Fadd9', 'xx3213', '', 0],
|
||||
['Dsus2', 'xx0230', '', 0],
|
||||
['Asus2', 'x02200', '', 0],
|
||||
['Asus4', 'x02230', '', 0],
|
||||
['Dsus4', 'xx0233', '', 0],
|
||||
['Esus4', '022200', '', 0],
|
||||
['A7sus4', '002030', '', 0],
|
||||
['G7sus4', '353533', '', 0],
|
||||
['G+', 'x21003', '', 0],
|
||||
['Am', '002210', '', 0],
|
||||
['Bm', 'x24432', '', 0],
|
||||
['Cm', 'x35543', '', 0],
|
||||
['C#m', 'x46654', '', 0],
|
||||
['Dm', 'x00231', '', 0],
|
||||
['Em', '022000', '', 0],
|
||||
['Fm', '133111', '', 0],
|
||||
['F#m', '244222', '', 0],
|
||||
['Gm', '355333', '', 0],
|
||||
['G#m', '466444', '', 0],
|
||||
['Am7', '002010', '', 0],
|
||||
['A#m7', 'x13121', '', 0],
|
||||
['Bm7', 'x24232', '', 0],
|
||||
['Cm7', 'x35343', '', 0],
|
||||
['C#m7', 'x46454', '', 0],
|
||||
['Dm7', 'x00211', '', 0],
|
||||
['Em7', '020030', '', 0],
|
||||
['Fm7', '131111', '', 0],
|
||||
['F#m7', '242222', '', 0],
|
||||
['Gm7', '353333', '', 0],
|
||||
['Am9', 'x05557', '', 0],
|
||||
['Bm11', 'x20220', '', 0],
|
||||
['F#m11', '202200', '', 0],
|
||||
['A/C#', '042220', '', 0],
|
||||
['A/E', '00222x', '', 0],
|
||||
['A/F#', '202220', '', 0],
|
||||
['Bb/A', 'x00331', '', 0],
|
||||
['C/B', 'x22010', '', 0],
|
||||
['C/E', '032010', '', 0],
|
||||
['D/A', 'x04232', '', 0],
|
||||
['D/F#', '200232', '', 0],
|
||||
['F/A', 'x03211', '', 0],
|
||||
['G/B', 'x20003', '', 0],
|
||||
['C7/G', '3323xx', '', 0],
|
||||
['D7/F#', '200212', '', 0],
|
||||
['G7/F', '123003', '', 0],
|
||||
['D9/F#', '2x0210', '', 0],
|
||||
['Am/D', 'xx0210', '', 0],
|
||||
['Am/G', '302210', '', 0],
|
||||
['A#m/D#', 'xx1321', '', 0],
|
||||
['Dm/F', '10323x', '', 0],
|
||||
['Gm/Bb', 'x10333', '', 0],
|
||||
['A7/G', '302020', '', 0],
|
||||
['G#dim', '4564xx', '', 0],
|
||||
['Adim', 'x01212', '', 0],
|
||||
['D#dim7', 'xx1212', '', 0],
|
||||
['G#dim7', '456464', '', 0],
|
||||
['Daug', 'xx0332', '', 0],
|
||||
['Aaug', 'x03221', '', 0],
|
||||
['Dadd11', 'xx0032', '', 0],
|
||||
]
|
||||
|
||||
const chordHeight = 85;
|
||||
const chordWidth = 80;
|
||||
|
|
@ -72,34 +145,39 @@ function drawChord(buffer, chord, x, y, options) {
|
|||
}
|
||||
|
||||
for (let i = 0; i < 6; i++) {
|
||||
const placement = chord[0];
|
||||
const fingers = chord[1];
|
||||
const xPos = x + i * stringWidths;
|
||||
let yPos = y + fretHeight * parseInt(chord[i][0]) - fretHeight/2
|
||||
let yPos = y + fretHeight * parseInt(placement[i]) - fretHeight/2
|
||||
|
||||
if (chord[i] === "x") {
|
||||
if (placement[i] === "0") {
|
||||
buffer.setColor(0x1).drawCircle(xPos, y - 5, 2);
|
||||
continue;
|
||||
}
|
||||
if (chord[i] === "0x") {
|
||||
} else if (placement[i] === "x") {
|
||||
buffer.setFontAlign(0, 0);
|
||||
buffer.setColor(0x1).drawString('x', xPos, y - 5);
|
||||
continue;
|
||||
}
|
||||
buffer.setFontAlign(0, 0);
|
||||
if (drawFinger) {
|
||||
if (drawFinger && chord[i].length>1) {
|
||||
buffer.setColor(0x0).fillCircle(xPos, yPos, circleSize);
|
||||
if (drawCircleRim) {
|
||||
buffer.setColor(0x1).drawCircle(xPos, yPos, circleSize);
|
||||
}
|
||||
buffer.setColor(0x1).drawString(chord[i][1], xPos, yPos);
|
||||
if (parseInt(fingers[i])) {
|
||||
buffer.setColor(0x1).drawString(fingers[i], xPos, yPos);
|
||||
}
|
||||
} else {
|
||||
buffer.setColor(0x1).fillCircle(xPos, yPos, circleSize);
|
||||
buffer.setFontAlign(0, -1)
|
||||
buffer.setColor(0x1).drawString(chord[i][1], xPos, y + fretHeight*4 + 2);
|
||||
if (parseInt(fingers[i])) {
|
||||
buffer.setColor(0x1).drawString(fingers[i], xPos, y + fretHeight*4 + 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (chord[6] !== 0) {
|
||||
if (chord[2] !== 0) {
|
||||
buffer.setFontAlign(-1, -1);
|
||||
buffer.drawString(chord[6] + 'fr', x + 5 * stringWidths + 2, y);
|
||||
buffer.drawString(chord[2] + 'fr', x + 5 * stringWidths + 2, y);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -132,7 +210,7 @@ function main(song) {
|
|||
const lyrics = song.lyrics;
|
||||
const foundChords = song.chords;
|
||||
const lyricsLines = lyrics.split('\n');
|
||||
const chordsDraw = Object.values(chords).filter(c=>foundChords.includes(c[0]));
|
||||
const chordsDraw = chords.filter(c=>foundChords.includes(c[0]));
|
||||
const R = Bangle.appRect;
|
||||
g.clear();
|
||||
drawApp(lyricsLines, chordsDraw, currentScrollY, chordScrollX);
|
||||
|
|
|
|||
|
|
@ -24,17 +24,17 @@
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody id="songs">
|
||||
<tr v-for="(song, index) in localSongs">
|
||||
<td>{{song.name}}</td>
|
||||
<td>{{song.lyrics.slice(0, 30)}}</td>
|
||||
<td>{{song.chords.join(' ')}}</td>
|
||||
<td>{{song.lyrics.length + song.name.length}}</td>
|
||||
<td><button class="btn" v-on:click="setEditSong(song)">edit</button></td>
|
||||
<td><button class="btn" v-on:click="deleteSong(index)">delete</button></td>
|
||||
</tr>
|
||||
<tr><th colspan="3">
|
||||
<button v-on:click="addNewSong" class="btn">Add new song</button>
|
||||
</th></tr>
|
||||
<tr v-for="(song, index) in localSongs">
|
||||
<td>{{song.name}}</td>
|
||||
<td>{{song.lyrics.slice(0, 30)}}</td>
|
||||
<td>{{song.chords.join(' ')}}</td>
|
||||
<td>{{song.lyrics.length + song.name.length}}</td>
|
||||
<td><button class="btn" v-on:click="setEditSong(song)">edit</button></td>
|
||||
<td><button class="btn" v-on:click="deleteSong(index)">delete</button></td>
|
||||
</tr>
|
||||
<tr><th colspan="3">
|
||||
<button v-on:click="addNewSong" class="btn">Add new song</button>
|
||||
</th></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div v-if="editSong">
|
||||
|
|
@ -80,8 +80,14 @@
|
|||
return {
|
||||
newChord: '',
|
||||
builtInChords: [
|
||||
"C", "D", "Dm", "E", "Em", "Em7", "F", "G", "Am", "A", "B7", "Cadd9", "Dadd11", "Csus2",
|
||||
"Gadd9", "Aadd9", "F#7add11", "D9", "G7", "Bb/D", "E7#9", "A11", "A9",
|
||||
'A', 'B', 'Bb', 'C', 'C#', 'D', 'D#', 'E', 'Eb', 'F', 'F#', 'G', 'G#', 'C5', 'D5', 'D#5',
|
||||
'C6', 'D6', 'E6', 'G6', 'A7', 'B7', 'C7', 'C#7', 'D7', 'E7', 'E7sus4', 'F7', 'F#7', 'G7',
|
||||
'G#7', 'AM7', 'CM7', 'DM7', 'EM7', 'FM7', 'Cadd9', 'Fadd9', 'Dsus2', 'Asus2', 'Asus4',
|
||||
'Dsus4', 'Esus4', 'A7sus4', 'G7sus4', 'G+', 'Am', 'Bm', 'Cm', 'C#m', 'Dm', 'Em', 'Fm',
|
||||
'F#m', 'Gm', 'G#m', 'Am7', 'A#m7', 'Bm7', 'Cm7', 'C#m7', 'Dm7', 'Em7', 'Fm7', 'F#m7',
|
||||
'Gm7', 'Am9', 'Bm11', 'F#m11', 'A/C#', 'A/E', 'A/F#', 'Bb/A', 'C/B', 'C/E', 'D/A', 'D/F#',
|
||||
'F/A', 'G/B', 'C7/G', 'D7/F#', 'G7/F', 'D9/F#', 'Am/D', 'Am/G', 'A#m/D#', 'Dm/F', 'Gm/Bb',
|
||||
'A7/G', 'G#dim', 'Adim', 'D#dim7', 'G#dim7', 'Daug', 'Aaug', 'Dadd11',
|
||||
]
|
||||
}
|
||||
},
|
||||
|
|
@ -115,36 +121,36 @@
|
|||
},
|
||||
template: `
|
||||
<div id="add_song_form">
|
||||
<div class="columns">
|
||||
<div class="column col-4 col-xs-12">
|
||||
<input v-model="song.name" class="form-input input-sm" type="text" placeholder="Name">
|
||||
</div>
|
||||
<div>
|
||||
<h3>Chords in this Song</h3>
|
||||
<span v-if="song.chords.length === 0" style="font-size: 80%">
|
||||
<div class="columns">
|
||||
<div class="column col-4 col-xs-12">
|
||||
<input v-model="song.name" class="form-input input-sm" type="text" placeholder="Name">
|
||||
</div>
|
||||
<div>
|
||||
<h3>Chords in this Song</h3>
|
||||
<span v-if="song.chords.length === 0" style="font-size: 80%">
|
||||
Please add chords by clicking the bubbles below, or use the Auto-Detect Button after
|
||||
having inserted the lyrics.
|
||||
</span>
|
||||
<span class="chip" v-for="(chord, idx) in song.chords">
|
||||
<span class="chip" v-for="(chord, idx) in song.chords">
|
||||
{{chord}}
|
||||
<span v-on:click="removeChord(idx)" class="badge" data-badge="x"></span>
|
||||
<span v-on:click="removeChord(idx)" class="badge" data-badge="x"></span>
|
||||
</span>
|
||||
<h3>Available Chords</h3>
|
||||
<span class="chip" v-for="(chord, idx) in availableChords" v-on:click="addChord(chord)">
|
||||
<h3>Available Chords</h3>
|
||||
<span class="chip" v-for="(chord, idx) in availableChords" v-on:click="addChord(chord)">
|
||||
{{chord}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="column col-12 col-xs-12">
|
||||
</div>
|
||||
<div class="column col-12 col-xs-12">
|
||||
<span style="font-size: 80%">
|
||||
Please paste the lyrics and chords in the box below. The width of the text area below is twice the width of the BangleJS2 screen. Everything in the gray area cannot be seen on the screen
|
||||
</span>
|
||||
<div style="width: 60ch;">
|
||||
<div style="width: 60ch;">
|
||||
<textarea
|
||||
v-model="song.lyrics"
|
||||
class="form-input input-sm"
|
||||
aria-label="Song Text"
|
||||
ref="songText"
|
||||
style="
|
||||
v-model="song.lyrics"
|
||||
class="form-input input-sm"
|
||||
aria-label="Song Text"
|
||||
ref="songText"
|
||||
style="
|
||||
width: 60ch;
|
||||
font-family: monospace;
|
||||
min-height: 200px;
|
||||
|
|
@ -153,16 +159,16 @@
|
|||
background: rgb(255,255,255);
|
||||
background: linear-gradient(90deg, rgba(255,255,255,1) 50%, rgba(0,0,0,0.20) 50%);
|
||||
"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-12 col-xs-12">
|
||||
<span class="btn btn-sm" id="remove-empty-lines" v-on:click="removeEmptyLines">Remove empty lines</span>
|
||||
<span class="btn btn-sm" id="remove-empty-lines" v-on:click="autoDetectChords">Auto Detect Chords</span>
|
||||
</div>
|
||||
</div>
|
||||
<br><br>
|
||||
<div class="column col-12 col-xs-12">
|
||||
<span class="btn btn-sm" id="remove-empty-lines" v-on:click="removeEmptyLines">Remove empty lines</span>
|
||||
<span class="btn btn-sm" id="remove-empty-lines" v-on:click="autoDetectChords">Auto Detect Chords</span>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
<br><br>
|
||||
</div>
|
||||
`
|
||||
});
|
||||
var app = new Vue({
|
||||
el: '#app',
|
||||
|
|
|
|||
Loading…
Reference in New Issue