def __str__(self):
return repr(self)
+ def to_dict(self):
+ return self.__dict__.copy()
+
@classmethod
def from_dict(cls, d):
o = Object()
self._current_values_last_call = -1E13
self._download_device_data_last_call = -1E13
super(PlotWebServer, self).__init__()
- self.route('/connected/device', callback = self._connected_device)
self.route('/list/devices', callback = self._list_devices)
self.route('/download/<device_id>', callback = self._download_device_data)
+ self.route('/status/<device_id>', callback = self._status_device)
self.route('/plot/<device_id>_history.<fileformat>', callback = self._plot_history)
self.route('/static/<filename:path>', callback = self._serve_static)
if self.debug: self.route('/debug', callback = self._debug_page)
self.route('/', callback = self._status_page)
def _atg(self, vals):
- """ Add template globals """
+ """ Add template globals
+ A wrapper function for the templated routes decorated with a @view() """
vals.update(self.TPL_GLOBALS)
return vals
@view('status.jinja2')
def _status_page(self):
- return self._atg({'current_values': self.current_values, 'active': 'status'})
+ return self._atg({'device_id': self._connected_device, 'current_values': self.current_values, 'active': 'status'})
@view('about.jinja2')
def _about_page(self):
@view('plots.jinja2')
def _plots_page(self):
- return self._atg({'device_id': self._connected_device(), 'active': 'plots'})
+ return self._atg({'device_id': self._connected_device, 'active': 'plots'})
@view('debug.jinja2')
def _debug_page(self):
self._cached_current_values = cur
return cur
+ def _status_device(self, device_id):
+ assert device_id == self._connected_device
+ status = self.current_values.to_dict()
+ status['ts'] = status['ts'].isoformat()
+ return {
+ 'success': True,
+ 'status': status,
+ }
+
def _serve_static(self, filename):
return static_file(filename, root=os.path.join(PATH, 'static'))
+ @property
def _connected_device(self):
+ """ As long as the webserver can handle only a single
+ OPUS20 device, we return this single one here. """
return self.o20.device_id
def _list_devices(self):
- return dict(devices=self.ps.get_device_ids())
+ return {
+ 'success': True,
+ 'devices': list(set([self._connected_device]) | set(self.ps.get_device_ids()))
+ }
def _download_device_data(self, device_id):
if clock() - self._download_device_data_last_call < 10.0:
else:
right = right.split(',')
#selected_cols = df.columns
- selected_cols = set()
+ selected_cols = []
for measure in measures:
for col in df.columns:
if measure in col:
- selected_cols.add(col)
- selected_cols = list(selected_cols)
- right_cols = set()
+ if col not in selected_cols: selected_cols.append(col)
+ right_cols = []
for col in selected_cols:
for measure in right:
if measure in col:
- right_cols.add(col)
- right_cols = list(right_cols)
+ if col not in right_cols: right_cols.append(col)
# / End handling URL query variables
fig, ax = plt.subplots(figsize=figsize)
pre {
text-align: left;
}
+
+.chart {
+ margin: 10px 20px;
+}
-
-$(function(){
- $('#fetchData').on('click', function(){
- var $btn = $(this).button('loading')
- $.ajax({
- url: "/download/" + device_id,
- type: 'get',
- success: function (response) {
- //console.log('response received');
- location.reload()
- $btn.button('reset')
- }, error: function (response) {
- console.log('ajax request to fetch data failed');
- alert('ajax request to fetch data failed');
- $btn.button('reset')
- },
- });
- });
-});
-
<link href="/static/css/style.css" rel="stylesheet">
<script type="text/javascript">
- {% block globals %}{% endblock %}
+ {% block top_javascript %}{% endblock %}
</script>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="/static/js/script.js"></script>
+
+ <script type="text/javascript">
+ {% block bottom_javascript %}{% endblock %}
+ </script>
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>
{% block title %}Plot{% endblock %}
-{% block globals %}
+{% block top_javascript %}
+
var device_id = "{{ device_id }}";
+
+$(function(){
+ $('#fetchData').on('click', function(){
+ var $btn = $(this);
+ $btn.prop('disabled', true);
+ var $text = $btn[0].textContent;
+ $btn.prop('textContent', "Loading...");
+ $.ajax({
+ url: "/download/" + device_id,
+ type: 'get',
+ success: function (response) {
+ //console.log('response received');
+ $btn.prop('disabled', false);
+ $btn.prop('textContent', $text);
+ location.reload()
+ }, error: function (response) {
+ console.log('ajax request to fetch data failed');
+ alert('ajax request to fetch data failed');
+ $btn.prop('disabled', false);
+ $btn.prop('textContent', $text);
+ },
+ });
+ });
+});
+
+
{% endblock %}
{% block content %}
<h1 class="cover-heading">Plots of the Environment Values</h1> <br />
+ <h3>Combined Plot</h3>
+ <p class="lead">
+ <img class="chart" src="/plot/{{ device_id }}_history.png?figsize=10,7&measures=temperature,relative humidity&right=humidity" />
+ </p>
+ <h3>Temperature Plot</h3>
+ <p class="lead">
+ <img class="chart" src="/plot/{{ device_id }}_history.png?figsize=10,7&measures=temperature&color=blue" />
+ </p>
+ <h3>Relative Humidity Plot</h3>
<p class="lead">
- <!-- <img src="/plot/{{ device_id }}_history.png?figsize=10,7&measures=temperature,relative humidity&right=humidity" /> -->
- <img src="/plot/{{ device_id }}_history.png?figsize=10,7&measures=temperature&color=blue" />
+ <img class="chart" src="/plot/{{ device_id }}_history.png?figsize=10,7&measures=relative humidity&right=-&ylabel=humidity [%25]&color=magenta" />
</p>
+ <h3>Absolute Humidity Plot</h3>
<p class="lead">
- <img src="/plot/{{ device_id }}_history.png?figsize=10,7&measures=relative humidity&right=-&ylabel=humidity [%25]&color=magenta" />
+ <img class="chart" src="/plot/{{ device_id }}_history.png?figsize=10,7&measures=absolute humidity&right=-&ylabel=humidity [g%2Fm%B3]&color=cyan" />
</p>
<p class="lead">
- <button id="fetchData" class="btn btn-lg btn-default" type="button" data-loading-text="Fetching New Data..." >Fetch New Data</button>
+ <button id="fetchData" class="btn btn-lg btn-default" type="button">Fetch New Data</button>
</p>
{% endblock %}
{% block title %}Status{% endblock %}
+{% block top_javascript %}
+
+var update_every_ms = 2050;
+var device_id = "{{ device_id }}";
+
+{% endblock %}
+
+{% block bottom_javascript %}
+
+function updateStatus() {
+ $.getJSON("/status/" + device_id, function( data ) {
+ $("#device_id").text(data.status.device_id);
+ $("#temperature").text(data.status.temperature.toFixed(1));
+ $("#dewpoint").text(data.status.dewpoint.toFixed(1));
+ $("#relative_humidity").text(data.status.relative_humidity.toFixed(1));
+ $("#absolute_humidity").text(data.status.absolute_humidity.toFixed(1));
+ $("#battery_voltage").text(data.status.battery_voltage.toFixed(1));
+ $("#timestamp").text(data.status.ts.replace('T', ' - '));
+ });
+};
+
+function timedUpdate() {
+ updateStatus();
+ setTimeout(function() {
+ timedUpdate();
+ }, update_every_ms);
+};
+
+$(function() {
+ // on page load
+ updateStatus();
+ setTimeout(function() {
+ timedUpdate();
+ }, update_every_ms);
+});
+
+{% endblock %}
+
{% block content %}
<h1 class="cover-heading">Current Status</h1>
<p class="lead">
- <div>Device ID: {{ current_values.device_id }}</div>
- <div>Temperature: {{ current_values.temperature | round(1) }} °C</div>
- <div>Dewpoint: {{ current_values.dewpoint | round(1) }} °C</div>
- <div>Relative Humidity: {{ current_values.relative_humidity | round(1) }} %</div>
- <div>Absolute Humidity: {{ current_values.absolute_humidity | round(1) }} g/m³</div>
- <div>Battery Voltage: {{ current_values.battery_voltage | round(1) }} V</div>
+ <div>Device ID: <span id="device_id">{{ current_values.device_id }}</span> </div>
+ <div>Temperature: <span id="temperature">{{ current_values.temperature | round(1) }}</span> °C </div>
+ <div>Dewpoint: <span id="dewpoint">{{ current_values.dewpoint | round(1) }}</span> °C </div>
+ <div>Relative Humidity: <span id="relative_humidity">{{ current_values.relative_humidity | round(1) }}</span> % </div>
+ <div>Absolute Humidity: <span id="absolute_humidity">{{ current_values.absolute_humidity | round(1) }}</span> g/m³ </div>
+ <div>Battery Voltage: <span id="battery_voltage">{{ current_values.battery_voltage | round(1) }}</span> V </div>
<br />
- <div>Date & Time of this information: {{ current_values.ts.isoformat().replace('T', ' - ') }}</div>
+ <div>Date & Time of this information: <span id="timestamp">{{ current_values.ts.isoformat().replace('T', ' - ') }}</span></div>
</p>
<!--<p class="lead">
<a href="#" class="btn btn-lg btn-default">Learn more</a>
jspc29 / labtools.git / commitdiff