Category Archives: NextGen experimentation

Phil 3.26.15

8:00 – 4:00 SR

  • Tested threejs on target browsers. The hardware acceleration is iffy, but the software renderer and the raytracer work fine
  • Deployed Dong’s FR fixes
  • Working on splitting the chart elements into their own module.
  • Argh! Fat arrow functions can’t inherit in TypeScript! Thinking about making a mapping table? Something like
    • fooPtr = (var:number):void =>{…};
    • fooFn(var:number):void{fooPtr(var);}
    • ????
  • Set up and implemented an interface for calculating behaviors, which works nicely:
  • public behavior = (dClock:number, elapsed:number):void => {
       var rb = this.wglCanvas;
       var ci:IChartElement;
       var i:number = 0;
       if (rb) {
          rb.dprint("Hello controller - sin(elapsed) = " + Math.sin(elapsed).toFixed(2));
          for (i = 0; i < this.chartElements.length; i++) {
             ci = this.chartElements[i];
             ci.setZOffset(Math.sin(elapsed + i));
             ci.behavior(dClock, elapsed);

Phil 3.20.15

7:00 – 4:00 SR

  • Still working on the lab problem. I’m using the roll of a six-sided dice to represent labs. Here’s the issue.
    • For an even distribution over a set of options, the probability of an event converges nicely: EvenDistribution
    • A random distribution converges, but not so nicely: RandomDistribution
    • Loaded dice also converge, but in a different way: LoadedDice
    • The question is, how do I tell that the difference between 1 and 2 is acceptable, but that the difference between 2 and 3 isn’t? Also very important is how many “rolls” do you need before you can say that the dice is loaded one way or another? I was looking at Chi Squares, but that doesn’t seem to be right. Currently looking at Binomial Distributions.
    • Ok, it looks like Binomial Distributions are what we want. Here’s what it looks like:BinomialTail
    • In the chart, probabilities accumulate for the first 100 rolls, and then a cumulative binomial distribution is calculated where at least one success happens in the next ten trials. The excel function that does this is:
      • =1-BINOM.DIST(<successes-1>,<trial number starting at 2>, <calculated probability>, TRUE)
    • Note that the probability of a future even sums to more than 100%. This is because the probability of one face coming up at least once in the next ten trials is pretty independent of the other faces, so they get added together. That being said, the differences between the likelihoods remains consistent until they go asymptotic at 100%. This is a pretty good indicator of how far out in the future a prediction can be made. In this case, it looks like 5-15 trials in the future before the high values converge. Note though that the very low values (F5 and F6,which were near zero) still do not have a significant impact on the outcome in this time horizon. So the ability to project into the future is strongly dependent on how spread out the initial probabilities are when the binomial calculations are invoked.

Phil 3.16.15

8:00 – 5:00 SR

  • deployed new FR. Still tweaking.
  • Continuing with charts. My end triangles are not drawing properly yet. D’oh! Stepping by 1 rather than 2 for a triangle strip. And the backface is backward. Both fixed.
  • Adding a cylindrical z component to the chart. Want to compare this to a bevel
    • Spent too much time on this – projection of a cylinder onto a plane is y = sqrt(r*r – x*x)
  • Will probably go for a spherical projection with bevels (z = sqrt(r*r – x*x -y*y)). Working on procedural generation of arbitrary meshes. Done!


Phil 3.12.15

8:00 – 6:00

  • Deployed new FR and worked with the DB
  • Added SW rendering as a selectable option
  • Added highlighting and selecting to Canvas and Components
  • Discovered how to cast in TypeScript. Note that this is only for compile phase:
    var m:THREE.MeshPhongMaterial = <THREE.MeshPhongMaterial>obj3d.material;
  • Tested highlighting in 2d and 3D. Discovered a few use cases where the selected model can get set to null while manipulating the eyepoint and had to fix those.
  • Was going to deploy to my server for testing, but I realized this app needs a database. Started the process, but now it’s got to cook for a while.
  • Lenny wants spreadsheet export, possibly with formulas.
    • Added capability to DbTypedTable to work with multiple sheets.

Phil 3.11.15

8:00 – 4:00 SR

  • Having a bunch of issues with the on site Firefox. WebGl was working but the browser would black out other screens. Now that’s fixed, and WebGL won’t run.
  • Added xcopy . \xampp\htdocs\experiments\WglCharts1 /s /d /y /exclude:excludeFile to the Makefile as the deploy: task. Now all new files are uploaded to the apache directory for testing as part of the build.
  • Need to implement software rendering fallback – done. Had to add common methods/vars (setClearColor(), autoClear)
  • Need to get 2D running – done
  • Got Lenny’s initial chart. It’s capability by appropriation, with the PMAs and FACTS as bars with Outlay goals and Planned outlays as shaded areas. Probably a rolling six month window.

Phil 3.10.15

8:00 – 4:00 SR

  • Wound up passing a callback function from the glController into the queryController so that the data array that’s used to create shapes is called at the end of the retrieval process. Communication with the queryController should be able to go through bound variables?
  • And in case that doesn’t work. Here’s a good source for communication between Angular components.

Phil 3.9.15

8:00 – 4:00 SR

  • Deployed the new FR. Progress, but still not there yet.
  • FF still broken
  • Still no keys for Webstorm
  • Copying over work from home.
  • Started to integrate the graphics and query apps under the assumption that multiple controllers can work and play well together.
  • Wound up passing a callback function from the glController into the queryController so that the data array that’s used to create shapes is called at the end of the retrieval process. Communication with the queryController should be able to go through bound variables?
  • And in case that doesn’t work. Here’s a good source for communication between Angular components.

Phil 3.6.15

7:30 – 3:30 SR

  • Surprisingly, the 10″ of snow that fell yesterday is still there.
  • Setting up the charting project. I’m going to leave AngularThreeTS untouched and just copy it over. I’m expecting the WebGL classes to still change while I work on these components. Once done though, it will go into the libraries with the WebGL directive? Not sure about that yet…
  • A really nice explanation of SQL joins.\
  • Working on the classes to return typed data from queries to the charts. Can’t do trending without knowing what’s a date. Updated FileUtils DbTypedTable with toString() and toExcel()
  • Copied over the AngularThreeTS directory. Now I need to pull in the query parts from iRevdb.
  • Verified that CanvasBase.removeModel still works.
  • Added a minimum set of query capability. Right now, it’s in a separate htmls page, but I should be able to integrate pretty soon.

Phil 3.5.15

7:30 – 4:30 SR

  • Create data to chart!
  • Reply to Chris’ email for recording twitter data – done
  • Create chart db – done.
  • Create statement table with rank and count. Save as insert into text, fix formatting in file before loading
  • make sure that textures, lines, reflections and skybox works (WebGLModuleTest)
    • There were a few things missing and some issues with how lines get handled, but everything pretty much patched in correctly. Running code is here (for now…)
  • Create new project with db access. Basically blinddb with WebGL div. Call it WebGlCharting1

Phil 3.4.15

8:00 – 4:00 SR

  • Testing meeting – me, Ronda, Agenia, Lenny.
  • Status report!
  • Finish up templates and put them in SVN – Done, demo’d to Dong
  • Need to add all the working templates to the templates directory and add a README – Done
  • CATS is an IDE for TypeScript and Web developers. CATS is open source software released under the Apache 2.0 license and runs on Linux, Windows and OS X. CATS itself is also written in TypeScript, so you can easily customize it if required.
  • Verify that lines and textures work in the new framework.

Phil 3.3.15

8:00 – 4:30SR

  • Deploying new FR
  • Status report
  • Transfer grunt/make to work dev box. Done and working. Looking for something that will allow me to coordinate dependencies like the unix touch. Found it here:
  • Working on the project makefile.
    • Build works and has been cleaned up
    • Added clean
    • Added grunt-local, which sets up grunt with what’s needed to watch the makefile
    • Added grunt-global, which installs the grunt command line globally
  • Started on templates for AngularTS modules, directives and controllers.

Phil 3.2.15

8:00 – 6:30 SR

  • The world is a sheet of ice. Working from home.
  • Was able to update my directory, but the watcher in IntelliJ is based on save actions in the file you’re editing. This is horribly frustrating in that sometimes the whole project needs to compile based on dependencies. The answer for this appears to be Grunt, and it looks like the process is laid out here.
  • Timesheets are working!
  • Ok, everything below this line is a rant, basically. If you want to know what wound up working, read here.
  • Installing Grunt, which has caused IntelliJ to completely freeze “Scanning files to index”. This is really pathetic.  Going to go scrape ice for a while and hope that my Xenon 3.3Ghz tower with 8 GB of ram can finish scanning some JavaScript Files. It may be a memory issue. From StackOverflow:

    I had the same problem with slowness in IntelliJ 13 after upgrading from 12. What worked for me was editing the idea64.vmoptions in the bin folder and setting the max heap to 8 GB (was 512 MB) and the Max PermGen to at least 1GB (was 300MB).Example below:
    Upon restart it was much faster.

    Then again, it may not be. I started to get error messages on the install that had hugely deep paths. A *lot* (30,000 files!) of stuff was getting installed. More than needed. Deleting it all and trying again from outside the IDE. If that doesn’t work, then I’m going to change the watcher so that it compiles all items explicitly.

      • Nope, disregard all of the above. The enormous install was because I had mistaken
      • npm install grunt-contrib-watch –save-dev
      • from
      • npm install grunt-contrib-watch –save -dev
      • when it should have been
        npm install grunt-contrib-watch -–save-dev
      • You know, this is because all of us developers are all looking for things that work and documenting it just when we get it running. No extensive tests that go along with books, just flaliing and commenting. Anyway, I got grunt to work, and have now run up against some weird typescript problem.
      • When you take each individual typescript file and compile it, as the IntelliJ watcher does, I get no errors. Here’s my code files:
        tsc --declaration --noImplicitAny --target ES5 --sourcemap classes/WebGlInterfaces.ts
        tsc --declaration --noImplicitAny --target ES5 --sourcemap classes/WebGlCanvasClasses.ts
        tsc --declaration --noImplicitAny --target ES5 --sourcemap classes/WebGlComponentClasses.ts
        tsc --declaration --noImplicitAny --target ES5 --sourcemap controllers/WGLA1_controller.ts
        tsc --declaration --noImplicitAny --target ES5 --sourcemap directives/WGLA2_directives.ts
        tsc --declaration --noImplicitAny --target ES5 --sourcemap modules/AppMain.ts
      • However, when I compile all on a single line (as Grunt does), I get the following errors:
        classes/WebGlCanvasClasses.d.ts(12,11): error TS2300: Duplicate identifier 'StyleElement'.
        classes/WebGlCanvasClasses.d.ts(29,11): error TS2300: Duplicate identifier 'CanvasBase'.
        .......... lots more errors................
        directives/WGLA2_directives.ts(67,12): error TS2341: Property 'linkFn' is private and only accessible within class 'ngWebgl'.
        directives/WGLA2_directives.ts(70,11): error TS2341: Property 'myDirective' is private and only accessible within class 'ngWebgl'.
      • Because like all modern code it seems, Grunt has a large set of plugins to do the same thing. In this case, we have grunt-typescript, and grunt-ts. Very similar. Only grunt-ts allows you to specify individual compile targets, which is what I need to avoid the compile errors listed above.
      • So to get all the pieces working together, first install grunt globally as per here. Once that’s done go to the root of your project directory and type the following:
        npm init
        npm install grunt -–save-dev
        npm install grunt-ts -–save-dev
        npm install grunt-contrib-watch -–save-dev
      • Once that’s done, you need to create a GruntFile.js. Here’s what works for me:
        module.exports = function (grunt) {
                pkg: grunt.file.readJSON('package.json'),
                ts: {
                    default: {
                            {src:['classes/WebGlInterfaces.ts'], dest: 'classes/WebGlInterfaces.js'},
                            {src:['classes/WebGlCanvasClasses.ts'], dest: 'classes/WebGlCanvasClasses.js'},
                            {src:['classes/WebGlComponentClasses.ts'], dest: 'classes/WebGlComponentClasses.js'},
                            {src:['controllers/WGLA1_controller.ts'], dest: 'controllers/WGLA1_controller.js'},
                            {src:['directives/WGLA2_directives.ts'], dest: 'directives/WGLA2_directives.js'},
                            {src:['modules/AppMain.ts'], dest: 'modules/AppMain.js'}
                    options : {
                        fast : 'watch',
                        declaration: true,
                        target: 'es5',
                watch: {
                    files: ['**/*.ts', '!**/*.d.ts'],
                    tasks: ['ts']
            grunt.registerTask('default', ['watch']);



  • Once that’s done, type ‘grunt’ at the command line and you should get the following:
    Running "watch" task
  • At this point, a change in any of the ts files will cause all the ts files to compile to their respective .d.ts and .js files. This is better, but I still want dependency chaining. Still looking for that.

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 {
            this.element = e;
            this.x = 0;
            this.y = 0;
            this.hidden = 'visible';
            var rval:any = this;
            return rval[arg];
            return this.x;
            return this.y;
            this.x = args[0];
            this.y = args[1];
            this.element.textContent = text;
            this.hidden = 'visible';
            this.hidden = 'hidden';
            return (this.hidden === 'hidden');
            if(this.hidden === 'hidden'){
                this.hidden = 'visible';
                this.hidden = 'hidden';
            var styleStr = 'left: '+this.x+'px; top:'+this.y+'px; visibility: '+this.hidden;
            this.element.setAttribute("style", styleStr);
  • 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.

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;
    • 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.

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?