Untitled

<?php
/*** mysql hostname ***/
$hostname = 'localhost';

/*** mysql username ***/
$username = 'root';

/*** mysql password ***/
$password = 'root';

try {
    $dbh = new PDO("mysql:host=$hostname;dbname=TestDB", $username, $password);
    /*** echo a message saying we have connected ***/
    //echo 'Connected to database<p>';

    /*** The SQL SELECT statement ***/
    $sql = "SELECT pressure FROM SensorData";

    /*** fetch into an PDOStatement object ***/
    $stmt = $dbh->query($sql);

    /*** echo number of columns ***/
    $result = $stmt->fetchAll(PDO::FETCH_COLUMN, 0);

    /*** loop over the object directly ***/


    /*** close the database connection ***/
    $dbh = null;
}

catch(PDOException $e)
    {
    echo $e->getMessage();
    }
?>


<!DOCTYPE HTML>
<html>
  <head>
  <audio id="audOne"  preload="auto">
			<source src="audio/one.mp3"></source>
			<!--<source src="audio/one.ogg"></source>-->
			<source src="audio/one.wav"></source>
			Sorry, your browser does not support HTML5 audio!
	</audio>


	<audio id="audTwo"  preload="auto">
			<source src="audio/two.mp3"></source>
			<!--<source src="audio/two.ogg"></source>-->
			<source src="audio/two.wav"></source>
			Sorry, your browser does not support HTML5 audio!
	</audio>

	<audio id="audThree" preload="auto">
			<source src="audio/three.mp3"></source>
			<!--<source src="audio/three.ogg"></source>-->
			<source src="audio/three.wav"></source>
			Sorry, your browser does not support HTML5 audio!
	</audio>

	<audio id="audFour" preload="auto">
			<source src="audio/four.mp3"></source>
			<!--<source src="audio/four.ogg"></source>-->
			<source src="audio/four.wav"></source>
			Sorry, your browser does not support HTML5 audio!
	</audio>

	<audio id="audFive" preload="auto">
			<source src="audio/five.mp3"></source>
			<!--<source src="audio/five.ogg"></source>-->
			<source src="audio/five.wav"></source>
			Sorry, your browser does not support HTML5 audio!
	</audio>

	<audio id="audSix" preload="auto">
			<source src="audio/six.mp3"></source>
			<!--<source src="audio/six.ogg"></source>-->
			<source src="audio/six.wav"></source>
			Sorry, your browser does not support HTML5 audio!
	</audio>

	<audio id="audSeven" preload="auto">
			<source src="audio/seven.mp3"></source>
			<!--<source src="audio/seven.ogg"></source>-->
			<source src="audio/seven.wav"></source>
			Your browser isn't invited for super fun time.
	</audio>

	<audio id="audEight" preload="auto">
			<source src="audio/eight.mp3"></source>
			<!--<source src="audio/eight.ogg"></source>-->
			<source src="audio/eight.wav"></source>
			Your browser isn't invited for super fun time.
	</audio>

	<audio id="audNine" preload="auto">
			<source src="audio/nine.mp3"></source>
			<!--<source src="audio/nine.ogg"></source>-->
			<source src="audio/nine.wav"></source>
			Your browser isn't invited for super fun time.
	</audio>

	<audio id="audTen" preload="auto">
			<source src="audio/ten.mp3"></source>
			<!--<source src="audio/ten.ogg"></source>-->
			<source src="audio/ten.wav"></source>
			Your browser isn't invited for super fun time.
	</audio>


    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      canvas {
        border: 1px solid #9C9898;
        background:gray;
        background-image:url("backs/grey2.jpeg");
      }
    </style>

    </head>
    <script src="libraries/kinetic.js"></script>
    <script>
var dataArray = new Array();
	dataArray = <?php echo json_encode($result);?>;
	document.write(" this is data array " + dataArray);

