AnsiLove.js is a partial rewrite of ansilove in the Javascript programming language. Unlike the original projects, AnsiLove.js enables artscene related file formats to be displayed directly on a webpage on the client-side, and supports ANSi (.ANS), PCBOARD (.PCB), BiNARY (.BIN), ADF (.ADF), iDF (.IDF), TUNDRA (.TND) and XBiN (.XB) formats.
AnsiLove.js supports the majority of options found in the original set of tools.
AnsiLove.js has been tested on Safari, Firefox, and Chrome. Results may vary widely on Internet Explorer browsers.
AnsiLove.render("example.bin", function (canvas, sauce) {
document.body.appendChild(canvas);
console.log(sauce);
}, {"font": "80x25", "bits": "8", "icecolors": 0, "columns": 80, "thumbnail": 0});
For extremely large files, which may silently fail on some browsers when producing a single canvas element, the splitRender function will produce an array of canvas elements, which can then be stacked vertically in the browser to simulate a single, contiguous display. The value of 27 in the following example is the maximum amount of text-rows in used in each element.
When aligning these elements on a page there may be a small gap between each image. To correct this, simply apply the CSS style vertical-align: bottom, or apply it progmatically with a single line of Javascript.
AnsiLove.splitRender("long_ansi.ans", function (canvases, sauce) {
canvases.forEach(function (canvas) {
canvas.style.verticalAlign = "bottom"; // For perfect, gap-less viewing.
document.body.appendChild(canvas);
});
console.log(sauce);
}, 27, {"bits": "8"});
And for ANSImations, the animate function returns a controller object which when issued with the play() call, renders an ANSI at a pre-determined baud rate, and can be passed an additional function which is called upon completion.
var controller = AnsiLove.animate("ansimation.ans", function (canvas, sauce) {
document.getElementById("example").appendChild(canvas);
console.log(sauce);
controller.play(14400, function () {
console.log("Finished!");
});
}, {"bits": "9"});
If a function is passed after the options object of any method, then it will be called in the event that the file cannot be fetched, or if an error occured whilst attempting to interpret the file.
AnsiLove.render("example.ans", function (canvas, sauce) {
...
}, {}, function (message) {
alert("Error: " + message);
});
Used for .BIN files only. Skip this option when converting other formats. The default is set at 160.
A thumbnail image is rendered instead of a full-size image. Does not apply when playing ansimations.
Instead of guessing the filetype based on the name or extension of the url, the chosen rendering method can be chosen from this list by using the option "filetype": "<type>". Using this method, it is possible to display the raw data contained within a file by over-riding this property with "asc".
Delivers a canvas element which has double the width and height in pixels, but styled in half these amounts in CSS-pixels. This makes it suitable for display on devices with high pixel densities.
As well as a canvas element, a SAUCE record is returned as a Javascript object if one is found, and follows this format:
{
"version": "00",
"title": "Example ANSI",
"author": "Joe Q. Public",
"group": "Generic Ansi Group",
"date": "20130922",
"fileSize": 1337,
"dataType": 1,
"fileType": 1,
"tInfo1": 80,
"tInfo2": 26,
"tInfo3": 0,
"tInfo4": 0,
"comments": ["Comment 1.", "Comment 2.", ... ],
"flags": 0
}
It is also possible to retrieve a record for a file without generating an image by using the sauce function.
AnsiLove.sauce("example.ans", function (sauce) {
console.log(sauce);
});
AnsiLove.js is released under the BSD 2-Clause license. See LICENSE file
for details.
AnsiLove.js was written by Andrew Herbert and is now maintained by Frederic Cambus.
Project homepage: https://ansilove.github.io/ansilove.js