8:00 – 3:00 SR

• Deployed new FR to test server
• change canvas directive so that it takes a config object that is fed to the initializer method
• Add a model and verify it works inside of linkFn
• Try and break out the model directive – this is turning out to be a problem. The parent scope should come through if I use transclusion, but that causes the linkFn in the component directive to be called before the class is instantiated (how is that possible, btw). So the answer is probably twofold: First, just treat the objects as a data source and not a component directive. Second, go back to some basic directive examples with transclusion, and then build up an example where parent scope dose track, then start adding in JS Objects until things break
• Work on tooltip and label rendering?

7:30 – 2:30 SR

• Working on scheduling a testing meeting
• After restarting my deployment test client, all the weird FF errors are gone. The texture map still wouldn’t load, so I tried a smaller one. That worked fine. So no big texture files until we know what’s going on. Also, the drawing context appears to get lost when the screen gets locked.
• Worked on migrating WebGLCanvas and WebGLComponent to AngularTS. Thinking about how to share the canvas scope with components.

8:00 – 4:30 SR

• A tad nippy today
• Updating monthly reports and adding an FY15 truancy report. Done.
• Spent the rest of the day building TypeScript versions of WebGLCanvas and WebGLComponent
• Wrote up detailed notes here.

8:00 – 4:00 SR

