8:00 – 10:00, 12:00 – 5:30SR

• DB backups
• Meeting with Agenia – nope, tomorrow.
• Going to try to start the cluster chart in Angular/CSS today
  • Dynamically modifying the css with ng-style
  • 3D rendering in ng-repeat seems to require the parent and child divs to have position:absolute.
  • Setting up an origin with perspective, a stage with global changes and the individual items positioned on the stage. The origin has no transforms, the stage gets viewer transforms and the items get their own. Got to the point where I’m positioning the items in 3D space and moving the stage on the X-axis.

8:00 – 6:00 SR

• DB backups
• Set up the new script to dynamically produce chart data – now I need to fix the charts
• Angular
  • AngularJS Custom Directives Animations with Transclusion. Note that this cannot be an element. See StackOverflow for more background
  • Starting to try things outside of the book. One problem seems to be allowing time for the animation to clear, so everything goes where it’s supposed to. I had to add a delay in the controller between the list clean and the replacing of the data in a query to get rid of dumb loading artifacts. Animation delay didn’t work, and I’m not really sure what the right way to go is.
  • Had a long talk with Dong about how to organize code.

8:00 – 3:00 SR

• DB backups
• Realized that our old servers were probably still associated with the CP registry. Looked for a way to change that but couldn’t find one. Talked to Ronda, she’s looking into it.
• Got another OMFG the server’s going to be turned off by the end of the year if we don’t do anything ASAP! Fortunately, I was able to point Agena at that. Whee!
• Had a discussion with Dong about structuring projects. For the time being, we will continue doing the following:
  • Eclipse is for Java projects. They are assembled within the IDE (no maven!) so that we have nice jar packaging. Test deployment using Eclipse’s Tomcat server.
  • Client software runs in Webstorm/IntelleJ and deploys to the test tomcat directory, generally in wtwebapps
  • MySQL is developed using PHPMyAdmin and MySqlWorkbench
  • That being said, my dream of full cloud development appears to be near: koding.com
• Angular.
  • Leaning how to use the animation function definition. Mentioned in the text, Greensock has some interesting stuff.
  • Javascript transition animation for ng-class DON’T FORGET – the name of the animation function uses css class naming convention of preceding the name with a period. E.g. angular.module(‘aniModule’. [‘ngAnimate’]).animation(‘.rememberThePeriod‘, [function (){}]);

8:00 – 4:00 SR

• DB Backups
• Printed out python script for the FY chart export to Visibility.
• Angular
  • Playing around with Plunker as a place to archive my hard-won lessons
    • 3D CSS
    • Animated transitions between classes
    • Animating ngRepeat and ngIf with keyframes
    • Angular ngView transition with 3D CSS transitions using keyframes
    • AngularJS ngInclude with 3D css keyframes

8:00 – 6:00 SR

• DB Backups
• For irev: http://rhrealitycheck.org/article/2014/08/12/twitterfail-twitters-refusal-handle-online-stalkers-abusers-haters/
• Tentatively building an Angular QueryBuilder app for direct cite/reimbursable. Anyone with a RA account would have access.
• Angular
  • First important lesson for the day: Use ng-if rather than ng-show/ng-hide. The former attaches and removes items from the DOM more in style with the other Angular directives, and ng-if behaves MUCH BETTER with animations. Treat ng-show as deprecated.

A better ng-class example (here in plunker):
The CSS classes. Note that the ‘base-class’ contains the animation timings:
.base-class {
width: 200px;
height: 50px;
text-align: center;
margin: 10px;
padding: 10px;
-webkit-transition: background-color 1s, color 1s, border-color 1s;
transition: background-color 1s, color 1s, border-color 1s;
}

.base-class.whiteBackground {
background-color: white;
color: black;
border: 3px solid black;
}
.base-class.blackBackground {
background-color: black;
color: white;
border: 3px solid white;
}
.base-class.greenBackground {
background-color: green;
color: yellow;
border: 3px solid yellow;
}
.base-class.blueBackground {
background-color: blue;
color: magenta;
border: 3px solid magenta;
}
.base-class.redBackground {
background-color: red;
color: cyan;
border: 3px solid cyan;
}

The Angular code that cycles through the classes:

<body>
    <link href="ngClassSample.css" rel="stylesheet" />
    <div ng-controller="MyApp as ma">
        <h1>ngClass Animation</h1>
        <div>
            <button ng-click="ma.doToggle()">Next !</button>
            <div class="base-class" ng-class="ma.getAnimationClass()">
                This is the 'ugly sweater' of css animations
            </div>
        </div>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.min.js"></script>
    <script>
        var app = angular.module('myApp', ['ngAnimate']);
        app.controller('MyApp', [function(){
            var self = this;
            var classArray = ['', 'blackBackground', 'whiteBackground', 'greenBackground', 'blueBackground', 'redBackground'];
            self.toggle = 0;
            self.doToggle = function(){
                self.toggle++;
            }
            self.getAnimationClass = function(){
                var index = self.toggle%classArray.length;
                return classArray[index];
            }
        }]);
    </script>
</body>

8:00 – 1:00, 3:00 – 7:00

• DB backups
• Status Report
• Rolled back the JavaUtils jar file to the working version (compiled on 9/4/14)
• Discussed the whole direct cite vs. reimbursable with Chris and Lenny. A scatter plot with 0% for DC, R and allocation time at one corner and 100% at the other should give them what they want. Dong’s going to work on the query to produce the data and I’m going to try to render the report in angular and 3D css.
• More angular. Learning the lifecycle of animations. It looks like if you use straight transitions, then there is a lot of state watching, but if you use keyframe abnimations, everything is much simpler. For example, the two following CSS examples give the fade in/out results:

Using Transitions

/* ngIf animation */
 .animIf.ng-enter {
 /* if the value is true */
 -webkit-transition: opacity linear 0.1s;
 -moz-transition: opacity linear 5.0s;
 -ms-transition: opacity linear 5.0s;
 -o-transition: opacity linear 5.0s;
 transition: opacity linear 5.0s;
 }

 .animIf.ng-leave {
 /* if the value is false */
 -webkit-transition: opacity linear 5s;
 -moz-transition: opacity linear 5s;
 -ms-transition: opacity linear 5s;
 -o-transition: opacity linear 5s;
 transition: opacity linear 5s;
 }
 .animIf.ng-enter,
 .animIf.ng-leave.ng-leave-active {
 opacity: 0.0;
 }

 .animIf.ng-leave,
 .animIf.ng-enter.ng-enter-active {
 opacity: 1;
 }

Using keyframes:

  .listStyle.ng-enter {
 -webkit-animation: 5s enterKeyframes;
 -moz-animation: 5s enterKeyframes;
 -ms-animation: 5s enterKeyframes;
 -o-animation: 5s enterKeyframes;
 animation: 5s enterKeyframes;
 }
 @keyframes enterKeyframes {
 from {
 opacity: 0;
 }
 to {
 opacity: 1;
 }
 }

 .listStyle.ng-leave {
 -webkit-animation: 5s leaveKeyframes;
 -moz-animation: 5s leaveKeyframes;
 -ms-animation: 5s leaveKeyframes;
 -o-animation: 5s leaveKeyframes;
 animation: 5s leaveKeyframes;
 }
 @keyframes leaveKeyframes {
 from {
 opacity: 1;
 }
 to {
 opacity: 0;
 }
 }

I don’t know about you, but to me, the second seems much clearer.