9:00 – 5:00 SR

• Db backups
• Updated Java on the servers
• Installed Dong’s new views. Lenny’s testing. There are some issues that he’s noting in an email. It appears that all the old data that were deleted are back, but none of the new data is visible.
• Edit task list to provide hours.
• More picking
  • Unitizing the mouse position worked
  • Changing userData to a pointer to the model and using the name field.
  • Done. That was not too bad!
• Adding reflection maps
  • Added skybox to canvas
  • Added reflections. Going to try for a shiny textured earth tomorrow, then maybe some dragging?

Today’s progress.

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.