Mercurial > repos > gregor.m > spyboat

comparison 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
comparison
equal deleted inserted replaced
4:a4c6fcf2c456 5:d5a4180410c4
1
2 <html>
3 <!-- this file got automatically created by 'output_report.py' -->
4 <title>SpyBOAT Output Report</title>
5 <head>
6 <!-- that doesn't work with galaxy.. -->
7 <!--link rel="stylesheet" href="styles.css"-->
8 <style type="text/css">
9 body{ margin:10 100; background:whitesmoke; }
10 /*body{ margin:10 100; background:darkslategrey; }*/
11 .center{
12 text-align: center;
13 display: block;
14 margin-left: auto;
15 margin-right: auto;
16 width: 100%;}
17
18 /* matplotlib output at 1600x1200 */
19 .distr_gallery {
20 display: grid;
21 margin: 0 auto;
22 text-align: center;
23 /* border: 1px dashed rgba(4, 4, 4, 0.35); */
24 grid-template-columns: repeat(3,1fr);
25 grid-template-rows: 20vw;
26 grid-gap: 0px;
27 column-gap: 0px
28 }
29 .distr_gallery__img {
30 width: 100%;
31 height: 100%;
32 object-fit: contain;
33 }
34
35
36 /* matplotlib output at 1600x1200 */
37 .snapshot_gallery {
38 display: grid;
39 margin: 0 auto;
40 border: 1px dashed rgba(4, 4, 4, 0.35);
41 text-align: center;
42 grid-template-columns: repeat(2,1fr);
43 grid-template-rows: repeat(2,20vw);
44 grid-gap: 5px;
45 }
46 .snapshot_gallery__img {
47 width: 100%;
48 height: 100%;
49 object-fit: contain;
50 }
51 .subheader{
52 text-align:center;
53 font-size: 160%;
54 color:#363333;}
55 </style>
56 </head>
57 <body>
58 <h1 style="text-align:center; color:#363333">SpyBOAT Results Report</h1>
59 <hr style="width:50%">
60 <h1 class="subheader"> Distribution Dynamics </h1>
61 <div class="distr_gallery">
62 <figure class=”distr_gallery__item distr_gallery__item--1">
63 <img src="period_distr.png" alt="Period" class="distr_gallery__img">
64 </figure>
65
66 <figure class=”distr_gallery__item distr_gallery__item--2">
67 <img src="power_distr.png" alt="Power" class="distr_gallery__img">
68 </figure>
69
70 <figure class=”distr_gallery__item distr_gallery__item--3">
71 <img src="phase_distr.png" alt="Phase" class="distr_gallery__img">
72 </figure>
73
74 </div>
75
76 <h1 class="subheader"> Output Movie Snapshots </h1>
77
78 <!-- trigger the javascript at the end--->
79 <div class="center">
80 <button class="w3-button" onclick="plusDivs(-1)">&#10094; Prev</button>
81 <button class="w3-button" onclick="plusDivs(1)">Next &#10095;</button>
82 </div>
83
84 <!-- defines all elements of the "FrameSlides" class --->
85
86 <div class="FrameSlides">
87 <h3 style="text-align:center; color=#363333">
88 Frame Nr. 20 </h3>
89
90 <div class="snapshot_gallery">
91
92 <figure class=”snapshot_gallery__item
93 snapshot_gallery__item--1">
94 <img src="input_frame20.png" alt="The Input"
95 class="snapshot_gallery__img">
96 </figure>
97
98 <figure class=”snapshot_gallery__item
99 snapshot_gallery__item--2">
100 <img src="phase_frame20.png" alt="Phase"
101 class="snapshot_gallery__img">
102 </figure>
103
104 <figure class=”snapshot_gallery__item
105 snapshot_gallery__item--3">
106 <img src="period_frame20.png"
107 alt="Period" class="snapshot_gallery__img">
108 </figure>
109
110 <figure class=”snapshot_gallery__item
111 snapshot_gallery__item--4">
112 <img src="amplitude_frame20.png"
113 alt="Amplitude" class="snapshot_gallery__img">
114 </figure>
115 </div>
116 </div>
117
118 <div class="FrameSlides">
119 <h3 style="text-align:center; color=#363333">
120 Frame Nr. 28 </h3>
121
122 <div class="snapshot_gallery">
123
124 <figure class=”snapshot_gallery__item
125 snapshot_gallery__item--1">
126 <img src="input_frame28.png" alt="The Input"
127 class="snapshot_gallery__img">
128 </figure>
129
130 <figure class=”snapshot_gallery__item
131 snapshot_gallery__item--2">
132 <img src="phase_frame28.png" alt="Phase"
133 class="snapshot_gallery__img">
134 </figure>
135
136 <figure class=”snapshot_gallery__item
137 snapshot_gallery__item--3">
138 <img src="period_frame28.png"
139 alt="Period" class="snapshot_gallery__img">
140 </figure>
141
142 <figure class=”snapshot_gallery__item
143 snapshot_gallery__item--4">
144 <img src="amplitude_frame28.png"
145 alt="Amplitude" class="snapshot_gallery__img">
146 </figure>
147 </div>
148 </div>
149
150 <div class="FrameSlides">
151 <h3 style="text-align:center; color=#363333">
152 Frame Nr. 36 </h3>
153
154 <div class="snapshot_gallery">
155
156 <figure class=”snapshot_gallery__item
157 snapshot_gallery__item--1">
158 <img src="input_frame36.png" alt="The Input"
159 class="snapshot_gallery__img">
160 </figure>
161
162 <figure class=”snapshot_gallery__item
163 snapshot_gallery__item--2">
164 <img src="phase_frame36.png" alt="Phase"
165 class="snapshot_gallery__img">
166 </figure>
167
168 <figure class=”snapshot_gallery__item
169 snapshot_gallery__item--3">
170 <img src="period_frame36.png"
171 alt="Period" class="snapshot_gallery__img">
172 </figure>
173
174 <figure class=”snapshot_gallery__item
175 snapshot_gallery__item--4">
176 <img src="amplitude_frame36.png"
177 alt="Amplitude" class="snapshot_gallery__img">
178 </figure>
179 </div>
180 </div>
181
182 <div class="FrameSlides">
183 <h3 style="text-align:center; color=#363333">
184 Frame Nr. 44 </h3>
185
186 <div class="snapshot_gallery">
187
188 <figure class=”snapshot_gallery__item
189 snapshot_gallery__item--1">
190 <img src="input_frame44.png" alt="The Input"
191 class="snapshot_gallery__img">
192 </figure>
193
194 <figure class=”snapshot_gallery__item
195 snapshot_gallery__item--2">
196 <img src="phase_frame44.png" alt="Phase"
197 class="snapshot_gallery__img">
198 </figure>
199
200 <figure class=”snapshot_gallery__item
201 snapshot_gallery__item--3">
202 <img src="period_frame44.png"
203 alt="Period" class="snapshot_gallery__img">
204 </figure>
205
206 <figure class=”snapshot_gallery__item
207 snapshot_gallery__item--4">
208 <img src="amplitude_frame44.png"
209 alt="Amplitude" class="snapshot_gallery__img">
210 </figure>
211 </div>
212 </div>
213
214 <div class="FrameSlides">
215 <h3 style="text-align:center; color=#363333">
216 Frame Nr. 52 </h3>
217
218 <div class="snapshot_gallery">
219
220 <figure class=”snapshot_gallery__item
221 snapshot_gallery__item--1">
222 <img src="input_frame52.png" alt="The Input"
223 class="snapshot_gallery__img">
224 </figure>
225
226 <figure class=”snapshot_gallery__item
227 snapshot_gallery__item--2">
228 <img src="phase_frame52.png" alt="Phase"
229 class="snapshot_gallery__img">
230 </figure>
231
232 <figure class=”snapshot_gallery__item
233 snapshot_gallery__item--3">
234 <img src="period_frame52.png"
235 alt="Period" class="snapshot_gallery__img">
236 </figure>
237
238 <figure class=”snapshot_gallery__item
239 snapshot_gallery__item--4">
240 <img src="amplitude_frame52.png"
241 alt="Amplitude" class="snapshot_gallery__img">
242 </figure>
243 </div>
244 </div>
245
246 <div class="FrameSlides">
247 <h3 style="text-align:center; color=#363333">
248 Frame Nr. 60 </h3>
249
250 <div class="snapshot_gallery">
251
252 <figure class=”snapshot_gallery__item
253 snapshot_gallery__item--1">
254 <img src="input_frame60.png" alt="The Input"
255 class="snapshot_gallery__img">
256 </figure>
257
258 <figure class=”snapshot_gallery__item
259 snapshot_gallery__item--2">
260 <img src="phase_frame60.png" alt="Phase"
261 class="snapshot_gallery__img">
262 </figure>
263
264 <figure class=”snapshot_gallery__item
265 snapshot_gallery__item--3">
266 <img src="period_frame60.png"
267 alt="Period" class="snapshot_gallery__img">
268 </figure>
269
270 <figure class=”snapshot_gallery__item
271 snapshot_gallery__item--4">
272 <img src="amplitude_frame60.png"
273 alt="Amplitude" class="snapshot_gallery__img">
274 </figure>
275 </div>
276 </div>
277
278 <div class="FrameSlides">
279 <h3 style="text-align:center; color=#363333">
280 Frame Nr. 68 </h3>
281
282 <div class="snapshot_gallery">
283
284 <figure class=”snapshot_gallery__item
285 snapshot_gallery__item--1">
286 <img src="input_frame68.png" alt="The Input"
287 class="snapshot_gallery__img">
288 </figure>
289
290 <figure class=”snapshot_gallery__item
291 snapshot_gallery__item--2">
292 <img src="phase_frame68.png" alt="Phase"
293 class="snapshot_gallery__img">
294 </figure>
295
296 <figure class=”snapshot_gallery__item
297 snapshot_gallery__item--3">
298 <img src="period_frame68.png"
299 alt="Period" class="snapshot_gallery__img">
300 </figure>
301
302 <figure class=”snapshot_gallery__item
303 snapshot_gallery__item--4">
304 <img src="amplitude_frame68.png"
305 alt="Amplitude" class="snapshot_gallery__img">
306 </figure>
307 </div>
308 </div>
309
310 </div>
311
312 <!-- javascript with escaped '{'--->
313 <script>
314 var slideIndex = 1;
315 showDivs(slideIndex);
316
317 function plusDivs(n) {
318 showDivs(slideIndex += n);
319 }
320
321 function showDivs(n) {
322 var i;
323 var x = document.getElementsByClassName("FrameSlides");
324 if (n > x.length) {slideIndex = 1}
325 if (n < 1) {slideIndex = x.length} ;
326 for (i = 0; i < x.length; i++) {
327 x[i].style.display = "none";
328 }
329 x[slideIndex-1].style.display = "block";
330 }
331 </script>
332 </body>
333 </html>
334