Blame view

web/view/home.html.jinja2 6.01 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 %}

f6ed8d85   Goutte   Rework layout as ...
7
8
9
10
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">


  <div class="mdl-layout__drawer">
b550c2b0   Goutte   Rework the home s...
11
    <span class="mdl-layout-title">Orbiters</span>
f6ed8d85   Goutte   Rework layout as ...
12

c42fea3a   Goutte   Rework the CSS wi...
13
    <section id="orbiters_filters">
ebf98c26   Goutte   Update orbiters' ...
14
15
16
      <img title="Jupiter" src="{{ static('img/planet/jupiter_128.png') }}" width="64px" height="64px" alt="Jupiter">
      <img title="Earth (coming soon)" src="{{ static('img/planet/earth_128.png') }}" width="64px" height="64px" alt="Earth (locked)" class="locked">
      <img title="Mars (coming soon)" src="{{ static('img/planet/mars_128.png') }}" width="64px" height="64px" alt="Mars (locked)" class="locked">
c42fea3a   Goutte   Rework the CSS wi...
17
    </section>
b550c2b0   Goutte   Rework the home s...
18
    <br>
c42fea3a   Goutte   Rework the CSS wi...
19
    <hr class="clear">
b550c2b0   Goutte   Rework the home s...
20
21
22
23

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

    <nav id="parameters" class="mdl-navigation">
6f9a3852   Goutte   Hide time series ...
24
25
26
      <a class="mdl-navigation__link parameter active" data-ts-slug="pdyn" href="">Dynamic Pressure</a>
      <a class="mdl-navigation__link parameter active" data-ts-slug="magn" href="">Magnetism</a>
      <a class="mdl-navigation__link parameter active" data-ts-slug="vlen" href="">Velocity</a>
b550c2b0   Goutte   Rework the home s...
27
28
29
30
31
32
33
34
    </nav>

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

    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">How is this done?</a>
      <a class="mdl-navigation__link" href="">More...</a>
    </nav>
c42fea3a   Goutte   Rework the CSS wi...
35
  </div>
b550c2b0   Goutte   Rework the home s...
36
37
  <main class="mdl-layout__content">

9390ec89   Goutte   Initial experimen...
38

b550c2b0   Goutte   Rework the home s...
39
40
41
42
43
44
45
46
47
48
    <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>

    <div class="loader"><div class="hole"></div></div>
f6ed8d85   Goutte   Rework layout as ...
49
50
51
52
  </main>
</div>


9390ec89   Goutte   Initial experimen...
53
54
55
56
57
{% endblock %}


{% block styles %}
  <style>
