Issue/#1551

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

activities/Fototoon.activity/js/activity.js

@@ -109,7 +109,8 @@ define(["sugar-web/activity/activity","sugar-web/datastore","sugar-web/env","tex
 						element.src = text;
 					}
 					element.onload = function () {
-						toonModel.addImage(element.src);
+                        toonModel.addGlobe(element.src);
+						// toonModel.addImage(element.src);
 					};
 				});
 			}, { mimetype: 'image/png' }, { mimetype: 'image/jpeg' }, { activity: 'org.olpcfrance.PaintActivity'});

activities/Fototoon.activity/js/toon.js

@@ -626,7 +626,7 @@ define(["easel","sugar-web/datastore","sugar-web/env","webL10n","humane"], funct
             });
         };
 
-        this.addGlobe = function (globeType) {
+        this.addGlobe = function (globeType, imageSrc) {
             var width = 100;
             var height = 50;
             globeData = {'globe_type': globeType, 'x': 100, 'y': 100,
@@ -640,9 +640,9 @@ define(["easel","sugar-web/datastore","sugar-web/env","webL10n","humane"], funct
                 globeData['mode'] = MODE_WHISPER;
             };
 
-            var globe = new Globe(this, globeData);
+            var globe = new Globe(this, globeData, imageSrc);
             this.globes.push(globe);
-            this.stage.update();
+            this.stage.update(imageSrc);
         };
 
         this.getJson = function() {
@@ -936,7 +936,7 @@ define(["easel","sugar-web/datastore","sugar-web/env","webL10n","humane"], funct
     };
 
 
-    function Globe(box, globeData) {
+    function Globe(box, globeData, imageSrc) {
         this._box = box;
         this._stage = box.stage;
         this._shapeControls = null;
@@ -1001,7 +1001,7 @@ define(["easel","sugar-web/datastore","sugar-web/env","webL10n","humane"], funct
             this._shape = null;
         };
 
-        this.createShape = function() {
+        this.createShape = function(imageSrc) {
             if (this._shape != null) {
                 this._stage.removeChild(this._shape);
                 if (this._type == TYPE_CLOUD) {
@@ -1019,10 +1019,10 @@ define(["easel","sugar-web/datastore","sugar-web/env","webL10n","humane"], funct
                 this.createShapeCloud(scaled_x, scaled_y, scale_x, scale_y);
             } else if (this._type == TYPE_EXCLAMATION) {
                 this.createShapeExclamation(scaled_x, scaled_y, scale_x, scale_y);
-            } else if (this._type == TYPE_RECTANGLE) {
-                this.createShapeRectangle();
-            } else {
+            } else if (this._type == TYPE_GLOBE) {
                 this.createShapeGlobe(scaled_x, scaled_y, scale_x, scale_y);
+            } else {
+                this.createShapeRectangle(imageSrc);
             };
 
             this._shape.on('click', function(event) {
@@ -1115,19 +1115,33 @@ define(["easel","sugar-web/datastore","sugar-web/env","webL10n","humane"], funct
             this._shape.setTransform(0, 0, scale_x, scale_y);
         };
 
-        this.createShapeRectangle = function() {
+        this.createShapeRectangle = function(imageSrc) {
             var x = this._x;
             var y = this._y;
             var w = this._width;
             var h = this._height;
+
 
             this._shape = new createjs.Shape();
             this._shape.name = 'rect';
             this._stage.addChild(this._shape);
             this._shape.graphics.setStrokeStyle(LINE_WIDTH, "round",
                                                 null, null, true);
             this._shape.graphics.beginStroke(BLACK);
-            this._shape.graphics.beginFill(WHITE);
+
+            var image = document.createElement("img");
+            image.crossOrigin = "Anonymous"; // Should work fine
+            image.src = imageSrc;
+            var bitmap = new createjs.Bitmap(image);
+
+            // var bitmap = new createjs.Bitmap(image);
+            bitmap.x = x - w;
+            bitmap.y = y - h;
+            bitmap.scaleX = image.width;
+            bitmap.scaleY = image.height;
+
+            this._shape.graphics.beginBitmapFill(bitmap.image, "no-repeat");
+            if(!imageSrc) this._shape.graphics.beginFill(WHITE);
 
             this._shape.graphics.rect(x - w , y - h, w * 2, h * 2);
             this._shape.graphics.endStroke();
@@ -1504,8 +1518,8 @@ define(["easel","sugar-web/datastore","sugar-web/env","webL10n","humane"], funct
             };
         };
 
-        this.update = function() {
-            this.createShape();
+        this.update = function(imageSrc) {
+            this.createShape(imageSrc);
             this._textViewer.update();
             this.createControls();
             this._stage.update();
@@ -1577,7 +1591,7 @@ define(["easel","sugar-web/datastore","sugar-web/env","webL10n","humane"], funct
         };
 
         this.init();
-        this.update();
+        this.update(imageSrc);
     };
 
 

v2/js/screens/loginscreen.js

@@ -344,5 +344,4 @@ const LoginScreen = {
 			}
 		}
 	},
-};
-
+};

v2/js/screens/mainscreen.js

@@ -1,6 +1,6 @@
 /* @ MainScreen
  @desc This is the main screen component */
-const MainScreen = {
+ const MainScreen = {
 	name: 'MainScreen',
 	template: ` <div class="toolbar ">
 					<div class="tool_leftitems">
@@ -168,4 +168,4 @@ const MainScreen = {
 	},
 };
 
-if (typeof module !== 'undefined') module.exports = { MainScreen }
+if (typeof module !== 'undefined') module.exports = { MainScreen }