Mercurial > repos > gregor.m > spyboat

diff OutputReport.html @ 3:4d7f30a7e2f6 draft

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
"planemo upload commit d070f1ba04a5141a65487f45b29c22767639e44b"
author gregor.m
date Tue, 24 Nov 2020 13:06:26 +0000
parents
children a4c6fcf2c456
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/OutputReport.html	Tue Nov 24 13:06:26 2020 +0000
@@ -0,0 +1,247 @@
+
+    <html>
+    <title>SpyBOAT Output Report</title>
+    <head>
+        <!-- that doesn't work with galaxy.. -->
+        <!--link rel="stylesheet" href="styles.css"-->
+      <style type="text/css">
+        body{ margin:10 100; background:whitesmoke; }
+        /*body{ margin:10 100; background:darkslategrey; }*/
+        .center{
+            text-align: center;
+            display: block;
+            margin-left: auto;
+            margin-right: auto;
+            width: 100%;}
+
+        /* matplotlib output at 1600x1200  */
+        .distr_gallery {
+            display: grid;
+            margin: 0 auto;
+            text-align: center;
+            /* border: 1px dashed rgba(4, 4, 4, 0.35);     */
+            grid-template-columns: repeat(3,1fr);
+            grid-template-rows: 20vw;    
+            grid-gap: 0px;
+            column-gap: 0px
+        }
+        .distr_gallery__img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+
+
+        /* matplotlib output at 1600x1200  */
+        .snapshot_gallery {
+            display: grid;
+            margin: 0 auto;
+            border: 1px dashed rgba(4, 4, 4, 0.35);
+            text-align: center;
+            grid-template-columns: repeat(2,1fr);
+            grid-template-rows: repeat(2,20vw);
+            grid-gap: 5px;
+        }
+        .snapshot_gallery__img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+        .subheader{
+             text-align:center;
+             font-size: 160%;
+             color:#363333;}
+     </style>
+    </head>
+    <body>
+    <h1 style="text-align:center; color:#363333">SpyBOAT Results Report</h1>
+    <hr style="width:50%"> 
+    <h1 class="subheader"> Distribution Dynamics </h1>
+    <div class="distr_gallery">
+       <figure class=”distr_gallery__item distr_gallery__item--1">
+         <img src="period_distr.png" alt="Period" class="distr_gallery__img">
+       </figure>
+
+       <figure class=”distr_gallery__item distr_gallery__item--2">
+         <img src="power_distr.png" alt="Power" class="distr_gallery__img">
+       </figure>
+
+       <figure class=”distr_gallery__item distr_gallery__item--3">
+         <img src="phase_distr.png" alt="Phase" class="distr_gallery__img">
+       </figure>
+
+    </div>
+
+    <h1 class="subheader"> Output Movie Snapshots </h1>
+
+    <!-- trigger the javascript at the end--->
+    <div class="center">
+        <button class="w3-button" onclick="plusDivs(-1)">&#10094; Prev</button>
+        <button class="w3-button" onclick="plusDivs(1)">Next &#10095;</button>
+    </div>
+
+    <!-- defines all elements of the "FrameSlides" class --->
+    
+        <div class="FrameSlides"> 
+        <h3 style="text-align:center; color=#363333"> Frame Nr. 2 </h3>
+
+            <div class="snapshot_gallery">
+
+               <figure class=”snapshot_gallery__item snapshot_gallery__item--1">
+                 <img src="input_frame2.png" alt="The Input" class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item snapshot_gallery__item--2">
+                 <img src="phase_frame2.png" alt="Phase" class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item snapshot_gallery__item--3">
+                 <img src="period_frame2.png" alt="Period" class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item snapshot_gallery__item--4">
+                 <img src="amplitude_frame2.png" alt="Amplitude" class="snapshot_gallery__img">
+               </figure>
+            </div>
+        </div>
+        
+        <div class="FrameSlides"> 
+        <h3 style="text-align:center; color=#363333"> Frame Nr. 18 </h3>
+
+            <div class="snapshot_gallery">
+
+               <figure class=”snapshot_gallery__item snapshot_gallery__item--1">
+                 <img src="input_frame18.png" alt="The Input" class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item snapshot_gallery__item--2">
+                 <img src="phase_frame18.png" alt="Phase" class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item snapshot_gallery__item--3">
+                 <img src="period_frame18.png" alt="Period" class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item snapshot_gallery__item--4">
+                 <img src="amplitude_frame18.png" alt="Amplitude" class="snapshot_gallery__img">
+               </figure>
+            </div>
+        </div>
+        
+        <div class="FrameSlides"> 
+        <h3 style="text-align:center; color=#363333"> Frame Nr. 34 </h3>
+
+            <div class="snapshot_gallery">
+
+               <figure class=”snapshot_gallery__item snapshot_gallery__item--1">
+                 <img src="input_frame34.png" alt="The Input" class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item snapshot_gallery__item--2">
+                 <img src="phase_frame34.png" alt="Phase" class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item snapshot_gallery__item--3">
+                 <img src="period_frame34.png" alt="Period" class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item snapshot_gallery__item--4">
+                 <img src="amplitude_frame34.png" alt="Amplitude" class="snapshot_gallery__img">
+               </figure>
+            </div>
+        </div>
+        
+        <div class="FrameSlides"> 
+        <h3 style="text-align:center; color=#363333"> Frame Nr. 50 </h3>
+
+            <div class="snapshot_gallery">
+
+               <figure class=”snapshot_gallery__item snapshot_gallery__item--1">
+                 <img src="input_frame50.png" alt="The Input" class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item snapshot_gallery__item--2">
+                 <img src="phase_frame50.png" alt="Phase" class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item snapshot_gallery__item--3">
+                 <img src="period_frame50.png" alt="Period" class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item snapshot_gallery__item--4">
+                 <img src="amplitude_frame50.png" alt="Amplitude" class="snapshot_gallery__img">
+               </figure>
+            </div>
+        </div>
+        
+        <div class="FrameSlides"> 
+        <h3 style="text-align:center; color=#363333"> Frame Nr. 66 </h3>
+
+            <div class="snapshot_gallery">
+
+               <figure class=”snapshot_gallery__item snapshot_gallery__item--1">
+                 <img src="input_frame66.png" alt="The Input" class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item snapshot_gallery__item--2">
+                 <img src="phase_frame66.png" alt="Phase" class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item snapshot_gallery__item--3">
+                 <img src="period_frame66.png" alt="Period" class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item snapshot_gallery__item--4">
+                 <img src="amplitude_frame66.png" alt="Amplitude" class="snapshot_gallery__img">
+               </figure>
+            </div>
+        </div>
+        
+        <div class="FrameSlides"> 
+        <h3 style="text-align:center; color=#363333"> Frame Nr. 82 </h3>
+
+            <div class="snapshot_gallery">
+
+               <figure class=”snapshot_gallery__item snapshot_gallery__item--1">
+                 <img src="input_frame82.png" alt="The Input" class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item snapshot_gallery__item--2">
+                 <img src="phase_frame82.png" alt="Phase" class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item snapshot_gallery__item--3">
+                 <img src="period_frame82.png" alt="Period" class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item snapshot_gallery__item--4">
+                 <img src="amplitude_frame82.png" alt="Amplitude" class="snapshot_gallery__img">
+               </figure>
+            </div>
+        </div>
+        
+    </div>
+
+    <!-- javascript with escaped '{'--->
+    <script>
+        var slideIndex = 1;
+        showDivs(slideIndex);
+
+        function plusDivs(n) {
+          showDivs(slideIndex += n);
+        }
+
+        function showDivs(n) {
+          var i;
+          var x = document.getElementsByClassName("FrameSlides");
+          if (n > x.length) {slideIndex = 1}
+          if (n < 1) {slideIndex = x.length} ;
+          for (i = 0; i < x.length; i++) {
+            x[i].style.display = "none";
+          }
+          x[slideIndex-1].style.display = "block";
+        }
+    </script>
+    </body>
+    </html>
+    
\ No newline at end of file