Category Archives: Phil

Phil 12.8.14

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 (){}]);

Phil 12.4.14

8:00 – 6:00 SR

Directive Supported animations
ngRepeat Enter, leave, and move
ngView Enter and leave
ngInclude Enter and leave
ngSwitch Enter and leave
ngIf Enter and leave
ngClass Add and remove
ngShow and ngHide Add and remove
form and ngModel Add and remove
ngMessages Add and remove
ngMessage Enter and leave

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>

Phil 12.3.14

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.

Phil 12.2.14

8:00 – 6:00 SR

  • DB Backups
  • C-Town
    • Dec 10 meeting
    • Dec 10 StAg meeting?
    • Schedule walkthrough
  • Angular plus css
    • While working my way through said task, I discovered a bug where FF35 does not handle asymmetric scaling correctly. Try this link in your various browsers to test.
    • Nice set of tutorials on 3D and CSS.
  • Neo4j Graph Database? Follow link for books/videos.
  • Need to finalize direct cite reimbursable

Phil 11.28.14

7:30 – 4:30 SR

  • Angular
  • Let’s try building a directive that we use ng-repeat on. Not too bad! Here’s how I did it:

Directive javascript:

pa.directive('oldPost', ['$window', function($window) {
 return {
 templateUrl: 'directives/oldPost.html',
 restrict: 'AE',
 scope: {pobj: '='}
 }
}]);

Directive HTML (directives.oldPost.html):

<div class="inputWrapper">
 <div class="textLabel">Posted: {{pobj.postDate}}</div>
 <textArea class="textAreaOutput" ng-model="pobj.postText" ng-disabled="true"></textArea>
</div>

Master HTML:

<div ng-repeat="pobj in mainCtrl.postItems">
 <old-post pobj = "pobj"></old-post>
</div>

Phil 11.26.14

7:30 – 4:00 SR

  • DB backups
  • Angular
    • Important note – if you want to include html from another source using ng-bind-html (php errors, for example), you have to use ngSanitize. More from stackOverflow here: http://stackoverflow.com/questions/19770156/how-to-output-html-through-angularjs-template.
    • Still playing around with how to organize code for a project with shared libraries. Currently, I’ve set it up so that there are the following folders:
      • modules – contain the initial declaration, factories and services. They also define a global (sigh) variable for each of the modules that can be used to attach controllers and directives to, because Angular isn’t as good as YUI at namespacing.
      • controllers – controllers that are unique to a particular app are contained in a common file (i.e. “postControllers.js”)
      • directives – directivesthat are unique to a particular app are contained in a common file (i.e. “postDirectives.js”). Additionally, html snippets for the directives are contained in this file. I’m guessing that this will change so that the html gets its own directory.
  • Set up workspace and downloaded environment to work from home on Friday.

Phil 11.21.14

Phil 8:00 – 4:00

  • I can see the servers again!
  • DB backups
  • No deploy, Bill V is out for the day.
  • More Angular. Spent most of the day working on sending and receiving data. YUI had all kinds of nice functions to convert JSON objects to all kinds of things. JavaScript and Angular lack these, so after poing around for a while I found this post that seems to work nicely and lets you use POJsOs for data upload. Using a function in the in the module definition is something I have not seen before. Need to understand that better.

Phil 11.20.14

8:00 – 5:30 SR

  • DB backups – nope server access denied. And other weird server problems today.
  • Lots of good angular work today. Got several simple directives working, refactored the structure a bit, learned how to trap paste events and I think I know how to deal with key presses.

Phil 11.13.14

8:00 – 5:00 SR

  • DB backups
  • Discussion with Lenny about Direct Cite vs. Reimbursable. I think in the future that Spring DB access plus a rules engine (using WEKA?) might give us what we want.
  • Finally got tabs working in my system:
<!doctype html>
<html ng-app="ui.bootstrap">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div ><!--ng-controller="TabsDemoCtrl as tabCtrl"-->
    <tabset>
        <tab heading="Justified">Justified content</tab>
        <tab heading="SJ">Short Labeled Justified content</tab>
        <tab heading="Long Justified">Long Labeled Justified content</tab>
    </tabset>
</div>
</body>
</html>
  • Ands to get all that working also requres the bootstrap css. This isn’t surprising, it’s just not listed anywhere. So at this point, to accommodate libraries/frameworks and styles that will be reused between projects, we’re settling on a libs and styles directory. These directories will contain the local copies of the code/css files that we use in our apps.
  • Of course, the icons don’t work. It looks like we’ll need the fonts folder in the styles folder as well. Really don’t want to put in the js. And I didn’t have too.
  • So it looks like we need the following two libraries to begin with:
    • UI Bootstrap: Bootstrap components written in pure AngularJS by the AngularUI Team
    • AngularUI: The companion suite(s) to the AngularJS framework.
  • Thinking about the following for the post-JSON formatting
    session charcode char dn msec up msec