<!--
	Smart Data Platform - Reference Implementation
	
	This page shows how to receive and visualize the data stream from
	a sensor in real-time.
	
	In particular data is received using Socket.IO, which provides an
	abstraction layer to Websocket API.
	Data visualizzation is based on D3js library (<http://d3js.org).
-->

<!DOCTYPE html>

<html>

		
<head>		
    
    <!-- javascript for provides realtime communication between your node.js server and clients-->
    <script src="stomp.js" charset="utf-8"></script>
    <!-- CSS file -->
    <link rel="stylesheet" href="style.css" type="text/css">    
    <!-- javascript D3js for speedometer-->
    <script type="text/javascript" src="http://iop.io/js/vendor/d3.v3.min.js"></script>
    <script type="text/javascript" src="http://iop.io/js/vendor/polymer/PointerEvents/pointerevents.js"></script>
    <script type="text/javascript" src="http://iop.io/js/vendor/polymer/PointerGestures/pointergestures.js"></script>
    <script type="text/javascript" src="http://iop.io/js/iopctrl.js"></script>
    <title>Smart Data Platform - Reference Implementation</title>

</head>
<body>
		<div style="background-color:#fff;width:100%;">		 
		<div>
		<br>
		<span style="border:3px solid #0080C0;  color:#0080C0;  padding:5px; font-size:40px; font-style:italic; font-weight:bold; width:89%;">
		Smart Data Platform - Reference Implementation
		</span>
		<br><br>
		</div>
		<span id="connect"> </span>
		<h1>Visualisation of temperature</h1>
		<pre>
		<div style="background-color:#000;width:81%;">
		<font color=#0080C0 size=4>
 <span id="message5"> </span>
 <span id="message4"> </span>
 <span id="message3"> </span>
 <span id="message2"> </span>
 <span id="message1"> </span>
		</font>
		</div>
		</pre>	
	<!--	Inserted at field "message" the json received from the client. Used only for debug -->
	<!--    <span id="message"> </span>  -->
		<div  style="border:0px solid blue" id="speedometer"/>	    
</div>
    <script>
    
		 var  arrayTemp = new Array();
		 var  arrayTime = new Array();
		 var _length = 0;
	// function that create and manage the window and server connection
	window.onload = function () {
		// IP address of server
		var ip = location.host;
		ip="localhost";
		// connect to server
		var client = Stomp.client("ws://" +ip + ":61614");
		d3.select("#connect").html("Status: Disconnected");
		
		client.connect("guest", "password", 
		    function(frame) {
		      d3.select("#connect").html("Status: Connected");
		      client.subscribe("/topic/output.sandbox.*", function(message) {
			// Inserted at field "message" the json received from the client. Used only for debug
			// d3.select("#message").html(message);
			// create a json from messagge received
			var json = message.body;
			obj = JSON.parse(json);
			
			// parser the json for print the value and time
			// check if the value is into the range of speedometer
			if(obj.values[0].components.c0 <= 50 && obj.values[0].components.c0 >= -50){ 
			  segDisplay.value(obj.values[0].components.c0);// setup the value of display
			  gauge.value(obj.values[0].components.c0);	  // setup the value of speedometer

			    
			    if(_length < 5){//fill the array
				_length = _length +1;
				arrayTemp.push(obj.values[0].components.c0);
				var dateS = obj.values[0].time.split("Z");
				var date = new Date(dateS[0]);
				arrayTime.push(date.toString());
				printArray();
			    }else{//manage the dinamic array
				arrayTemp = arrayTemp.slice(1,5);
				arrayTime = arrayTime.slice(1,5);
				arrayTemp.push(obj.values[0].components.c0);
				var dateS = obj.values[0].time.split("Z");
				var date = new Date(dateS[0]);				
				arrayTime.push(date.toString());
				printArray();
			    }
			  }		    
		       });
		    },
		    function() {
			    //Error callback
			    d3.select("#connect").html("Status: Error");
		    }
		 );
	};		
	
	// print the array in the pre
	function printArray(){
			    d3.select("#message5").html(" TEMPERATURE " + arrayTemp[0].valueOf() + " TIME " + arrayTime[0].valueOf()+ " ");
			    d3.select("#message4").html(" TEMPERATURE " + arrayTemp[1].valueOf() + " TIME " + arrayTime[1].valueOf()+ " ");
			    d3.select("#message3").html(" TEMPERATURE " + arrayTemp[2].valueOf() + " TIME " + arrayTime[2].valueOf()+ " ");
			    d3.select("#message2").html(" TEMPERATURE " + arrayTemp[3].valueOf() + " TIME " + arrayTime[3].valueOf()+ " ");
			    d3.select("#message1").html(" TEMPERATURE " + arrayTemp[4].valueOf() + " TIME " + arrayTime[4].valueOf()+ " ");
	}
	
		// init speedometer setup
		// create speedometer
		var svg = d3.select("#speedometer")
                .append("svg:svg")
                .attr("width", 800)
                .attr("height", 400);

		// create speedometer
		var gauge = iopctrl.arcslider()
                .radius(180)
                .events(false)
                .indicator(iopctrl.defaultGaugeIndicator);
		
		// add components at speedometer
		gauge.axis().orient("in") // position number into gauge
                .normalize(true)
                .ticks(10) // set the number how integer
                .tickSubdivide(9) // interval of decimals
                .tickSize(10, 8, 10) // subdivides the gauge
                .tickPadding(8) // padding  
                .scale(d3.scale.linear()
                        .domain([-50, 50])//range of speedometer
                        .range([-3*Math.PI/4, 3*Math.PI/4])); //create the circoference

                // create a numeric display
		var segDisplay = iopctrl.segdisplay()
                .width(180)
                .digitCount(5)
                .negative(true)
                .decimals(2);
		
		// picutre the display
		svg.append("g")
                .attr("class", "segdisplay")
                .attr("transform", "translate(130, 350)")
                .call(segDisplay);

                // attach the speedometer at the window
		svg.append("g")
                .attr("class", "gauge")
                .call(gauge);	
        // end speedometer setup
	</script>

	</body>
</html>
