Merge pull request #7 from Quinnan-Gill/integrate

All together now
HEPPanoramic · Jan 2, 2019 · d1c0dbb · d1c0dbb
2 parents b631998 + 71fa2b4
commit d1c0dbb
Show file tree

Hide file tree

Showing 63 changed files with 1,391 additions and 228 deletions.
diff --git a/_layouts/images.html b/_layouts/images.html
@@ -6,7 +6,7 @@ <h2>Directory listing for /images/</h2>
         <hr>
         <ul>
             {% for image in site.static_files %}
-                {% if image.path contains '/images/' %}
+                {% if image.path contains page.folder %}
                     <li><a href="{{ image.name }}">{{ image.name }}</a>
                 {% endif %}
             {% endfor %}

diff --git a/_site/atlas.html b/_site/atlas.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>ATLAS Panorama</title>
+        <meta name="description" content="ATLAS Panorama Webpage - A-Frame"/>
+        <link rel="icon" type="image/png" href="logo/cern_logo.png"/>
+
+        <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
+        <script src="https://npmcdn.com/[email protected]"></script>
+        <script src="https://npmcdn.com/[email protected]"></script>
+        <script src="https://npmcdn.com/[email protected]"></script>
+        <script src="https://npmcdn.com/[email protected]"></script>
+
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+
+        <script src="components/set-image.js"></script>
+        <script src="components/scroller.js"></script>
+        <script src="components/view-icon.js"></script>
+        <script src="components/load-assets.js"></script>
+        <script src="components/atlas-choice.js"></script>
+    </head>
+    <body>
+        <div id="splash">
+            <div class="loading"></div>
+        </div>
+        <a-scene>
+            <a-assets>
+                <div id="images">
+                    <img id="left-arrow" crossorigin="anonymous" src="assets/backward.png"/>
+                    <img id="right-arrow" crossorigin="anonymous" src="assets/forward.png"/>
+                    <img id="view-icon" crossorigin="anonymous" src="assets/view_icon.png"/>
+                </div>
+                <script id="link" type="text/html">
+                    <a-entity class="link"
+                    geometry="primitive: plane; height: 1; width: 1"
+                    material="shader: flat; src: ${thumb}"
+                    event-set__1="_event: mousedown; scale: 1 1 1"
+                    event-set__2="_event: mouseup; scale: 1.2 1.2 1"
+                    event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
+                    event-set__4="_event: mouseleave; scale: 1 1 1"
+                    set-image="on: click; target: #image-360; src: ${src}">
+                    </a-entity>
+                </script>
+            </a-assets>
+
+            <!-- 360-degree image. -->
+            <a-sky id="image-360" radius="10" src="#atlas_8"></a-sky>
+
+            <!-- Image links. -->
+            <a-entity id="image_thumbs">
+                <a-entity id="links_top" layout="type: line; margin: 1.25" position="-1.5 1.5 -4"></a-entity>
+                <a-entity id="links_bottom" layout="type: line; margin: 1.25" position="-1.5 0.25 -4"></a-entity>
+            </a-entity>
+
+            <!--Scrollers-->
+            <a-entity id="left-scroller" position="-2.50 1.0 -4">
+                <a-image class="scroll-left"
+                src="#left-arrow"
+                height="2" width="1"
+                material="opacity: 1.0; transparent: true"
+                event-set__1="_event: mousedown; scale: 1 1 1"
+                event-set__2="_event: mouseup; scale: 1.2 1.2 1"
+                event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
+                event-set__4="_event: mouseleave; scale: 1 1 1"
+                scroll-left="on: click">
+                </a-image>
+            </a-entity>
+            <a-entity id="right-scroller" position="2 1.0 -4">
+                <a-image class="scroll-right"
+                src="#right-arrow"
+                height="2" width="1"
+                material="opacity: 1.0; transparent: true"
+                event-set__1="_event: mousedown; scale: 1 1 1"
+                event-set__2="_event: mouseup; scale: 1.2 1.2 1"
+                event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
+                event-set__4="_event: mouseleave; scale: 1 1 1"
+                scroll-right="on: click">
+                </a-image>
+            </a-entity>
+
+            <!--View Icon-->
+            <a-entity id="view-icon" position="2 2.6 -5">
+                <a-image class="viewer"
+                src="#view-icon"
+                height="0.25" width="0.25"
+                material="opacity: 1.0; transparent: true"
+                event-set__1="_event: mousedown; scale: 1 1 1"
+                event-set__2="_event: mouseup; scale: 1.2 1.2 1"
+                event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
+                event-set__4="_event: mouseleave; scale: 1 1 1"
+                view-icon="on: click">
+                </a-image>
+            </a-entity>
+
+
+            <!--Add the text-->
+            <a-entity id="title" text="value: ATLAS Panorama; color:  #C70039; shader: msdf;
+            font:https://raw.githubusercontent.com/etiennepinchon/aframe-fonts/master/fonts/cuprum/Cuprum-BoldItalic.json;
+            align: center;"
+            position="0 2.5 -5" scale="10 10 10"></a-entity>
+
+            <!-- Camera + cursor. -->
+            <a-camera>
+                <a-cursor id="cursor"></a-cursor>
+            </a-camera>
+        </a-scene>
+    </body>
+</html>
diff --git a/_site/cms.html b/_site/cms.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>ATLAS Panorama</title>
+        <meta name="description" content="ATLAS Panorama Webpage - A-Frame"/>
+        <link rel="icon" type="image/png" href="logo/cern_logo.png"/>
+
+        <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
+        <script src="https://npmcdn.com/[email protected]"></script>
+        <script src="https://npmcdn.com/[email protected]"></script>
+        <script src="https://npmcdn.com/[email protected]"></script>
+        <script src="https://npmcdn.com/[email protected]"></script>
+
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+
+        <script src="components/set-image.js"></script>
+        <script src="components/scroller.js"></script>
+        <script src="components/view-icon.js"></script>
+        <script src="components/load-assets.js"></script>
+        <script src="components/cms-choice.js"></script>
+    </head>
+    <body>
+        <div id="splash">
+            <div class="loading"></div>
+        </div>
+        <a-scene>
+            <a-assets>
+                <div id="images">
+                    <img id="left-arrow" crossorigin="anonymous" src="assets/backward.png"/>
+                    <img id="right-arrow" crossorigin="anonymous" src="assets/forward.png"/>
+                    <img id="view-icon" crossorigin="anonymous" src="assets/view_icon.png"/>
+                </div>
+                <script id="link" type="text/html">
+                    <a-entity class="link"
+                    geometry="primitive: plane; height: 1; width: 1"
+                    material="shader: flat; src: ${thumb}"
+                    event-set__1="_event: mousedown; scale: 1 1 1"
+                    event-set__2="_event: mouseup; scale: 1.2 1.2 1"
+                    event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
+                    event-set__4="_event: mouseleave; scale: 1 1 1"
+                    set-image="on: click; target: #image-360; src: ${src}">
+                    </a-entity>
+                </script>
+            </a-assets>
+
+            <!-- 360-degree image. -->
+            <a-sky id="image-360" radius="10" src="#atlas_8"></a-sky>
+
+            <!-- Image links. -->
+            <a-entity id="image_thumbs">
+                <a-entity id="links_top" layout="type: line; margin: 1.25" position="-1.5 1.5 -4"></a-entity>
+                <a-entity id="links_bottom" layout="type: line; margin: 1.25" position="-1.5 0.25 -4"></a-entity>
+            </a-entity>
+
+            <!--Scrollers-->
+            <a-entity id="left-scroller" position="-2.50 1.0 -4">
+                <a-image class="scroll-left"
+                src="#left-arrow"
+                height="2" width="1"
+                material="opacity: 1.0; transparent: true"
+                event-set__1="_event: mousedown; scale: 1 1 1"
+                event-set__2="_event: mouseup; scale: 1.2 1.2 1"
+                event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
+                event-set__4="_event: mouseleave; scale: 1 1 1"
+                scroll-left="on: click">
+                </a-image>
+            </a-entity>
+            <a-entity id="right-scroller" position="2 1.0 -4">
+                <a-image class="scroll-right"
+                src="#right-arrow"
+                height="2" width="1"
+                material="opacity: 1.0; transparent: true"
+                event-set__1="_event: mousedown; scale: 1 1 1"
+                event-set__2="_event: mouseup; scale: 1.2 1.2 1"
+                event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
+                event-set__4="_event: mouseleave; scale: 1 1 1"
+                scroll-right="on: click">
+                </a-image>
+            </a-entity>
+
+            <!--View Icon-->
+            <a-entity id="view-icon" position="2 2.6 -5">
+                <a-image class="viewer"
+                src="#view-icon"
+                height="0.25" width="0.25"
+                material="opacity: 1.0; transparent: true"
+                event-set__1="_event: mousedown; scale: 1 1 1"
+                event-set__2="_event: mouseup; scale: 1.2 1.2 1"
+                event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
+                event-set__4="_event: mouseleave; scale: 1 1 1"
+                view-icon="on: click">
+                </a-image>
+            </a-entity>
+
+
+            <!--Add the text-->
+            <a-entity id="title" text="value: CMS Panorama; color:  #C70039; shader: msdf;
+            font:kelsonsans; align: center;"
+            position="-0.25 2.5 -5" scale="10 10 10"></a-entity>
+
+            <!-- Camera + cursor. -->
+            <a-camera>
+                <a-cursor id="cursor"></a-cursor>
+            </a-camera>
+        </a-scene>
+    </body>
+</html>
diff --git a/_site/components/atlas-choice.js b/_site/components/atlas-choice.js
@@ -0,0 +1,4 @@
+var folder = 'real_images/atlas/';
+
+// Call makeAjaxCall which will cascade into the other functions
+makeAjaxCall(folder, folder, extractAjaxData);
diff --git a/_site/components/cms-choice.js b/_site/components/cms-choice.js
@@ -0,0 +1,4 @@
+var folder = 'real_images/cms/';
+
+// Call makeAjaxCall which will cascade into the other functions
+makeAjaxCall(folder, folder, extractAjaxData);
diff --git a/_site/components/load-assets.js b/_site/components/load-assets.js
@@ -1,15 +1,10 @@
-/**
- * This is  just a standard AFRAME componet needed to help establish
- * concurrency with the DOM objects in the script
- */
 AFRAME.registerComponent('load_assets', {
     init: function () {
         console.log('I am ready!');
     }
 });
 
 var images = [];
