Blame view

web/view/home.html.jinja2 7.97 KB
9390ec89   Goutte   Initial experimen...
1
2
3
4
5
6
{% extends 'layout.html.jinja2' %}
{% set menu_section = 'home' %}
{% block title %}Home{% endblock %}

{% block content %}

4cf497e0   Goutte   Make the targets ...
7
8
9
10
11
12
13
14
15
16
{% macro target_button(target) -%}
    <img width="64px" height="64px"
         src="{{ static('img/target/'~target.slug~'_128.png') }}"
         title="{{ target.title }}"
         alt="{{ target.name }}"
         class="target {{ 'locked' if target.locked else 'active' }}"
         data-target-slug="{{ target.slug }}"
    >
{%- endmacro %}

f6ed8d85   Goutte   Rework layout as ...
17
18
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">

f6ed8d85   Goutte   Rework layout as ...
19
  <div class="mdl-layout__drawer">
ae0aa7d2   Goutte   Add an x axis lab...
20
    <span class="mdl-layout-title">Planets</span>
f6ed8d85   Goutte   Rework layout as ...
21

4cf497e0   Goutte   Make the targets ...
22
23
24
    <section class="orbiters_filters">
{% for target in planets %}
      {{ target_button(target) }}
a79c5268   Goutte   Add probes and co...
25
{% endfor %}
c42fea3a   Goutte   Rework the CSS wi...
26
    </section>
a79c5268   Goutte   Add probes and co...
27
28
29
30

    <br>
    <hr class="clear">

4cf497e0   Goutte   Make the targets ...
31
    <span class="mdl-layout-title">Probes &amp; Comets</span>
a79c5268   Goutte   Add probes and co...
32

4cf497e0   Goutte   Make the targets ...
33
34
35
    <section class="orbiters_filters">
{% for target in probes %}
      {{ target_button(target) }}
a79c5268   Goutte   Add probes and co...
36
{% endfor %}
4cf497e0   Goutte   Make the targets ...
37
38
{% for target in comets %}
      {{ target_button(target) }}
a79c5268   Goutte   Add probes and co...
39
40
41
{% endfor %}
    </section>

b550c2b0   Goutte   Rework the home s...
42
    <br>
c42fea3a   Goutte   Rework the CSS wi...
43
    <hr class="clear">
b550c2b0   Goutte   Rework the home s...
44
45
46
47

    <span class="mdl-layout-title">Parameters</span>

    <nav id="parameters" class="mdl-navigation">
