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,77 +1,80 @@
 // Functions to deal with button events
-$(function() {
-    // Preview switch
-    $('a#cam-preview').bind('click', function() {
-        $.getJSON('/request_preview_switch',
-            function(data) {
-            // do nothing
-        });
-        return false;
+$(function () {
+  // Preview switch
+  $("a#cam-preview").bind("click", function () {
+    $.getJSON("/request_preview_switch", function (data) {
+      // do nothing
     });
+    return false;
+  });
 });
 
-$(function() {
-    // Model switch
-    $('a#use-model').bind('click', function() {
-        $.getJSON('/request_model_switch',
-            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;
+  });
 });
 
-$(function() {
-    // exposure down
-    $('a#exposure-down').bind('click', function() {
-        $.getJSON('/request_exposure_down',
-            function(data) {
-            // do nothing
-        });
-        return false;
+$(function () {
+  // Model switch
+  $("a#use-model").bind("click", function () {
+    $.getJSON("/request_model_switch", function (data) {
+      // do nothing
     });
+    return false;
+  });
 });
 
-$(function() {
-    // exposure up
-    $('a#exposure-up').bind('click', function() {
-        $.getJSON('/request_exposure_up',
-            function(data) {
-            // do nothing
-        });
-        return false;
+$(function () {
+  // exposure down
+  $("a#exposure-down").bind("click", function () {
+    $.getJSON("/request_exposure_down", function (data) {
+      // do nothing
     });
+    return false;
+  });
 });
 
-$(function() {
-    // contrast down
-    $('a#contrast-down').bind('click', function() {
-        $.getJSON('/request_contrast_down',
-            function(data) {
-            // do nothing
-        });
-        return false;
+$(function () {
+  // exposure up
+  $("a#exposure-up").bind("click", function () {
+    $.getJSON("/request_exposure_up", function (data) {
+      // do nothing
     });
+    return false;
+  });
 });
 
-$(function() {
-    // contrast up
-    $('a#contrast-up').bind('click', function() {
-        $.getJSON('/request_contrast_up',
-            function(data) {
-            // do nothing
-        });
-        return false;
+$(function () {
+  // contrast down
+  $("a#contrast-down").bind("click", function () {
+    $.getJSON("/request_contrast_down", function (data) {
+      // do nothing
     });
+    return false;
+  });
 });
 
-$(function() {
-    // reset camera
-    $('a#reset-cam').bind('click', function() {
-        $.getJSON('/reset_camera',
-            function(data) {
-            // do nothing
-        });
-        return false;
+$(function () {
+  // contrast up
+  $("a#contrast-up").bind("click", function () {
+    $.getJSON("/request_contrast_up", function (data) {
+      // do nothing
     });
+    return false;
+  });
+});
+
+$(function () {
+  // reset camera
+  $("a#reset-cam").bind("click", function () {
+    $.getJSON("/reset_camera", 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 %}
+<!-- Custom styles -->
+<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
+{% endblock %} {% block content %}
+<h1>{{ TITLE }}</h1>
 
-{% block styles %}
-    {{ super() }}
-    
-    <!-- Custom styles -->
-    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
-{% endblock %}
+<div id="container">
+  <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 />
+    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 />
+    <a id="reset-cam"><button class="btn btn-default">Reset camera</button></a>
+  </form>
+</div>
+{% endblock %} {% block scripts %}
+<!-- Imports -->
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 
-{% block content %}
-    <h1>{{ TITLE }}</h1>
+<!-- Scripts -->
+<script
+  type="text/javascript"
+  src="{{ url_for('static', filename='script.js') }}"
+></script>
 
-    <div id="container">
-        <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>
-            Run detection model:
-            <a id="use-model"><button class="btn btn-default">On/Off</button></a>
-            <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>
-            <a id="reset-cam"><button class="btn btn-default">Reset camera</button></a>
-        </form>
-    </div>
-{% endblock %}
-
-{% 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>
-
-    {{ super() }}
-{% endblock %}
+{{ super() }} {% endblock %}