Merge pull request #4 from bcipolli/add-apps

Final SfN2015 push

2015/scripts/poster5.js → 2015/scripts/poster-elements.js

@@ -28,8 +28,9 @@ $(function() {
             + "</div>");
         // Generate at http://www.qr-code-generator.com/
         title_div.append("<div class='spacer qrcode'>"
-            + "<div class='download-text'>Access online now!</div>"
-            + "<img src='" + d["qrcode"] + "' /></div>");
+            + "<div class='download-text'>Scan to access online now,</div>"
+            + "<div><img src='" + d["qrcode"] + "' /></div>"
+            + "<div class='download-text'>or visit <a href='http://tinyurl.com/sfn15-asymmetry'>tinyurl.com/sfn15-asymmetry</a>!</div>");
     });
 
     $('.section').each(function(idx) {
@@ -78,84 +79,3 @@ $(function() {
 
 
 /* Builds the poster main section elements */
-
-/* Connects events to poster elements */
-$(function() {
-    var ad_fast = 200;
-    var ad_slow = 500;
-
-    $('.section-buttons-expanded .section').on('click', function(e){
-        e.preventDefault();
-
-        // Expand the main content, shrink the summaries
-        $('#main-content').toggleClass('main-content-collapsed', false, ad_slow);
-        $('.section-buttons').toggleClass('section-buttons-expanded', false, ad_slow);
-        $('.section').toggleClass('section-button', true, ad_slow);
-        $('.section').find(".blurb").hide();
-        $('.section').find(".short-blurb").show();
-        $('#poster-footer').show(ad_slow, 'linear');
-    });
-
-    $('.section').on('click', function(e) {
-        e.preventDefault();
-
-        // Turn off all but one of the summaries
-        $('.section').toggleClass('section-summary-on', false, ad_slow);
-        $(this).toggleClass('section-summary-on', true, ad_slow);
-        $('#main-content').toggleClass('main-content-on', true, ad_slow);
-    });
-
-    // Set rounded corners on the right sides of left summaries
-    $('#section-summary-left .section-summary').on('click', function(e) {
-        $('.section-summary').toggleClass('section-summary-left-on', false);
-        $('.section-summary').toggleClass('section-summary-right-on', false);
-        $(this).toggleClass('section-summary-left-on'); });
-
-    // Set rounded corners on the left sides of right summaries
-    $('#section-summary-right .section-summary').on('click', function(e) {
-        $('.section-summary').toggleClass('section-summary-left-on', false);
-        $('.section-summary').toggleClass('section-summary-right-on', false);
-        $(this).toggleClass('section-summary-right-on');
-    });
-});
-
-
-/* content pane 1: model with demo activation */
-$(function() {
-    var ii = 0;
-    $('#ringo-model').on('click', function(e, k) {
-        ii = (ii < 25) ? ii + 1 : 0;
-        $(this).find('img').attr('src', 'figs/cc/' + ii + '.png');
-    });
-});
-
-
-/* content pane 2: animations */
-$(function() {
-    $('#animate-ringo').on('click', function(e) {
-        e.preventDefault();
-        $('#ringo-results-moving').animate({left: "171px"}, 1000, 'linear', function() { $('#no-diff').show();} );
-    });
-    $('#unanimate-ringo').on('click', function(e) {
-        e.preventDefault();
-        $('#ringo-results-moving').animate({left: "116px"}, 1000);
-    });
-
-    var ii = 1;
-    $('#ringo-compare-movie').on('click', function(e) {
-        ii = (ii < 25) ? ii + 1 : 1;
-        $(this).find('#ringo-cc-movie img').attr('src', 'figs/cc/' + ii + '.png');
-        $(this).find('#ringo-cc-no-movie img').attr('src', 'figs/cc-no/' + ii + '.png');
-    });
-});
-
-
-/* Now, parse out the bookmark */
-$(function() {
-    if (window.location.hash && window.location.hash.length > 1 && window.location.hash.substr(0,2) == "#b") {
-        var sectionID = "#section" + window.location.hash.substr(2);
-        console.log(sectionID);
-
-        $(sectionID).click();//("click");
-    }
-});

2015/scripts/poster-event-bindings.js

@@ -0,0 +1,94 @@
+
+/* Connects events to poster elements */
+$(function() {
+    var ad_fast = 200;
+    var ad_slow = 500;
+
+    $('.section-buttons-expanded .section').on('click', function(e){
+        //e.preventDefault();
+
+        // Expand the main content, shrink the summaries
+        $('#main-content').toggleClass('main-content-collapsed', false, ad_slow);
+        $('.section-buttons').toggleClass('section-buttons-expanded', false, ad_slow);
+        $('.section').toggleClass('section-button', true, ad_slow);
+        $('.section').find(".blurb").hide();
+        $('.section').find(".short-blurb").show();
+        $('#poster-footer').show(ad_slow, 'linear');
+    });
+
+    $('.section').on('click', function(e) {
+        // e.preventDefault();
+
+        // Turn off all but one of the summaries
+        $('.section').toggleClass('section-summary-on', false, ad_slow);
+        $(this).toggleClass('section-summary-on', true, ad_slow);
+        $('#main-content').toggleClass('main-content-on', true, ad_slow);
+    });
+
+    // Set rounded corners on the right sides of left summaries
+    $('#section-summary-left .section-summary').on('click', function(e) {
+        $('.section-summary').toggleClass('section-summary-left-on', false);
+        $('.section-summary').toggleClass('section-summary-right-on', false);
+        $(this).toggleClass('section-summary-left-on'); });
+
+    // Set rounded corners on the left sides of right summaries
+    $('#section-summary-right .section-summary').on('click', function(e) {
+        $('.section-summary').toggleClass('section-summary-left-on', false);
+        $('.section-summary').toggleClass('section-summary-right-on', false);
+        $(this).toggleClass('section-summary-right-on');
+    });
+});
+
+
+/* content pane 1: model with demo activation */
+$(function() {
+    var ii = 0;
+    $('#ringo-model').on('click', function(e, k) {
+        ii = (ii < 25) ? ii + 1 : 0;
+        $(this).find('img').attr('src', 'figs/cc/' + ii + '.png');
+    });
+});
+
+
+/* content pane 2: animations */
+$(function() {
+    $('#animate-ringo').on('click', function(e) {
+        e.preventDefault();
+        $('#ringo-results-moving').animate({left: "171px"}, 1000, 'linear', function() { $('#no-diff').show();} );
+    });
+    $('#unanimate-ringo').on('click', function(e) {
+        e.preventDefault();
+        $('#ringo-results-moving').animate({left: "116px"}, 1000);
+    });
+
+    var ii = 1;
+    $('#ringo-compare-movie').on('click', function(e) {
+        ii = (ii < 25) ? ii + 1 : 1;
+        $(this).find('#ringo-cc-movie img').attr('src', 'figs/cc/' + ii + '.png');
+        $(this).find('#ringo-cc-no-movie img').attr('src', 'figs/cc-no/' + ii + '.png');
+    });
+});
+
+
+function goto(res_id) {
+    $scope = window.scope;
+    $scope.resources.push(res_id);
+    $scope.cur_resource = res_id;
+    $scope.$apply();
+    console.log(res_id);
+    window.location.hash = '#' + res_id;
+}
+
+
+/* Now, parse out the bookmark */
+$(function() {
+    if (window.location.hash && window.location.hash.length > 1) {
+        if (window.location.hash.substr(0,2) == "#b") {
+            var sectionID = "#section" + window.location.hash.substr(2);
+            console.log(sectionID);
+            $(sectionID).trigger('click');
+        } else {
+            goto(window.location.hash.substr(1));
+        }
+    }
+});

2015/styles/poster5.css

@@ -31,7 +31,7 @@ body {
 .poster-title .content {
     width: 1100px;
     float: left;
-    padding: 0px 5px 0px 5px;
+    padding: 0px 5px 0px 205px;
     box-sizing: border-box;
 }
 
@@ -59,28 +59,29 @@ body {
 }
 
 .poster-title .spacer {
-    width: 498px;
+    width: 348px;
     height: 170px; /* why? */
     float: left;
     box-sizing: border-box;
 }
 
 .poster-title .qrcode {
     margin-left: 65px;
-    width: 200px;
+    width: 350px;
     height: 130px;
 }
 .poster-title .qrcode img {
-    max-width: 130px;
-    max-height: 130px;
+    max-width: 100px;
+    max-height: 100px;
     box-sizing: border-box;
     margin: 0px auto 0px auto;
 }
 
 .download-text {
     font-size: 20px;
     font-weight: bold;
-    margin-bottom: 5px;
+    overflow: hidden;
+    hieght: 20px;
 }
 
 
@@ -167,7 +168,7 @@ body {
 .main-content {
     width: 70%;
     float: left;
-    padding: 50px 100px 50px 100px;
+    padding: 0px 50px 0px 50px;
     height: 795px;
     box-sizing: border-box;
 }
@@ -207,11 +208,14 @@ body {
 }
 
 .content-pane {
-    height: 725px;
+    width: 1300px;
+    height: 775px;
     overflow: scroll;
 }
 .content-pane div {
     float: left;
+    margin: 0px;
+    padding: 0px;
 }
 
 .section-button ul {
@@ -226,6 +230,11 @@ body {
     margin: -10px;
 }
 
+.section-buttons li a {
+    color: black;
+    text-decoration: none;
+}
+
 .section-buttons li:hover {
     background-color: yellow;
 }

brain/area_and_thickness.html

@@ -0,0 +1,116 @@
+<!--
+Design:
+    + brain.js : service for showing a clickable, colored brain.
+    + navigator.js : controller for the brain navigator
+      => depends on brain.js
+    + plotter.js : controller for the plotting
+      => must be told what function to use to plot, in the constructor.
+      => function may depend on brain.js, but controller does NOT
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Brain Navigator | Roy G. BIV</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="css/style.css" />
+
+    <script src="js/libs/three.min.js"></script>
+    <script src="js/libs/Projector.js"></script>
+    <script src="js/libs/Detector.js"></script>
+    <script src="js/libs/TrackballControls.js"></script>
+    <script src="js/libs/VTKLoader.js"></script>
+    <script src="js/libs/jquery.min.js"></script>
+    <script src="js/libs/d3.min.js"></script>
+    <script src="js/libs/box.js"></script>
+    <script src="js/libs/sprintf.js"></script>
+    <script src="js/libs/angular.min.js"></script>
+
+    <script src="js/brain.utils.js"></script>
+    <script src="js/brain.js"></script>
+    <script src="js/poster.js"></script>
+</head>
+
+<body ng-app="navigator" ng-strict-di ng-controller="NavigateController">
+    <div id="right-container">
+        <div id="right-header">
+            <div id="nav_label" style="float: left; overflow: hidden; width: 1250px;">
+                <div>
+                    {{ mesh.name }}
+                    <br/>
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ mesh.value * 100 | number: 2 }}% asymmetric
+                </div>
+                Shift+click to select a brain area.
+                <br/>
+                &nbsp;
+            </div>
+            <div class='label'>Surface Area</div>
+            <div id="plot-canvas" class="brain" style="width: 500px; height: 350px; position: relative; left: 50px; ">
+            </div>
+        </div>
+    </div>
+    <div id="left-container" style="position: relative; top: -60px; left: -100px;">
+        <div id="left-header">
+        </div>
+        <div class='label'>Thickness</div>
+        <div id="nav-brain" style="width: 500px; height: 350px;">
+        </div>
+    </div>
+    <script>
+        var app = angular.module('navigator', []);
+        app.controller('NavigateController', ['$scope', function($scope) {
+            // Object bound to the form. We "watch" this object below.
+            $scope.metadata = {
+                subject: 'fsaverage',
+                atlas: 'desikan',
+                surf_type: 'inflated',
+                prefix: 'MRI_cort_thick.ctx.',
+                measure: 'thickness'
+            };
+            $scope.manifest_url = build_manifest_url('data', $scope.metadata);
+
+            // Create the right hemi brain
+            $scope.stats_brain = new Brain({
+                divID: "plot-canvas",
+                manifest_url: $scope.manifest_url.replace('thickness', 'area').replace('thick', 'area'),
+                callback: function(mesh) {
+                    if ($scope.mesh && $scope.mesh.name == mesh.name)
+                        return;
+
+                    $scope.mesh = mesh;
+                    $scope.$apply();
+                    click_partner_function($scope.nav_brain)(mesh);
+                }
+            });
+
+            // Create the "brain" for navigation
+            $scope.nav_brain = new Brain({
+                divID: "nav-brain",
+                manifest_url: $scope.manifest_url,
+                callback: function(mesh) {
+                    if ($scope.mesh && $scope.mesh.name == mesh.name)
+                        return;
+
+                    $scope.mesh = mesh;
+                    $scope.$apply();
+                    click_partner_function($scope.stats_brain)(mesh);
+                }
+            });
+            window.brain = $scope.nav_brain;
+
+            // Use the relatively new watchCollection().
+            $scope.$watchCollection("metadata", function( newValue, oldValue ) {
+                $scope.metadata.prefix = measure2prefix(newValue.measure, newValue.atlas);
+                $scope.manifest_url = build_manifest_url('data', newValue);
+            });
+            $scope.$watch('manifest_url', function(newValue, oldValue) {
+                // Update the brains
+                if ($scope.nav_brain)
+                    $scope.nav_brain.loadBrain({manifest_url: newValue});
+                if ($scope.stats_brain)
+                    $scope.stats_brain.loadBrain({manifest_url: newValue.replace('thickness', 'area').replace('thick', 'area')});
+            });
+        }]);
+    </script>
+</body>
+</html>

brain/css/regressions.css

@@ -0,0 +1,4 @@
+#header_n_label { float: left; width:600px;}
+#plot-canvas { width:525px; height: 225px; background-color: #ccc }
+#plot-canvas img { width: 500px; }
+#nav-brain { float:left; margin: 75px 0px 0px 40px; height: 225px; }