Category Archives: NextGen experimentation

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

Phil 12.10.2014

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.

Phil 12.9.2014

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.

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.