Using htop to generate a live website background

Hi, htop author here: this brought a smile to my face! Wondering if I should do the same in htop's own website. Would be fun to follow the activity spike when the new major release comes later this year! Major kudos to the author for the idea!

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 ( <a href="https:&#x2F;&#x2F;github.com&#x2F;dailymotion&#x2F;hls.js" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;dailymotion&#x2F;hls.js</a> ) 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 &quot;preview&quot; when loading the stream in the background for having a background picture on load.

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

Direct link to the generated background image: <a href="http:&#x2F;&#x2F;104.233.86.94&#x2F;background&#x2F;background.png" rel="nofollow">http:&#x2F;&#x2F;104.233.86.94&#x2F;background&#x2F;background.png</a>

I studied the line read _ _ sid &lt; &lt;(2&gt;&amp;1 strace -esetsid setsid sh -c &quot;exec $PROGRAM &lt;&gt; &#x2F;dev&#x2F;tty2 &gt;&amp;0 2&gt;&amp;1 &quot;)<p>&lt;( is an example of process substitution, in case anyone is interested. Basically it feeds the stdout of the subshell into the stdin of the read (previous) command. Here is a detailed explanation: <a href="http:&#x2F;&#x2F;www.tldp.org&#x2F;LDP&#x2F;abs&#x2F;html&#x2F;abs-guide.html#PROCESS-SUB" rel="nofollow">http:&#x2F;&#x2F;www.tldp.org&#x2F;LDP&#x2F;abs&#x2F;html&#x2F;abs-guide.html#PROCESS-SUB</a>

I wrote a tiny program that captures the content of a Linux virtual console and prints it to stdout.[1] I forgot why I wrote it, but the source code shows how to access foreground color, background color and the font weight.[2] You could hack it to print everything in a format that&#x27;s easily parsable, write it to a file every second and do the rendering on the client side with JavaScript.<p>[1] <a href="https:&#x2F;&#x2F;github.com&#x2F;slyrz&#x2F;peep&#x2F;" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;slyrz&#x2F;peep&#x2F;</a><p>[2] <a href="https:&#x2F;&#x2F;github.com&#x2F;slyrz&#x2F;peep&#x2F;blob&#x2F;master&#x2F;peep.c#L165" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;slyrz&#x2F;peep&#x2F;blob&#x2F;master&#x2F;peep.c#L165</a>

I would be worried about one of the processes having a database password or something like that as a parameter...

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

Well it&#x27;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 ?

Well that was kind of fun. Ran apache bench on it just to see the two cores go to 100% :)

It&#x27;s text. Would have used asciinema as a base and streamed that in.

Great idea! But wouldn&#x27;t it be best to restrain the output of htop to a few interesting processes that are running without root privileges. It seems to me that it could be possible to bubble up processes that can leak information, especially at startup and when you put the server under load externally...

What are the security implications?

I wonder how <a href="https:&#x2F;&#x2F;github.com&#x2F;ansilove&#x2F;AnsiLove-C" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;ansilove&#x2F;AnsiLove-C</a> would fare for generating the PNG compared to the current solution.

I&#x27;ve used this to show live htop on a web page: <a href="https:&#x2F;&#x2F;github.com&#x2F;dtinth&#x2F;ttycast" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;dtinth&#x2F;ttycast</a>

Not sure I understand why there&#x27;s 4 nginx processes, 4 php-fpm processes and like 20 mysql processes, why so many, don&#x27;t you need like 1 (or 4 if there&#x27; no pooling)?

Nice idea although a bit dangerous! I wonder if it would be better to use as background the output of a program like gotty, which streams a terminal&#x27;s output as a web page.

Interesting, thanks! Probably not as cool, but you could also just get the output of the regular top, parse it and generate HTML from it (a bit like <a href="http:&#x2F;&#x2F;tracesof.net&#x2F;uebersicht&#x2F;" rel="nofollow">http:&#x2F;&#x2F;tracesof.net&#x2F;uebersicht&#x2F;</a>)

&gt;Is it a good idea to show everybody what your server is doing?<p>I&#x27;m guessing no, but it&#x27;s neat.

Nice. Always meant to try and do something similar myself using <a href="https:&#x2F;&#x2F;github.com&#x2F;joewalnes&#x2F;websocketd" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;joewalnes&#x2F;websocketd</a>

Drunken Security: Sorry for the downtime, Server is up again! :)

What did you do to stop the client from caching the background image?

GraphicsMagic &gt; image magic<p>atop &gt; htop