Show HN: Building terminal dashboards using ASCII/ANSI art and JavaScript

https://github.com/yaronn/blessed-contrib

by yaronn01 • 12 years ago

305 55 12 years ago

github.com

ely-s• 12 years ago

This is so cool

simlevesque• 12 years ago

I'm going to use it in my current project ! Great work

andrewchambers4• 12 years ago

So bringing some of the web designers into the terminal isn't such a bad thing after all, they have great taste.

I'm partially sad its written in nodejs, but I can't really think of what else it should have been written in.

I think clojurescript bindings would be awesome. The dashboard can be rendered from an immutable app state om style.

dnolen, I'm looking at you :).

juliangregorian2• 12 years ago

quality comment. shit on node for no reason and ask the author of another project to rewrite it for you.

node is actually really good at working with streams, which are a reasonable expectation for streaming logs e.g. to be in.

andrewchambers4• 12 years ago

I don't think you understand, clojurescript interfaces with javascript, it wouldn't be a rewrite. Nodejs has many debated problems, I can shit on it if I want. This project rocks though.

FleegmanGuy2• 12 years ago

It's not 100% clear unless you can read the code.

Where is the data coming from? Seems like a lot of animated data with limited data points specified.

hbz• 12 years ago

Seems to be randomly generated- https://github.com/yaronn/blessed-contrib/blob/master/exampl...

yaronn0112• 12 years ago

I'm the Author. Yes, data in this sample is random or hard coded.

FleegmanGuy2• 12 years ago

Great work! I would request a simple blink control, maybe for a DiskLED display.

Gyonka• 12 years ago

This is really cool! Seems like it would be easy to extend and link to simple projects, that way I can run this on my second monitor and feel like a real hacker ;)

warble• 12 years ago

This is pretty neat.

I think it's telling that after 50 years, and all the work on GUI's, this is still a good idea.

zokier• 12 years ago

I think it's telling that after 50 years, and all the work on GUI's, this is still a good idea.

While definitely neat, I'm not that sure that this is actually a good idea.

I agree that it is telling that this project exists and excites, but I'm not sure what about. Maybe about the poor state of remote GUIs. Generally I consider ncurses (and other non-line oriented terminal stuff) to be an ugly hack. For example a better solution might be if you could easily run an adhoc webapp on a server (or other remote host) and have it tunneled (over ssh) straight to your local browser without needing to manually fidget with tunneling and ports and urls and whatnot. But that would require some scaffolding to make it happen and I don't really see the community moving to that direction.

yaronn0112• 12 years ago

Hi everyone, I am the author. Let me know if you have any questions or ideas.

edpichler• 12 years ago

How much time you spent to do this project. And for what reason you did it? To solve some personal problem?

I really enjoyed it, mostly the world map. Once I was thinking in something similar, I was thinking in create a terminal software to monitor my small portfolio of stocks, and tell me about opportunities on the market. The reason to be on terminal was because I was looking for a more discreet interface running locally.

yaronn0112• 12 years ago

It took me a few weeks, one of them was fully on this project. Most of the time was spent on investigating and improving the different canvas implementations (map and charts work on an html5 canvas abstraction). A lot of the time was spent on false directions but this is expected. One particular direction was reusing Web js libs to do the charting logic but it turned that it is easy enough to implement on my own.

In my day job I author web dashboards (working in HP on performance testing tools) so I thought it would be cool to have those dashboards directly in the terminal. But I would have done it even without this incentive. I do a lot of projects just because they inspire me, check out GifW00t! https://github.com/yaronn/GifW00t

hip911• 12 years ago

On the line chart examples , the scales do not seem like able to change,otherwise great project.

yaronn0112• 12 years ago

what do you mean? You are right that in this sample I have not changed the values of the X axis but the api allows you to change its values anytime.

lightstalker• 12 years ago

Awesome project. I will definitely be using this!

The provided example is a great illustration of how to build various layouts and use the various widgets. I find it lacks any examples of real-world data gathering. For us Node newbies, how would one, for example, graph system load of a remote server over time? I think examples like that would help get some people going.

yaronn0112• 12 years ago

I plan to add more samples. Meanwhile you can use a module like this to get the data for you: https://github.com/kgryte/node-metrics-os

auvi• 12 years ago

this would cool to connect to newrelic type app analytics data

tlrobinson• 12 years ago

Neat. One cool thing about this is you could wire up a SSH server to show this when you login. "ssh stats.mycompany.com".

Or you could wire it up to a browser-based terminal emulator like tty.js.

dmamills• 12 years ago

This is really cool!

clebio• 12 years ago

Along with using Tmux as your login shell [1], this would be a nice equivalent to something like Conky [2].

Or, replacing `top` with sparklines, say.

[1] https://bbs.archlinux.org/viewtopic.php?pid=935588#p935588 [2]: http://conky.sourceforge.net/screenshots.html

yellowapple• 12 years ago

