<?xml version="1.0">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>adk-wiki-graph(hourly)</title>

<script language="javascript" type="text/javascript">

var ctx;
var bool_first = true;
var canvases=new Array;
var contexts=new Array;
var images;
var xList;
var yList;
var imagesPointer;
var pictIndex = 0;
var logInterval = 10;

var tabLinks = new Array();
var contentDivs = new Array();

var debugFlag = true;

window.addEventListener("load", initial, false);
var tempArray=new Array;
tempArray['p']=0;
tempArray['max']=60;
tempArray['x-label']='';
var lightArray=new Array;
lightArray['p']=0;
lightArray['max']=60;
lightArray['x-label']='';
var pirArray=new Array;
pirArray['p']=0;
pirArray['max']=60;
pirArray['x-label']='';
var airPolArray=new Array;
airPolArray['p']=0;
airPolArray['max']=60;
airPolArray['x-label']='';
function initial() {
   document.getElementById('message').textContent = "initial";

   canvases['tempGraph']=document.getElementById('tempGraph'); 
   canvases['lightGraph']=document.getElementById('lightGraph');
   canvases['pirGraph']=document.getElementById('pirGraph');
   canvases['airPolGraph']=document.getElementById('airPolGraph');

   contexts['tempGraph']=canvases['tempGraph'].getContext('2d');
   contexts['lightGraph']=canvases['lightGraph'].getContext('2d');
   contexts['pirGraph']=canvases['pirGraph'].getContext('2d');
   contexts['airPolGraph']=canvases['airPolGraph'].getContext('2d');

   if (document.referrer.length !=0 ){
     var  myRef = document.referrer;
     if ( myRef.indexOf( "http://www.google.co.jp" ) == 0 ){
//         document.write( 
//              "Google検索からお越しですね！ ありがとうございます！" );
      }
      else 
      if ( myRef == "http://www.red.oit-net.jp/tatsuya/java/index.htm" ){
//          document.write( 
//             "イヌでもわかるJavaScript講座 目次 から いらっしゃいませ！" );
      }
      else{
//         document.write( myRef + " からお越しですね！");
           document.form1.urlbox.value=myRef;
           phase1(document.form1.urlbox.value)
      }
   }
   else{
//      document.write(
//       "直接このホームページへお越し下さってありがとうございます" );
   }

}
function $(id) {
return document.getElementById(id);
}
function appendMessage(m){
}


var multiGraphColor=new Array;
multiGraphColor[0]='rgb(255, 0, 0)';
multiGraphColor[1]='rgb(  0,255, 0)';
multiGraphColor[2]='rgb(  0,0 ,255)';
multiGraphColor[3]='rgb(255, 255, 0)';
multiGraphColor[4]='rgb(  0,255, 255)';
multiGraphColor[5]='rgb( 255,0,255)';
multiGraphColor[6]='rgb(120,120, 0)';
multiGraphColor[7]='rgb( 90,150, 0)';
multiGraphColor[8]='rgb(230, 20, 0)';
multiGraphColor[9]='rgb(200, 50, 0)';
multiGraphColor[10]='rgb(180, 70, 0)';
multiGraphColor[11]='rgb(150,100, 0)';
multiGraphColor[12]='rgb( 60,180, 0)';
multiGraphColor[13]='rgb( 30,210, 0)';
multiGraphColor[14]='rgb(255, 0, 20)';
multiGraphColor[15]='rgb(230, 20,40)';
multiGraphColor[16]='rgb(200, 50,60)';
multiGraphColor[17]='rgb(180, 70,80)';
multiGraphColor[18]='rgb(150,100,100)';
multiGraphColor[19]='rgb(120,120,120)';
multiGraphColor[20]='rgb( 90,150,140)';
multiGraphColor[21]='rgb( 60,180,160)';
multiGraphColor[22]='rgb( 30,210,180)';


