Update video streaming Closes #1

Include flip horizontal functionality

application.py

@@ -37,6 +37,12 @@ def request_preview_switch():
     print('*'*10, VIDEO.preview)
     return "nothing"
 
+@application.route('/request_flipH_switch')
+def request_flipH_switch():
+    VIDEO.flipH = not VIDEO.flipH
+    print('*'*10, VIDEO.flipH)
+    return "nothing"
+
 @application.route('/request_model_switch')
 def request_model_switch():
     VIDEO.detect = not VIDEO.detect

object_detection.py

@@ -69,6 +69,7 @@ class VideoStreaming(object):
         self.MODEL = ObjectDetection()
 
         self._preview = True
+        self._flipH = False
         self._detect = False
         self._exposure = self.VIDEO.get(cv2.CAP_PROP_EXPOSURE)
         self._contrast = self.VIDEO.get(cv2.CAP_PROP_CONTRAST)
@@ -81,6 +82,14 @@ class VideoStreaming(object):
     def preview(self, value):
         self._preview = bool(value)
 
+    @property
+    def flipH(self):
+        return self._flipH
+
+    @flipH.setter
+    def flipH(self, value):
+        self._flipH = bool(value)
+
     @property
     def detect(self):
         return self._detect
@@ -110,6 +119,8 @@ class VideoStreaming(object):
     def show(self):
         while(self.VIDEO.isOpened()):
             ret, snap = self.VIDEO.read()
+            if self.flipH:
+                snap = cv2.flip(snap, 1)
             
             if ret == True:
                 if self._preview:

static/script.js

@@ -1,9 +1,18 @@
 // Functions to deal with button events
 $(function () {
   // Preview switch
-    $('a#cam-preview').bind('click', function() {
+  $("a#cam-preview").bind("click", function () {
-        $.getJSON('/request_preview_switch',
+    $.getJSON("/request_preview_switch", function (data) {
-            function(data) {
+      // do nothing
+    });
+    return false;
+  });
+});
+
+$(function () {
+  // Flip horizontal switch
+  $("a#flip-horizontal").bind("click", function () {
+    $.getJSON("/request_flipH_switch", function (data) {
       // do nothing
     });
     return false;
@@ -12,9 +21,8 @@ $(function() {
 
 $(function () {
   // Model switch
-    $('a#use-model').bind('click', function() {
+  $("a#use-model").bind("click", function () {
-        $.getJSON('/request_model_switch',
+    $.getJSON("/request_model_switch", function (data) {
-            function(data) {
       // do nothing
     });
     return false;
@@ -23,9 +31,8 @@ $(function() {
 
 $(function () {
   // exposure down
-    $('a#exposure-down').bind('click', function() {
+  $("a#exposure-down").bind("click", function () {
-        $.getJSON('/request_exposure_down',
+    $.getJSON("/request_exposure_down", function (data) {
-            function(data) {
       // do nothing
     });
     return false;
@@ -34,9 +41,8 @@ $(function() {
 
 $(function () {
   // exposure up
-    $('a#exposure-up').bind('click', function() {
+  $("a#exposure-up").bind("click", function () {
-        $.getJSON('/request_exposure_up',
+    $.getJSON("/request_exposure_up", function (data) {
-            function(data) {
       // do nothing
     });
     return false;
@@ -45,9 +51,8 @@ $(function() {
 
 $(function () {
   // contrast down
-    $('a#contrast-down').bind('click', function() {
+  $("a#contrast-down").bind("click", function () {
-        $.getJSON('/request_contrast_down',
+    $.getJSON("/request_contrast_down", function (data) {
-            function(data) {
       // do nothing
     });
     return false;
@@ -56,9 +61,8 @@ $(function() {
 
 $(function () {
   // contrast up
-    $('a#contrast-up').bind('click', function() {
+  $("a#contrast-up").bind("click", function () {
-        $.getJSON('/request_contrast_up',
+    $.getJSON("/request_contrast_up", function (data) {
-            function(data) {
       // do nothing
     });
     return false;
@@ -67,9 +71,8 @@ $(function() {
 
 $(function () {
   // reset camera
-    $('a#reset-cam').bind('click', function() {
+  $("a#reset-cam").bind("click", function () {
-        $.getJSON('/reset_camera',
+    $.getJSON("/reset_camera", function (data) {
-            function(data) {
       // do nothing
     });
     return false;

templates/index.html

@@ -1,45 +1,41 @@
-{% extends "bootstrap/base.html" %}
+{% extends "bootstrap/base.html" %} {% block title %} {{ TITLE }} {% endblock %}
-
+{% block styles %} {{ super() }}
-{% block title %}
-    {{ TITLE }}
-{% endblock %}
-
-{% block styles %}
-    {{ super() }}
 
 <!-- Custom styles -->
-    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
-{% endblock %}
+{% endblock %} {% block content %}
-
-{% block content %}
 <h1>{{ TITLE }}</h1>
 
 <div id="container">
-        <img id="videoElement" src="{{ url_for('video_feed') }}">
+  <img id="videoElement" src="{{ url_for('video_feed') }}" />
   <form id="control">
     Camera preview:
     <a id="cam-preview"><button class="btn btn-default">On/Off</button></a>
+    Flip horizontal:
+    <a id="flip-horizontal"><button class="btn btn-default">On/Off</button></a>
     Run detection model:
     <a id="use-model"><button class="btn btn-default">On/Off</button></a>
-            <br> <br>
+    <br />
+    <br />
     Exposure:
     <a id="exposure-down"><button class="btn btn-default">-1</button></a>
     <a id="exposure-up"><button class="btn btn-default">+1</button></a>
     Contrast:
     <a id="contrast-down"><button class="btn btn-default">-4</button></a>
     <a id="contrast-up"><button class="btn btn-default">+4</button></a>
-            <br> <br>
+    <br />
+    <br />
     <a id="reset-cam"><button class="btn btn-default">Reset camera</button></a>
   </form>
 </div>
-{% endblock %}
+{% endblock %} {% block scripts %}
-
-{% block scripts %}
 <!-- Imports -->
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 
 <!-- Scripts -->
-    <script type="text/javascript" src="{{ url_for('static', filename='script.js') }}"></script>
+<script
+  type="text/javascript"
+  src="{{ url_for('static', filename='script.js') }}"
+></script>
 
-    {{ super() }}
+{{ super() }} {% endblock %}
-{% endblock %}