From 76f2021618c0a6a99a1b855233e353e84ca99467 Mon Sep 17 00:00:00 2001
From: Pushkar Joshi
Date: Tue, 13 Mar 2012 11:23:32 -0700
Subject: Add a smoothing amount parameter, and hide options based on
checkboxes
---
.../brush-properties.reel/brush-properties.html | 24 ++++++++++++++---
.../brush-properties.reel/brush-properties.js | 30 ++++++++++++++++++++++
js/lib/geom/brush-stroke.js | 17 ++++++------
js/tools/BrushTool.js | 9 ++++---
4 files changed, 66 insertions(+), 14 deletions(-)
diff --git a/js/components/tools-properties/brush-properties.reel/brush-properties.html b/js/components/tools-properties/brush-properties.reel/brush-properties.html
index 608111bd..cbe4c242 100755
--- a/js/components/tools-properties/brush-properties.reel/brush-properties.html
+++ b/js/components/tools-properties/brush-properties.reel/brush-properties.html
@@ -33,7 +33,8 @@
"maxValue": 100,
"value": 100,
"decimalPlace": 10,
- "acceptableUnits" : ["px", "pt"]
+ "acceptableUnits" : ["%"],
+ "units" : "%"
}
},
@@ -46,6 +47,20 @@
"maxValue": 90,
"value": 0,
"decimalPlace": 10,
+ "acceptableUnits" : ["deg."],
+ "units" : "deg."
+ }
+ },
+
+ "smoothingAmountHT": {
+ "module": "js/components/hottextunit.reel",
+ "name": "HotTextUnit",
+ "properties": {
+ "element": {"#": "smoothingAmount"},
+ "minValue": 0,
+ "maxValue": 100,
+ "value": 0,
+ "decimalPlace": 10,
"acceptableUnits" : ["px", "pt"]
}
},
@@ -58,8 +73,10 @@
"_strokeSize": {"@": "strokeSizeHT"},
"_strokeHardness": {"@": "strokeHardnessHT"},
"_doSmoothing": {"#": "doSmoothing"},
+ "_smoothingAmount": {"@": "smoothingAmountHT"},
"_useCalligraphic":{"#": "useCalligraphic"},
- "_strokeAngle": {"@": "strokeAngleHT"}
+ "_strokeAngle": {"@": "strokeAngleHT"},
+ "_angleLabel": {"#": "angleLabel"}
}
}
}
@@ -75,8 +92,9 @@
+
-
+
diff --git a/js/components/tools-properties/brush-properties.reel/brush-properties.js b/js/components/tools-properties/brush-properties.reel/brush-properties.js
index e6faa0f0..fdcd50f8 100755
--- a/js/components/tools-properties/brush-properties.reel/brush-properties.js
+++ b/js/components/tools-properties/brush-properties.reel/brush-properties.js
@@ -9,6 +9,33 @@ var Component = require("montage/ui/component").Component;
var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
exports.BrushProperties = Montage.create(ToolProperties, {
+ _subPrepare: {
+ value: function() {
+ this.handleChange(null);
+ this._useCalligraphic.addEventListener("change", this, false);
+ this._doSmoothing.addEventListener("change", this, false);
+ }
+ },
+ handleChange: {
+ value: function(event) {
+ if(this._useCalligraphic.checked) {
+ this._strokeAngle.element.style["display"] = "";
+ this._strokeAngle.visible = true;
+ this._angleLabel.style["display"] = "";
+ } else {
+ this._strokeAngle.element.style["display"] = "none";
+ this._strokeAngle.visible = false;
+ this._angleLabel.style["display"] = "none";
+ }
+ if(this._doSmoothing.checked) {
+ this._smoothingAmount.element.style["display"] = "";
+ this._smoothingAmount.visible = true;
+ } else {
+ this._smoothingAmount.element.style["display"] = "none";
+ this._smoothingAmount.visible = false;
+ }
+ }
+ },
strokeSize: {
get: function() { return this._strokeSize; }
},
@@ -18,6 +45,9 @@ exports.BrushProperties = Montage.create(ToolProperties, {
doSmoothing:{
get: function() {return this._doSmoothing.checked; }
},
+ smoothingAmount:{
+ get: function() {return this._smoothingAmount;}
+ },
useCalligraphic: {
get: function() {return this._useCalligraphic.checked;}
},
diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js
index 4c42539a..52f81ffe 100755
--- a/js/lib/geom/brush-stroke.js
+++ b/js/lib/geom/brush-stroke.js
@@ -39,10 +39,7 @@ var BrushStroke = function GLBrushStroke() {
this._strokeDoSmoothing = false;
this._strokeUseCalligraphic = false;
this._strokeAngle = 0;
-
- //the wetness of the brush (currently this is multiplied to the square of the stroke width, but todo should be changed to not depend on stroke width entirely
- //smaller value means more samples for the path
- this._WETNESS_FACTOR = 0.25;
+ this._strokeAmountSmoothing = 0;
//threshold that tells us whether two samples are too far apart
this._MAX_SAMPLE_DISTANCE_THRESHOLD = 5;
@@ -125,7 +122,7 @@ var BrushStroke = function GLBrushStroke() {
//add the point only if it is some epsilon away from the previous point
var numPoints = this._Points.length;
if (numPoints>0) {
- var threshold = this._MIN_SAMPLE_DISTANCE_THRESHOLD;//this._WETNESS_FACTOR*this._strokeWidth;
+ var threshold = this._MIN_SAMPLE_DISTANCE_THRESHOLD;
var prevPt = this._Points[numPoints-1];
var diffPt = [prevPt[0]-pt[0], prevPt[1]-pt[1]];
var diffPtMag = Math.sqrt(diffPt[0]*diffPt[0] + diffPt[1]*diffPt[1]);
@@ -196,6 +193,10 @@ var BrushStroke = function GLBrushStroke() {
this._strokeDoSmoothing = s;
}
+ this.setSmoothingAmount = function(a){
+ this._strokeAmountSmoothing = a;
+ }
+
this.setStrokeUseCalligraphic = function(c){
this._strokeUseCalligraphic = c;
}
@@ -252,7 +253,7 @@ var BrushStroke = function GLBrushStroke() {
//**** add samples to the path if needed...linear interpolation for now
//if (numPoints>1) {
if (0){
- var threshold = this._WETNESS_FACTOR*this._strokeWidth;
+ var threshold = this._MAX_SAMPLE_DISTANCE_THRESHOLD;
var prevPt = this._Points[0];
var prevIndex = 0;
for (var i=1;i1) {
@@ -330,7 +331,7 @@ var BrushStroke = function GLBrushStroke() {
console.log("Inserted "+numInsertedPoints+" additional CatmullRom points");
//now do 3-4 iterations of Laplacian smoothing (setting the points to the average of their neighbors)
- var numLaplacianIterations = 3; //todo figure out the proper number of Laplacian iterations (perhaps as a function of stroke width)
+ var numLaplacianIterations = this._strokeAmountSmoothing;
for (var n=0;n1) {
- if (0){
- var threshold = this._MAX_SAMPLE_DISTANCE_THRESHOLD;
- var prevPt = this._Points[0];
- var prevIndex = 0;
- for (var i=1;ithreshold){
- //insert points along the prev. to current point
- var numNewPoints = Math.floor(distance/threshold);
- for (var j=0;j this._MAX_ALLOWED_SAMPLES){
- console.log("leaving the resampling because numPoints is greater than limit:"+this._MAX_ALLOWED_SAMPLES);
- break;
+ var numPoints = this._Points.length;
+ if (this._addedSamples === false){
+ //**** add samples to the long sections of the path --- Catmull-Rom spline interpolation *****
+ // instead of the following, may use 4-point subdivision iterations over continuous regions of 'long' segments
+ // look at http://www.gvu.gatech.edu/~jarek/Split&Tweak/ for formula
+
+ var numInsertedPoints = 0;
+ var newSampledPoints = [];
+ var threshold = this._MAX_SAMPLE_DISTANCE_THRESHOLD;//this determines whether a segment between two sample is long enough to warrant checking for angle
+ var prevPt = this._Points[0];
+ newSampledPoints.push(this._Points[0]);
+ for (var i=1;ithreshold){
+ //build the control polygon for the Catmull-Rom spline (prev. 2 points and next 2 points)
+ var prev = (i===1) ? i-1 : i-2;
+ var next = (i===numPoints-1) ? i : i+1;
+ var ctrlPts = [this._Points[prev], this._Points[i-1], this._Points[i], this._Points[next]];
+ //insert points along the prev. to current point
+ var numNewPoints = Math.floor(distance/threshold);
+ for (var j=0;j this._MAX_ALLOWED_SAMPLES){
+ // console.log("leaving the resampling because numPoints is greater than limit:"+this._MAX_ALLOWED_SAMPLES);
+ // break;
+ //}
}
+ this._Points = newSampledPoints.slice(0);
+ newSampledPoints = [];
+ console.log("Inserted "+numInsertedPoints+" additional CatmullRom points");
+ this._addedSamples = true;
+ this._dirty=true;
+ }
+ //build a copy of the original points...this should be done only once
+ if (this._storedOrigPoints === false) {
+ this._OrigPoints = this._Points.slice(0);
+ this._storedOrigPoints = true;
+ }
- //instead of the following, may use 4-point subdivision iterations over continuous regions of 'long' segments
- // look at http://www.gvu.gatech.edu/~jarek/Split&Tweak/ for formula
- //**** add samples to the long sections of the path --- Catmull-Rom spline interpolation
+ if (this._dirty) {
+ this._Points = this._OrigPoints.slice(0);
+ numPoints = this._Points.length;
if (this._strokeDoSmoothing && numPoints>1) {
- var numInsertedPoints = 0;
- var newPoints = [];
- var threshold = this._MAX_SAMPLE_DISTANCE_THRESHOLD;//this determines whether a segment between two sample is long enough to warrant checking for angle
- var prevPt = this._Points[0];
- newPoints.push(this._Points[0]);
- for (var i=1;ithreshold){
- //build the control polygon for the Catmull-Rom spline (prev. 2 points and next 2 points)
- var prev = (i===1) ? i-1 : i-2;
- var next = (i===numPoints-1) ? i : i+1;
- var ctrlPts = [this._Points[prev], this._Points[i-1], this._Points[i], this._Points[next]];
- //insert points along the prev. to current point
- var numNewPoints = Math.floor(distance/threshold);
- for (var j=0;j this._MAX_ALLOWED_SAMPLES){
- console.log("leaving the resampling because numPoints is greater than limit:"+this._MAX_ALLOWED_SAMPLES);
- break;
- }
- }
- this._Points = newPoints;
- numPoints = this._Points.length;
- console.log("Inserted "+numInsertedPoints+" additional CatmullRom points");
-
- //now do 3-4 iterations of Laplacian smoothing (setting the points to the average of their neighbors)
- var numLaplacianIterations = this._strokeAmountSmoothing;
+ //iterations of Laplacian smoothing (setting the points to the average of their neighbors)
+ var numLaplacianIterations = this._strokeAmountSmoothing;
for (var n=0;n */
-// Todo: This entire class should be converted to a module
var VecUtils = require("js/helper-classes/3D/vec-utils").VecUtils;
var GeomObj = require("js/lib/geom/geom-obj").GeomObj;
+var CanvasController = require("js/controllers/elements/canvas-controller").CanvasController;
+
+// Todo: This entire class should be converted to a module
///////////////////////////////////////////////////////////////////////
// Class GLBrushStroke
@@ -28,7 +30,10 @@ var BrushStroke = function GLBrushStroke() {
//whether or not to use the canvas drawing to stroke/fill
this._useCanvasDrawing = true;
- //the X and Y location of this subpath's canvas in stage world space of Ninja
+ //the HTML5 canvas that holds this brush stroke
+ this._canvas = null;
+
+ //the X and Y location of this brush stroke canvas in stage world space of Ninja
this._canvasX = 0;
this._canvasY = 0;
@@ -65,6 +70,10 @@ var BrushStroke = function GLBrushStroke() {
/////////////////////////////////////////////////////////
// Property Accessors/Setters
/////////////////////////////////////////////////////////
+ this.setCanvas = function(c) {
+ this._canvas = c;
+ }
+
this.setWorld = function (world) {
this._world = world;
};
@@ -195,6 +204,9 @@ var BrushStroke = function GLBrushStroke() {
this._dirty = true;
}
}
+ this.getStrokeHardness = function(){
+ return this._strokeHardness;
+ }
this.setDoSmoothing = function(s){
if (this._strokeDoSmoothing!==s) {
@@ -203,12 +215,19 @@ var BrushStroke = function GLBrushStroke() {
}
}
+ this.getDoSmoothing = function(){
+ return this._strokeDoSmoothing;
+ }
+
this.setSmoothingAmount = function(a){
if (this._strokeAmountSmoothing!==a) {
this._strokeAmountSmoothing = a;
this._dirty = true;
}
+ }
+ this.getSmoothingAmount = function(){
+ return this._strokeAmountSmoothing;
}
this.setStrokeUseCalligraphic = function(c){
@@ -225,6 +244,14 @@ var BrushStroke = function GLBrushStroke() {
};
}
+ this.getStrokeUseCalligraphic = function(){
+ return this._strokeUseCalligraphic;
+ }
+
+ this.getStrokeAngle = function(){
+ this._strokeAngle = a;
+ }
+
this.getStrokeStyle = function () {
return this._strokeStyle;
};
@@ -301,12 +328,13 @@ var BrushStroke = function GLBrushStroke() {
console.log("Inserted "+numInsertedPoints+" additional CatmullRom points");
this._addedSamples = true;
this._dirty=true;
- }
+ } //if we need to add samples to this curve (done only once)
+
//build a copy of the original points...this should be done only once
if (this._storedOrigPoints === false) {
this._OrigPoints = this._Points.slice(0);
this._storedOrigPoints = true;
- }
+ } //if we need to store a copy of the original points (done only once)
if (this._dirty) {
this._Points = this._OrigPoints.slice(0);
@@ -377,7 +405,7 @@ var BrushStroke = function GLBrushStroke() {
// get the context
var ctx = world.get2DContext();
- if (!ctx) throw ("null context in brushstroke render")
+ if (!ctx) throw ("null context in brushstroke render");
var numPoints = this.getNumPoints();
if (numPoints === 0) {
@@ -391,6 +419,14 @@ var BrushStroke = function GLBrushStroke() {
var bboxMax = this.getBBoxMax();
var bboxWidth = bboxMax[0] - bboxMin[0];
var bboxHeight = bboxMax[1] - bboxMin[1];
+
+ //assign the new width and height as the canvas dimensions through the canvas controller
+ if (this._canvas) {
+ CanvasController.setProperty(this._canvas, "width", bboxWidth+"px");
+ CanvasController.setProperty(this._canvas, "height", bboxHeight+"px");
+ this._canvas.elementModel.shapeModel.GLWorld.setViewportFromCanvas(this._canvas);
+ }
+
ctx.clearRect(0, 0, bboxWidth, bboxHeight);
if (this._strokeUseCalligraphic) {
diff --git a/js/lib/geom/sub-path.js b/js/lib/geom/sub-path.js
index 017cca92..e95be0e7 100755
--- a/js/lib/geom/sub-path.js
+++ b/js/lib/geom/sub-path.js
@@ -6,7 +6,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
var VecUtils = require("js/helper-classes/3D/vec-utils").VecUtils;
-
+var CanvasController = require("js/controllers/elements/canvas-controller").CanvasController;
var GeomObj = require("js/lib/geom/geom-obj").GeomObj;
var AnchorPoint = require("js/lib/geom/anchor-point").AnchorPoint;
var MaterialsModel = require("js/models/materials-model").MaterialsModel;
@@ -61,6 +61,9 @@ var GLSubpath = function GLSubpath() {
//whether or not to use the canvas drawing to stroke/fill
this._useCanvasDrawing = true;
+ //the canvas that will draw this subpath
+ this._canvas = null;
+
//the X and Y location of this subpath's canvas in stage world space of Ninja
this._canvasX = 0;
this._canvasY = 0;
@@ -131,6 +134,11 @@ var GLSubpath = function GLSubpath() {
var bboxHeight = bboxMax[1] - bboxMin[1];
var bboxMid = [0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])];
+ if (this._canvas) {
+ CanvasController.setProperty(this._canvas, "width", bboxWidth+"px");
+ CanvasController.setProperty(this._canvas, "height", bboxHeight+"px");
+ this._canvas.elementModel.shapeModel.GLWorld.setViewportFromCanvas(this._canvas);
+ }
ctx.clearRect(0, 0, bboxWidth, bboxHeight);
ctx.lineWidth = this._strokeWidth;
@@ -144,6 +152,7 @@ var GLSubpath = function GLSubpath() {
//ctx.fillStyle = MathUtils.colorToHex( this._fillColor );
var fillColorStr = "rgba("+parseInt(255*this._fillColor[0])+","+parseInt(255*this._fillColor[1])+","+parseInt(255*this._fillColor[2])+","+this._fillColor[3]+")";
ctx.fillStyle = fillColorStr;
+ console.log("Fill color:" + fillColorStr);
}
var lineCap = ['butt','round','square'];
ctx.lineCap = lineCap[1];
@@ -256,6 +265,10 @@ GLSubpath.prototype = new GeomObj();
/////////////////////////////////////////////////////////
// Property Accessors/Setters
/////////////////////////////////////////////////////////
+GLSubpath.prototype.setCanvas = function (c) {
+ this._canvas = c;
+};
+
GLSubpath.prototype.setWorld = function (world) {
this._world = world;
};
@@ -773,6 +786,7 @@ GLSubpath.prototype.getStrokeWidth = function () {
GLSubpath.prototype.setStrokeWidth = function (w) {
this._strokeWidth = w;
+ this._dirty=true;
};
GLSubpath.prototype.getStrokeMaterial = function () {
diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js
index c93672a9..90010cdf 100644
--- a/js/tools/BrushTool.js
+++ b/js/tools/BrushTool.js
@@ -266,6 +266,7 @@ exports.BrushTool = Montage.create(ShapeTool, {
var brushStroke = this._selectedBrushStroke;
if (brushStroke){
brushStroke.setWorld(world);
+ brushStroke.setCanvas(newCanvas);
brushStroke.setPlaneMatrix(planeMat);
var planeMatInv = glmat4.inverse( planeMat, [] );
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js
index e239b3f1..779b7f16 100755
--- a/js/tools/PenTool.js
+++ b/js/tools/PenTool.js
@@ -467,9 +467,9 @@ exports.PenTool = Montage.create(ShapeTool, {
if (this.application.ninja.colorController.colorToolbar.stroke.webGlColor){
this._selectedSubpath.setStrokeColor(this.application.ninja.colorController.colorToolbar.stroke.webGlColor);
}
- //if (this.application.ninja.colorController.colorToolbar.fill.webGlColor){
- // this._selectedSubpath.setFillColor(this.application.ninja.colorController.colorToolbar.fill.webGlColor);
- //}
+ if (this.application.ninja.colorController.colorToolbar.fill.webGlColor){
+ this._selectedSubpath.setFillColor(this.application.ninja.colorController.colorToolbar.fill.webGlColor);
+ }
} //if this is a new path being rendered
this._selectedSubpath.makeDirty();
@@ -594,6 +594,7 @@ exports.PenTool = Montage.create(ShapeTool, {
var subpath = this._selectedSubpath; //new GLSubpath();
subpath.setWorld(world);
+ subpath.setCanvas(newCanvas);
subpath.setPlaneMatrix(planeMat);
var planeMatInv = glmat4.inverse( planeMat, [] );
subpath.setPlaneMatrixInverse(planeMatInv);
@@ -614,7 +615,7 @@ exports.PenTool = Montage.create(ShapeTool, {
if(strokeColor) {
newCanvas.elementModel.shapeModel.border = this.application.ninja.colorController.colorToolbar.stroke;
}
- newCanvas.elementModel.shapeModel.strokeMaterial = this._selectedBrushStroke.getStrokeMaterial();
+ newCanvas.elementModel.shapeModel.strokeMaterial = subpath.getStrokeMaterial();
newCanvas.elementModel.shapeModel.GLGeomObj = subpath;
newCanvas.elementModel.shapeModel.useWebGl = this.options.use3D;
--
cgit v1.2.3
From 725bb869618b9e0ebb2820a24bca5d1cf53a4810 Mon Sep 17 00:00:00 2001
From: Armen Kesablyan
Date: Thu, 15 Mar 2012 15:14:28 -0700
Subject: Initial Data Binding Mediator
Signed-off-by: Armen Kesablyan
---
js/mediators/binding-mediator.js | 14 ++++++++++++++
js/mediators/keyboard-mediator.js | 2 ++
2 files changed, 16 insertions(+)
create mode 100644 js/mediators/binding-mediator.js
diff --git a/js/mediators/binding-mediator.js b/js/mediators/binding-mediator.js
new file mode 100644
index 00000000..10d3f7c6
--- /dev/null
+++ b/js/mediators/binding-mediator.js
@@ -0,0 +1,14 @@
+/*
+ This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
+ */
+
+var Montage = require("montage/core/core").Montage;
+var Component = require("montage/ui/component").Component;
+
+exports.bindingMediator = Montage.create(Component, {
+
+
+
+});
\ No newline at end of file
diff --git a/js/mediators/keyboard-mediator.js b/js/mediators/keyboard-mediator.js
index 65dd34cd..85a46739 100755
--- a/js/mediators/keyboard-mediator.js
+++ b/js/mediators/keyboard-mediator.js
@@ -203,6 +203,8 @@ exports.KeyboardMediator = Montage.create(Component, {
}
+
+
if((evt.keyCode == Keyboard.ENTER) && (evt.ctrlKey || evt.metaKey)) {
this.application.ninja.executeChromePreview();
return;
--
cgit v1.2.3
From a0d23354802ebc6b437698acb4b18d3395d47cd1 Mon Sep 17 00:00:00 2001
From: hwc487
Date: Fri, 16 Mar 2012 12:26:30 -0700
Subject: Conversion to JSON based file IO for canvas2D and WebGL rendering
---
assets/canvas-runtime.js | 388 +++++++++-------------
js/document/html-document.js | 43 ++-
js/lib/drawing/world.js | 128 +++++++
js/lib/geom/circle.js | 72 +++-
js/lib/geom/geom-obj.js | 79 +++++
js/lib/geom/line.js | 53 ++-
js/lib/geom/rectangle.js | 87 ++++-
js/lib/rdge/materials/bump-metal-material.js | 44 +++
js/lib/rdge/materials/flat-material.js | 21 ++
js/lib/rdge/materials/linear-gradient-material.js | 53 +++
js/lib/rdge/materials/pulse-material.js | 32 ++
js/lib/rdge/materials/radial-blur-material.js | 36 ++
js/lib/rdge/materials/radial-gradient-material.js | 54 ++-
js/lib/rdge/materials/taper-material.js | 27 ++
js/lib/rdge/materials/twist-vert-material.js | 28 ++
js/lib/rdge/materials/uber-material.js | 185 ++++++++++-
js/models/materials-model.js | 32 +-
17 files changed, 1075 insertions(+), 287 deletions(-)
diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js
index fd823f35..dd4ad6f9 100644
--- a/assets/canvas-runtime.js
+++ b/assets/canvas-runtime.js
@@ -37,18 +37,15 @@ function CanvasDataManager()
for (var i=0; i= 0)
+ var jObj = JSON.parse( importStr );
+
+ var id = jObj.id;
+ if (id)
{
- var endIndex = importStr.indexOf( "\n", startIndex );
- if (endIndex > 0)
+ var canvas = this.findCanvasWithID( id, root );
+ if (canvas)
{
- var id = importStr.substring( startIndex+4, endIndex );
- var canvas = this.findCanvasWithID( id, root );
- if (canvas)
- {
- var rt = new GLRuntime( canvas, importStr, assetPath );
- }
+ new GLRuntime( canvas, jObj, assetPath );
}
}
}
@@ -95,14 +92,15 @@ function CanvasDataManager()
// Class GLRuntime
// Manages runtime fora WebGL canvas
///////////////////////////////////////////////////////////////////////
-function GLRuntime( canvas, importStr, assetPath )
+function GLRuntime( canvas, jObj, assetPath )
{
///////////////////////////////////////////////////////////////////////
// Instance variables
///////////////////////////////////////////////////////////////////////
this._canvas = canvas;
this._context = null;
- this._importStr = importStr;
+ //this._importStr = importStr;
+ this._jObj = jObj;
this.renderer = null;
this.myScene = null;
@@ -157,21 +155,19 @@ function GLRuntime( canvas, importStr, assetPath )
///////////////////////////////////////////////////////////////////////
this.loadScene = function()
{
+ var jObj = this._jObj;
+ if (!jObj.children || (jObj.children.length != 1))
+ throw new Error( "ill-formed JSON for runtime load: " + jObj );
+ var root = jObj.children[0];
+
// parse the data
- // the GL runtime must start with a "sceneData: "
- var index = importStr.indexOf( "scenedata: " );
- if (index >= 0)
+ if (jObj.scenedata)
{
this._useWebGL = true;
- var rdgeStr = importStr.substr( index+11 );
- var endIndex = rdgeStr.indexOf( "endscene\n" );
- if (endIndex < 0) throw new Error( "ill-formed WebGL data" );
- var len = endIndex - index + 11;
- rdgeStr = rdgeStr.substr( 0, endIndex );
-
+ var rdgeStr = jObj.scenedata;
this.myScene.importJSON( rdgeStr );
- this.importObjects( importStr );
+ this.importObjects( root );
this.linkMaterials( this._geomRoot );
this.initMaterials();
this.linkLights();
@@ -179,7 +175,7 @@ function GLRuntime( canvas, importStr, assetPath )
else
{
this._context = this._canvas.getContext( "2d" );
- this.importObjects( importStr );
+ this.importObjects( root );
this.render();
}
}
@@ -277,58 +273,42 @@ function GLRuntime( canvas, importStr, assetPath )
}
}
- this.importObjects = function( importStr, parent )
+ this.importObjects = function( jObj, parent )
{
- var index = importStr.indexOf( "OBJECT\n", 0 );
- while (index >= 0)
- {
- // update the string to the current object
- importStr = importStr.substr( index+7 );
+ // read the next object
+ var gObj = this.importObject( jObj, parent );
- // read the next object
- var obj = this.importObject( importStr, parent );
-
- // determine if we have children
- var endIndex = importStr.indexOf( "ENDOBJECT\n" ),
- childIndex = importStr.indexOf( "OBJECT\n" );
- if (endIndex < 0) throw new Error( "ill-formed object data" );
- if ((childIndex >= 0) && (childIndex < endIndex))
+ // load the children
+ if (jObj.children)
+ {
+ var nKids = jObj.children.length;
+ for (var i=0; i= 0)
- {
- rtnPath = url.substr( index + searchStr.length );
- rtnPath = this._assetPath + rtnPath;
- }
- return rtnPath;
- */
+// var searchStr = "assets/";
+// var index = url.indexOf( searchStr );
+// var rtnPath = url;
+// if (index >= 0)
+// {
+// rtnPath = url.substr( index + searchStr.length );
+// rtnPath = this._assetPath + rtnPath;
+// }
+// return rtnPath;
+
return url;
}
@@ -450,8 +429,7 @@ function GLRuntime( canvas, importStr, assetPath )
}
// start RDGE or load Canvas 2D objects
- var index = importStr.indexOf( "scenedata: " );
- this._useWebGL = (index >= 0);
+ if (jObj.scenedata) this._useWebGL = true;
if (this._useWebGL)
{
var id = canvas.getAttribute( "data-RDGE-id" );
@@ -515,16 +493,17 @@ function RuntimeGeomObj()
{
}
- this.importMaterials = function(importStr)
+ this.importMaterials = function(jObj)
{
- var nMaterials = Number( getPropertyFromString( "nMaterials: ", importStr ) );
+ var nMaterials = jObj.nMaterials;
+ var matArray = jObj.materials;
for (var i=0; i= 0)
- rtnStr = rtnStr.substr(0, index);
-
- return rtnStr;
-}
-
///////////////////////////////////////////////////////////////////////
// Class RuntimeRectangle
///////////////////////////////////////////////////////////////////////
@@ -685,26 +646,24 @@ function RuntimeRectangle()
this.inheritedFrom = RuntimeGeomObj;
this.inheritedFrom();
- this.import = function( importStr )
+ this.import = function( jObj )
{
- this._xOffset = Number( getPropertyFromString( "xoff: ", importStr ) );
- this._yOffset = Number( getPropertyFromString( "yoff: ", importStr ) );
- this._width = Number( getPropertyFromString( "width: ", importStr ) );
- this._height = Number( getPropertyFromString( "height: ", importStr ) );
- this._strokeWidth = Number( getPropertyFromString( "strokeWidth: ", importStr ) );
- this._innerRadius = Number( getPropertyFromString( "innerRadius: ", importStr ) );
- this._strokeStyle = Number( getPropertyFromString( "strokeStyle: ", importStr ) );
- var strokeMaterialName = getPropertyFromString( "strokeMat: ", importStr );
- var fillMaterialName = getPropertyFromString( "fillMat: ", importStr );
- this._strokeStyle = getPropertyFromString( "strokeStyle: ", importStr );
- this._fillColor = eval( "[" + getPropertyFromString( "fillColor: ", importStr ) + "]" );
- this._strokeColor = eval( "[" + getPropertyFromString( "strokeColor: ", importStr ) + "]" );
- this._tlRadius = Number( getPropertyFromString( "tlRadius: ", importStr ) );
- this._trRadius = Number( getPropertyFromString( "trRadius: ", importStr ) );
- this._blRadius = Number( getPropertyFromString( "blRadius: ", importStr ) );
- this._brRadius = Number( getPropertyFromString( "brRadius: ", importStr ) );
-
- this.importMaterials( importStr );
+ this._xOffset = jObj.xoff;
+ this._yOffset = jObj.yoff;
+ this._width = jObj.width;
+ this._height = jObj.height;
+ this._strokeWidth = jObj.strokeWidth;
+ this._strokeColor = jObj.strokeColor;
+ this._fillColor = jObj.fillColor;
+ this._tlRadius = jObj.tlRadius;
+ this._trRadius = jObj.trRadius;
+ this._blRadius = jObj.blRadius;
+ this._brRadius = jObj.brRadius;
+ this._innerRadius = jObj.innerRadius;
+ this._strokeStyle = jObj.strokeStyle;
+ var strokeMaterialName = jObj.strokeMat;
+