Blame view

web/view/home.html.jinja2 4.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
11
12
13
14
15
16
17
18
19
20
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">


  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">

84cb553d   Goutte   Move to material ...
21
22
<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--4-col">
c42fea3a   Goutte   Rework the CSS wi...
23
24
25
26
27
28
29
30
31
32
    <section id="orbits"></section>
    <section id="orbiters_filters">
      <img src="{{ static('img/planet/jupiter_128.png') }}" width="64px" height="64px" alt="Jupiter">
      <img src="{{ static('img/planet/earth_128.png') }}" width="64px" height="64px" alt="Earth (locked)" class="locked">
      <img src="{{ static('img/planet/mars_128.png') }}" width="64px" height="64px" alt="Mars (locked)" class="locked">
    </section>
    <hr class="clear">
    <p>Measures</p>
    <p>Options</p>
  </div>
84cb553d   Goutte   Move to material ...
33
  <div class="mdl-cell mdl-cell--8-col">
c42fea3a   Goutte   Rework the CSS wi...
34
35
36
    <section id="time_series"></section>
  </div>
</div>
9390ec89   Goutte   Initial experimen...
37

f6ed8d85   Goutte   Rework layout as ...
38
39
40
41
  </main>
</div>


9390ec89   Goutte   Initial experimen...
42
43
44
45
46
{% endblock %}


{% block styles %}
  <style>
c42fea3a   Goutte   Rework the CSS wi...
47
    html, body {
f6ed8d85   Goutte   Rework layout as ...
48
49
{#      background-color: #322e3f;#}
{#      color: #e3e3e3;#}
c42fea3a   Goutte   Rework the CSS wi...
50
    }
18f38374   Goutte   Crisp edges for a...
51
52
    .axis path, .axis line {
      fill: none;
f6ed8d85   Goutte   Rework layout as ...
53
{#      stroke: #f4f4f4;#}
18f38374   Goutte   Crisp edges for a...
54
55
56
      shape-rendering: crispEdges;
      stroke-width: 1px;
    }
c42fea3a   Goutte   Rework the CSS wi...
57
    svg text {
f6ed8d85   Goutte   Rework layout as ...
58
{#      fill: #f4f4f4;#}
c42fea3a   Goutte   Rework the CSS wi...
59
    }
9390ec89   Goutte   Initial experimen...
60
61
62
63
64
    path.line {
      fill: none;
      stroke: steelblue;
      stroke-width: 1px;
    }
c42fea3a   Goutte   Rework the CSS wi...
65
    path.orbit.orbit_section {
2d2af24b   Goutte   Add a basic orbit...
66
67
      fill: none;
      stroke: steelblue;
c42fea3a   Goutte   Rework the CSS wi...
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
      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 ...
88
89
90
{#      background-image: url('{{ static('img/orbitals_background.png') }}');#}
{#      background-repeat: repeat;#}
{#      background-size: 42%;#}
2d2af24b   Goutte   Add a basic orbit...
91
    }
9390ec89   Goutte   Initial experimen...
92
93
94
95
96
  </style>
{% endblock %}


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

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

438929a4   Goutte   Rewrite the orbit...
103
104
105
106
107
108
109
var orbiters = {
  jupiter: {
    name: "Jupiter",
    orbit: { a: 5.45516759, b: 4.95155843 },
    img: "{{ static('img/planet/jupiter_128.png') }}"
  }
};
9390ec89   Goutte   Initial experimen...
110
111

jQuery().ready(function($){
438929a4   Goutte   Rewrite the orbit...
112
113
114
  var timeSeries = [];
  var orbits;

9390ec89   Goutte   Initial experimen...
115
116
  d3.csv("{{ url_for('get_csv') }}", function(csv){
    var timeFormat = d3.timeParse('%Y-%m-%dT%H:%M:%S%Z');
c42fea3a   Goutte   Rework the CSS wi...
117
    var data = {'pdyn': [], 'magn': [], 'vlen': []};
9390ec89   Goutte   Initial experimen...
118
119
120
    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...
121
      data['vlen'].push({x: timeFormat(d['time']), y: parseFloat(d['vlen'])});
9390ec89   Goutte   Initial experimen...
122
    });
438929a4   Goutte   Rewrite the orbit...
123
124
125
126
127
128
129
130
131
132
133
134

    var container = "#time_series";
    timeSeries.push(new TimeSeries(
        'Dynamic Pressure (nPa)', data['pdyn'], container
    ));
    timeSeries.push(new TimeSeries(
        'Magnetism (nT)', data['magn'], container
    ));
    timeSeries.push(new TimeSeries(
        'Velocity (km/s)', data['vlen'], container
    ));

9390ec89   Goutte   Initial experimen...
135
  });
438929a4   Goutte   Rewrite the orbit...
136

2d2af24b   Goutte   Add a basic orbit...
137
138
139
140
141
  d3.csv("{{ url_for('get_astral_coordinates_csv') }}", function(csv){
    var data = [];
    csv.forEach(function (d) {
      data.push({x: parseFloat(d['x_hci']), y: parseFloat(d['y_hci'])});
    });
438929a4   Goutte   Rewrite the orbit...
142
143
144
145
146
147
148

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

  window.addEventListener('resize', function() {
    timeSeries.forEach(function(ts){ ts.resize(); });
    orbits.resize();
2d2af24b   Goutte   Add a basic orbit...
149
150
  });

9390ec89   Goutte   Initial experimen...
151
152
153
154
});
</script>

{% endblock %}