truck/Sahli
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

First use of Ansilove for rendering, plus loads of js lint fixes

Browse source
This commit is contained in:
Iam Naughton Phier 2014-10-10 03:55:37 +03:00
parent 413a4dad3e
commit a4eb5be5c9
2 changed files with 202 additions and 196 deletions
Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -2,7 +2,7 @@
<head> <head>
<title>Sahli - ascii/ansi viewer</title> <title>Sahli - ascii/ansi viewer</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="textmode.js"></script> <script type="text/javascript" src="ansilove.js/ansilove.js"></script>
<script type="text/javascript" src="sahli.js"></script> <script type="text/javascript" src="sahli.js"></script>
<link rel="stylesheet" href="sahli.css" type="text/css" media="screen" /> <link rel="stylesheet" href="sahli.css" type="text/css" media="screen" />
<meta charset='UTF-8' /> <meta charset='UTF-8' />

396
sahli.js
View file

@ -10,6 +10,12 @@
// Uses fonts by DMG, http://trueschool.se // Uses fonts by DMG, http://trueschool.se
// Uses SixteenColors textmode js library for rendering // Uses SixteenColors textmode js library for rendering
/* remove this before publishing, as alert is ... well just crap to leave in */
/*global alert */
// but don't remove these
/*global XMLHttpRequest, AnsiLove, Element */
var Sahli = function () { var Sahli = function () {
this.outbox = $('div#outbox'); this.outbox = $('div#outbox');
this.dbox = $('div#drawbox'); this.dbox = $('div#drawbox');
@ -68,9 +74,9 @@ var Sahli = function () {
}; };
this.loadplain = function (picdata, inserthere) { this.loadplain = function (picdata, inserthere) {
var ref = this; // var ref = this;
var pdiv = $('<div>'); var pdiv = $('<div>');
var canv = document.createElement('canvas'); // var canv = document.createElement('canvas');
var req = new XMLHttpRequest(); var req = new XMLHttpRequest();
var fname = this.location + '/' + picdata.file; var fname = this.location + '/' + picdata.file;
var ptxt = $('<pre></pre>'); var ptxt = $('<pre></pre>');
@ -90,70 +96,68 @@ var Sahli = function () {
// x-user-defined // x-user-defined
// this is going to be interesting when dealing with ansi files in UTF-8 and SHIFT-JIS etc // this is going to be interesting when dealing with ansi files in UTF-8 and SHIFT-JIS etc
req.overrideMimeType('text/plain; charset=ISO-8859-1'); req.overrideMimeType('text/plain; charset=ISO-8859-1');
req.onreadystatechange = function() { req.onreadystatechange = function () {
if (req.readyState === req.DONE) { if (req.readyState === req.DONE) {
if (req.status === 200 || req.status === 0) { if (req.status === 200 || req.status === 0) {
ptxt.text(this.responseText); ptxt.text(this.responseText);
inserthere.after(pdiv); inserthere.after(pdiv);
} else { } else {
sahli.loaderror(inserthere,fname,req.statusText,req.status) this.loaderror(inserthere, fname, req.statusText, req.status);
} }
} }
}; };
req.open('GET', fname , true); req.open('GET', fname, true);
req.send(null); req.send(null);
} };
this.loadansi = function(picdata,inserthere) { this.loadansi = function (picdata, inserthere) {
var fname = this.location + '/' + picdata.file; var fname = this.location + '/' + picdata.file;
var canv = document.createElement('canvas'); // var canv = document.createElement('canvas');
var pdiv = $('<div>'); var pdiv = $('<div>');
this.image = new ImageTextModeANSI(); // var SAUCE;
this.SAUCE = new ImageTextModeSAUCE(); AnsiLove.render(fname, function (canv, SAUCE) {
var picload = this.image.parseUrl(fname); pdiv.append(canv);
this.image.renderCanvas(canv); inserthere.after(pdiv);
pdiv.append(canv); this.origwidth = canv.width;
inserthere.after(pdiv); this.origheight = canv.height;
this.origwidth = canv.width; this.SAUCE = SAUCE;
this.origheight = canv.height; }, {"font": "80x25", "bits": "9", "columns": 80, "thumbnail": 0});
if (picload < 1) { };
// this is incorrect but currently parseUrl does not return errors.
// fix, then deal with.
sahli.loaderror(inserthere,fname,'Not found',404);
}
}
this.loadxbin = function(picdata,inserthere){ this.loadxbin = function (picdata, inserthere) {
alert('xbin'); alert('xbin', picdata, inserthere);
} };
this.loadbin = function(picdata,inserthere){ this.loadbin = function (picdata, inserthere) {
alert('bin'); alert('bin', picdata, inserthere);
} };
this.loadice = function(picdata,inserthere){
alert('ice'); this.loadice = function (picdata, inserthere) {
} alert('ice', picdata, inserthere);
this.loadidf = function(picdata,inserthere){ };
alert('idf');
} this.loadidf = function (picdata, inserthere) {
this.loadadf = function(picdata,inserthere){ alert('idf', picdata, inserthere);
alert('adf'); };
}
this.loadavatar = function(picdata,inserthere){ this.loadadf = function (picdata, inserthere) {
alert('avatar'); alert('adf', picdata, inserthere);
} };
this.loadtundra = function(picdata,inserthere){
alert('tundra'); this.loadavatar = function (picdata, inserthere) {
} alert('avatar', picdata, inserthere);
this.loadpcboard = function(picdata,inserthere){ };
alert('pcboard');
} this.loadtundra = function (picdata, inserthere) {
this.loadxbin = function(picdata,inserthere){ alert('tundra', picdata, inserthere);
alert('xbin'); };
}
this.loadpcboard = function (picdata, inserthere) {
alert('pcboard', picdata, inserthere);
};
this.fillinfo = function(picdata) { this.fillinfo = function (picdata) {
var infob = $('div.infobox'); var infob = $('div.infobox');
infob.find('h1').text(picdata.name); infob.find('h1').text(picdata.name);
infob.find('h2').text(picdata.author); infob.find('h2').text(picdata.author);
@ -165,22 +169,22 @@ var Sahli = function () {
infob.find('span#fontname').text(picdata.font); infob.find('span#fontname').text(picdata.font);
}; };
this.loaderror = function(inserthere,fname,errorText,errorCode) { this.loaderror = function (inserthere, fname, errorText, errorCode) {
var temptxt = ""; var temptxt = "";
if (errorCode === 404) { if (errorCode === 404) {
tmptxt = $("<h1>").text("Unable to find file " + fname); temptxt = $("<h1>").text("Unable to find file " + fname);
} else { } else {
tmptxt = $("<h1>").text("error! "+ errorText + " code " + errorCode + temptxt = $("<h1>").text("error! " + errorText + " code " + errorCode +
" file " + fname); " file " + fname);
} }
inserthere.after(tmptxt); inserthere.after(temptxt);
} };
this.calccolor = function(colorset) { this.calccolor = function (colorset) {
return 'rgba(' + colorset.toString() + ')'; return 'rgba(' + colorset.toString() + ')';
}; };
this.resize = function(amt) { this.resize = function (amt) {
var canv = $('canvas'); var canv = $('canvas');
var w = canv.width() * amt; var w = canv.width() * amt;
var h = canv.height() * amt; var h = canv.height() * amt;
@ -190,9 +194,9 @@ var Sahli = function () {
}, this.zoomspeed); }, this.zoomspeed);
}; };
this.fullwidth = function() { this.fullwidth = function () {
this.stopscroll(); this.stopscroll();
if ($('canvas').width() == this.dbox.width()) { if ($('canvas').width() === this.dbox.width()) {
this.originalsize(this.zoomspeed); this.originalsize(this.zoomspeed);
} else { } else {
var ratio = this.origwidth / this.dbox.width(); var ratio = this.origwidth / this.dbox.width();
@ -204,9 +208,9 @@ var Sahli = function () {
} }
}; };
this.fullheight = function() { this.fullheight = function () {
var canv = $('canvas'); var canv = $('canvas');
if (canv.height() == this.dbox.height()) { if (canv.height() === this.dbox.height()) {
this.originalsize(this.zoomspeed); this.originalsize(this.zoomspeed);
} else { } else {
var ratio = this.origheight / this.dbox.height(); var ratio = this.origheight / this.dbox.height();
@ -217,9 +221,11 @@ var Sahli = function () {
} }
}; };
this.originalsize = function(zoomspeed) { this.originalsize = function (zoomspeed) {
// why do we not have origwidth now? hmm. // why do we not have origwidth now? hmm.
var canv = $('canvas'); var canv = $('canvas');
var zs = zoomspeed; // why are we not using this?
zs = zs + 1;
canv.animate({ canv.animate({
width: this.origwidth, width: this.origwidth,
height: this.origheight height: this.origheight
@ -227,13 +233,13 @@ var Sahli = function () {
}; };
this.toptext = function(text) { this.toptext = function (text) {
if (this.DEBUG) { if (this.DEBUG) {
$('h1#top').text(text); $('h1#top').text(text);
} }
}; };
this.setscroll = function() { this.setscroll = function () {
var bottom = $('.scrolly').height(); var bottom = $('.scrolly').height();
var scrollto = bottom; var scrollto = bottom;
var steps; var steps;
@ -254,9 +260,9 @@ var Sahli = function () {
}, this.scroll_speed * steps, 'linear'); }, this.scroll_speed * steps, 'linear');
}; };
this.resizedrawbox = function(height) { this.resizedrawbox = function (height) {
var dbox1 = $('div#drawbox'); var dbox1 = $('div#drawbox');
if ('undefined' === typeof height) { if ('undefined' === height) {
dbox1.height(window.innerHeight - 2); dbox1.height(window.innerHeight - 2);
} else { } else {
dbox1.height(height); dbox1.height(height);
@ -264,29 +270,29 @@ var Sahli = function () {
dbox1.width(window.innerWidth - 2); dbox1.width(window.innerWidth - 2);
}; };
this.stopscroll = function() { this.stopscroll = function () {
this.dbox.stop(true); this.dbox.stop(true);
}; };
this.moveabout = function(lines) { this.moveabout = function (lines) {
var line = this.dbox.scrollTop(); var line = this.dbox.scrollTop();
this.dbox.stop(true); this.dbox.stop(true);
switch (lines) { switch (lines) {
case 0: case 0:
this.dbox.scrollTop(0); this.dbox.scrollTop(0);
break; break;
case Infinity: case Infinity:
this.dbox.scrollTop(this.origheight); this.dbox.scrollTop(this.origheight);
break; break;
default: default:
this.dbox.scrollTop(line - lines * 8); this.dbox.scrollTop(line - lines * 8);
break; break;
} }
}; };
this.requestsahlifile = function(url) { this.requestsahlifile = function (url) {
var ref = this; var ref = this;
$.getJSON(url, function(json) { $.getJSON(url, function (json) {
ref.filedata = json.filedata; ref.filedata = json.filedata;
ref.slides = json.slides; ref.slides = json.slides;
ref.location = json.location; ref.location = json.location;
@ -295,12 +301,12 @@ var Sahli = function () {
}; };
this.buildcompo = function() { this.buildcompo = function () {
this.resizedrawbox(); this.resizedrawbox();
alert("SAHLI READY TO GO"); alert("SAHLI READY TO GO");
}; };
this.nextpic = function() { this.nextpic = function () {
this.dbox.children().remove(); this.dbox.children().remove();
// reset scrolling; // reset scrolling;
this.stopscroll(); this.stopscroll();
@ -317,9 +323,9 @@ var Sahli = function () {
}; };
this.gofullscreen = function() { this.gofullscreen = function () {
var docElm = document.documentElement; var docElm = document.documentElement;
var toid = window.setTimeout(sahli.resizedrawbox, 100); window.setTimeout(this.resizedrawbox, 100);
if (docElm.requestFullscreen) { if (docElm.requestFullscreen) {
docElm.requestFullscreen(Element.ALLOW_KEYBOARD_INPUT); docElm.requestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (docElm.mozRequestFullScreen) { } else if (docElm.mozRequestFullScreen) {
@ -330,8 +336,8 @@ var Sahli = function () {
}; };
this.cancelfullscreen = function() { this.cancelfullscreen = function () {
var toid = window.setTimeout(sahli.resizedrawbox, 100, this.nonfsheight); window.setTimeout(this.resizedrawbox, 100, this.nonfsheight);
if (document.exitFullscreen) { if (document.exitFullscreen) {
document.exitFullscreen(); document.exitFullscreen();
} else if (document.mozCancelFullScreen) { } else if (document.mozCancelFullScreen) {
@ -341,7 +347,7 @@ var Sahli = function () {
} }
}; };
this.fixhelpbox = function() { this.fixhelpbox = function () {
var h = $('.help'); var h = $('.help');
// var xy = {'top': document.height/2 - h.height()/2, 'left': document.width/2 - h.width()/2}; // var xy = {'top': document.height/2 - h.height()/2, 'left': document.width/2 - h.width()/2};
var xy = { var xy = {
@ -351,14 +357,14 @@ var Sahli = function () {
h.css(xy); h.css(xy);
}; };
this.toggledebug = function() { this.toggledebug = function () {
$('h1#top').fadeToggle(); $('h1#top').fadeToggle();
this.DEBUG = (!this.DEBUG); this.DEBUG = (!this.DEBUG);
}; };
this.loadkeys = function() { this.loadkeys = function () {
var ref = this; var ref = this;
$(document).bind('click', function(ev) { $(document).bind('click', function (ev) {
if (ev.clientY < 100) { if (ev.clientY < 100) {
if (ev.clientX < 100) { if (ev.clientX < 100) {
ref.nextpic(); ref.nextpic();
@ -370,113 +376,113 @@ var Sahli = function () {
} }
}); });
$(document).bind('keydown', function(ev) { $(document).bind('keydown', function (ev) {
switch (ev.which) { switch (ev.which) {
case 84: // t case 84: // t
ref.asciiasgfx = (!ref.asciiasgfx); ref.asciiasgfx = (!ref.asciiasgfx);
ref.toptext(ref.asciiasgfx); ref.toptext(ref.asciiasgfx);
break; break;
case 85: // u case 85: // u
case 9: // u case 9: // u
$('div.infobox').slideToggle('slow'); $('div.infobox').slideToggle('slow');
break; break;
case 70: // f case 70: // f
ref.gofullscreen(); ref.gofullscreen();
break; break;
case 27: // esc case 27: // esc
case 71: // G, as escape seems to not get passed from fullscreen on chrome case 71: // G, as escape seems to not get passed from fullscreen on chrome
ref.cancelfullscreen(); ref.cancelfullscreen();
break; break;
case 73: // i case 73: // i
ref.resize(2); ref.resize(2);
break; break;
case 75: // k case 75: // k
ref.resize(0.5); ref.resize(0.5);
break; break;
case 79: // o case 79: // o
ref.fullwidth(); ref.fullwidth();
break; break;
case 76: // l case 76: // l
ref.fullheight(); ref.fullheight();
break; break;
case 80: // p case 80: // p
ref.originalsize(0); ref.originalsize(0);
break; break;
case 83: // s case 83: // s
ref.setscroll(); ref.setscroll();
break; break;
case 72: // h case 72: // h
case 191: // "?" (also / but no shift) case 191: // "?" (also / but no shift)
$('.help').fadeToggle('fast'); $('.help').fadeToggle('fast');
break; break;
case 107: // + case 107: // +
case 190: // . case 190: // .
ref.scroll_speed = ref.scroll_speed * 2; ref.scroll_speed = ref.scroll_speed * 2;
ref.toptext("speed doubled:" + ref.scroll_speed); ref.toptext("speed doubled:" + ref.scroll_speed);
break; break;
case 109: // - case 109: // -
case 188: // , case 188: // ,
ref.scroll_speed = ref.scroll_speed / 2; ref.scroll_speed = ref.scroll_speed / 2;
ref.toptext("speed halved:" + ref.scroll_speed); ref.toptext("speed halved:" + ref.scroll_speed);
break; break;
case 49: // 1 case 49: // 1
ref.scroll_speed = 1; ref.scroll_speed = 1;
break; break;
case 50: //2 case 50: //2
ref.scroll_speed = 2; ref.scroll_speed = 2;
break; break;
case 51: //3 case 51: //3
ref.scroll_speed = 3; ref.scroll_speed = 3;
break; break;
case 52: //4 case 52: //4
ref.scroll_speed = 4; ref.scroll_speed = 4;
break; break;
case 53: //5 case 53: //5
ref.scroll_speed = 5; ref.scroll_speed = 5;
break; break;
case 220: // "\" case 220: // "\"
ref.toptext(ref.scroll_speed); ref.toptext(ref.scroll_speed);
break; break;
case 8: // backspace case 8: // backspace
case 68: // D case 68: // D
ref.stopscroll(); ref.stopscroll();
break; break;
// move about keys // move about keys
case 33: // pgup case 33: // pgup
ref.moveabout(24); ref.moveabout(24);
break; break;
case 34: // pgdwn case 34: // pgdwn
ref.moveabout(-24); ref.moveabout(-24);
break; break;
case 36: // home case 36: // home
ref.moveabout(0); ref.moveabout(0);
break; break;
case 35: // end case 35: // end
ref.moveabout(Infinity); ref.moveabout(Infinity);
break; break;
case 40: // down case 40: // down
ref.moveabout(-1); ref.moveabout(-1);
break; break;
case 32: // space case 32: // space
ref.nextpic(); ref.nextpic();
break; break;
case 38: // up case 38: // up
ref.moveabout(1); ref.moveabout(1);
break; break;
case 19: // pause/break case 19: // pause/break
case 121: // F10 case 121: // F10
ref.toggledebug(); ref.toggledebug();
break; break;
// debug alerts for these keys are annoying (: // debug alerts for these keys are annoying (:
case 116: // f5 case 116: // f5
case 123: // f12 case 123: // f12
break; break;
default: default:
if (ref.DEBUG) { if (ref.DEBUG) {
alert(ev.which); alert(ev.which);
} }
break; break;
} }
}); });
}; };
@ -485,7 +491,7 @@ var Sahli = function () {
// this.loadpic('h7-r2012.ans',this.dbox); // this.loadpic('h7-r2012.ans',this.dbox);
this.fixhelpbox(); this.fixhelpbox();
var ref = this; var ref = this;
$(window).resize(function() { $(window).resize(function () {
ref.resizedrawbox(); ref.resizedrawbox();
}); });
this.requestsahlifile('list.sahli'); this.requestsahlifile('list.sahli');