Writing

Feed Software, technology, sysadmin war stories, and more.

Saturday, February 16, 2013

Watch me install things right in your browser

I got a pretty strange idea in my head a couple of weeks ago. It basically amounted to creating a VT100 emulator which would work inside a web browser. I wanted to use it as a way to demonstrate different techniques by playing back recorded sessions. It seemed like the right way to convey data which is fundamentally text. I wanted to avoid anything like grabbing video of my screen and then streaming it out since the required bandwidth would have been ridiculous.

This started me down the road to wondering exactly what it would take to have a little box where I could address individual characters. I wound up creating some really nasty Javascript which had an array of strings as its "framebuffer". When you told it to change something, it would rebuild the string and would then flush it to one of 25 divs on the screen. Those divs had been arranged in a stack to collectively resemble a terminal.

Did you know that Javascript strings are immutable? You can't just say foo[12] = 'x'. Oh no. You have to rebuild it on the fly. I found this one out the hard way.

After poking at this for a while, I had a silly little thing which would let me write arbitrary characters to arbitrary positions. It was a screen but it was far from being a terminal. That started me down the road of actually trying to parse VT100 sequences. That opened a whole nasty box of evil things, not the least of which is trying to find all of the sequences which can be used. Then I had to make a bunch of decisions about which ones actually mattered.

Ultimately, I managed to get enough sequences handled to where I could feed it the output from 'script' and it would do a decent job of rendering. It was still far from complete, and actually getting there would have taken a lot of work. Fortunately, around this time, I stumbled across a site which did this sort of thing using a terminal derived from JSLinux.

While that site had its own idea of how to make the data flow back and forth with elements I didn't want to use, I managed to extract just the terminal for my own purposes. I used it to replace my own horrible little emulator and hooked in this new code to my replay system. The result is something that's pretty fun to watch.

As a simple demo, I recorded myself fetching my C++ build tool, installing it, and then writing a quick bit of code to show how it works.

Want to see it? Okay, here it is.

So, did you spot the mistake I made before the compiler complained about it? I didn't do that on purpose.

[2023 update: that specific recording is no longer online, but you can still visit the virtual terminal and see what it looks like, including what using that build tool looked like at the time.]