show the instruments

index.html

@@ -7,14 +7,14 @@
   <div><canvas id='gfxpattern' width=640 height=200></canvas></div>
 <pre id='debug'>
 </pre>
-<pre id='pattern'>
+<pre id='instruments'>
 </pre>
 <pre>
 code: <a href="http://github.com/a1k0n/jsxm/">github.com/a1k0n/jsxm</a>
 todo:
  - file picker, upload more xms to a host we can access cross-origin
  - make display even more faithfully FT2-like
- - render instrument list
+ - render instrument list in ft2 font
  - oscilloscopes
  - fix bugs!
    - envelope loops - are they right or not now?

xm.js

@@ -52,7 +52,9 @@ function RenderPattern(canv, pattern) {
       // render instrument
       var inst = data[1];
       if (inst != -1) {  // no instrument = render nothing
-        ctx.drawImage(fontimg, 8*(inst>>4), 4*8, 4, 8, dx, dy, 4, 8);
+        if (inst > 15) {
+          ctx.drawImage(fontimg, 8*(inst>>4), 4*8, 4, 8, dx, dy, 4, 8);
+        }
         ctx.drawImage(fontimg, 8*(inst&15), 4*8, 4, 8, dx+4, dy, 4, 8);
       }
       dx += 12;
@@ -1137,6 +1139,17 @@ function playXM(arrayBuf) {
   var gfxpattern = document.getElementById("gfxpattern");
   gfxpattern.width = _pattern_cellwidth * nchan + _pattern_border;
 
+  var instrlist = document.getElementById("instruments");
+  var list = [];
+  for (var i = 0; i < ninst; i++) {
+    var inst = instruments[i];
+    if (inst == null) continue;
+    var n = (i+1).toString(16);
+    if (i < 15) n = ' ' + n;
+    list.push(n + " " + inst.name);
+  }
+  instrlist.innerHTML = list.join("\n");
+
   // start playing
   gainNode.connect(audioctx.destination);
 }