##// END OF EJS Templates
realtime_web
RSS
New template, clean code, workig for realtime
New template, clean code, workig for realtime
Juan C. Espinoza - - Load All Authors

File last commit:

r21:dc5f8680b6e1
r21:dc5f8680b6e1
Show More
rti.html
86 lines | 2.7 KiB | text/html | HtmlDjangoLexer
/ plotter / templates / rti.html
History | Source | Raw |Copy content |Copy permalink
Juan C. Espinoza
New template, clean code, workig for realtime
 r21 {% extends 'plot.html' %} {% load static %} {% load bootstrap4 %} {% block content %}
<div class="container">
<div class="row justify-content-md-center">
<div id="loader" class="loader mt-5"></div></div>
jespinoza
First version RTI, Spectra, Noise + Docker
 r0 <div id="plot"></div>
Juan C. Espinoza
New template, clean code, workig for realtime
 r21 </div>
Developer
New version with cards and status alerts
 r11 {% 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 %}
Juan C. Espinoza
New template, clean code, workig for realtime
 r21 <script src="{% static 'js/jroplots.js' %}"></script>
jespinoza
First version RTI, Spectra, Noise + Docker
 r0 <script>
Developer
New version with cards and status alerts
 r11 /* This conditional is used to know if we have to setup the data
or just update the last data*/
Juan C. Espinoza
New template, clean code, workig for realtime
 r21 $("#loader").css("display", "block");
{% if realtime %}
var socket = new WebSocket('ws://' + window.location.host + '/{{code}}/{{plot}}/');
{% else %}
var socket = new WebSocket('ws://' + window.location.host + '/{{code}}/{{plot}}/?id={{id}}');
{% endif %}
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();
}
Developer
New version with cards and status alerts
 r11 let flag = true;
function plot(data) {
if (flag === true) {
flag = false;
plt = new PcolorBuffer({
div: 'plot',
data: data,
key: 'rti',
Juan C. Espinoza
New template, clean code, workig for realtime
 r21 props: { title: '{{title}}', zmin: 10, zmax: 35, throttle: 30, timespan: 12, colormap: 'Jet' },
Developer
New version with cards and status alerts
 r11 });
return true;
} else {
plt.update(data);
return false;
jespinoza
First version RTI, Spectra, Noise + Docker
 r0 }
Developer
New version with cards and status alerts
 r11 }
Juan C. Espinoza
New template, clean code, workig for realtime
 r21 /*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);
});
jespinoza
First version RTI, Spectra, Noise + Docker
 r0
Developer
New version with cards and status alerts
 r11 </script> {% endblock script %}