render larger chords

apps/guitarsongs/ChangeLog

@@ -1 +1,2 @@
 0.01: First Release
+0.02: WIP

apps/guitarsongs/app.js

@@ -1,15 +1,16 @@
 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],
+  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],
-  am: ["Am", "0X", "x", "21", "22", "23", "x", 0],
-  a: ["A", "0x", "x", "23", "22", "11", "x", 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],
@@ -25,13 +26,24 @@ const chords = {
   a9: ["A9", "32", "0x", "33", "21", "34", "0x", 3],
 }
 
+const chordHeight = 85;
+const chordWidth = 80;
+
+const chordOptions = {
+  stringWidths: 12,
+  fretHeight: 14,
+  circleSize: 4,
+  drawFinger: false,
+  drawCircleRim: false,
+}
+
 const chordCache = {};
 function drawChordCached(chord, x, y, options) {
   let image;
   if (chordCache[chord[0]]) {
     image = chordCache[chord[0]]
   } else {
-    arrbuff = Graphics.createArrayBuffer(60,65,1,{msb:true});
+    arrbuff = Graphics.createArrayBuffer(chordWidth,chordHeight,1,{msb:true});
     drawChord(arrbuff, chord, 0, 0, options);
     image = {width: arrbuff.getWidth(), height: arrbuff.getHeight(), bpp:arrbuff.getBPP(), buffer: arrbuff.buffer, transparent:0}
     chordCache[chord[0]] = image;
@@ -49,8 +61,8 @@ function drawChord(buffer, chord, x, y, options) {
 
   const name = chord[0];
   chord = chord.slice(1);
-  x += 2;
-  buffer.setColor(0x1).setFontAlign(-1, -1).drawString(name, x, y);
+  x += 3;
+  buffer.setFont('6x8').setColor(0x1).setFontAlign(-1, -1).drawString(name, x, y);
   y += 15;
   for (let i = 0; i < 6; i++) {
     buffer.drawLine(x + i * stringWidths, y, x + i * stringWidths, y + fretHeight*4);
@@ -91,26 +103,20 @@ function drawChord(buffer, chord, x, y, options) {
   }
 }
 
-const chordOptions = {
-  stringWidths: 8,
-  fretHeight: 10,
-  circleSize: 2,
-  drawFinger: false,
-  drawCircleRim: false,
-}
+
 
 function drawApp(lyricsLines, chordsDraw, scrollY, chordScrollX) {
   const R = Bangle.appRect;
 
   g.setFont('6x8');
-  if (scrollY < 60) {
+  if (scrollY < chordHeight) {
     for (let i=0; i<chordsDraw.length; i++) {
-      drawChordCached(chordsDraw[i], 3 + i*60 + chordScrollX, R.y + scrollY, chordOptions);
+      drawChordCached(chordsDraw[i], 3 + i*chordWidth + chordScrollX, R.y + scrollY, chordOptions);
     }
   }
   const lineHeight = g.stringMetrics(' ').height;
   for (let i=0; i<lyricsLines.length; i++){
-    const y = R.y + lineHeight * i + 60 + scrollY;
+    const y = R.y + lineHeight * i + chordHeight + scrollY;
     if (y < -lineHeight) continue;
     if (y > R.y2) break;
     g.setFontAlign(-1, -1).drawString(lyricsLines[i], R.x, y);
@@ -127,13 +133,13 @@ function main(song) {
   const foundChords = song.chords;
   const lyricsLines = lyrics.split('\n');
   const chordsDraw = Object.values(chords).filter(c=>foundChords.includes(c[0]));
-
+  const R = Bangle.appRect;
   g.clear();
   drawApp(lyricsLines, chordsDraw, currentScrollY, chordScrollX);
   lyricsHeight = g.stringMetrics(lyrics).height;
   Bangle.on('drag', (event) => {
     currentScrollY = Math.min(0, currentScrollY + event.dy);
-    chordScrollX = Math.max(Math.min(0, chordScrollX + event.dx), -(chordsDraw.length - 3)*60);
+    chordScrollX = Math.max(Math.min(0, chordScrollX + event.dx), -(song.chords.length*chordWidth - R.x2));
     g.clear();
     drawApp(lyricsLines, chordsDraw, currentScrollY, chordScrollX);
   })
@@ -142,7 +148,7 @@ function main(song) {
 function mainMenu () {
   const songs = (
       require("Storage").readJSON("guitar_songs.json", true) ||
-      [{'name': 'No songs', 'lyrics': 'Em\nPlease upload a song\nAm\nusing the Bangle App Loader', 'chords': ['Am', 'Em']}]
+      [{'name': 'No songs', 'lyrics': 'Em\nPlease upload a song\nAm        A7\nusing the Bangle App Loader', 'chords': ['Am', 'Em', 'A7']}]
   );
   const menu = {
     "": {"title": "Guitar Songs"},

apps/guitarsongs/metadata.json

@@ -1,7 +1,7 @@
 { "id": "guitarsongs",
   "name": "Guitar Songs",
   "shortName":"Guitar Songs",
-  "version":"0.01",
+  "version":"0.02",
   "description": "Songs lyrics and guitar chords",
   "icon": "app.png",
   "screenshots": [{"url": "screenshot.png"}],