add web controls for camera mode

steelhawks · Jan 14, 2020 · a6b9f5e · a6b9f5e
1 parent 63c55a5
commit a6b9f5e
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 32 deletions.
diff --git a/controls.py b/controls.py
@@ -2,15 +2,16 @@
 
 CAMERA_MODE_RAW = 'R'
 CAMERA_MODE_BALL = 'B'
+CAMERA_MODE_LOADING_BAY = 'L'
 CAMERA_MODE_HEXAGON = 'H'
 
 class Controls():
 
     def __init__(self):
         self.enable_camera = True
-        self.enable_processing = False
-        self.camera_mode = CAMERA_MODE_RAW
-
+        # self.enable_processing = False
+        self.camera_mode = CAMERA_MODE_LOADING_BAY
+        self.enable_streaming = True
         self.enable_feed = True
         self.turn_camera_off = False
 

diff --git a/web/www/app.js b/web/www/app.js
@@ -6,7 +6,7 @@ new Vue({
   data: {
     controls: {
         enable_camera: false,
-        enable_processing: false,
+        // enable_processing: false,
         camera_mode: 'R'
     }
   },
@@ -16,8 +16,44 @@ new Vue({
   methods: {
     enableCamera: function () {
         var self = this;
-        self.controls.enable_camera = self.controls.enable_camera
+        if(self.controls.enable_camera == false){
+            self.controls.enable_camera = true;
+        }
+        else{
+            self.controls.enable_camera = false;
+        }
+        Socket.send(self.controls)
+    },
+    enableRaw: function() {
+        var self = this;
+        self.controls.camera_mode = 'R';
+        Socket.send(self.controls)
+    },
+    enableBall: function(){
+        var self = this;
+        self.controls.camera_mode = 'B';
+        Socket.send(self.controls)
+    },
+    enableHex: function(){
+        var self = this;
+        self.controls.camera_mode = 'H'
+        Socket.send(self.controls)
+    },
+    enableBay: function(){
+        var self = this;
+        self.controls.camera_mode = 'L'
         Socket.send(self.controls)
     }
+    // enableProcessing: function(){
+    //     var self = this;
+    //     if(self.controls.enable_processing == false){
+    //       self.controls.enable_processing = true;
+    //     }
+    //     else{
+    //       self.controls.enable_processing = false;
+    //     }
+    //     Socket.send(self.controls)
+    // },
+
   }
 });
diff --git a/web/www/index.html b/web/www/index.html
@@ -3,28 +3,22 @@
 <head>
 	<meta charset="utf-8">
 
-	<!--<link rel="stylesheet" href="/lib/spectre.min.css">-->
-	<!--<link rel="stylesheet" href="/lib/spectre-exp.min.css">-->
-	<!--<link rel="stylesheet" href="/lib/spectre-icons.min.css">-->
+	<link rel="stylesheet" href="/spectre.min.css">
+	<link rel="stylesheet" href="/spectre-exp.min.css">
+	<link rel="stylesheet" href="/spectre-icons.min.css">
 
-	<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
-	<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
-	<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
 	<style>
 		.cosmic {
 			height:100vh;
-
+		
 background-image: radial-gradient( circle farthest-corner at 0.5% 97.2%,  #2fad5b 0%, #93c4ff 100.2% );
-
+		}
 </style>
 </head>
 <body class="cosmic">
 
 	<!-- development version, includes helpful console warnings -->
-	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-
-
-	<!--<script src="/lib/jquery-2.2.2.min.js"></script>-->
+	<script src="/vue.js"></script>
 
 
 	<script type="text/x-template" id="main-template">
@@ -64,37 +58,29 @@
 			  </td>
 			</tr>
 			<tr>
-			  <td>enable processing</td>
+			  <td>camera MODE</td>
 			  <td><!-- form switch control -->
 			  </td>
 			  <td>
 				<div class="form-group">
-				  <label class="form-switch">
-					<input type="checkbox">
-					<i class="form-icon"></i>
+				  <label class="form-radio form-inline">
+					<input type="radio" name="gender" checked=""  @click="enableRaw"><i class="form-icon"></i> RAW
 				  </label>
 				</div>
-			  </td>
-			</tr>
-			<tr>
-			  <td>camera MODE</td>
-			  <td><!-- form switch control -->
-			  </td>
-			  <td>
 				<div class="form-group">
 				  <label class="form-radio form-inline">
-					<input type="radio" name="gender" checked=""><i class="form-icon"></i> RAW
+					<input type="radio" name="gender"  @click="enableBay"><i class="form-icon"></i> BAY DETECT
 				  </label>
 				</div>
 				<div class="form-group">
 				  <label class="form-radio form-inline">
-					<input type="radio" name="gender"><i class="form-icon"></i> BOX DETECT
+					<input type="radio" name="gender"  @click="enableBall"><i class="form-icon"></i> BALL DETECT
 				  </label>
 				</div>
 				<div class="form-group">
 
 				  <label class="form-radio form-inline">
-					<input type="radio" name="gender"><i class="form-icon"></i> HEX GOAL DETECT
+					<input type="radio" name="gender"  @click="enableHex"><i class="form-icon"></i> HEX GOAL DETECT
 				  </label>
 				</div>
 			  </td>
@@ -117,4 +103,4 @@
 
 </body>
 
-</html>
+</html>