Mercurial > repos > gregor.m > spyboat

comparison 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
comparison
equal deleted inserted replaced
2:c59d1373230e 3:4d7f30a7e2f6
1
2 <html>
3 <title>SpyBOAT Output Report</title>
4 <head>
5 <!-- that doesn't work with galaxy.. -->
6 <!--link rel="stylesheet" href="styles.css"-->
7 <style type="text/css">
8 body{ margin:10 100; background:whitesmoke; }
9 /*body{ margin:10 100; background:darkslategrey; }*/
10 .center{
11 text-align: center;
12 display: block;
13 margin-left: auto;
14 margin-right: auto;
15 width: 100%;}
16
17 /* matplotlib output at 1600x1200 */
18 .distr_gallery {
19 display: grid;
20 margin: 0 auto;
21 text-align: center;
22 /* border: 1px dashed rgba(4, 4, 4, 0.35); */
23 grid-template-columns: repeat(3,1fr);
24 grid-template-rows: 20vw;
25 grid-gap: 0px;
26 column-gap: 0px
27 }
28 .distr_gallery__img {
29 width: 100%;
30 height: 100%;
31 object-fit: contain;
32 }
33
34
35 /* matplotlib output at 1600x1200 */
36 .snapshot_gallery {
37 display: grid;
38 margin: 0 auto;
39 border: 1px dashed rgba(4, 4, 4, 0.35);
40 text-align: center;
41 grid-template-columns: repeat(2,1fr);
42 grid-template-rows: repeat(2,20vw);
43 grid-gap: 5px;
44 }
45 .snapshot_gallery__img {
46 width: 100%;
47 height: 100%;
48 object-fit: contain;
49 }
50 .subheader{
51 text-align:center;
52 font-size: 160%;
53 color:#363333;}
54 </style>
55 </head>
56 <body>
57 <h1 style="text-align:center; color:#363333">SpyBOAT Results Report</h1>
58 <hr style="width:50%">
59 <h1 class="subheader"> Distribution Dynamics </h1>
60 <div class="distr_gallery">
61 <figure class=”distr_gallery__item distr_gallery__item--1">
62 <img src="period_distr.png" alt="Period" class="distr_gallery__img">
63 </figure>
64
65 <figure class=”distr_gallery__item distr_gallery__item--2">
66 <img src="power_distr.png" alt="Power" class="distr_gallery__img">
67 </figure>
68
69 <figure class=”distr_gallery__item distr_gallery__item--3">
70 <img src="phase_distr.png" alt="Phase" class="distr_gallery__img">
71 </figure>
72
73 </div>
74
75 <h1 class="subheader"> Output Movie Snapshots </h1>
76
77 <!-- trigger the javascript at the end--->
78 <div class="center">
79 <button class="w3-button" onclick="plusDivs(-1)">&#10094; Prev</button>
80 <button class="w3-button" onclick="plusDivs(1)">Next &#10095;</button>
81 </div>
82
83 <!-- defines all elements of the "FrameSlides" class --->
84
85 <div class="FrameSlides">
86 <h3 style="text-align:center; color=#363333"> Frame Nr. 2 </h3>
87
88 <div class="snapshot_gallery">
89
90 <figure class=”snapshot_gallery__item snapshot_gallery__item--1">
91 <img src="input_frame2.png" alt="The Input" class="snapshot_gallery__img">
92 </figure>
93
94 <figure class=”snapshot_gallery__item snapshot_gallery__item--2">
95 <img src="phase_frame2.png" alt="Phase" class="snapshot_gallery__img">
96 </figure>
97
98 <figure class=”snapshot_gallery__item snapshot_gallery__item--3">
99 <img src="period_frame2.png" alt="Period" class="snapshot_gallery__img">
100 </figure>
101
102 <figure class=”snapshot_gallery__item snapshot_gallery__item--4">
103 <img src="amplitude_frame2.png" alt="Amplitude" class="snapshot_gallery__img">
104 </figure>
105 </div>
106 </div>
107
108 <div class="FrameSlides">
109 <h3 style="text-align:center; color=#363333"> Frame Nr. 18 </h3>
110
111 <div class="snapshot_gallery">
112
113 <figure class=”snapshot_gallery__item snapshot_gallery__item--1">
114 <img src="input_frame18.png" alt="The Input" class="snapshot_gallery__img">
115 </figure>
116
117 <figure class=”snapshot_gallery__item snapshot_gallery__item--2">
118 <img src="phase_frame18.png" alt="Phase" class="snapshot_gallery__img">
119 </figure>
120
121 <figure class=”snapshot_gallery__item snapshot_gallery__item--3">
122 <img src="period_frame18.png" alt="Period" class="snapshot_gallery__img">
123 </figure>
124
125 <figure class=”snapshot_gallery__item snapshot_gallery__item--4">
126 <img src="amplitude_frame18.png" alt="Amplitude" class="snapshot_gallery__img">
127 </figure>
128 </div>
129 </div>
130
131 <div class="FrameSlides">
132 <h3 style="text-align:center; color=#363333"> Frame Nr. 34 </h3>
133
134 <div class="snapshot_gallery">
135
136 <figure class=”snapshot_gallery__item snapshot_gallery__item--1">
137 <img src="input_frame34.png" alt="The Input" class="snapshot_gallery__img">
138 </figure>
139
140 <figure class=”snapshot_gallery__item snapshot_gallery__item--2">
141 <img src="phase_frame34.png" alt="Phase" class="snapshot_gallery__img">
142 </figure>
143
144 <figure class=”snapshot_gallery__item snapshot_gallery__item--3">
145 <img src="period_frame34.png" alt="Period" class="snapshot_gallery__img">
146 </figure>
147
148 <figure class=”snapshot_gallery__item snapshot_gallery__item--4">
149 <img src="amplitude_frame34.png" alt="Amplitude" class="snapshot_gallery__img">
150 </figure>
151 </div>
152 </div>
153
154 <div class="FrameSlides">
155 <h3 style="text-align:center; color=#363333"> Frame Nr. 50 </h3>
156
157 <div class="snapshot_gallery">
158
159 <figure class=”snapshot_gallery__item snapshot_gallery__item--1">
160 <img src="input_frame50.png" alt="The Input" class="snapshot_gallery__img">
161 </figure>
162
163 <figure class=”snapshot_gallery__item snapshot_gallery__item--2">
164 <img src="phase_frame50.png" alt="Phase" class="snapshot_gallery__img">
165 </figure>
166
167 <figure class=”snapshot_gallery__item snapshot_gallery__item--3">
168 <img src="period_frame50.png" alt="Period" class="snapshot_gallery__img">
169 </figure>
170
171 <figure class=”snapshot_gallery__item snapshot_gallery__item--4">
172 <img src="amplitude_frame50.png" alt="Amplitude" class="snapshot_gallery__img">
173 </figure>
174 </div>
175 </div>
176
177 <div class="FrameSlides">
178 <h3 style="text-align:center; color=#363333"> Frame Nr. 66 </h3>
179
180 <div class="snapshot_gallery">
181
182 <figure class=”snapshot_gallery__item snapshot_gallery__item--1">
183 <img src="input_frame66.png" alt="The Input" class="snapshot_gallery__img">
184 </figure>
185
186 <figure class=”snapshot_gallery__item snapshot_gallery__item--2">
187 <img src="phase_frame66.png" alt="Phase" class="snapshot_gallery__img">
188 </figure>
189
190 <figure class=”snapshot_gallery__item snapshot_gallery__item--3">
191 <img src="period_frame66.png" alt="Period" class="snapshot_gallery__img">
192 </figure>
193
194 <figure class=”snapshot_gallery__item snapshot_gallery__item--4">
195 <img src="amplitude_frame66.png" alt="Amplitude" class="snapshot_gallery__img">
196 </figure>
197 </div>
198 </div>
199
200 <div class="FrameSlides">
201 <h3 style="text-align:center; color=#363333"> Frame Nr. 82 </h3>
202
203 <div class="snapshot_gallery">
204
205 <figure class=”snapshot_gallery__item snapshot_gallery__item--1">
206 <img src="input_frame82.png" alt="The Input" class="snapshot_gallery__img">
207 </figure>
208
209 <figure class=”snapshot_gallery__item snapshot_gallery__item--2">
210 <img src="phase_frame82.png" alt="Phase" class="snapshot_gallery__img">
211 </figure>
212
213 <figure class=”snapshot_gallery__item snapshot_gallery__item--3">
214 <img src="period_frame82.png" alt="Period" class="snapshot_gallery__img">
215 </figure>
216
217 <figure class=”snapshot_gallery__item snapshot_gallery__item--4">
218 <img src="amplitude_frame82.png" alt="Amplitude" class="snapshot_gallery__img">
219 </figure>
220 </div>
221 </div>
222
223 </div>
224
225 <!-- javascript with escaped '{'--->
226 <script>
227 var slideIndex = 1;
228 showDivs(slideIndex);
229
230 function plusDivs(n) {
231 showDivs(slideIndex += n);
232 }
233
234 function showDivs(n) {
235 var i;
236 var x = document.getElementsByClassName("FrameSlides");
237 if (n > x.length) {slideIndex = 1}
238 if (n < 1) {slideIndex = x.length} ;
239 for (i = 0; i < x.length; i++) {
240 x[i].style.display = "none";
241 }
242 x[slideIndex-1].style.display = "block";
243 }
244 </script>
245 </body>
246 </html>
247