8:00 – 5:00 SR

• DB backups
• Deploy new RQ – or at least most of it…
• Got the list of desired enhancements. Need to assign hours.
• JavaScript
  • Threejs examples
  • Work on making a YUI module that extends WebGLComponent – Done!
  • Added three.js loading capability. Easy!

YUI({
        groups:{
            threejs:{
                base: './libs/',
                async: false,
                modules: {
                    'threejs': {
                        path: 'three.js'
                    }
                }
            },
            localModules:{
                base: './BasicBaseElements/',
                modules: {
                    'WebGLCanvas': {
                        path: 'WebGLCanvas/js/WebGLCanvas.js',
                        skinnable: true
                    },
                    'WebGLComponent': {
                        path: 'WebGLComponent/js/WebGLComponent.js',
                        skinnable: false
                    }
                }
            }
        }
    }).use('threejs', 'WebGLCanvas', 'WebGLComponent', 'panel', 'dd-plugin', function (Y) {...});

• Ok, now to inheritance
• To inherit in YUI, it looks like all you have to do(?) is to use Y.Base.create, and specify the component that you are extending. Here’s how it looks:

YUI.add('WebGLSphere', function (Y) {
    "use strict";

    // handy constants and shortcuts used in the module
    var _LANG = Y.Lang;
    var _NAME = 'WebGLSphere';



    // publish the global prototype
    Y.WebGLSphere = Y.Base.create(
        _NAME, // the name of this module (for debugging
        Y.WebGLComponent, // the class we are extending (can be Widget too)
        [], // any extensions that we want to properties or methods (e.g. ArrayList)

        // Instance members are the properties and methods that go into the class prototype, those that
        // each instance will get a copy and usually need to be references by 'this'
        {
            // prototype variables

            // prototype methods

        },
        //  Attributes - accessed through this.get('attrName') and this.set('attrName', value).
        // Note that we can do "type" checking here with validators
        {
            ATTRS: {
		myValue:{
			value: 1.0
		}
            }
        }
    );

}, '0.1', {
    requires: ['WebGLComponent'],
    skinnable: false
});

In this case, the module I’m creating is Y.WebGLSphere. I am extending it from Y.WebGLComponent. In the code above, it does nothing. Next, I’m going to override the initModel function to create a sphere and the initializer to take a jpg to use as a texture.

8:00 – 4:00 SR

• DB Backups
• Breaking out models from the scene. Figuring out what parts of THREE.js were needed to work took a bit of time but the results are good.
• Had a lot of trouble with “this” today. The lesson learned is that when a locally declared function is called from outside the class, there is no “this”. To get that to work you have to have the function AND the variable referenced in the prototype. If the variable is a reference, then it appears that you can get away with declaring it locally, but what really seems to be happening is that the same reference is being shared “globally” across all instances. If the variable is declared in the prototype, it’s unique. Here’s all of WebGLComponent. Note that mesh and dprintArray are declared in the prototype:

