##// END OF EJS Templates
realtime_web
RSS
Test Version
Test Version
Juan C. Espinoza - - Load All Authors

File last commit:

r22:3d86891def25
r22:3d86891def25
Show More
plot.html
91 lines | 2.8 KiB | text/html | HtmlDjangoLexer
/ plotter / templates / plot.html
History | Annotation | Raw |Copy content |Copy permalink
{% extends 'base.html' %} {% load static %} {% load bootstrap4 %} {% block content %}
<div class="p-4 text-igp">
<h3>{{title}} <small> {{subtitle}}</small></h3>
</div>
<div class="row justify-content-center">
<div id="loader" class="loader mt-5"></div>
</div>
<div id="plot" {%if plot == 'spc' %}class="row"{%endif%}></div>
{% endblock content %} {% block modal %}
<!-- Modal -->
<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>
{% 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);
console.log(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,
key: '{{plot}}',
props: { throttle: 30, timespan: 12, colormap: 'Jet' },
});
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 %}