[feature] update image when effect applied

- use controller to update image being edited when effect is applied - update template to reflect changes in the image after applying effects
collinmutembei · Mar 14, 2016 · 09b6732 · 09b6732
1 parent 8ebe60b
commit 09b6732
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 56 deletions.
diff --git a/api/models/phedited.py b/api/models/phedited.py
@@ -53,26 +53,25 @@ class PheditedImage(models.Model):
     effects = models.CharField(max_length=500)
 
     def save(self, *args, **kwargs):
-        if self.original_image:
-            image_request = requests.get(self.original_image)
-            image_bytes = io.BytesIO(image_request.content)
-            image = Image.open(image_bytes)
-            image_with_effect = apply_effects(image, self.effects)
-            edited_image = io.BytesIO()
-            image_with_effect.save(edited_image, format=image.format)
-            filename = os.path.basename(self.original_image)
-            edited_file = InMemoryUploadedFile(
-                edited_image,
-                None,
-                filename,
-                'image/jpeg',
-                edited_image.tell,
-                None
-            )
+        image_request = requests.get(self.original_image)
+        image_bytes = io.BytesIO(image_request.content)
+        image = Image.open(image_bytes)
+        filename = os.path.basename(self.original_image)
+        image_with_effect = apply_effects(image, self.effects)
+        edited_image = io.BytesIO()
+        image_with_effect.save(edited_image, format=image.format)
+        edited_file = InMemoryUploadedFile(
+            edited_image,
+            None,
+            filename,
+            'image/jpeg',
+            edited_image.tell,
+            None
+        )
 
-            self.phedited_image.save(
-                filename,
-                edited_file,
-                save=False,
-            )
+        self.phedited_image.save(
+            filename,
+            edited_file,
+            save=False,
+        )
         super(PheditedImage, self).save(*args, **kwargs)
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
@@ -22,9 +22,9 @@
 <div id="content" class="container" ng-controller="MyCtrl">
     <div class="row effects-section">
         <div class="btn-group">
-            <label class="btn btn-primary" ng-model="effectsModel.BLUR" uib-btn-checkbox btn-checkbox-false ng-disabled="!(imageuploaded)">normal</label>
-            <label class="btn btn-primary" ng-model="effectsModel.CONTOUR" uib-btn-checkbox btn-checkbox-false ng-disabled="!(imageuploaded)">hefe</label>
-            <label class="btn btn-primary" ng-model="effectsModel.EMBOSS" uib-btn-checkbox btn-checkbox-false ng-disabled="!(imageuploaded)">inkwell</label>
+            <label class="btn btn-primary" ng-model="effectsModel.BLUR" uib-btn-checkbox btn-checkbox-false ng-disabled="!(imageuploaded)">blur</label>
+            <label class="btn btn-primary" ng-model="effectsModel.CONTOUR" uib-btn-checkbox btn-checkbox-false ng-disabled="!(imageuploaded)">contour</label>
+            <label class="btn btn-primary" ng-model="effectsModel.EMBOSS" uib-btn-checkbox btn-checkbox-false ng-disabled="!(imageuploaded)">emboss</label>
             <label class="btn btn-primary" ng-model="effectsModel.sharpen" uib-btn-checkbox btn-checkbox-false ng-disabled="!(imageuploaded)">willow</label>
             <label class="btn btn-primary" ng-model="effectsModel.sierra" uib-btn-checkbox btn-checkbox-false ng-disabled="!(imageuploaded)">sierra</label>
             <label class="btn btn-primary" ng-model="effectsModel.amaro" uib-btn-checkbox btn-checkbox-false ng-disabled="!(imageuploaded)">amaro</label>
@@ -55,12 +55,11 @@
                                 <div class="user-images">
                                     <div class="image" ng-if="$first">
                                         <div ng-if="image.image">
-                                            <input type="checkbox" ng-checked="currentimage(image.image)" ng-model="imageuploaded" class="hidden">
-                                            <img ng-src="{{image.image}}"/>
-                                            <div class="image-options">
+                                            <img ng-src="{{imageurl}}"/>
+                                            <!-- <div class="image-options">
                                                 <button type="button" class="btn btn-primary">apply</button>
                                                 <button type="button" class="btn btn-primary">save</button>
-                                            </div>
+                                            </div> -->
                                         </div>
                                     </div>
                                 </div>

diff --git a/app/templates/static/scripts/controller.js b/app/templates/static/scripts/controller.js
@@ -2,15 +2,36 @@ angular.module('pheditApp').controller('MyCtrl', ['$scope', 'Upload', 'MainServi
 
     $scope.imageuploaded = false;
 
-    $scope.currentimage = function(url){
-        $scope.imageurl = url
-    }
+    $scope.upload = function (file) {
+        Upload.upload({
+            url: '/api/images/',
+            data: {'image': file}
+        }).then(function (response) {
+            var $button = $("button");
+            $button.parent().addClass("clicked").delay(2000).queue(function(){
+                $scope.imageuploaded = true;
+                $scope.$emit('uploadComplete');
+            });
+            console.log('photo uploaded successfully');
+        }, function (error) {
+            console.log('photo uploaded error: ' + error.status);
+            //file fails to upload, display error message
+        });
+    };
 
     $scope.$on('uploadComplete', function () {
-        $scope.images = MainService.all_images.getImages();
+        MainService.all_images.getImages().
+        $promise.
+        then(function(result){
+            $scope.images = result
+            $scope.original_image = result[result.length - 1].image
+            $scope.imageurl = $scope.original_image
+        }).
+        catch(function(response){
+            console.log("failed to fetch images");
+        });
     });
 
-
     $scope.$watchCollection('effectsModel', function () {
         $scope.applyeffects = [];
         angular.forEach($scope.effectsModel, function (value, key) {
@@ -21,30 +42,18 @@ angular.module('pheditApp').controller('MyCtrl', ['$scope', 'Upload', 'MainServi
         $scope.$emit('addeffect');
     });
 
-
     $scope.$on('addeffect', function () {
-        console.log($scope.imageurl);
-        console.log($scope.applyeffects);
-        if ($scope.imageurl) {
-            MainService.image_effects.send_effects({'original_image_url': $scope.imageurl, 'effects': $scope.applyeffects});
+        if ($scope.original_image && $scope.applyeffects.length > 0) {
+            MainService.image_effects.send_effects({'original_image_url': $scope.original_image, 'effects': $scope.applyeffects}).
+            $promise.
+            then(function(result){
+                $scope.imageurl = result.phedited_image;
+            }).
+            catch(function(response){
+                console.log("failed to apply effects");
+            });
+        } else {
+            $scope.imageurl = $scope.original_image
         }
     });
-
-    $scope.upload = function (file) {
-        Upload.upload({
-            url: '/api/images/',
-            data: {'image': file}
-        }).then(function (resp) {
-            var $button = $("button");
-            $button.parent().addClass("clicked").delay(2600).queue(function(){
-                $(this).addClass("success");
-            });
-            $scope.$emit('uploadComplete');
-            $scope.imageuploaded = true;
-            console.log('file uploaded successfully');
-        }, function (resp) {
-            console.log('file uploaded error: ' + resp.status);
-            //file fails to upload, display error message
-        });
-    };
 }]);