Split viewer code into trackview.js
Also disabled iOS hack, as it seems to be causing issues, and fixed a minor drag-n-drop bug (wouldn't load if track was already playing past length of newly loaded track). To play without a viewer, you still have to stub it out. Not sure the best way to handle that case yet.
This commit is contained in:
Andy Sloane
parent
4b6e75332e
commit
8e114a16da
4 changed files with 465 additions and 398 deletions
334
trackview.js
Normal file
334
trackview.js
Normal file
|
|
@ -0,0 +1,334 @@
|
|||
(function (window, document) {
|
||||
if (!window.XMPlayer) {
|
||||
window.XMPlayer = {};
|
||||
}
|
||||
var player = window.XMPlayer;
|
||||
|
||||
if (!window.XMView) {
|
||||
window.XMView = {};
|
||||
}
|
||||
var view = window.XMView;
|
||||
|
||||
var _pattern_cellwidth = 16 + 4 + 8 + 4 + 8 + 16 + 4;
|
||||
var _scope_width = _pattern_cellwidth - 1;
|
||||
var _pattern_border = 20;
|
||||
|
||||
view.init = init;
|
||||
view.pushEvent = pushEvent;
|
||||
view.pause = pause;
|
||||
view.resume = resume;
|
||||
view.stop = stop;
|
||||
view.scope_width = _scope_width;
|
||||
|
||||
// Load font (ripped from FastTracker 2)
|
||||
var fontimg = new window.Image();
|
||||
fontimg.src = "ft2font.png";
|
||||
|
||||
var _fontmap_notes = [8*5, 8*22, 8*28];
|
||||
var pat_canvas_patnum;
|
||||
|
||||
var audio_events = [];
|
||||
var paused_events = [];
|
||||
var shown_row;
|
||||
|
||||
// canvas to render patterns onto
|
||||
var pat_canvas = document.createElement('canvas');
|
||||
|
||||
// pixel widths of each character in the proportional font
|
||||
var _fontwidths = [
|
||||
4, 7, 3, 6, 6, 6, 6, 5, 4, 5, 5, 5, 5, 5, 7, 7,
|
||||
5, 5, 5, 6, 6, 6, 6, 6, 6, 7, 6, 7, 7, 7, 7, 7,
|
||||
4, 2, 5, 7, 7, 7, 7, 3, 4, 4, 6, 6, 3, 6, 2, 7,
|
||||
6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 2, 3, 6, 6, 6, 7,
|
||||
7, 7, 7, 7, 7, 7, 7, 7, 7, 2, 7, 7, 7, 8, 8, 7,
|
||||
7, 7, 7, 7, 8, 7, 7, 8, 8, 8, 7, 4, 7, 4, 4, 5,
|
||||
3, 6, 6, 6, 6, 6, 4, 6, 6, 2, 4, 6, 2, 8, 6, 6,
|
||||
6, 6, 4, 6, 4, 6, 7, 8, 7, 6, 6, 4, 2, 4, 4, 4];
|
||||
|
||||
var _bigfontwidths = [
|
||||
4, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15,
|
||||
15, 15, 15, 15, 15, 15, 15, 15, 13, 13, 13, 15, 15, 15, 15, 15,
|
||||
4, 5, 12, 16, 15, 15, 16, 5, 8, 8, 13, 10, 6, 10, 5, 12,
|
||||
15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 5, 6, 12, 10, 12, 15,
|
||||
14, 15, 15, 15, 15, 15, 15, 15, 15, 5, 13, 15, 14, 15, 15, 15,
|
||||
15, 16, 15, 15, 15, 15, 15, 15, 15, 15, 16, 7, 12, 7, 13, 15,
|
||||
5, 13, 13, 13, 13, 13, 11, 13, 13, 5, 9, 13, 5, 16, 13, 13,
|
||||
13, 13, 12, 13, 11, 13, 13, 16, 15, 13, 15, 9, 2, 9, 15, 15];
|
||||
|
||||
// draw FT2 proportional font text to a drawing context
|
||||
// returns width rendered
|
||||
function drawText(text, dx, dy, ctx) {
|
||||
var dx0 = dx;
|
||||
for (var i = 0; i < text.length; i++) {
|
||||
var n = text.charCodeAt(i);
|
||||
var sx = (n&63)*8;
|
||||
var sy = (n>>6)*10 + 56;
|
||||
var width = _fontwidths[n];
|
||||
ctx.drawImage(fontimg, sx, sy, width, 10, dx, dy, width, 10);
|
||||
dx += width + 1;
|
||||
}
|
||||
return dx - dx0;
|
||||
}
|
||||
|
||||
function getTextSize(text, widthtable) {
|
||||
var width = 0;
|
||||
for (var i = 0; i < text.length; i++) {
|
||||
var n = text.charCodeAt(i);
|
||||
width += widthtable[n] + 1;
|
||||
}
|
||||
return width;
|
||||
}
|
||||
|
||||
function drawBigText(text, dx, dy, ctx) {
|
||||
var dx0 = dx;
|
||||
for (var i = 0; i < text.length; i++) {
|
||||
var n = text.charCodeAt(i);
|
||||
var sx = (n&31)*16;
|
||||
var sy = (n>>5)*20 + 96;
|
||||
var width = _bigfontwidths[n];
|
||||
ctx.drawImage(fontimg, sx, sy, width, 20, dx, dy, width, 20);
|
||||
dx += width + 1;
|
||||
}
|
||||
return dx - dx0;
|
||||
}
|
||||
|
||||
function RenderPattern(canv, pattern) {
|
||||
// a pattern consists of NxM cells which look like
|
||||
// N-O II VV EFF
|
||||
var cellwidth = _pattern_cellwidth;
|
||||
canv.width = pattern[0].length * cellwidth + _pattern_border;
|
||||
canv.height = pattern.length * 8;
|
||||
var ctx = canv.getContext('2d');
|
||||
ctx.fillcolor='#000';
|
||||
ctx.fillRect(0, 0, canv.width, canv.height);
|
||||
for (var j = 0; j < pattern.length; j++) {
|
||||
var row = pattern[j];
|
||||
var dy = j * 8;
|
||||
// render row number
|
||||
ctx.drawImage(fontimg, 8*(j>>4), 0, 8, 8, 2, dy, 8, 8);
|
||||
ctx.drawImage(fontimg, 8*(j&15), 0, 8, 8, 10, dy, 8, 8);
|
||||
|
||||
for (var i = 0; i < row.length; i++) {
|
||||
var dx = i*cellwidth + 2 + _pattern_border;
|
||||
var data = row[i];
|
||||
|
||||
// render note
|
||||
var note = data[0];
|
||||
if (note < 0) {
|
||||
ctx.drawImage(fontimg, 0, 8*5, 16, 8, dx, dy, 16, 8);
|
||||
} else {
|
||||
var octave = (note/12)|0;
|
||||
var note_fontrow = _fontmap_notes[(octave/3)|0];
|
||||
note = (note % (12*3))|0;
|
||||
ctx.drawImage(fontimg, 16+16*note, note_fontrow, 16, 8, dx, dy, 16, 8);
|
||||
}
|
||||
dx += 20;
|
||||
|
||||
// render instrument
|
||||
var inst = data[1];
|
||||
if (inst != -1) { // no instrument = render nothing
|
||||
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;
|
||||
|
||||
// render volume
|
||||
var vol = data[2];
|
||||
if (vol < 0x10) {
|
||||
ctx.drawImage(fontimg, 312, 0, 8, 8, dx, dy, 8, 8);
|
||||
} else {
|
||||
ctx.drawImage(fontimg, 8*(vol>>4) + 56*8, 4*8, 8, 8, dx, dy, 8, 8);
|
||||
ctx.drawImage(fontimg, 8*(vol&15), 4*8, 4, 8, dx+4, dy, 4, 8);
|
||||
}
|
||||
dx += 8;
|
||||
|
||||
// render effect
|
||||
var eff = data[3];
|
||||
var effdata = data[4];
|
||||
ctx.drawImage(fontimg, 8*eff + 16*8, 4*8, 8, 8, dx, dy, 8, 8);
|
||||
dx += 8;
|
||||
ctx.drawImage(fontimg, 8*(effdata>>4), 4*8, 4, 8, dx, dy, 4, 8);
|
||||
ctx.drawImage(fontimg, 8*(effdata&15), 4*8, 4, 8, dx+4, dy, 4, 8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function redrawScreen() {
|
||||
if (audio_events.length === 0) return;
|
||||
|
||||
var e;
|
||||
var t = player.audioctx.currentTime;
|
||||
do {
|
||||
e = audio_events.shift();
|
||||
} while(e.t < t && audio_events.length > 0);
|
||||
if (!e) return;
|
||||
var VU = e.vu;
|
||||
var scopes = e.scopes;
|
||||
var ctx;
|
||||
|
||||
if (e.scopes) {
|
||||
// update VU meters & oscilliscopes
|
||||
var canvas = document.getElementById("vu");
|
||||
ctx = canvas.getContext("2d");
|
||||
ctx.fillStyle = '#000';
|
||||
ctx.fillRect(0, 0, canvas.width, 64);
|
||||
ctx.fillStyle = '#0f0';
|
||||
ctx.strokeStyle = '#55acff';
|
||||
for (var j = 0; j < player.xm.nchan; j++) {
|
||||
var x = _pattern_border + j * _pattern_cellwidth;
|
||||
// render channel number
|
||||
drawText(''+j, x, 1, ctx);
|
||||
|
||||
// volume in dB as a green bar
|
||||
var vu_y = -Math.log(VU[j])*10;
|
||||
ctx.fillRect(x, vu_y, 2, 64-vu_y);
|
||||
|
||||
// oscilloscope
|
||||
var scope = scopes[j];
|
||||
if (scope) {
|
||||
ctx.beginPath();
|
||||
for (var k = 0; k < _scope_width; k++) {
|
||||
ctx.lineTo(x + 1 + k, 32 - 16 * scope[k]);
|
||||
}
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (e.row != shown_row) {
|
||||
if (e.pat != pat_canvas_patnum) {
|
||||
var p = player.xm.patterns[e.pat];
|
||||
if (p) {
|
||||
RenderPattern(pat_canvas, player.xm.patterns[e.pat]);
|
||||
pat_canvas_patnum = e.pat;
|
||||
}
|
||||
}
|
||||
var gfx = document.getElementById("gfxpattern");
|
||||
ctx = gfx.getContext('2d');
|
||||
ctx.fillStyle = '#000';
|
||||
ctx.fillRect(0, 0, gfx.width, gfx.height);
|
||||
ctx.fillStyle = '#2a5684';
|
||||
ctx.fillRect(0, gfx.height/2 - 4, gfx.width, 8);
|
||||
ctx.globalCompositeOperation = 'lighten';
|
||||
ctx.drawImage(pat_canvas, 0, gfx.height / 2 - 4 - 8*(e.row));
|
||||
ctx.globalCompositeOperation = 'source-over';
|
||||
shown_row = e.row;
|
||||
}
|
||||
|
||||
if (audio_events.length > 0) {
|
||||
var next_event = audio_events[0].t;
|
||||
setTimeout(redrawScreen, 1000*(next_event - player.audioctx.currentTime));
|
||||
}
|
||||
}
|
||||
|
||||
function init() {
|
||||
var title = document.getElementById("title");
|
||||
// make title element fit text exactly, then render it
|
||||
title.width = getTextSize(player.xm.songname, _bigfontwidths);
|
||||
var ctx = title.getContext('2d');
|
||||
drawBigText(player.xm.songname, 0, 1, ctx);
|
||||
|
||||
var instrlist = document.getElementById("instruments");
|
||||
// clear instrument list if not already clear
|
||||
while (instrlist.childNodes.length) {
|
||||
instrlist.removeChild(instrlist.childNodes[0]);
|
||||
}
|
||||
var instrcols = ((player.xm.instruments.length + 7) / 8) | 0;
|
||||
for (var i = 0; i < instrcols; i++) {
|
||||
var canvas = document.createElement('canvas');
|
||||
ctx = canvas.getContext('2d');
|
||||
var instrcolumnwidth = 8*22;
|
||||
canvas.width = instrcolumnwidth;
|
||||
canvas.height = 8 * 10;
|
||||
ctx.fillStyle = '#000';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
var hasname = 0, hasdata = 0;
|
||||
for (var j = 8*i; j < Math.min(8*i+8, player.xm.instruments.length); j++) {
|
||||
var y = 10*(j - 8*i);
|
||||
var n = (j+1).toString(16);
|
||||
if (j < 15) n = '0' + n;
|
||||
var data = player.xm.instruments[j].samples;
|
||||
if (data) {
|
||||
var len = data[0].len;
|
||||
data = data[0].sampledata;
|
||||
var scale = Math.ceil(len / instrcolumnwidth);
|
||||
ctx.strokeStyle = '#55acff';
|
||||
ctx.beginPath();
|
||||
for (var k = 0; k < Math.min(len / scale, instrcolumnwidth - 20); k++) {
|
||||
ctx.lineTo(k + 20, y + data[k*scale] * 4 + 4);
|
||||
}
|
||||
ctx.stroke();
|
||||
hasdata++;
|
||||
}
|
||||
var name = player.xm.instruments[j].name;
|
||||
ctx.globalCompositeOperation = 'lighten';
|
||||
drawText(n, 1, y, ctx);
|
||||
if (name !== '') {
|
||||
drawText(player.xm.instruments[j].name, 20, y, ctx);
|
||||
hasname++;
|
||||
}
|
||||
ctx.globalCompositeOperation = 'source-over';
|
||||
}
|
||||
if (hasname || hasdata) {
|
||||
instrlist.appendChild(canvas);
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('vu').width = _pattern_border +
|
||||
_pattern_cellwidth * player.xm.nchan;
|
||||
var gfxpattern = document.getElementById("gfxpattern");
|
||||
gfxpattern.width = _pattern_cellwidth * player.xm.nchan + _pattern_border;
|
||||
|
||||
// generate a fake audio event to render the initial paused screen
|
||||
var scopes = [];
|
||||
for (i = 0; i < player.xm.nchan; i++) {
|
||||
scopes.push(new Float32Array(_scope_width));
|
||||
}
|
||||
|
||||
// reset display
|
||||
shown_row = undefined;
|
||||
pat_canvas_patnum = undefined;
|
||||
|
||||
audio_events.push({
|
||||
t: 0, row: 0, pat: player.xm.songpats[0],
|
||||
vu: new Float32Array(player.xm.nchan),
|
||||
scopes: scopes
|
||||
});
|
||||
redrawScreen();
|
||||
}
|
||||
|
||||
function pushEvent(e) {
|
||||
audio_events.push(e);
|
||||
if (audio_events.length == 1) {
|
||||
requestAnimationFrame(redrawScreen);
|
||||
}
|
||||
}
|
||||
|
||||
function pause() {
|
||||
// grab all the audio events
|
||||
var t = player.audioctx.currentTime;
|
||||
while (audio_events.length > 0) {
|
||||
var e = audio_events.shift();
|
||||
e.t -= t;
|
||||
paused_events.push(e);
|
||||
}
|
||||
}
|
||||
|
||||
function resume() {
|
||||
var t = player.audioctx.currentTime;
|
||||
while (paused_events.length > 0) {
|
||||
var e = paused_events.shift();
|
||||
e.t += t;
|
||||
audio_events.push(e);
|
||||
}
|
||||
requestAnimationFrame(redrawScreen);
|
||||
}
|
||||
|
||||
function stop() {
|
||||
audio_events = [];
|
||||
paused_events = [];
|
||||
}
|
||||
|
||||
})(window, document);
|
||||
Loading…
Reference in a new issue