8 ms·

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

305 points by yaronn01 12y ago

jpetersonmn 12y ago
This if fantastic!
ely-s 12y ago
This is so cool
simlevesque 12y ago
I'm going to use it in my current project ! Great work
andrewchambers 12y 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 :).
- juliangregorian 12y 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.
  - andrewchambers 12y 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.
    - juliangregorian 12y ago
      I know what clojurescript is. What I don't understand is why you can't write an externs file.
      - andrewchambers 12y ago
        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.
FleegmanGuy 12y 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 12y ago
  Seems to be randomly generated- https://github.com/yaronn/blessed-contrib/blob/master/examples/dashboard.js#L92-L101 https://github.com/yaronn/blessed-contrib/blob/master/exampl...
- yaronn01 12y ago
  I'm the Author. Yes, data in this sample is random or hard coded.
  - FleegmanGuy 12y ago
    Great work! I would request a simple blink control, maybe for a DiskLED display.
    - yaronn01 12y ago
      Great idea, I will add it to the list.
Gyonka 12y 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 12y 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 12y 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.
yaronn01 12y ago
Hi everyone, I am the author. Let me know if you have any questions or ideas.
- edpichler 12y 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.
  - yaronn01 12y 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 https://github.com/yaronn/GifW00t
    - hnriot 12y ago
      Helicopter FTW
- hip911 12y ago
  On the line chart examples , the scales do not seem like able to change,otherwise great project.
  - yaronn01 12y ago
auvi 12y ago
this would cool to connect to newrelic type app analytics data
tlrobinson 12y 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 12y ago
This is really cool!
clebio 12y 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 https://bbs.archlinux.org/viewtopic.php?pid=935588#p935588 [2]: http://conky.sourceforge.net/screenshots.html http://conky.sourceforge.net/screenshots.html
yellowapple 12y 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.
- andrewchambers 12y 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.
- yaronn01 12y 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 12y ago
    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.
mdcox 12y 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.
- yaronn01 12y ago
  Pull requests are more than welcome!
  - bostonvaulter2 12y ago
    Also, for reference this is MIT liscensed
tmandry 12y 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?
- yaronn01 12y 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 12y ago
So cool~love it!
jszymborski 12y ago
ahahah this is great... the map looks like it's something out of War Games
Natsu 12y ago
Looks fun. It almost seems like it might be adaptable enough to make things like an X-Com clone, as well.
morenoh149 12y ago
reminds me ALOT of https://www.npmjs.com/package/vtop https://www.npmjs.com/package/vtop you guys should join forces
SwellJoe 12y 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 12y ago
This is so awesome.
cgb_ 12y 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 12y 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.
- yaronn01 12y 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 12y ago
Reminds me of modem days and BBSs. Sigh.
- xofer 12y ago
  Funny, it reminds me of an idea I had to monitor hundreds of servers with a $35 Raspberry Pi...
passfree 12y ago
This is kickass.
wincus 12y ago
Cool! cannot wait to use it!
leovander 12y ago
Why choose 'gauge' over the widely used 'progress bar'? Keep up the good work, it looks sleek.
- yaronn01 12y 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 12y ago
Where does it call that Braille font you are talking about?
- yaronn01 12y ago
  in the node-drawille dependency: https://github.com/madbence/node-drawille https://github.com/madbence/node-drawille
bradleyjohnson 12y 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.

305 points by yaronn01 12y ago

jpetersonmn 12y ago

This if fantastic!

ely-s 12y ago

This is so cool

simlevesque 12y ago

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

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

juliangregorian 12y 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.
- andrewchambers 12y 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.
  - juliangregorian 12y ago
    I know what clojurescript is. What I don't understand is why you can't write an externs file.
    - andrewchambers 12y ago
      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.

FleegmanGuy 12y 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 12y ago
Seems to be randomly generated- https://github.com/yaronn/blessed-contrib/blob/master/examples/dashboard.js#L92-L101 https://github.com/yaronn/blessed-contrib/blob/master/exampl...
yaronn01 12y ago
I'm the Author. Yes, data in this sample is random or hard coded.
- FleegmanGuy 12y ago
  Great work! I would request a simple blink control, maybe for a DiskLED display.
  - yaronn01 12y ago
    Great idea, I will add it to the list.

Gyonka 12y 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 12y 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 12y 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.

yaronn01 12y ago

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

edpichler 12y 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.
- yaronn01 12y 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 https://github.com/yaronn/GifW00t
  - hnriot 12y ago
    Helicopter FTW
hip911 12y ago
On the line chart examples , the scales do not seem like able to change,otherwise great project.
- yaronn01 12y ago

auvi 12y ago

this would cool to connect to newrelic type app analytics data

tlrobinson 12y 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 12y ago

This is really cool!

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

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

andrewchambers 12y 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.
yaronn01 12y 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 12y ago
  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.

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

yaronn01 12y ago
Pull requests are more than welcome!
- bostonvaulter2 12y ago
  Also, for reference this is MIT liscensed

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

yaronn01 12y 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 12y ago

So cool~love it!

jszymborski 12y ago

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

Natsu 12y ago

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

morenoh149 12y ago

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

SwellJoe 12y 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 12y ago

This is so awesome.

cgb_ 12y 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 12y 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.

yaronn01 12y 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 12y ago

Reminds me of modem days and BBSs. Sigh.

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

passfree 12y ago

This is kickass.

wincus 12y ago

Cool! cannot wait to use it!

leovander 12y ago

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

yaronn01 12y 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 12y ago

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

yaronn01 12y ago
in the node-drawille dependency: https://github.com/madbence/node-drawille https://github.com/madbence/node-drawille

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