| 1 | # hypernal
|
| 2 |
|
| 3 | Renders terminal output as html to simplify reusing server side modules in the browser.
|
| 4 |
|
| 5 | ## Example
|
| 6 |
|
| 7 | **main.js**
|
| 8 | ```js
|
| 9 | var term = require('hypernal')(100, 80);
|
| 10 | term.appendTo('#terminal');
|
| 11 |
|
| 12 | var difflet = require('difflet')({
|
| 13 | indent : 2
|
| 14 | , comma : 'first'
|
| 15 | , comment: true
|
| 16 | });
|
| 17 |
|
| 18 | var diff = difflet.compare({ a : [1, 2, 3 ], c : 5 }, { a : [1, 2, 3, 4 ], b : 4 });
|
| 19 | term.write(diff);
|
| 20 | ```
|
| 21 |
|
| 22 | **browserify-build.js**
|
| 23 | ```js
|
| 24 | require('browserify')()
|
| 25 | .require(require.resolve('./main.js'), { entry: true })
|
| 26 | .bundle()
|
| 27 | .pipe(require('fs').createWriteStream(__dirname + '/bundle.js'), 'utf-8');
|
| 28 | ```
|
| 29 |
|
| 30 | **index.html**
|
| 31 | ```html
|
| 32 | <body>
|
| 33 | <div id="terminal"></div>
|
| 34 | <script type="text/javascript" src="./bundle.js"></script>
|
| 35 | </body>
|
| 36 | ```
|
| 37 |
|
| 38 | **index.css**
|
| 39 | ```css
|
| 40 | #terminal {
|
| 41 | width : 600px;
|
| 42 | height : 400px;
|
| 43 | background : black;
|
| 44 | padding : 15px 20px 15px 20px;
|
| 45 | border-radius : 15px;
|
| 46 | border : 2px solid #CEE1F0;
|
| 47 | font-family : Monaco;
|
| 48 | font-size : 16px;
|
| 49 | }
|
| 50 | ```
|
| 51 |
|
| 52 | 
|
| 53 |
|
| 54 | View [more complete example](http://thlorenz.github.com/hypernal/) and its [source](https://github.com/thlorenz/hypernal/tree/master/example)
|
| 55 |
|
| 56 | ## Installation
|
| 57 |
|
| 58 | npm install hypernal
|
| 59 |
|
| 60 | ## Demo
|
| 61 |
|
| 62 | npm explore hypernal && npm run demo
|
| 63 |
|
| 64 | ## API
|
| 65 |
|
| 66 | ***hypernal(rows:Number, cols:Number, options:Object)***
|
| 67 |
|
| 68 | creates a **render only** terminal with the given rows and columns and returns an interface to interact with it as described below.
|
| 69 |
|
| 70 | **options**:
|
| 71 | - `tabspace:String` spaces with which to replace encountered `'\t'` characters, default is `' '`
|
| 72 |
|
| 73 | ***term.appendTo(elem:String|Object)***
|
| 74 |
|
| 75 | appends the terminal to the given DOM element.
|
| 76 |
|
| 77 | ***term.write(s:String)***
|
| 78 |
|
| 79 | writes the given string to the terminal.
|
| 80 |
|
| 81 | ***term.writeln(s:String)***
|
| 82 |
|
| 83 | writes the given string to the terminal and adds a line break.
|
| 84 |
|
| 85 | ***term.reset()***
|
| 86 |
|
| 87 | clears the terminal
|
| 88 |
|
| 89 | ## Kudos
|
| 90 |
|
| 91 | hypernal is basically a trimmed down version of [tty.js](https://github.com/chjj/tty.js/) focused on rendering only.
|