Simple UI to see the difference and the two images

changedetectionio/__init__.py

@@ -807,6 +807,26 @@ def changedetection_app(config=None, datastore_o=None):
 
         return output
 
+
+    # render an image which contains the diff of two images
+    # We always compare the newest against whatever compare_date we are given
+    @app.route("/diff/show-image/<string:uuid>/<string:datestr>")
+    def show_single_image(uuid, datestr):
+
+        from flask import make_response
+        watch = datastore.data['watching'][uuid]
+
+        if datestr == 'None' or datestr is None:
+            datestr = list(watch['history'].keys())[0]
+
+        fname = watch['history'][datestr]
+        with open(fname, 'rb') as f:
+            resp = make_response(f.read())
+            
+        # @todo assumption here about the type, re-encode? detect?
+        resp.headers['Content-Type'] = 'image/jpeg'
+        return resp
+
     # render an image which contains the diff of two images
     # We always compare the newest against whatever compare_date we are given
     @app.route("/diff/image/<string:uuid>/<string:compare_date>")
@@ -819,10 +839,10 @@ def changedetection_app(config=None, datastore_o=None):
 
         # @todo this is weird
         if compare_date == 'None' or compare_date is None:
-            second_date = list(watch['history'].keys())[0]
+            compare_date = list(watch['history'].keys())[0]
 
         new_img = watch['history'][newest]
-        prev_img = watch['history'][second_date]
+        prev_img = watch['history'][compare_date]
         img = image_diff.render_diff(new_img, prev_img)
 
         resp = make_response(img)

changedetectionio/image_diff.py

@@ -38,4 +38,4 @@ def render_diff(fpath_imageA, fpath_imageB):
 		cv2.rectangle(imageB, (x, y), (x + w, y + h), (0, 0, 255), 2)
 
 	#return cv2.imencode('.jpg', imageB)[1].tobytes()
-	return cv2.imencode('.jpg', imageB)[1].tobytes()
+	return cv2.imencode('.jpg', imageA)[1].tobytes()

changedetectionio/templates/diff-image.html

@@ -24,6 +24,15 @@
 
 <div id="diff-ui">
   <img style="max-width: 100%" src="{{ url_for('render_diff_image', uuid=uuid, compare_date=current_previous_version) }}" />
+
+    <div>
+        <span style="width: 50%">
+            <img style="max-width: 100%" src="{{ url_for('show_single_image', uuid=uuid, datestr=newest_version_timestamp) }}" />
+        </span>
+        <span style="width: 50%">
+            <img style="max-width: 100%" src="{{ url_for('show_single_image', uuid=uuid, datestr=current_previous_version) }}" />
+        </span>
+    </div>
 </div>