function drawGraph(array,field,area,color) {
   var w=250;
   var h=200;
   var lm=30;
   var rm=30;
   var tm=30;
   var bm=30;
   var canvas = canvases[area];
   var context = contexts[area];
   context.save();
   context.beginPath();
   context.clearRect(0, 0, w+lm+rm, h+tm+bm);
   context.strokeStyle='rgb(0, 0, 0)'  ;
   context.strokeRect(lm, tm, w, h);
   context.lineWidth=1;
   var xvals=new Array;
   var lines;
   if(array['p']<=0) return;
   var mlines=array['lines'];
   var lines=mlines[0];
   var lmaxw=getMax(lines);
   var lmax=5;
   var scale=1;
   for(var i=0;i<10;i++){
      if(lmax>lmaxw) break;
      if(lmaxw>5*scale)  lmax=10*scale;
      if(lmaxw>10*scale) lmax=20*scale;
      if(lmaxw>20*scale) lmax=50*scale;
      scale=scale*10;
   }
   var recs=array[0];
   var minRecs=recs[0];
   var minXVal=getItemFromRecord(array['x-label'],minRecs);
   var maxRecs=recs[recs.length-1];
   var maxXVal=getItemFromRecord(array['x-label'],maxRecs);
   context.strokeText("0",10,h+tm);  
   context.strokeText(""+lmax,10,tm);
   context.strokeStyle='rgb(0,0,0)';
   context.moveTo(lm,h/5+tm);
   context.lineTo(lm+w,h/5+tm);
   context.strokeText(""+(lmax*4/5),10,h/5+tm);
   context.moveTo(lm,h*2/5+tm);
   context.lineTo(lm+w,h*2/5+tm);
   context.strokeText(""+(lmax*3/5),10,h*2/5+tm);
   context.moveTo(lm,h*3/5+tm);
   context.lineTo(lm+w,h*3/5+tm);
   context.strokeText(""+(lmax*2/5),10,h*3/5+tm);
   context.moveTo(lm,h*4/5+tm);
   context.lineTo(lm+w,h*4/5+tm);
   context.strokeText(""+(lmax/5),10,h*4/5+tm);
   context.stroke();
   context.beginPath()
   var xmax= lines.length; // parseInt(xvals[array['p']-1]);
   var xmin= 0; // parseInt(xvals[0]);
   var minxlen=context.measureText(minXVal);
   var maxxlen=context.measureText(maxXVal);
   context.strokeText(minXVal,lm-(minxlen.width)/3,h+tm+10);  
   context.strokeText(maxXVal,lm+w-(maxxlen.width)/3,h+tm+10);   
   context.strokeText(field,lm+w/2,h+tm+bm-5);
   var xwidth=w;
   var yheight=h;
   if(xmax-xmin==0) return;
   context.strokeStyle=color;
   var x0=xwidth*(xmin-xmin)/(xmax-xmin);
   var y0=yheight-yheight*lines[0]/lmax;
   context.moveTo(x0+lm,y0+tm);
   for (var i = 1; i <lines.length; i ++) {
      var x1=xwidth*(i-xmin)/(xmax-xmin);
      var y1=yheight-yheight*(lines[i])/(lmax);
      context.lineTo(x1+lm, y1+tm);
   }
   context.stroke();
   context.restore();
}

function getDataOfLabel(label,array){
   var mlines=new Array;
   var lines=new Array;
   var rec=array[0];
   var p=0;
   for(var j=0;j<rec.length;j++){
        var oneRecord=rec[j];
        var ds=getItemFromRecord(label, oneRecord);
        ds=ds.replace(/[\n\r]/g,"");
        if(ds==""){
//          lines[j]=0;
        }
        else{
          try{
           lines[p]=parseInt(ds);
           p++;
          }
	  catch(e)
	  {
//	    lines[j]=0;
	    alert(e+"...parseFloat("+ds+")");
            continue;
          }
        }
     }
     mlines[0]=lines;
     array['lines']=mlines;
}

function getFloatDataOfLabel(label,array){
   var mlines=new Array;
   var lines=new Array;
   var rec=array[0];
   var p=0;
   for(var j=0;j<rec.length;j++){
        var oneRecord=rec[j];
        var ds=getItemFromRecord(label, oneRecord);
        ds=ds.replace(/[\n\r]/g,"");
        if(ds==""){
//          lines[j]=0;
        }
        else{
          try{
           lines[p]=parseFloat(ds);
           p++;
          }
	  catch(e)
	  {
//	    lines[j]=0;
	    alert(e+"...parseFloat("+ds+")");
            continue;
          }
        }
     }
     mlines[0]=lines;
     array['lines']=mlines;
}

