8:00 – 5:00 SR

• Deploying new dynamic chart script
• Fixed a few things, but a Month4 Obligated is not working. Manually updating tables for briefing.
• Got promises to work. This is a very nice thing.
• Working on Object/Function construction and it is way strange. Masking depends on the order of declarations in a very counter intuitive way. More here.

8:00 – 4:30 SR

• Fixed most of the issues with the dynamic chart presentation. Committed isn’t carrying over, and the generalized solution to partial FY needs to be implemented for all months.
• Trying to wrap all the pieces of JS inheritance into one call. Looking at this for the moment…
• Had an idea about using Turk for generalized GUI testing using an Angular directive framework (it’ll need lots of OO!) and database io like what I did for iRevTurk.
• Need to fix promises in my server code.
• Timesheets…

10:00 – 4:30 SR

• Morning doctor appt.
• Mostly fixed the dynamic chart script. 2014_OM_ISRPMO isn’t getting any data though.
• Deployed the new version of the Runding Request app but couldn’t get login to work.
• Working on integrating ace/ui-ace into, well, everything.
• Got the ui-ace editor roughtly integrated into scatterplot. The editor doesn’t have any programmatic configuration/data yet, but that can be added to the  mc.paneldata object.
• And that’s it for the week. I’m off presenting at TEI 2015 for the rest of the week.

8:00 – 5:30 SR

• ran the dynamic_charts script and then reset the last_run time to 1:00am. Now it should run when folks are not around.
• Going to try changing the scatterplot test controller to run in a new module that references the scatterplot directive module. That worked just fine.
• Added an appMap object to GlobalUtils. All objects are created as attributes of globalutils.appMap. to keep things clean in the function, it’s recommended to pass the values of appMap into the wrapping function:

(function(angular, scatterplot) {
    "use strict";
    angular.module('scatterApp', ['ngAnimate', 'ngSanitize', 'monospaced.mousewheel'])
        .directive('stagePlanes', [scatterplot.stagePlanesPtr])
        .directive('interactive3D', [scatterplot.interactive3dPtr])
        .directive('floatingPanelManager', [scatterplot.floatingPanelManagerPtr])
        .directive('floatingPanel', ['$sce', scatterplot.floatingPanelPtr]);
})(angular, globalUtils.appMap.scatterplotDirectives);

• Something to look into: RequireJS. It’s got asynchronous loading of namespaced JavaScript files.
• Continue working on the divs for scatterplot to create forms.
  • Before I try a form, I’m going to try to have the ace editor be the selected appearance. If I can get that to work, then integrating forms will be a piece of cake. Forms are always the fallback anyway…
  • Got the editor working, but it doesn’t play well with angular. There is a a directive though – UI-ace that looks promising. Got that to work, but it doesn’t seem to allow for data binding. Need to look into how to load the text in the editor.
• Start on threejs charting?
• Meeting with Agenia at 4:00 – 5:30

8:00 – 5:00 SR

• DB backups now appear automated!
• Failover is a problem since our servers apparently run in two different VMs
• Discussed plans with Lenny, and the presentation with Don
• Tried the code restructuring on my irev apps, which are a reasonably large Angular app. After a few dumb cut-and-paste errors, everything works…?
• Next will be to inherit an app and turk controller from the postControllers.
  • Had to change any variable or function to be explicitly attached to this/self, but other than that, everything works. Broke out irevTurk to it’s own module, using an inherited postController. Deployed and running!

7:30 – 4:30 SR

• DB backups
• Some back and forth with Agenia about when to meet next. Some morning next week
• Nearly fixed the dynamic charts.
  • ‘ISR-PMO’ chokes the query.
  • The goals seem to have problems on FY boundries.
• Deployed Dong’s FR app on the test server and it seems to work
• Spent some time going over the FR Angular code, and there are some very weird things. In the process of fixing(?) them, we broke the app. Dong’s looking into that now.
• Started to pull the iRev code apart and use inheritance. The use of all the functions and pointers seems to be working fine, but there’s a lot of code to move around. I think I’ll create an iRevApps2 directory and populate with cleaned items. At this point I’m thinking that the organization should look something like this:
  • globals – contains JS objects that are used throughout the applications
  • angular – contains the actual angular code used by the application. A single file for a simple SPA should look something like this:

// The Angular code
(function(angular, ml, undefined) {
    angular.module('globalsApp', [])
            .factory('GlobalsService', [ml.factoryPtr]);

    angular.module('inheritApp', ['globalsApp'])
            .controller('MainCtrl', ['GlobalsService', ml.childPtr]);
})(angular, myLogic);

• then I’m not sure. There needs to be a place for common/base classes. Then possibly folders for each SPA component? Here’s Google’s style guide to ponder.

