用Flash与C语言制作工程实时数据动态曲线图

用Flash与C语言制作工程实时数据动态曲线图

宋国志 [e-mail]

本文旨在说明如何利用Flash和C语言制作BS模式下的实时数据动态曲线图，现在流行的实时数据曲线图，大都是采用了CS模式的开发语言，BS模式的虽有一些实例，比如google上的股市曲线图，但其实现的方式和流程在网上很少能见到。

其运行时的界面如下，数据实时更新，曲线图从左往右动态移动：

 

下面先讲在实现过程中的工作环境以及开发工具进行简单的介绍：

1.         Macromedia Flash Professional 8；

2.         Macromedia Dreamweaver 8;

3.         标准C；

4.         操作系统：Windows，主要用来制作Flash和网页；

5.         操作系统：Linux，用作网站的服务器，安装apache；

6.         apache软件。

假设以上的环境都已经安装完毕，并经测试运行正常，下面就逐步的介绍开发过程：

一．在制作此例前，我假设您已了解以下Flash知识点：

1.使用this.createEmptyMovieClip动态创建MovieClip；

2.使用AS绘制线条或矩形；

3.对Flash中“深度”的理解；

4.使用this.createTextField动态创建文本框

二．正式开始

1.创建一个空白文档，有两个层：

 

看上图，两个层：

A．script：放置一些脚本；

B．坐标曲线： 放置一个MovieClip，即生成的曲线；

2.按Ctrl+F8新建一个影片剪辑(MovieClip)，里面放置一个动态文本框，实例名称为：tips，如下图：

 

3.返回场景，将刚才制作的mc坐库中托至场景(放在可视区域外)，并且命名为：mouse_mc，如图：

 

4.按Ctrl+F8新建一个影片剪辑(MovieClip)：坐标曲线，有三个层:，如下图：

 

A.     script：放置一些脚本；

B.     文字：放置x,y轴的说明文字；

C.     xy轴： 放置x,y坐标轴；

5.在影片剪辑“坐标曲线”的“xy轴”层上画x,y坐标线：

 

这步就是注意坐标轴的中心点，画在影片剪辑的注册点上，即_x=0,_y=0处；

6.在坐标轴附近，创建二个动态文本框，分别指定变量名为：name_x，name_y，如下图：

 

这二个文本框用来显示坐标轴的说明文字；

7.     接着在的“script”层的第一帧，加入如下代码：

//载入实时数据的对象

newFollow=new LoadVars();

 

//x,y轴的名称

name_x = "Time(S)";

name_y = "Data";

 

//x轴刻度总长

var xtotal:Number=120;

//y轴刻度总长

var ytotal:Number=100;

 

//存放曲线上点的数组

var point_arr:Array=new Array();

 

//曲线上点的个数，最大为120（表示2分钟）

var numPoints:Number;

numPoints=0;

 

//x轴单位刻度的像素数

var xspace = Math.floor(360/xtotal);

 

//y轴单位刻度的像素数

var yspace = Math.floor(200/ytotal);

 

 

//画X轴刻度

DrawScalX(xtotal);

//画Y轴刻度

DrawScalY(ytotal);

 

//画X轴刻度

function DrawScalX(total:Number) {

    createEmptyMovieClip("scalX_mc", 1);

    scalX_mc.lineStyle(1, 0x6699CC, 80);

    var i:Number;

    for (i=1; i<total+1; i++) {

        if (i%10 == 0) {

            scalX_mc.lineStyle(1, 0x6699CC, 70);

            scalX_mc.moveTo(xspace*i, 0);

            scalX_mc.lineTo(xspace*i, -6);

            CreateText(i, xspace*i-14-5*xspace+15, 5);

        } else {

            scalX_mc.lineStyle(1, 0x6699CC, 30);

            scalX_mc.moveTo(xspace*i, 0);

            scalX_mc.lineTo(xspace*i, -4);

        }

    }

}

 

function DrawScalY(total:Number) {

    createEmptyMovieClip("scalY_mc", 2);

    var i:Number;

    for (i=1; i<total+1; i++) {

        if (i%10 == 5) {

            scalY_mc.lineStyle(1, 0x6699CC, 50);

            scalY_mc.moveTo(0, 0-(yspace*i));

            scalY_mc.lineTo(7, 0-(yspace*i));

        } else if (i%10 == 0) {

            scalY_mc.lineStyle(1, 0x6699CC, 80);

            scalY_mc.moveTo(0, 0-(yspace*i));

            scalY_mc.lineTo(8, 0-(yspace*i));

            CreateText(i, -30, 0-(yspace*i)-9);

        } else {

            scalY_mc.lineStyle(1, 0x6699CC, 30);

            scalY_mc.moveTo(0, 0-(yspace*i));

            scalY_mc.lineTo(4, 0-(yspace*i));

        }

    }

}

 

//建立x,y轴的坐标文本

