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

File last commit:

r21:dc5f8680b6e1
r35:1d0c19b50218
Show More
spectra.html
83 lines | 2.5 KiB | text/html | HtmlDjangoLexer
/ plotter / templates / spectra.html
History | Annotation | Raw |Copy content |Copy permalink
{% extends 'base.html' %} {% load static %} {% load bootstrap4 %}{% block content %}
<div class="container">
<div id="plot" class="row"></div>
</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*/
{% if realtime %}
$("#loader").css("display", "block");
var socket = new WebSocket('ws://' + window.location.host + '/{{code}}/{{plot}}/');
socket.onopen = function open() {
console.log('WebSockets connection created.');
socket.send('{"date": "{{date}}" }');
};
socket.onmessage = function message(event) {
var data = JSON.parse(event.data);
console.log(data.time);
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();
}
{% endif %}
let flag = true;
function plot(data) {
// console.log(data['time']);
if (flag === true) {
flag = false;
spc = new Pcolor({
div: 'plot',
data: data,
props: { title: '{{title}}', zmin: 10, zmax: 30, colormap: 'Jet' },
});
return true;
} else {
spc.plot(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();
spc.restyle(values);
});
</script> {% endblock script %}