! T! [" r( d; U" b　　该设计使用STM32F103RC对芯片内部温度进行转换并通过串口输出，本人经过各种查资料使用VS2010自己编写了一个简单的串口数据接收应用程序，该程序在接收到串口的温度过后同时在为该温度记录一个时间点并保存到一个txt文件中。浏览器则每隔2秒中定时向服务器请求数据，而服务器则读取txt文件的数据并返回给浏览器。　　浏览器使用EXTJS编写，串口数据接收和服务器使用C#编写。视频演示：http://www.tudou.com/programs/view/pSgeUkYjc0I/

" o% y2 Q# T  X- V* z! U/ s

/ |  V! t2 i7 v4 `6 H; e9 a9 S# l
6 ~) x& f2 ?$ [6 y

浏览器显示波形是怎么做的，感觉很不错啊

小丁^_^ 发表于 2014-11-15 22:19
& F3 u. w/ `1 q5 B浏览器显示波形是怎么做的，感觉很不错啊

网页显示是使用的ExtJs，用这个做波形图就简单的像是在office上做波形图一样，只是默认的比较丑，优化界面的时候加一些代码而已。
$ s' M$ G/ L$ \' ?* Y

1. Ext.onReady(function () {
   
2.         var runner = new Ext.util.TaskRunner();
   2 z2 a2 \% u0 A' D
3.         Ext.define('User',{
   ! o; n9 g, V0 t& f& }6 }6 T- {8 Y
4.            extend:'Ext.data.Model',
   
5.            fields:['Tmp','Tim']
   ) t5 G* O% o4 s& Z9 Y2 \
6.         });
   8 @7 |0 r: G0 \; q: `' {
7.         store=Ext.create('Ext.data.Store',{
     g5 o. t0 F2 r
8.           model:'User',
   
9.           autoLoad:true,
   , I% p- o; d& ~' @
10.           proxy:{
    
11.             type:'ajax',
    
12.             url: 'http://127.0.0.1:8080/ServiceRelease/text/?token=hu/v7ky8RTzYlYJrNZGUr+7jhP8Tl0md',
    # f1 ~" A% J3 B$ y% l4 u5 O, D
13.            reader:{
    
14.                root:'data'
    
15.             }
    8 Z1 X5 O( d6 v3 e. P
16.           }
    
17.         });
    
18.         
    7 Z2 p9 L6 `# V/ a
19. var b1 = Ext.create("Ext.Window",{
    * }) Y) ]1 e& g
20.         width:600,
    
21.         height:500,
    0 y( i' _/ ^2 |4 p4 k
22.         title:'芯片内部温度图',
    1 a5 _5 T5 ^# D( K
23.         shadow:false,
    ' L% C8 q$ x" ~7 s. T) }
24.         maximizable:true,
    8 }$ m/ v; b& B( z5 @
25.         layout:'fit',
    7 K' w9 @2 d! z- i* X7 P
26.         items:[{
    0 J' o2 F$ E0 R! ~! H9 t
27.                 xtype:'chart',
    
28.                 style:'background:#fff',//控制背景颜色
    1 o! P5 D+ u* H
29.                 animate :true,//运行动画
    
30.                 shadow : true,
    
31.                 theme:"Category1",//皮肤
    8 k# C. x6 ^: |
32.                 store:store,
    
33.         axes:[{
    1 M4 r6 t  k! }' x& ]/ r- y
34.                 type:'Numeric',
    3 S5 P! |- ~$ B% s: m& X) g/ @) c7 r1 L
35.                 position:'left',//放置到左边
    7 \5 D) O$ a0 y
36.                 dashSize:5,//引导线的宽度设置
    
37.                 title:'温度曲线(TM)',
      L" {  m# R, |  m
38.                 fields:['Tmp'],//显示的数据索引
    $ T3 v7 v$ v. J2 @/ n& v# B7 x& h
39.                 majorTickSteps:5,
    ' [9 _( V4 f6 Y+ X* s3 M$ s, ?
40.                 minorTickSteps:6,
    
41.                 grid:{
    
42.                         odd:{//奇数行
    0 Z- M  A" y7 `5 u% I
43.                                 opacity:1,//不透明
    
44.                                 'stroke-width':0.5//表格线宽
    
45.                         },
    
46.                         even:{//偶数行
    & A! [0 F2 Q7 i
47.                                 opacity:1,//不透明
    
48.                                 stroke:'#DDD',
    
49.                                 'stroke-width':0.5//表格线宽
    1 L- k/ }* h: b9 o
50.                         }
    ( M1 P/ }4 s9 T; s# ~5 l0 h
51.                 }
    ' w/ _5 q  {# T) y* ~, G
52.         },{
    ; N" Q8 X6 }- r' f! C% J' a* e
53.                 type:'Category',
    
54.                 position:'bottom',
    7 W6 B0 Y- @" O+ g5 |/ i
55.                 fields:['Tim'],
    
56.                 title:'时间',
    
57.                 grid:true
    
58.         }],//轴
    
59.         series:[{
    % z9 X1 b3 B! l/ _( p+ i
60.                 type:'line',
    6 j0 P' {* ?) v6 n
61.                 axis:'left',
    ! Q4 W' Q6 y+ W5 c7 z
62.                        xField: 'Tim',
    
63.                 yField: 'Tmp',
    
64.                 highlight:true,
    
65.                 tips:{
    . Q/ ]/ h" W6 c$ k6 _& P' c
66.                           trackMouse: true,
    ) B5 N/ r# l2 ~+ e2 S+ \2 i
67.                           width: 240,
    3 U1 w4 u5 v6 G% d+ x# B  u
68.                           height: 28,
    
69.                           renderer: function(storeItem, item) {
    1 j2 j' Z( w( T$ G
70.                             this.setTitle('在'+storeItem.get('Tim') + '温度是： ' +
    
71.                             storeItem.get('Tmp') + '摄氏度');
    
72.                           }
    0 ~0 e& }! M4 }' w( n
73.                 }
    - }! B2 _0 g; n. a# x7 r8 w
74.         }]//序列
    
75.         }]
    
76. }).show();      
    ) f' ^( `. ^. I- x7 ^/ r7 o
77.         
    
78.      var task = {
    # g. n% w1 N( D/ B4 o0 w
79.                             run: function(){store.reload();
    
80.                             },
    . q! @0 ], V1 A/ A( D7 K
81.                             interval: 1000 //1 second
    
82.                         };
    
83.                 runner.start(task);
    
84.         
    
85.     });

复制代码