Embed camera feed in GUI

CCGSRobotics · Oct 30, 2018 · 7bd8a0a · 7bd8a0a
1 parent d937a25
commit 7bd8a0a
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 28 deletions.
diff --git a/App/JS/Resources/settings.json b/App/JS/Resources/settings.json
@@ -9,8 +9,8 @@
         "port": "5000"
     },
     "Camera": {
-        "Width": 1280,
-        "Height": 720,
+        "Width": 960,
+        "Height": 540,
         "Time": 0,
         "Extra Commands": "-o - -hf",
         "Network": {
@@ -33,8 +33,8 @@
           "port": "5000"
       },
       "Camera": {
-          "Width": 1280,
-          "Height": 720,
+          "Width": 960,
+          "Height": 540,
           "Time": 0,
           "Extra Commands": "-o - -hf",
           "Network": {

diff --git a/App/JS/camera.js b/App/JS/camera.js
@@ -1,24 +1,27 @@
-var settings = require("./JS/Resources/settings.json")
-var width = settings.User.Camera["Width"]
-var height = settings.User.Camera["Height"]
-var time = settings.User.Camera["Time"]
-var extraCommands = settings.User.Camera["Extra Commands"]
-var port = settings.User.Camera.Network["Port"]
-var ip = settings.User.Camera.Network["IP"]
-var command = `raspivid -w ${width} -h ${height} -t ${time} ${extraCommands} | nc ${ip} ${port}`
+var settings = require("./JS/Resources/settings.json");
+var width = settings.User.Camera["Width"];
+var height = settings.User.Camera["Height"];
+var time = settings.User.Camera["Time"];
+var extraCommands = settings.User.Camera["Extra Commands"];
+var port = settings.User.Camera.Network["Port"];
+var ip = settings.User.Camera.Network["IP"];
+var command = `raspivid -w ${width} -h ${height} -t ${time} ${extraCommands} | nc ${ip} ${port}`;
 
 //Put in default text
 function loaded() {
-    console.log("Loaded!")
-    document.forms[0].elements[0].value = command
-    document.forms[0].elements[2].placeholder = height
-    document.forms[0].elements[3].placeholder = width
-    document.forms[0].elements[4].placeholder = time
-    document.forms[0].elements[5].placeholder = port
-    document.getElementById('settingsIP').innerHTMl = ip
-    console.log(document.getElementById('settingsIP'))
-    console.log(document.forms)
+    console.log("Loaded!");
+    document.forms[0].elements[1].value = height;
+    document.forms[0].elements[2].value = width;
+    document.forms[0].elements[3].value = time;
+    document.forms[0].elements[4].value = port;
+    document.getElementById('settingsIP').innerHTMl = ip;
 }
+
 function startCamera() {
-    console.log("placeholder")
+    height = document.forms[0].elements[1].value
+    width = document.forms[0].elements[2].value
+    time = document.forms[0].elements[3].value
+    port = document.forms[0].elements[4].value
+    command = `raspivid -w ${width} -h ${height} -t ${time} ${extraCommands} | nc ${ip} ${port}`;
+    execute(`sshpass -p \"raspberry\" ssh [email protected] '${command}'`)
 }
diff --git a/App/JS/main.js b/App/JS/main.js
@@ -1,4 +1,5 @@
 const execute = require('./JS/executeShellCommand.js').execute;
+
 function controlServerCode(terminate) {
     if (terminate == true) {
         console.log(terminate)

diff --git a/App/camera.html b/App/camera.html
@@ -10,7 +10,6 @@
   <body onload="loaded()">
     <div id="sidenav">
       <a href="index.html">Dashboard</a>
-      <a href="localhost:8080">Camera View</a>
       <a href="camera.html" id="selected">Camera</a>
       <a href="control.html">Robot Control</a>
       <a href="testing.html">Testing</a>
@@ -19,7 +18,6 @@
   </div>
   <div class="main">
     <form onsubmit="startCamera()" method="post" id="camera">
-        <input type="text" name="command" value="" id="command" size="75">
         <input type="submit" name="execute" value="Execute!">
         <hr>
         <p>Camera settings:</p>

diff --git a/App/index.html b/App/index.html
@@ -15,6 +15,9 @@
       <a href="settings.html">Settings</a>
       <a href="version.html">Version</a>
     </div>
-    <h1 class="text" id="main-header">Dashboard - Robotics GUI</h1>
+    <div class="main">
+        <h1 class="text" id="main-header">Dashboard - Robotics GUI</h1>
+        <iframe src="http://localhost:8080" width="1000" height="625"></iframe>
+    </div>
   </body>
 </html>
diff --git a/main.js b/main.js
@@ -9,9 +9,9 @@ function createWindow() {
     width: 800,
     height: 600
   })
-  // win.loadFile('App/camera.html')
-  win.loadURL('http://localhost:8080')
-  win.webContents.openDevTools()
+  win.loadFile('App/camera.html')
+  // win.loadURL('http://localhost:8080')
+  // win.webContents.openDevTools()
 
   win.on('closed', () => {
     win = null