changeset 1:639d2031d998 draft

"planemo upload for repository https://github.com/galaxyproject/tools-iuc/tree/master/packages/spyboat commit 88e9d9a220d160f55e0472719bb463143a4eefa5"
author iuc
date Mon, 30 Nov 2020 21:11:23 +0000
parents 76733d05d8ef
children 4626a83601d4
files output_report.py spyboat.xml spyboat_cli.py test-data/output1.html
diffstat 4 files changed, 377 insertions(+), 208 deletions(-) [+]
line wrap: on
line diff
--- a/output_report.py	Sat Nov 28 13:45:34 2020 +0000
+++ b/output_report.py	Mon Nov 30 21:11:23 2020 +0000
@@ -86,7 +86,7 @@
     logger.info("Produced 3 distribution plots..")
 
 
-def create_html(frame_nums, html_fname="OutputReport.html"):
+def create_html(frame_nums, par_str, html_fname="OutputReport.html"):
     """
     The html generated assumes the respective png's
     have been created with 'produce_snapshots' and 'produce_distr_plots'
@@ -105,25 +105,25 @@
             <div class="snapshot_gallery">
 
                <figure class=”snapshot_gallery__item
-                   snapshot_gallery__item--1">
+                   snapshot_gallery__item--1" style="margin: 0 0">
                  <img src="input_frame{frame_num}.png" alt="The Input"
                      class="snapshot_gallery__img">
                </figure>
 
                <figure class=”snapshot_gallery__item
-                  snapshot_gallery__item--2">
+                  snapshot_gallery__item--2" style="margin: 0 0">
                  <img src="phase_frame{frame_num}.png" alt="Phase"
                     class="snapshot_gallery__img">
                </figure>
 
                <figure class=”snapshot_gallery__item
-                    snapshot_gallery__item--3">
+                    snapshot_gallery__item--3" style="margin: 0 0">
                  <img src="period_frame{frame_num}.png"
                    alt="Period" class="snapshot_gallery__img">
                </figure>
 
                <figure class=”snapshot_gallery__item
-                   snapshot_gallery__item--4">
+                   snapshot_gallery__item--4" style="margin: 0 0">
                  <img src="amplitude_frame{frame_num}.png"
                    alt="Amplitude" class="snapshot_gallery__img">
                </figure>
@@ -132,6 +132,18 @@
         """
         galleries += new_gal
 
