Merge branch 'Apexcharts' of https://github.com/CCGSRobotics/RoboHUD

CCGSRobotics · Nov 7, 2018 · db47d49 · db47d49
2 parents acf5f89 + 7e60b03
commit db47d49
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 37 deletions.
diff --git a/App/JS/client.js b/App/JS/client.js
@@ -15,18 +15,7 @@ function axisValue(dynamixel, axis) {
 	if (val < 0 || val > 1024) {
 		console.error("Controller value is out of bounds! (" + val + ")");
 	}
-
-	// if (val <= 512) {
-	// 	val = (val - 512) * -2;
-	// } else {
-	// 	val = (val - 512) * -2;
-	// 	// val = -val;
-	// 	console.log(val, -val);
-	// }
-	//
-	// // if (dynamixel == 1 || dynamixel == 3) {
-	// // 	val = -val
-	// // }
+
 	val = (val - 512) * -2;
 	if (dynamixel == 1 || dynamixel == 3) {
 		val = -val;

diff --git a/App/charts.html b/App/charts.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8">
+    <title>Charts</title>
+    <link rel="stylesheet" href="CSS/main.css">
+    <script type="text/javascript" src="JS/main.js"></script>
+  </head>
+  <body>
+
+    <div class="main">
+      <canvas id="myChart" width="400" height="400"></canvas>
+      <script>
+      //http://www.chartjs.org/docs/latest/
+      var Chart = require('chart.js');
+      var ctx = document.getElementById("myChart").getContext('2d');
+      var myChart = new Chart(ctx, {
+          type: 'bar',
+          data: {
+              labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+              datasets: [{
+                  label: '# of Votes',
+                  data: [12, 19, 3, 5, 2, 3],
+                  backgroundColor: [
+                      'rgba(255, 99, 132, 0.2)',
+                      'rgba(54, 162, 235, 0.2)',
+                      'rgba(255, 206, 86, 0.2)',
+                      'rgba(75, 192, 192, 0.2)',
+                      'rgba(153, 102, 255, 0.2)',
+                      'rgba(255, 159, 64, 0.2)'
+                  ],
+                  borderColor: [
+                      'rgba(255,99,132,1)',
+                      'rgba(54, 162, 235, 1)',
+                      'rgba(255, 206, 86, 1)',
+                      'rgba(75, 192, 192, 1)',
+                      'rgba(153, 102, 255, 1)',
+                      'rgba(255, 159, 64, 1)'
+                  ],
+                  borderWidth: 1
+              }]
+          },
+          options: {
+              scales: {
+                  yAxes: [{
+                      ticks: {
+                          beginAtZero:true
+                      }
+                  }]
+              }
+          }
+      });
+      console.log(myChart)
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/App/controlTest.html b/App/controlTest.html
@@ -1,11 +1,8 @@
 <!DOCTYPE html>
 
 <html>
-
   <head>
-
     <meta charset="UTF-8">
-
     <title>test</title>
     <script type="text/javascript" src="JS/main.js"></script>
     <script type="text/javascript" src="JS/client.js"></script>

diff --git a/App/index.html b/App/index.html
@@ -6,29 +6,30 @@
     <link rel="stylesheet" href="CSS/main.css">
     <script type="text/javascript" src="JS/main.js"></script>
     <script type="text/javascript" scr="JS/Resources/Player/server-tcp.js"></script>
+    <script type="text/javascript" src="JS/client.js"></script>
     <script type="text/javascript">
-        execute('node App/JS/Resources/Player/server-tcp.js');
-        function startCamera() {
-            execute(`sshpass -p \"raspberry\" ssh [email protected] 'raspivid -t 0 -o - -w 960 -h 540 -fps 25 -pf baseline | nc -k -l 5000'`)
-            var iframe = document.createElement('iframe');
-            iframe.setAttribute('id', 'camera-view');
-            iframe.setAttribute('src', 'http://localhost:8080');
-            iframe.setAttribute('width', '1000');
-            iframe.setAttribute('height', '625');
+      execute('node App/JS/Resources/Player/server-tcp.js');
+      function startCamera() {
+        // execute(`sshpass -p \"raspberry\" ssh [email protected] 'raspivid -t 0 -o - -w 960 -h 540 -fps 25 -pf baseline | nc -k -l 5000'`)
+        var iframe = document.createElement('iframe');
+        iframe.setAttribute('id', 'camera-view');
+        iframe.setAttribute('src', 'http://localhost:8080');
+        iframe.setAttribute('width', '1000');
+        iframe.setAttribute('height', '625');
 
-            var markerPoint = document.getElementById('marker');
-            markerPoint.parentNode.insertBefore(iframe, markerPoint);
+        var markerPoint = document.getElementById('marker');
+        markerPoint.parentNode.insertBefore(iframe, markerPoint);
 
-            document.getElementById('cameraToggle').setAttribute('onclick', 'stopCamera()');
-            document.getElementById('cameraToggle').innerHTMl = 'Stop';
-        }
+        document.getElementById('cameraToggle').setAttribute('onclick', 'stopCamera()');
+        document.getElementById('cameraToggle').innerHTMl = 'Stop';
+      }
 
-        function stopCamera() {
-            execute(`sshpass -p \"raspberry\" ssh [email protected] 'pkill -f raspivid && pkill -f \"nc -k -l 5000\"'`);
-            var toggleButton = document.getElementById('cameraToggle');
-            document.getElementById('cameraToggle').setAttribute('onclick', 'startCamera()');
-            document.getElementById('cameraToggle').innerHTMl = 'Start';
-        }
+      function stopCamera() {
+        execute(`sshpass -p \"raspberry\" ssh [email protected] 'pkill -f raspivid && pkill -f \"nc -k -l 5000\"'`);
+        var toggleButton = document.getElementById('cameraToggle');
+        document.getElementById('cameraToggle').setAttribute('onclick', 'startCamera()');
+        document.getElementById('cameraToggle').innerHTMl = 'Start';
+      }
     </script>
   </head>
   <body>

diff --git a/main.js b/main.js
@@ -9,7 +9,7 @@ function createWindow() {
     width: 800,
     height: 600
   })
-  win.loadFile('App/control.html')
+  win.loadFile('App/charts.html')
   // win.loadURL('http://localhost:8080')
   win.webContents.openDevTools()
 

diff --git a/package.json b/package.json
@@ -10,11 +10,13 @@
     "electron": "^3.0.4"
   },
   "dependencies": {
+    "apexcharts": "^2.2.0",
+    "chart.js": "^2.7.3",
+    "express": "^3.21.2",
+    "mout": "^1.0.0",
     "npm": "^6.2.0",
     "python-shell": "^0.5.0",
     "shelljs": "^0.8.2",
-    "express": "^3.21.2",
-    "mout": "^1.0.0",
     "stream-split": "^1.1.0",
     "stream-throttle": "^0.1.3",
     "ws": "^0.8.0"