Monthly Archives: February 2015

Phil 2.27.15

7:30 – 5:30 SR

  • So far the only problem with the new FR app seems to be that people want to use old browser versions, so we’ll need to add a browser test and some kind of splash page.
  • Tooltips? I wonder if I can use angular.element to make that work?
  • Well I spent the whole morning chasing down bugs that turned out to be a bad merge. I think with TypeScript you may have to use the ‘force update’ option and prevent merging altogether. On the plus side, I managed to remove circular references for the CanvasBase and ComponentBase classes by creating a new file for WebGlInterfaces that has the interfaces for both modules. So now at the top of each of the Canvas and Component modules is
    /// <reference path="WebGlInterfaces.d.ts" />

    and that seems to solve that problem

  • Tooltips are now working. Had to write a StyleElement class – it was easier than manipulating the style directly, and this way I was able to use the YUI calls that were in the old code:
    export class StyleElement {
        element:HTMLElement;
        x:number;
        y:number;
        hidden:string;
    
        constructor(e:HTMLElement){
            this.element = e;
            this.x = 0;
            this.y = 0;
            this.hidden = 'visible';
        }
        get(arg:string):any{
            var rval:any = this;
            return rval[arg];
        }
        getX():number{
            return this.x;
        }
        getY():number{
            return this.y;
        }
        setXY(args:number[]){
            this.x = args[0];
            this.y = args[1];
            this.toStyle();
        }
        setHTML(text:string){
            this.element.textContent = text;
        }
        show():void{
            this.hidden = 'visible';
            this.toStyle();
        }
        hide():void{
            this.hidden = 'hidden';
            this.toStyle();
    
        }
    
        isHidden():boolean{
            return (this.hidden === 'hidden');
        }
        toggleView():void{
            if(this.hidden === 'hidden'){
                this.hidden = 'visible';
            }else{
                this.hidden = 'hidden';
            }
            this.toStyle();
        }
        toStyle():void{
            var styleStr = 'left: '+this.x+'px; top:'+this.y+'px; visibility: '+this.hidden;
            this.element.setAttribute("style", styleStr);
            //console.log(this.element.getAttribute("style"));
        }
    }
  • I am now kind of paranoid about subversion and am now making full backup copies, since I basically had to do that to restore the project after I realized what happened.
  • And as I was testing against browsers, I found that tooltips didn’t work right on FF. That led me down a rabbit hole described in more detail in my blog.
Advertisements

Phil 2.26.15

7:30 – 3:30 SR, 3:30 – 4:30(?) All Hands

  • Snow. Working from home.
    • Getting TypeScript to work
    • Installing NodeJS
    • Installed node and “File Watchers” plugins
    • Settings->Languages and Frameworks->Node.js and NPM->Node interpreter: C:\Program Files\nodejs\node.exe.
    • Typescript now works, but I need to download definitelyTyped, for which I need Git – Installed.
    • Had to fix the THREE.Mesh d.ts to have the Material be MeshBasicMaterial, which is the default.
    • Compiled all the TypeScript files without errors or warnings. THe code is once more running. That only took 2 hours.
    • Shoveling snow break.
  • Creating a new folder ‘classes’ and moving the TypeScript modules to (CanvasClasses and ComponentClasses) that.
  • Going to try two ways of dealing with the canvas and data
    • Get a pointer to the WebGlCanvas passed to the controller, where WebGlComponent can be added and manipulated.
    • Done (a few times actually). I wound up passing the pointer to a callback function to the WebGlCanvas class that placed itself as the argument and then called the callback. That connects the loop in a nice, optional way. I then tried to have an addCube() method in the controller called, but controllers finish up after directives, I think. So now I’d like to have a way of having the controller call something when it’s ready. That would use the $scope.$on() code, but I’m using the controllerAs pattern , so no default scope. But thanks to this post, I found out how you get at it. Makes good sense too.
    • After looking and looking, I could not find a list of Angular creation events. Then I remembered from somewhere (need to find out where) that wrapping items that need to wait for completion can be done by using zero-length timeouts. Tried it out and it works:
private initCanvasCallback = (canvas:WebGlCanvasClasses.CanvasBase) => {
    var c:any = canvas;
    this.wglCanvas = canvas;
    this.myTimeoutService(this.addCube);
};
    • I’ll need the timeout function anyway for behaviors calculated in the controller, so it makes sense to have that.
    • And that’s a good day done. Tooltips next.

Dong Shin 02.25.2015

Phil 2.25.15

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?

Dong Shin 02.25.2015

  • working on FR app
    • added getFundingRequestByUser method so non-admins cannot see other’s data
    • disabled Obligation/Outlay when Funding Amount is null

Phil 2.24.15