Phil 8:00 – 5:00 SR

• DB Backups
• Tried fixing dynamic charts Python script but no luck. Dong’s going to take back to the office and fix there.
• Angular.
  • More inheritance. Based on yesterday’s work, I finally got all the pieces running together in a global scope. Then, based loosely on this post,  I added in modules using the Revealing Module Pattern. And everything works! Here’s a plunk.
  • Now that I’ve gotten something running, my searching is coming back with usable results. Here are some other approaches, though sometimes also on very old version of Angular:
    • Using Base Controllers In AngularJS – An Experiment 
    • Controller Inheritance in AngularJS 
    • Re: [angular.js] Re: Controller Inheritance (Misko Hevery v1.0-ish)
    • Base Controller with AngularJS (This is closest to what I’m doing)
  • Here’s my writeup on today’s big adventure.

8:00 – 4:00 SR

• Snow!
• ITK timesheet
• Status report
• Made FY charts for all FY2015. It looks like the new query is using the wrong values for the Name column – e.g., it should be ‘PM Actuals’ but it’s coming back as ‘PM Actuals (Invoiced) Outlay $’
• Angular
  • Was looking at the scatterplot app and it’s entirely broken. I’m thinking that I didn’t update all of the code to subversion when I was working on it back on the 24th. Setting that aside for the day. I think I’m going to try to understand how to do inheritance in Angular. And a darn good thing too. I found all my missing code, fixed a few things, committed it, and put it up here.
  • Rediscovered that ‘this’ is not part of a javascript function. Which makes the whole var self = this part of a controller now very confusing. Ah, in looking at the debugger, controllers get a special ‘this’ – ‘$get.Constructor’

• There doesn’t seem to be much discussion about this – mostly this bit on stackoverflow.
• Making slow progress. I can declare a function outside of the controller, inherit from it and use that as the controller’s function, but so far I can’t pass arguments. Since that’s only needed to inject other angular objects, I put together a tiny service that provides a string. We’ll see if I can make that pass in correctly tomorrow.

8:00 – 5:30 SR

• Fix ITK timesheet for 12/21?
• DB Backups
• Status report
• Angular
  • Spent most of the day trying to figure out how to get server information such as referrer. Wound up with a php hack:

<?php
// this is the only way that I know to get the referring page. We will then send this to the db.
function getReferrer(){
    $referrer = "No Referrer";
    if(isset($_SERVER['HTTP_REFERER'])) {
        $referrer = htmlentities($_SERVER['HTTP_REFERER']);
        if($referrer == ""){
            $referrer = "No Referrer";
        }
    }
    return $referrer;
}
echo '<div id="phpReferer" hidden>'.getReferrer().'</div>';
?>

• This uses php to compile a page with a div named ‘phpReferer’. Since the page exists before Angular has a chance to process it, the hidden div is available in the document. It’s then a matter of getting the $document (passed into the controller) and looking through it. Note that the jQueryLite that angular has doesn’t allow finding divs by ID, so we have to loop over the results for <div> until we find what we’re looking for:

self.phpReferer = null;
var divArray = $document.find('div');
var i;
for(i = 0; i < divArray.length; i++){
   if(divArray[i].id === 'phpReferer'){
      self.phpReferer = divArray[i].innerText;
   }
}

• I’m not hugely happy with this, but it does work…
• Also looked at how to do polymorphism in Angular. I found this example, which is somewhat confusing and bares further examination. The guy who described it, Miško Hevery, is one of the authors of Angular, so I give him the benifit of the doubt. And here’s a talk by him on OO and JavaScript. Currently 46 minutes in.

8:00 – 5:00 SR

• DB backups
• Angular
  • Starting db-backed ‘wizard’ directive. We’ll probably use this mechanism for the Funding Request webapp.

