
Show HN: Building terminal dashboards using ASCII/ANSI art and JavaScript - yaronn01
https://github.com/yaronn/blessed-contrib
======
cgb_
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.

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

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

~~~
yaronn01
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](https://github.com/yaronn/GifW00t)

~~~
hnriot
Helicopter FTW

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

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

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

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

~~~
yaronn01
Pull requests are more than welcome!

~~~
bostonvaulter2
Also, for reference this is MIT liscensed

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

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

~~~
yaronn01
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
As a side note, there is also OhUI
([https://github.com/arcanis/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.

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

------
clebio
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](https://bbs.archlinux.org/viewtopic.php?pid=935588#p935588)
[2]:
[http://conky.sourceforge.net/screenshots.html](http://conky.sourceforge.net/screenshots.html)

------
tmandry
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?

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

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

------
morenoh149
reminds me ALOT of
[https://www.npmjs.com/package/vtop](https://www.npmjs.com/package/vtop) you
guys should join forces

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

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

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

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

~~~
yaronn01
Great idea, I will add it to the list.

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

~~~
yaronn01
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?

------
psp
Reminds me of modem days and BBSs. Sigh.

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

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

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

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

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

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

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

------
auvi
this would cool to connect to newrelic type app analytics data

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

~~~
yaronn01
in the node-drawille dependency:

[https://github.com/madbence/node-drawille](https://github.com/madbence/node-
drawille)

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

------
ely-s
This is so cool

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

------
wincus
Cool! cannot wait to use it!

------
dmamills
This is really cool!

------
willempienaar
This is so awesome.

------
jpetersonmn
This if fantastic!

------
passfree
This is kickass.

------
boydc
So cool~love it!