8cb213b9   Goutte   Clean up, and pre...
48
      {# todo: generate this from config #}
b7fe650c   Goutte   Misc bundle of ol...
49
50
51
52
53
      <a class="mdl-navigation__link parameter active" data-ts-slug="pdyn" href="#">Dynamic Pressure</a>
      <a class="mdl-navigation__link parameter" data-ts-slug="magn" href="#">B Tangential</a>
      <a class="mdl-navigation__link parameter" data-ts-slug="vlen" href="#">Velocity</a>
      <a class="mdl-navigation__link parameter" data-ts-slug="temp" href="#">Temperature</a>
      <a class="mdl-navigation__link parameter" data-ts-slug="dens" href="#">Density</a>
08569a6b   Goutte   Add a zooming bru...
54
      <a class="mdl-navigation__link parameter" data-ts-slug="angl" href="#">Angle Target-Sun-Earth</a>
b550c2b0   Goutte   Rework the home s...
55
56
    </nav>

a4a9ef03   Goutte   Cache generated C...
57
58
59
60
61
62
63
64
65
66
    <div class="mdl-layout-spacer"></div>

    <main class="mdl-layout__content">
      <div class="page-content" style="text-align:center;font-style:italic;">
        <p>
          {{ visits }} visits since 2017
        </p>
      </div>
    </main>

c42fea3a   Goutte   Rework the CSS wi...
67
  </div>
b7fe650c   Goutte   Misc bundle of ol...
68
  <main id="plots_wrapper" class="mdl-layout__content">
9390ec89   Goutte   Initial experimen...
69

b550c2b0   Goutte   Rework the home s...
70
71
72
73
74
75
76
77
78
    <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--4-col">
        <section id="orbits"></section>
      </div>
      <div class="mdl-cell mdl-cell--8-col">
        <section id="time_series"></section>
      </div>
    </div>

ae0aa7d2   Goutte   Add an x axis lab...
79
{#    <div class="loader"><div class="hole"></div></div>#}
f6ed8d85   Goutte   Rework layout as ...
80
81
  </main>
</div>
9390ec89   Goutte   Initial experimen...
82
83
84
{% endblock %}


7d6dee0f   Goutte   Continue refacto ...
85

9390ec89   Goutte   Initial experimen...
86
87
{% block styles %}
  <style>
c42fea3a   Goutte   Rework the CSS wi...
88
    html, body {
f6ed8d85   Goutte   Rework layout as ...
89
90
{#      background-color: #322e3f;#}
{#      color: #e3e3e3;#}
c42fea3a   Goutte   Rework the CSS wi...
91
    }
18f38374   Goutte   Crisp edges for a...
92
93
    .axis path, .axis line {
      fill: none;
f6ed8d85   Goutte   Rework layout as ...
94
{#      stroke: #f4f4f4;#}
18f38374   Goutte   Crisp edges for a...
95
96
97
      shape-rendering: crispEdges;
      stroke-width: 1px;
    }
c42fea3a   Goutte   Rework the CSS wi...
98
    svg text {
f6ed8d85   Goutte   Rework layout as ...
99
{#      fill: #f4f4f4;#}
c42fea3a   Goutte   Rework the CSS wi...
100
    }
08569a6b   Goutte   Add a zooming bru...
101
102
103
    #time_series svg .brush .selection {
      fill: #efa02c;
      fill-opacity: 0.382;
908b4423   Goutte   Bump to a newer j...
104
    }
9390ec89   Goutte   Initial experimen...
105
106
107
108
109
    path.line {
      fill: none;
      stroke: steelblue;
      stroke-width: 1px;
    }
81c9b2e8   Goutte   Add the values to...
110
    circle.cursor-circle {
b550c2b0   Goutte   Rework the home s...
111
112
113
114
115
116
117
118
      fill: black;
      stroke: rgba(20, 20, 20, 0.48);
    }
    text.cursor-text {
{#      font-family: 'Ubuntu', 'Lucida Grande', 'Lucida Sans Unicode', 'Geneva', 'Verdana', sans-serif;#}
{#      font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace;#}
      font-family: "Ubuntu Mono", 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
      text-align: right;
81c9b2e8   Goutte   Add the values to...
119
120
121
    }
    text.cursor-text-shadow {
      stroke: white;
b550c2b0   Goutte   Rework the home s...
122
123
      stroke-width: 5px;
      opacity: 0.777
81c9b2e8   Goutte   Add the values to...
124
    }
c42fea3a   Goutte   Rework the CSS wi...
125
    path.orbit.orbit_section {
2d2af24b   Goutte   Add a basic orbit...
126
127
      fill: none;
      stroke: steelblue;
c42fea3a   Goutte   Rework the CSS wi...
128
129
130
131
132
133
134
135
      stroke-width: 3px;
    }
    ellipse.orbit.orbit_ellipse {
      fill: none;
      stroke: #a3a3a3;
      stroke-width: 1px;
      stroke-dasharray: 5px;
    }
4cf497e0   Goutte   Make the targets ...
136
    .orbiters_filters {
a79c5268   Goutte   Add probes and co...
137
138
      padding-left: 17px;
    }
4cf497e0   Goutte   Make the targets ...
139
    .orbiters_filters .target {
c42fea3a   Goutte   Rework the CSS wi...
140
      float: left;
4cf497e0   Goutte   Make the targets ...
141
      cursor: pointer;
c42fea3a   Goutte   Rework the CSS wi...
142
    }
4cf497e0   Goutte   Make the targets ...
143
    .orbiters_filters .target:not(.active) {
c42fea3a   Goutte   Rework the CSS wi...
144
145
146
147
148
149
      -webkit-filter: grayscale(100%);
         -moz-filter: grayscale(100%);
           -o-filter: grayscale(100%);
          -ms-filter: grayscale(100%);
              filter: grayscale(100%);
    }
4cf497e0   Goutte   Make the targets ...
150
151
152
    .orbiters_filters .target.locked {
      cursor: not-allowed;
    }
c42fea3a   Goutte   Rework the CSS wi...
153
154

    #orbits {
f6ed8d85   Goutte   Rework layout as ...
155
156
157
{#      background-image: url('{{ static('img/orbitals_background.png') }}');#}
{#      background-repeat: repeat;#}
{#      background-size: 42%;#}
2d2af24b   Goutte   Add a basic orbit...
158
    }
6f9a3852   Goutte   Hide time series ...
159
160
161
162
163
164
165

    #parameters .parameter {
      outline: 0;
    }
    #parameters .parameter.active {
      background-color: #c8d3e1;
    }
4cf497e0   Goutte   Make the targets ...
166
167
168
  #time_series svg {
    cursor: crosshair;
  }
9390ec89   Goutte   Initial experimen...
169
170
171
172
  </style>
{% endblock %}


7d6dee0f   Goutte   Continue refacto ...
173

9390ec89   Goutte   Initial experimen...
174
{% block scripts_footer %}
67243a0f   Goutte   Hotfix for d3js, ...
175
<script type="application/javascript" src="{{ static('js/vendor/d3.js') }}"></script>
a4a9ef03   Goutte   Cache generated C...
176
<script type="application/javascript" src="{{ static('js/vendor/moment.min.js') }}"></script>
438929a4   Goutte   Rewrite the orbit...
177
<script type="application/javascript" src="{{ static('js/swapp.js') }}"></script>
9390ec89   Goutte   Initial experimen...
178
179
<script type="application/javascript">

ae0aa7d2   Goutte   Add an x axis lab...
180
181
182
var configuration = {
  time_series_container: '#time_series',
  orbits_container: '#orbits',
f75faf5f   Goutte   WIP
183
  api : {
b60e7acd   Goutte   Rename "source" i...
184
      'data_for_interval': "{{ request.url_root }}<target>_<started_at>_<stopped_at>.csv"
f75faf5f   Goutte   WIP
185
  },
8bd715ad   Goutte   Use a pixel art i...
186
187
188
  sun: {
    img: '{{ static('img/sun_128.png') }}'
  },
b60e7acd   Goutte   Rename "source" i...
189
  targets : {
a21f81d9   Goutte   Enable Venus and ...
190
191
192
193
194
{% for target in targets if not target.locked%}
    {% if not loop.first %},{% endif %}
    '{{ target.slug }}': {
      slug: '{{ target.slug }}',
      name: '{{ target.name }}',
ae0aa7d2   Goutte   Add an x axis lab...
195
      active: true,
a21f81d9   Goutte   Enable Venus and ...
196
197
      orbit: { a: {{ target.orbit.semimajor }}, b: {{ target.orbit.semiminor }} },
      img: '{{ static('img/target/'~target.slug~'_128.png') }}'
ae0aa7d2   Goutte   Add an x axis lab...
198
    }
a21f81d9   Goutte   Enable Venus and ...
199
200
201
202
203
204
205
206
207
208
{% endfor %}
{#    jupiter: {#}
{#      slug: 'jupiter',#}
{#      name: 'Jupiter',#}
{#      active: true,#}
{#      minDate: '1990-01-01T01:30:00',#}
{#      maxDate: '2017-02-19T00:00:00',#}
{#      orbit: { a: 5.45516759, b: 4.95155843 },#}
{#      img: '{{ static('img/target/jupiter_128.png') }}'#}
{#    },#}
aba70d3a   Goutte   Refactor time ser...
209
  },
8cb213b9   Goutte   Clean up, and pre...
210
211
{# todo @Nicolas Define -somehow- error margins of each parameter ? #}
{# todo: generate this from config #}
aba70d3a   Goutte   Refactor time ser...
212
213
214
  parameters : [
    {
      id: 'pdyn',
4cf497e0   Goutte   Make the targets ...
215
      title: "Dyn. Pressure (nPa)",
b7fe650c   Goutte   Misc bundle of ol...
216
      active: true,
f75faf5f   Goutte   WIP
217
      unit: "nPa"
aba70d3a   Goutte   Refactor time ser...
218
219
220
    },
    {
      id: 'magn',
f75faf5f   Goutte   WIP
221
      title: "Magnetism (nT)",
b7fe650c   Goutte   Misc bundle of ol...
222
      active: false,
f75faf5f   Goutte   WIP
223
      unit: "nT"
aba70d3a   Goutte   Refactor time ser...
224
225
226
    },
    {
      id: 'vlen',
f75faf5f   Goutte   WIP
227
      title: "Velocity (km/s)",
b7fe650c   Goutte   Misc bundle of ol...
228
      active: false,
f75faf5f   Goutte   WIP
229
      unit: "km/s"
aba70d3a   Goutte   Refactor time ser...
230
231
232
    },
    {
      id: 'temp',
f75faf5f   Goutte   WIP
233
      title: "Temperature (K)",
b7fe650c   Goutte   Misc bundle of ol...
234
      active: false,
f75faf5f   Goutte   WIP
235
      unit: "K"
aba70d3a   Goutte   Refactor time ser...
236
237
238
    },
    {
      id: 'dens',
f75faf5f   Goutte   WIP
239
      title: "Density N (cm⁻³)",
b7fe650c   Goutte   Misc bundle of ol...
240
      active: false,
f75faf5f   Goutte   WIP
241
      unit: "cm⁻³"
aba70d3a   Goutte   Refactor time ser...
242
243
244
    },
    {
      id: 'angl',
08569a6b   Goutte   Add a zooming bru...
245
      title: "Angle T-S-E (deg)",
b7fe650c   Goutte   Misc bundle of ol...
246
      active: false,
f75faf5f   Goutte   WIP
247
      unit: "deg"
aba70d3a   Goutte   Refactor time ser...
248
249
    }
  ]
438929a4   Goutte   Rewrite the orbit...
250
};
9390ec89   Goutte   Initial experimen...
251
252

jQuery().ready(function($){
a975b380   Goutte   Clean up.
253
  // Space Weather app itself, handling data downloads and plot draws.
ae0aa7d2   Goutte   Add an x axis lab...
254
  var sw = new SpaceWeather(configuration);
fe3132dd   Goutte   Refactor even more.
255
  sw.init();
ae0aa7d2   Goutte   Add an x axis lab...
256

a975b380   Goutte   Clean up.
257
258
259
260
261
262
263
264
  // User Interface (except plots' interactivity, such as mouse hovers)
  var parameters = $('#parameters');
  var isLastParameterEnabled = function(parameter_id) {
    var s = 0;
    parameters.find('.parameter[data-ts-slug]').each(function(i,p) {
      if ($(p).hasClass('active')) s++;
    });
    return s < 2;
6f9a3852   Goutte   Hide time series ...
265
  };
4cf497e0   Goutte   Make the targets ...
266
267
268
269
270
271
272
  var isLastTargetEnabled = function(target_slug) {
    var s = 0;
    $(".orbiters_filters .target:not(.locked)").each(function(i,p) {
      if ($(p).hasClass('active')) s++;
    });
    return s < 2;
  };
a975b380   Goutte   Clean up.
273
  parameters.find(".parameter").click(function(e){
b7fe650c   Goutte   Misc bundle of ol...
274
275
276
277
    var switch_on = ! $(this).hasClass('active');
    var parameter_slug = $(this).attr('data-ts-slug');
    if (switch_on) {
      sw.enableParameter(parameter_slug);
a975b380   Goutte   Clean up.
278
279
      $(this).addClass('active');
    } else if ( ! isLastParameterEnabled(parameter_slug)) {
b7fe650c   Goutte   Misc bundle of ol...
280
      sw.disableParameter(parameter_slug);
a975b380   Goutte   Clean up.
281
      $(this).removeClass('active');
b7fe650c   Goutte   Misc bundle of ol...
282
    }
6f9a3852   Goutte   Hide time series ...
283
284
    return false;
  });
4cf497e0   Goutte   Make the targets ...
285
286
287
288
  $(".orbiters_filters .target:not(.locked)").click(function(e){
    var switch_on = ! $(this).hasClass('active');
    var target_slug = $(this).attr('data-target-slug');
    if (switch_on) {
b60e7acd   Goutte   Rename "source" i...
289
      sw.showTarget(target_slug);
4cf497e0   Goutte   Make the targets ...
290
291
      $(this).addClass('active');
    } else if ( ! isLastTargetEnabled(target_slug)) {
b60e7acd   Goutte   Rename "source" i...
292
      sw.hideTarget(target_slug);
4cf497e0   Goutte   Make the targets ...
293
294
295
296
297
      $(this).removeClass('active');
    }
    return false;
  });

6f9a3852   Goutte   Hide time series ...
298

9390ec89   Goutte   Initial experimen...
299
300
});
</script>
9390ec89   Goutte   Initial experimen...
301
{% endblock %}