##// END OF EJS Templates
realtime_web
RSS
Fix utc time handling
Fix utc time handling
Juan C. Espinoza - - Load All Authors

File last commit:

r42:8983ffdbf90f
r44:74ffee4b5884
Show More
plot.html
104 lines | 3.0 KiB | text/html | HtmlDjangoLexer
/ plotter / templates / plot.html
History | Annotation | Raw |Copy content |Copy permalink
{% extends 'base.html' %} {% load static %} {% load bootstrap4 %}
{% block sidebar_content %}
<h5>{{name}}</h5>
<nav class="nav flex-column">
{% for plot in plots %}
<a class="nav-link" href="{% url 'url-plot' code plot.plot %}">{{plot.name}}</a>
{% endfor %}
</nav>
{% endblock %}
{% block content %}
<div class="row justify-content-center">
<div id="loader" class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div id="plot" {%if meta.metadata.type == 'pcolor' %}class="row"{%endif%}>
{% if image %}
<img id="image" class="img-fluid"/>
{% endif %}
</div>
{% endblock content %}
{% block modal %}
<!-- Modal -->
{% if setup_form %}
<div class="modal fade" id="setup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="myModalLabel">Setup plot</h4>
</div>
<div class="modal-body">
{% if code and plot %}
<form id="form_setup">
{% bootstrap_form setup_form layout='grid' size='small' %}
</form>
{% endif %}
</div>
<div class="modal-footer">
<button id="bt_update" type="button" class="btn btn-primary">Update</button>
</div>
</div>
</div>
</div>
{% endif %}
{% endblock modal%} {% block script %}
<script src="{% static 'js/jroplots.js' %}"></script>
<script>
/* This conditional is used to know if we have to setup the data
or just update the last data*/
$("#loader").css("display", "block");
{% if realtime %}
var socket = new WebSocket('ws://' + window.location.host + '/ws/realtime/{{code}}/{{plot}}/');
{% else %}
var socket = new WebSocket('ws://' + window.location.host + '/ws/database/{{code}}/{{plot}}/');
{% endif %}
socket.onopen = function open() {
console.log('WebSockets connection created: ' + socket.url);
socket.send('{{date}}')
};
socket.onmessage = function message(event) {
var data = JSON.parse(event.data);
if (data.interval == 0) {
$("#loader").removeClass("loader").addClass("no-data");
$("#loader").html("No data found");
} else {
var first = plot(data);
if (first == true) {
$("#loader").css("display", "none");
}
}
}
if (socket.readyState == WebSocket.OPEN) {
socket.onopen();
}
let flag = true;
function plot(data) {
if (flag === true) {
flag = false;
plt = new {{ fn_plot }} ({
div: 'plot',
data: data,
});
return true;
} else {
plt.update(data);
return false;
}
}
/*It is the button to make changes in my plot parameters defined in block modal*/
$("#bt_update").click(function () {
$("#setup").modal('hide');
var values = $("#form_setup").serializeArray();
plt.restyle(values);
});
</script> {% endblock script %}