CREATE TABLE IF NOT EXISTS `wizard_table` (
  `uid` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `step` int(11) NOT NULL,
  `question` varchar(255) NOT NULL,
  `info` varchar(255) NOT NULL,
  `response_type` varchar(255) NOT NULL,
  `responses` int(11) NOT NULL,
  PRIMARY KEY (`uid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

• Populating table with famous quotes
• Starting the main directive code. Since this isn’t an ng-repeat, I need to load the data and set the first panel with an ng-init call.
• Got everything working. Need to clean up a bit.

8:00 – 5:00 SR

• DB backups
• Tested scatterplot on target clients – good performance!
• Discovered the JavaScript blog Performance Kills. Yow.
• Angular
  • Need to make sure that the array of panels is cleared out on new loads.
  • Instrumenting directives is tricky! I wound up adding a debugText property to the panelObj object that I’m passing to the PanelManager directive. I can write into that object inside a directive’s controller and see the results that way.
  • Changed the panelArray to a panelMap. Add and delete now the appropriate-sized map. However, extra selects and hovers slip through, Need to make more robust.
  • Turning the stage div into a directive. Done. Much nicer. Isolates all the mouse interaction and matrix math too.

8:00 – 5:30 SR

• DB Backups
• Angular
  • Keeping scatterplotTest1 intact in case I break things
  • Adding a controller at the panel organization level. This should closely mimic how tabs should work – selecting a tab causes the others to go to the ‘unselected’ state. the getCssClass() call should still work though, which is nice.
  • Help from StackOverflow: http://stackoverflow.com/questions/15672709/how-to-require-a-controller-in-an-angularjs-directive
  • To make this work, the directives need to communicate, which requires a controller. To manage the instances, we must use the ‘requires’ tag. Here’s what I did:

First, excerpts from the javascript directives

sp.directive('floatingPanelManager', [function() {
   return {
      restrict: 'AE',
      scope: {
         panelObj: '='
      },
      templateUrl: 'directives/floatingPanelManager.html',
      controller: function($scope) {
         var currentId = -1;
         var hideAllPanels = false;
         $scope.panels = [];
         this.registerPanel = function(panelScope){
            $scope.panels.push(panelScope);
         }
         this.selectPanel = function(panelId) {
            currentId = panelId;
            var ps;
            for (var i = 0; i < $scope.panels.length; i++) {
               ps = $scope.panels[i];
               if(ps.$id === panelId){
                  ps.selected = !ps.selected;
                  hideAllPanels = ps.selected; // hide all the other panels if one is selected
               }else{
                  ps.selected = false;
               }
            }
         };
         this.getHideAllPanels = function(){
            return hideAllPanels;
         }
      }
   }
}]);

sp.directive('floatingPanel', ['$sce', function(sce) {
   return {
      restrict: 'AE',
      require: '^floatingPanelManager',
      scope: {
         panelObj: '=',
         stageObj: '='
      },
      templateUrl: 'directives/floatingPanel.html',
      link: function(scope, element, attr, panelMgr) {
         panelMgr.registerPanel(scope);
         scope.getCssClass = function(){
            if(scope.selected){
               return 'selectedClass';
            }
            if(panelMgr.getHideAllPanels()){
               return 'hiddenClass';
            }
            if(scope.hover){
               return 'hoverClass';
            }
            return '';
         }
         scope.selectPanel = function(){
            var sid = scope.$id;
            panelMgr.selectPanel(sid);
         }
      }
   };
}])

And here’s the directive html:

<div class="floatingPanelStyle" ng-class="getCssClass()"
     ng-click="selectPanel()"
     ng-mouseenter="hover = true"
     ng-mouseleave="hover = false"
     ng-style="{'transform':getTransformString()}" ng-bind-html="getHtml()"></div>

• In this case, I have a ‘floatingPanel’ directive that requires (watch the spelling!!!)  ‘floatingPanelManager’. The use of ‘require’ means that angular will inject the required instance as the fourth argument to the link function.
• It’s important to remember that we have to have a single instance here. In this case, that instance has an array of all the floating panels that are being managed. And that array needs to be attached to the $scope passed into the controller. As I understand it, that means that it is attached to the DOM.

8:00 – 4:30 SR

• DB Backups
• Angular
  • After spending most of the day puzzling out how come my transforms weren’t working correctly, I came to the realization that it’s impractical to unproject a CSS shape into screen space. It’s obvious in hindsight, but I’m used to working with projection and model matricies, and CSS3 only gives you the MODEL matrix. Perspective is determined using the perspective CSS property, which gives the distance to the z=0 plane. Short distances give wide perspectives, large distances give a telephoto effect. The problem is that there is not enough information to calculate the view frustum from this, at least in the way that xGL would do it (using 8 points, or two rectangles forming a prism).
  • Ok, after looking at the Wikipedia entry, this may not be so tough after all. http://en.wikipedia.org/wiki/3D_projection. Still tricky since this may or may not be the same matrix that the browser is using…
  • It does strike me that the way that CSS is doing things is effectively a pinhole camera, so it should be possible to work out the perspective matrix from that, but I’m not up to it today. I think instead, I’ll work on hiding/dimming items that are not selected while an item is selected. I think this calls for using controllers inside directives (pg. 216 Angular JS Up and Running)

8:00 – 12:30 4:00 – 6:00 SR

• DB backups
• Meeting with Agenia
• Angular
  • Working on changing states on floatingPanel
  • Got some easy ng-class changes running
  • Changed the transform call so that they use matrix3d. This way I can unproject the individual floating panels.