From 6321075d93044c6747682a8e7280b5996da7ec52 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Thu, 2 Feb 2012 11:57:58 -0800 Subject: added some additional shaders --- assets/shaders/Deform.frag.glsl | 29 +++++ assets/shaders/Fly.frag.glsl | 23 ++++ assets/shaders/ReliefTunnel.frag.glsl | 35 ++++++ assets/shaders/SquareTunnel.frag.glsl | 21 ++++ assets/shaders/Star.frag.glsl | 28 +++++ assets/shaders/Water.frag.glsl | 55 +++++++++ assets/shaders/ZInvert.frag.glsl | 23 ++++ js/helper-classes/RDGE/Materials/DeformMaterial.js | 133 +++++++++++++++++++++ js/helper-classes/RDGE/Materials/FlyMaterial.js | 133 +++++++++++++++++++++ .../RDGE/Materials/ReliefTunnelMaterial.js | 133 +++++++++++++++++++++ .../RDGE/Materials/SquareTunnelMaterial.js | 133 +++++++++++++++++++++ js/helper-classes/RDGE/Materials/StarMaterial.js | 133 +++++++++++++++++++++ js/helper-classes/RDGE/Materials/WaterMaterial.js | 133 +++++++++++++++++++++ .../RDGE/Materials/ZInvertMaterial.js | 133 +++++++++++++++++++++ js/helper-classes/RDGE/MaterialsLibrary.js | 21 ++++ js/panels/Materials/Materials.xml | 7 ++ .../materials-popup.reel/materials-popup.js | 7 ++ js/preloader/Preloader.js | 7 ++ 18 files changed, 1187 insertions(+) create mode 100644 assets/shaders/Deform.frag.glsl create mode 100644 assets/shaders/Fly.frag.glsl create mode 100644 assets/shaders/ReliefTunnel.frag.glsl create mode 100644 assets/shaders/SquareTunnel.frag.glsl create mode 100644 assets/shaders/Star.frag.glsl create mode 100644 assets/shaders/Water.frag.glsl create mode 100644 assets/shaders/ZInvert.frag.glsl create mode 100644 js/helper-classes/RDGE/Materials/DeformMaterial.js create mode 100644 js/helper-classes/RDGE/Materials/FlyMaterial.js create mode 100644 js/helper-classes/RDGE/Materials/ReliefTunnelMaterial.js create mode 100644 js/helper-classes/RDGE/Materials/SquareTunnelMaterial.js create mode 100644 js/helper-classes/RDGE/Materials/StarMaterial.js create mode 100644 js/helper-classes/RDGE/Materials/WaterMaterial.js create mode 100644 js/helper-classes/RDGE/Materials/ZInvertMaterial.js diff --git a/assets/shaders/Deform.frag.glsl b/assets/shaders/Deform.frag.glsl new file mode 100644 index 00000000..1dbe45a0 --- /dev/null +++ b/assets/shaders/Deform.frag.glsl @@ -0,0 +1,29 @@ +#ifdef GL_ES +precision highp float; +#endif + +uniform float u_time; +uniform vec2 u_resolution; +//uniform vec4 mouse; +uniform sampler2D u_tex0; + +void main(void) +{ + vec2 p = -1.0 + 2.0 * gl_FragCoord.xy / u_resolution.xy; + //vec2 m = -1.0 + 2.0 * mouse.xy / u_resolution.xy; + vec2 m = vec2(-.8, .8); + + float a1 = atan(p.y-m.y,p.x-m.x); + float r1 = sqrt(dot(p-m,p-m)); + float a2 = atan(p.y+m.y,p.x+m.x); + float r2 = sqrt(dot(p+m,p+m)); + + vec2 uv; + uv.x = 0.2*u_time + (r1-r2)*0.25; + uv.y = sin(2.0*(a1-a2)); + + float w = r1*r2*0.8; + vec3 col = texture2D(u_tex0,uv).xyz; + + gl_FragColor = vec4(col/(.1+w),1.0); +} \ No newline at end of file diff --git a/assets/shaders/Fly.frag.glsl b/assets/shaders/Fly.frag.glsl new file mode 100644 index 00000000..f99b5ab8 --- /dev/null +++ b/assets/shaders/Fly.frag.glsl @@ -0,0 +1,23 @@ +#ifdef GL_ES +precision highp float; +#endif + +uniform vec2 u_resolution; +uniform float u_time; +uniform sampler2D u_tex0; + +void main(void) +{ + vec2 p = -1.0 + 2.0 * gl_FragCoord.xy / u_resolution.xy; + vec2 uv; + + float an = u_time*.25; + + float x = p.x*cos(an)-p.y*sin(an); + float y = p.x*sin(an)+p.y*cos(an); + + uv.x = .25*x/abs(y); + uv.y = .20*u_time + .25/abs(y); + + gl_FragColor = vec4(texture2D(u_tex0,uv).xyz * y*y, 1.0); +} diff --git a/assets/shaders/ReliefTunnel.frag.glsl b/assets/shaders/ReliefTunnel.frag.glsl new file mode 100644 index 00000000..cee707db --- /dev/null +++ b/assets/shaders/ReliefTunnel.frag.glsl @@ -0,0 +1,35 @@ +#ifdef GL_ES +precision highp float; +#endif + +uniform vec2 u_resolution; +uniform float u_time; +uniform sampler2D u_tex0; + +void main(void) +{ + vec2 p = -1.0 + 2.0 * gl_FragCoord.xy / u_resolution.xy; + vec2 uv; + + float r = sqrt( dot(p,p) ); + float a = atan(p.y,p.x) + 0.5*sin(0.5*r-0.5*u_time); + + float s = 0.5 + 0.5*cos(7.0*a); + s = smoothstep(0.0,1.0,s); + s = smoothstep(0.0,1.0,s); + s = smoothstep(0.0,1.0,s); + s = smoothstep(0.0,1.0,s); + + uv.x = u_time + 1.0/( r + .2*s); + uv.y = 3.0*a/3.1416; + + float w = (0.5 + 0.5*s)*r*r; + + vec3 col = texture2D(u_tex0,uv).xyz; + + float ao = 0.5 + 0.5*cos(7.0*a); + ao = smoothstep(0.0,0.4,ao)-smoothstep(0.4,0.7,ao); + ao = 1.0-0.5*ao*r; + + gl_FragColor = vec4(col*w*ao,1.0); +} diff --git a/assets/shaders/SquareTunnel.frag.glsl b/assets/shaders/SquareTunnel.frag.glsl new file mode 100644 index 00000000..51ef7b7c --- /dev/null +++ b/assets/shaders/SquareTunnel.frag.glsl @@ -0,0 +1,21 @@ +#ifdef GL_ES +precision highp float; +#endif + +uniform vec2 u_resolution; +uniform float u_time; +uniform sampler2D u_tex0; + +void main(void) +{ + vec2 p = -1.0 + 2.0 * gl_FragCoord.xy / u_resolution.xy; + vec2 uv; + + float r = pow( pow(p.x*p.x,16.0) + pow(p.y*p.y,16.0), 1.0/32.0 ); + uv.x = .5*u_time + 0.5/r; + uv.y = 1.0*atan(p.y,p.x)/3.1416; + + vec3 col = texture2D(u_tex0,uv).xyz; + + gl_FragColor = vec4(col*r*r*r,1.0); +} diff --git a/assets/shaders/Star.frag.glsl b/assets/shaders/Star.frag.glsl new file mode 100644 index 00000000..f63fe605 --- /dev/null +++ b/assets/shaders/Star.frag.glsl @@ -0,0 +1,28 @@ +#ifdef GL_ES +precision highp float; +#endif + +uniform float u_time; +uniform vec2 u_resolution; +uniform sampler2D u_tex0; + +void main(void) +{ + vec2 uv; + + vec2 p = -1.0 + 2.0 * gl_FragCoord.xy / u_resolution.xy; + float a = atan(p.y,p.x); + float r = sqrt(dot(p,p)); + float s = r * (1.0+0.8*cos(u_time*1.0)); + + uv.x = .02*p.y+.03*cos(-u_time+a*3.0)/s; + uv.y = .1*u_time +.02*p.x+.03*sin(-u_time+a*3.0)/s; + + float w = .9 + pow(max(1.5-r,0.0),4.0); + + w*=0.6+0.4*cos(u_time+3.0*a); + + vec3 col = texture2D(u_tex0,uv).xyz; + + gl_FragColor = vec4(col*w,1.0); +} \ No newline at end of file diff --git a/assets/shaders/Water.frag.glsl b/assets/shaders/Water.frag.glsl new file mode 100644 index 00000000..5b71a658 --- /dev/null +++ b/assets/shaders/Water.frag.glsl @@ -0,0 +1,55 @@ +#ifdef GL_ES +precision highp float; +#endif + +uniform sampler2D u_tex0; +uniform float u_time; +uniform vec2 u_resolution; + +const float speedx = 1./ 0.1; +const float speedy = 1./ .01; +const float speedr = 1./ 0.01; +const float delta = 20.; +const float intence = 10.; +const int dif = 7; + +float col(vec2 coord) +{ + float delta_theta = 3.1415926535897932 / float(dif); + float col = 0.; + float theta = 0.; + theta = u_time/200.; + + coord.x += u_time/speedx; + coord.y += u_time/speedy; + for (int i = 0; i < dif; i++) + { + coord.x += u_time/speedr; + theta = theta + delta_theta; + col = col + cos( (coord.x*cos(theta) - coord.y*sin(theta))*20. ); + } + + return cos(col); +} + +void main(void) +{ + vec2 p = (gl_FragCoord.xy) / u_resolution.xy; + + vec2 c1 = p; + vec2 c2 = p; + + c2.x = c2.x+u_resolution.x/delta; + float dx = (col(c1)-col(c2))/delta; + + c2 = p; + c2.y = c2.y + u_resolution.y/delta; + float dy = (col(c1)-col(c2))/delta; + + c1.x = c1.x+dx; + c1.y = -(c1.y+dy); + + float alpha = 1.+dot(dx,dy)*intence; + if (alpha < 0.7) alpha = 0.7; + gl_FragColor = texture2D(u_tex0,c1)*(alpha); +} diff --git a/assets/shaders/ZInvert.frag.glsl b/assets/shaders/ZInvert.frag.glsl new file mode 100644 index 00000000..b1fd1748 --- /dev/null +++ b/assets/shaders/ZInvert.frag.glsl @@ -0,0 +1,23 @@ +#ifdef GL_ES +precision highp float; +#endif + +uniform vec2 u_resolution; +uniform float u_time; +uniform sampler2D u_tex0; + +void main(void) +{ + vec2 p = -1.0 + 2.0 * gl_FragCoord.xy / u_resolution.xy; + vec2 uv; + + float a = atan(p.y,p.x); + float r = sqrt(dot(p,p)); + + uv.x = cos(0.6+u_time) + cos(cos(1.2+u_time)+a)/r; + uv.y = cos(0.3+u_time) + sin(cos(2.0+u_time)+a)/r; + + vec3 col = texture2D(u_tex0,uv*.25).xyz; + + gl_FragColor = vec4(col*r*r,1.0); +} \ No newline at end of file diff --git a/js/helper-classes/RDGE/Materials/DeformMaterial.js b/js/helper-classes/RDGE/Materials/DeformMaterial.js new file mode 100644 index 00000000..ddc97383 --- /dev/null +++ b/js/helper-classes/RDGE/Materials/DeformMaterial.js @@ -0,0 +1,133 @@ +/* + 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 GLMaterial +// RDGE representation of a material. +/////////////////////////////////////////////////////////////////////// +function DeformMaterial() +{ + // initialize the inherited members + this.inheritedFrom = PulseMaterial; + this.inheritedFrom(); + + /////////////////////////////////////////////////////////////////////// + // Instance variables + /////////////////////////////////////////////////////////////////////// + this._name = "DeformMaterial"; + this._shaderName = "deform"; + + this._texMap = 'assets/images/rocky-normal.jpg'; + + this._time = 0.0; + this._dTime = 0.01; + + /////////////////////////////////////////////////////////////////////// + // Properties + /////////////////////////////////////////////////////////////////////// + // all defined in parent PulseMaterial.js + // load the local default value + this._propValues[ this._propNames[0] ] = this._texMap.slice(0); + + /////////////////////////////////////////////////////////////////////// + // Material Property Accessors + /////////////////////////////////////////////////////////////////////// + + /////////////////////////////////////////////////////////////////////// + + + /////////////////////////////////////////////////////////////////////// + // Methods + /////////////////////////////////////////////////////////////////////// + // duplcate method requirde + this.dup = function( world ) + { + // allocate a new uber material + var newMat = new DeformMaterial(); + + // copy over the current values; + var propNames = [], propValues = [], propTypes = [], propLabels = []; + this.getAllProperties( propNames, propValues, propTypes, propLabels); + var n = propNames.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 GLMaterial +// RDGE representation of a material. +/////////////////////////////////////////////////////////////////////// +function FlyMaterial() +{ + // initialize the inherited members + this.inheritedFrom = PulseMaterial; + this.inheritedFrom(); + + /////////////////////////////////////////////////////////////////////// + // Instance variables + /////////////////////////////////////////////////////////////////////// + this._name = "FlyMaterial"; + this._shaderName = "tunnel"; + + this._texMap = 'assets/images/rocky-normal.jpg'; + + this._time = 0.0; + this._dTime = 0.01; + + /////////////////////////////////////////////////////////////////////// + // Properties + /////////////////////////////////////////////////////////////////////// + // all defined in parent PulseMaterial.js + // load the local default value + this._propValues[ this._propNames[0] ] = this._texMap.slice(0); + + /////////////////////////////////////////////////////////////////////// + // Material Property Accessors + /////////////////////////////////////////////////////////////////////// + + /////////////////////////////////////////////////////////////////////// + + + /////////////////////////////////////////////////////////////////////// + // Methods + /////////////////////////////////////////////////////////////////////// + // duplcate method requirde + this.dup = function( world ) + { + // allocate a new uber material + var newMat = new FlyMaterial(); + + // copy over the current values; + var propNames = [], propValues = [], propTypes = [], propLabels = []; + this.getAllProperties( propNames, propValues, propTypes, propLabels); + var n = propNames.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 GLMaterial +// RDGE representation of a material. +/////////////////////////////////////////////////////////////////////// +function ReliefTunnelMaterial() +{ + // initialize the inherited members + this.inheritedFrom = PulseMaterial; + this.inheritedFrom(); + + /////////////////////////////////////////////////////////////////////// + // Instance variables + /////////////////////////////////////////////////////////////////////// + this._name = "ReliefTunnelMaterial"; + this._shaderName = "tunnel"; + + this._texMap = 'assets/images/rocky-normal.jpg'; + + this._time = 0.0; + this._dTime = 0.01; + + /////////////////////////////////////////////////////////////////////// + // Properties + /////////////////////////////////////////////////////////////////////// + // all defined in parent PulseMaterial.js + // load the local default value + this._propValues[ this._propNames[0] ] = this._texMap.slice(0); + + /////////////////////////////////////////////////////////////////////// + // Material Property Accessors + /////////////////////////////////////////////////////////////////////// + + /////////////////////////////////////////////////////////////////////// + + + /////////////////////////////////////////////////////////////////////// + // Methods + /////////////////////////////////////////////////////////////////////// + // duplcate method requirde + this.dup = function( world ) + { + // allocate a new uber material + var newMat = new ReliefTunnelMaterial(); + + // copy over the current values; + var propNames = [], propValues = [], propTypes = [], propLabels = []; + this.getAllProperties( propNames, propValues, propTypes, propLabels); + var n = propNames.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 GLMaterial +// RDGE representation of a material. +/////////////////////////////////////////////////////////////////////// +function SquareTunnelMaterial() +{ + // initialize the inherited members + this.inheritedFrom = PulseMaterial; + this.inheritedFrom(); + + /////////////////////////////////////////////////////////////////////// + // Instance variables + /////////////////////////////////////////////////////////////////////// + this._name = "SquareTunnelMaterial"; + this._shaderName = "tunnel"; + + this._texMap = 'assets/images/rocky-normal.jpg'; + + this._time = 0.0; + this._dTime = 0.01; + + /////////////////////////////////////////////////////////////////////// + // Properties + /////////////////////////////////////////////////////////////////////// + // all defined in parent PulseMaterial.js + // load the local default value + this._propValues[ this._propNames[0] ] = this._texMap.slice(0); + + /////////////////////////////////////////////////////////////////////// + // Material Property Accessors + /////////////////////////////////////////////////////////////////////// + + /////////////////////////////////////////////////////////////////////// + + + /////////////////////////////////////////////////////////////////////// + // Methods + /////////////////////////////////////////////////////////////////////// + // duplcate method requirde + this.dup = function( world ) + { + // allocate a new uber material + var newMat = new SquareTunnelMaterial(); + + // copy over the current values; + var propNames = [], propValues = [], propTypes = [], propLabels = []; + this.getAllProperties( propNames, propValues, propTypes, propLabels); + var n = propNames.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 GLMaterial +// RDGE representation of a material. +/////////////////////////////////////////////////////////////////////// +function StarMaterial() +{ + // initialize the inherited members + this.inheritedFrom = PulseMaterial; + this.inheritedFrom(); + + /////////////////////////////////////////////////////////////////////// + // Instance variables + /////////////////////////////////////////////////////////////////////// + this._name = "StarMaterial"; + this._shaderName = "star"; + + this._texMap = 'assets/images/rocky-normal.jpg'; + + this._time = 0.0; + this._dTime = 0.01; + + /////////////////////////////////////////////////////////////////////// + // Properties + /////////////////////////////////////////////////////////////////////// + // all defined in parent PulseMaterial.js + // load the local default value + this._propValues[ this._propNames[0] ] = this._texMap.slice(0); + + /////////////////////////////////////////////////////////////////////// + // Material Property Accessors + /////////////////////////////////////////////////////////////////////// + + /////////////////////////////////////////////////////////////////////// + + + /////////////////////////////////////////////////////////////////////// + // Methods + /////////////////////////////////////////////////////////////////////// + // duplcate method requirde + this.dup = function( world ) + { + // allocate a new uber material + var newMat = new StarMaterial(); + + // copy over the current values; + var propNames = [], propValues = [], propTypes = [], propLabels = []; + this.getAllProperties( propNames, propValues, propTypes, propLabels); + var n = propNames.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 GLMaterial +// RDGE representation of a material. +/////////////////////////////////////////////////////////////////////// +function WaterMaterial() +{ + // initialize the inherited members + this.inheritedFrom = PulseMaterial; + this.inheritedFrom(); + + /////////////////////////////////////////////////////////////////////// + // Instance variables + /////////////////////////////////////////////////////////////////////// + this._name = "WaterMaterial"; + this._shaderName = "water"; + + this._texMap = 'assets/images/rocky-normal.jpg'; + + this._time = 0.0; + this._dTime = 0.01; + + /////////////////////////////////////////////////////////////////////// + // Properties + /////////////////////////////////////////////////////////////////////// + // all defined in parent PulseMaterial.js + // load the local default value + this._propValues[ this._propNames[0] ] = this._texMap.slice(0); + + /////////////////////////////////////////////////////////////////////// + // Material Property Accessors + /////////////////////////////////////////////////////////////////////// + + /////////////////////////////////////////////////////////////////////// + + + /////////////////////////////////////////////////////////////////////// + // Methods + /////////////////////////////////////////////////////////////////////// + // duplcate method requirde + this.dup = function( world ) + { + // allocate a new uber material + var newMat = new WaterMaterial(); + + // copy over the current values; + var propNames = [], propValues = [], propTypes = [], propLabels = []; + this.getAllProperties( propNames, propValues, propTypes, propLabels); + var n = propNames.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 GLMaterial +// RDGE representation of a material. +/////////////////////////////////////////////////////////////////////// +function ZInvertMaterial() +{ + // initialize the inherited members + this.inheritedFrom = PulseMaterial; + this.inheritedFrom(); + + /////////////////////////////////////////////////////////////////////// + // Instance variables + /////////////////////////////////////////////////////////////////////// + this._name = "ZInvertMaterial"; + this._shaderName = "zinvert"; + + this._texMap = 'assets/images/rocky-normal.jpg'; + + this._time = 0.0; + this._dTime = 0.01; + + /////////////////////////////////////////////////////////////////////// + // Properties + /////////////////////////////////////////////////////////////////////// + // all defined in parent PulseMaterial.js + // load the local default value + this._propValues[ this._propNames[0] ] = this._texMap.slice(0); + + /////////////////////////////////////////////////////////////////////// + // Material Property Accessors + /////////////////////////////////////////////////////////////////////// + + /////////////////////////////////////////////////////////////////////// + + + /////////////////////////////////////////////////////////////////////// + // Methods + /////////////////////////////////////////////////////////////////////// + // duplcate method requirde + this.dup = function( world ) + { + // allocate a new uber material + var newMat = new ZInvertMaterial(); + + // copy over the current values; + var propNames = [], propValues = [], propTypes = [], propLabels = []; + this.getAllProperties( propNames, propValues, propTypes, propLabels); + var n = propNames.length; + for (var i=0; i + + + + + + + diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js index afdc3628..bce2e42b 100644 --- a/js/panels/Materials/materials-popup.reel/materials-popup.js +++ b/js/panels/Materials/materials-popup.reel/materials-popup.js @@ -246,6 +246,13 @@ exports.MaterialsPopup = Montage.create(Component, { (materialID === "RadialBlurMaterial") || (materialID === "PulseMaterial") || (materialID === "TunnelMaterial") || + (materialID === "ReliefTunnelMaterial") || + (materialID === "SquareTunnelMaterial") || + (materialID === "FlyMaterial") || + (materialID === "WaterMaterial") || + (materialID === "ZInvertMaterial") || + (materialID === "DeformMaterial") || + (materialID === "StarMaterial") || (materialID === "TwistMaterial") || (materialID === "KeleidoscopeMaterial") || (materialID === "JuliaMaterial") || diff --git a/js/preloader/Preloader.js b/js/preloader/Preloader.js index 3daeb1b4..12028e32 100755 --- a/js/preloader/Preloader.js +++ b/js/preloader/Preloader.js @@ -70,6 +70,13 @@ exports.Preloader = Montage.create(Component, { {"type":"js", "url":"js/helper-classes/RDGE/Materials/RadialBlurMaterial.js"}, {"type":"js", "url":"js/helper-classes/RDGE/Materials/PulseMaterial.js"}, {"type":"js", "url":"js/helper-classes/RDGE/Materials/TunnelMaterial.js"}, + {"type":"js", "url":"js/helper-classes/RDGE/Materials/ReliefTunnelMaterial.js"}, + {"type":"js", "url":"js/helper-classes/RDGE/Materials/SquareTunnelMaterial.js"}, + {"type":"js", "url":"js/helper-classes/RDGE/Materials/FlyMaterial.js"}, + {"type":"js", "url":"js/helper-classes/RDGE/Materials/WaterMaterial.js"}, + {"type":"js", "url":"js/helper-classes/RDGE/Materials/ZInvertMaterial.js"}, + {"type":"js", "url":"js/helper-classes/RDGE/Materials/DeformMaterial.js"}, + {"type":"js", "url":"js/helper-classes/RDGE/Materials/StarMaterial.js"}, {"type":"js", "url":"js/helper-classes/RDGE/Materials/TwistMaterial.js"}, {"type":"js", "url":"js/helper-classes/RDGE/Materials/KeleidoscopeMaterial.js"}, {"type":"js", "url":"js/helper-classes/RDGE/Materials/JuliaMaterial.js"}, -- cgit v1.2.3 From 4ebae7378608750192f8d3bb392a54222ca0ec2f Mon Sep 17 00:00:00 2001 From: hwc487 Date: Thu, 2 Feb 2012 13:56:25 -0800 Subject: Added the 'animate' flag to the pulse material --- js/helper-classes/RDGE/Materials/RadialBlurMaterial.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/js/helper-classes/RDGE/Materials/RadialBlurMaterial.js b/js/helper-classes/RDGE/Materials/RadialBlurMaterial.js index 9acb4213..732800cf 100644 --- a/js/helper-classes/RDGE/Materials/RadialBlurMaterial.js +++ b/js/helper-classes/RDGE/Materials/RadialBlurMaterial.js @@ -37,6 +37,8 @@ function RadialBlurMaterial() this.getTextureMap = function() { return this._texMap.slice(0); } this.setTextureMap = function(m) { this._propValues[this._propNames[0]] = m.slice(0); this.updateTexture(); } + this.isAnimated = function() { return true; } + /////////////////////////////////////////////////////////////////////// // Material Property Accessors /////////////////////////////////////////////////////////////////////// -- cgit v1.2.3 From 2082fa6912eec2ffabd2081b7706e8e1b88a9711 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 2 Feb 2012 19:03:59 -0800 Subject: Initial Text Tool Implementation Has rich-text-editor in place need to place with finalized version when complete --- _scss/compass_app_log.txt | 7 + _scss/imports/scss/_Stage.scss | 14 + css/ninja.css | 4 + js/panels/CSSPanel/CSSPanel.js | 6 +- js/stage/stage.reel/stage.html | 12 +- js/stage/stage.reel/stage.js | 7 + js/tools/TextTool.js | 96 +- .../ui/rich-text-editor.reel/rich-text-editor.css | 112 ++ .../ui/rich-text-editor.reel/rich-text-editor.html | 27 + .../ui/rich-text-editor.reel/rich-text-editor.js | 1669 ++++++++++++++++++++ .../ui/rich-text-editor.reel/rich-text-resizer.js | 349 ++++ .../rich-text-editor.reel/rich-text-sanitizer.js | 132 ++ 12 files changed, 2425 insertions(+), 10 deletions(-) create mode 100644 node_modules/montage/ui/rich-text-editor.reel/rich-text-editor.css create mode 100644 node_modules/montage/ui/rich-text-editor.reel/rich-text-editor.html create mode 100644 node_modules/montage/ui/rich-text-editor.reel/rich-text-editor.js create mode 100644 node_modules/montage/ui/rich-text-editor.reel/rich-text-resizer.js create mode 100644 node_modules/montage/ui/rich-text-editor.reel/rich-text-sanitizer.js diff --git a/_scss/compass_app_log.txt b/_scss/compass_app_log.txt index 6fe64a6f..d28e1e77 100644 --- a/_scss/compass_app_log.txt +++ b/_scss/compass_app_log.txt @@ -93,3 +93,10 @@ 2012-01-20 15:16:38 overwrite ../css/ninja.css 2012-01-20 15:17:03 overwrite ../css/ninja.css 2012-01-20 15:17:39 overwrite ../css/ninja.css +2012-01-30 16:28:54 overwrite ../css/ninja.css +2012-01-30 16:29:04 overwrite ../css/ninja.css +2012-01-30 16:33:31 overwrite ../css/ninja.css +2012-01-30 17:18:02 overwrite ../css/ninja.css +2012-01-30 18:28:44 overwrite ../css/ninja.css +2012-02-02 17:20:26 overwrite ../css/ninja.css +2012-02-02 17:20:31 identical ../css/ninja.css diff --git a/_scss/imports/scss/_Stage.scss b/_scss/imports/scss/_Stage.scss index a992b793..09dae3d6 100644 --- a/_scss/imports/scss/_Stage.scss +++ b/_scss/imports/scss/_Stage.scss @@ -192,3 +192,17 @@ overflow-x: auto; overflow-y: auto; } +.montage-editor-frame { + position:absolute; + z-index:7; + top: 0; + left:0; + display:none; + -webkit-user-select: initial; +} +.montage-editor { + padding:0px; + word-wrap: normal; + + + } \ No newline at end of file diff --git a/css/ninja.css b/css/ninja.css index 2fcb1380..7bc4c80e 100644 --- a/css/ninja.css +++ b/css/ninja.css @@ -271,6 +271,10 @@ background: transparent; #mainContent .CodeMirror-scroll { height: 100%; overflow: scroll; overflow-x: auto; overflow-y: auto; } +.montage-editor-frame { position: absolute; z-index: 7; top: 0; left: 0; display: none; -webkit-user-select: initial; } + +.montage-editor { padding: 0px; word-wrap: normal; } + /* PanelUI.scss Styles governing the panels in the UI. Note that colors and font definitions go in _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss */ /* layout for the container of all panels within a dock area */ .panelContainer { margin: 0px; padding: 0px 0px; position: relative; /* diff --git a/js/panels/CSSPanel/CSSPanel.js b/js/panels/CSSPanel/CSSPanel.js index 94860b30..cf8880a3 100644 --- a/js/panels/CSSPanel/CSSPanel.js +++ b/js/panels/CSSPanel/CSSPanel.js @@ -20,9 +20,9 @@ exports.CSSPanel = Montage.create(PanelBase, { init : { enumerable:true, value : function (){ - this.minHeight = 300; - this.contentHeight = 300; - this.defaultHeight= 300; + this.minHeight = 195; + this.contentHeight = 195; + this.defaultHeight= 195; /* OLD WAY -- Removing the temporary div // TODO: Remove this comment once this is tested. diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html index 49d10baf..07b823a7 100644 --- a/js/stage/stage.reel/stage.html +++ b/js/stage/stage.reel/stage.html @@ -34,6 +34,14 @@ } } }, + + "textTool": { + "module": "montage/ui/rich-text-editor.reel", + "name": "RichTextEditor", + "properties": { + "element" : {"#": "textToolObject"} + } + }, "owner": { "module": "js/stage/stage.reel", @@ -46,7 +54,8 @@ "_canvas": {"#": "stageCanvas"}, "_drawingCanvas": {"#": "drawingCanvas"}, "stageDeps": {"@": "StageDeps1"}, - "layout": {"@": "layout1"} + "layout": {"@": "layout1"}, + "textTool": {"@": "textTool"} }, "bindings": { "currentDocumentStageView": { @@ -64,6 +73,7 @@
+
asdasd asd asd asd asd asd
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 3e0b852e..96bfccdd 100644 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -12,6 +12,7 @@ var vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils; exports.Stage = Montage.create(Component, { + textTool: { value: null }, // TODO - Need to figure out how to remove this dependency // Needed by some tools that depend on selectionDrawn event to set up some logic drawNow: { value : false }, @@ -780,6 +781,12 @@ exports.Stage = Montage.create(Component, { } }, + toViewportCoordinates: { + value: function(x,y) { + return [x + this._userContentLeft, y + this._userContentTop]; + } + }, + setZoom: { value: function(value) { if(!this._firstDraw) diff --git a/js/tools/TextTool.js b/js/tools/TextTool.js index 538583ee..8b48ff4f 100644 --- a/js/tools/TextTool.js +++ b/js/tools/TextTool.js @@ -6,12 +6,30 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage, DrawingTool = require("js/tools/drawing-tool").DrawingTool; + RichTextEditor = require("montage/ui/rich-text-editor.reel").RichTextEditor; exports.TextTool = Montage.create(DrawingTool, { + + _selectedElement: { value : null }, + + selectedElement: { + get: function() { + return this._selectedElement; + }, + set: function(val) { + if(this._selectedElement !== null) { + + } + this._selectedElement = val; + } + }, + + drawingFeedback: { value: { mode: "Draw3D", type: "rectangle" } }, HandleLeftButtonDown: { value: function(event) { + this.deselectText(); this.startDraw(event); } }, @@ -50,24 +68,88 @@ exports.TextTool = Montage.create(DrawingTool, { if(drawData) { //this.insertElement(drawData); } - + this._hasDraw = false; this.endDraw(event); } else { - this.doSelection(event); + console.log("im here"); + if (this.application.ninja.selectedElements.length !== 0 ) { + this.selectedElement = this.application.ninja.selectedElements[0]._element; + this.drawTextTool(); + } this._isDrawing = false; } } }, + applyElementStyles : { + value: function(fromElement, toElement, styles) { + styles.forEach(function(style) { + var styleCamelCase = style.replace(/(\-[a-z])/g, function($1){return $1.toUpperCase().replace('-','');}); + console.log(styleCamelCase, style, window.getComputedStyle(fromElement)[style]); + toElement.style[styleCamelCase] = window.getComputedStyle(fromElement)[style]; + }, this); + } + }, + + drawTextTool: { + value: function() { + console.log(" now im here"); + this.application.ninja.stage.textTool.value = this.selectedElement.innerHTML; + if(this.application.ninja.stage.textTool.value === "") { this.application.ninja.stage.textTool.value = " "; } + this.selectedElement.innerHTML = ""; + + //Styling Options for text tool to look identical to the text you are manipulating. + this.application.ninja.stage.textTool.element.style.display = "block"; + this.application.ninja.stage.textTool.element.style.position = "absolute"; + + // Set Top & Left Positions + var textToolCoordinates = this.application.ninja.stage.toViewportCoordinates(this.selectedElement.offsetLeft, this.selectedElement.offsetTop); + this.application.ninja.stage.textTool.element.style.left = textToolCoordinates[0] + "px"; + this.application.ninja.stage.textTool.element.style.top = textToolCoordinates[1] + "px"; + + // Set Width, Height + this.application.ninja.stage.textTool.element.style.width = this.selectedElement.offsetWidth + "px"; + this.application.ninja.stage.textTool.element.style.height = this.selectedElement.offsetHeight + "px"; + + + // Set font styling (Size, Style, Weight) + + me = this; + this.application.ninja.stage.textTool.didDraw = function() { + me.applyElementStyles(me.selectedElement, me.application.ninja.stage.textTool.element, ["overflow"]); + me.applyElementStyles(me.selectedElement, me.application.ninja.stage.textTool.element.firstChild, ["font","padding-left","padding-top","padding-right","padding-bottom", "color"]); + var range = document.createRange(), + sel = window.getSelection(); + sel.removeAllRanges(); + range.selectNodeContents(this.application.ninja.stage.textTool.element.firstChild); + sel.addRange(range); + this.didDraw = function() {}; + console.log("im drew here"); + } + console.log("i end here"); + } + }, + + + deselectText: { + value: function() { + this.application.ninja.stage.textTool.element.style.display = "none"; + this.selectedElement.innerHTML = this.application.ninja.stage.textTool.value; + this.application.ninja.stage.textTool.value = ""; + } + }, + HandleDoubleClick: { value: function(e) { - console.log(this.application.ninja.selectedElements[0]._element); - this.application.ninja.selectedElements[0]._element.setAttribute("contenteditable", true); - this.application.ninja.stage._iframeContainer.style.zIndex = 200; - this.application.ninja.selectedElements[0]._element.focus(); + //this.application.ninja.selectedElements[0]._element.setAttribute("contenteditable", true); + + //if (!this.application.ninja.textTool) { + + //} + } @@ -75,10 +157,12 @@ exports.TextTool = Montage.create(DrawingTool, { Configure: { value: function(wasSelected) { + if(wasSelected) { NJevent("enableStageMove"); this.application.ninja.stage.stageDeps.snapManager.setupDragPlaneFromPlane( workingPlane ); } else { + this.deselectText(); NJevent("disableStageMove"); } } diff --git a/node_modules/montage/ui/rich-text-editor.reel/rich-text-editor.css b/node_modules/montage/ui/rich-text-editor.reel/rich-text-editor.css new file mode 100644 index 00000000..656183c4 --- /dev/null +++ b/node_modules/montage/ui/rich-text-editor.reel/rich-text-editor.css @@ -0,0 +1,112 @@ +/* + 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. +
*/ + +.montage-editor { + /* need to be relative in order for the resizer to be positioned correctly */ + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + padding: 4px; + + font-size: 1.0em; + outline: none; + overflow: auto; + z-index: 1; +} + +.montage-editor-frame { + position: relative; + overflow: auto; + height: 100%; + width: 100%; +} + +.montage-resizer-element::selection { + background: rgba(0,0,0,0); +} + + +/* +Resizer +*/ +.montage-resizer { + display: inline-block; +} + +.montage-resizer-frame { + position: absolute; + border: 1px solid black; + z-index: 30; +} + +.montage-resizer-handle { + position: absolute; + border: 1px solid black; + background-color: white; + width: 6px; + height: 6px; + z-index: 31; +} + +.montage-resizer.dragged .montage-resizer-handle{ + display: none; +} + +.montage-resizer-handle:hover { + background-color: black; +} + +.montage-resizer-n { + cursor: n-resize; +} +.montage-resizer-ne { + cursor: ne-resize; +} +.montage-resizer-e { + cursor: e-resize; +} +.montage-resizer-se { + cursor: se-resize; +} +.montage-resizer-s { + cursor: s-resize; +} +.montage-resizer-sw { + cursor: sw-resize; +} +.montage-resizer-w { + cursor: w-resize; +} +.montage-resizer-nw { + cursor: nw-resize; +} + + +/* +Link Popup +*/ +.montage-link-popup { + -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2); + -webkit-border-radius: 2px; + border-radius: 2px; + position: absolute; + border: 1px solid; + background-color: white; + color: #666; + padding: 12px 20px; + z-index: 50; + cursor: default; + border-color: #BBB #BBB #A8A8A8; + font: 13px/normal "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +.montage-link-popup a { + cursor: pointer; + text-decoration: none; + color: #15C; +} \ No newline at end of file diff --git a/node_modules/montage/ui/rich-text-editor.reel/rich-text-editor.html b/node_modules/montage/ui/rich-text-editor.reel/rich-text-editor.html new file mode 100644 index 00000000..0856043f --- /dev/null +++ b/node_modules/montage/ui/rich-text-editor.reel/rich-text-editor.html @@ -0,0 +1,27 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/node_modules/montage/ui/rich-text-editor.reel/rich-text-editor.js b/node_modules/montage/ui/rich-text-editor.reel/rich-text-editor.js new file mode 100644 index 00000000..37fb9599 --- /dev/null +++ b/node_modules/montage/ui/rich-text-editor.reel/rich-text-editor.js @@ -0,0 +1,1669 @@ +/* + 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. +
*/ +/** + @module "montage/ui/rich-text-editor.reel" + @requires montage/core/core +*/ +var Montage = require("montage").Montage, + Component = require("ui/component").Component, + MutableEvent = require("core/event/mutable-event").MutableEvent, + Resizer = require("./rich-text-resizer").Resizer, + Sanitizer = require("./rich-text-sanitizer").Sanitizer, + Point = require("core/geometry/point").Point; + +/** + @class module:"montage/ui/rich-text-editor.reel".RichTextEditor + @extends module:montage/ui/component.Component +*/ +exports.RichTextEditor = Montage.create(Component,/** @lends module:"montage/ui/rich-text-editor.reel".RichTextEditor# */ { + + /** + Description TODO + @private + */ + _hasSelectionChangeEvent: { + enumerable: false, + value: null // Need to be preset to null, will be set to true or false later on + }, + + /** + Description TODO + @private + */ + _uniqueId: { + enumerable: false, + value: Math.floor(Math.random() * 1000) + "-" + Math.floor(Math.random() * 1000) + }, + + /** + Description TODO + @private + */ + _needsSelectionReset: { + enumerable: false, + value: false + }, + + /** + Description TODO + @private + */ + _selectionChangeTimer: { + enumerable: false, + value: null + }, + + /** + Description TODO + @private + */ + _activeLink: { + enumerable: false, + value: null + }, + + /** + Description TODO + @private + */ + _needsActiveLinkOn: { + enumerable: false, + value: false + }, + + /** + Description TODO + @private + */ + _hasFocus: { + enumerable: false, + value: false + }, + + /** + Description TODO + @type {Function} + */ + hasFocus: { + enumerable: true, + get: function() { + return this._hasFocus; + } + }, + + /** + Description TODO + @private + */ + _dirty: { + enumerable: false, + value: false + }, + + /** + Description TODO + @private + */ + _value: { + enumerable: false, + value: "" + }, + + /** + Description TODO + @type {Function} + */ + value: { + enumerable: true, + serializable: true, + get: function() { + var contentNode = this.element.firstChild, + content; + + if (this._dirtyValue) { + if (this._resizer) { + contentNode = this._resizer.cleanup(contentNode); + } + + contentNode = this._cleanupActiveLink(contentNode); + + content = contentNode ? contentNode.innerHTML : ""; + if (content == "
") { + // when the contentEditable div is emptied, Chrome add a
, let's filter it out + content = ""; + } + if (this._sanitizer) { + content = this._sanitizer.didGetValue(content, this._uniqueId); + } + + this._value = content; + this._dirtyValue = false; + } + return this._value; + }, + set: function(value) { + if (this._value !== value || this._dirtyValue) { + if (this._resizer) { + this._needsHideResizer = true; + } + + if (this._sanitizer) { + value = this._sanitizer.willSetValue(value, this._uniqueId); + } + this._value = value; + this._dirtyValue = false; + this._dirtyTextValue = true; + this._needsSelectionReset = true; + this._needsResetContent = true; + this.needsDraw = true; + } + } + }, + + /** + Description TODO + @private + */ + _textValue: { + enumerable: false, + value: "" + }, + + /** + Description TODO + @type {Function} + */ + textValue: { + enumerable: true, + get: function() { + var contentNode = this.element.firstChild, + childNodes; + + if (this._dirtyTextValue) { + if (contentNode) { + if (this._resizer) { + contentNode = this._resizer.cleanup(contentNode); + } + contentNode = this._cleanupActiveLink(contentNode); + } + + this._textValue = contentNode ? this._innerText(contentNode) : ""; +