Configurable Virtual Terminal Emulator With jQuery - jAnsiVT

jAnsiVT is a jQuery plugin that makes it easy to create a fully configurable virtual terminal window Ansi/Ascii support in your web application. The plugin is licensed under the GNU Affero General Public License version 3.

How to use it:

1. Add jQuery library and the jQuery jAnsiVT plugin's files to the webpage.

<script src="jquery.min.js"></script>
<script src="jansivt.js"></script>
<link href="jansivt.css" rel="stylesheet"></link>

2. Create a container for the virtual terminal.

<div id="terminal">Loading terminal...</div>

3. Initialize the plugin with default options as follow:

var terminal = $('#terminal').jAnsiVT({
    // options here
});

4. Display a basic message in the virtual terminal.

terminal.write("Hello World");

5. Plugin's default configuration options.

var terminal = $('#terminal').jAnsiVT({

    // number of Terminal columns
    cols: 80,

    // number of Terminal rows
    rows: 25,

    // number of lines that will be saved on scroll buffer
    scrollSize: 100,

    // font size
    fontSize: 16,

    // array of 16 elements containing hex color codes.
    vtColors: [],

    // predefined color scheme
    colorScheme: 'gnomeTango',

    // title of Teminal
    title: "jAnsiVT",

    // intercept keyboard events and write them into terminal
    getKeyboard: false,

    // ignore font-weight: bold
    ignoreBold: false,

    // avoid scrollbar from hiding last colum
    changeWidthOnScroll: false,

    // callbacks
    onChangeTitle: function(title){},
    onKeyboardInput: function(k){},
    
});

5. Predefined color schemes.

