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.

7:30 – 10:30 SR

• DB backups
• Discussed bug list with Lenny and Dong.
• Angular
  • Seriously useful: Angular UI ~ UI.Utils
  • Set content in the divs and see if they can be brought to the front of the display. Added panels as directives. Now I need to figure out how to make transitions work in this context.

7:30 – 4:00 SR

• DB backups
• More mysterious paperwork. Ronda and Angine have been pinged, and I told them how our truststore was set up.
• Cool thing for the morning: https://github.com/Automattic/atd-jquery
• Angular
  • Add mouse tracking for more intuitive interaction. This looks like a good place that covers events
  • The mousewheel require more work, and an additional library. Monospaced labs has their hamster.js library and an angular directive that uses it. After remembering to include the name in my module’s dependencies, everything worked fine.
  • Figure out tooltips. As usual, stack overflow to the rescue. Now I need to build a lightweight directive that I can wrap in the <a href> element. Bonus points for seeing how to use the ui-jq directive that allows access to the (at least) jquery in the angular distro.
  • Set content in the divs and see if they can be brought to the front of the display. Tomorrow.

Progress for today.

• Checked out the interaction on my touchscreen laptop and found that though the sliders are touch enabled, the mouse move events are not. It looks like I need to add ngTouch to the module. This would be easier if the laptop that I requested back in August would ever show up, but I kinda doubt if Novetta ever actually ordered it, even though they’ve been saying “it’ll be here in two weeks” for the last 5 months. Sigh.
• Drag events work in FF but not Chrome. pinch-to-zoom needs to be trapped and used to handle the Z-axis.