樱町论坛状态监视系统

樱町分成两个形态以后,在线人数和其他的一些论坛数量指标就不容易统计了。现在的情况是,YTD的人很少,而YTX的人很多(当然 = =,现在还是默认进入YTX的)。不过YTD的人少到什么程度,而YTX的人又多到什么程度呢?偶想得知这些数据,于是就写了一个vbs,每隔一分钟从数据库中读取信息并做一个快照,再保存到数据库里。
快照的信息包括YTX和YTD每一分钟的在线游客、在线用户,这一分钟的帖子浏览数,同样也分在线用户进行的浏览和游客进行的浏览。
快照是直接保存在数据库里面的,不容易查看。其实在做这个快照的时候偶就已经打算另外做一个界面来显示快照的信息了。
于是樱町论坛状态监视系统就横空出现!
首先看看截图吧

把这系统简称YTSM吧(诡异的名字 = =,不过请记住这是 YT Status Monitor 的缩写而不是YT XXOO)。整个YTSM的核心显示方法是SVG,其实你在图片上看到的除了浏览器界面以外都是由YTSM生成的SVG图形。
SVG是很好很强大的。别看这个SVG似乎很复杂的样子,其实总大小也就14KB左右(gb2312编码),这还是没有压缩过的哦。在经过压缩以后,就只有不到3KB了。
画出这个SVG也是不难的,不过最好先封装好几个函数,用来画不同的SVG图形。如果直接在程序中写svg代码的话,那会弄死人的。

整个步骤是:
画出左边栏,图形框以及数据框
给数据框的标题行加上了蓝色背景,下面各行隔行加上灰色背景
给左边栏写上文字
给图形框画上坐标线,同时写上刻度
对每一个计数器,首先在数据栏填上相应的信息,接着计算好折线图的坐标点以后,直接调用封装好的polyline把折线画出来

现在偶是用一个框架来显示SVG的,毕竟目前还是使用框架才能做到较好的兼容性。既然套用了框架,偶就顺便写了一段JS,用以定时刷新SVG。
最后结果就是,只要打开这个页面,就可以看到YT的一些状态了。同时还能自动刷新,如同AJAX一样(因为严格来说偶这里用的JS并不能算AJAX)。但是似乎 Adobe 的 SVG Viewer 在网页中加载SVG的速度还不够快,使用IE查看的时候会有明显的刷新,而使用FF就可以享受到更新而不是刷新了。

对了,偶在YTSM中没有使用中文的原因是,似乎现在各种浏览器对SVG中非西文字符的处理都不太好,FF虽然可以显示严格的SVG文件中的中文,但是 SVG Viewer 却不能显示。没办法,IE还要依靠 SVG Viewer 来显示SVG,只要用英文了。
另外说一下,似乎FF还不支持SVG动画?

再废话几句,有没有注意到左边栏的“Cache in Memory”?这是ASP的Application对象所占用的内存大小。为了得到这个值,偶又折腾了一番ASP,最后得出了这个近似值。有关如何得到这个值,过几天再写篇文来说明。
(不知道本学期的考试会不会挂掉,下周就考试了偶还在这瞎鼓捣 = =)

本文发表于 樱町专栏,并添加了 , , , , 标记。保存永久链接到书签。

发表评论

电子邮件地址不会被公开。