-var folder = 'images/';
 
 /**
  * A AJAX function that plunges into the a folder to extract the image
@@ -32,7 +27,7 @@ function makeAjaxCall(url, folder, callback){
                 callback(resp, folder);
             } else if (!url.match(/\.(html)$/)) {
                 console.log("processed failed trying with linking.html for jekyll")
-                makeAjaxCall(url + "linking.html", folder, callback);
+                makeAjaxCall(url + "listing.html", folder, callback);
             } else {
                 console.log("xhr failed");
             }
@@ -92,7 +87,7 @@ function addImages(images, ids, folder, callback) {
         divEl.append(imgThumb);
     }
 
-    let rand = getRandomInt(0, ids.length);
+    let rand = getRandomInt(0, ids.length-1);
     callback(ids[rand]);
 }
 
@@ -386,6 +381,3 @@ class ImageGroups {
         this.index = new_index;
     }
 }
-
-// Call makeAjaxCall which will cascade into the other functions
-makeAjaxCall(folder, folder, extractAjaxData);
diff --git a/_site/components/main-page.js b/_site/components/main-page.js
@@ -0,0 +1,10 @@
+window.transitionToPage = function(href) {
+    document.querySelector('body').style.opacity = 0;
+    setTimeout(function() {
+        window.location.href = href;
+    }, 500);
+}
+
+document.addEventListener('DOMContentLoaded', function(event) {
+    document.querySelector('body').style.opacity = 1;
+});
diff --git a/_site/components/scroller.js b/_site/components/scroller.js
@@ -12,15 +12,15 @@ AFRAME.registerComponent('scroll-left', {
         var el = this.el;
 
         el.addEventListener(data.on, function() {
-            var image_groups = new ImageGroups();
-            image_groups.pull_from_storage();
+            var image_groups_left = new ImageGroups();
+            image_groups_left.pull_from_storage();
 
-            var index = image_groups.get_index();
+            var index = image_groups_left.get_index();
 
             if (index > 1) {
-                console.log("New index: " + image_groups.index);
-                image_groups.set_group_prev();
-                image_groups.write_to_storage();
+                console.log("New index: " + image_groups_left.index);
+                image_groups_left.set_group_prev();
+                image_groups_left.write_to_storage();
             } else {
                 console.warn("Index out of range-left");
             }
@@ -38,21 +38,21 @@ AFRAME.registerComponent('scroll-right', {
         var el = this.el;
 
         el.addEventListener(data.on, function() {
-            var image_groups = new ImageGroups();
-            image_groups.pull_from_storage();
+            var image_groups_right = new ImageGroups();
+            image_groups_right.pull_from_storage();
+
+            var size = image_groups_right.get_size();
+            var index = image_groups_right.get_index();
 
-            var size = image_groups.get_size();
-            var index = image_groups.get_index();
-
             if (index <= size) {
 
-                image_groups.set_group_next();
-                image_groups.write_to_storage();
+                image_groups_right.set_group_next();
+                image_groups_right.write_to_storage();
             } else {
                 console.warn("Index out of range-right");
             }
 
-            var index = image_groups.get_index();
+            var index = image_groups_right.get_index();
         });
     }
 });
diff --git a/_site/css/load.css b/_site/css/load.css
@@ -0,0 +1,35 @@
+#splash {
+    position: absolute;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    width: 200px;
+    height: 200px;
+
+    margin: auto;
+}
+
+@@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.loading {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    border: 0.25rem solid rgba(255, 255, 255, 0.2);
+    border-top-color: white;
+    animation: spin 1s infinite linear;
+}