var totalValues = ((dataArray[0]*1000)+(dataArray[1]*1000)+(dataArray[3]*1000)+(dataArray[4]*1000)+(dataArray[5]*1000)+(dataArray[6]*1000)+(dataArray[7]*1000)+(dataArray[8]*1000))/1000;
var average = totalValues/9;
document.write("<br /> average : " + average);

var audioArray = ['audOne', 'audTwo', 'audThree', 'audFour', 'audFive', 'audSix', 'audSeven', 'audEight', 'audNine', 'audTen'];
var randomAudio = [Math.floor(audioArray.length * Math.random())];
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


 function loadImages(sources, callback) {

        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        // get num of sources
        for(var src in sources) {
          numImages++;
        }
        for(var src in sources) {
          images[src] = new Image();
          images[src].onload = function() {
            if(++loadedImages >= numImages) {
              callback(images);
            }
          };
          images[src].src = sources[src];
        }
      }


   function draw(images) {

        var stage = new Kinetic.Stage({
          container: "container",
          //width: window.innerWidth,
          //height: window.innerHeight,
          width: 960,
          height: 640,
          fill: "blue"
        });

   }

var layer = new Kinetic.Layer();

		var Xposition = new Array();
		var Yposition = new Array();

		Xposition[0]=stage.getWidth()/10;
		Xposition[1]=stage.getWidth()/5;
		Xposition[2]=stage.getWidth()/10*3;
		Xposition[3]=stage.getWidth()/5*2;
		Xposition[4]=stage.getWidth()/2;
		Xposition[5]=stage.getWidth()/5*3;
		Xposition[6]=stage.getWidth()/10*7;
		Xposition[7]=stage.getWidth()/5*4;
		Xposition[8]=stage.getWidth()/10*9;
		Xposition[9]=stage.getWidth();

		Yposition[0]=stage.getHeight()/10;
		Yposition[1]=stage.getHeight()/5;
		Yposition[2]=stage.getHeight()/10*3;
		Yposition[3]=stage.getHeight()/5*2;
		Yposition[4]=stage.getHeight()/2;
		Yposition[5]=stage.getHeight()/5*3;
		Yposition[6]=stage.getHeight()/10*7;
		Yposition[7]=stage.getHeight()/5*4;
		Yposition[8]=stage.getHeight()/10*9;
		Yposition[9]=stage.getHeight();


		function createCloud(x,y,radius){
    	var circle = new Kinetic.Circle({
          x: x,
          y: y,
          radius: radius,
          opacity:0.5,
          fill: "#00d2ff",
          stroke: "transparent",
          strokeWidth: 4,
          //draggable: true
        });
        return circle;
        }

        function createRing(x,y,radius){
    	var circle = new Kinetic.Circle({
          x: x,
          y: y,
          radius: radius,
          opacity:0.5,
          fill: "transparent",
          stroke: "white",
          strokeWidth: 2,
          //draggable: true
        });
        return circle;
        }

        function createAniOut(ring,size){
          var periodOut = 1000;
          var size = size;
          var animOut = new Kinetic.Animation({
          func: function(frame) {
            var scale=Math.sin(frame.time*2/periodOut)*size;
            ring.setScale(scale);

          },
          node: layer
        });
  		return animOut;
  		}

		function createAniIn(ring){
		  var periodIn = 1000;
          var animIn = new Kinetic.Animation({
          func: function(frame) {
            var scale=periodIn/frame.time*2
	        ring.setScale(scale);
          },
          node: layer
        });
        return animIn;
  		}

        var cloud = new Array();   //array of dots
        var ring = new Array();


        for(i=0; i<11; i++){
    		var posX=Math.floor(Math.random()*9);
    		var posY=Math.floor(Math.random()*9);
            cloud[i]=createCloud(Xposition[posX], Yposition[posY], 10);
            ring[i]=createRing(Xposition[posX], Yposition[posY], 10);
            }


        for(i=0; i<ring.length; i++){
        	layer.add(ring[i]);
			}
        for(i=0; i<cloud.length; i++){
            layer.add(cloud[i]);
			}

		stage.add(layer);

		var animIn=new Array;
		var animOut=new Array;

		for(k=0; k<cloud.length; k++){
			animOut[k]=createAniOut(ring[k], average);
			//choose sounds here after putting them into new array
		}


		cloud[0].on("mouseover touchstart touchmove", function() {
	        animOut[0].start();
	        layer.draw();
        	});

        cloud[0].on("mouseout touchend", function() {
	        animOut[0].stop();
	        layer.draw();
        	});


		cloud[1].on("mouseover touchstart touchmove", function() {
	        animOut[1].start();
	        layer.draw();
        	});

        cloud[1].on("mouseout touchend", function() {
	        animOut[1].stop();
	        layer.draw();
        	});


		cloud[2].on("mouseover touchstart touchmove", function() {
	        animOut[2].start();
	        layer.draw();
        	});

        cloud[2].on("mouseout touchend", function() {
	        animOut[2].stop();
	        layer.draw();
        	});


		cloud[3].on("mouseover touchstart touchmove", function() {
	        animOut[3].start();
	        layer.draw();
        	});

        cloud[3].on("mouseout touchend", function() {
	        animOut[3].stop();
	        layer.draw();
        	});


		cloud[4].on("mouseover touchstart touchmove", function() {
	        animOut[4].start();
	        layer.draw();
        	});

        cloud[4].on("mouseout touchend", function() {
	        animOut[4].stop();
	        layer.draw();
        	});


		cloud[5].on("mouseover touchstart touchmove", function() {
	        animOut[5].start();
	        layer.draw();
        	});

        cloud[5].on("mouseout touchend", function() {
	        animOut[5].stop();
	        layer.draw();
        	});


		cloud[6].on("mouseover touchstart touchmove", function() {
	        animOut[6].start();
	        layer.draw();
        	});

        cloud[6].on("mouseout touchend", function() {
	        animOut[6].stop();
	        layer.draw();
        	});


		cloud[7].on("mouseover touchstart touchmove", function() {
	        animOut[7].start();
	        layer.draw();
        	});

        cloud[7].on("mouseout touchend", function() {
	        animOut[7].stop();
	        layer.draw();
        	});

		cloud[8].on("mouseover touchstart touchmove", function() {
	        animOut[8].start();
	        layer.draw();
        	});

        cloud[8].on("mouseout touchend", function() {
	        animOut[8].stop();
	        layer.draw();
        	});

		cloud[9].on("mouseover touchstart touchmove", function() {
	        animOut[9].start();
	        layer.draw();
        	});

        cloud[9].on("mouseout touchend", function() {
	        animOut[9].stop();
	        layer.draw();
        	});


        ring[0].on("mouseover touchstart touchmove", function() {
	        audOne.play();
	        });

        ring[1].on("mouseover touchstart touchmove", function() {
	        audTwo.play();
	        });

        ring[2].on("mouseover touchstart touchmove", function() {
	        audThree.play();
	        });

        ring[3].on("mouseover touchstart touchmove", function() {
	        audFour.play();
	        });

        ring[4].on("mouseover touchstart touchmove", function() {
	        audFive.play();
	        });

        ring[5].on("mouseover touchstart touchmove", function() {
	        audSix.play();
	        });

        ring[6].on("mouseover touchstart touchmove", function() {
	        audSeven.play();
	        });

        ring[7].on("mouseover touchstart touchmove", function() {
	        audEight.play();
	        });

        ring[8].on("mouseover touchstart touchmove", function() {
	        audNine.play();
	        });

window.onload = function() {

 	   var sources = {
          one: "backs/1.jpeg",
          two: "backs/2.jpeg",
          };


	loadImages(sources, function(images) {
          draw(images);
     });

};

    </script>

  <body onmousedown="return false;">
    <div id="container"></div>
  </body>
</html>