From 46be17f66dedbfac06f17a0e07a69bad128842bb Mon Sep 17 00:00:00 2001
From: Tamas Gal <tgal@km3net.de>
Date: Mon, 26 Mar 2018 17:24:15 +0200
Subject: [PATCH] Templating plots
---
app/templates/base.html | 31 ++------------
app/templates/plots.html | 90 ++++++++++++----------------------------
2 files changed, 29 insertions(+), 92 deletions(-)
diff --git a/app/templates/base.html b/app/templates/base.html
index 234a9fe..11918cf 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -10,6 +10,8 @@
<link href="static/css/bootstrap.min.css" rel="stylesheet">
<link href="static/css/main.css" rel="stylesheet">
+ <script src="static/js/jquery-3.3.1.slim.min.js"></script>
+ <script src="static/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
@@ -44,37 +46,10 @@
</div>
</nav>
- <div class="container-fluid" id="plots">
- {% block plots %}{% endblock %}
- </div>
+ {% block plots %}{% endblock %}
- <script src="static/js/jquery-3.3.1.slim.min.js"></script>
- <script src="static/js/bootstrap.min.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
- setInterval(function(){
- //$("#dom_pings").attr("src", "plots/dom_pings.png?"+new Date().getTime());
- $("#dom_activity").attr("src", "plots/dom_activity.png?"+new Date().getTime());
- $("#dom_rates").attr("src", "plots/dom_rates.png?"+new Date().getTime());
- $("#pmtrates").attr("src", "plots/pmtrates.png?"+new Date().getTime());
- $("#hrv").attr("src", "plots/hrv.png?"+new Date().getTime());
- $("#yaw").attr("src", "plots/yaw_calib.png?"+new Date().getTime());
- $("#pitch").attr("src", "plots/pitch_calib.png?"+new Date().getTime());
- $("#roll").attr("src", "plots/roll_calib.png?"+new Date().getTime());
- //$("#dom_pings").attr("src", "plots/dom_pings.png?"+new Date().getTime());
- $("#k40").attr("src", "plots/k40.png?"+new Date().getTime());
- $("#trigger_rates").attr("src", "plots/trigger_rates.png?"+new Date().getTime());
- $("#trigger_rates_test").attr("src", "plots/trigger_rates_test.png?"+new Date().getTime());
- $("#hits_on_doms").attr("src", "plots/hits_on_doms.png?"+new Date().getTime());
- $("#triggered_hits_on_doms").attr("src", "plots/triggered_hits_on_doms.png?"+new Date().getTime());
- $("#ztplot").attr("src", "plots/ztplot.png?"+new Date().getTime());
- $("#single_rates").attr("src", "plots/single_rates.png?"+new Date().getTime());
- }, 45000);
-
- //$('#plots').on('mousemove', null, [$('#horizontal'), $('#vertical')],function(e){
- // e.data[1].css('left', e.offsetX==undefined?e.originalEvent.layerX:e.offsetX);
- // e.data[0].css('top', e.offsetY==undefined?e.originalEvent.layerY:e.offsetY);
- //});
$(function(){
setInterval(function(){
var divUtc = $('#divUTC');
diff --git a/app/templates/plots.html b/app/templates/plots.html
index 0a46786..1ce51c6 100644
--- a/app/templates/plots.html
+++ b/app/templates/plots.html
@@ -1,70 +1,32 @@
{% extends "base.html" %}
{% block plots %}
- <div class="row">
- <div class="col-md-6 plot-container">
- <img id="dom_activity" class="plot img-responsive" src="plots/dom_activity.png" />
- </div>
- <div class="col-md-6 plot-container">
- <img id="dom_rates" class="plot img-responsive" src="plots/dom_rates.png" />
- </div>
- </div>
-
- <div class="row">
- <div class="col-md-6 plot-container">
- <img id="pmtrates" class="plot img-responsive" src="plots/pmtrates.png" />
- </div>
- <div class="col-md-6 plot-container">
- <img id="hrv" class="plot img-responsive" src="plots/hrv.png" />
- </div>
- </div>
-
- <div class="row">
- <div class="col-md-12 col-sm-12 plot-container">
- <img id="trigger_rates" class="plot img-responsive" src="plots/trigger_rates.png" />
- </div>
- </div>
-
- <div class="row">
- <div class="col-md-12 col-sm-12 plot-container">
- <img id="trigger_rates_test" class="plot img-responsive" src="plots/trigger_rates_test.png" />
- </div>
- </div>
- <div class="row">
- <div class="col-md-6 plot-container">
- <!-- <img id="dom_pings" class="plot img-responsive" src="plots/dom_pings.png" /> //-->
- <!-- <img id="k40" class="plot img-responsive" src="plots/k40.png" /> //-->
- <img id="single_rates" class="plot img-responsive" src="plots/single_rates.png" />
- </div>
- <div class="col-md-6 plot-container">
- <img id="ztplot" class="plot img-responsive" src="plots/ztplot.png" />
- </div>
- </div>
-
- <div class="row">
- <div class="col-md-6 plot-container">
- <img id="hits_on_doms" class="plot img-responsive" src="plots/hits_on_doms.png" style="alpha: 0.2" />
- </div>
- <div class="col-md-6 plot-container">
- <img id="triggered_hits_on_doms" class="plot img-responsive" src="plots/triggered_hits_on_doms.png" style="alpha: 0.2" />
- </div>
+ <div class="container-fluid" id="plots">
+ {% for row in plots %}
+ <div class="row">
+ {% for plot in row %}
+ <div class="col-md-{{ (12/(row|length))|int }} plot-container">
+ <img id="{{ plot }}"
+ class="plot img-responsive"
+ src="plots/{{ plot }}.png"
+ alt="{{ plot }}"/>
+ </div>
+ {% endfor %}
+ </div>
+ {% endfor %}
+ </div>
+
+ <script type = "text/javascript">
+ $(document).ready(function(){
+ setInterval(function(){
+ {% for row in plots %}
+ {% for plot in row %}
+ $("#{{ plot }}").attr("src", "plots/{{ plot }}.png?"+new Date().getTime());
+ {% endfor %}
+ {% endfor %}
+ }, 45000);
+ });
+ </script>
- </div>
-
- <div class="row">
- <div class="col-md-12 plot-container">
- <img id="yaw" class="plot img-responsive" src="plots/yaw_calib.png" />
- </div>
- </div>
- <div class="row">
- <div class="col-md-12 plot-container">
- <img id="pitch" class="plot img-responsive" src="plots/pitch_calib.png" />
- </div>
- </div>
- <div class="row">
- <div class="col-md-12 plot-container">
- <img id="roll" class="plot img-responsive" src="plots/roll_calib.png" />
- </div>
- </div>
{% endblock %}
--
GitLab