c42fea3a   Goutte   Rework the CSS wi...
58
    html, body {
f6ed8d85   Goutte   Rework layout as ...
59
60
{#      background-color: #322e3f;#}
{#      color: #e3e3e3;#}
c42fea3a   Goutte   Rework the CSS wi...
61
    }
18f38374   Goutte   Crisp edges for a...
62
63
    .axis path, .axis line {
      fill: none;
f6ed8d85   Goutte   Rework layout as ...
64
{#      stroke: #f4f4f4;#}
18f38374   Goutte   Crisp edges for a...
65
66
67
      shape-rendering: crispEdges;
      stroke-width: 1px;
    }
c42fea3a   Goutte   Rework the CSS wi...
68
    svg text {
f6ed8d85   Goutte   Rework layout as ...
69
{#      fill: #f4f4f4;#}
c42fea3a   Goutte   Rework the CSS wi...
70
    }
9390ec89   Goutte   Initial experimen...
71
72
73
74
75
    path.line {
      fill: none;
      stroke: steelblue;
      stroke-width: 1px;
    }
81c9b2e8   Goutte   Add the values to...
76
    circle.cursor-circle {
b550c2b0   Goutte   Rework the home s...
77
78
79
80
81
82
83
84
      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...
85
86
87
    }
    text.cursor-text-shadow {
      stroke: white;
b550c2b0   Goutte   Rework the home s...
88
89
      stroke-width: 5px;
      opacity: 0.777
81c9b2e8   Goutte   Add the values to...
90
    }
c42fea3a   Goutte   Rework the CSS wi...
91
    path.orbit.orbit_section {
2d2af24b   Goutte   Add a basic orbit...
92
93
      fill: none;
      stroke: steelblue;
c42fea3a   Goutte   Rework the CSS wi...
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
      stroke-width: 3px;
    }
    ellipse.orbit.orbit_ellipse {
      fill: none;
      stroke: #a3a3a3;
      stroke-width: 1px;
      stroke-dasharray: 5px;
    }
    #orbiters_filters img {
      float: left;
    }
    #orbiters_filters img.locked {
      -webkit-filter: grayscale(100%);
         -moz-filter: grayscale(100%);
           -o-filter: grayscale(100%);
          -ms-filter: grayscale(100%);
              filter: grayscale(100%);
    }

    #orbits {
f6ed8d85   Goutte   Rework layout as ...
114
115
116
{#      background-image: url('{{ static('img/orbitals_background.png') }}');#}
{#      background-repeat: repeat;#}
{#      background-size: 42%;#}
2d2af24b   Goutte   Add a basic orbit...
117
    }
6f9a3852   Goutte   Hide time series ...
118
119
120
121
122
123
124

    #parameters .parameter {
      outline: 0;
    }
    #parameters .parameter.active {
      background-color: #c8d3e1;
    }
9390ec89   Goutte   Initial experimen...
125
126
127
128
129
  </style>
{% endblock %}


{% block scripts_footer %}
84cb553d   Goutte   Move to material ...
130
<script type="application/javascript" src="{{ static('js/vendor/d3.min.js') }}"></script>
438929a4   Goutte   Rewrite the orbit...
131
<script type="application/javascript" src="{{ static('js/swapp.js') }}"></script>
9390ec89   Goutte   Initial experimen...
132
133
<script type="application/javascript">

c42fea3a   Goutte   Rework the CSS wi...
134
135
// Sorry, no ES6. Feel free to refactor.

438929a4   Goutte   Rewrite the orbit...
136
137
var orbiters = {
  jupiter: {
6f9a3852   Goutte   Hide time series ...
138
    name: 'Jupiter',
438929a4   Goutte   Rewrite the orbit...
139
    orbit: { a: 5.45516759, b: 4.95155843 },
6f9a3852   Goutte   Hide time series ...
140
    img: '{{ static('img/planet/jupiter_128.png') }}'
438929a4   Goutte   Rewrite the orbit...
141
142
  }
};
9390ec89   Goutte   Initial experimen...
143
144

jQuery().ready(function($){
438929a4   Goutte   Rewrite the orbit...
145
146
147
  var timeSeries = [];
  var orbits;

6f9a3852   Goutte   Hide time series ...
148
  d3.csv('{{ url_for('get_csv') }}', function(csv){
9390ec89   Goutte   Initial experimen...
149
    var timeFormat = d3.timeParse('%Y-%m-%dT%H:%M:%S%Z');
c42fea3a   Goutte   Rework the CSS wi...
150
    var data = {'pdyn': [], 'magn': [], 'vlen': []};
9390ec89   Goutte   Initial experimen...
151
152
153
    csv.forEach(function (d) {
      data['pdyn'].push({x: timeFormat(d['time']), y: parseFloat(d['pdyn'])});
      data['magn'].push({x: timeFormat(d['time']), y: parseFloat(d['magn'])});
c42fea3a   Goutte   Rework the CSS wi...
154
      data['vlen'].push({x: timeFormat(d['time']), y: parseFloat(d['vlen'])});
9390ec89   Goutte   Initial experimen...
155
    });
438929a4   Goutte   Rewrite the orbit...
156

6f9a3852   Goutte   Hide time series ...
157
    var container = '#time_series';
438929a4   Goutte   Rewrite the orbit...
158
    timeSeries.push(new TimeSeries(
6f9a3852   Goutte   Hide time series ...
159
        'pdyn', 'Dynamic Pressure (nPa)', data['pdyn'], container
438929a4   Goutte   Rewrite the orbit...
160
161
    ));
    timeSeries.push(new TimeSeries(
6f9a3852   Goutte   Hide time series ...
162
        'magn', 'Magnetism (nT)', data['magn'], container
438929a4   Goutte   Rewrite the orbit...
163
164
    ));
    timeSeries.push(new TimeSeries(
6f9a3852   Goutte   Hide time series ...
165
        'vlen', 'Velocity (km/s)', data['vlen'], container
438929a4   Goutte   Rewrite the orbit...
166
167
    ));

b550c2b0   Goutte   Rework the home s...
168
169
170
171
172
173
174
175
176
177
    // move outside after promises
    timeSeries.forEach(function(ts){
      ts.options['onMouseOver'] = function() {
        timeSeries.forEach(function(ts2){ ts2.showCursor(); });
      };
      ts.options['onMouseOut'] = function() {
        timeSeries.forEach(function(ts2){ ts2.hideCursor(); });
      };
      ts.options['onMouseMove'] = function(t) {
        timeSeries.forEach(function(ts2){ ts2.moveCursor(t); });
ebf98c26   Goutte   Update orbiters' ...
178
        if (orbits != null) orbits.moveToDate(t);
b550c2b0   Goutte   Rework the home s...
179
180
181
      };
    });

9390ec89   Goutte   Initial experimen...
182
  });
438929a4   Goutte   Rewrite the orbit...
183

6f9a3852   Goutte   Hide time series ...
184
  d3.csv('{{ url_for('get_astral_coordinates_csv') }}', function(csv){
ebf98c26   Goutte   Update orbiters' ...
185
    var timeFormat = d3.timeParse('%Y-%m-%dT%H:%M:%S%Z');
2d2af24b   Goutte   Add a basic orbit...
186
187
    var data = [];
    csv.forEach(function (d) {
ebf98c26   Goutte   Update orbiters' ...
188
      data.push({t: timeFormat(d['time']), x: parseFloat(d['x_hci']), y: parseFloat(d['y_hci'])});
2d2af24b   Goutte   Add a basic orbit...
189
    });
438929a4   Goutte   Rewrite the orbit...
190
191
192
193

    orbits = new Orbits(orbiters, data, '#orbits');
  });

6f9a3852   Goutte   Hide time series ...
194
195
196
197
198
199
200
201
202
203
  var toggleTimeSeries = function(slug) {
    $('#time_series .'+slug).toggleClass('hidden');
  };

  $("#parameters .parameter").click(function(e){
    $(this).toggleClass('active');
    toggleTimeSeries($(this).attr('data-ts-slug'));
    return false;
  });

438929a4   Goutte   Rewrite the orbit...
204
205
206
  window.addEventListener('resize', function() {
    timeSeries.forEach(function(ts){ ts.resize(); });
    orbits.resize();
2d2af24b   Goutte   Add a basic orbit...
207
208
  });

9390ec89   Goutte   Initial experimen...
209
210
211
212
});
</script>

{% endblock %}