greyOnBlack : [
  //0: black (normal)
  '#000000',
  //1: red (normal)
  '#aa0000',
  //2: green (normal)
  '#00aa00',
  //3: yellow (normal)
  '#aa5500',
  //4: blue (normal)
  '#0000aa',
  //5: magenta (normal)
  '#aa00aa',
  //6: cyan (normal)
  '#00aaaa',
  //7: white (normal)
  '#aaaaaa',
  //8: black (bold)
  '#000000',
  //9: red (bold)
  '#ff5555',
  //10: green (bold)
  '#55ff55',
  //11: yellow (bold)
  '#ffff55',
  //12: blue (bold)
  '#5555ff',
  //13: magenta (bold)
  '#ff55ff',
  //14: cyan (bold)
  '#55ffff',
  //15: white (bold)
  '#ffffff'
],
whiteOnBlack : [
  '#000000',
  '#aa0000',
  '#00aa00',
  '#aa5500',
  '#0000aa',
  '#aa00aa',
  '#00aaaa',
  '#ffffff',
  '#000000',
  '#ff5555',
  '#55ff55',
  '#ffff55',
  '#5555ff',
  '#ff55ff',
  '#55ffff',
  '#ffffff'
],
blackOnWhite: [
  '#ffffff',
  '#aa0000',
  '#00aa00',
  '#aa5500',
  '#0000aa',
  '#aa00aa',
  '#00aaaa',
  '#000000',
  '#ffffff',
  '#ff5555',
  '#55ff55',
  '#ffff55',
  '#5555ff',
  '#ff55ff',
  '#55ffff',
  '#000000'
],
blackOnLightYellow: [
  '#ffffdd',
  '#aa0000',
  '#00aa00',
  '#aa5500',
  '#0000aa',
  '#aa00aa',
  '#00aaaa',
  '#000000',
  '#ffffdd',
  '#ff5555',
  '#55ff55',
  '#ffff55',
  '#5555ff',
  '#ff55ff',
  '#55ffff',
  '#000000'
],
blackOnGrey: [
  '#aaaaaa',
  '#aa0000',
  '#00aa00',
  '#aa5500',
  '#0000aa',
  '#aa00aa',
  '#00aaaa',
  '#000000',
  '#aaaaaa',
  '#ff5555',
  '#55ff55',
  '#ffff55',
  '#5555ff',
  '#ff55ff',
  '#55ffff',
  '#000000'
],
blackAndWhite: [
  '#ffffff',
  '#000000',
  '#000000',
  '#000000',
  '#000000',
  '#000000',
  '#000000',
  '#000000',
  '#ffffff',
  '#000000',
  '#000000',
  '#000000',
  '#000000',
  '#000000',
  '#000000',
  '#000000'
],
whiteAndBlack: [
  '#000000',
  '#ffffff',
  '#ffffff',
  '#ffffff',
  '#ffffff',
  '#ffffff',
  '#ffffff',
  '#ffffff',
  '#000000',
  '#ffffff',
  '#ffffff',
  '#ffffff',
  '#ffffff',
  '#ffffff',
  '#ffffff',
  '#ffffff'
],
greyAndBlack: [
  '#000000',
  '#aaaaaa',
  '#aaaaaa',
  '#aaaaaa',
  '#aaaaaa',
  '#aaaaaa',
  '#aaaaaa',
  '#aaaaaa',
  '#000000',
  '#aaaaaa',
  '#aaaaaa',
  '#aaaaaa',
  '#aaaaaa',
  '#aaaaaa',
  '#aaaaaa',
  '#aaaaaa'
],
greenAndBlack: [
  '#000000',
  '#33ff66',
  '#33ff66',
  '#33ff66',
  '#33ff66',
  '#33ff66',
  '#33ff66',
  '#33ff66',
  '#000000',
  '#33ff66',
  '#33ff66',
  '#33ff66',
  '#33ff66',
  '#33ff66',
  '#33ff66',
  '#33ff66'
],
vt100: [
  '#000000',
  '#00ff00',
  '#00ff00',
  '#00ff00',
  '#00ff00',
  '#00ff00',
  '#00ff00',
  '#00ff00',
  '#000000',
  '#00ff00',
  '#00ff00',
  '#00ff00',
  '#00ff00',
  '#00ff00',
  '#00ff00',
  '#00ff00'
],
/* Tango palette */
gnomeTango: [
  '#000000',
  '#cc0000',
  '#4e9a06',
  '#c4a000',
  '#3465a4',
  '#75507b',
  '#06989a',
  '#d3d7cf',
  '#555753',
  '#ef2929',
  '#8ae234',
  '#fce94f',
  '#729fcf',
  '#ad7fa8',
  '#34e2e2',
  '#eeeeec'
],
/* Linux palette */
gnomeLinux: [
  '#000000',
  '#aa0000',
  '#00aa00',
  '#aa5500',
  '#0000aa',
  '#aa00aa',
  '#00aaaa',
  '#aaaaaa',
  '#555555',
  '#ff5555',
  '#55ff55',
  '#ffff55',
  '#5555ff',
  '#ff55ff',
  '#55ffff',
  '#ffffff'
],
/* XTerm palette */
gnomeXTerm: [
  '#000000',
  '#cd0000',
  '#00cd00',
  '#cdcd00',
  '#0000ee',
  '#cd00cd',
  '#00cdcd',
  '#e5e5e5',
  '#7f7f7f',
  '#ff0000',
  '#00ff00',
  '#ffff00',
  '#5c5cff',
  '#ff00ff',
  '#00ffff',
  '#ffffff'
],
/* RXVT palette */
gnomeRXVT: [
  '#000000',
  '#cd0000',
  '#00cd00',
  '#cdcd00',
  '#0000cd',
  '#cd00cd',
  '#00cdcd',
  '#faebd7',
  '#404040',
  '#ff0000',
  '#00ff00',
  '#ffff00',
  '#0000ff',
  '#ff00ff',
  '#00ffff',
  '#ffffff'
],
/* Solarized palette (1.0.0beta2): http://ethanschoonover.com/solarized */
gnomeSolarized: [
  '#073642',
  '#dc322f',
  '#859900',
  '#b58900',
  '#268bd2',
  '#d33682',
  '#2aa198',
  '#eee8d5',
  '#002b36',
  '#cb4b16',
  '#586e75',
  '#657b83',
  '#839496',
  '#6c71c4',
  '#93a1a1',
  '#fdf6e3'
],

6. Public methods.

// Writes a message
terminal.write("Hello World");

// resizes teminal
terminal.resize(width,height);

// changes font size
terminal.changeFontSize(size);

// updates display
terminal.updateDisplay();

// Returns settings object.
terminal.getSettings();

// Returns terminal display as a jQuery object.
terminal.getDisplay();

// Returns terminal scroll as a jQuery object.
terminal.getScroll();

---

This awesome jQuery plugin is developed by R3nPi2. For more Advanced Usages, please check the demo page or visit the official website.