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.
  

8:00 – 4:00 SR

• Deploy new test FR today.
• I think I realized the problem that we were having importing the cert yesterday. We need the original jks file from the keytool -genkey command. That (I believe) contains the public key that is used to create the certificate. From Oracle: If the public key in the certificate reply matches the user’s public key already stored with under alias, the old certificate chain is replaced with the new certificate chain in the reply. The old chain can only be replaced if a valid keypass, the password used to protect the private key of the entry, is supplied. If no password is provided, and the private key password is different from the keystore password, the user is prompted for it.
• Change LoginPanel directive to use instanced TypeScript Object. Done, and it went quite well. The only thing to note is that fat arrow notation has to happen inside *every* function inside the scope (and as a quick aside, what happens if you break the chain? Can you have two scopes if you nest function(){}/()=>{} in the right way?). The compiler warns you about ambiguous ‘this’ cases, which is nice. It can look kins of wierd, though:

then( ():void => {
   scope.isValid = this.loginObj.response;
   if (this.loginObj.response) {
      scope.speak('new password for ' + this.loginObj.name + ' accepted');
   } else {
      scope.speak('new password for ' + this.loginObj.name + ' rejected');
   }
}, this.errorResponse);

• Start porting threeJS canvas framework today.
  • Got the base module controller framework set up
  • Imported definatelytyped for threejs, which barfed a bit.
  • Discovered sizing relative to viewport here, which means that the following will fill up the browser window with a 5% whitespace border!

.glWindow{
    position: absolute;
    box-sizing: border-box;
    top: 5vh;
    left: 5vw;
    width: 90vw;
    height: 90vh;
    background-color: red;
}

• While looking for how to get a canvas element, I found a (good?) TypeScript/WebGL series of posts here.
• Yay!