• Looks like the Angular/TypeScript/WebGL code will probably work on the production machines, based on preliminary tests. Next is to try a full deployment onto the test server. Will need:
  • Angular libraries (or just angular/angular.js)
  • threejs libraries (or just threejs/build/three.js)
  • Test code with assets (basically the whole AngularThreeTS directory
• Updated month for truancy report. We really need to automate this. Also, Lenny wants an FY15 report.
• Adding an overlay plane turned out to be pretty damn hard, basically because Angular doesn’t want this to be easy, I think. Anyway, here’s how it’s done:
• Have a variable for your context. I don’t seem to need it, but I’ve grabbed the elements for the WebGL and overlay as well:

glElement:HTMLCanvasElement;
overlayElement:HTMLCanvasElement;
overlayContext:CanvasRenderingContext2D;

• Set up the WebGLRenderer and the overlay. Note that I have to set attributes using the following styles:

.glContainer {
    position: absolute;
    z-index: 0;
}

.overlayContainer {
    position: absolute;
    z-index: 1;
}

• Now use the styles to set up the elements:

this.renderer = new THREE.WebGLRenderer({antialias: true});
this.renderer.setClearColor(this.blackColor, 1);
this.renderer.setSize(this.contW, this.contH);

// element is provided by the angular directive
this.renderer.domElement.setAttribute("class", "glContainer");
this.glElement = this.myElements[0].appendChild(this.renderer.domElement);

//this.overlayNode = angular.element(divString);
this.overlayElement = document.createElement("canvas");
this.overlayElement.setAttribute("class", "overlayContainer");
this.myElements[0].appendChild(this.overlayElement);
this.overlayContext = this.overlayElement.getContext("2d");

• The 3D and 2D rendering is then done as follows:

draw2D = (ctx:CanvasRenderingContext2D):void =>{
   var canvas:HTMLCanvasElement = ctx.canvas;
   canvas.width = this.contW;
   canvas.height = this.contH;
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   ctx.font = '12px "Times New Roman"';
   ctx.fillStyle = 'rgba( 255, 255, 255, 1)'; // Set the letter color
   ctx.fillText("Hello, framecount: "+this.frameCount, 10, 20);
};

render = ():void=> {
   // do the 3D rendering
   this.camera.lookAt(this.scene.position);
   this.renderer.render(this.scene, this.camera);
   this.frameCount++;

   this.draw2D(this.overlayContext);
};

• Useful data analysis?
  • Techniques overview ppt
  • tf-idf links tfidf.com and Steven Loria
  • Latent Semantic Indexing

7:00 – 4:00 SR

• ITK timesheet!
• Updated JavaUtils.FileUtils to handle selecting a directory. Still need to check in.
• Installed new certs on the test server
• Working on integrating threejs with the framework.
• Got a bunch of 3D directives running in ng-repeat.
• Added texture maps and an assets folder. Each directive is currently loading its own copy of the texture. And it looks like it has to be that way. If I try to point at a common material, I get the following error: WebGL: INVALID_OPERATION: useProgram: object not from this context
• Tested across the major browsers, including Chrome and Safari on the iPhone! Check it out here.
• Working on making some threeJS base classes. This pattern seems to work…

module WGLA1_dirtv {
   // The base class for the webGL 'canvas' has the scene, root object, basic lights and a camera
   class webGLBase {
      myScope:any;
      myElements:any;
      myAttrs:any;

      frameCount:number;
      mouseX:number;
      mouseY:number;
      contW:number;
      contH:number;
      windowHalfX:number;
      windowHalfY:number;
      camera:THREE.PerspectiveCamera;
      scene:THREE.Scene;
      sphere:THREE.Mesh;
      light:THREE.DirectionalLight;
      renderer:THREE.WebGLRenderer;
      redColor:THREE.Color;
      whiteColor:THREE.Color;
      greyColor:THREE.Color;

      constructor(scope:any, element:any, attrs:any) {
         this.myScope = scope;
         this.myElements = element;
         this.myAttrs = attrs;

         this.frameCount = 0;
         this.mouseX = 0;
         this.mouseY = 0;
         this.contW = scope.width;
         this.contH = scope.height;
         this.windowHalfX = this.contW / 2;
         this.windowHalfY = this.contH / 2;
      }


      public init = ():void => {
         this.myElements[0].addEventListener('mousemove', this.onDocumentMouseMove, false);

         this.redColor = new THREE.Color(0xff0000);
         this.whiteColor = new THREE.Color(0xffffff);
         this.greyColor = new THREE.Color(0x080808);

         // Scene
         this.scene = new THREE.Scene();

         // camera
         this.camera = new THREE.PerspectiveCamera(45, this.contW / this.contH, 0.1, 10000);
         // Position is -20 along the Z axis and look at the origin
         this.camera.position = new THREE.Vector3(0, 0, 10);
         this.camera.lookAt(new THREE.Vector3(0, 0, 0));

         var sphereGeometry = new THREE.SphereGeometry(5, 20, 20);

         // This time we create a Phong shader material and provide a texture.
         var sphereMaterial = new THREE.MeshPhongMaterial(
            {
               map: THREE.ImageUtils.loadTexture("assets/earth-day.jpg")
            }
         );

         // Now make a THREE.Mesh using the geometry and a shader
         this.sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

         // And put it at the origin
         this.sphere.position = new THREE.Vector3(0, 0, 0);

         // Add it to the scene and render the scene using the Scene and Camera objects
         this.scene.add(this.sphere);

         // Lighting
         this.light = new THREE.DirectionalLight(0xffffff);
         this.light.position.set(10, 10, 10);
         this.scene.add(this.light);
         this.scene.add(new THREE.AmbientLight(this.greyColor.getHex()));
         /****/
         this.renderer = new THREE.WebGLRenderer({antialias: true});
         this.renderer.setClearColor(this.whiteColor, 1);
         this.renderer.setSize(this.contW, this.contH);

         // element is provided by the angular directive
         this.myElements[0].appendChild(this.renderer.domElement);

         this.renderer.clear();
      };

      onDocumentMouseMove = (event:MouseEvent):void => {
         this.mouseX = ( event.clientX - this.windowHalfX );
         this.mouseY = ( event.clientY - this.windowHalfY );
      };

      render = ():void=> {
         //camera.position.x = ( mouseX - camera.position.x ) * 0.05;
         //camera.position.y = ( - mouseY - camera.position.y ) * 0.05;

         this.camera.lookAt(this.scene.position);
         this.renderer.render(this.scene, this.camera);
         this.frameCount++;
         //console.log("frameCount = "+frameCount);
      };

      animate = () => {
         this.sphere.rotation.y = this.frameCount * 0.01;
         requestAnimationFrame(this.animate);
         this.render();
      };
   }

   // The webGL directive. Instantiates a webGlBase-derived class for each scope
   export class ngWebgl {
      private myDirective:ng.IDirective;

      constructor() {
         this.myDirective = null;
      }

      private linkFn = (scope:any, element:any, attrs:any) => {
         scope.webGlBase = new webGLBase(scope, element, attrs);
         scope.webGlBase.init();
         scope.webGlBase.animate();
      };

      public ctor = ():ng.IDirective => {
         if (!this.myDirective) {
            this.myDirective = {
               restrict: 'A',
               scope: {
                  'width': '=',
                  'height': '=',
                  'fillcontainer': '=',
                  'scale': '=',
                  'materialType': '='
               },
               link: this.linkFn
            }
         }
         return this.myDirective;
      }
   }
}

• As you can see, the weGL parts are in their own class (webGlBase), and are instanced for each scope in (ngWebgl). Tomorrow, I’m going to start pulling code over from my YUI classes and rebuilding them.