Show HN: Building terminal dashboards using ASCII/ANSI art and JavaScript | Hacker News Reader

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

github.com

305 pointsyaronn0155 comments

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.

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

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.

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

Helicopter FTW

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

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.

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.

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

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.

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.

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.

> 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.

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.

Pull requests are more than welcome!

Also, for reference this is MIT liscensed

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.

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.

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.

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.

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.

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).

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

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?

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.

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.

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

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 ;)

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.

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

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

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

Great idea, I will add it to the list.

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

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?

Reminds me of modem days and BBSs. Sigh.

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

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

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 :).

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.

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.

I know what clojurescript is. What I don't understand is why you can't write an externs file.

There is more to it than an extern file if you want a well designed wrapper which is idiomatic.

Regardless, the smiley in my original post indicates I was just teasing. I think you need to calm yourself down.

this would cool to connect to newrelic type app analytics data

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

in the node-drawille dependency:

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

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

This is so cool

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

Cool! cannot wait to use it!

This is really cool!

This is so awesome.

This if fantastic!

This is kickass.

So cool~love it!

Reply on news.ycombinator.com