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. Commented Apr 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. Commented Apr 22, 2014 at 7:39
  • is this what you want? compileonline.com/execute_bash_online.php Commented Apr 22, 2014 at 7:49
  • 1
    mattboldt.com/demos/typed-js Commented Apr 22, 2014 at 7:50
  • 1
    Did it a go just for fun: codepen.io/anon/pen/qsiDk Commented Apr 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
Sign up to request clarification or add additional context in comments.

2 Comments

Looks awesome! :-) Glad I could help a bit.
@Kos Yes, it's cool looking. Click "Show example" for a more advanced demo of what I ended up with sparkledb.net/SPARQL-Database-Server/Documentation/guide/…
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 Comment

Looks very promising, I did not think of searching for terminal recorders. I will try it out.
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

Comments