Mercurial > repos > gregor.m > spyboat

diff test-data/output1.html @ 5:d5a4180410c4 draft default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
"planemo upload commit 7bc843096b70fe1c8fc149e69d8f87fceac4eb3b"
author gregor.m
date Sat, 28 Nov 2020 18:50:09 +0000
parents
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/test-data/output1.html	Sat Nov 28 18:50:09 2020 +0000
@@ -0,0 +1,334 @@
+
+    <html>
+    <!-- this file got automatically created by 'output_report.py' -->
+    <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. 20 </h3>
+
+            <div class="snapshot_gallery">
+
+               <figure class=”snapshot_gallery__item
+                   snapshot_gallery__item--1">
+                 <img src="input_frame20.png" alt="The Input"
+                     class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item
+                  snapshot_gallery__item--2">
+                 <img src="phase_frame20.png" alt="Phase"
+                    class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item
+                    snapshot_gallery__item--3">
+                 <img src="period_frame20.png"
+                   alt="Period" class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item
+                   snapshot_gallery__item--4">
+                 <img src="amplitude_frame20.png"
+                   alt="Amplitude" class="snapshot_gallery__img">
+               </figure>
+            </div>
+        </div>
+        
+        <div class="FrameSlides">
+        <h3 style="text-align:center; color=#363333">
+        Frame Nr. 28 </h3>
+
+            <div class="snapshot_gallery">
+
+               <figure class=”snapshot_gallery__item
+                   snapshot_gallery__item--1">
+                 <img src="input_frame28.png" alt="The Input"
+                     class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item
+                  snapshot_gallery__item--2">
+                 <img src="phase_frame28.png" alt="Phase"
+                    class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item
+                    snapshot_gallery__item--3">
+                 <img src="period_frame28.png"
+                   alt="Period" class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item
+                   snapshot_gallery__item--4">
+                 <img src="amplitude_frame28.png"
+                   alt="Amplitude" class="snapshot_gallery__img">
+               </figure>
+            </div>
+        </div>
+        
+        <div class="FrameSlides">
+        <h3 style="text-align:center; color=#363333">
+        Frame Nr. 36 </h3>
+
+            <div class="snapshot_gallery">
+
+               <figure class=”snapshot_gallery__item
+                   snapshot_gallery__item--1">
+                 <img src="input_frame36.png" alt="The Input"
+                     class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item
+                  snapshot_gallery__item--2">
+                 <img src="phase_frame36.png" alt="Phase"
+                    class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item
+                    snapshot_gallery__item--3">
+                 <img src="period_frame36.png"
+                   alt="Period" class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item
+                   snapshot_gallery__item--4">
+                 <img src="amplitude_frame36.png"
+                   alt="Amplitude" class="snapshot_gallery__img">
+               </figure>
+            </div>
+        </div>
+        
+        <div class="FrameSlides">
+        <h3 style="text-align:center; color=#363333">
+        Frame Nr. 44 </h3>
+
+            <div class="snapshot_gallery">
+
+               <figure class=”snapshot_gallery__item
+                   snapshot_gallery__item--1">
+                 <img src="input_frame44.png" alt="The Input"
+                     class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item
+                  snapshot_gallery__item--2">
+                 <img src="phase_frame44.png" alt="Phase"
+                    class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item
+                    snapshot_gallery__item--3">
+                 <img src="period_frame44.png"
+                   alt="Period" class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item
+                   snapshot_gallery__item--4">
+                 <img src="amplitude_frame44.png"
+                   alt="Amplitude" class="snapshot_gallery__img">
+               </figure>
+            </div>
+        </div>
+        
+        <div class="FrameSlides">
+        <h3 style="text-align:center; color=#363333">
+        Frame Nr. 52 </h3>
+
+            <div class="snapshot_gallery">
+
+               <figure class=”snapshot_gallery__item
+                   snapshot_gallery__item--1">
+                 <img src="input_frame52.png" alt="The Input"
+                     class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item
+                  snapshot_gallery__item--2">
+                 <img src="phase_frame52.png" alt="Phase"
+                    class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item
+                    snapshot_gallery__item--3">
+                 <img src="period_frame52.png"
+                   alt="Period" class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item
+                   snapshot_gallery__item--4">
+                 <img src="amplitude_frame52.png"
+                   alt="Amplitude" class="snapshot_gallery__img">
+               </figure>
+            </div>
+        </div>
+        
+        <div class="FrameSlides">
+        <h3 style="text-align:center; color=#363333">
+        Frame Nr. 60 </h3>
+
+            <div class="snapshot_gallery">
+
+               <figure class=”snapshot_gallery__item
+                   snapshot_gallery__item--1">
+                 <img src="input_frame60.png" alt="The Input"
+                     class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item
+                  snapshot_gallery__item--2">
+                 <img src="phase_frame60.png" alt="Phase"
+                    class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item
+                    snapshot_gallery__item--3">
+                 <img src="period_frame60.png"
+                   alt="Period" class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item
+                   snapshot_gallery__item--4">
+                 <img src="amplitude_frame60.png"
+                   alt="Amplitude" class="snapshot_gallery__img">
+               </figure>
+            </div>
+        </div>
+        
+        <div class="FrameSlides">
+        <h3 style="text-align:center; color=#363333">
+        Frame Nr. 68 </h3>
+
+            <div class="snapshot_gallery">
+
+               <figure class=”snapshot_gallery__item
+                   snapshot_gallery__item--1">
+                 <img src="input_frame68.png" alt="The Input"
+                     class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item
+                  snapshot_gallery__item--2">
+                 <img src="phase_frame68.png" alt="Phase"
+                    class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item
+                    snapshot_gallery__item--3">
+                 <img src="period_frame68.png"
+                   alt="Period" class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item
+                   snapshot_gallery__item--4">
+                 <img src="amplitude_frame68.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