From e52b0dcb9540b854a341a881de2d26aa753e9a82 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 22 Mar 2012 16:18:38 -0700 Subject: Adding checkbox in PI to start/stop WebGL animation preview. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 13 ++++++++++++ js/data/pi/pi-data.js | 30 ++++++++++++++++++++++++++++ js/models/shape-model.js | 3 ++- 3 files changed, 45 insertions(+), 1 deletion(-) diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index b3ac9ddb..9b2fa618 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -105,6 +105,18 @@ exports.ShapesController = Montage.create(CanvasController, { case "editFillMaterial": NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.fillMaterial.getName()}); break; + case "animate": + if(value) + { + el.elementModel.shapeModel.animate = true; + el.elementModel.shapeModel.GLWorld.restartRenderLoop(); + } + else + { + el.elementModel.shapeModel.animate = false; + el.elementModel.shapeModel.GLWorld._canvas.task.stop(); + } + break; default: CanvasController.setProperty(el, p, value); } @@ -123,6 +135,7 @@ exports.ShapesController = Montage.create(CanvasController, { case "border": case "background": case "useWebGl": + case "animate": return this.getShapeProperty(el, p); case "strokeMaterial": case "fillMaterial": diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js index 53fec3be..56337124 100755 --- a/js/data/pi/pi-data.js +++ b/js/data/pi/pi-data.js @@ -391,6 +391,16 @@ exports.PiData = Montage.create( Montage, { checked: false } ], + [ + { + type: "checkbox", + id: "animate", + prop: "animate", + defaultValue: true, + value: "Animate", + checked: true + } + ], [ { type: "dropdown", @@ -484,6 +494,16 @@ exports.PiData = Montage.create( Montage, { checked: false } ], + [ + { + type: "checkbox", + id: "animate", + prop: "animate", + defaultValue: true, + value: "Animate", + checked: true + } + ], [ { type: "dropdown", @@ -578,6 +598,16 @@ exports.PiData = Montage.create( Montage, { checked: false } ], + [ + { + type: "checkbox", + id: "animate", + prop: "animate", + defaultValue: true, + value: "Animate", + checked: true + } + ], [ { type: "dropdown", diff --git a/js/models/shape-model.js b/js/models/shape-model.js index 58a88fd0..ea8c2cfc 100755 --- a/js/models/shape-model.js +++ b/js/models/shape-model.js @@ -10,7 +10,8 @@ var Montage = require("montage/core/core").Montage, exports.ShapeModel = Montage.create(Component, { shapeCount: { value: 0 }, - useWebGl: { value: false }, + useWebGl: { value: false }, + animate: { value: true }, GLWorld: { value: null }, GLGeomObj: { value: null }, -- cgit v1.2.3 From ccbbf1318fcf21409f0b1841119b49fadd92f83d Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 22 Mar 2012 16:53:23 -0700 Subject: Start WebGL animation during live preview. And set WebGL animation back to user preference when closing live preview. Signed-off-by: Nivesh Rajbhandari --- js/ninja.reel/ninja.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index 2a6e49f7..7db2a82c 100755 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -166,6 +166,25 @@ exports.Ninja = Montage.create(Component, { this.currentDocument.documentRoot.elementModel.controller.setProperty(this.currentDocument.documentRoot, "overflow", overflow); this.currentDocument.documentRoot.elementModel.controller.changeSelector(this.currentDocument.documentRoot, "transitionStopRule", transitionStopRule); + this._toggleWebGlAnimation(this.appModel.livePreview); + } + }, + + // Turn on WebGL animation during preview + _toggleWebGlAnimation: { + value: function(inLivePreview) { + var glCanvases = this.currentDocument.iframe.contentWindow.document.querySelectorAll('[data-RDGE-id]'), + glShapeModel; + if(glCanvases) { + for(var i = 0, len = glCanvases.length; i --- js/components/checkbox.reel/checkbox.js | 21 +++++++++++++++++++++ js/data/pi/pi-data.js | 9 ++++++--- .../properties.reel/sections/custom.reel/custom.js | 13 +++++++++++++ 3 files changed, 40 insertions(+), 3 deletions(-) diff --git a/js/components/checkbox.reel/checkbox.js b/js/components/checkbox.reel/checkbox.js index f06e5830..be331f4e 100755 --- a/js/components/checkbox.reel/checkbox.js +++ b/js/components/checkbox.reel/checkbox.js @@ -58,6 +58,26 @@ exports.Checkbox = Montage.create(Component, { } }, + _enabled: { + enumerable: false, + value: true + }, + + enabled: { + enumerable: true, + serializable: true, + get: function() { + return this._enabled; + }, + set: function(value) { + if(value !== this._enabled) + { + this._enabled = value; + this.needsDraw = true; + } + } + }, + handleChange: { value:function(event) @@ -76,6 +96,7 @@ exports.Checkbox = Montage.create(Component, { draw: { value: function() { + this.element.disabled = !this._enabled; if(!this._valueSyncedWithInputField) { this.element.checked = this._checked; diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js index 56337124..52360302 100755 --- a/js/data/pi/pi-data.js +++ b/js/data/pi/pi-data.js @@ -398,7 +398,8 @@ exports.PiData = Montage.create( Montage, { prop: "animate", defaultValue: true, value: "Animate", - checked: true + checked: true, + enabled: { boundObject: "this.controls", boundProperty: "useWebGl" } } ], [ @@ -501,7 +502,8 @@ exports.PiData = Montage.create( Montage, { prop: "animate", defaultValue: true, value: "Animate", - checked: true + checked: true, + enabled: { boundObject: "this.controls", boundProperty: "useWebGl" } } ], [ @@ -605,7 +607,8 @@ exports.PiData = Montage.create( Montage, { prop: "animate", defaultValue: true, value: "Animate", - checked: true + checked: true, + enabled: { boundObject: "this.controls", boundProperty: "useWebGl" } } ], [ diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js index 703ef950..ac316907 100755 --- a/js/panels/properties.reel/sections/custom.reel/custom.js +++ b/js/panels/properties.reel/sections/custom.reel/custom.js @@ -328,6 +328,19 @@ exports.CustomSection = Montage.create(Component, { if (aField.value) obj.label = aField.value; if (aField.prop) obj.prop = aField.prop; + if (aField.enabled) { + if(aField.enabled.boundObject) { + // TODO - For now, always bind to this.controls[someProperty] + Object.defineBinding(obj, "enabled", { + boundObject: this.controls, + boundObjectPropertyPath: aField.enabled.boundProperty, + oneway: false + }); + } else { + obj.enabled = aField.enabled; + } + } + //Initiate onChange Events obj.addEventListener("change", this, false); -- cgit v1.2.3 From 8e9ac98ea1001289cb3834b262200eee253cb408 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 23 Mar 2012 11:41:11 -0700 Subject: Respect play/pause WebGL animation when saving files and re-rendering caused by geometry changes. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 2 ++ js/lib/drawing/world.js | 6 ++++++ js/ninja.reel/ninja.js | 2 ++ 3 files changed, 10 insertions(+) diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 9b2fa618..b060b751 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -109,11 +109,13 @@ exports.ShapesController = Montage.create(CanvasController, { if(value) { el.elementModel.shapeModel.animate = true; + el.elementModel.shapeModel.GLWorld._previewAnimation = true; el.elementModel.shapeModel.GLWorld.restartRenderLoop(); } else { el.elementModel.shapeModel.animate = false; + el.elementModel.shapeModel.GLWorld._previewAnimation = false; el.elementModel.shapeModel.GLWorld._canvas.task.stop(); } break; diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js index 07a2c3ae..b87c6272 100755 --- a/js/lib/drawing/world.js +++ b/js/lib/drawing/world.js @@ -117,6 +117,8 @@ var World = function GLWorld( canvas, use3D, preserveDrawingBuffer ) { this.getRenderer = function() { return this.renderer; }; + // Flag to play/pause animation at authortime + this._previewAnimation = true; //////////////////////////////////////////////////////////////////////////////////// // RDGE // local variables @@ -475,6 +477,10 @@ World.prototype.restartRenderLoop = function() { if (this._allMapsLoaded) { //console.log( "starting task" ); this._canvas.task.start(); + if(!this._previewAnimation) { + //render only once if authortime animation is turned off + this._canvas.task.stop(); + } } else { //console.log( "stopping task" ); this._canvas.task.stop(); diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index 7db2a82c..c76c7d46 100755 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -179,8 +179,10 @@ exports.Ninja = Montage.create(Component, { for(var i = 0, len = glCanvases.length; i