作者 主题: [原创分享]Processing读取JSON数据  (阅读 3333 次)

loneress

  • Newbie
  • *
  • 帖子: 6
[原创分享]Processing读取JSON数据
« 于: 二月 18, 2012, 08:59:16 下午 »


此项目完整流程是:用Arduino+ENC28J60 以GET的方式向IIS服务器提交传感器的数据,webserver用的ASP开发,webserver把提交的数据存入SQL Server数据库,再用ASP生成JSON数组格式的数据,用Processing读取显示,附图。不过有点奇怪的是,导出html5格式在浏览器上面运行不到。


Processing的代码:



import org.json.*;

String request = "http://XXXXXXXXXXXXXXXXXXXXX/sqljson.asp";

String[] JSONST = new String[72];
float[][] JSONINT;

int jsoncount;
int a = 0;    int T1;    int T2;  int i=0;
long nowtime,time1;

PImage bg;

void getjsondate(){

  try {
   

    JSONArray seaData = new JSONArray(join(loadStrings(request),""));
   
    jsoncount = seaData.length();
   
    for (int i = 0; i < seaData.length(); i++) {
       
        JSONObject entry = seaData.getJSONObject(i);
        JSONST = entry.getString("ID");
        JSONINT[0] = (float)entry.getDouble("T1");
        JSONINT[1] = (float)entry.getDouble("S1");
        JSONINT[2] = (float)entry.getDouble("R1");
       
    }
   
  }

  catch (JSONException e) {
    println("Error: " + e.toString());
  };

}


void setup() {
 
  size(750, 450);
 
  bg = loadImage("bar.jpg");
  textSize(10);
  background(bg);
  JSONINT = new float[3][72];

  time1=-10000;
 
}


void draw() {

    nowtime=millis();
   
    if (nowtime>(time1+10000)){
       time1=nowtime;
       getjsondate();//取JSON数据至数组
       i=0;
       background(bg);
       //绘制曲线图
       fill(255,125,0);//填充颜色
       fill(0);
       stroke(255,80,0);//线条颜色
       strokeWeight(3);//线条粗度
       line(20,0,20,430);//X
       line(20,430,800,430);//Y
    }
 
    if (i < jsoncount) {
     
        if ( i == 0 ) a = 0; else a = i - 1;
       
        stroke(2,80,50);//线条颜色
        strokeWeight(1);//线条粗度
        T1=24; T2=35;
        line(20+a*9, height-(T1*3.5), 20+i*9, height-(T1*3.5));
        line(20+a*9, height-(T2*3.5), 20+i*9, height-(T2*3.5));
        strokeWeight(2);//线条粗度
        line(20+a*9, height-(JSONINT[0][a]*3.5), 20+i*9, height-(JSONINT[0]*3.5));
       
               
        stroke(2,80,200);//线条颜色
        strokeWeight(1);//线条粗度
        T1=92; T2=88;
        line(20+a*9, height-(T1+200), 20+i*9, height-(T1+200));
        line(20+a*9, height-(T2+200), 20+i*9, height-(T2+200));
        strokeWeight(2);//线条粗度
        line(20+a*9, height-(JSONINT[1][a]+200), 20+i*9, height-(JSONINT[1]+200));
       
       
        stroke(200,80,50);//线条颜色
        strokeWeight(1);//线条粗度
        T1=40; T2=30;
        line(20+a*9, height-(T1+330), 20+i*9, height-(T1+330));
        line(20+a*9, height-(T2+330), 20+i*9, height-(T2+330));
        strokeWeight(2);//线条粗度
        line(20+a*9, height-(JSONINT[2][a]+330), 20+i*9, height-(JSONINT[2]+330));
       
       
        if (i==70 || i==1 || i==35 ){           
          text(JSONINT[0], 20+i*9, height-(JSONINT[0]*3.5+3));
          text(JSONINT[1], 20+i*9, height-(JSONINT[1]+200+3));
          text(JSONINT[2], 20+i*9, height-(JSONINT[2]+330+3));
          text(JSONST, 20+i*9, height-3);
        }

   
    }
   
    if (i < 100)  i++;

}

vinjn

  • SuperManager
  • Hero Member
  • *****
  • 帖子: 586
Re: [原创分享]Processing读取JSON数据
« 回复 #1 于: 二月 18, 2012, 10:44:08 下午 »
纯javascript页面的loadStrings只能访问同一个域名下的request
要使用jquery
参考此帖
http://www.autumn8.co.za/posts/loading-cross-domain-xml-into-processing-js/

loneress

  • Newbie
  • *
  • 帖子: 6
Re: [原创分享]Processing读取JSON数据
« 回复 #2 于: 二月 19, 2012, 05:25:30 下午 »
纯javascript页面的loadStrings只能访问同一个域名下的request
要使用jquery
参考此帖
http://www.autumn8.co.za/posts/loading-cross-domain-xml-into-processing-js/

非常感谢,我慢慢看一看。

Tags: