@@ -0,0 +1,2 | |||||
|
1 | <div id='error_pow' class="d-flex flex-row"></div> | |||
|
2 | {% asset 'static/js/error/style_error.js' %} |
@@ -0,0 +1,13 | |||||
|
1 | <div class="card-body right-dashboard-item"> | |||
|
2 | <div class="row w-100"> | |||
|
3 | <div class="col pt-3"> | |||
|
4 | {#<label for="textarea_ch0" class="label-title-ch d-block text-center w-100">CH0</label>#} | |||
|
5 | <label for="textarea_ch0">CH0</label> | |||
|
6 | <textarea id="textarea_ch0" class="form-control mb-3" rows="8" style="width: 100%;"></textarea> | |||
|
7 | {#<label for="textarea_ch1" class="label-title-ch d-block text-center w-100">CH1</label>#} | |||
|
8 | <label for="textarea_ch1" >CH1</label> | |||
|
9 | <textarea id="textarea_ch1" class="form-control mb-3" rows="8" style="width: 100%;"></textarea> | |||
|
10 | </div> | |||
|
11 | </div> | |||
|
12 | </div> | |||
|
13 | {% asset 'static/js/logs/style_logs.js' %} |
@@ -0,0 +1,11 | |||||
|
1 | {% asset 'static/css/map/leaflet.css' %} | |||
|
2 | {% asset 'static/css/map/style.css' %} | |||
|
3 | ||||
|
4 | <div id="turfMap" class="card-body right-dashboard-item"> | |||
|
5 | <div id="chart1"></div> | |||
|
6 | </div> | |||
|
7 | ||||
|
8 | {% asset 'static/js/map/popper.min.js' %} | |||
|
9 | {% asset 'static/js/map/leaflet.js' %} | |||
|
10 | {% asset 'static/js/map/turf.min.js' %} | |||
|
11 | {% asset 'static/js/map/style.js' %} |
@@ -0,0 +1,12 | |||||
|
1 | <div class="card-header d-flex justify-content-between align-items-center"> | |||
|
2 | <h5><i class="fa-solid fa-rotate"></i>Pedestal Position</h5> | |||
|
3 | <div> | |||
|
4 | <button type="button" id="toggle-pos-primary" class="btn btn-outline-primary" data-mdb-ripple-init data-mdb-ripple-color="dark">Azimuth</button> | |||
|
5 | <button type="button" id="toggle-pos-danger" class="btn btn-outline-danger" data-mdb-ripple-init data-mdb-ripple-color="dark">Elevation</button> | |||
|
6 | </div> | |||
|
7 | </div> | |||
|
8 | <div class="card-body left-dashboard-item"> | |||
|
9 | <div id='indicator-pos'class="additionalContent"></div> | |||
|
10 | <div id='plot-pos' class="additionalContent"></div> | |||
|
11 | </div> | |||
|
12 | {% asset 'static/js/plots/style_position.js' %} |
@@ -0,0 +1,12 | |||||
|
1 | <div class="card-header d-flex justify-content-between align-items-center"> | |||
|
2 | <h5><i class="fa-solid fa-bolt"></i>SSPA's Power</h5> | |||
|
3 | <div> | |||
|
4 | <button type="button" id="toggle-pow-primary" class="btn btn-outline-primary" data-mdb-ripple-init data-mdb-ripple-color="dark">Power A</button> | |||
|
5 | <button type="button" id="toggle-pow-danger" class="btn btn-outline-danger" data-mdb-ripple-init data-mdb-ripple-color="dark">Power B</button> | |||
|
6 | </div> | |||
|
7 | </div> | |||
|
8 | <div class="card-body left-dashboard-item"> | |||
|
9 | <div id='indicator-pow'class="additionalContent"></div> | |||
|
10 | <div id='plot-pow' class="additionalContent"></div> | |||
|
11 | </div> | |||
|
12 | {% asset 'static/js/plots/style_power.js' %} |
@@ -0,0 +1,12 | |||||
|
1 | <div class="card-header d-flex justify-content-between align-items-center"> | |||
|
2 | <h5><i class="fa-solid fa-gauge-high"></i>Pedestal Speed</h5> | |||
|
3 | <div> | |||
|
4 | <button type="button" id="toggle-vel-primary" class="btn btn-outline-primary" data-mdb-ripple-init data-mdb-ripple-color="dark">AZ Speed</button> | |||
|
5 | <button type="button" id="toggle-vel-danger" class="btn btn-outline-danger" data-mdb-ripple-init data-mdb-ripple-color="dark">EL Speed</button> | |||
|
6 | </div> | |||
|
7 | </div> | |||
|
8 | <div class="card-body left-dashboard-item"> | |||
|
9 | <div id='indicator-vel'class="additionalContent"></div> | |||
|
10 | <div id='plot-vel' class="additionalContent"></div> | |||
|
11 | </div> | |||
|
12 | {% asset 'static/js/plots/style_velocity.js' %} |
@@ -1,68 +1,94 | |||||
1 | {% extends "bootstrap/base.html" %} |
|
1 | <!DOCTYPE html> | |
2 | {% block title %}SOPHY monitor{% endblock %} |
|
2 | <html lang="en"> | |
|
3 | <head> | |||
|
4 | <meta charset="UTF-8"> | |||
|
5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |||
|
6 | <title>SOPHy monitor</title> | |||
|
7 | <link rel="shortcut icon" href="static/css/logo/igp.ico"> | |||
|
8 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |||
|
9 | {% asset 'static/css/bootstrap.min.css' %} | |||
|
10 | {% asset 'static/css/style.css' %} | |||
3 |
|
11 | |||
4 | {% block styles %} |
|
12 | {% asset 'static/js/jquery-3.5.1.slim.min.js' %} | |
5 | {{ super() }} |
|
13 | {% asset 'static/js/bootstrap.min.js' %} | |
6 | {% endblock %} |
|
14 | {% asset 'static/js/plots/plotly-latest.min.js' %} | |
7 |
|
15 | {% asset 'static/js/socket.io.min.js' %} | ||
8 | {% block scripts %} |
|
16 | {% asset 'static/js/style.js' %} | |
9 | {{ super() }} |
|
17 | </head> | |
10 | <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.min.js"></script> |
|
18 | <body> | |
11 | <script type="text/javascript" charset="utf-8"> |
|
19 | <div class="container-fluid"> | |
12 | $(document).ready(function() { |
|
20 | <div class="row"> | |
13 | var socket = io.connect('http://' + document.domain + ':' + location.port); |
|
21 | <div class="col-lg-12"> | |
14 |
|
22 | <div class="d-flex justify-content-between align-items-center mb-3"> | ||
15 | socket.on('connect', function(data) { |
|
23 | <div class="d-flex justify-content-center"><a href="https://www.gob.pe/igp"> | |
16 | console.log('Connecting... OK'); |
|
24 | <img src="static/css/logo/igp.png" alt="IGP"> | |
17 | }) |
|
25 | </a> | |
18 | socket.on('mqtt_message', function(data) { |
|
26 | <h1 class='ml-2'>SOPHy monitor</h1></div> | |
19 | console.log(data.topic); |
|
27 | {% snippet 'error.html'%} | |
20 | if (data['topic'].includes('rawch0')) { |
|
28 | </div> | |
21 | var payload = JSON.parse(data.payload); |
|
29 | </div> | |
22 | console.log(payload); |
|
|||
23 | } |
|
|||
24 | else if (data['topic'].includes('rawch1')) { |
|
|||
25 | var payload = JSON.parse(data.payload); |
|
|||
26 | console.log(payload); |
|
|||
27 | } |
|
|||
28 | else{} |
|
|||
29 | }) |
|
|||
30 | }); |
|
|||
31 |
|
||||
32 | </script> |
|
|||
33 | {% endblock %} |
|
|||
34 |
|
||||
35 | {% block content %} |
|
|||
36 | <div class="container-fluid"> |
|
|||
37 | <div class="row"> |
|
|||
38 | <div class="col-xs-12"> |
|
|||
39 | <h1>SOPHy monitor</h1> |
|
|||
40 | </div> |
|
|||
41 | </div> |
|
|||
42 | <div class="row"> |
|
|||
43 | <!--Messages--> |
|
|||
44 | <div class="col-xs-12"> |
|
|||
45 | <div class="panel panel-default"> |
|
|||
46 | <div class="panel-heading"> |
|
|||
47 | <h3 class="panel-title">MQTT</h3> |
|
|||
48 | </div> |
|
30 | </div> | |
49 |
<div class=" |
|
31 | <div class="row"> | |
50 |
<div class="col- |
|
32 | <div class="col-lg-8"> | |
51 |
<div class=" |
|
33 | <div class="card"> | |
52 | <div class="form-horizontal"> |
|
34 | {% snippet 'position.html' %} | |
53 |
<div |
|
35 | </div> | |
54 |
|
|
36 | <div class="card"> | |
55 | <label for="mqtt_acq">Log Message</label> |
|
37 | {% snippet 'velocity.html' %} | |
56 | <textarea id="mqtt_acq" class="form-control" rows=10></textarea> |
|
38 | </div> | |
57 |
|
|
39 | <div class="card"> | |
|
40 | {% snippet 'power.html' %} | |||
58 | </div> |
|
41 | </div> | |
59 |
|
|
42 | </div> | |
60 |
< |
|
43 | <div class="col-lg-4"> | |
61 |
< |
|
44 | <div class="card"> | |
|
45 | <div class="card-header"> | |||
|
46 | <h5><i class="fa-regular fa-folder"></i>Experiment Name</h5> | |||
|
47 | </div> | |||
|
48 | <div class="card-body right-dashboard-item"> | |||
|
49 | <div id="experiment_name"><h5 class='pt-2'>{{ experiment_name }}</h5></div> | |||
|
50 | </div> | |||
|
51 | {% asset 'static/js/name/style_name.js' %} | |||
|
52 | </div> | |||
|
53 | <div class="card"> | |||
|
54 | <div class="card-header"> | |||
|
55 | <h5><i class="fa-regular fa-map"></i>Locations</h5> | |||
|
56 | </div> | |||
|
57 | {% snippet 'map.html' %} | |||
|
58 | </div> | |||
|
59 | <div class="card"> | |||
|
60 | <div class="card-header"> | |||
|
61 | <h5><i class="fa-solid fa-cloud"></i>Parameters</h5> | |||
|
62 | </div> | |||
|
63 | <div class="card-body right-dashboard-item"> | |||
|
64 | {% set parameters_label = {'Z':'reflectivity', | |||
|
65 | 'W':'spectral_width', | |||
|
66 | 'V': 'velocity', | |||
|
67 | 'S': 'power', | |||
|
68 | 'P': 'phi_dp', | |||
|
69 | 'D': 'zdr', | |||
|
70 | 'R': 'rho_hv'} %} | |||
|
71 | ||||
|
72 | {% if parameters is string %} | |||
|
73 | <div id="parameters"><h5 class='pt-2'>{{ parameters }}</h5></div> | |||
|
74 | {% else %} | |||
|
75 | <div id="parameters" class="row w-100 d-flex justify-content-center"> | |||
|
76 | {% for parameter in parameters %} | |||
|
77 | <a href="https://www.igp.gob.pe/observatorios/radio-observatorio-jicamarca/realtime/plot/400/{{parameters_label[parameter]}}" class="btn btn-outline-primary btn m-2" data-mdb-ripple-init data-mdb-ripple-color="dark" target="_blank">{{parameters_label[parameter]|replace('_', ' ')|title}}</a> | |||
|
78 | {% endfor %} | |||
|
79 | </div> | |||
|
80 | {% endif %} | |||
|
81 | </div> | |||
|
82 | {% asset 'static/js/parameters/style_parameters.js' %} | |||
|
83 | </div> | |||
|
84 | <div class="card"> | |||
|
85 | <div class="card-header"> | |||
|
86 | <h5><i class="fa-solid fa-filter"></i>Rx Logs</h5> | |||
|
87 | </div> | |||
|
88 | {% snippet 'logs.html' %} | |||
|
89 | </div> | |||
|
90 | </div> | |||
62 | </div> |
|
91 | </div> | |
63 |
|
|
92 | </div> | |
64 | </div> |
|
93 | </body> | |
65 | </div> |
|
94 | </html> | |
66 | </div> |
|
|||
67 | {{debug}} |
|
|||
68 | {% endblock %} No newline at end of file |
|
General Comments 0
You need to be logged in to leave comments.
Login now