function getItemFromRecord(label, rec){
   var items=rec.split(',');
   for(var j=0;j<items.length;j++){
     var item=items[j];
     var pos=item.indexOf(label+"=");
     if(pos>=0){
       var ds=item.substring((label+"=").length+pos);
       if(ds=="") ds=0;
       return ds;
     }
   }
   return "";
}

function getMax(data){
var max=data[0];
for(var i=1;i<data.length;i++){
if(data[i]>max) max=data[i];
}
return max;
}
function getMin(data){
var min=data[0];
for(var i=1;i<data.length;i++){
if(data[i]<min) min=data[i];
}
return min;
}

function requestNextFrame() {
wSocket.send("get");
}

function onUnload() {
wSocket.close();
}
function onError(){
appendMessage("WebScreenShare : Error.\n");
}
/*
function buttonClicked(btnName){
     if(btnName=="joinButton"){ // Join the Group
        var addr=document.getElementById('rootAddress').value;
        var port=document.getElementById('rootPort').value;
        var sending="action join "+addr+" "+port;
        appendMessage(sending+"\n");        
        wSocket.send(sending);
     }
     else
     if(btnName=="leaveButton"){ // Join the Group
        var sending="action leave group";
        appendMessage(sending+"\n");        
        wSocket.send(sending);
     }
     else 
     if(btnName=="connectButton"){
        var addr=document.getElementById('upAddress').value;
        var port=document.getElementById('upPort').value;
        var sending="action connect "+addr+" "+port;
        appendMessage(sending+"\n");        
        wSocket.send(sending);
     }
     else
     if(btnName=="disConnectButton"){
        var sending="action disConnect";
        appendMessage(sending+"\n");        
        wSocket.send(sending);     
     }
     else
     if(btnName=="listenStartButton"){
     }     
     else
     if(btnName=="send"){
        var cmd=document.getElementById('commandField').value;
        var sending="action send "+cmd;
        appendMessage(sending+"\n");        
        wSocket.send(sending);
     }   
     else
     if(btnName=="myHostListenReStart"){
        var addr=document.getElementById('myHostPort').value;
        var port=document.getElementById('relayWSPort').value;
        var sending="action myHostRestart "+addr+" "+port;
        appendMessage(sending+"\n");        
        wSocket.send(sending);
     }          
     else
     if(btnName=="adminRestartButton"){
        var addr=document.getElementById('adminPPort').value;
        var port=document.getElementById('adminWSPort').value;
        var sending="action adminRestart "+addr+" "+port;
        appendMessage(sending+"\n");        
        wSocket.send(sending);
     }          
     else
     if(btnName=="clientsAssignmentPolicyChanged"){
        var v=document.getElementById('clientsAssignmentPolicy').value;
        var sending="action clientsAssignmentPolicy "+v;
        appendMessage(sending);        
        wSocket.send(sending);
     }          
     else
     if(btnName=="maxWebClientsChanged"){
        var v=document.getElementById('clientsLimit').value;
        var sending="action clientsLimit "+v;
        appendMessage(sending);        
        wSocket.send(sending);
     }   
     else
     if(btnName=="traceLevelCheckChanged"){
        var v="off";
        if(document.getElementById('traceLevelChk').checked)
             v="on";
        var sending="action traceLevelCheck "+v;
        appendMessage(sending);        
        wSocket.send(sending);
     }          
     else
     if(btnName=="traceLevelChanged"){
        var v=document.getElementById('traceLevel').value;
        var sending="action traceLevelx "+v;
        appendMessage(sending);        
        wSocket.send(sending);
     }  
     else
     if(btnName=="logLevelCheckChanged"){
        var v="off";
        if(document.getElementById('logLevelChk').checked)
             v="on";
        var sending="action logLevelCheck "+v;
        appendMessage(sending);        
        wSocket.send(sending);
     }          
     else
     if(btnName=="logLevelChanged"){
        var v=document.getElementById('logLevel').value;
        var sending="action logLevelx "+v;
        appendMessage(sending);        
        wSocket.send(sending);
     } 
     else
     if(btnName=="showPrivateServers"){
        var sending="action showPrivateServers ";
        appendMessage(sending);        
        wSocket.send(sending);
     }    
     else
     if(btnName=="gotoRoot"){
         var addr=document.getElementById('rootAddress').value;
         var port=8880;
         var xurl="http://"+addr+":"+port+"/controller.html";
	  location.href=xurl;
     }        
     else
     if(btnName=="gotoUp"){
         var addr=document.getElementById('upAddress').value;
         var port=8880;
         var xurl="http://"+addr+":"+port+"/controller.html";
	  location.href=xurl;
     }  
     else
     if(btnName=="gotoLeft"){
         var addr=document.getElementById('downLeft').value;
         var addr2=addr.split("/");
         var port=8880;
         var xurl="http://"+addr2[0]+":"+port+"/controller.html";
	  location.href=xurl;
     }  
     else
     if(btnName=="gotoRight"){
         var addr=document.getElementById('downRight').value;
         var addr2=addr.split("/");
         var port=8880;
         var xurl="http://"+addr2[0]+":"+port+"/controller.html";
	  location.href=xurl;
     }       
}
function onChangeFunction(name,value){
    if(name=="myAddressList"){
      var sending="action myAddress "+value;
        appendMessage(sending);
	  wSocket.send(sending);
    }
}
*/