function CreateText(txt:Number, X:Number, Y:Number) {

   

    var my_txt = createTextField("my_txt"+txt, Math.floor(Math.random()*100000), X, Y, 30, 30);

    my_txt.multiline = false;

    my_txt.wordWrap = true;

    my_txt.selectable = false;

    var my_fmt:TextFormat = new TextFormat();

    my_fmt.color = 0x999999;

    my_fmt.align = "center";

    my_txt.text = txt;

    my_txt.setTextFormat(my_fmt);

}

 

//画曲线

function DrawLine() {

    createEmptyMovieClip("curve_mc", 3);

    //曲线填充色

    curve_mc.beginFill(0xFFFFCC, 50);

    //曲线颜色

    curve_mc.lineStyle(1, 0xFF6600, 100);

    curve_mc.moveTo(0, 0);

   

    for (var i = 0; i<point_arr.length; i++) {

        curve_mc.lineTo(i*xspace, 0-point_arr[i]*yspace);

        DrawCircle((i), 0-(point_arr[i]));

    }

    curve_mc.lineTo(((point_arr.length-1)*xspace), 0);

    curve_mc.lineStyle(1, 0x000000, 0);

    curve_mc.lineTo(0, 0);

    curve_mc.endFill();

    if (point_arr[0])

        _root.cnp="即时数据："+point_arr[0]+" P/S";

}

 

//构造曲线上点的数组

function display() {

    //曲线上新点的y轴坐标值

    var str:String;

    var i:Number;

   

    newFollow.load("/cgi-bin/getdata.cgi?nocahe="+getTimer());

    newFollow.onLoad=function(){

        str=newFollow.new_point;

       

        for (i=numPoints; i>0; i--) {

            point_arr[i]=point_arr[i-1];

        }

        if (numPoints<120)

            numPoints++;

           

        point_arr[0]=str;

    }

    //画曲线

    DrawLine();

}

 

setInterval(display,1000);

stop();

 

8.返回场景，在场景的第一帧加入如下代码：

//让鼠标提示内容的宽度根据内容的多少自动调整

mouse_mc.tips.autoSize = true;

//页面的编码方式

System.useCodepage = true;

9.将库中的“坐标曲线”影片剪辑拖至场景中，命名为：mc，如下图：

 

10.参数说明：

//载入实时数据的对象

newFollow=new LoadVars();

 

//x,y轴的名称

name_x = "Time(S)";

name_y = "Data";

 

//x轴刻度总长

var xtotal:Number=120;

//y轴刻度总长

var ytotal:Number=100;

 

//存放曲线上点的数组

var point_arr:Array=new Array();

 

//曲线上点的个数，最大为120（表示2分钟）

var numPoints:Number;

numPoints=0;

11.制作Flash影片

导出影片并保存为Real-Time_curve.swf，制作一个网页，将该影片插入到网页中，保存网页为Real-Time_curve.html，然后将该网页和Flash影片一起上传到apache服务器的htdocs目录中。但记得要修改这两个文件的权限，否则在测试的时候会出现无权访问的错误。

三．制作实时数据源

在Linux下编写一个模拟实时数据产生器，其代码如下：

#include <stdio.h>

 

int main(void)

{

    srand((int)time(0));

   

    printf("Content-type: text/html/n/n");

    printf("new_point=%d", rand()%101);

 

    return 0;

}

将代码保存为getdata.c，并将编译后的可执行文件命名为getdata。将可执行的getdata保存到apache服务器的cgi-bin目录中。

在上面的代码中，值得注意的是两个printf语句。第一个printf语句是cgi编程的规范，在这里我不做阐述，可以查阅相关资料做进一步的理解，而第二个printf语句实际上与前面介绍的Flash中的newFollow.load("/cgi-bin/getdata.cgi?nocahe="+getTimer())构成了一个实时数据的通信接口。

四．问题讨论

1.保证数据的实时刷新。在IE浏览器中可能由于缓存的原因而导致Flash无法实时动态的显示，因此在Flash中必须使浏览器每次都从服务器上去读取数据，而不会使用本地的缓存，因此在Flash中调用实时数据源时加上了参数nochae=getTimer()，由于getTimer()在每次调用的时候的值不同，使浏览器认为是调用一个新的程序，这样保证数据的有效性和实时性。

2.动态曲线的刷新频率。setInterval(display,1000)使浏览器每隔一秒钟就调用一次display()函数，重新获取一次数据，然后绘制新的曲线。

3.曲线上点的值保存在一维数组point_arr中，使用该一维数组可以同时体现出曲线上坐标点的位置，数组元素的下标值即为曲线的X坐标值，该下标所对应的数组元素值就为曲线的Y坐标值。由于曲线上总共可以显示120个点的值，也即是2分钟的数据，因此数组的长度也设置为120，2分钟之前的元素没有采用溢出，而是采用的覆盖的方式，这样对系统来说也安全，以免造成内存问题。

4.当然，曲线图的X/Y轴的名称以及轴上的刻度大小都是可以通过html或者其他语言在调用Flash影片时作为参数传递给Flash。

作者：宋国志

2008年9月5日