井底蛙

>建立目录
mkdir /etc/weathermap
mkdir /var/www/html/weathermap
将weathermap有用的5个文件放到相应的位置
cp weathermap /usr/bin
cp weathermap_back.png /var/www/html/weathermap
cp weathermap.conf /etc/weathermap
cp weathermap_overlib.html index.html
cp overlib_mini.js /var/www/html/
这5个文件是作用分别是：
weathermap 是perl的教本文件，用来生成最终的图片
weathermap_back.png 是weathermap生成图片是用的背景图片
weathermap.conf 是weathermap的配置文件
weathermap_overlib.html 是显示最中图片的容器，另外还要修改一些东西，使它可以在鼠标经过的时候可以出mrtg的流量图
overlib_mini.js 使网页用的js脚本
前4个文件都需要修改。
一、wethermap的修改
1）设置变量
$WGET = “/usr/bin/wget -qO -”;
$CONFIG = “/etc/weathermap/weathermap.conf”;
$OUTPUT = “/var/www/html/weathermap.png”;
$DEBUG = 0;
$WIDTH = 800;
$HEIGHT = 600;
$background=”/var/www/html/weathermap/weathermap_back.png”;
将这些变量改成以上的值
2）修改提取数据的正则表达式
if(($data =~ /^https?:///i) || ($data =~ /^ftp:///i) ) {
open(LOG, “$WGET $data |”) or warn “$data: $!
“;
} else {
open(LOG, “$data”) or warn “data file $data: $!
“;
}> while(<LOG>){
# <!– cuin d 5585966 –>
# <!– cuout d 10589424 –>
# 将下行的d改成了m，因为我们的mrtg的格式是<!– cuin m 535245 — >所以要修改
if(/<!– cuin m (d+) –>/){
$input{$link}=$1;
print “LINK: $link, Input: $input{$link}
” if($DEBUG);
}
if(/<!– cuout m (d+) –>/){
$output{$link}=$1;
print “LINK: $link, Output: $output{$link}
” if($DEBUG);
}
}
close(LOG);
if(($data =~ /^https?:///i) || ($data =~ /^ftp:///i) ) {
open(LOG, “$WGET $data |”) or warn “$data: $!
“;
} else {
open(LOG, “$data”) or warn “data file $data: $!
“;
}> while(<LOG>){
# <!– cuin d 5585966 –>
# <!– cuout d 10589424 –>
if(/<!– cuin m (d+) –>/){
$input{$link}=$1;
print “LINK: $link, Input: $input{$link}
” if($DEBUG);
}
if(/<!– cuout m (d+) –>/){
$output{$link}=$1;
print “LINK: $link, Output: $output{$link}
” if($DEBUG);
}
}
close(LOG);
3）如果要在图片上显示中文，要做下边的修改
weathermap在图片上显示文字是用下边的方法实现的
$map->string(gdLargeFont,$xpos-$strwidth/2, $ypos-$strheight/2+1,$label, $black);
用这个方法不能显示中文，只可以显示英文的字符。如果要显示中文，就要用stringFT函数来替换这个函数。
stringFT函数的用法：
$image->stringFT($fgcolor,$fontname,$ptsize,$angle,$x,$y,$string)>使用TureType字体，但是要求gdlib编译时，加入了TureType的支持。
fgcolor字符的颜色
fontname字体的路径
ptsize字的大小
angle字符的角度
x,y字符的坐标
string字符
例如：
$gd->stringFT($black,/dosc/windows/Fonts/pala.ttf,40,0,20,90,
“hi there
bye now”,
{linespacing=>0.6,
charmap => Unicode,
});
其中，第8个参数是散列表的形式，关键字有linespacing, charmap, resolution和kerning。
linespacing行距，值为2.0的时候，是2倍的行距
charmap可以是”Unicode”, “Shift_JIS”和”Big5″中的一个值
resolution设置字符的水平的长度和垂直的长度，值的形式是“水平,垂直”
kerning是一个符号量，可以关闭默认的字距调整
#!/usr/bin/perl
use Getopt::Long;
use GD;
$map=new GD::Image(100,100);
&alloc_colors;
$map->filledRectangle(10,70,30,90,$white);
$map->stringFT($black,/usr/share/fonts/chinese/TrueType/gkai00mp.ttf,10,0,20,90,
“你好”,
{charmap => Unicode,
});
＃＃注意你的你好要求是UTF-8编码的
open(PNG,”>/var/www/html/a.png”);
print PNG $map->png;
close PNG;
exit;
sub alloc_colors {
$white=$map->colorAllocate(255,255,255);
$gray=$map->colorAllocate(248,248,248);
$black=$map->colorAllocate(0,0,0);
$darkgray=$map->colorAllocate(128,128,128);> foreach(keys %scale_red){
$color{$_} = $map->colorAllocate($scale_red{$_},$scale_green{$_},$scale_blue{$_});
}
}
二、weathermap_back.png文件的修改
这个文件应该直接用你的地图文件来代替，注意你的地图文件要是png的格式。另外最好是800×600的，如果不是，还要修改你的weathermap文件中的$WIDTH，$HEIGHT两个变量的值。
三、weathermap.conf的修改
这个文件是你定义节点和连接的地方，另外还要定义量度表，就是不同的负荷具体用什么颜色来实现
下边是一个具体的conf文件的例子
KEYPOS 1 450># low high red green blue
SCALE 1 10 140 0 255
SCALE 10 25 32 32 255
SCALE 25 40 0 192 255
SCALE 40 55 0 240 0
SCALE 55 70 240 240 0
SCALE 70 85 255 192 0
SCALE 85 100 255 0 0>
NODE neucc
POSITION 300 150
LABEL 网络中心>NODE dahuo
POSITION 320 410
LABEL 大活>NODE xiaobu
POSITION 500 90
LABEL 校部>NODE 8she
POSITION 100 225
LABEL 八舍>NODE jidian
POSITION 290 330
LABEL 机电馆>NODE yejin
POSITION 480 350
LABEL 冶金馆>LINK neucc-xiaobu
NODES neucc xiaobu
TARGET http://mrtg.neu.edu.cn/stats/mrtg-rrd/nc2xiaobu_1.html
BANDWIDTH 102400>LINK neucc-8she
NODES neucc 8she
TARGET http://mrtg.neu.edu.cn/stats/mrtg-rrd/nc2dorm8_1.html
BANDWIDTH 102400>LINK neucc-dahuo
NODES neucc dahuo
TARGET http://mrtg.neu.edu.cn/stats/mrtg-rrd/nc2dahuo_1.html
BANDWIDTH 102400>LINK neucc-jidian
NODES neucc jidian
TARGET http://mrtg.neu.edu.cn/stats/mrtg-rrd/nc2me_1.html
BANDWIDTH 102400>LINK neucc-yejin
NODES neucc yejin
TARGET http://mrtg.neu.edu.cn/stats/mrtg-rrd/nc2yejin_1.html
BANDWIDTH 102400
注意，label是在图片的相应位置上显示的东西，如果要显示的是中文，一定要在中文的编码使用UTF-8而且weaterhmap也要做相应的修改才可以。否则是乱码。
四、index.html文件的修改
这个文件就将相应的area块改成你的连接就可以了。
下边是我使用的
<HTML>
<HEAD>
<TITLE>Northeastern University Network Weathermap</TITLE>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<meta http-equiv=”Refresh” CONTENT=”300″>
<META HTTP-EQUIV=”Cache-Control” content=”no-cache”>
<META HTTP-EQUIV=”Pragma” CONTENT=”no-cache”>
<meta name=”author” value=”HuangXiaoLei”>
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<center><h1>Northeastern University Network Weathermap</h1></center>
<DIV id=”overDiv” style=”position:absolute; visibility:hidden; z-index:1000;”></DIV>
<SCRIPT language=”JavaScript” src=”overlib_mini.js”><!– overLIB (c) Erik Bosrup –></SCRIPT><center>
<IMG SRC=”weathermap.png” WIDTH=800 HEIGHT=600 BORDER=0 ALT=”" USEMAP=”#weathermap_Map”>
<MAP NAME=”weathermap_Map”>
<AREA SHAPE=”poly” COORDS=”285,148,290,158,112,228,107,217″ ONMOUSEOVER=”return overlib(<img src=http://mrtg.neu.edu.cn/stats/mrtg-rrd/nc2dorm8_1-day.png>, CAPTION, neucc-8she, CENTER, FIXX, 120);” onmouseout=”return nd();” HREF=”http://mrtg.neu.edu.cn/stats/mrtg-rrd/nc2dorm8_1.html“>
<AREA SHAPE=”poly” COORDS=”295,154,304,154,296,329,283,325″ ONMOUSEOVER=”return overlib(<img src=http://mrtg.neu.edu.cn/stats/mrtg-rrd/nc2me_1-day.png>, CAPTION, neucc-jidian, CENTER, FIXX, 120);” onmouseout=”return nd();” HREF=”http://mrtg.neu.edu.cn/stats/mrtg-rrd/nc2me_1.html“>
<AREA SHAPE=”poly” COORDS=”295,159,307,155,324,409,314,407″ ONMOUSEOVER=”return overlib(<img src=http://mrtg.neu.edu.cn/stats/mrtg-rrd/nc2dahuo_1-day.png>, CAPTION, neucc-dahuo, CENTER, FIXX, 120);” onmouseout=”return nd();” HREF=”http://mrtg.neu.edu.cn/stats/mrtg-rrd/nc2dahuo_1.html“>
<AREA SHAPE=”poly” COORDS=”303,157,308,150,484,346,474,354″ ONMOUSEOVER=”return overlib(<img src=>, CAPTION, neucc-yejin, CENTER, FIXX, 120);” onmouseout=”return nd();” HREF=”http://mrtg.neu.edu.cn/stats/mrtg-rrd/nc2meta_1.html“>
<AREA SHAPE=”poly” COORDS=”302,145,304,153,490,98,487,90″ ONMOUSEOVER=”return overlib(<img src=http://mrtg.neu.edu.cn/stats/mrtg-rrd/nc2xiaobu_1-day.png>, CAPTION, neucc-xiaobu, CENTER, FIXX, 120);” onmouseout=”return nd();” HREF=”http://mrtg.neu.edu.cn/stats/mrtg-rrd/nc2xiaobu_1.html“>
</MAP></center>
<!–warning scripts goes here–>></BODY>
</HTML>> >
这个weathermap就已经配置好了，每运行一次就可以刷新一次，也可以交给系统循环运行。