How difficult would it be to split the widgets off into their own independent/standalone terminal applications? I like the idea, but I'd rather lay things out myself with tmux (thus incorporating it into my existing workflow) rather than using the included layout system.

Sorry if this seems like a dumb question; I'm not particularly familiar with Node.js, let alone this particular codebase, so the answer isn't particularly obvious to me.

andrewchambers4• 12 years ago

This is a library, those are examples, not complete applications. You can make any application you want with any layout you want using these tools.

yaronn0112• 12 years ago

It's easy to do. The grid layout is optional. You can give relative and absolute positions. The first code sample in the readme shows something like this (though position is implicit there). You can also read about blessed (=ncurses for node) which this project is implemented as an extention of.

arcatek• 12 years ago

As a side note, there is also OhUI (https://github.com/arcanis/ohui, i'm the author) which has the same goal than blessed, but a different api (dom-based) and codebase.

Blessed is great, but I had some performance issues with really fast updates, so I made OhUI, which tries to minimize as much as possible the repaint zones. I think it is pretty efficient at this regard.

mdcox• 12 years ago

This is really nice! Just built something quick with it and I find it way easier to work with than something like ncurses, though that might just be because I work with javascript alot. Sorta feels like a terminal based d3 in a way, though not as atomic. Not a huge fan of Node for terminal applications (I'd sooner use Go or Ruby), but this alone might make me use it for things people other than me will use.

Do you plan on accepting pull requests? I'd love to contribute to something like this.

yaronn0112• 12 years ago

Pull requests are more than welcome!

bostonvaulter2• 12 years ago

Also, for reference this is MIT liscensed

tmandry• 12 years ago

At first I thought this was just an awful idea, but after hearing what you're using it for I want to use it myself :P

Did you look into the possibility of "adapting" something like d3 to draw on the terminal? Or does it just lack the abstractions necessary to do that cleanly?

yaronn0112• 12 years ago

Initially I used chart.js to paint the charts but I had to introduce it so many flags (no label Transformation, sensitive spacing etc) that I reverted to do it myself (even though I also have a working version with an altered chart.js).

I am using node-drawville which provides an Html5 canvas Api abstraction over the terminal. D3 uses svg so it is not adequate. However I did saw a port of d3 to canvas which I didn't had time to check.

boydc• 12 years ago

So cool~love it!

jszymborski• 12 years ago

ahahah this is great... the map looks like it's something out of War Games

Natsu• 12 years ago

Looks fun. It almost seems like it might be adaptable enough to make things like an X-Com clone, as well.

morenoh149• 12 years ago

reminds me ALOT of https://www.npmjs.com/package/vtop you guys should join forces

SwellJoe• 12 years ago

That's both adorable and oddly soothing to watch. Moreso than "nice" graphics, actually. It may be that I'm old enough to remember when text terminals were the way we interfaced with the world on bulletin boards...and animated ASCII art like this was common. I want to set it up just to watch it, not because I need it (we have web-based charts already, and I'm in the midst of making them realtime).

willempienaar• 12 years ago

This is so awesome.

cgb_• 12 years ago

Wow this is the coolest thing I've seen in the terminal since I discovered a sparkline bash script. I've embarrassingly used gnuplot's ascii output to realtime chart Cisco network interfaces in a shell I'm writing, this looks 1000x better than gnuplot's output. Thanks for sharing.

sgt• 12 years ago

It would get really interesting if this combined with the new inline image support present in iTerm2 (only nightly builds for now).

Basically you can do something like :

  ESC ] 1337 ; File = [optional arguments] : base-64 encoded file contents ^G

And then display an image inline along with other text. E.g. that ascii rendering of the world could be replaced by an actual image of the world.

yaronn0112• 12 years ago

I considered something like this but it felt like cheating. The beauty of standard ascii/ansi is that it is available in any terminal without any installation and it also has the same aesthetics / resolution as the text you type. Of course I will watch after iTerm2 progress.

psp• 12 years ago

Reminds me of modem days and BBSs. Sigh.

xofer• 12 years ago

Funny, it reminds me of an idea I had to monitor hundreds of servers with a $35 Raspberry Pi...

passfree• 12 years ago

This is kickass.

wincus• 12 years ago

Cool! cannot wait to use it!

leovander• 12 years ago

Why choose 'gauge' over the widely used 'progress bar'? Keep up the good work, it looks sleek.

yaronn0112• 12 years ago

I was asking myself the same yesterday... I think I have memories from an old platform I used a few years ago that had a "gauge". Maybe Delphi?

touristtam• 12 years ago

Where does it call that Braille font you are talking about?

yaronn0112• 12 years ago

in the node-drawille dependency:

https://github.com/madbence/node-drawille

bradleyjohnson• 12 years ago

This is great. I want to find a reason to use this. I have been doing some retro looking visualizations on an oscilloscope lately. I need to learn more about programming vectors to sound frequencies.

jpetersonmn• 12 years ago

This if fantastic!

Show HN: Building terminal dashboards using ASCII/ANSI art and JavaScript

Related Stories