weathermap需要修改的地方

weathermap需要修改的地方建立目录
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: $!\n";
} else {
   open(LOG, "$data") or warn "data file $data: $!\n";
} 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}\n" if($DEBUG);
   }
   if(/<\!-- cuout m (\d+) -->/){
    $output{$link}=$1;
    print "LINK: $link, Output: $output{$link}\n" if($DEBUG);
   }
}
close(LOG);
if(($data =~ /^https?:\/\//i) || ($data =~ /^ftp:\/\//i) ) {
   open(LOG, "$WGET $data |") or warn "$data: $!\n";
} else {
   open(LOG, "$data") or warn "data file $data: $!\n";
} while(<LOG>){
   # <!-- cuin d 5585966 -->
   # <!-- cuout d 10589424 -->
   if(/<\!-- cuin m (\d+) -->/){
    $input{$link}=$1;
    print "LINK: $link, Input: $input{$link}\n" if($DEBUG);
   }
   if(/<\!-- cuout m (\d+) -->/){
    $output{$link}=$1;
    print "LINK: $link, Output: $output{$link}\n" 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\r\nbye 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 102400LINK neucc-8she
        NODES   neucc 8she
        TARGET http://mrtg.neu.edu.cn/stats/mrtg-rrd/nc2dorm8_1.html
BANDWIDTH 102400LINK neucc-dahuo
        NODES   neucc dahuo
        TARGET http://mrtg.neu.edu.cn/stats/mrtg-rrd/nc2dahuo_1.html
BANDWIDTH 102400LINK neucc-jidian
NODES neucc jidian
TARGET http://mrtg.neu.edu.cn/stats/mrtg-rrd/nc2me_1.html
BANDWIDTH 102400LINK 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);" 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);" 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);" 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);" 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);" nd();"   HREF=" http://mrtg.neu.edu.cn/stats/mrtg-rrd/nc2xiaobu_1.html">
</MAP></center>
<!--warning scripts goes here--></BODY>
</HTML>

这个weathermap就已经配置好了，每运行一次就可以刷新一次，也可以交给系统循环运行。