Mercurial > repos > gregor.m > spyboat


    <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. 29 </h3>

            <div class="snapshot_gallery">

               <figure class=”snapshot_gallery__item snapshot_gallery__item--1">
                 <img src="input_frame29.png" alt="The Input" class="snapshot_gallery__img">
               </figure>

               <figure class=”snapshot_gallery__item snapshot_gallery__item--2">
                 <img src="phase_frame29.png" alt="Phase" class="snapshot_gallery__img">
               </figure>

               <figure class=”snapshot_gallery__item snapshot_gallery__item--3">
                 <img src="period_frame29.png" alt="Period" class="snapshot_gallery__img">
               </figure>

               <figure class=”snapshot_gallery__item snapshot_gallery__item--4">
                 <img src="amplitude_frame29.png" alt="Amplitude" class="snapshot_gallery__img">
               </figure>
            </div>
        </div>

        <div class="FrameSlides">
        <h3 style="text-align:center; color=#363333"> Frame Nr. 38 </h3>

            <div class="snapshot_gallery">

               <figure class=”snapshot_gallery__item snapshot_gallery__item--1">
                 <img src="input_frame38.png" alt="The Input" class="snapshot_gallery__img">
               </figure>

               <figure class=”snapshot_gallery__item snapshot_gallery__item--2">
                 <img src="phase_frame38.png" alt="Phase" class="snapshot_gallery__img">
               </figure>

               <figure class=”snapshot_gallery__item snapshot_gallery__item--3">
                 <img src="period_frame38.png" alt="Period" class="snapshot_gallery__img">
               </figure>

               <figure class=”snapshot_gallery__item snapshot_gallery__item--4">
                 <img src="amplitude_frame38.png" alt="Amplitude" class="snapshot_gallery__img">
               </figure>
            </div>
        </div>

        <div class="FrameSlides">
        <h3 style="text-align:center; color=#363333"> Frame Nr. 47 </h3>

            <div class="snapshot_gallery">

               <figure class=”snapshot_gallery__item snapshot_gallery__item--1">
                 <img src="input_frame47.png" alt="The Input" class="snapshot_gallery__img">
               </figure>

               <figure class=”snapshot_gallery__item snapshot_gallery__item--2">
                 <img src="phase_frame47.png" alt="Phase" class="snapshot_gallery__img">
               </figure>

               <figure class=”snapshot_gallery__item snapshot_gallery__item--3">
                 <img src="period_frame47.png" alt="Period" class="snapshot_gallery__img">
               </figure>

               <figure class=”snapshot_gallery__item snapshot_gallery__item--4">
                 <img src="amplitude_frame47.png" alt="Amplitude" class="snapshot_gallery__img">
               </figure>
            </div>
        </div>

        <div class="FrameSlides">
        <h3 style="text-align:center; color=#363333"> Frame Nr. 56 </h3>

            <div class="snapshot_gallery">

               <figure class=”snapshot_gallery__item snapshot_gallery__item--1">
                 <img src="input_frame56.png" alt="The Input" class="snapshot_gallery__img">
               </figure>

               <figure class=”snapshot_gallery__item snapshot_gallery__item--2">
                 <img src="phase_frame56.png" alt="Phase" class="snapshot_gallery__img">
               </figure>

               <figure class=”snapshot_gallery__item snapshot_gallery__item--3">
                 <img src="period_frame56.png" alt="Period" class="snapshot_gallery__img">
               </figure>

               <figure class=”snapshot_gallery__item snapshot_gallery__item--4">
                 <img src="amplitude_frame56.png" alt="Amplitude" class="snapshot_gallery__img">
               </figure>
            </div>
        </div>

        <div class="FrameSlides">
        <h3 style="text-align:center; color=#363333"> Frame Nr. 65 </h3>

            <div class="snapshot_gallery">

               <figure class=”snapshot_gallery__item snapshot_gallery__item--1">
                 <img src="input_frame65.png" alt="The Input" class="snapshot_gallery__img">
               </figure>

               <figure class=”snapshot_gallery__item snapshot_gallery__item--2">
                 <img src="phase_frame65.png" alt="Phase" class="snapshot_gallery__img">
               </figure>

               <figure class=”snapshot_gallery__item snapshot_gallery__item--3">
                 <img src="period_frame65.png" alt="Period" class="snapshot_gallery__img">
               </figure>

               <figure class=”snapshot_gallery__item snapshot_gallery__item--4">
                 <img src="amplitude_frame65.png" alt="Amplitude" class="snapshot_gallery__img">
               </figure>
            </div>
        </div>

        <div class="FrameSlides">
        <h3 style="text-align:center; color=#363333"> Frame Nr. 74 </h3>

            <div class="snapshot_gallery">

               <figure class=”snapshot_gallery__item snapshot_gallery__item--1">
                 <img src="input_frame74.png" alt="The Input" class="snapshot_gallery__img">
               </figure>

               <figure class=”snapshot_gallery__item snapshot_gallery__item--2">
                 <img src="phase_frame74.png" alt="Phase" class="snapshot_gallery__img">
               </figure>

               <figure class=”snapshot_gallery__item snapshot_gallery__item--3">
                 <img src="period_frame74.png" alt="Period" class="snapshot_gallery__img">
               </figure>

               <figure class=”snapshot_gallery__item snapshot_gallery__item--4">
                 <img src="amplitude_frame74.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>
author	gregor.m
date	Thu, 26 Nov 2020 16:40:47 +0000
parents	4d7f30a7e2f6
children	d5a4180410c4