The CLI website (http://cli.rivas.ca/) is a project that I started during school, because i thought it would be amusing to create a unix-like shell that runs as a web based interface. The original idea was simply to embed certain functions into the JavaScript code running on the website client side. I began by making a shell that echos user input by writing it into a div from a standard HTML input. Then i realized that i could use AJAX to make calls back to the webserver to complete requests that were carried by the http POST method.

The server code

Once i had the ajax code set up to relay user inputs and server replies, i realized that what would be perfect for me is if i could run commands in a sub-shell on the server by calling them with exec. I set up a folder system that contained scripts that would produce responses to user requests that were forwarded by a PHP interfacing that parsed http post requests, executed the corresponding script and then replied with the output.

The live source code of the php interface can be found here:
http://cli.rivas.ca/switch.phps

Writing some programs

with the system in place i began writing programs that could be executed using shell commands. However one of the challenges that i quickly came up against was figuring out a way to write a program that would tell the user what commands are available. What i built in the end was a flat config file that listed allowed shell commands, like uptime and date. These programs are written to make a call directly to the system. The second system looked up files in a folder called "programs" which i made my official place to put programs that were intended to run as commands. Later i also made the system search for folders. the folder name was the command name, and main is the file that gets executed. This enabled me to make sophisticated programs with resource directories and libraries of their own, without confusing the command lookup functions.

Initially i wrote some programs to draw shapes in text, a triangle, a christmas tree, then some unit conversion tools, and a program to browse photos. A full listing can be found using the help command.

Jazzing up the UI

I wound up dissatisfied with an HTML input and wondered if it was possible to create a more seamless input. For the sake of amusement i rolled up my sleeves and wrote a pile of JavaScript code to convert the HTML input into a sophisticated action listener which is event driven and simply adds characters to an input string and writes those characters to the screen, allowing the input to never lose focus.

The problem with doing this is that strange things happen with different browsers, for example the backspace key will act as a back button if you do not have focus on an HTML input, this can be overridden with some JavaScript listeners but there are differing opinions of whether it's ethically sound to be intercepting the default functionality of a user's browser. In any case, the code seems to work, and the only problem remaining is the mobile phone browser that refuses to work with it.... heck even the Kindle browser works, go figure!

Downloading the codes

You can get the most recent version of the system using the ls command in the shell. Here's a direct link to the same location:
http://cli.rivas.ca/custom/programs/ls/share/

You may also view the source code from any part of the site simply by browsing those directories such as the custom programs directory:
http://cli.rivas.ca/custom/