8

Is there a way to simulate a Bash shell in the browser with just Javascript/JQuery? I would like to have a demo on our web site where it simulates someone using our new database system from a Bash shell. Preferrably it would look like someone was typing in the shell commands and the output would be listed line-by-line like a typical Bash shell would do. I've been GOOGLING without finding anything, so how should I implement it - with what JQuery plug-in to make my work easier.

Improve this question
11
  • So it should not be interactive? Then why not use an animated gif? Or a styled div with some setTimeout attaching lines of text.
    – Daniel W.
    CommentedApr 22, 2014 at 7:35
  • @DanFromGermany I was hoping to make the DB examples easier to maintain without having to remake a animated gif every time we change something in an example. I would also like the page to be fast to load from cellphones- Videos are also an option, but there you have the maintanence issue too. Since everything is just text I was hoping that I could make some JS script that showed the DB usage example, and that the example text would be in a HTML textarea when JS is disabled - this would also make it searchable by search engines.
    – user152949
    CommentedApr 22, 2014 at 7:39
  • is this what you want? compileonline.com/execute_bash_online.php
    – Luca Davanzo
    CommentedApr 22, 2014 at 7:49
  • 1
    mattboldt.com/demos/typed-js
    – pawel
    CommentedApr 22, 2014 at 7:50
  • 1
    Did it a go just for fun: codepen.io/anon/pen/qsiDk
    – Kos
    CommentedApr 22, 2014 at 8:27

3 Answers 3

Reset to default
3

I made a solution based on the example made by Kos, you can see the fully working demo here.

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/q.js/1.0.0/q.js"></script> <div id="wnd"></div> <div id="log"></div> <textarea rows="11" cols="50"> % cat example.c #include <stdio.h> int main() { printf("Goodbye Cruel World!\n"); return 0; } % make example.c -o example % ./example Goodbye Cruel World! </textarea>

CSS

body { background: black; } #wnd { background: #232; border-radius: .2em; white-space: pre-wrap; padding: .5em; font-family: "Consolas", "Ubuntu Mono", "Monaco", monospace; color: white; } .prompt { color: #99aaee; } .cmd { color: #9e9e9C; }

JQuery

var prompt; function setPrompt(usr, domain) { prompt = usr + '@' + domain + ' %'; } function addOutput(s) { $('<div>').text(s).appendTo(wnd); return Q.delay(100); // return addPrompt(); } function addInput(s) { var l = $('.prompt:last'); var e = $('<span>').addClass('cmd').appendTo(l); return addLettersRecursive(e, s); } function addPrompt() { var l = $('<div>').text(prompt).addClass('prompt').appendTo(wnd); return Q.delay(900); } function addLettersRecursive(container, s) { container.append(s.charAt(0)); // dangerous :( var row_complete = Q.defer(); Q.delay(100).then(function() { if (s.length <= 1) { row_complete.resolve(); } addLettersRecursive(container, s.substr(1)).then(function() { row_complete.resolve(); }) }); return row_complete.promise; } $( document ).ready(function() { $('textarea').hide(); setPrompt('inge', 'sparkledb.net'); var lines = $('textarea').val().split('\n'); var promise = new Q(); promise = promise.then(function() { lines.forEach( function(item) { if (item[0] == '%') { promise = promise.then(function() { return addPrompt(); }) promise = promise.then(function() { return addInput(item.substr(1)); }) } else { promise = promise.then(function() { return addOutput(item); }) } }) }) promise.done(); });
Improve this answer
2
2

Take a look at Asciinema:

Asciinema is a free and open source solution for recording the terminal sessions and sharing them on the web.

Improve this answer
1
  • Looks very promising, I did not think of searching for terminal recorders. I will try it out.
    – user152949
    CommentedApr 22, 2014 at 8:07
1

If it's just for presentation purposes then it's not so difficult to code from scratch. Set up your page so it looks like a command line interface

HTML:

<div id='window'></div> <div id='command-line'> [user@computer folder]$ <input type='text' id='command-input/>' </div>

CSS:

body{ background-color:black; color:green; } #window{ position:absolute; top:0; left:0; width:100%: height:95%; } #command-line{ position:absolute; top:95%; left:0; width:100%; height:5%; }

And then implement fake actions in JavaScript/jQuery which would start when the client loads the page. For example

function appendOutput(message){ var window = $('#window'); window.append("<div>"+message+"</div>"); }

which would seem like a response from a server, or for example

function typeMessage(message){ var input = $('#command-input'); for(var i=0; i<message.length; i++){ setTimeout(function(){ var formerValue = input.val(); input.val(formerValue + message[i]); }); } }

to type out the command, etc.. I'm sure you can play around with this to make it look better, also the functions aren't tested - it's just to help you get an idea of a possible solution. Hope it helps!

Improve this answer