TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Using htop to generate a live website background

198 pointsby trampiover 9 years ago

23 comments

hisham_hmover 9 years ago
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!
评论 #10324076 未加载
评论 #10325130 未加载
评论 #10324265 未加载
评论 #10324106 未加载
评论 #10325227 未加载
slashinkover 9 years ago
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.
评论 #10323517 未加载
pixelbeatover 9 years ago
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>
评论 #10323388 未加载
deweyover 9 years ago
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>
评论 #10325204 未加载
terminalcommandover 9 years ago
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>
评论 #10323965 未加载
zuzunover 9 years ago
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>
DangerousPieover 9 years ago
I would be worried about one of the processes having a database password or something like that as a parameter...
评论 #10323299 未加载
paraditeover 9 years ago
Would be more interesting if the background is live, like updating itself every second or half a second.
评论 #10324804 未加载
评论 #10323442 未加载
ck2over 9 years ago
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 ?
评论 #10323448 未加载
评论 #10323496 未加载
jtchangover 9 years ago
Well that was kind of fun. Ran apache bench on it just to see the two cores go to 100% :)
评论 #10325013 未加载
the_mitsuhikoover 9 years ago
It&#x27;s text. Would have used asciinema as a base and streamed that in.
f_over 9 years ago
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...
pearjuiceover 9 years ago
What are the security implications?
评论 #10324992 未加载
评论 #10324213 未加载
mulanderover 9 years ago
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.
ollybeeover 9 years ago
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>
lazyantover 9 years ago
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)?
评论 #10323709 未加载
andmariosover 9 years ago
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.
felxhover 9 years ago
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>)
fnordfnordfnordover 9 years ago
&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.
gavingover 9 years ago
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>
tamierover 9 years ago
Drunken Security: Sorry for the downtime, Server is up again! :)
fnordfnordfnordover 9 years ago
What did you do to stop the client from caching the background image?
评论 #10324451 未加载
dorfsmayover 9 years ago
GraphicsMagic &gt; image magic<p>atop &gt; htop