YUI.add('WebGLComponent', function (Y) {
     "use strict";

     // handy constants and shortcuts used in the module
     var _LANG = Y.Lang;
     var _NAME = 'WebGLComponent';

     // private variables



     // private function predefinitions. We can "publish" them at the end of this object
     var _initializer;
     var _initModel;
     var _setPosition;
     var _setScale;
     var _update;
     var _dprint;
     var _dshow;

      // private function definitions

      /* The initializer method has several tasks. First, it should set any properties that need to be
      initialized to objects or arrays. Then it will publish all the events this class will produce.
      the cfg object is an arbitrary object such as {myValue:321, foo:'bar'} */
     _initializer = function (cfg) {
         //Y.log("--->The following config object was passed into the RemoteDataChart initializer.'"+cfg.myValue+"'");
          this.dprintArray = new Array(100);
          this.dprintArray.length = 0;
          if (cfg.hasOwnProperty('objName')) {
              this.set('objName', cfg.objName);
     }
     if (cfg.hasOwnProperty('timeScalar')) {
          this.set('timeScalar', cfg.timeScalar);
     }
     this.initModel();

     };


     _initModel = function () {
          var geometry = new THREE.CubeGeometry(1, 1, 1);
          var material = new THREE.MeshPhongMaterial({color: 0xFFFFFF});

          var mesh = new THREE.Mesh(geometry, material);

          this.set('object3d', mesh);
          this.mesh = mesh;
     };

     // setPosition - move the object to a new position
     _setPosition = function (x, y, z) {
          if (this.mesh) {
             this.mesh.position.set(x, y, z);
          }
     };

    //setScale - scale the object
     _setScale = function (x, y, z) {
     if (this.mesh) {
         this.mesh.scale.set(x, y, z);
     }
     };


 _update = function (elapsed) {
          var rate = this.get('timeScalar');
          var angle;
          if (this.mesh) {
              this.mesh.rotation.x += rate * elapsed;
              this.mesh.rotation.y += rate * elapsed;
              this.mesh.rotation.z += rate * elapsed;
              angle = this.mesh.rotation.x;
              this.dprint("angle = "+angle.toFixed(2));
          }
 };


 _dprint = function(str) {
          this.dprintArray.push(this.get('objName')+": "+str);
 };

 _dshow = function(dpa) {
          var i;
          for(i =0; i < this.dprintArray.length; i++){
              dpa.push(this.dprintArray.shift());
          }
          this.dprintArray.length = 0;
 };

 // publish the global prototype
 Y.WebGLComponent = Y.Base.create(
      _NAME, // the name of this module (for debugging
      Y.Base, // the class we are extending (can be Widget too)
      [], // any extensions that we want to properties or methods (e.g. ArrayList)

          // Instance members are the properties and methods that go into the class prototype, those that
          // each instance will get a copy and usually need to be references by 'this'
      {
         // prototype variables
          mesh: null,
          dprintArray: null,

          // prototype methods
          initializer: _initializer,
          initModel: _initModel,
          update: _update,
          setPosition: _setPosition,
          setScale: _setScale,
          dprint: _dprint,
          dshow: _dshow
 },
 // Attributes - accessed through this.get('attrName') and this.set('attrName', value).
 // Note that we can do "type" checking here with validators
 {
          ATTRS: {
              timeScalar:{
                  value: 1.0
              },
              objName:{
                  value: "unset"
              },
              object3d:{
                  value: null
              }
          }
     }
 );

}, '0.1', {
 requires: ['base-build', 'node', 'event'],
 skinnable: false
});

8:00 – 5:00 SR

• DB backups
• Lenny’s making progress in as our new security guy
• Need to fix the appropriation year calculations in the fake data generator. Done
• Need to build a YUI template and store it off as a complete project. Done, but I spent a while running in circles trying to get resize to work on the YUI panel. It turns out that you have to enable resize on the node the panel points at. So the code kind of looks like this:

 // If we want to make the panel resize, we have to manipulate the srcNode.
 // This must be done before the Panel is created
 var n = Y.one("#topNode");
 n.plug(Y.Plugin.Resize);

 var panel = new Y.Panel({
     srcNode : n,
     x :200,
     y :100,
     headerContent : 'A Panel containing a widget',
     plugins : [Y.Plugin.Drag]
 });
 panel.render();

• This also requires that the style for the div have the position: relative property set. Here’s how it’s done in this example:

.topNode{
     position: relative;
     width:800px;
     height:640px;
     background: #bcbcbc;
     overflow: hidden;
}

• I then spent a while seeing if typescript could be integrated, but it and YUI are really two very different patterns.
• Working on the WebGL container
  • Set for 2D/3D
  • use defaults (ambient/directional light, perspectives, etc)
  • Show/hide stage
  • Add models. Looking at the code, the cube is currently added as a mesh to a scene. Need to look into how to break that apart. Going to start with the “interaction-simple.html” code from the webgl book and try adding the cube in as a model first.

8:00 – 5:00 SR

• DB Backups
• Helping Dong out with some questions he has. Some queries are running on the production servers that don’t run on his dev box?
• Finish financial reporting
• JavaScript
  • Reworking WebGLCanvas. I think it’s better. The structure is now:
    • YUI.add(‘ModuleName”, function(Y) {} wrapper
      • List of all the private variables, using _myVariable notation
      • List of all the private variables that will point at functions (e.g. var _myFunction)
      • The function declarations (e.g. _myFunction = function (args) {};)
      • The publication section – Y.WebGLCanvas = Y.Base.create({/* vars*/}, {/*attrs */});
        • in the {/*vars*/} object, the prototype function vars are matched to a local var (defined above). It looks like this
          • myProtoVariable: null,
          • myProtoFunction:  _myLocalFunction,
          • etc.
        • There are no bodies to anything, just pointers to functions that have already been declared. Closure takes care of the wrapping of appropriate module data. This way, exactly what is in the prototype can be quickly seen.
        • The {/*attrs*/} object is handled in the ‘traditional’ YUI way, since each attribute is actually a cluster of small sub-objects, no clarity is gained by breaking things up.
    • Still have to see if this mechanism extends correctly, but that’s next week.
  • Spent a good deal of time getting panel components to assemble correctly. I had to go digging for the height of the header and allow a modified height value to be passed into the WebGLCanvas. Sheesh.

Still, good progress for the week.