added support for picture resizing

diff --git a/doc/requirements.txt b/doc/requirements.txt
index 1cc3e5b768e3396087b60811943d65057c87f165..488513ed7fc1484d5b73f0c026d701d0156bed34 100644 (file)
--- a/doc/requirements.txt
+++ b/doc/requirements.txt
@@ -1,6 +1,7 @@
 python >= 2.6
 tornado
 jinja2
+pil
 
 ffmpeg
 motion

diff --git a/src/handlers.py b/src/handlers.py
index fb223a0ecfc3f8854abc908d63fadfba942f57f6..5bd95e8a288998d2f70768ff851ab4e9f34ed6c0 100644 (file)
--- a/src/handlers.py
+++ b/src/handlers.py
@@ -19,8 +19,10 @@ import base64
 import json
 import logging
 import os
+import StringIO
 
 from tornado.web import RequestHandler, HTTPError, asynchronous
+from PIL import Image
 
 import config
 import mediafiles
@@ -690,11 +692,24 @@ class PictureHandler(BaseHandler):
         
         else:
             content = mediafiles.get_media_content(camera_config, filename)
-            
-            # TODO add support for ?width=, ?height=
-        
             self.set_header('Content-Type', 'image/jpeg')
-            self.finish(content)
+            
+            width = self.get_argument('width', None)
+            height = self.get_argument('height', None)
+            
+            if width is None and height is None:
+                return self.finish(content)
+            
+            sio = StringIO.StringIO(content)
+            image = Image.open(sio)
+            
+            width = width and int(width) or image.size[0]
+            height = height and int(height) or image.size[1]
+
+            image.thumbnail((width, height), Image.ANTIALIAS)
+
+            image.save(self, format='JPEG')
+            self.finish()
 
 
 class MovieHandler(BaseHandler):

diff --git a/static/js/main.js b/static/js/main.js
index 29731905b2dee9026707413f475e1dba4263e42f..f1fd3250f578b472d881b9032a92006a388df164 100644 (file)
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1381,6 +1381,12 @@ function runMediaDialog(cameraId, mediaType) {
         var keys = Object.keys(groups);
         keys.sort();
         
+        /* add a temporary div to compute 3em in px */
+        var tempDiv = $('<div style="width: 3em; height: 3em;"></div>');
+        $('div.modal-container').append(tempDiv);
+        var height = tempDiv.height();
+        tempDiv.remove();
+        
         keys.forEach(function (key) {
             if (key) {
                 var groupDiv = $('<div class="media-list-group-title">' + key + '</div>');
@@ -1393,7 +1399,7 @@ function runMediaDialog(cameraId, mediaType) {
             entries.forEach(function (entry, pos) {
                 var entryDiv = $('<div class="media-list-entry"></div>');
                 
-                var previewImg = $('<img class="media-list-preview" src="/' + mediaType + '/' + cameraId + '/preview' + entry.path + '"/>');
+                var previewImg = $('<img class="media-list-preview" src="/' + mediaType + '/' + cameraId + '/preview' + entry.path + '?height=' + height + '"/>');
                 entryDiv.append(previewImg);
                 
                 var downloadButton = $('<div class="media-list-download-button button">download</div>');