function getDataOf(intext,array,kind,xKind,field){
   if(getNumbers(intext,array,kind)){
      getDataOfLabel(field,array);
      array['x-label']=xKind;
   }
}

function getFloatDataOf(intext,array,kind,xKind,field){
   if(getNumbers(intext,array,kind)){
      getFloatDataOfLabel(field,array);
      array['x-label']=xKind;
   }
}

function getMultiDataOf(intext,marray,kind,field){
    var clog=grep(intext,kind);
    if(clog==null) return false;
    var date=new Date();
    var timeNow=date.getTime();
    clog=timeNow+","+clog;
    var recarray=clog.split(",");
    var ds=getItemFromRecord('id',recarray);
    if(ds=="") return false;
    if(marray['labels']==null) {
    marray['lmax']=0;
    var labels=new Array;
    marray['labels']=labels;
    }
    var labels=marray['labels'];
    for(var i=0;i<marray['lmax'];i++){
    if(ds==labels[i]) break;
    }
    if(i>=marray['lmax']) {
    labels[marray['lmax']]=ds;    
    marray['lmax']++;
    }
    marray['lables']=labels;
    if(marray[ds]==null){
        var array=new Array;
        array['p']=0;
        array['max']=60;
        marray[ds]=array;
	}
    var array=marray[ds];
    if(array['p']>=array['max']){
    for(var i=0;i<array['max'];i++){
    array[i]=array[i+1];
    }
    array['p']--;
    }
    array[array['p']]=recarray;
    array['p']++;
    var data=getFloatDataOfLabel(field,array);
    array['lines']=data;
    return true;
}
function getNumbers(intext,array,kind){
    var clog=grep(intext,kind);
    if(clog==null) return false;    
    var date=new Date();
//    var timeNow=date.getTime();
    var clog2 = clog.replace(/[\n\r]/g,"\n");
    var recarray=clog2.split("\n");
    recarray.length=recarray.length-1;
    if(array['p']>=array['max']){
       for(var i=0;i<array['max'];i++){
           array[i]=array[i+1];
       }
       array['p']--;
    }
    array[array['p']]=recarray;
    array['p']++;
    return true;
 //   var 
}

function getMultiNumbers(intext,array,kind){
    var clog=grep(intext,kind);
    if(clog==null) return false;    
    var date=new Date();
    var timeNow=date.getTime();
    clog=timeNow+","+clog;
    var recarray=clog.split(",");
    if(array['p']>=array['max']){
       for(var i=0;i<array['max'];i++){
          array[i]=array[i+1];
       }
       array['p']--;
    }
    array[array['p']]=recarray;
    array['p']++;
    return true;
 //   var 
}
function grep(intext,matchtext){
   if(intext.indexOf(matchtext)>=0){
      return intext;
   }
   return null;
}

function createhttprequest(){
   var request=null;
   if("XMLHttpRequest" in window){
     request= new XMLHttpRequest();
   }
   else if("ActiveXObject" in window){
     try{
       request=new ActiveXobject("Msxml2.XMLHTTP");
     }catch(e){
       try{
         request=new ActiveXObject("Microsoft.XMLHTTP");
       }catch(e){
     }
   }
  }
  return request;
}

