a4mcar/web_interface/utilizationGraph.php - app4mc/org.eclipse.app4mc.examples - Gitiles

 <!--
  Script Description:
  	A4MCAR Web Interface, Utilization Graphics Page

  Author:
  	M. Ozcelikors <mozcelikors@gmail.com>, Fachhochschule Dortmund

  Disclaimer:
  	Copyright (c) 2017 Eclipse Foundation and FH Dortmund.
  	All rights reserved. This program and the accompanying materials are made available under the
  	terms of the Eclipse Public License v1.0 which accompanies this distribution, and is available at
  	http://www.eclipse.org/legal/epl-v10.html
 -->
 <html>
 <head>
 <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="jqplot_dist/excanvas.js"></script><![endif]-->
 <script language="javascript" type="text/javascript" src="jqplot_dist/jquery.min.js"></script>
 <script language="javascript" type="text/javascript" src="jqplot_dist/jquery.jqplot.min.js"></script>
 <script language="javascript" type="text/javascript" src="jqplot_dist/plugins/jqplot.barRenderer.min.js"></script>
 <script language="javascript" type="text/javascript" src="jqplot_dist/plugins/jqplot.categoryAxisRenderer.js"></script>
 <link rel="stylesheet" type="text/css" href="jqplot_dist/jquery.jqplot.css" />
 <style type="text/css">
 <!--
    #distSensorReading {
 	font-family: Arial, Verdana, 'Trebuchet MS';
 	display:block;
 	font-weight:bold;
    }
    #dist {
 	color: #666666;
 	font-size:25px;
    }
    #distVal {
 	color: #009933;
 	font-size:30px;
    }
 -->
 </style>
 <script type="text/javascript">
 	//XMOS Utilization global variables
 	var xmos_tile0;
 	var xmos_tile1;
 	var avg_tile0;
 	var avg_tile1;

 	//Raspberry Pi Utilization global variables
 	var averageCore1 ;
 	var averageCore2 ;
 	var averageCore3 ;
 	var averageCore4 ;
 	var averageSensorReading ;

 	$(document).ready(function(){
 		function loadRPIUtilizationDataFile()
 		{
 			jQuery.get('core_usage_rpi.inc', function(data) {
 				var myString = data;
 				var myArray = myString.split(',');
 				averageCore1 = (Math.round(myArray[0])+Math.round(myArray[5])+Math.round(myArray[10])+Math.round(myArray[15]))/4;
 				averageCore2 = (Math.round(myArray[1])+Math.round(myArray[6])+Math.round(myArray[11])+Math.round(myArray[16]))/4;
 				averageCore3 = (Math.round(myArray[2])+Math.round(myArray[7])+Math.round(myArray[12])+Math.round(myArray[17]))/4;
 				averageCore4 = (Math.round(myArray[3])+Math.round(myArray[8])+Math.round(myArray[13])+Math.round(myArray[18]))/4;
 				averageSensorReading = Math.round((averageCore1+averageCore2+averageCore3+averageCore4)/4);
 				setTimeout(loadRPIUtilizationDataFile,1000);
 			});
 		}
 		function loadXMOSUtilizationDataFile()
 		{
 			jQuery.get('core_usage_xmos.inc', function(data) {
 				var myString2 = data;
 				var myArray2 = myString2.split(',');
 				xmos_tile0 = [parseInt(myArray2[0],10),parseInt(myArray2[1],10),parseInt(myArray2[2],10),parseInt(myArray2[3],10),parseInt(myArray2[4],10),parseInt(myArray2[5],10),parseInt(myArray2[6],10),parseInt(myArray2[7],10)];
 				xmos_tile1 = [parseInt(myArray2[8],10),parseInt(myArray2[9],10),parseInt(myArray2[10],10),parseInt(myArray2[11],10),parseInt(myArray2[12],10),parseInt(myArray2[13],10),parseInt(myArray2[14],10),parseInt(myArray2[15],10)];
 				var avg_tilex0 = Math.round((parseInt(myArray2[0],10)+parseInt(myArray2[1],10)+parseInt(myArray2[2],10)+parseInt(myArray2[3],10)+parseInt(myArray2[4],10)+parseInt(myArray2[5],10)+parseInt(myArray2[6],10)+parseInt(myArray2[7],10))/8);
 				var avg_tilex1 = Math.round((parseInt(myArray2[8],10)+parseInt(myArray2[9],10)+parseInt(myArray2[10],10)+parseInt(myArray2[11],10)+parseInt(myArray2[12],10)+parseInt(myArray2[13],10)+parseInt(myArray2[14],10)+parseInt(myArray2[15],10))/8);
 				if (typeof avg_tilex0 !='undefined' && typeof avg_tilex1 != 'undefined' && avg_tilex0>=0 && avg_tilex0<=100 && avg_tilex1>=0 && avg_tilex1<=100){
 					avg_tile0 = avg_tilex0;
 					avg_tile1 = avg_tilex1;
 				}
 				else
 				{
 					avg_tile0 = 0;
 					avg_tile1 = 0;
 				}
 				setTimeout(loadXMOSUtilizationDataFile,1000);
 			});
 		}
 		function drawGraph()
 		{
 			$('#distSensorReading').html("");
 			$('#distSensorReading').prepend("<br /><br /><span style=\"font-size:20px; color:#CCC;\">Avg. Util (xCORE Tile1)</span><br /><span style=\" font-size:40px; color:#00CCFF;\">"+avg_tile1 +"&nbsp;%</span>");
 			$('#distSensorReading').prepend("<br /><br /><span style=\"font-size:20px; color:#CCC;\">Avg. Util (xCORE Tile0)</span><br /><span style=\" font-size:40px; color:#00CCFF;\">"+avg_tile0+"&nbsp;%</span>");
 			$('#distSensorReading').prepend("<br /><br /><span style=\"font-size:20px; color:#CCC;\">Avg. Util (RaspberryPi)</span><br /><span style=\" font-size:40px; color:#00CCFF;\">"+averageSensorReading+"&nbsp;%</span>");

 			$.jqplot.config.enablePlugins = true;
 			var raspberry = [averageCore1, averageCore2, averageCore3, averageCore4, 0, 0, 0, 0];
 			var ticks = ['Core0', 'Core1', 'Core2', 'Core3', 'Core4', 'Core5', 'Core6', 'Core7'];
 			var labels = ['Raspberry Pi', 'xCORE Tile 0', 'xCORE Tile 1'];
 			plot1 = $.jqplot('chartdiv', [raspberry, xmos_tile0 ,xmos_tile1], {
 				// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
 				//animate: !$.jqplot.use_excanvas,
 				seriesDefaults:{
 					renderer:$.jqplot.BarRenderer,
 					pointLabels: { show: true }
 				},
 				legend: {show:true, labels:labels},
 				axes: {
 					xaxis: {
 						renderer: $.jqplot.CategoryAxisRenderer,
 						ticks: ticks
 					}
 				},
 				title : 'System Core Utilization',
 				highlighter: { show: false },
 				series:[{color:'#0099CC'}, {color:'lightgreen'}, {color:'orange'}]
 			});
 			plot1.redraw();
 			setTimeout(drawGraph,1000);
 		}
 		setTimeout(loadRPIUtilizationDataFile, 10);
 		setTimeout(loadXMOSUtilizationDataFile, 10);
 		setTimeout(drawGraph, 10);
 	});
 </script>
 </head>
 <body>
 <div id="chartdiv" style="height:400px;width:650px; color:white; float:left; margin-right:10px;"></div>
 <div id="distSensorReading" style="float:right; height:400px; width:220px; text-align:center;">

 </div>
 </body>
 </html>
	<!--
	Script Description:
	A4MCAR Web Interface, Utilization Graphics Page

	Author:
	M. Ozcelikors <mozcelikors@gmail.com>, Fachhochschule Dortmund

	Disclaimer:
	Copyright (c) 2017 Eclipse Foundation and FH Dortmund.
	All rights reserved. This program and the accompanying materials are made available under the
	terms of the Eclipse Public License v1.0 which accompanies this distribution, and is available at
	http://www.eclipse.org/legal/epl-v10.html
	-->
	<html>
	<head>
	<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="jqplot_dist/excanvas.js"></script><![endif]-->
	<script language="javascript" type="text/javascript" src="jqplot_dist/jquery.min.js"></script>
	<script language="javascript" type="text/javascript" src="jqplot_dist/jquery.jqplot.min.js"></script>
	<script language="javascript" type="text/javascript" src="jqplot_dist/plugins/jqplot.barRenderer.min.js"></script>
	<script language="javascript" type="text/javascript" src="jqplot_dist/plugins/jqplot.categoryAxisRenderer.js"></script>
	<link rel="stylesheet" type="text/css" href="jqplot_dist/jquery.jqplot.css" />
	<style type="text/css">
	<!--
	#distSensorReading {
	font-family: Arial, Verdana, 'Trebuchet MS';
	display:block;
	font-weight:bold;
	}
	#dist {
	color: #666666;
	font-size:25px;
	}
	#distVal {
	color: #009933;
	font-size:30px;
	}
	-->
	</style>
	<script type="text/javascript">
	//XMOS Utilization global variables
	var xmos_tile0;
	var xmos_tile1;
	var avg_tile0;
	var avg_tile1;

	//Raspberry Pi Utilization global variables
	var averageCore1 ;
	var averageCore2 ;
	var averageCore3 ;
	var averageCore4 ;
	var averageSensorReading ;

	$(document).ready(function(){
	function loadRPIUtilizationDataFile()
	{
	jQuery.get('core_usage_rpi.inc', function(data) {
	var myString = data;
	var myArray = myString.split(',');
	averageCore1 = (Math.round(myArray[0])+Math.round(myArray[5])+Math.round(myArray[10])+Math.round(myArray[15]))/4;
	averageCore2 = (Math.round(myArray[1])+Math.round(myArray[6])+Math.round(myArray[11])+Math.round(myArray[16]))/4;
	averageCore3 = (Math.round(myArray[2])+Math.round(myArray[7])+Math.round(myArray[12])+Math.round(myArray[17]))/4;
	averageCore4 = (Math.round(myArray[3])+Math.round(myArray[8])+Math.round(myArray[13])+Math.round(myArray[18]))/4;
	averageSensorReading = Math.round((averageCore1+averageCore2+averageCore3+averageCore4)/4);
	setTimeout(loadRPIUtilizationDataFile,1000);
	});
	}
	function loadXMOSUtilizationDataFile()
	{
	jQuery.get('core_usage_xmos.inc', function(data) {
	var myString2 = data;
	var myArray2 = myString2.split(',');
	xmos_tile0 = [parseInt(myArray2[0],10),parseInt(myArray2[1],10),parseInt(myArray2[2],10),parseInt(myArray2[3],10),parseInt(myArray2[4],10),parseInt(myArray2[5],10),parseInt(myArray2[6],10),parseInt(myArray2[7],10)];
	xmos_tile1 = [parseInt(myArray2[8],10),parseInt(myArray2[9],10),parseInt(myArray2[10],10),parseInt(myArray2[11],10),parseInt(myArray2[12],10),parseInt(myArray2[13],10),parseInt(myArray2[14],10),parseInt(myArray2[15],10)];
	var avg_tilex0 = Math.round((parseInt(myArray2[0],10)+parseInt(myArray2[1],10)+parseInt(myArray2[2],10)+parseInt(myArray2[3],10)+parseInt(myArray2[4],10)+parseInt(myArray2[5],10)+parseInt(myArray2[6],10)+parseInt(myArray2[7],10))/8);
	var avg_tilex1 = Math.round((parseInt(myArray2[8],10)+parseInt(myArray2[9],10)+parseInt(myArray2[10],10)+parseInt(myArray2[11],10)+parseInt(myArray2[12],10)+parseInt(myArray2[13],10)+parseInt(myArray2[14],10)+parseInt(myArray2[15],10))/8);
	if (typeof avg_tilex0 !='undefined' && typeof avg_tilex1 != 'undefined' && avg_tilex0>=0 && avg_tilex0<=100 && avg_tilex1>=0 && avg_tilex1<=100){
	avg_tile0 = avg_tilex0;
	avg_tile1 = avg_tilex1;
	}
	else
	{
	avg_tile0 = 0;
	avg_tile1 = 0;
	}
	setTimeout(loadXMOSUtilizationDataFile,1000);
	});
	}
	function drawGraph()
	{
	$('#distSensorReading').html("");
	$('#distSensorReading').prepend("<br /><br /><span style=\"font-size:20px; color:#CCC;\">Avg. Util (xCORE Tile1)</span><br /><span style=\" font-size:40px; color:#00CCFF;\">"+avg_tile1 +" %</span>");
	$('#distSensorReading').prepend("<br /><br /><span style=\"font-size:20px; color:#CCC;\">Avg. Util (xCORE Tile0)</span><br /><span style=\" font-size:40px; color:#00CCFF;\">"+avg_tile0+" %</span>");
	$('#distSensorReading').prepend("<br /><br /><span style=\"font-size:20px; color:#CCC;\">Avg. Util (RaspberryPi)</span><br /><span style=\" font-size:40px; color:#00CCFF;\">"+averageSensorReading+" %</span>");

	$.jqplot.config.enablePlugins = true;
	var raspberry = [averageCore1, averageCore2, averageCore3, averageCore4, 0, 0, 0, 0];
	var ticks = ['Core0', 'Core1', 'Core2', 'Core3', 'Core4', 'Core5', 'Core6', 'Core7'];
	var labels = ['Raspberry Pi', 'xCORE Tile 0', 'xCORE Tile 1'];
	plot1 = $.jqplot('chartdiv', [raspberry, xmos_tile0 ,xmos_tile1], {
	// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
	//animate: !$.jqplot.use_excanvas,
	seriesDefaults:{
	renderer:$.jqplot.BarRenderer,
	pointLabels: { show: true }
	},
	legend: {show:true, labels:labels},
	axes: {
	xaxis: {
	renderer: $.jqplot.CategoryAxisRenderer,
	ticks: ticks
	}
	},
	title : 'System Core Utilization',
	highlighter: { show: false },
	series:[{color:'#0099CC'}, {color:'lightgreen'}, {color:'orange'}]
	});
	plot1.redraw();
	setTimeout(drawGraph,1000);
	}
	setTimeout(loadRPIUtilizationDataFile, 10);
	setTimeout(loadXMOSUtilizationDataFile, 10);
	setTimeout(drawGraph, 10);
	});
	</script>
	</head>
	<body>
	<div id="chartdiv" style="height:400px;width:650px; color:white; float:left; margin-right:10px;"></div>
	<div id="distSensorReading" style="float:right; height:400px; width:220px; text-align:center;">

	</div>
	</body>
	</html>