8:00 – 5:30 SR

  • Looks like the 4th is the good day for the meeting. Sent a note to AJ to see if that works for him and where the meeting is.
  • Got most of the WebGLCanvas ported over and working. Timeouts are handled completely differently. I also had a weird experience being unable to set clientHeight and clientWidth without doing it in CSS. threejs.OrbitControls needs that otherwise things go to infinity (and beyond). Bless the FF debugger!
  • Need to get tooltips working next

Dong Shin 02.23.2015

  • working on FR app
    • added delete Funding Request
    • added foriegn keys to tables to cascade delete Funding Requests
      • fr_contract_details, fr_contract_labors, fr_equipments_materials, fr_government_labors, fr_travels,
      • funding_request_pocs – need special care since it’s many to many relation ( key should not be unique!)
    • special cared needed for MySQL Boolean types in RowMapper since null defaults to false!
      • fundingRequest.setTravelFlag(rs.getObject(“travel_flag”) == null ? null : rs.getBoolean(“travel_flag”));

Phil 2.23.15

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.

Dong Shin 02.20.2015

  • support on site…
    • new presentation data
      • incorrect Obligations calculations – need to look at Reqonciler
    • new truancy report for FY15 – need to modify so that no changes are required….
    • removed all VizTool POCs from FY13 Budget Centers

Phil 2.20.15

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.

Dong Shin 02.19.2015

  • checked off the last item from the list
    • Outlay Plan
      • remove Month 13-15
      • auto fill rest when 100%
      • check if value is > amount from Funding Details
  • going thru FR app and fixing new bugs……

Phil 2.19.15

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);
};

Phil 2.18.2014

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.

Dong Shin 02.18.2015

  • working off items from Lenny/Chris
    • change the order of buttons
    • POC’s should be user specfic, can be used from other FRs added by the same user
    • ISR PMO panel
      • Only admins can enter ISR PMO information
      • change ISR PMO POC to ISR PM
      • Req # is text, not drop down
      • Prior Req # comes from FA database
    • Project Description panel
      • add Project Lab PM after Project Lab
      • add text – Select the Service this project is supporting
    • Funding Description
      • Mailing Address not required from EA/REQ
    • Funding Details
      • hide Direct Cite/Reimbursable for EA/REQ
      • remove FY 10 from Appropriations
      • move Funding Type from Funding Description panel (copy?)
    • Contract Process
      • change FR Processing to Invoicing Processing Procedures
        • ACRN, Batch Processing, FIFO, Other
      • remove 100% funds required
      • change Explanation if Other to Invoice Instruction
    • Funding Requirement
      • single entry not multiple
      • remove Justification
      • Date Needed, Amount Needed, 100% Required to Obligate (Yes or No)
    • Contract Labor, Government Labor, Travel, Equipment/Material
      • add Contract # from Contract Details
      • Yes or No
    • Outlay Plan
      • remove Month 13-15
      • auto fill rest when 100%
      • check if value is > amount from Funding Details
    • Service Fee
      • Yes or No
      • Justification is textArea
    • FFRDC
      • Yes or No
      • hide when no
    • Contract Details
      • Yes or No
      • add Are any of the funds being required being placed on contract?

Dong Shin 02.17.2015

  • working off items from Lenny/Chris
    • change the order of buttons
    • POC’s should be user specfic, can be used from other FRs added by the same user
    • ISR PMO panel
      • Only admins can enter ISR PMO information
      • change ISR PMO POC to ISR PM
      • Req # is text, not drop down
      • Prior Req # comes from FA database
    • Project Description panel
      • add Project Lab PM after Project Lab
      • add text – Select the Service this project is supporting
    • Funding Description
      • Mailing Address not required from EA/REQ
    • Funding Details
      • hide Direct Cite/Reimbursable for EA/REQ
      • remove FY 10 from Appropriations
      • move Funding Type from Funding Description panel (copy?)
    • Contract Process
      • change FR Processing to Invoicing Processing Procedures
        • ACRN, Batch Processing, FIFO, Other
      • remove 100% funds required
      • change Explanation if Other to Invoice Instruction
    • Funding Requirement
      • single entry not multiple
      • remove Justification
      • Date Needed, Amount Needed, 100% Required to Obligate (Yes or No)
    • Contract Labor, Government Labor, Travel, Equipment/Material
      • add Contract # from Contract Details
      • Yes or No
    • Outlay Plan
      • remove Month 13-15
      • auto fill rest when 100%
      • check if value is > amount from Funding Details
    • Service Fee
      • Yes or No
      • Justification is textArea
    • FFRDC
      • Yes or No
      • hide when no
    • Contract Details
      • Yes or No
      • add Are any of the funds being required being placed on contract?