Using htop to generate a live website background • Hacker News Board

Re: Using htop to generate a live website background

#11

Post by ck2 » Sat, Oct 03, 2015, 10:44 AM UTC

Well it's ansi text, so why not just copy the text directly to a DIV, convert the ansi to html (or css) and update it via javascript polling ?

Re: Using htop to generate a live website background

#12

Post by [deleted] » Sat, Oct 03, 2015, 10:45 AM UTC

pixelbeat wrote: post #5

Neat thanks! You can generate HTML (and from that png or whatever) with http://www.pixelbeat.org/scripts/ansi2html.sh like $ COLUMNS=80 timeout 1 htop > t.ansi $ ansi2html.sh --bg=dark t.html I've requested a -b, --batch option for htop, to simplify this mode of operation. https://github.com/hishamhm/htop/issues/282 Then you could just: $ COLUMNS=80 htop -b | ansi2html.sh ...

[deleted]

Re: Using htop to generate a live website background

#13

Post by trampi » Sat, Oct 03, 2015, 11:08 AM UTC

paradite wrote: post #8

Would be more interesting if the background is live, like updating itself every second or half a second.

will be live in some minutes

Re: Using htop to generate a live website background

#14

Post by trampi » Sat, Oct 03, 2015, 11:10 AM UTC

ck2 wrote: post #11

Well it's ansi text, so why not just copy the text directly to a DIV, convert the ansi to html (or css) and update it via javascript polling ?

You would have to parse the VT-100 escape codes to generate the correct html + css (e.g. colors and cursor relocation escape sequences). It is not that straight forward, but on the other hand there are libraries for that.

Re: Using htop to generate a live website background

#15

Post by slashink » Sat, Oct 03, 2015, 11:16 AM UTC

You can make it more efficient by capturing the images to a buffer and rendering a low FPS h264 stream, serving it as HLS fragments and displaying it with hls.js ( https://github.com/dailymotion/hls.js ) as a background element. There is a lot of inter frame compression benefits to be had from this sort of content + it will look more nice with a constant stream of frames. With a low FPS, the CPU usage should be low enough to not be noticeable and also, you can serve a static JPEG as a "preview" when loading the stream in the background for having a background picture on load.

Re: Using htop to generate a live website background

#16

Post by trampi » Sat, Oct 03, 2015, 11:22 AM UTC

trampi wrote: post #13

paradite wrote: post #8

Would be more interesting if the background is live, like updating itself every second or half a second.

will be live in some minutes

done. thanks for the recommendation.

Re: Using htop to generate a live website background

#17

Post by paradite » Sat, Oct 03, 2015, 11:23 AM UTC

trampi wrote: post #13

paradite wrote: post #8

Would be more interesting if the background is live, like updating itself every second or half a second.

will be live in some minutes

wow, looks fantastic.

Re: Using htop to generate a live website background

#18

Post by [deleted] » Sat, Oct 03, 2015, 11:31 AM UTC

[deleted]

Re: Using htop to generate a live website background

#19

Post by jhildings » Sat, Oct 03, 2015, 11:31 AM UTC

ck2 wrote: post #11

Well it's ansi text, so why not just copy the text directly to a DIV, convert the ansi to html (or css) and update it via javascript polling ?

Or maybe just use WebRTC or WebSockets for push state change ?

Re: Using htop to generate a live website background

#20

Post by CatCookie » Sat, Oct 03, 2015, 11:45 AM UTC

slashink wrote: post #15

You can make it more efficient by capturing the images to a buffer and rendering a low FPS h264 stream, serving it as HLS fragments and displaying it with hls.js ( https://github.com/dailymotion/hls.js ) as a background element. There is a lot of inter frame compression benefits to be had from this sort of content + it will look more nice with a constant stream of frames. With a low FPS, the CPU usage should be low e…

we lol'd... Its a good idea. The inter frame compression is the point which would be nice to have.