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

5 a; l; N  b* G7 S0 Q' Y. ^0 E. H. i

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

小丁^_^ 发表于 2014-11-15 22:19
浏览器显示波形是怎么做的，感觉很不错啊

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

1. Ext.onReady(function () {
   ' y0 K, v6 l/ R! g
2.         var runner = new Ext.util.TaskRunner();
   " [6 g) R+ n  q4 b* t
3.         Ext.define('User',{
   3 O3 I/ ?8 {8 l$ j
4.            extend:'Ext.data.Model',
   3 ?# M6 B7 k: [7 \0 V! E- s$ k
5.            fields:['Tmp','Tim']
   
6.         });
   
7.         store=Ext.create('Ext.data.Store',{
   - m0 I% G, P# R- G3 u
8.           model:'User',
   
9.           autoLoad:true,
   
10.           proxy:{
    , S, t" @9 a5 V& c, u
11.             type:'ajax',
    & p4 I4 ?9 ?, K! P
12.             url: 'http://127.0.0.1:8080/ServiceRelease/text/?token=hu/v7ky8RTzYlYJrNZGUr+7jhP8Tl0md',
    
13.            reader:{
    
14.                root:'data'
    1 m$ h6 @' l7 M( O
15.             }
    1 y, x* V* B  ]
16.           }
    $ U' i' Q( J$ r) ~+ [5 K
17.         });
    
18.         
    
19. var b1 = Ext.create("Ext.Window",{
    
20.         width:600,
    
21.         height:500,
    
22.         title:'芯片内部温度图',
    % y! y) ~1 _7 B2 ?% U9 f
23.         shadow:false,
    
24.         maximizable:true,
    7 N  o( X; n8 ?2 b- T. k& \
25.         layout:'fit',
    # r  E; l2 u4 b; f' Z
26.         items:[{
    
27.                 xtype:'chart',
    & s1 n4 m+ h: p+ r- p/ Y2 M
28.                 style:'background:#fff',//控制背景颜色
    
29.                 animate :true,//运行动画
    ' L7 H7 U& x, M8 b8 u% y
30.                 shadow : true,
      l# C/ r+ Q' g/ T
31.                 theme:"Category1",//皮肤
    
32.                 store:store,
    
33.         axes:[{
    8 q/ ^2 f! h/ A6 U
34.                 type:'Numeric',
    
35.                 position:'left',//放置到左边
    
36.                 dashSize:5,//引导线的宽度设置
    9 P2 }7 a; V& ^! a2 z% k) Y* u
37.                 title:'温度曲线(TM)',
    7 h  C* ]' l7 P+ e; h
38.                 fields:['Tmp'],//显示的数据索引
    
39.                 majorTickSteps:5,
    
40.                 minorTickSteps:6,
    ) x& L1 B8 E. g1 y3 j  J- l4 \& K
41.                 grid:{
    / A) s* ^0 y% S% q+ v: W. ~# I
42.                         odd:{//奇数行
    ( y3 G$ ?: k/ ]1 `- [
43.                                 opacity:1,//不透明
    
44.                                 'stroke-width':0.5//表格线宽
    
45.                         },
    
46.                         even:{//偶数行
    
47.                                 opacity:1,//不透明
    
48.                                 stroke:'#DDD',
    % M0 U3 M: `. U8 k3 h8 F% ?( C" y
49.                                 'stroke-width':0.5//表格线宽
    3 |  m7 {; ?0 U6 h. S
50.                         }
    
51.                 }
    
52.         },{
    
53.                 type:'Category',
    9 V7 q: C" K0 w9 F, t6 D
54.                 position:'bottom',
    4 ]( Y$ X  P, M4 M' g0 Z
55.                 fields:['Tim'],
    
56.                 title:'时间',
    
57.                 grid:true
    
58.         }],//轴
    
59.         series:[{
    1 R, `  D* B) ?) H, i' T
60.                 type:'line',
    
61.                 axis:'left',
    
62.                        xField: 'Tim',
    ' n- _7 ~% R$ r0 V
63.                 yField: 'Tmp',
    1 O# T& Z  |9 {. R
64.                 highlight:true,
      v3 A  w( \, O' i2 h, B- _- w
65.                 tips:{
    + n$ W. W9 J0 q3 f
66.                           trackMouse: true,
    + I# G; j% v/ |! c2 \  R
67.                           width: 240,
    
68.                           height: 28,
    
69.                           renderer: function(storeItem, item) {
    ; f) y; k8 g, T- R
70.                             this.setTitle('在'+storeItem.get('Tim') + '温度是： ' +
    + A2 E& o" _. j! B( B
71.                             storeItem.get('Tmp') + '摄氏度');
    . r8 d$ j* p8 M' x
72.                           }
    - [, s; P2 d- m4 h6 S) Q( i5 T
73.                 }
    ' W# s/ G0 H0 ^  ]2 E
74.         }]//序列
    ) o3 A( O: ^1 r* [' g( X
75.         }]
    6 H2 m. d5 S' E- ~! n8 Q) o) H
76. }).show();      
    # P) e8 }6 k9 n
77.         
    
78.      var task = {
    
79.                             run: function(){store.reload();
    
80.                             },
    
81.                             interval: 1000 //1 second
    
82.                         };
    
83.                 runner.start(task);
    , |" Y; E% ?+ D5 Q, W
84.         
    : h% r% N& E* y2 G" q
85.     });

复制代码