Added GUI Environment
diff --git a/xos-apps/auto-scale/gui/src/vendor/Chart.js/samples/bar.html b/xos-apps/auto-scale/gui/src/vendor/Chart.js/samples/bar.html
new file mode 100644
index 0000000..5bf4b5b
--- /dev/null
+++ b/xos-apps/auto-scale/gui/src/vendor/Chart.js/samples/bar.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Bar Chart</title>
+ <script src="../Chart.js"></script>
+ </head>
+ <body>
+ <div style="width: 50%">
+ <canvas id="canvas" height="450" width="600"></canvas>
+ </div>
+
+
+ <script>
+ var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
+
+ var barChartData = {
+ labels : ["January","February","March","April","May","June","July"],
+ datasets : [
+ {
+ fillColor : "rgba(220,220,220,0.5)",
+ strokeColor : "rgba(220,220,220,0.8)",
+ highlightFill: "rgba(220,220,220,0.75)",
+ highlightStroke: "rgba(220,220,220,1)",
+ data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
+ },
+ {
+ fillColor : "rgba(151,187,205,0.5)",
+ strokeColor : "rgba(151,187,205,0.8)",
+ highlightFill : "rgba(151,187,205,0.75)",
+ highlightStroke : "rgba(151,187,205,1)",
+ data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
+ }
+ ]
+
+ }
+ window.onload = function(){
+ var ctx = document.getElementById("canvas").getContext("2d");
+ window.myBar = new Chart(ctx).Bar(barChartData, {
+ responsive : true
+ });
+ }
+
+ </script>
+ </body>
+</html>
diff --git a/xos-apps/auto-scale/gui/src/vendor/Chart.js/samples/doughnut.html b/xos-apps/auto-scale/gui/src/vendor/Chart.js/samples/doughnut.html
new file mode 100644
index 0000000..fdf7539
--- /dev/null
+++ b/xos-apps/auto-scale/gui/src/vendor/Chart.js/samples/doughnut.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Doughnut Chart</title>
+ <script src="../Chart.js"></script>
+ <style>
+ body{
+ padding: 0;
+ margin: 0;
+ }
+ #canvas-holder{
+ width:30%;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="canvas-holder">
+ <canvas id="chart-area" width="500" height="500"/>
+ </div>
+
+
+ <script>
+
+ var doughnutData = [
+ {
+ value: 300,
+ color:"#F7464A",
+ highlight: "#FF5A5E",
+ label: "Red"
+ },
+ {
+ value: 50,
+ color: "#46BFBD",
+ highlight: "#5AD3D1",
+ label: "Green"
+ },
+ {
+ value: 100,
+ color: "#FDB45C",
+ highlight: "#FFC870",
+ label: "Yellow"
+ },
+ {
+ value: 40,
+ color: "#949FB1",
+ highlight: "#A8B3C5",
+ label: "Grey"
+ },
+ {
+ value: 120,
+ color: "#4D5360",
+ highlight: "#616774",
+ label: "Dark Grey"
+ }
+
+ ];
+
+ window.onload = function(){
+ var ctx = document.getElementById("chart-area").getContext("2d");
+ window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
+ };
+
+
+
+ </script>
+ </body>
+</html>
diff --git a/xos-apps/auto-scale/gui/src/vendor/Chart.js/samples/line-customTooltips.html b/xos-apps/auto-scale/gui/src/vendor/Chart.js/samples/line-customTooltips.html
new file mode 100644
index 0000000..4dc46e1
--- /dev/null
+++ b/xos-apps/auto-scale/gui/src/vendor/Chart.js/samples/line-customTooltips.html
@@ -0,0 +1,129 @@
+<!doctype html>
+<html>
+
+<head>
+ <title>Line Chart with Custom Tooltips</title>
+ <script src="../Chart.js"></script>
+ <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+
+ <style>
+ #canvas-holder1 {
+ width: 300px;
+ margin: 20px auto;
+ }
+ #canvas-holder2 {
+ width: 50%;
+ margin: 20px 25%;
+ }
+ #chartjs-tooltip {
+ opacity: 1;
+ position: absolute;
+ background: rgba(0, 0, 0, .7);
+ color: white;
+ padding: 3px;
+ border-radius: 3px;
+ -webkit-transition: all .1s ease;
+ transition: all .1s ease;
+ pointer-events: none;
+ -webkit-transform: translate(-50%, 0);
+ transform: translate(-50%, 0);
+ }
+ .chartjs-tooltip-key{
+ display:inline-block;
+ width:10px;
+ height:10px;
+ }
+ </style>
+</head>
+
+<body>
+ <div id="canvas-holder1">
+ <canvas id="chart1" width="300" height="30" />
+ </div>
+ <div id="canvas-holder2">
+ <canvas id="chart2" width="450" height="600" />
+ </div>
+
+ <div id="chartjs-tooltip"></div>
+
+
+ <script>
+
+ Chart.defaults.global.pointHitDetectionRadius = 1;
+ Chart.defaults.global.customTooltips = function(tooltip) {
+
+ var tooltipEl = $('#chartjs-tooltip');
+
+ if (!tooltip) {
+ tooltipEl.css({
+ opacity: 0
+ });
+ return;
+ }
+
+ tooltipEl.removeClass('above below');
+ tooltipEl.addClass(tooltip.yAlign);
+
+ var innerHtml = '';
+ for (var i = tooltip.labels.length - 1; i >= 0; i--) {
+ innerHtml += [
+ '<div class="chartjs-tooltip-section">',
+ ' <span class="chartjs-tooltip-key" style="background-color:' + tooltip.legendColors[i].fill + '"></span>',
+ ' <span class="chartjs-tooltip-value">' + tooltip.labels[i] + '</span>',
+ '</div>'
+ ].join('');
+ }
+ tooltipEl.html(innerHtml);
+
+ tooltipEl.css({
+ opacity: 1,
+ left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
+ top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',
+ fontFamily: tooltip.fontFamily,
+ fontSize: tooltip.fontSize,
+ fontStyle: tooltip.fontStyle,
+ });
+ };
+ var randomScalingFactor = function() {
+ return Math.round(Math.random() * 100);
+ };
+ var lineChartData = {
+ labels: ["January", "February", "March", "April", "May", "June", "July"],
+ datasets: [{
+ label: "My First dataset",
+ fillColor: "rgba(220,220,220,0.2)",
+ strokeColor: "rgba(220,220,220,1)",
+ pointColor: "rgba(220,220,220,1)",
+ pointStrokeColor: "#fff",
+ pointHighlightFill: "#fff",
+ pointHighlightStroke: "rgba(220,220,220,1)",
+ data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+ }, {
+ label: "My Second dataset",
+ fillColor: "rgba(151,187,205,0.2)",
+ strokeColor: "rgba(151,187,205,1)",
+ pointColor: "rgba(151,187,205,1)",
+ pointStrokeColor: "#fff",
+ pointHighlightFill: "#fff",
+ pointHighlightStroke: "rgba(151,187,205,1)",
+ data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+ }]
+ };
+
+ window.onload = function() {
+ var ctx1 = document.getElementById("chart1").getContext("2d");
+ window.myLine = new Chart(ctx1).Line(lineChartData, {
+ showScale: false,
+ pointDot : true,
+ responsive: true
+ });
+
+ var ctx2 = document.getElementById("chart2").getContext("2d");
+ window.myLine = new Chart(ctx2).Line(lineChartData, {
+ responsive: true
+ });
+ };
+ </script>
+</body>
+
+</html>
diff --git a/xos-apps/auto-scale/gui/src/vendor/Chart.js/samples/line.html b/xos-apps/auto-scale/gui/src/vendor/Chart.js/samples/line.html
new file mode 100644
index 0000000..ccd0dad
--- /dev/null
+++ b/xos-apps/auto-scale/gui/src/vendor/Chart.js/samples/line.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Line Chart</title>
+ <script src="../Chart.js"></script>
+ </head>
+ <body>
+ <div style="width:30%">
+ <div>
+ <canvas id="canvas" height="450" width="600"></canvas>
+ </div>
+ </div>
+
+
+ <script>
+ var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
+ var lineChartData = {
+ labels : ["January","February","March","April","May","June","July"],
+ datasets : [
+ {
+ label: "My First dataset",
+ fillColor : "rgba(220,220,220,0.2)",
+ strokeColor : "rgba(220,220,220,1)",
+ pointColor : "rgba(220,220,220,1)",
+ pointStrokeColor : "#fff",
+ pointHighlightFill : "#fff",
+ pointHighlightStroke : "rgba(220,220,220,1)",
+ data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
+ },
+ {
+ label: "My Second dataset",
+ fillColor : "rgba(151,187,205,0.2)",
+ strokeColor : "rgba(151,187,205,1)",
+ pointColor : "rgba(151,187,205,1)",
+ pointStrokeColor : "#fff",
+ pointHighlightFill : "#fff",
+ pointHighlightStroke : "rgba(151,187,205,1)",
+ data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
+ }
+ ]
+
+ }
+
+ window.onload = function(){
+ var ctx = document.getElementById("canvas").getContext("2d");
+ window.myLine = new Chart(ctx).Line(lineChartData, {
+ responsive: true
+ });
+ }
+
+
+ </script>
+ </body>
+</html>
diff --git a/xos-apps/auto-scale/gui/src/vendor/Chart.js/samples/pie-customTooltips.html b/xos-apps/auto-scale/gui/src/vendor/Chart.js/samples/pie-customTooltips.html
new file mode 100644
index 0000000..732317d
--- /dev/null
+++ b/xos-apps/auto-scale/gui/src/vendor/Chart.js/samples/pie-customTooltips.html
@@ -0,0 +1,156 @@
+<!doctype html>
+<html>
+
+<head>
+ <title>Pie Chart with Custom Tooltips</title>
+ <script src="../Chart.js"></script>
+ <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+
+ <style>
+ #canvas-holder {
+ width: 100%;
+ margin-top: 50px;
+ text-align: center;
+ }
+ #chartjs-tooltip {
+ opacity: 1;
+ position: absolute;
+ background: rgba(0, 0, 0, .7);
+ color: white;
+ padding: 3px;
+ border-radius: 3px;
+ -webkit-transition: all .1s ease;
+ transition: all .1s ease;
+ pointer-events: none;
+ -webkit-transform: translate(-50%, 0);
+ transform: translate(-50%, 0);
+ }
+ #chartjs-tooltip.below {
+ -webkit-transform: translate(-50%, 0);
+ transform: translate(-50%, 0);
+ }
+ #chartjs-tooltip.below:before {
+ border: solid;
+ border-color: #111 transparent;
+ border-color: rgba(0, 0, 0, .8) transparent;
+ border-width: 0 8px 8px 8px;
+ bottom: 1em;
+ content: "";
+ display: block;
+ left: 50%;
+ position: absolute;
+ z-index: 99;
+ -webkit-transform: translate(-50%, -100%);
+ transform: translate(-50%, -100%);
+ }
+ #chartjs-tooltip.above {
+ -webkit-transform: translate(-50%, -100%);
+ transform: translate(-50%, -100%);
+ }
+ #chartjs-tooltip.above:before {
+ border: solid;
+ border-color: #111 transparent;
+ border-color: rgba(0, 0, 0, .8) transparent;
+ border-width: 8px 8px 0 8px;
+ bottom: 1em;
+ content: "";
+ display: block;
+ left: 50%;
+ top: 100%;
+ position: absolute;
+ z-index: 99;
+ -webkit-transform: translate(-50%, 0);
+ transform: translate(-50%, 0);
+ }
+ </style>
+</head>
+
+<body>
+ <div id="canvas-holder">
+ <canvas id="chart-area1" width="50" height="50" />
+ </div>
+ <div id="canvas-holder">
+ <canvas id="chart-area2" width="300" height="300" />
+ </div>
+
+ <div id="chartjs-tooltip"></div>
+
+
+ <script>
+ Chart.defaults.global.customTooltips = function(tooltip) {
+
+ // Tooltip Element
+ var tooltipEl = $('#chartjs-tooltip');
+
+ // Hide if no tooltip
+ if (!tooltip) {
+ tooltipEl.css({
+ opacity: 0
+ });
+ return;
+ }
+
+ // Set caret Position
+ tooltipEl.removeClass('above below');
+ tooltipEl.addClass(tooltip.yAlign);
+
+ // Set Text
+ tooltipEl.html(tooltip.text);
+
+ // Find Y Location on page
+ var top;
+ if (tooltip.yAlign == 'above') {
+ top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
+ } else {
+ top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
+ }
+
+ // Display, position, and set styles for font
+ tooltipEl.css({
+ opacity: 1,
+ left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
+ top: tooltip.chart.canvas.offsetTop + top + 'px',
+ fontFamily: tooltip.fontFamily,
+ fontSize: tooltip.fontSize,
+ fontStyle: tooltip.fontStyle,
+ });
+ };
+
+ var pieData = [{
+ value: 300,
+ color: "#F7464A",
+ highlight: "#FF5A5E",
+ label: "Red"
+ }, {
+ value: 50,
+ color: "#46BFBD",
+ highlight: "#5AD3D1",
+ label: "Green"
+ }, {
+ value: 100,
+ color: "#FDB45C",
+ highlight: "#FFC870",
+ label: "Yellow"
+ }, {
+ value: 40,
+ color: "#949FB1",
+ highlight: "#A8B3C5",
+ label: "Grey"
+ }, {
+ value: 120,
+ color: "#4D5360",
+ highlight: "#616774",
+ label: "Dark Grey"
+ }];
+
+ window.onload = function() {
+ var ctx1 = document.getElementById("chart-area1").getContext("2d");
+ window.myPie = new Chart(ctx1).Pie(pieData);
+
+ var ctx2 = document.getElementById("chart-area2").getContext("2d");
+ window.myPie = new Chart(ctx2).Pie(pieData);
+ };
+ </script>
+</body>
+
+</html>
diff --git a/xos-apps/auto-scale/gui/src/vendor/Chart.js/samples/pie.html b/xos-apps/auto-scale/gui/src/vendor/Chart.js/samples/pie.html
new file mode 100644
index 0000000..255a499
--- /dev/null
+++ b/xos-apps/auto-scale/gui/src/vendor/Chart.js/samples/pie.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Pie Chart</title>
+ <script src="../Chart.js"></script>
+ </head>
+ <body>
+ <div id="canvas-holder">
+ <canvas id="chart-area" width="300" height="300"/>
+ </div>
+
+
+ <script>
+
+ var pieData = [
+ {
+ value: 300,
+ color:"#F7464A",
+ highlight: "#FF5A5E",
+ label: "Red"
+ },
+ {
+ value: 50,
+ color: "#46BFBD",
+ highlight: "#5AD3D1",
+ label: "Green"
+ },
+ {
+ value: 100,
+ color: "#FDB45C",
+ highlight: "#FFC870",
+ label: "Yellow"
+ },
+ {
+ value: 40,
+ color: "#949FB1",
+ highlight: "#A8B3C5",
+ label: "Grey"
+ },
+ {
+ value: 120,
+ color: "#4D5360",
+ highlight: "#616774",
+ label: "Dark Grey"
+ }
+
+ ];
+
+ window.onload = function(){
+ var ctx = document.getElementById("chart-area").getContext("2d");
+ window.myPie = new Chart(ctx).Pie(pieData);
+ };
+
+
+
+ </script>
+ </body>
+</html>
diff --git a/xos-apps/auto-scale/gui/src/vendor/Chart.js/samples/polar-area.html b/xos-apps/auto-scale/gui/src/vendor/Chart.js/samples/polar-area.html
new file mode 100644
index 0000000..d3d3f01
--- /dev/null
+++ b/xos-apps/auto-scale/gui/src/vendor/Chart.js/samples/polar-area.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Polar Area Chart</title>
+ <script src="../Chart.js"></script>
+ </head>
+ <body>
+ <div id="canvas-holder" style="width:30%">
+ <canvas id="chart-area" width="300" height="300"/>
+ </div>
+
+
+ <script>
+
+ var polarData = [
+ {
+ value: 300,
+ color:"#F7464A",
+ highlight: "#FF5A5E",
+ label: "Red"
+ },
+ {
+ value: 50,
+ color: "#46BFBD",
+ highlight: "#5AD3D1",
+ label: "Green"
+ },
+ {
+ value: 100,
+ color: "#FDB45C",
+ highlight: "#FFC870",
+ label: "Yellow"
+ },
+ {
+ value: 40,
+ color: "#949FB1",
+ highlight: "#A8B3C5",
+ label: "Grey"
+ },
+ {
+ value: 120,
+ color: "#4D5360",
+ highlight: "#616774",
+ label: "Dark Grey"
+ }
+
+ ];
+
+ window.onload = function(){
+ var ctx = document.getElementById("chart-area").getContext("2d");
+ window.myPolarArea = new Chart(ctx).PolarArea(polarData, {
+ responsive:true
+ });
+ };
+
+
+
+ </script>
+ </body>
+</html>
diff --git a/xos-apps/auto-scale/gui/src/vendor/Chart.js/samples/radar.html b/xos-apps/auto-scale/gui/src/vendor/Chart.js/samples/radar.html
new file mode 100644
index 0000000..6a04f87
--- /dev/null
+++ b/xos-apps/auto-scale/gui/src/vendor/Chart.js/samples/radar.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Radar Chart</title>
+ <script src="../Chart.js"></script>
+ <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
+ <style>
+ canvas{
+ }
+ </style>
+ </head>
+ <body>
+ <div style="width:30%">
+ <canvas id="canvas" height="450" width="450"></canvas>
+ </div>
+
+
+ <script>
+ var radarChartData = {
+ labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
+ datasets: [
+ {
+ label: "My First dataset",
+ fillColor: "rgba(220,220,220,0.2)",
+ strokeColor: "rgba(220,220,220,1)",
+ pointColor: "rgba(220,220,220,1)",
+ pointStrokeColor: "#fff",
+ pointHighlightFill: "#fff",
+ pointHighlightStroke: "rgba(220,220,220,1)",
+ data: [65,59,90,81,56,55,40]
+ },
+ {
+ label: "My Second dataset",
+ fillColor: "rgba(151,187,205,0.2)",
+ strokeColor: "rgba(151,187,205,1)",
+ pointColor: "rgba(151,187,205,1)",
+ pointStrokeColor: "#fff",
+ pointHighlightFill: "#fff",
+ pointHighlightStroke: "rgba(151,187,205,1)",
+ data: [28,48,40,19,96,27,100]
+ }
+ ]
+ };
+
+ window.onload = function(){
+ window.myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData, {
+ responsive: true
+ });
+ }
+
+ </script>
+ </body>
+</html>