+    parameter_cells = ''
+    for line in par_str.split('\n'):
+        # last str is empty..
+        if not line:
+            break
+        par_name, par_val = line.split('->')
+        parameter_cells += f'''
+            <tr>
+              <td>{par_name}</td>
+              <td>{par_val}</td>
+            </tr>'''
+
     html_string = f"""
     <html>
     <!-- this file got automatically created by 'output_report.py' -->
@@ -141,7 +153,12 @@
         <!--link rel="stylesheet" href="styles.css"-->
       <style type="text/css">
         body{{ margin:10 100; background:whitesmoke; }}
-        /*body{{ margin:10 100; background:darkslategrey; }}*/
+        p{{
+           text-align: center;
+           margin-top: 0.05cm;
+           margin-bottom: .05cm;
+           color:#2c2e2e;
+         }}
         .center{{
             text-align: center;
             display: block;
@@ -150,60 +167,80 @@
             width: 100%;}}
 
         /* matplotlib output at 1600x1200  */
-        .distr_gallery {{
-            display: grid;
-            margin: 0 auto;
+        .snapshot_gallery {{
+            margin: 0 0;
             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;
+            display: grid;
+            grid-template-columns: repeat(2,1fr);
+            grid-template-rows: repeat(2,27vw);
+            grid-gap: 5px;
         }}
 
-
-        /* 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;
+            margin-top: 5px;
+            margin-bottom: 15px;
         }}
         .subheader{{
              text-align:center;
              font-size: 160%;
              color:#363333;}}
+        .centerimg{{
+            text-align: center;
+            width: 65%;
+            max-width: 400px;
+            display: block;
+            padding: 10px;
+            margin-left: auto;
+            margin-right: auto;
+       }}
+
+        .div_distr{{
+          text-align: center;
+          border-radius: 25px;
+          margin-top: 1cm;
+          margin: auto;
+          margin-bottom: 0.5cm;
+          background-color: #cce1e3;
+          max-width: 550px;
+    }}
+
+        .partable{{
+          width: 70%;
+          margin-left: auto;
+          margin-right: auto;
+          }}
+
+       tr, td{{
+         color:#2c2e2e;
+         font-size: 110%;
+          }}
+
      </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>
+    <hr style="width:70%">
+
+    <h1 class="subheader"> Spatial Summary Statistics </h1>
+    <div class="div_distr">
+      <img src="period_distr.png" alt="Period"
+       class="centerimg">
+      <p> Median and quartiles of the estimated periods for each frame </p>
+    </div>
+
 
-       <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 class="div_distr">
+      <img src="power_distr.png" alt="Period"
+       class="centerimg">
+      <p> Median and quartiles of the ridge wavelet power for each frame </p>
+    </div>
+    <div class="div_distr">
+      <img src="phase_distr.png" alt="Period"
+       class="centerimg">
+      <p> Kuramoto order parameter for the phases estimated for each frame </p>
 
     </div>
 
@@ -219,6 +256,17 @@
     {galleries}
     </div>
 
+    <h1 class="subheader"> Parameters </h1>
+    <div class="div_distr">
+      <table border = "1" class="partable">
+         <tr>
+            <th>Name</th>
+            <th>Value</th>
+         </tr>
+         {parameter_cells}
+      </table>
+    </div>
+
     <!-- javascript with escaped '{{'--->
     <script>
         var slideIndex = 1;
@@ -250,4 +298,4 @@
     return html_string
 
 # for local testing
-# create_html([0,20,40,60,80])
+# create_html([0,20], 'par1 -> val1\n verylongpar2 -> val2')
--- a/spyboat.xml	Sat Nov 28 13:45:34 2020 +0000
+++ b/spyboat.xml	Mon Nov 30 21:11:23 2020 +0000
@@ -1,5 +1,5 @@
-<tool id="spyboat" name="SpyBOAT" version="@TOOL_VERSION@" profile="20.01" license="GPL-3.0-or-later">
-<description>wavelet transforms image stacks</description>
+<tool id="spyboat" name="SpyBOAT" version="@TOOL_VERSION@" profile="20.01"  license="GPL-3.0-or-later">
+<description>wavelet analyzes image stacks</description>
     <macros>
         <token name="@TOOL_VERSION@">0.1.1</token>
     </macros>
@@ -75,21 +75,21 @@
         argparse parser in spyboat_cli.py
         -->
         <section name="PreProc" title="Preprocessing" expanded="true">
-          <param argument="gauss_sigma" type="float" min="0" max="9999999" optional="true" label="Sigma"
+          <param argument="gauss_sigma" type="float" min="0" max="100" optional="true" label="Sigma"
                help="Width of the Gaussian smoothing kernel, leave blank if no pre-smoothing desired" />
           <param argument="rescale_factor" type="integer" value="" min="0" max="99" optional="true" label="Rescale factor"
                help="Downsamples the input movie by this factor given in %, leave blank to disable downsampling" />
         </section>
         <section name="wavana" title="Wavelet Analysis" expanded="true">
-            <param name="dt" type="float" value="1" min="0" max="9999999" label="Sampling interval" help="Time span between two frames" />
-            <param name="tmin" type="float" value="20" min="0" max="9999999" label="Smallest period" help="Lowest period for the wavelet transform" />
-            <param name="tmax" type="float" value="30" min="0" max="9999999" label="Largest period"
+            <param name="dt" type="float" value="1" min="0" max="1000" label="Sampling interval" help="Time span between two frames" />
+            <param name="tmin" type="float" value="20" min="0" max="2000" label="Smallest period" help="Lowest period for the wavelet transform" />
+            <param name="tmax" type="float" value="30" min="0" max="10000" label="Largest period"
                 help="Largest period for the wavelet transform" />
-            <param name="nt" type="integer" value="150" min="0" max="9999999" label="Number of periods to scan for"
+            <param name="nt" type="integer" value="150" min="0" max="1000" label="Number of periods to scan for"
                 help="Determines period resolution of the Wavelet power spectra" />
-            <param name="tcutoff" type="float" value="40" min="0" max="9999999" label="T cutoff"
+            <param name="tcutoff" type="float" value="40" min="0" max="10000" label="T cutoff"
                 help="Cut-off-period for sinc filter detrending, a blank field disables detrending" optional="true" />
-            <param name="win_size" type="float" value="" min="0" max="9999999" optional="true" label="Sliding window size"
+            <param name="win_size" type="float" value="" min="0" max="10000" optional="true" label="Sliding window size"
                 help="Window size for amplitude envelope estimation, leave blank to disable normalization" />
         </section>
         <conditional name="masking">
@@ -100,17 +100,17 @@
             </param>
             <when value="no_masking" />
             <when value="create_static_mask">
-                <param name="mask_frame" type="integer" value="1" min="1" max="99999" label="Create mask from frame"
+                <param name="mask_frame" type="integer" value="1" min="1" max="5000" label="Create mask from frame"
                        help="Creates a static mask from the chosen frame of the input movie." />
-                <param name="mask_thresh" type="float" value="0" min="0" max="999999" label="Threshold"
+                <param name="mask_thresh" type="float" value="0" min="0" max="65000" label="Threshold"
                        help="All pixels below this threshold will be masked in the output." />
             </when>
             <when value="create_dynamic_mask">
-                <param name="mask_thresh" type="float" value="0" min="0" max="999999" label="Threshold"
+                <param name="mask_thresh" type="float" value="0" min="0" max="65000" label="Threshold"
                        help="For each frame of the input, all pixels below this threshold will be masked in the output." />
             </when>
         </conditional>
-        <param name="outputs" type="select" optional="true" multiple="true" label="Select optional outputs" help="">
+        <param name="outputs" type="select" optional="true" multiple="true" label="Select optional outputs" help="" display="checkboxes">
             <option value="save_phase">Phase Movie</option>
             <option value="save_period">Period Movie</option>
             <option value="save_amplitude">Amplitude Movie</option>
@@ -121,19 +121,19 @@
 
     <outputs>
         <data name="phase_out" format="tiff" label="${movie.name[:-4]}_phase">
-            <filter>'save_phase' in ouputs</filter>
+            <filter>outputs and 'save_phase' in outputs</filter>
         </data>
         <data name="period_out" format="tiff" label="${movie.name[:-4]}_period">
-            <filter>'save_period' in outputs</filter>
+            <filter>outputs and 'save_period' in outputs</filter>
         </data>
         <data name="power_out" format="tiff" label="${movie.name[:-4]}_power">
-            <filter>'save_power' in outputs</filter>
+            <filter>outputs and "save_power" in outputs</filter>
         </data>
         <data name="amplitude_out" format="tiff" label="${movie.name[:-4]}_amplitude">
-            <filter>'save_amplitude' in outputs</filter>
+            <filter>outputs and 'save_amplitude' in outputs</filter>
         </data>
         <data name="preprocessed_out" format="tiff" label="${movie.name[:-4]}_preproc">
-            <filter>'save_preprocessed' in outputs</filter>
+            <filter>outputs and 'save_preprocessed' in outputs</filter>
         </data>
         <data name="html_out" format="html" label="Report ${movie.name[:-4]}" />
     </outputs>
@@ -168,7 +168,6 @@
                     <has_size value="1764430" delta="100" />
                 </assert_contents>
             </output>
-            <output name="html_out" file="output1.html" ftype="html"/>
         </test>
         <test expect_num_outputs="4">
             <section name="wavana">
@@ -186,7 +185,6 @@
                     <has_size value="1764430" delta="100" />
                 </assert_contents>
             </output>
-            <output name="html_out" file="output1.html" ftype="html"/>
         </test>
     </tests>
     <help><![CDATA[
--- a/spyboat_cli.py	Sat Nov 28 13:45:34 2020 +0000
+++ b/spyboat_cli.py	Mon Nov 30 21:11:23 2020 +0000
@@ -165,8 +165,8 @@
         logger.info(f'Creating report directory {arguments.report_img_path}')
         os.mkdir(arguments.report_img_path)
 
-        # 4 snapshots each
-    Nsnap = 7
+    # 4 figures per snapshot
+    Nsnap = 8
     NFrames = movie.shape[0]
     # show only frames at least one Tmin
     # away from the edge (-effects)
@@ -180,12 +180,19 @@
     frame_increment = int((NFrames - 2 * start_frame) / Nsnap)
     snapshot_frames = range(start_frame, NFrames - start_frame, frame_increment)
 
+    # get all relevant parameters
+    par_str = ''
+    for arg in vars(arguments):
+        if 'out' in arg or 'path' in arg or 'html' in arg:
+            continue
+        par_str += f'{arg} -> {getattr(arguments, arg)}\n'
+
     for snapshot_frame in snapshot_frames:
         output_report.produce_snapshots(movie, results, snapshot_frame, Wkwargs, img_path=arguments.report_img_path)
 
     output_report.produce_distr_plots(results, Wkwargs, img_path=arguments.report_img_path)
 
-    output_report.create_html(snapshot_frames, arguments.html_fname)
+    output_report.create_html(snapshot_frames, par_str, arguments.html_fname)
 
 except FileExistsError as e:
     logger.critical(f"Could not create html report directory: {repr(e)}")
--- a/test-data/output1.html	Sat Nov 28 13:45:34 2020 +0000
+++ b/test-data/output1.html	Mon Nov 30 21:11:23 2020 +0000
@@ -7,7 +7,12 @@
         <!--link rel="stylesheet" href="styles.css"-->
       <style type="text/css">
         body{ margin:10 100; background:whitesmoke; }
-        /*body{ margin:10 100; background:darkslategrey; }*/
+        p{
+           text-align: center;
+           margin-top: 0.05cm;
+           margin-bottom: .05cm;
+           color:#2c2e2e;
+         }
         .center{
             text-align: center;
             display: block;
@@ -16,60 +21,80 @@
             width: 100%;}
 
         /* matplotlib output at 1600x1200  */
-        .distr_gallery {
-            display: grid;
-            margin: 0 auto;
+        .snapshot_gallery {
+            margin: 0 0;
             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;
+            display: grid;
+            grid-template-columns: repeat(2,1fr);
+            grid-template-rows: repeat(2,27vw);
+            grid-gap: 5px;
         }
 
-
-        /* 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;
+            margin-top: 5px;
+            margin-bottom: 15px;
         }
         .subheader{
              text-align:center;
              font-size: 160%;
              color:#363333;}
+        .centerimg{
+            text-align: center;
+            width: 65%;
+            max-width: 400px;
+            display: block;
+            padding: 10px;
+            margin-left: auto;
+            margin-right: auto;
+       }
+
+        .div_distr{
+          text-align: center;
+          border-radius: 25px;
+          margin-top: 1cm;
+          margin: auto;
+          margin-bottom: 0.5cm;
+          background-color: #cce1e3;
+          max-width: 550px;
+    }
+
+        .partable{
+          width: 70%;
+          margin-left: auto;
+          margin-right: auto;
+          }
+
+       tr, td{
+         color:#2c2e2e;
+         font-size: 110%;
+          }
+
      </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>
+    <hr style="width:70%">
+
+    <h1 class="subheader"> Spatial Summary Statistics </h1>
+    <div class="div_distr">
+      <img src="period_distr.png" alt="Period"
+       class="centerimg">
+      <p> Median and quartiles of the estimated periods for each frame </p>
+    </div>
+
 
-       <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 class="div_distr">
+      <img src="power_distr.png" alt="Period"
+       class="centerimg">
+      <p> Median and quartiles of the ridge wavelet power for each frame </p>
+    </div>
+    <div class="div_distr">
+      <img src="phase_distr.png" alt="Period"
+       class="centerimg">
+      <p> Kuramoto order parameter for the phases estimated for each frame </p>
 
     </div>
 
@@ -90,25 +115,25 @@
             <div class="snapshot_gallery">
 
                <figure class=”snapshot_gallery__item
-                   snapshot_gallery__item--1">
+                   snapshot_gallery__item--1" style="margin: 0 0">
                  <img src="input_frame20.png" alt="The Input"
                      class="snapshot_gallery__img">
                </figure>
 
                <figure class=”snapshot_gallery__item
-                  snapshot_gallery__item--2">
+                  snapshot_gallery__item--2" style="margin: 0 0">
                  <img src="phase_frame20.png" alt="Phase"
                     class="snapshot_gallery__img">
                </figure>
 
                <figure class=”snapshot_gallery__item
-                    snapshot_gallery__item--3">
+                    snapshot_gallery__item--3" style="margin: 0 0">
                  <img src="period_frame20.png"
                    alt="Period" class="snapshot_gallery__img">
                </figure>
 
                <figure class=”snapshot_gallery__item
-                   snapshot_gallery__item--4">
+                   snapshot_gallery__item--4" style="margin: 0 0">
                  <img src="amplitude_frame20.png"
                    alt="Amplitude" class="snapshot_gallery__img">
                </figure>
@@ -117,31 +142,31 @@
         
         <div class="FrameSlides">
         <h3 style="text-align:center; color=#363333">
-        Frame Nr. 28 </h3>
+        Frame Nr. 27 </h3>
 
             <div class="snapshot_gallery">
 
                <figure class=”snapshot_gallery__item
-                   snapshot_gallery__item--1">
-                 <img src="input_frame28.png" alt="The Input"
+                   snapshot_gallery__item--1" style="margin: 0 0">
+                 <img src="input_frame27.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"
+                  snapshot_gallery__item--2" style="margin: 0 0">
+                 <img src="phase_frame27.png" alt="Phase"
                     class="snapshot_gallery__img">
                </figure>
 
                <figure class=”snapshot_gallery__item
-                    snapshot_gallery__item--3">
-                 <img src="period_frame28.png"
+                    snapshot_gallery__item--3" style="margin: 0 0">
+                 <img src="period_frame27.png"
                    alt="Period" class="snapshot_gallery__img">
                </figure>
 
                <figure class=”snapshot_gallery__item
-                   snapshot_gallery__item--4">
-                 <img src="amplitude_frame28.png"
+                   snapshot_gallery__item--4" style="margin: 0 0">
+                 <img src="amplitude_frame27.png"
                    alt="Amplitude" class="snapshot_gallery__img">
                </figure>
             </div>
@@ -149,31 +174,95 @@
         
         <div class="FrameSlides">
         <h3 style="text-align:center; color=#363333">
-        Frame Nr. 36 </h3>
+        Frame Nr. 34 </h3>
 
             <div class="snapshot_gallery">
 
                <figure class=”snapshot_gallery__item
-                   snapshot_gallery__item--1">
-                 <img src="input_frame36.png" alt="The Input"
+                   snapshot_gallery__item--1" style="margin: 0 0">
+                 <img src="input_frame34.png" alt="The Input"
+                     class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item
+                  snapshot_gallery__item--2" style="margin: 0 0">
+                 <img src="phase_frame34.png" alt="Phase"
+                    class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item
+                    snapshot_gallery__item--3" style="margin: 0 0">
+                 <img src="period_frame34.png"
+                   alt="Period" class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item
+                   snapshot_gallery__item--4" style="margin: 0 0">
+                 <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. 41 </h3>
+
+            <div class="snapshot_gallery">
+
+               <figure class=”snapshot_gallery__item
+                   snapshot_gallery__item--1" style="margin: 0 0">
+                 <img src="input_frame41.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"
+                  snapshot_gallery__item--2" style="margin: 0 0">
+                 <img src="phase_frame41.png" alt="Phase"
                     class="snapshot_gallery__img">
                </figure>
 
                <figure class=”snapshot_gallery__item
-                    snapshot_gallery__item--3">
-                 <img src="period_frame36.png"
+                    snapshot_gallery__item--3" style="margin: 0 0">
+                 <img src="period_frame41.png"
                    alt="Period" class="snapshot_gallery__img">
                </figure>
 
                <figure class=”snapshot_gallery__item
-                   snapshot_gallery__item--4">
-                 <img src="amplitude_frame36.png"
+                   snapshot_gallery__item--4" style="margin: 0 0">
+                 <img src="amplitude_frame41.png"
+                   alt="Amplitude" class="snapshot_gallery__img">
+               </figure>
+            </div>
+        </div>
+        
+        <div class="FrameSlides">
+        <h3 style="text-align:center; color=#363333">
+        Frame Nr. 48 </h3>
+
+            <div class="snapshot_gallery">
+
+               <figure class=”snapshot_gallery__item
+                   snapshot_gallery__item--1" style="margin: 0 0">
+                 <img src="input_frame48.png" alt="The Input"
+                     class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item
+                  snapshot_gallery__item--2" style="margin: 0 0">
+                 <img src="phase_frame48.png" alt="Phase"
+                    class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item
+                    snapshot_gallery__item--3" style="margin: 0 0">
+                 <img src="period_frame48.png"
+                   alt="Period" class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item
+                   snapshot_gallery__item--4" style="margin: 0 0">
+                 <img src="amplitude_frame48.png"
                    alt="Amplitude" class="snapshot_gallery__img">
                </figure>
             </div>
@@ -181,31 +270,63 @@
         
         <div class="FrameSlides">
         <h3 style="text-align:center; color=#363333">
-        Frame Nr. 44 </h3>
+        Frame Nr. 55 </h3>
 
             <div class="snapshot_gallery">
 
                <figure class=”snapshot_gallery__item
-                   snapshot_gallery__item--1">
-                 <img src="input_frame44.png" alt="The Input"
+                   snapshot_gallery__item--1" style="margin: 0 0">
+                 <img src="input_frame55.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"
+                  snapshot_gallery__item--2" style="margin: 0 0">
+                 <img src="phase_frame55.png" alt="Phase"
                     class="snapshot_gallery__img">
                </figure>
 
                <figure class=”snapshot_gallery__item
-                    snapshot_gallery__item--3">
-                 <img src="period_frame44.png"
+                    snapshot_gallery__item--3" style="margin: 0 0">
+                 <img src="period_frame55.png"
                    alt="Period" class="snapshot_gallery__img">
                </figure>
 
                <figure class=”snapshot_gallery__item
-                   snapshot_gallery__item--4">
-                 <img src="amplitude_frame44.png"
+                   snapshot_gallery__item--4" style="margin: 0 0">
+                 <img src="amplitude_frame55.png"
+                   alt="Amplitude" class="snapshot_gallery__img">
+               </figure>
+            </div>
+        </div>
+        
+        <div class="FrameSlides">
+        <h3 style="text-align:center; color=#363333">
+        Frame Nr. 62 </h3>
+
+            <div class="snapshot_gallery">
+
+               <figure class=”snapshot_gallery__item
+                   snapshot_gallery__item--1" style="margin: 0 0">
+                 <img src="input_frame62.png" alt="The Input"
+                     class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item
+                  snapshot_gallery__item--2" style="margin: 0 0">
+                 <img src="phase_frame62.png" alt="Phase"
+                    class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item
+                    snapshot_gallery__item--3" style="margin: 0 0">
+                 <img src="period_frame62.png"
+                   alt="Period" class="snapshot_gallery__img">
+               </figure>
+
+               <figure class=”snapshot_gallery__item
+                   snapshot_gallery__item--4" style="margin: 0 0">
+                 <img src="amplitude_frame62.png"
                    alt="Amplitude" class="snapshot_gallery__img">
                </figure>
             </div>
@@ -213,100 +334,95 @@
         
         <div class="FrameSlides">
         <h3 style="text-align:center; color=#363333">
-        Frame Nr. 52 </h3>
+        Frame Nr. 69 </h3>
 
             <div class="snapshot_gallery">
 
                <figure class=”snapshot_gallery__item
-                   snapshot_gallery__item--1">
-                 <img src="input_frame52.png" alt="The Input"
+                   snapshot_gallery__item--1" style="margin: 0 0">
+                 <img src="input_frame69.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"
+                  snapshot_gallery__item--2" style="margin: 0 0">
+                 <img src="phase_frame69.png" alt="Phase"
                     class="snapshot_gallery__img">
                </figure>
 
                <figure class=”snapshot_gallery__item
-                    snapshot_gallery__item--3">
-                 <img src="period_frame52.png"
+                    snapshot_gallery__item--3" style="margin: 0 0">
+                 <img src="period_frame69.png"
                    alt="Period" class="snapshot_gallery__img">
                </figure>
 
                <figure class=”snapshot_gallery__item
-                   snapshot_gallery__item--4">
-                 <img src="amplitude_frame52.png"
+                   snapshot_gallery__item--4" style="margin: 0 0">
+                 <img src="amplitude_frame69.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>
+    </div>
 
-               <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>
-        
+    <h1 class="subheader"> Parameters </h1>
+    <div class="div_distr">
+      <table border = "1" class="partable">
+         <tr>
+            <th>Name</th>
+            <th>Value</th>
+         </tr>
+         
+            <tr>
+              <td>ncpu </td>
+              <td> 1</td>
+            </tr>
+            <tr>
+              <td>rescale_factor </td>
+              <td> None</td>
+            </tr>
+            <tr>
+              <td>gauss_sigma </td>
+              <td> None</td>
+            </tr>
+            <tr>
+              <td>dt </td>
+              <td> 1.0</td>
+            </tr>
+            <tr>
+              <td>Tmin </td>
+              <td> 20.0</td>
+            </tr>
+            <tr>
+              <td>Tmax </td>
+              <td> 30.0</td>
+            </tr>
+            <tr>
+              <td>nT </td>
+              <td> 150</td>
+            </tr>
+            <tr>
+              <td>Tcutoff </td>
+              <td> 40.0</td>
+            </tr>
+            <tr>
+              <td>win_size </td>
+              <td> None</td>
+            </tr>
+            <tr>
+              <td>masking </td>
+              <td> None</td>
+            </tr>
+            <tr>
+              <td>mask_frame </td>
+              <td> None</td>
+            </tr>
+            <tr>
+              <td>mask_thresh </td>
+              <td> 0</td>
+            </tr>
+      </table>
     </div>
 
     <!-- javascript with escaped '{'--->