Monthly Archives: December 2014

Dong Shin 12.29.2014

  • finished up basic layout of Funding Request page in AngularJS
  • created tables for Funding Request
    • fr_contract_details, fr_contract_labors, fr_equipments_materials, fr_funding_requirements, fr_government_labors, fr_travels, funding_requests
  • working on server side
    • created all POJO’s for Funding Request
    • using BigDecimal for currency
    • working on services

Phil 12.24.12

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.

Phil 12.23.14

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:
    • 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){
         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
                  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) {
         scope.getCssClass = function(){
               return 'selectedClass';
               return 'hiddenClass';
               return 'hoverClass';
            return '';
         scope.selectPanel = function(){
            var sid = scope.$id;

And here’s the directive html:

<div class="floatingPanelStyle" ng-class="getCssClass()"
     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.

Dong Shin 12.23.2014

  • continue working on Funding Request (AngularJS)
    • got datePicker working
      • need glyphicons –
    • use angular.copy for arrays in modal dialogs to prevent updates to the parent scope!
    • simple directive for confirmation
    • app.directive('ngConfirmClick', [
              return {
                  link: function (scope, element, attr) {
                      var msg = attr.ngConfirmClick || "Are you sure?";
                      var clickAction = attr.confirmedClick;
                      element.bind('click',function (event) {
                          if ( window.confirm(msg) ) {

Phil 12.22.14

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. 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)

Phil 12.19.14

8:00 – 4:00 SR

  • DB backups
  • Angular
    • Starting a page on useful javascript libraries
    • Got the inverse transforms working. It really slows things down though. As a compromise, I only apply the inverse transform to the hovered item
    • And now I cannot get the href in the hovered item to work. Ah. It’s because that to make the jquery tooltip work I have to wrap the dix in an <a> element, which you can’t nest. Something to work on next week
    • Last odd thing. When running on my home server, the hover transition is more abrupt, with the same code. No console errors.

Dong Shin 12.18.2014

  • discussion with Lenny today
    • add fund type (Base/OCO) to COGNOS data, a script that updates the current data as well.
    • ignore duplicate Obligations is for EA only
      • EA now has matching Req ID in COGNOS
      • When Budget Center <> Executing Budget Center = EA

Phil 12.18.2014

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.

Phil 12.16.14

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