From 07c48708a99b94a220c043ad5951a331bbd4fc2d Mon Sep 17 00:00:00 2001 From: hwc487 Date: Wed, 29 Feb 2012 15:23:28 -0800 Subject: WebGL file I/O --- js/document/html-document.js | 2 +- js/helper-classes/RDGE/GLRectangle.js | 8 +- js/helper-classes/RDGE/GLWorld.js | 5 +- .../RDGE/runtime/CanvasDataManager.js | 10 ++- js/helper-classes/RDGE/runtime/GLRuntime.js | 87 ++++++++++++++-------- 5 files changed, 70 insertions(+), 42 deletions(-) diff --git a/js/document/html-document.js b/js/document/html-document.js index 76436732..7dd28385 100755 --- a/js/document/html-document.js +++ b/js/document/html-document.js @@ -185,7 +185,7 @@ exports.HTMLDocument = Montage.create(TextDocument, { var elt = this.documentRoot; if (elt) { - console.log( "load canvas data: " , value ); + //console.log( "load canvas data: " , value ); var cdm = new CanvasDataManager(); cdm.loadGLData(elt, value); } diff --git a/js/helper-classes/RDGE/GLRectangle.js b/js/helper-classes/RDGE/GLRectangle.js index a801d3c4..f44350df 100755 --- a/js/helper-classes/RDGE/GLRectangle.js +++ b/js/helper-classes/RDGE/GLRectangle.js @@ -274,10 +274,10 @@ function GLRectangle() brRadius = -z*(r-l)/(2.0*zn)*brRadiusNDC; // stroke - var strokeMaterial = this.makeStrokeMaterial(); - var strokePrim = this.createStroke([x,y], 2*xFill, 2*yFill, strokeSize, tlRadius, blRadius, brRadius, trRadius, strokeMaterial); - this._primArray.push( strokePrim ); - this._materialNodeArray.push( strokeMaterial.getMaterialNode() ); +// var strokeMaterial = this.makeStrokeMaterial(); +// var strokePrim = this.createStroke([x,y], 2*xFill, 2*yFill, strokeSize, tlRadius, blRadius, brRadius, trRadius, strokeMaterial); +// this._primArray.push( strokePrim ); +// this._materialNodeArray.push( strokeMaterial.getMaterialNode() ); // fill tlRadius -= strokeSize; if (tlRadius < 0) tlRadius = 0.0; diff --git a/js/helper-classes/RDGE/GLWorld.js b/js/helper-classes/RDGE/GLWorld.js index 8017207f..0ab3c242 100755 --- a/js/helper-classes/RDGE/GLWorld.js +++ b/js/helper-classes/RDGE/GLWorld.js @@ -811,7 +811,7 @@ GLWorld.prototype.getShapeFromPoint = function( offsetX, offsetY ) } } -GLWorld.prototype.export = function() +GLWorld.prototype.export = function( exportForPublish ) { var exportStr = "GLWorld 1.0\n"; var id = this.getCanvas().getAttribute( "data-RDGE-id" ); @@ -824,7 +824,8 @@ GLWorld.prototype.export = function() // we need 2 export modes: One for save/restore, one for publish. // hardcoding for now - var exportForPublish = false; + //var exportForPublish = false; + if (!exportForPublish) exportForPublish = false; exportStr += "publish: " + exportForPublish + "\n"; if (exportForPublish) diff --git a/js/helper-classes/RDGE/runtime/CanvasDataManager.js b/js/helper-classes/RDGE/runtime/CanvasDataManager.js index 4985fc9a..46d944a1 100644 --- a/js/helper-classes/RDGE/runtime/CanvasDataManager.js +++ b/js/helper-classes/RDGE/runtime/CanvasDataManager.js @@ -29,9 +29,10 @@ function CanvasDataManager() var canvas = this.findCanvasWithID( id, root ); if (canvas) { - var loadForAuthoring = true; + //var loadForAuthoring = true; var index = importStr.indexOf( "scenedata: " ); - if (index >= 0) loadForAuthoring = false; + //if (index >= 0) loadForAuthoring = false; + var loadForAuthoring = false; if (loadForAuthoring) { @@ -64,7 +65,7 @@ function CanvasDataManager() { if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld) { - var data = elt.elementModel.shapeModel.GLWorld.export(); + var data = elt.elementModel.shapeModel.GLWorld.export( true ); dataArray.push( data ); } @@ -90,7 +91,8 @@ function CanvasDataManager() for (var i=0; i 3043 bytes js/helper-classes/RDGE/GLSubpath.js | 147 ++++++++++++++++++++++++++++++------ js/tools/PenTool.js | 12 ++- 3 files changed, 135 insertions(+), 24 deletions(-) create mode 100644 images/cursors/penAdd.png diff --git a/images/cursors/penAdd.png b/images/cursors/penAdd.png new file mode 100644 index 00000000..c306cc85 Binary files /dev/null and b/images/cursors/penAdd.png differ diff --git a/js/helper-classes/RDGE/GLSubpath.js b/js/helper-classes/RDGE/GLSubpath.js index f3d8ad36..2fb91d33 100755 --- a/js/helper-classes/RDGE/GLSubpath.js +++ b/js/helper-classes/RDGE/GLSubpath.js @@ -505,7 +505,6 @@ GLSubpath.prototype._isWithinBoundingBox = function(point, ctrlPts, radius) { GLSubpath.prototype.pickAnchor = function (pickX, pickY, pickZ, radius) { var numAnchors = this._Anchors.length; var selAnchorIndex = -1; - var retCode = this.SEL_NONE; var radSq = radius * radius; var minDistance = Infinity; //check if the clicked location is close to the currently selected anchor position @@ -515,9 +514,23 @@ GLSubpath.prototype.pickAnchor = function (pickX, pickY, pickZ, radius) { if (distSq < minDistance && distSq < radSq) { selAnchorIndex = this._selectedAnchorIndex; minDistance = distSq; - retCode = retCode | this.SEL_ANCHOR; + } else { + //check the prev and next of the selected anchor if the above did not register a hit + distSq = this._Anchors[this._selectedAnchorIndex].getPrevDistanceSq(pickX, pickY, pickZ); + if (distSq < minDistance && distSq < radSq){ + selAnchorIndex = this._selectedAnchorIndex; + minDistance = distSq; + } else { + //check the next for this anchor point + distSq = this._Anchors[this._selectedAnchorIndex].getNextDistanceSq(pickX, pickY, pickZ); + if (distSqx || this._BBoxMin[1]>y || this._BBoxMin[2]>z){ + return false; + } + if (this._BBoxMax[0]=0 && this._selectedAnchorIndex=0 && selAnchorIndex === -1) { + var distSq = this._Anchors[this._selectedAnchorIndex].getPrevDistanceSq(pickX, pickY, pickZ); + if (distSq < minDistance && distSq < radSq){ + selAnchorIndex = this._selectedAnchorIndex; + minDistance = distSq; + } else { + //check the next for this anchor point + distSq = this._Anchors[this._selectedAnchorIndex].getNextDistanceSq(pickX, pickY, pickZ); + if (distSq=0) { this._hoveredAnchorIndex = selAnchor; + } else { + //detect if the current mouse position will hit the path + var pathHitTestData = this._selectedSubpath.pathHitTest(currMousePos[0], currMousePos[1], currMousePos[2], this._PICK_POINT_RADIUS); + if (pathHitTestData[0]!==-1){ + //change the cursor + var cursor = "url('images/cursors/penAdd.png') 10 10,default"; + this.application.ninja.stage.drawingCanvas.style.cursor = cursor; + } } } } //else of if (this._isDrawing) { @@ -353,7 +364,6 @@ exports.PenTool = Montage.create(ShapeTool, { if (this._selectedSubpath){ this.DrawSubpathAnchors(this._selectedSubpath); } - }//value: function(event) },//HandleMouseMove -- cgit v1.2.3 From 0b7f2f54738d2c1ea480b9bac7d3a750b1ef4df6 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Thu, 1 Mar 2012 15:29:17 -0800 Subject: first attempt at rendering the brush stroke as a collection of polylines (number of polylines equals the stroke width) --- js/helper-classes/RDGE/GLBrushStroke.js | 47 +++++++++++++++++++++++++++++++-- js/tools/BrushTool.js | 4 +-- 2 files changed, 47 insertions(+), 4 deletions(-) diff --git a/js/helper-classes/RDGE/GLBrushStroke.js b/js/helper-classes/RDGE/GLBrushStroke.js index 5d773c2d..f5b0bce1 100755 --- a/js/helper-classes/RDGE/GLBrushStroke.js +++ b/js/helper-classes/RDGE/GLBrushStroke.js @@ -139,7 +139,8 @@ function GLBrushStroke() { var numPoints = this._Points.length; //**** add samples to the path if needed...linear interpolation for now - if (numPoints>1) { + //if (numPoints>1) { + if (0){ var threshold = this._WETNESS_FACTOR*this._strokeWidth; var prevPt = this._Points[0]; var prevIndex = 0; @@ -331,7 +332,7 @@ function GLBrushStroke() { } */ - + /* var R2 = this._strokeWidth; var R = R2*0.5; var hardness = 0; //for a pencil, this is always 1 //TODO get hardness parameter from user interface @@ -359,6 +360,48 @@ function GLBrushStroke() { //ctx.globalCompositeOperation = 'source-in'; //ctx.rect(x-R, y-R, R2, R2); } + */ + + //todo test how to render the path as a bunch of moveTo and lineTos (for calligraphic brush styles) + var numTraces = this._strokeWidth; + var halfNumTraces = numTraces/2; + var deltaDisplacement = [1,0];//[this._strokeWidth/numTraces, 0]; //a horizontal line brush + var startPos = [-this._strokeWidth/2,0]; + for (var t=0;t= 0) + { + // update the string to the current object + importStr = importStr.substr( index+7 ); + + // 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)) + { + importStr = importStr.substr( childIndex + 7 ); + importStr = this.importObjects( importStr, obj ); + endIndex = importStr.indexOf( "ENDOBJECT\n" ) + } + + // remove the string for the object(s) just created + importStr = importStr.substr( endIndex ); + + // get the location of the next object + index = importStr.indexOf( "OBJECT\n", endIndex ); + } + + return importStr; + } + + this.importObject = function( objStr, parent ) + { + var type = Number( getPropertyFromString( "type: ", objStr ) ); + + var obj; + switch (type) + { + case 1: + obj = new RuntimeRectangle(); + obj.import( objStr, parent ); + break; + + case 2: // circle + obj = new RuntimeOval(); + obj.import( objStr, parent ); + break; + + case 3: // line + obj = new RuntimeLine(); + obj.import( objStr, parent ); + break; + + default: + throw new Error( "Attempting to load unrecognized object type: " + type ); + break; + } + + if (obj) + this.addObject( obj ); + + return obj; + } + + this.addObject = function( obj, parent ) + { + if (!obj) return; + + if (parent == null) + this._geomRoot = obj; + else + parent.addChild( obj ); + } + + this.linkMaterials = function( obj ) + { + if (!obj) return; + + // get the array of materials from the object + var matArray = obj._materials; + var nMats = matArray.length; + for (var i=0; i +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. + */ + +/////////////////////////////////////////////////////////////////////// +// Class RuntimeGeomObj +// Super class for all geometry classes +/////////////////////////////////////////////////////////////////////// +function RuntimeGeomObj() +{ + /////////////////////////////////////////////////////////////////////// + // Constants + /////////////////////////////////////////////////////////////////////// + this.GEOM_TYPE_RECTANGLE = 1; + this.GEOM_TYPE_CIRCLE = 2; + this.GEOM_TYPE_LINE = 3; + this.GEOM_TYPE_PATH = 4; + this.GEOM_TYPE_CUBIC_BEZIER = 5; + this.GEOM_TYPE_UNDEFINED = -1; + + /////////////////////////////////////////////////////////////////////// + // Instance variables + /////////////////////////////////////////////////////////////////////// + this._children; + + // stroke and fill colors + this._strokeColor = [0,0,0,0]; + this._fillColor = [0,0,0,0]; + + // array of materials + this._materials = []; + + /////////////////////////////////////////////////////////////////////// + // Property accessors + /////////////////////////////////////////////////////////////////////// + + this.geomType = function() { return this.GEOM_TYPE_UNDEFINED; } + + /////////////////////////////////////////////////////////////////////// + // Methods + /////////////////////////////////////////////////////////////////////// + this.makeStrokeMaterial = function() + { + } + + this.makeFillMaterial = function() + { + } + + + this.render = function() + { + } + + this.addChild = function( child ) + { + if (!this._children) this._children = []; + this._children.push( child ); + } + + this.import = function() + { + } + + this.importMaterials = function(importStr) + { + var nMaterials = Number( getPropertyFromString( "nMaterials: ", importStr ) ); + for (var i=0; i= 0) + rtnStr = rtnStr.substr(0, index); + + return rtnStr; +} + +/////////////////////////////////////////////////////////////////////// +// Class RuntimeRectangle +/////////////////////////////////////////////////////////////////////// +function RuntimeRectangle() +{ + // inherit the members of RuntimeGeomObj + this.inheritedFrom = RuntimeGeomObj; + this.inheritedFrom(); + + this.import = function( importStr ) + { + 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.renderPath = function( inset, ctx ) + { + // various declarations + var pt, rad, ctr, startPt, bPts; + var width = Math.round(this.getWidth()), + height = Math.round(this.getHeight()); + + pt = [inset, inset]; // top left corner + + var tlRad = this._tlRadius; //top-left radius + var trRad = this._trRadius; + var blRad = this._blRadius; + var brRad = this._brRadius; + + if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0)) + { + ctx.rect(pt[0], pt[1], width - 2*inset, height - 2*inset); + } + else + { + // get the top left point + rad = tlRad - inset; + if (rad < 0) rad = 0; + pt[1] += rad; + if (MathUtils.fpSign(rad) == 0) pt[1] = inset; + ctx.moveTo( pt[0], pt[1] ); + + // get the bottom left point + pt = [inset, height - inset]; + rad = blRad - inset; + if (rad < 0) rad = 0; + pt[1] -= rad; + ctx.lineTo( pt[0], pt[1] ); + + // get the bottom left curve + if (MathUtils.fpSign(rad) > 0) + ctx.quadraticCurveTo( inset, height-inset, inset+rad, height-inset ); + + // do the bottom of the rectangle + pt = [width - inset, height - inset]; + rad = brRad - inset; + if (rad < 0) rad = 0; + pt[0] -= rad; + ctx.lineTo( pt[0], pt[1] ); + + // get the bottom right arc + if (MathUtils.fpSign(rad) > 0) + ctx.quadraticCurveTo( width-inset, height-inset, width-inset, height-inset-rad ); + + // get the right of the rectangle + pt = [width - inset, inset]; + rad = trRad - inset; + if (rad < 0) rad = 0; + pt[1] += rad; + ctx.lineTo( pt[0], pt[1] ); + + // do the top right corner + if (MathUtils.fpSign(rad) > 0) + ctx.quadraticCurveTo( width-inset, inset, width-inset-rad, inset ); + + // do the top of the rectangle + pt = [inset, inset] + rad = tlRad - inset; + if (rad < 0) rad = 0; + pt[0] += rad; + ctx.lineTo( pt[0], pt[1] ); + + // do the top left corner + if (MathUtils.fpSign(rad) > 0) + ctx.quadraticCurveTo( inset, inset, inset, inset+rad ); + else + ctx.lineTo( inset, 2*inset ); + } + } + + this.render = function() + { + // get the world + var world = this.getWorld(); + if (!world) throw( "null world in rectangle render" ); + + // get the context + var ctx = world.get2DContext(); + if (!ctx) return; + + // get some dimensions + var lw = this._strokeWidth; + var w = world.getViewportWidth(), + h = world.getViewportHeight(); + + // render the fill + ctx.beginPath(); + if (this._fillColor) + { + var c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*thi