var request;

function requestsource(url){

request=createhttprequest();

request.open("GET",url,true);
request.onreadystatechange=sourceget;
request.send(null);
}

function filter(intext,key){
    var lines = intext.split( '\n' );
    var outText="";
    for ( var i = 0; i < lines.length; i++ ) {
        // 空行は無視する
        var l=grep(lines[i],key);
        if(l!=null){
          outText=outText+l+"\n";
        }
    }
    return outText;
}

function transformAndAddNewItem(intext,inkey,addkey,fx){
    var lines = intext.split( '\n' );
    var outText="";
    var inval=getItemFromRecord(inkey,lines[0]);
    if(inval!=null){
       var newval=fx(inval);
       if( newval!=null){
          outText=lines[0]+","+addkey+"="+newval;
       }
    }
    for ( var i = 1; i < lines.length; i++ ) {
        // 空行は無視する
        var inval=getItemFromRecord(inkey,lines[i]);
        if(inval!=null){
          var newval=fx(inval);
          if( newval!=null){
             outText=outText+"\n"+lines[i]+","+addkey+"="+newval;
          }
        }
    }
    
    return outText;
}

function sourceget(){

var xpage;
if (request.readyState == 4 && request.status == 200){
  xpage=request.responseText;
  var prePosition=xpage.search("<pre>");
  var postPosition=xpage.search("</pre>");
  var ypage=xpage.substring(prePosition,postPosition);
  var dataPosition=ypage.search("result:");
  var dataPage=ypage.substring(dataPosition);
  var work1=dataPage.replace(/\r\n|\r/g, "\n");
/*
    var lines = work1.split( '\n' );
    var outArray = new Array();
    for ( var i = 0; i < lines.length; i++ ) {
        // 空行は無視する
        if ( lines[i].search("a-2")>0) {
           outArray.push( lines[i]+"\n" );
        }
    }
*/
//  document.getElementById('source').value=outArray;
  document.getElementById('source').value=work1;
  phase2();
}
else{

}

}

function sensVal2CentDeg(x){
    return (500.0*x)/1023-50;
}

function phase1(url){
   requestsource(url);
}
function phase2(){
    var text=document.getElementById('source').value;
    var wtext=filter(text,'device=a-2');
    var ntext=transformAndAddNewItem(wtext,'v','cd',sensVal2CentDeg);
    getDataOf(ntext,tempArray,'device=a-2','Date','cd');
    drawGraph(tempArray,'Temprature(c)',  'tempGraph', 'rgb(255,0,0)');
    wtext=filter(text,'device=a-1');
    getDataOf(wtext,lightArray,'device=a-1','Date','v');
    drawGraph(lightArray,'Lux',  'lightGraph', 'rgb(0,255,0)');
    wtext=filter(text,'device=a-0');
    getFloatDataOf(wtext,pirArray,'device=a-0','Date','sdv');
    drawGraph(pirArray, 'Pir',  'pirGraph','rgb(0,0,255)');
    wtext=filter(text,'device=a-3');
    getFloatDataOf(wtext,airPolArray,'device=a-3','Date','v');
    drawGraph(airPolArray, 'AirPol',  'airPolGraph','rgb(255,255,0)');
}

</script>


</head>

<body>
A URL of the adk-wiki-1 collected data (Hourly);
<form name="form1">
<input type="text" name="urlbox" size="40" value="http://www.yama-lab.org/adk-wiki-1/index.php?daily-1-1">
<input type="button" value="Show the graph" onclick="phase1(document.form1.urlbox.value)">
</form>

    <p>Graph Area</p>
    <canvas id="tempGraph" width="350" height="300"></canvas>   
    <canvas id="lightGraph" width="350" height="300"></canvas>   
    <canvas id="pirGraph" width="350" height="300"></canvas>   
    <canvas id="airPolGraph" width="350" height="300"></canvas>   
    <br>
<textarea id="source" name="source" rows="20" cols="100">
source data
</textarea>

<textarea id="message" name="message" rows="20" cols="100">
</textarea>
</body>
</html>