Update README

.gitignore

@@ -1 +1,132 @@
-site/
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+pip-wheel-metadata/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+.python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# pyflow
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# Include frontend libraries though
+!/frontend/lib

.pylintrc

@@ -0,0 +1,2 @@
+[MASTER]
+disable = c0103

README.md

@@ -1,24 +1,37 @@
-# TeraHz
-
-
 [![Documentation Status](https://readthedocs.org/projects/terahz/badge/?version=latest)](https://terahz.readthedocs.io/en/latest/?badge=latest)
+# <img alt="TeraHz logo" src="docs/imgs/logo-sq.png" width="200px"> TeraHz
+*This project is currently at a standstill because SparkFUN stopped making one of the board this project needs. TeraHz will return in a better form some day!*
+*Za slovensko različico se odpravite na <http://git.sckr-lab.tk/kristjank/TeraHz>*
 
-TeraHz is a low-cost spectrometer based on a Raspberry Pi 3 or 3 B+ and three sensors:
- + [__AS7265x__](https://www.tindie.com/products/onehorse/compact-as7265x-spectrometer/)
- is a 18 channel spectrometer chipset that provides the device with spectral data
- + [__VEML6075__](https://www.sparkfun.com/products/15089) is an
- UVA/UVB sensor
- + [__APDS-9301__](https://www.sparkfun.com/products/14350) is a calibrated illuminance (lux) meter that provides the device with reliable readings
+TeraHz is a low-cost portable spectrometer based on Raspberry Pi and a few
+commonly available sensor breakout boards. It's designed to bring low-cost
+scientific exploration of the light spectrum to educational institutions that
+cannot afford the options available on the current market. It costs less than
+200€ with money to spare and uses only free, libre and open-source software
+(FLOSS). It is free to use under the ISC license, a spiritual successor to the
+classic 3-clause BSD license.
 
-## Why?
-Because people and institutions could use an affordable and accurate light-analysing device that is also portable, easy to use and simple to assemble. TeraHz was started as an answer to our high school not being able to afford a commercially available solution. One TeraHz spectrometer costs around 150$ in parts, which makes it a competitive alternative to other solutions on the market today.
+## How to install
+Stable releases are available under the releases tab and can be installed either
+by flashing a **preinstalled** ready to boot image with a stable version of
+TeraHz preinstalled or by flashing a **preconfigured** image of DietPi and
+installing TeraHz manually, which is useful if you want to test bleeding edge
+releases. For more information, check out the [Build
+guide](https://terahz.readthedocs.io/en/latest/build/).
+
+## Docs
+TeraHz usually works out of the box. A wireless network named `TeraHz_XXXXXX`
+(XXXXXX = the last half of the MAC address) will appear. Password is
+`terahertz`. After connection, open a web browser and visit `terahz.site`.
+The UI will appear. To fetch data from the sensors, press the 'Get Data' button.
+The readings are then plotted and written into the tables below the graph.
+
+More documentation is available at <https://terahz.readthedocs.io>
 
 ## Development team
-Copyright 2018, 2019
+- Kristjan Komloši (cls-02) - Project leader and main programmer
+- Jakob Kosec (D3m1j4ck) - Frontend designer
+- Juš Dolžan (ANormalPerson) - Math double-checker
 
-- Kristjan "cls-02" Komloši (electronics, sensor drivers, backend)
-- Jakob "D3m1j4ck" Kosec (frontend)
-
-
-I would also like to thank Juš "ANormalPerson" Dolžan, who decided to leave the
-team, but helped me a lot with backend development.
+<img alt="TeraHz logo" src="http://www.sckr.si/documents/upload/konektor/logo/_SC.gif" width="200px">  
+TeraHz has been developed under guidance and financial support of Šolski Center Kranj (Kranj School Centre). Without their support, this project might have never been possible.

backend/app.py

@@ -1,16 +1,16 @@
 # app.py - main backend program
+'''Main TeraHz backend program'''
 # All code in this file is licensed under the ISC license, provided in LICENSE.txt
-from flask import Flask, redirect, url_for, request
-import flask
+from flask import Flask, jsonify
 import sensors
-import json
-app = Flask(__name__)
-s=sensors.Spectrometer(path='/dev/serial0', baudrate=115200, tout=1)
-u=sensors.UVSensor()
-l=sensors.LxMeter()
 
+app = Flask(__name__)
 @app.route('/data')
 def sendData():
-    response = flask.jsonify([s.getData(), l.getData(), u.getABI()])
+    '''Responder function for /data route'''
+    s = sensors.Spectrometer(path='/dev/serial0')
+    u = sensors.UVSensor()
+    l = sensors.LxMeter()
+    response = jsonify([s.getData(), l.getData(), u.getABI()])
     response.headers.add('Access-Control-Allow-Origin', '*')
     return response

backend/run.sh

@@ -0,0 +1,4 @@
+#!/bin/bash
+# run.sh - run the backend server
+cd `dirname $0`
+sudo gunicorn app:app -b 0.0.0.0:5000 &

backend/sensors.py

@@ -1,37 +1,44 @@
 # sensors.py - a module for interfacing to the sensors
+'''Module for interfacing with TeraHz sensors'''
 # Copyright 2019 Kristjan Komloši
 # All code in this file is licensed under the ISC license, provided in LICENSE.txt
 import serial as ser
 import pandas as pd
 import smbus2
-from sys import exit as ex
-import time
+
+
+
+
 
 class Spectrometer:
+    '''Class representing the AS7265X specrometer'''
+
     def initializeSensor(self):
-        '''confirm the sensor is responding and proceed with spectrometer initialization'''
+        '''confirm the sensor is responding and proceed\
+         with spectrometer initialization'''
         try:
-            rstring='undefined' # just need it set to a value
+            rstring = 'undefined'  # just need it set to a value
+            self.setParameters({'gain': 0})
             self.serialObject.write(b'AT\n')
-            rstring=self.serialObject.readline().decode()
+            rstring = self.serialObject.readline().decode()
             if rstring == 'undefined':
-                raise Exception #sensor didn't respond
+                raise Exception  # sensor didn't respond
             if rstring == 'OK':
-                pass #handshake passed
+                pass  # handshake passed
             if rstring == 'ERROR':
-                raise Exception #sensor is in error state
+                raise Exception  # sensor is in error state
         except:
-            raise Exception('An exception ocurred when performing spectrometer handshake')
-            ex(1)
+            raise Exception('No AT command response')
 
     def setParameters(self, parameters):
         '''applies the parameters like LED light and gain to the spectrometer'''
         try:
             if 'it_time' in parameters:
                 it_time = int(parameters['it_time'])
-                if it_time <=0 :
+                if it_time <= 0:
                     it_time = 1
-                self.serialObject.write('ATINTTIME={}\n'.format(string(it_time)).encode())
+                self.serialObject.write(
+                    'ATINTTIME={}\n'.format(str(it_time)).encode())
                 self.serialObject.readline()
 
             if 'gain' in parameters:
@@ -44,28 +51,27 @@ class Spectrometer:
             if 'led' in parameters:
                 led = bool(parameters['led'])
                 if led:
-                    led=1
+                    led = 1
                 else:
-                    led=0
+                    led = 0
                 self.serialObject.write('ATLED3={}\n'.format(led).encode())
                 self.serialObject.readline()
         except:
-           raise Exception('An exception occured during spectrometer initialization')
-           ex(1)
+            raise Exception('Error setting spectrometer parameters')
 
     def getData(self):
+        '''Returns spectral data in a pandas DataFrame.'''
         try:
             self.serialObject.write(b'ATCDATA\n')
             rawresp = self.serialObject.readline().decode()
         except:
-            raise Exception('An exception occurred when polling for spectrometer data')
-            ex(1)
+            raise Exception('Error polling spectrometer data')
         else:
-            responseorder = [i for i in 'RSTUVWGHIJKLABCDEF']
-            realorder = [i for i in 'ABCDEFGHRISJTUVWKL']
-            response = pd.Series([float(i)/35.0 for i in rawresp[:-3].split(',')], index=responseorder)
-            return pd.DataFrame(response, index=realorder, columns = ['uW/cm^2']).to_dict()['uW/cm^2']
-
+            responseorder = list('RSTUVWGHIJKLABCDEF')
+            realorder = list('ABCDEFGHRISJTUVWKL')
+            response = pd.Series(
+                [float(i) / 35.0 for i in rawresp[:-3].split(',')], index=responseorder)
+            return pd.DataFrame(response, index=realorder, columns=['uW/cm^2']).to_dict()['uW/cm^2']
 
     def __init__(self, path='/dev/ttyUSB0', baudrate=115200, tout=1):
         self.path = path
@@ -74,25 +80,29 @@ class Spectrometer:
         try:
             self.serialObject = ser.Serial(path, baudrate, timeout=tout)
         except:
-            raise Exception('An exception occured when opening the serial port at {}'.format(path))
-            ex(1)
+            raise Exception('Error opening serial port: {}'.format(path))
         else:
             self.initializeSensor()
 
 
 class LxMeter:
+    '''Class representing the APDS-9301 digital photometer.'''
+
     def __init__(self, busNumber=1, addr=0x39):
         self.addr = addr
         try:
-            self.bus = smbus2.SMBus(busNumber) # initialize the SMBus interface
+            # initialize the SMBus interface
+            self.bus = smbus2.SMBus(busNumber)
         except:
-            raise Exception('An exception occured opening the SMBus {}'.format(self.bus))
+            raise Exception(
+                'Error opening SMBus {}'.format(self.bus))
 
         try:
-            self.bus.write_byte_data(self.addr, 0xa0, 0x03) # enable the sensor
+            self.bus.write_byte_data(
+                self.addr, 0xa0, 0x03)  # enable the sensor
             self.setGain(16)
         except:
-            raise Exception('An exception occured when enabling lux meter')
+            raise Exception('Error enabling lux meter')
 
     def setGain(self, gain):
         '''Set the sensor gain. Either 1 or 16.'''
@@ -101,13 +111,13 @@ class LxMeter:
                 temp = self.bus.read_byte_data(self.addr, 0xa1)
                 self.bus.write_byte_data(self.addr, 0xa1, 0xef & temp)
             except:
-                raise Exception('An exception occured when setting lux meter gain')
+                raise Exception('Error setting lux meter gain')
         if gain == 16:
             try:
                 temp = self.bus.read_byte_data(self.addr, 0xa1)
                 self.bus.write_byte_data(self.addr, 0xa1, 0x10 | temp)
             except:
-                raise Exception('An exception occured when setting lux meter gain')
+                raise Exception('Error setting lux meter gain')
         else:
             raise Exception('Invalid gain')
 
@@ -118,6 +128,8 @@ class LxMeter:
                 return 16
             if self.bus.read_byte_data(self.addr, 0xa1) & 0x10 == 0x00:
                 return 1
+            raise Exception('An error occured when getting lux meter gain')
+            # Under normal conditions, this raise is unreachable.
         except:
             raise Exception('An error occured when getting lux meter gain')
 
@@ -129,14 +141,16 @@ class LxMeter:
             temp = self.bus.read_byte_data(self.addr, 0xa1)
             self.bus.write_byte_data(self.addr, 0xa1, (temp & 0xfc) | time)
         except:
-            raise Exception('An exception occured setting lux integration time')
+            raise Exception(
+                'An exception occured setting lux integration time')
 
     def getIntTime(self):
         '''Get the lux sensor integration time.'''
         try:
             return self.bus.read_byte_data(self.addr, 0xa1) & 0x03
         except:
-            raise Exception('An exception occured getting lux integration time')
+            raise Exception(
+                'An exception occured getting lux integration time')
 
     def getData(self):
         '''return the calculated lux value'''
@@ -146,32 +160,44 @@ class LxMeter:
         except:
             raise Exception('An exception occured fetching lux channels')
 
-        # scary computations ahead! refer to the apds-9301 datasheet!
-        if chB/chA <= 0.5 and chB/chA > 0:
-            lux = 0.0304*chA - 0.062*chA*(chB/chA)**1.4
-        elif chB/chA <= 0.61 and chB/chA > 0.5:
-            lux = 0.0224*chA - 0.031*chB
-        elif chB/chA <=0.8 and chB/chA > 0.61:
-            lux = 0.0128*chA - 0.0153*chB
-        elif chB/chA <=1.3 and chB/chA >0.8:
-            lux = 0.00146*chA - 0.00112*chB
+        # Refer to APDS-9301 datasheet!
+        if chB / chA <= 0.5 and chB / chA > 0:
+            lux = 0.0304 * chA - 0.062 * chA * (chB / chA)**1.4
+        elif chB / chA <= 0.61 and chB / chA > 0.5:
+            lux = 0.0224 * chA - 0.031 * chB
+        elif chB / chA <= 0.8 and chB / chA > 0.61:
+            lux = 0.0128 * chA - 0.0153 * chB
+        elif chB / chA <= 1.3 and chB / chA > 0.8:
+            lux = 0.00146 * chA - 0.00112 * chB
         else:
             lux = 0
         return lux
 
+
 class UVSensor:
+    '''Class representing VEML6075 UVA/B meter'''
+
     def __init__(self, bus=1, addr=0x10):
-        self.addr=addr
+        self.addr = addr
         try:
             self.bus = smbus2.SMBus(bus)
         except:
-            raise Exception('An exception occured opening SMBus {}'.format(bus))
+            raise Exception(
+                'An exception occured opening SMBus {}'.format(bus))
 
         try:
             # enable the sensor and set the integration time
             self.bus.write_byte_data(self.addr, 0x00, 0b00010000)
+
+            # trigger a measurement to prevent bus errors at first read
+            self.bus.write_byte_data(self.addr, 0x00, 0b00010010)  # UV_AF=1
+            self.bus.write_byte_data(self.addr, 0x00, 0b00010110)  # UV_TRIG=1
+            self.bus.write_byte_data(
+                self.addr, 0x00, 0b00010000)  # normal mode
+
         except:
-            raise Exception('An exception occured when initalizing the UV Sensor')
+            raise Exception(
+                'Error initalizing the UV Sensor')
 
     def getABI(self):
         '''Calculates the UVA and UVB irradiances,
@@ -184,31 +210,15 @@ class UVSensor:
             c1 = self.bus.read_word_data(self.addr, 0x0a)
             c2 = self.bus.read_word_data(self.addr, 0x0b)
         except:
-            raise Exception('An exception occured when fetching raw UV data')
-        # scary computations ahead! refer to Vishay app note 84339 and Sparkfun
-        # VEML6075 documentation.
+            raise Exception('Error fetching raw UV data')
+        # Refer to Vishay app note 84339 and Sparkfun VEML6075 documentation.
+        # The computed values may be negative if UV is vastly weaker than
+        # visible and IR light. This is not a bug!
 
-        # first, compensate for visible and IR noise
-        aCorr = aRaw - 2.22 * c1 - 1.33 * c2
-        bCorr = bRaw - 2.95 * c1 - 1.74 * c2
-
-        # second, convert values into irradiances
-        a = aCorr * 0.00110
-        b = bCorr * 0.00125
-
-        # last, calculate the UV index
-        i = (a + b) / 2
-
-        return [a,b,i]
-
-    def getA(self):
-        return self.getABI()[0]
-
-    def getB(self):
-        return self.getABI()[1]
-
-    def getI(self):
-        return self.getABI()[2]
+        a = (aRaw - 2.22 * c1 - 1.33 * c2) * 1.06
+        b = (bRaw - 2.95 * c1 - 1.74 * c2) * 0.48
+        i = (a + b) / 2  # calculate UV index
+        return [a, b, i]
 
     def on(self):
         '''Turns the UV sensor on after shutdown.'''
@@ -217,7 +227,8 @@ class UVSensor:
             # no configurable params = no bitmask
             self.bus.write_byte_data(self.addr, 0x00, 0x10)
         except:
-            raise Exception('An exception occured when turning the UV sensor on')
+            raise Exception(
+                'Error turning the UV sensor on')
 
     def off(self):
         '''Shuts the UV sensor down.'''
@@ -226,4 +237,5 @@ class UVSensor:
             # no configurable params = no bitmask
             self.bus.write_byte_data(self.addr, 0x00, 0x11)
         except:
-            raise Exception('An exception occured when shutting the UV sensor down')
+            raise Exception(
+                'Error shutting the UV sensor down')

backend/storage.py

@@ -1,31 +0,0 @@
-# storage.py - storage backend for TeraHz
-# Copyright Kristjan Komloši 2019
-# All code in this file is licensed under the ISC license, provided in LICENSE.txt
-
-
-import sqlite3
-class jsonStorage:
-    def __init__(self, dbFile):
-        '''Storage object constructor. Argument is filename'''
-        self.db = sqlite3.connect(dbFile)
-
-    def listJSONs(self):
-        c = self.db.cursor()
-        c.execute('SELECT * FROM storage')
-        result = c.fetchall()
-        c.close()
-        return result
-
-    def storeJSON(self, jsonString, comment):
-        c = self.db.cursor()
-        c.execute('INSERT INTO storage VALUES (datetime(\'now\', \'localtime\'), ?, ?)', (comment, jsonString))
-        c.close()
-        self.db.commit()
-
-    def retrieveJSON(self, timestamp):
-        '''Retrieves a JSON entry. Takes a timestamp string'''
-        c = self.db.cursor()
-        c.execute('SELECT * FROM storage WHERE timestamp = ?', (timestamp,))
-        result = c.fetchall()
-        c.close()
-        return result

docs/build.md

@@ -1,165 +1,39 @@
-## Warning
-The recommended way of getting TeraHz is the official Raspberry Pi SD card image
-provided under the releases tab in the GitHub repository. Installing TeraHz from
-source is a time consuming and painful process, even more so if you don't know
-what you're doing, and whatever you end up building __will not be officially
-supported__ (unless you're a core developer).
+# TeraHz build guide
+In its early development phase, TeraHz was hard and time-consuming to compile and install.
+This is not case now, as the more optimized DietPi Linux distribution allows
+better performance and simpler configuration than formerly used Raspbian.
 
-With this warning out of the way, let's begin.
+## Downloading the complete image
+The easiest way to get TeraHz is to download the premade complete image and
+write it to an SD card. It already has TeraHz installed and **will work out of
+the box** with the correct hardware. The image is designed to run from a 16 GB
+micro SD card, class 10 or higher is recommended for snappy performance. The
+recommended image writer is Etcher
 
-## Getting the latest sources
-The most reliable way to get working source code is by cloning the official
-GitHub repository and checking out the `development-stable` tag. This tag marks
-the latest confirmed working commit. Building from the master branch is somewhat
-risky, and building from development branches is straight up stupid if you're
-not a developer.
+Please note that while this installation process is the easiest to perform, it
+does not guarantee the most recent TeraHz software. Complete images take time to
+prepare and despite the developer's best efforts aren't guaranteed to be always
+up-to-date.
 
-Make sure that the repository is cloned into `/home/pi/TeraHz`, as Lighttpd
-expects to find frontend files inside this directory.
+## Downloading the clean DietPi image and installing TeraHz manually
+This process is a bit more involved, but the version of TeraHz installed is
+guaranteed to be the latest one available from the repository.
 
-After cloning and checking out, check the documentation for module dependencies
-and the required version of python in the `docs/dependencies.md` file.
+The SD card image used in this case also contains some pre-configuration, but no
+TeraHz code is installed. To install TeraHz, you'll need a console access to the
+Raspberry Pi, preferably an SSH console over a wired network. DietPi is configured
+to get an IP over DHCP. A tool such as arp-scan on linux is very helpful at determining
+the device's IP address.
 
-## Installing Python
-This step depends a lot on the platform you're using. TeraHz was developed with
-Raspberry Pi and Raspbian in mind. If you're familiar with Raspbian enough,
-you'll know that the latest version of Python available is `3.5`, which is too
-obsolete to run TeraHz and the required modules consistently. This leaves us
-with compiling Python from source. __This step is guaranteed to be slow,
-overnight compiling with something like tmux is recommended.__
-
-### Pre-requirements
-Installing python without most C libraries will lead to a rather minimalistic
-Python install, missing a lot of important modules. To prevent this, update
-the system packages. After that, reboot.
+After connecting to the Raspberry Pi with username `root` and password `terahz`,
+TeraHz can be installed by cloning the Git repository and running the `etcs/install.sh`
+script.
 
 ```
-sudo apt update
-sudo apt full-upgrade
-sudo reboot
+git clone https://github.com/cls-02/TeraHz.git
+cd TeraHz/etcs
+./install.sh
 ```
 
-Install the required build tools, libraries and their headers.
-
-```
-sudo apt-get install build-essential tk-dev libncurses5-dev libncursesw5-dev \
-libreadline6-dev libdb5.3-dev libgdbm-dev libsqlite3-dev libssl-dev libbz2-dev \
-libexpat1-dev liblzma-dev zlib1g-dev
-```
-
-### Compiling
-Compiling Python from source is, in fact pretty easy, just time-consuming. To combat
-that, using tmux to detach and later reattach the session is advised.
-
-Python is packaged in many forms, but you'll be using the most basic
-of them all: a gzipped tarball. Download and decompress it, then cd into its
-directory.
-
-```
-wget https://www.python.org/ftp/python/3.6.8/Python-3.6.8.tgz
-tar -xzf Python-3.6.8.tgz
-cd Python-3.6.8
-```
-
-Python's build process is pretty classic, a `.configure` script and a Makefile.
-Using the `-j` option with Make can reduce the compile time significantly. Go
-with as many threads as you have cores: `-j 4` works great on the Pi 3 B/B+.
-
-```
-./configure
-make -j4
-```
-
-When the compilation ends, install your freshly built version of python.
-
-```
-sudo make altinstall
-```
-
-"Altinstall" means that the new version of Python will be installed beside the
-existing version, and all related commands will use the full naming scheme:
-think `python3.6` or `pip3.6` instead of the shorter `python3` or `pip3`.
-
-### Modules
-Another painfully slow part is the installation of all the required modules
-needed by TeraHz. Luckily, `pip3.6` takes care of the entire installation
-process. As before, using tmux is advised.
-
-```
-pip3.6 install smbus pyserial flask pandas
-```
-
-## Raspi-config
-For some law-obeying reason, Raspbian locks down the Wi-Fi interface card until
-the Wi-Fi country is set. This means that we will need to set it manually through
-the `raspi-config` program. It requires superuser privileges.
-
-```
-sudo raspi-config
-```
-![1](imgs/raspi-config/1.png)
-
-Configure the network hostname to something specific. If setting up multiple
-TeraHz machines, make their hostnames unique so you can tell them apart.
-
-![](imgs/raspi-config/3.png)
-![](imgs/raspi-config/4.png)
-
-Enable SSH and I2C interfaces.
-![](imgs/raspi-config/15.png)
-![](imgs/raspi-config/5.png)
-![](imgs/raspi-config/6.png)
-![](imgs/raspi-config/7.png)
-![](imgs/raspi-config/19.png)
-
-Expand the root filesystem along the entire SD card.
-
-![](imgs/raspi-config/17.png)
-![](imgs/raspi-config/8.png)
-![](imgs/raspi-config/9.png)
-
-Set the Wi-Fi country to the country you'll be using TeraHz in.
-
-![](imgs/raspi-config/10.png)
-![](imgs/raspi-config/11.png)
-![](imgs/raspi-config/12.png)
-![](imgs/raspi-config/13.png)
-![](imgs/raspi-config/14.png)
-
-Save and reboot to enable Wi-Fi
-
-## Installing packages
-In addition to what's already installed, TeraHz requires the following daemons
-to run:
-  - Lighttpd - Frontend HTTP server
-  - Dnsmasq - DNS and DHCP server, used to redirect the `terahz.site` domain
-  - Hostapd - Wi-Fi access point
-
-They are available from the Raspbian repository. Install it via `apt`.
-
-```
-apt install hostapd dnsmasq hostapd
-```
-
-## Configuring daemons
-By default, the daemons we installed are disabled and start only manually. To
-change that, enable them through systemctl. Hostapd conflicts with
-wpa_supplicant, the solution is to disable wpa_supplicant (this will break your
-wireless connections, so use wired ethernet).
-
-```
-sudo systemctl unmask hostapd
-sudo systemctl stop wpa_supplicant
-sudo systemctl disable wpa_supplicant
-sudo systemctl enable dnsmasq hostapd lighttpd
-```
-
-## Copying configuration files
-To simplify the process of configuring Raspbian to run TeraHz, sample
-configuration file are provided in the `etcs` subdirectory of the Git
-repository.
-
-These files have been verified to work, but it's not a brilliant idea to just
-copy them into your `/etc` directory. Use them carefully and more as a template
-for your own configuration rather than as a _de facto_ way of configuring
-TeraHz.
+When the installation completes, reboot the Raspberry Pi and it will
+automatically boot into TeraHz.

docs/dependencies.md

@@ -1,25 +1,24 @@
-The current development version of TeraHz has been verified to work with:
-
-  - Raspbian Stretch (9)
-  - Python 3.6.8 (built from source code and altinstall'd)
-  - Module versions (direct `pip3.6 list` output):
-
+# 1.0.0-rc1 Dependencies
+The 1.0.0-rc1 version of TeraHz is confirmed to work with:
+- DietPi 6.26.3
+- Python 3.7.3
+- Pip 18.1
+- Following versions of pip3 packages:
 ```
-      Package         Version  
-      --------------- ---------
-      Click           7.0      
-      Flask           1.0.3    
-      itsdangerous    1.1.0    
-      Jinja2          2.10.1   
-      MarkupSafe      1.1.1    
-      numpy           1.16.4   
-      pandas          0.24.2   
-      pip             18.1     
-      pyserial        3.4      
-      python-dateutil 2.8.0    
-      pytz            2019.1   
-      setuptools      40.6.2   
-      six             1.12.0   
-      smbus           1.1.post2
-      Werkzeug        0.15.4   
+Click           7.0    
+Flask           1.1.1  
+gunicorn        20.0.0
+itsdangerous    1.1.0  
+Jinja2          2.10.3
+MarkupSafe      1.1.1  
+numpy           1.17.4
+pandas          0.25.3
+pip             18.1   
+pyserial        3.4    
+python-dateutil 2.8.1  
+pytz            2019.3
+setuptools      41.6.0
+six             1.13.0
+smbus2          0.3.0  
+Werkzeug        0.16.0
 ```

docs/dev-guide.md

@@ -0,0 +1,90 @@
+# TeraHz developer's guide
+This document explains how TeraHz works. It's a good starting point for developers
+and an interesting read for the curious.
+
+# Hardware
+TeraHz was developed on and for the Raspberry Pi 3 Model B+. Compatibility with
+other Raspberries can probably be achieved by tweaking the device paths in the
+`app.py` file, but isn't confirmed at this point. Theoretically, 3 Model B and
+Zero W should work out of the box, but models without Wi-Fi will need an
+external Wi-Fi adapter if Wi-Fi functionality is desired.
+
+TeraHz depends on three separate sensor boards:
+- AS7265x spectral chipset
+- VEML6075 UV sensor
+- APDS-9301 lux-meter
+
+The sensors leech power from the GPIO connector, thus eliminating the need for a
+separate power supply. The necessary power for the whole system is delivered through
+the Raspberry's USB port. This also allows for considerable versatility, as it
+enables the resulting device to be either wall-powered or battery-powered.
+In a portable configuration, I used a one-cell power bank, which allowed for
+about 45 minutes of continuous operation.
+
+## AS7265x chipset
+_[Datasheet][1ds] [Buy breakout board][1]_
+
+This chipset supports either I2C or UART. Because transferring large amounts of
+data over I2C is rather cumbersome, TeraHz uses AS7265x in UART mode.
+
+This chipset consists of three rather small surface-mounted chips and requires
+an EEPROM. To lower the complexity of assembly for the end-user, I recommend
+using a breakout board.
+
+The serial UART connection operates at 115200 baud, which seems to be the
+standard for most recent embedded peripherals. As with most serial hardware,
+the TxD and RxD lines must be crossed over when connecting to the processor.
+
+Communication with the sensor is simple and clear through AT commands. There's
+a lot of them, all documented inside the datasheet, but the most important one
+is `ATGETCDATA`, which returns the calibrated spectral data from the sensors.
+
+The data is returned in the form of a comma-separated list of floating point
+values, ending with a newline. The order is alphabetical, which is __different
+from wavelength order__. See the datasheet for more information.
+
+## VEML6075
+_[Datasheet][2ds] [Buy breakout board][2]_
+
+This chip communicates through I2C and provides TeraHz with UVA and UVB
+irradiance readings. It's not an ideal chip for this task, as it's been marked
+End-of-Life by Vishay and it'll have to be replaced with a better one in future
+hardware versions of TeraHz.
+
+The chip resides at the I2C address `0x10`. There's not a lot of communication
+required: at initialization, the integration time has to be set and after that,
+the sensor is ready to go.
+
+16-bit UV values lie in two two-byte registers, `0x07` for UVA and `0x09` for
+UVB. For correct result conversion, there are also two correction registers,
+UVCOMP_1 and 2, located at `0x0A` and `0x0B`, respectively.
+
+To convert these four values into irradiances, they must be multiplied by
+certain constants, somewhat loosely defined in the sensor datasheet. Keep in
+mind that the way of computing the "irradiance" is very much experimentally
+derived, and even Vishay's tech support doesn't know how exactly to calculate
+the irradiance.
+
+## APDS-9301
+_[Datasheet][3ds] [Buy breakout board][3]_
+This chip measures illuminance in luxes and like the VEML6075, connects through
+I2C. Unlike the VEML6075, this chip is very good at its job, providing accurate
+and fast results without undefined mathematics or required calibration.
+
+At power-on, it needs to be enabled and the sensor gain set to the high setting,
+as the formula for Lux calculation is only defined for that setting. This
+initialization is handled by the sensors module.
+
+The lux reading is derived from two channels, descriptively called CH0 and CH1,
+residing in respective 16-bit registers at addresses `0xAC` and `0xAE`. After a
+successful read of both data registers, the lux value can be derived using the
+formula in the sensor's datasheet.
+
+
+
+[1]: https://www.tindie.com/products/onehorse/compact-as7265x-spectrometer/
+[2]: https://www.sparkfun.com/products/15089
+[3]: https://www.sparkfun.com/products/14350
+[1ds]: sensor-docs/AS7265x.pdf
+[2ds]: sensor-docs/veml6075.pdf
+[3ds]: sensor-docs/APDS-9301.pdf

docs/electrical.md

@@ -0,0 +1,48 @@
+# TeraHz Electrical Guide
+This section briefly explains the neccessary electrical connections between the
+Raspberry Pi and the sensors you'll need to make to ensure correct and safe
+operation.
+
+As mentioned before, TeraHz requires 3 sensors to operate. The simpler UVA/UVB
+sensor and the ambient light analyzer connect to the Raspberry's SMBus (I2C)
+bus, while the spectrometer connects via high-speed UART.
+
+![pinout](imgs/raspi-pinout.png)
+
+## PCBs vs breakout boards & jumpers
+The Raspberry Pi GPIO port includes enough power pins to require only jumper
+cables to connect the sensors to the Raspberry Pi. However, this is not a great
+idea. During development, jumper cables have repeatedly been proven to be an
+unreliable nuisance, and their absolute lack of rigidity helped me fry one of my
+development Raspberry Pis. For this reason, I wholeheartedly recommend using a
+simple PCB to route the connections from the Pi to the sensors. At this time,
+there is no official TeraHz PCB, but it shall be announced and included in the
+project when basic testing will be done.
+
+GPIO can be routed to the PCB with a standard old IDE disk cable, and terminated
+with another 40-pin connector at the PCB. Sensor breakouts should be mounted
+through standard 0.1" connectors, male on the sensor breakout and female on the
+PCB. A shitty add-on header and a shitty add-on header v1.69bis can't hurt, either.
+
+
+## SMBus sensors
+SMBus is a well-defined version of the well-known I2C bus, widely used
+in computer motherboards for low-band bandwidth communication with various ICs,
+especially sensors and power-supply related devices. This bus is broken out on
+the Raspberry Pi GPIO port as the "I2C1" bus (see picture).
+
+Pins are familiarly marked as SDA and SCL, the same as with classic I2C. They
+connect to the SDA and SCL pins on the VEML6075 and APDS-9301 sensor.
+
+## UART sensor
+Spectral sensor attaches through the UART port on the Raspberry pi (see picture).
+
+
+The Tx and Rx lines must cross over, connecting the sensor's Tx line to the
+computer's Rx line and vice versa.
+
+## Power supply
+As the sensors require only a small amount of power, they can be powered directly from the Raspberry Pi itself, leeching power from the 3.3V lines.
+
+## Ground
+There's not a lot to say here, connect sensor GND to Pi's GND.

docs/index.md

@@ -1 +1,3 @@
-This is the start page for the TeraHz documentation.
+<img alt="TeraHz logo" src="imgs/logo-sq.png" width="200px">
+# TeraHz documentation - index
+This is the starting point of TeraHz documentation.

etcs/default/avahi-daemon

@@ -1,4 +0,0 @@
-# 1 = Try to detect unicast dns servers that serve .local and disable avahi in
-# that case, 0 = Don't try to detect .local unicast dns servers, can cause
-# troubles on misconfigured networks
-AVAHI_DAEMON_DETECT_LOCAL=1

etcs/default/bluetooth

@@ -1,20 +0,0 @@
-# Defaults for bluez
-
-# start bluetooth on boot?
-# compatibility note: if this variable is _not_ found bluetooth will start
-BLUETOOTH_ENABLED=1
-
-# This setting used to switch HID devices (e.g mouse/keyboad) to HCI mode, that
-# is you will have bluetooth functionality from your dongle instead of only
-# HID. This is accomplished for supported devices by udev in
-# /lib/udev/rules.d/62-bluez-hid2hci.rules by invoking hid2hci with correct
-# parameters.
-# See /usr/share/doc/bluez/NEWS.Debian.gz for further information.
-
-# Older daemons like pand dund and hidd can be found in bluez-compat package as
-# they are deprecated and provided for backward compatibility only.
-
-# Note that not every bluetooth dongle is capable of switching back to HID mode,
-# see http://bugs.debian.org/cgi-bin/bugreport.cgi?bug=355497
-HID2HCI_ENABLED=0
-HID2HCI_UNDO=0

etcs/default/bsdmainutils

@@ -1,4 +0,0 @@
-# Uncomment the following line if you'd like all of your users'
-# ~/calendar files to be checked daily.  Calendar will send them mail
-# to remind them of upcoming events.  See calendar(1) for more details.
-#RUN_DAILY=true

etcs/default/console-setup

@@ -1,16 +0,0 @@
-# CONFIGURATION FILE FOR SETUPCON
-
-# Consult the console-setup(5) manual page.
-
-ACTIVE_CONSOLES="/dev/tty[1-6]"
-
-CHARMAP="UTF-8"
-
-CODESET="guess"
-FONTFACE=""
-FONTSIZE=""
-
-VIDEOMODE=
-
-# The following is an example how to use a braille font
-# FONT='lat9w-08.psf.gz brl-8x8.psf'

etcs/default/crda

@@ -1,11 +0,0 @@
-# Set REGDOMAIN to a ISO/IEC 3166-1 alpha2 country code so that iw(8) may set
-# the initial regulatory domain setting for IEEE 802.11 devices which operate
-# on this system.
-#
-# Governments assert the right to regulate usage of radio spectrum within
-# their respective territories so make sure you select a ISO/IEC 3166-1 alpha2
-# country code suitable for your location or you may infringe on local
-# legislature. See `/usr/share/zoneinfo/zone.tab' for a table of timezone
-# descriptions containing ISO/IEC 3166-1 alpha2 country codes.
-
-REGDOMAIN=

etcs/default/cron

@@ -1,28 +0,0 @@
-# Cron configuration options
-
-# Whether to read the system's default environment files (if present)
-# If set to "yes", cron will set a proper mail charset from the
-# locale information. If set to something other than 'yes', the default
-# charset 'C' (canonical name: ANSI_X3.4-1968) will be used.
-#
-# This has no effect on tasks running under cron; their environment can
-# only be changed via PAM or from within the crontab; see crontab(5).
-READ_ENV="yes"
-
-# Extra options for cron, see cron(8)
-#
-# For example, to enable LSB name support in /etc/cron.d/, use
-# EXTRA_OPTS='-l'  
-#
-# Or, to log standard messages, plus jobs with exit status != 0:
-# EXTRA_OPTS='-L 5'
-#
-# For quick reference, the currently available log levels are:
-#   0   no logging (errors are logged regardless)
-#   1   log start of jobs
-#   2   log end of jobs
-#   4   log jobs with exit status != 0
-#   8   log the process identifier of child process (in all logs)
-#
-#EXTRA_OPTS=""
-

etcs/default/dbus

@@ -1,7 +0,0 @@
-# This is a configuration file for /etc/init.d/dbus; it allows you to
-# perform common modifications to the behavior of the dbus daemon
-# startup without editing the init script (and thus getting prompted
-# by dpkg on upgrades).  We all love dpkg prompts.
-
-# Parameters to pass to dbus.
-PARAMS=""

etcs/default/dnsmasq

@@ -1,33 +0,0 @@
-# This file has five functions: 
-# 1) to completely disable starting dnsmasq, 
-# 2) to set DOMAIN_SUFFIX by running `dnsdomainname` 
-# 3) to select an alternative config file
-#    by setting DNSMASQ_OPTS to --conf-file=<file>
-# 4) to tell dnsmasq to read the files in /etc/dnsmasq.d for
-#    more configuration variables.
-# 5) to stop the resolvconf package from controlling dnsmasq's
-#    idea of which upstream nameservers to use.
-# For upgraders from very old versions, all the shell variables set 
-# here in previous versions are still honored by the init script
-# so if you just keep your old version of this file nothing will break.
-
-#DOMAIN_SUFFIX=`dnsdomainname`
-#DNSMASQ_OPTS="--conf-file=/etc/dnsmasq.alt"
-
-# Whether or not to run the dnsmasq daemon; set to 0 to disable.
-ENABLED=1
-
-# By default search this drop directory for configuration options.
-# Libvirt leaves a file here to make the system dnsmasq play nice.
-# Comment out this line if you don't want this. The dpkg-* are file
-# endings which cause dnsmasq to skip that file. This avoids pulling
-# in backups made by dpkg.
-CONFIG_DIR=/etc/dnsmasq.d,.dpkg-dist,.dpkg-old,.dpkg-new
-
-# If the resolvconf package is installed, dnsmasq will use its output 
-# rather than the contents of /etc/resolv.conf to find upstream 
-# nameservers. Uncommenting this line inhibits this behaviour.
-# Note that including a "resolv-file=<filename>" line in 
-# /etc/dnsmasq.conf is not enough to override resolvconf if it is
-# installed: the line below must be uncommented.
-IGNORE_RESOLVCONF=yes

etcs/default/fake-hwclock

@@ -1,2 +0,0 @@
-# Uncomment to set clock even if saved value appears to be in the past
-#FORCE=force

etcs/default/hostapd

@@ -1,20 +0,0 @@
-# Defaults for hostapd initscript
-#
-# See /usr/share/doc/hostapd/README.Debian for information about alternative
-# methods of managing hostapd.
-#
-# Uncomment and set DAEMON_CONF to the absolute path of a hostapd configuration
-# file and hostapd will be started during system boot. An example configuration
-# file can be found at /usr/share/doc/hostapd/examples/hostapd.conf.gz
-#
-DAEMON_CONF="/etc/hostapd/hostapd.conf"
-
-# Additional daemon options to be appended to hostapd command:-
-# 	-d   show more debug messages (-dd for even more)
-# 	-K   include key data in debug messages
-# 	-t   include timestamps in some debug messages
-#
-# Note that -B (daemon mode) and -P (pidfile) options are automatically
-# configured by the init.d script and must not be added to DAEMON_OPTS.
-#
-#DAEMON_OPTS=""

etcs/default/hwclock

@@ -1,19 +0,0 @@
-# Defaults for the hwclock init script.  See hwclock(5) and hwclock(8).
-
-# This is used to specify that the hardware clock incapable of storing
-# years outside the range of 1994-1999.  Set to yes if the hardware is
-# broken or no if working correctly.
-#BADYEAR=no
-
-# Set this to yes if it is possible to access the hardware clock,
-# or no if it is not.
-#HWCLOCKACCESS=yes
-
-# Set this to any options you might need to give to hwclock, such
-# as machine hardware clock type for Alphas.
-#HWCLOCKPARS=
-
-# Set this to the hardware clock device you want to use, it should
-# probably match the CONFIG_RTC_HCTOSYS_DEVICE kernel config option.
-#HCTOSYS_DEVICE=rtc0
-

etcs/default/keyboard

@@ -1,10 +0,0 @@
-# KEYBOARD CONFIGURATION FILE
-
-# Consult the keyboard(5) manual page.
-
-XKBMODEL="pc105"
-XKBLAYOUT="gb"
-XKBVARIANT=""
-XKBOPTIONS=""
-
-BACKSPACE="guess"

etcs/default/locale

@@ -1,2 +0,0 @@
-#  File generated by update-locale
-LANG=en_GB.UTF-8

etcs/default/networking

@@ -1,11 +0,0 @@
-# Configuration for networking init script being run during
-# the boot sequence
-
-# Set to 'no' to skip interfaces configuration on boot
-#CONFIGURE_INTERFACES=yes
-
-# Don't configure these interfaces. Shell wildcards supported/
-#EXCLUDE_INTERFACES=
-
-# Set to 'yes' to enable additional verbosity
-#VERBOSE=no

etcs/default/nfs-common

@@ -1,19 +0,0 @@
-# If you do not set values for the NEED_ options, they will be attempted
-# autodetected; this should be sufficient for most people. Valid alternatives
-# for the NEED_ options are "yes" and "no".
-
-# Do you want to start the statd daemon? It is not needed for NFSv4.
-NEED_STATD=
-
-# Options for rpc.statd.
-#   Should rpc.statd listen on a specific port? This is especially useful
-#   when you have a port-based firewall. To use a fixed port, set this
-#   this variable to a statd argument like: "--port 4000 --outgoing-port 4001".
-#   For more information, see rpc.statd(8) or http://wiki.debian.org/SecuringNFS
-STATDOPTS=
-
-# Do you want to start the idmapd daemon? It is only needed for NFSv4.
-NEED_IDMAPD=
-
-# Do you want to start the gssd daemon? It is required for Kerberos mounts.
-NEED_GSSD=

etcs/default/nss

@@ -1,37 +0,0 @@
-# /etc/default/nss
-# This file can theoretically contain a bunch of customization variables
-# for Name Service Switch in the GNU C library.  For now there are only
-# four variables:
-#
-# NETID_AUTHORITATIVE
-#   If set to TRUE, the initgroups() function will accept the information
-#   from the netid.byname NIS map as authoritative.  This can speed up the
-#   function significantly if the group.byname map is large.  The content
-#   of the netid.byname map is used AS IS.  The system administrator has
-#   to make sure it is correctly generated.
-#NETID_AUTHORITATIVE=TRUE
-#
-# SERVICES_AUTHORITATIVE
-#   If set to TRUE, the getservbyname{,_r}() function will assume
-#   services.byservicename NIS map exists and is authoritative, particularly
-#   that it contains both keys with /proto and without /proto for both
-#   primary service names and service aliases.  The system administrator
-#   has to make sure it is correctly generated.
-#SERVICES_AUTHORITATIVE=TRUE
-#
-# SETENT_BATCH_READ
-#  If set to TRUE, various setXXent() functions will read the entire
-#  database at once and then hand out the requests one by one from
-#  memory with every getXXent() call.  Otherwise each getXXent() call
-#  might result into a network communication with the server to get
-#  the next entry.
-#SETENT_BATCH_READ=TRUE
-#
-# ADJUNCT_AS_SHADOW
-#  If set to TRUE, the passwd routines in the NIS NSS module will not
-#  use the passwd.adjunct.byname tables to fill in the password data
-#  in the passwd structure.  This is a security problem if the NIS
-#  server cannot be trusted to send the passwd.adjuct table only to
-#  privileged clients.  Instead the passwd.adjunct.byname table is
-#  used to synthesize the shadow.byname table if it does not exist.
-ADJUNCT_AS_SHADOW=TRUE

etcs/default/raspberrypi-kernel

@@ -1,11 +0,0 @@
-# Defaults for raspberrypi-kernel
-
-# Uncomment the following line to enable generation of
-# /boot/initrd.img-KVER files (requires initramfs-tools)
-
-#INITRD=Yes
-
-# Uncomment the following line to enable generation of
-# /boot/initrd(7).img files (requires rpi-initramfs-tools)
-
-#RPI_INITRD=Yes

etcs/default/rsync

@@ -1,47 +0,0 @@
-# defaults file for rsync daemon mode
-#
-# This file is only used for init.d based systems!
-# If this system uses systemd, you can specify options etc. for rsync
-# in daemon mode by copying /lib/systemd/system/rsync.service to
-# /etc/systemd/system/rsync.service and modifying the copy; add required
-# options to the ExecStart line.
-
-# start rsync in daemon mode from init.d script?
-#  only allowed values are "true", "false", and "inetd"
-#  Use "inetd" if you want to start the rsyncd from inetd,
-#  all this does is prevent the init.d script from printing a message
-#  about not starting rsyncd (you still need to modify inetd's config yourself).
-RSYNC_ENABLE=false
-
-# which file should be used as the configuration file for rsync.
-# This file is used instead of the default /etc/rsyncd.conf
-# Warning: This option has no effect if the daemon is accessed
-#          using a remote shell. When using a different file for
-#          rsync you might want to symlink /etc/rsyncd.conf to
-#          that file.
-# RSYNC_CONFIG_FILE=
-
-# what extra options to give rsync --daemon?
-#  that excludes the --daemon; that's always done in the init.d script
-#  Possibilities are:
-#   --address=123.45.67.89		(bind to a specific IP address)
-#   --port=8730				(bind to specified port; default 873)
-RSYNC_OPTS=''
-
-# run rsyncd at a nice level?
-#  the rsync daemon can impact performance due to much I/O and CPU usage,
-#  so you may want to run it at a nicer priority than the default priority.
-#  Allowed values are 0 - 19 inclusive; 10 is a reasonable value.
-RSYNC_NICE=''
-
-# run rsyncd with ionice?
-#  "ionice" does for IO load what "nice" does for CPU load.
-#  As rsync is often used for backups which aren't all that time-critical,
-#  reducing the rsync IO priority will benefit the rest of the system.
-#  See the manpage for ionice for allowed options.
-#  -c3 is recommended, this will run rsync IO at "idle" priority. Uncomment
-#  the next line to activate this.
-# RSYNC_IONICE='-c3'
-
-# Don't forget to create an appropriate config file,
-# else the daemon will not start.

etcs/default/rsyslog

@@ -1,4 +0,0 @@
-# Options for rsyslogd
-# -x disables DNS lookups for remote messages
-# See rsyslogd(8) for more details
-RSYSLOGD_OPTIONS=""

etcs/default/ssh

@@ -1,5 +0,0 @@
-# Default settings for openssh-server. This file is sourced by /bin/sh from
-# /etc/init.d/ssh.
-
-# Options to pass to sshd
-SSHD_OPTS=

etcs/default/timidity

@@ -1,22 +0,0 @@
-# Defaults for TiMidity++ scripts
-# sourced by /etc/init.d/timidity
-# installed at /etc/default/timidity by the maintainer scripts
-# $Id: timidity.default,v 1.3 2004/08/07 14:33:26 hmh Exp $
-
-#
-# This is a POSIX shell fragment
-#
-
-SERVER_HOME=/etc/timidity
-SERVER_USER=timidity
-SERVER_NAME="TiMidity++ MIDI sequencer service"
-SERVER_GROUP=timidity
-ADDGROUP=audio
-
-# Enable MIDI sequencer (ALSA), if timidity-deamon is installed
-
-# uncomment to override enabling triggered by availability of timidity-deamon
-# TIM_ALSASEQ=false
-
-# Setting overrides (of /etc/timidity.conf) for the ALSA sequencer daemon
-TIM_ALSASEQPARAMS="-Os"

etcs/default/triggerhappy

@@ -1,17 +0,0 @@
-# Defaults for triggerhappy initscript
-# sourced by /etc/init.d/triggerhappy
-# installed at /etc/default/triggerhappy by the maintainer scripts
-
-#
-# This is a POSIX shell fragment
-#
-
-# Additional options that are passed to the Daemon.
-DAEMON_OPTS=""
-
-# The Triggerhappy daemon (thd) drops its root privileges after
-# startup and becomes "nobody". If you want it to retain its root
-# status (e.g. to run commands only accessible to the system user),
-# uncomment the following line or specifiy the user option yourself:
-#
-# DAEMON_OPTS="--user root"

etcs/default/useradd

@@ -1,37 +0,0 @@
-# Default values for useradd(8)
-#
-# The SHELL variable specifies the default login shell on your
-# system.
-# Similar to DHSELL in adduser. However, we use "sh" here because
-# useradd is a low level utility and should be as general
-# as possible
-SHELL=/bin/bash
-#
-# The default group for users
-# 100=users on Debian systems
-# Same as USERS_GID in adduser
-# This argument is used when the -n flag is specified.
-# The default behavior (when -n and -g are not specified) is to create a
-# primary user group with the same name as the user being added to the
-# system.
-# GROUP=100
-#
-# The default home directory. Same as DHOME for adduser
-# HOME=/home
-#
-# The number of days after a password expires until the account 
-# is permanently disabled
-# INACTIVE=-1
-#
-# The default expire date
-# EXPIRE=
-#
-# The SKEL variable specifies the directory containing "skeletal" user
-# files; in other words, files such as a sample .profile that will be
-# copied to the new user's home directory when it is created.
-SKEL=/etc/skel
-#
-# Defines whether the mail spool should be created while
-# creating the account
-# CREATE_MAIL_SPOOL=yes
-

etcs/dhcpcd.conf

@@ -1,59 +0,0 @@
-# A sample configuration for dhcpcd.
-# See dhcpcd.conf(5) for details.
-
-# Allow users of this group to interact with dhcpcd via the control socket.
-#controlgroup wheel
-
-# Inform the DHCP server of our hostname for DDNS.
-hostname
-
-# Use the hardware address of the interface for the Client ID.
-clientid
-# or
-# Use the same DUID + IAID as set in DHCPv6 for DHCPv4 ClientID as per RFC4361.
-# Some non-RFC compliant DHCP servers do not reply with this set.
-# In this case, comment out duid and enable clientid above.
-#duid
-
-# Persist interface configuration when dhcpcd exits.
-persistent
-
-# Rapid commit support.
-# Safe to enable by default because it requires the equivalent option set
-# on the server to actually work.
-option rapid_commit
-
-# A list of options to request from the DHCP server.
-option domain_name_servers, domain_name, domain_search, host_name
-option classless_static_routes
-# Most distributions have NTP support.
-option ntp_servers
-# Respect the network MTU. This is applied to DHCP routes.
-option interface_mtu
-
-# A ServerID is required by RFC2131.
-require dhcp_server_identifier
-
-# Generate Stable Private IPv6 Addresses instead of hardware based ones
-slaac private
-
-# Example static IP configuration:
-#interface eth0
-#static ip_address=192.168.0.10/24
-#static ip6_address=fd51:42f8:caae:d92e::ff/64
-#static routers=192.168.0.1
-#static domain_name_servers=192.168.0.1 8.8.8.8 fd51:42f8:caae:d92e::1
-
-# It is possible to fall back to a static IP if DHCP fails:
-# define static profile
-#profile static_eth0
-#static ip_address=192.168.1.23/24
-#static routers=192.168.1.1
-#static domain_name_servers=192.168.1.1
-
-# fallback to static profile on eth0
-#interface eth0
-#fallback static_eth0
-
-interface wlan0
-static ip_address=192.168.1.1/24

etcs/hostapd/edit_ssid.sh

@@ -0,0 +1,6 @@
+#!/bin/bash
+# edit_ssid.sh - edits hostapd.conf and sets a MAC address-based SSID
+cd `dirname $0`
+ssid=`ip link | awk '/wlan0/ {getline; print $2}' | awk -v FS=':' '{printf("TeraHz_%s%s%s\n", $4, $5, $6)}'`
+sed "/ssid=.*/s/ssid=.*/ssid=$ssid/" hostapd.conf > newconf
+mv newconf hostapd.conf

etcs/hostapd/ifupdown.sh

@@ -1,146 +0,0 @@
-#!/bin/sh
-
-# Copyright (C) 2006-2009 Debian hostapd maintainers 
-# 	Faidon Liambotis <paravoid@debian.org>
-#	Kel Modderman <kel@otaku42.de>
-#
-# This program is free software; you can redistribute it and/or
-# modify it under the terms of the GNU General Public License
-# as published by the Free Software Foundation; either version 2
-# of the License, or (at your option) any later version.
-#
-# This program is distributed in the hope that it will be useful,
-# but WITHOUT ANY WARRANTY; without even the implied warranty of
-# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-# GNU General Public License for more details.
-#
-# On Debian GNU/Linux systems, the text of the GPL license,
-# version 2, can be found in /usr/share/common-licenses/GPL-2.
-
-# quit if we're called for lo
-if [ "$IFACE" = lo ]; then
-	exit 0
-fi
-
-if [ -n "$IF_HOSTAPD" ]; then
-	HOSTAPD_CONF="$IF_HOSTAPD"
-else
-	exit 0
-fi
-
-HOSTAPD_BIN="/usr/sbin/hostapd"
-HOSTAPD_PNAME="hostapd"
-HOSTAPD_PIDFILE="/run/hostapd.$IFACE.pid"
-HOSTAPD_OMIT_PIDFILE="/run/sendsigs.omit.d/hostapd.$IFACE.pid"
-
-if [ ! -x "$HOSTAPD_BIN" ]; then
-	exit 0
-fi
-
-if [ "$VERBOSITY" = "1" ]; then
-	TO_NULL="/dev/stdout"
-else
-	TO_NULL="/dev/null"
-fi
-
-hostapd_msg () {
-	case "$1" in
-		verbose)
-			shift
-			echo "$HOSTAPD_PNAME: $@" > "$TO_NULL"
-			;;
-		stderr)
-			shift
-			echo "$HOSTAPD_PNAME: $@" > /dev/stderr
-			;;
-		*)
-			;;
-	esac
-}
-
-test_hostapd_pidfile () {
-	if [ -n "$1" ] && [ -f "$2" ]; then
-		if start-stop-daemon --stop --quiet --signal 0 \
-			--exec "$1" --pidfile "$2"; then
-			return 0
-		else
-			rm -f "$2"
-			return 1
-		fi
-	else
-		return 1
-	fi
-}
-
-init_hostapd () {
-	HOSTAPD_OPTIONS="-B -P $HOSTAPD_PIDFILE $HOSTAPD_CONF"
-	HOSTAPD_MESSAGE="$HOSTAPD_BIN $HOSTAPD_OPTIONS"
-	
-	test_hostapd_pidfile "$HOSTAPD_BIN" "$HOSTAPD_PIDFILE" && return 0
-
-	hostapd_msg verbose "$HOSTAPD_MESSAGE"
-	start-stop-daemon --start --oknodo --quiet --exec "$HOSTAPD_BIN" \
-		--pidfile "$HOSTAPD_PIDFILE" -- $HOSTAPD_OPTIONS > "$TO_NULL"
-
-	if [ "$?" -ne 0 ]; then
-		return "$?"
-	fi
-
-	HOSTAPD_PIDFILE_WAIT=0
-	until [ -s "$HOSTAPD_PIDFILE" ]; do
-		if [ "$HOSTAPD_PIDFILE_WAIT" -ge 5 ]; then
-			hostapd_msg stderr \
-				"timeout waiting for pid file creation"
-			return 1
-		fi
-
-		HOSTAPD_PIDFILE_WAIT=$(($HOSTAPD_PIDFILE_WAIT + 1))
-		sleep 1
-	done
-	cat "$HOSTAPD_PIDFILE" > "$HOSTAPD_OMIT_PIDFILE"
-
-	return 0
-}
-
-kill_hostapd () {
-	HOSTAPD_MESSAGE="stopping $HOSTAPD_PNAME via pidfile: $HOSTAPD_PIDFILE"
-
-	test_hostapd_pidfile "$HOSTAPD_BIN" "$HOSTAPD_PIDFILE" || return 0
-	
-	hostapd_msg verbose "$HOSTAPD_MESSAGE"
-	start-stop-daemon --stop --oknodo --quiet --exec "$HOSTAPD_BIN" \
-		--pidfile "$HOSTAPD_PIDFILE" > "$TO_NULL"
-	
-	[ "$HOSTAPD_OMIT_PIDFILE" ] && rm -f "$HOSTAPD_OMIT_PIDFILE"
-}
-
-case "$MODE" in 
-	start)
-		case "$PHASE" in
-			pre-up)
-				init_hostapd || exit 1
-				;;
-			*)
-				hostapd_msg stderr "unknown phase: \"$PHASE\""
-				exit 1
-				;;
-		esac
-		;;
-	stop)
-		case "$PHASE" in
-			post-down)
-				kill_hostapd
-				;;
-			*)
-				hostapd_msg stderr "unknown phase: \"$PHASE\""
-				exit 1
-				;;
-		esac
-		;;
-	*)
-		hostapd_msg stderr "unknown mode: \"$MODE\""
-		exit 1
-		;;
-esac
-
-exit 0

etcs/ifupdown.sh

@@ -1,146 +0,0 @@
-#!/bin/sh
-
-# Copyright (C) 2006-2009 Debian hostapd maintainers 
-# 	Faidon Liambotis <paravoid@debian.org>
-#	Kel Modderman <kel@otaku42.de>
-#
-# This program is free software; you can redistribute it and/or
-# modify it under the terms of the GNU General Public License
-# as published by the Free Software Foundation; either version 2
-# of the License, or (at your option) any later version.
-#
-# This program is distributed in the hope that it will be useful,
-# but WITHOUT ANY WARRANTY; without even the implied warranty of
-# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-# GNU General Public License for more details.
-#
-# On Debian GNU/Linux systems, the text of the GPL license,
-# version 2, can be found in /usr/share/common-licenses/GPL-2.
-
-# quit if we're called for lo
-if [ "$IFACE" = lo ]; then
-	exit 0
-fi
-
-if [ -n "$IF_HOSTAPD" ]; then
-	HOSTAPD_CONF="$IF_HOSTAPD"
-else
-	exit 0
-fi
-
-HOSTAPD_BIN="/usr/sbin/hostapd"
-HOSTAPD_PNAME="hostapd"
-HOSTAPD_PIDFILE="/run/hostapd.$IFACE.pid"
-HOSTAPD_OMIT_PIDFILE="/run/sendsigs.omit.d/hostapd.$IFACE.pid"
-
-if [ ! -x "$HOSTAPD_BIN" ]; then
-	exit 0
-fi
-
-if [ "$VERBOSITY" = "1" ]; then
-	TO_NULL="/dev/stdout"
-else
-	TO_NULL="/dev/null"
-fi
-
-hostapd_msg () {
-	case "$1" in
-		verbose)
-			shift
-			echo "$HOSTAPD_PNAME: $@" > "$TO_NULL"
-			;;
-		stderr)
-			shift
-			echo "$HOSTAPD_PNAME: $@" > /dev/stderr
-			;;
-		*)
-			;;
-	esac
-}
-
-test_hostapd_pidfile () {
-	if [ -n "$1" ] && [ -f "$2" ]; then
-		if start-stop-daemon --stop --quiet --signal 0 \
-			--exec "$1" --pidfile "$2"; then
-			return 0
-		else
-			rm -f "$2"
-			return 1
-		fi
-	else
-		return 1
-	fi
-}
-
-init_hostapd () {
-	HOSTAPD_OPTIONS="-B -P $HOSTAPD_PIDFILE $HOSTAPD_CONF"
-	HOSTAPD_MESSAGE="$HOSTAPD_BIN $HOSTAPD_OPTIONS"
-	
-	test_hostapd_pidfile "$HOSTAPD_BIN" "$HOSTAPD_PIDFILE" && return 0
-
-	hostapd_msg verbose "$HOSTAPD_MESSAGE"
-	start-stop-daemon --start --oknodo --quiet --exec "$HOSTAPD_BIN" \
-		--pidfile "$HOSTAPD_PIDFILE" -- $HOSTAPD_OPTIONS > "$TO_NULL"
-
-	if [ "$?" -ne 0 ]; then
-		return "$?"
-	fi
-
-	HOSTAPD_PIDFILE_WAIT=0
-	until [ -s "$HOSTAPD_PIDFILE" ]; do
-		if [ "$HOSTAPD_PIDFILE_WAIT" -ge 5 ]; then
-			hostapd_msg stderr \
-				"timeout waiting for pid file creation"
-			return 1
-		fi
-
-		HOSTAPD_PIDFILE_WAIT=$(($HOSTAPD_PIDFILE_WAIT + 1))
-		sleep 1
-	done
-	cat "$HOSTAPD_PIDFILE" > "$HOSTAPD_OMIT_PIDFILE"
-
-	return 0
-}
-
-kill_hostapd () {
-	HOSTAPD_MESSAGE="stopping $HOSTAPD_PNAME via pidfile: $HOSTAPD_PIDFILE"
-
-	test_hostapd_pidfile "$HOSTAPD_BIN" "$HOSTAPD_PIDFILE" || return 0
-	
-	hostapd_msg verbose "$HOSTAPD_MESSAGE"
-	start-stop-daemon --stop --oknodo --quiet --exec "$HOSTAPD_BIN" \
-		--pidfile "$HOSTAPD_PIDFILE" > "$TO_NULL"
-	
-	[ "$HOSTAPD_OMIT_PIDFILE" ] && rm -f "$HOSTAPD_OMIT_PIDFILE"
-}
-
-case "$MODE" in 
-	start)
-		case "$PHASE" in
-			pre-up)
-				init_hostapd || exit 1
-				;;
-			*)
-				hostapd_msg stderr "unknown phase: \"$PHASE\""
-				exit 1
-				;;
-		esac
-		;;
-	stop)
-		case "$PHASE" in
-			post-down)
-				kill_hostapd
-				;;
-			*)
-				hostapd_msg stderr "unknown phase: \"$PHASE\""
-				exit 1
-				;;
-		esac
-		;;
-	*)
-		hostapd_msg stderr "unknown mode: \"$MODE\""
-		exit 1
-		;;
-esac
-
-exit 0

etcs/install.sh

@@ -0,0 +1,23 @@
+# install.sh - install TeraHz onto a Raspbian Lite instance
+cd `dirname $0`
+
+apt -y update
+apt -y full-upgrade
+apt install -y python3 python3-pip lighttpd dnsmasq hostapd libatlas-base-dev
+pip3 install numpy pandas flask smbus2 pyserial gunicorn
+
+cp -R hostapd/* /etc/hostapd/
+chmod +rx /etc/hostapd/edit_ssid.sh
+cp dnsmasq.conf /etc/
+
+cp rc.local /etc/
+chmod +rx /etc/rc.local
+cp interfaces-terahz /etc/network/interfaces.d/
+
+cp -R ../frontend/* /var/www/html/
+
+mkdir -p /usr/local/lib/terahz
+cp -R ../backend/* /usr/local/lib/terahz
+
+systemctl unmask dnsmasq hostapd lighttpd
+systemctl enable dnsmasq hostapd lighttpd

etcs/interfaces-terahz

@@ -0,0 +1,3 @@
+iface wlan0 inet static
+  address 192.168.1.1
+  netmask 255.255.255.0

etcs/lighttpd/conf-available/05-auth.conf

@@ -1,25 +0,0 @@
-# /usr/share/doc/lighttpd/authentication.txt.gz
-
-server.modules                += ( "mod_auth" )
-
-# auth.backend                 = "plain"
-# auth.backend.plain.userfile  = "lighttpd.user"
-# auth.backend.plain.groupfile = "lighttpd.group"
-
-# auth.backend.ldap.hostname   = "localhost"
-# auth.backend.ldap.base-dn    = "dc=my-domain,dc=com"
-# auth.backend.ldap.filter     = "(uid=$)"
-
-# auth.require                 = ( "/server-status" => 
-#                                ( 
-#				  "method"  => "digest",
-#				  "realm"   => "download archiv",
-#				  "require" => "group=www|user=jan|host=192.168.2.10"
-#				),
-#				"/server-info" => 
-#                                ( 
-#				  "method"  => "digest",
-#				  "realm"   => "download archiv",
-#				  "require" => "group=www|user=jan|host=192.168.2.10"
-#				)
-#                              )

etcs/lighttpd/conf-available/10-accesslog.conf

@@ -1,3 +0,0 @@
-server.modules += ( "mod_accesslog" )
-
-accesslog.filename = "/var/log/lighttpd/access.log"

etcs/lighttpd/conf-available/10-cgi.conf

@@ -1,15 +0,0 @@
-# /usr/share/doc/lighttpd/cgi.txt
-
-server.modules += ( "mod_cgi" )
-
-$HTTP["url"] =~ "^/cgi-bin/" {
-	cgi.assign = ( "" => "" )
-}
-
-## Warning this represents a security risk, as it allow to execute any file
-## with a .pl/.py even outside of /usr/lib/cgi-bin.
-#
-#cgi.assign      = (
-#	".pl"  => "/usr/bin/perl",
-#	".py"  => "/usr/bin/python",
-#)

etcs/lighttpd/conf-available/10-dir-listing.conf

@@ -1,2 +0,0 @@
-dir-listing.encoding = "utf-8"
-server.dir-listing   = "enable"

etcs/lighttpd/conf-available/10-evasive.conf

@@ -1 +0,0 @@
-server.modules += ( "mod_evasive" )

etcs/lighttpd/conf-available/10-evhost.conf

@@ -1,5 +0,0 @@
-# http://redmine.lighttpd.net/wiki/1/Docs:ModEVhost
-
-server.modules += ( "mod_evhost" )
-
-evhost.path-pattern = "/srv/%_/htdocs"

etcs/lighttpd/conf-available/10-expire.conf

@@ -1,3 +0,0 @@
-# http://redmine.lighttpd.net/projects/lighttpd/wiki/Docs:ModExpire
-
-server.modules += ( "mod_expire" )

etcs/lighttpd/conf-available/10-fastcgi.conf

@@ -1,4 +0,0 @@
-# /usr/share/doc/lighttpd/fastcgi.txt.gz
-# http://redmine.lighttpd.net/projects/lighttpd/wiki/Docs:ConfigurationOptions#mod_fastcgi-fastcgi
-
-server.modules += ( "mod_fastcgi" )

etcs/lighttpd/conf-available/10-flv-streaming.conf

@@ -1 +0,0 @@
-server.modules += ( "mod_flv_streaming" )

etcs/lighttpd/conf-available/10-no-www.conf

@@ -1,3 +0,0 @@
-$HTTP["host"] =~ "^www\.(.*)" {
-  url.redirect = ( "^/(.*)" => "http://%1/$1" )
-}

etcs/lighttpd/conf-available/10-proxy.conf

@@ -1,25 +0,0 @@
-# /usr/share/doc/lighttpd/proxy.txt
-
-server.modules   += ( "mod_proxy" )
-
-## Balance algorithm, possible values are: "hash", "round-robin" or "fair" (default)
-# proxy.balance     = "hash" 
-
-
-## Redirect all queries to files ending with ".php" to 192.168.0.101:80 
-#proxy.server     = ( ".php" =>
-#                     ( 
-#                       ( "host" => "192.168.0.101",
-#                         "port" => 80
-#                       )
-#                     )
-#                    )
-
-## Redirect all connections on www.example.com to 10.0.0.1{0,1,2,3}
-#$HTTP["host"] == "www.example.com" {
-#  proxy.balance = "hash"
-#  proxy.server  = ( "" => ( ( "host" => "10.0.0.10" ),
-#                            ( "host" => "10.0.0.11" ),
-#                            ( "host" => "10.0.0.12" ),
-#                            ( "host" => "10.0.0.13" ) ) )
-#}

etcs/lighttpd/conf-available/10-rewrite.conf

@@ -1,4 +0,0 @@
-# /usr/share/doc/lighttpd/rewrite.txt
-# http://redmine.lighttpd.net/projects/lighttpd/wiki/Docs_ConfigurationOptions#mod_rewrite-rewriting
-
-server.modules += ( "mod_rewrite" )

etcs/lighttpd/conf-available/10-rrdtool.conf

@@ -1,10 +0,0 @@
-# /usr/share/doc/lighttpd/rrdtool.txt
-
-server.modules += ( "mod_rrdtool" )
-
-## path to the rrdtool binary
-rrdtool.binary   = "/usr/bin/rrdtool"
-
-## file to store the rrd database, will be created by lighttpd
-rrdtool.db-name   = "/var/www/lighttpd.rrd"
-

etcs/lighttpd/conf-available/10-simple-vhost.conf

@@ -1,11 +0,0 @@
-# /usr/share/doc/lighttpd/simple-vhost.txt
-
-server.modules += ( "mod_simple_vhost" )
-
-## The document root of a virtual host is document-root =
-##   simple-vhost.server-root + $HTTP["host"] + simple-vhost.document-root
-simple-vhost.server-root         = "/srv"
-simple-vhost.document-root       = "htdocs"
-
-## the default host if no host is sent
-simple-vhost.default-host        = "www.example.com"

etcs/lighttpd/conf-available/10-ssi.conf

@@ -1,5 +0,0 @@
-# /usr/share/doc/lighttpd/ssi.txt
-
-server.modules += ( "mod_ssi" )
-
-ssi.extension   = ( ".shtml" )

etcs/lighttpd/conf-available/10-ssl.conf

@@ -1,9 +0,0 @@
-# /usr/share/doc/lighttpd/ssl.txt
-
-$SERVER["socket"] == "0.0.0.0:443" {
-	ssl.engine  = "enable"
-	ssl.pemfile = "/etc/lighttpd/server.pem"
-
-	ssl.cipher-list = "ECDHE-RSA-AES256-SHA384:AES256-SHA256:RC4:HIGH:!MD5:!aNULL:!EDH:!AESGCM"
-	ssl.honor-cipher-order = "enable"
-}

etcs/lighttpd/conf-available/10-status.conf

@@ -1,15 +0,0 @@
-# /usr/share/doc/lighttpd/status.txt
-# http://trac.lighttpd.net/trac/wiki/Docs%3AModStatus
-
-server.modules += ( "mod_status" )
-
-# status.status-url = "/server-status"
-
-# status.config-url = "/server-config"
-
-## relative URL for a plain-text page containing the internal statistics
-# status.statistics-url = "/server-statistics"
-
-## add JavaScript which allows client-side sorting for the connection overview
-## default: enable
-# status.enable-sort = "disable"

etcs/lighttpd/conf-available/10-userdir.conf

@@ -1,13 +0,0 @@
-## The userdir module provides a simple way to link user-based directories into
-## the global namespace of the webserver.
-##
-# /usr/share/doc/lighttpd/userdir.txt
-
-server.modules      += ( "mod_userdir" )
-
-## the subdirectory of a user's home dir which should be accessible
-## under http://$host/~$user
-userdir.path         = "public_html"
-
-## The users whose home directories should not be accessible
-userdir.exclude-user = ( "root", "postmaster" )

etcs/lighttpd/conf-available/10-usertrack.conf

@@ -1 +0,0 @@
-server.modules += ( "mod_usertrack" )

etcs/lighttpd/conf-available/11-extforward.conf

@@ -1,6 +0,0 @@
-# -*- depends: accesslog -*-
-
-server.modules += ( "mod_extforward" )
-
-# extforward.headers = ("X-Cluster-Client-Ip")
-# extforward.forwarder = ("10.0.0.232" => "trust")

etcs/lighttpd/conf-available/15-fastcgi-php.conf

@@ -1,20 +0,0 @@
-# -*- depends: fastcgi -*-
-# /usr/share/doc/lighttpd/fastcgi.txt.gz
-# http://redmine.lighttpd.net/projects/lighttpd/wiki/Docs:ConfigurationOptions#mod_fastcgi-fastcgi
-
-## Start an FastCGI server for php (needs the php5-cgi package)
-fastcgi.server += ( ".php" => 
-	((
-		"bin-path" => "/usr/bin/php-cgi",
-		"socket" => "/var/run/lighttpd/php.socket",
-		"max-procs" => 1,
-		"bin-environment" => ( 
-			"PHP_FCGI_CHILDREN" => "4",
-			"PHP_FCGI_MAX_REQUESTS" => "10000"
-		),
-		"bin-copy-environment" => (
-			"PATH", "SHELL", "USER"
-		),
-		"broken-scriptfilename" => "enable"
-	))
-)

etcs/lighttpd/conf-available/90-debian-doc.conf

@@ -1,15 +0,0 @@
-#### handle Debian Policy Manual, Section 11.5. urls
-## by default allow them only from localhost
-$HTTP["remoteip"] =~ "^127\.0\.0\.1$|^::1$" {
-        alias.url += (
-		"/cgi-bin/" => "/usr/lib/cgi-bin/",
-                "/doc/" => "/usr/share/doc/",
-                "/images/" => "/usr/share/images/"
-        )
-        $HTTP["url"] =~ "^/doc/|^/images/" {
-                dir-listing.activate = "enable"
-        }
-        $HTTP["url"] =~ "^/cgi-bin/" {
-                cgi.assign = ( "" => "" )
-        }
-}

etcs/lighttpd/conf-available/90-javascript-alias.conf

@@ -1 +0,0 @@
-alias.url += ("/javascript" => "/usr/share/javascript")

etcs/lighttpd/conf-available/README

@@ -1,22 +0,0 @@
-ligghttpd Configuration under Debian GNU/Linux
-==============================================
-
-Files and Directories in /etc/lighttpd:
----------------------------------------
-
-lighttpd.conf:
-	 main configuration file
-
-conf-available/
-	This directory contains a series of .conf files. These files contain
-        configuration directives necessary to load and run webserver modules.
-	If you want to create your own files they names should be
-        build as nn-name.conf where "nn" is two digit number (number
-	is used to find order for loading files)
-
-conf-enabled/	  
-	To actually enable a module for lighttpd, it is necessary to create a 
-        symlink in this directory to the .conf file in conf-available/.
-
-Enabling and disabling modules could be done by provided
-/usr/sbin/lighty-enable-mod and /usr/sbin/lighty-disable-mod scripts. 

etcs/lighttpd/conf-enabled/90-javascript-alias.conf

@@ -1 +0,0 @@
-../conf-available/90-javascript-alias.conf

etcs/lighttpd/lighttpd.conf

@@ -1,27 +0,0 @@
-server.modules = (
-	"mod_access",
-	"mod_alias",
-	"mod_compress",
- 	"mod_redirect",
-)
-
-server.document-root        = "/home/terahz/TeraHz/frontend"
-server.upload-dirs          = ( "/var/cache/lighttpd/uploads" )
-server.errorlog             = "/var/log/lighttpd/error.log"
-server.pid-file             = "/var/run/lighttpd.pid"
-server.username             = "www-data"
-server.groupname            = "www-data"
-server.port                 = 80
-
-
-index-file.names            = ( "index.php", "index.html", "index.lighttpd.html" )
-url.access-deny             = ( "~", ".inc" )
-static-file.exclude-extensions = ( ".php", ".pl", ".fcgi" )
-
-compress.cache-dir          = "/var/cache/lighttpd/compress/"
-compress.filetype           = ( "application/javascript", "text/css", "text/html", "text/plain" )
-
-# default listening port for IPv6 falls back to the IPv4 port
-include_shell "/usr/share/lighttpd/use-ipv6.pl " + server.port
-include_shell "/usr/share/lighttpd/create-mime.assign.pl"
-include_shell "/usr/share/lighttpd/include-conf-enabled.pl"

etcs/rc.local

@@ -10,10 +10,7 @@
 # bits.
 #
 # By default this script does nothing.
-
-# Print the IP address
-
-cd /home/pi/TeraHz/backend
-service lighttpd start
-flask run -h 0.0.0.0 &
-exit 0
+/etc/hostapd/edit_ssid.sh &
+/usr/local/lib/terahz/run.sh &
+sleep 3
+service hostapd restart # restart hostapd to prevent a weird startup race condition

etcs/resolvconf.conf

@@ -1,14 +0,0 @@
-# Configuration for resolvconf(8)
-# See resolvconf.conf(5) for details
-
-resolv_conf=/etc/resolv.conf
-# If you run a local name server, you should uncomment the below line and
-# configure your subscribers configuration files below.
-name_servers=1.1.1.1
-
-# Mirror the Debian package defaults for the below resolvers
-# so that resolvconf integrates seemlessly.
-#dnsmasq_resolv=/var/run/dnsmasq/resolv.conf
-#pdnsd_conf=/etc/pdnsd.conf
-#unbound_conf=/var/cache/unbound/resolvconf_resolvers.conf
-resolvconf=NO

frontend/frontend.js

@@ -1,56 +1,44 @@
 // All code in this file is licensed under the ISC license, provided in LICENSE.txt
-var globalObject;
-$('#update').click(function () {
-  updateData();
-});
+$('#update').click(updateData);
 // jQuery event binder
 
 function updateData () {
-  // download data from backend into obj
   const url = 'http://' + window.location.hostname + ':5000/data';
-  // I understand how bad this line looks. Please don't judge me...
-  $.get(url, function (data, status) { // standard jQuery AJAX
-    globalObject = data;
-  })
-    .done(function () {
-      fillTable(globalObject, $('#specter'));
-      graphSpectralData(globalObject, $('#spectrogram'));
-      fillLuxUv(globalObject, $('#luxuv'));
-    });
-}
-
-function fillTable (obj, dom) {
-  // applies data in obj[0] to HTML tags with the obj's key as ID.
-  // useful mostly for slapping spectrometer JSON into HTML tables.
-  for (var i in obj[0]) {
-    $(dom).find('#' + i).text(obj[0][i]);
-  }
+  $.ajax({ // spawn an AJAX request
+    url: url,
+    success: function (data, status) {
+      console.log(data);
+      graphSpectralData(data[0], 0);
+      fillTableData(data);
+    },
+    timeout: 2500 // this should be a pretty sane timeout
+  });
 }
 
 function graphSpectralData (obj, dom) {
-  // graphs the data from obj[0] into canvas at dom
-  var arr = [];
-  ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'R', 'I', 'S', 'J', 'T', 'U', 'V', 'W', 'K', 'L'].forEach(function (i) {
-    arr.push(obj[0][i]);
-  });
-  var chart = new Chart(dom, {
-    type: 'line',
-    data: {
-      labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'R', 'I', 'S', 'J', 'T', 'U', 'V', 'W', 'K', 'L'],
-      datasets: [{
-        label: 'Spectrometer data',
-        data: arr
-      }]
-    },
-    options: {
-      responsive: false
-    }
-  });
+  // graph spectral data in obj into dom
+  var graphPoints = [];
+  var graphXTicks = [];
+
+  const specter = 'ABCDEFGHRISJTUVWKL';
+  for (var i = 0; i < specter.length; i++) {
+    graphPoints.push([i, obj[specter[i]]]);
+    graphXTicks.push([i, specter[i]]);
+  }
+  const options = {
+    grid: { color: 'white' },
+    xaxis: { ticks: graphXTicks }
+  };
+  $.plot('#graph', [graphPoints], options);
+  // flot expects an array of arrays (lines) of 2-element arrays (points)
 }
 
-function fillLuxUv (obj, dom) {
-  $(dom).find('#lx').text(obj[1]);
-  $(dom).find('#uva').text(obj[2][0]);
-  $(dom).find('#uvb').text(obj[2][1]);
-  $(dom).find('#uvi').text(obj[2][2]);
+function fillTableData (obj) {
+  // fill the obj data into HTML tables
+  Object.keys(obj[0])
+    .forEach((element) => { $('#' + element).text(obj[0][element]); });
+  $('#lx').text(obj[1]);
+  $('#uva').text(obj[2][0]);
+  $('#uvb').text(obj[2][1]);
+  $('#uvi').text(obj[2][2]);
 }

frontend/index.html

@@ -6,149 +6,168 @@
   <link rel="stylesheet" href="lib/bootstrap.min.css">
   <link rel="stylesheet" href="stylesheet.css">
   <title>TeraHz</title>
+  <script src="lib/bootstrap.bundle.min.js"></script>
+  <script src="lib/jquery-3.4.1.min.js"></script>
+  <script src="lib/flot/jquery.flot.js"></script>
+  <script src="frontend.js"></script>
+  <script src="lib/flot/jquery.canvaswrapper.js"></script>
+  <script src="lib/flot/jquery.colorhelpers.js"></script>
+  <script src="lib/flot/jquery.flot.js"></script>
+  <script src="lib/flot/jquery.flot.saturated.js"></script>
+  <script src="lib/flot/jquery.flot.browser.js"></script>
+  <script src="lib/flot/jquery.flot.drawSeries.js"></script>
+  <script src="lib/flot/jquery.flot.uiConstants.js"></script>
 </head>
 
 <body>
   <div class="container text-center">
-    <h1>TeraHz</h1>
+    <h1><img src="lib/logo-sq.png" height="64px">TeraHz</h1>
   </div>
-  <div class="container">
-    <button id="update" class="btn btn-primary m-1 float-right">Get data</button>
-    <p id="debug">
-    </p>
-    <h3>Spectrogram</h3>
-    <canvas id="spectrogram" width="640px" height="480"></canvas>
-    <h3>Spectral readings</h3>
-    <table class="table table-sm" id="specter">
-      <thead class="thead-dark">
-        <tr>
-          <th>Band</th>
-          <th>Wavelength [nm]</th>
-          <th>Irradiance [μW/cm²]</th>
-        </tr>
-      </thead>
-      <tr>
-        <td>A</td>
-        <td>410 nm</td>
-        <td id="A">---</td>
-      </tr>
-      <tr>
-        <td>B</td>
-        <td>435 nm</td>
-        <td id="B">---</td>
-      </tr>
-      <tr>
-        <td>C</td>
-        <td>460 nm</td>
-        <td id="C">---</td>
-      </tr>
-      <tr>
-        <td>D</td>
-        <td>485 nm</td>
-        <td id="D">---</td>
-      </tr>
-      <tr>
-        <td>E</td>
-        <td>510 nm</td>
-        <td id="E">---</td>
-      </tr>
-      <tr>
-        <td>F</td>
-        <td>535 nm</td>
-        <td id="F">---</td>
-      </tr>
-      <tr>
-        <td>G</td>
-        <td>560 nm</td>
-        <td id="G">---</td>
-      </tr>
-      <tr>
-        <td>H</td>
-        <td>585 nm</td>
-        <td id="H">---</td>
-      </tr>
-      <tr>
-        <td>R</td>
-        <td>610 nm</td>
-        <td id="R">---</td>
-      </tr>
-      <tr>
-        <td>I</td>
-        <td>645 nm</td>
-        <td id="I">---</td>
-      </tr>
-      <tr>
-        <td>S</td>
-        <td>680 nm</td>
-        <td id="S">---</td>
-      </tr>
-      <tr>
-        <td>J</td>
-        <td>705 nm</td>
-        <td id="J">---</td>
-      </tr>
-      <tr>
-        <td>T</td>
-        <td>730 nm</td>
-        <td id="T">---</td>
-      </tr>
-      <tr>
-        <td>U</td>
-        <td>760 nm</td>
-        <td id="U">---</td>
-      </tr>
-      <tr class="table-secondary">
-        <td>V</td>
-        <td>810 nm</td>
-        <td id="V">---</td>
-      </tr>
-      <tr class="table-secondary">
-        <td>W</td>
-        <td>860 nm</td>
-        <td id="W">---</td>
-      </tr>
-      <tr class="table-secondary">
-        <td>K</td>
-        <td>900 nm</td>
-        <td id="K">---</td>
-      </tr>
-      <tr class="table-secondary">
-        <td>L</td>
-        <td>940 nm</td>
-        <td id="L">---</td>
-      </tr>
-    </table>
-    <br>
-    <h3>Lux and UV readings</h3>
-    <table class="table" id="luxuv">
-      <thead class="thead-dark">
-        <tr>
-          <th>Parameter</th>
-          <th>Value</th>
-        </tr>
-      </thead>
-      <tr>
-        <td>Illuminance [lx]</td>
-        <td id="lx">---</td>
-      </tr>
-      <tr>
-        <td>UVA irradiance [μW/cm²]</td>
-        <td id="uva">---</td>
-      </tr>
-      <tr>
-        <td>UVB irradiance [μW/cm²]</td>
-        <td id="uvb">---</td>
-      </tr>
-      <tr>
-        <td>UVA/UVB average [μW/cm²]</td>
-        <td id="uvi">---</td>
-      </tr>
-    </table>
-  </div>
-  <script src="lib/bootstrap.bundle.min.js"></script>
-  <script src="lib/jquery-3.4.1.min.js"></script>
-  <script src="lib/chart.bundle.js"></script>
-  <script src="frontend.js"></script>
-</body>
 
+  <div class="container">
+    <button id="update" onclick="updateData()" class="btn btn-primary">Get data</button>
+    <!-- <button id="download" class="btn btn-primary">Download</button>
+    <button id="debug" class="btn btn-danger">DEBUG</button> -->
+  </div>
+
+  <div class="container">
+    <div class="row">
+    <div class="col-sm">
+      <h4>Spectrogram</h4>
+      <div id="graph" style="height:480px;width:720px"></div>
+    </div>
+
+    <div class="col-sm">
+      <h4>Visible+IR spectrum</h4>
+      <table class="table table-dark table-sm" id="specter">
+        <thead class="thead-dark">
+          <tr>
+            <th>Band</th>
+            <th>Wavelength [nm]</th>
+            <th>Irradiance [μW/cm²]</th>
+          </tr>
+        </thead>
+        <tr>
+          <td>A</td>
+          <td>410 nm</td>
+          <td id="A">---</td>
+        </tr>
+        <tr>
+          <td>B</td>
+          <td>435 nm</td>
+          <td id="B">---</td>
+        </tr>
+        <tr>
+          <td>C</td>
+          <td>460 nm</td>
+          <td id="C">---</td>
+        </tr>
+        <tr>
+          <td>D</td>
+          <td>485 nm</td>
+          <td id="D">---</td>
+        </tr>
+        <tr>
+          <td>E</td>
+          <td>510 nm</td>
+          <td id="E">---</td>
+        </tr>
+        <tr>
+          <td>F</td>
+          <td>535 nm</td>
+          <td id="F">---</td>
+        </tr>
+        <tr>
+          <td>G</td>
+          <td>560 nm</td>
+          <td id="G">---</td>
+        </tr>
+        <tr>
+          <td>H</td>
+          <td>585 nm</td>
+          <td id="H">---</td>
+        </tr>
+        <tr>
+          <td>R</td>
+          <td>610 nm</td>
+          <td id="R">---</td>
+        </tr>
+        <tr>
+          <td>I</td>
+          <td>645 nm</td>
+          <td id="I">---</td>
+        </tr>
+        <tr>
+          <td>S</td>
+          <td>680 nm</td>
+          <td id="S">---</td>
+        </tr>
+        <tr>
+          <td>J</td>
+          <td>705 nm</td>
+          <td id="J">---</td>
+        </tr>
+        <tr>
+          <td>T</td>
+          <td>730 nm</td>
+          <td id="T">---</td>
+        </tr>
+        <tr>
+          <td>U</td>
+          <td>760 nm</td>
+          <td id="U">---</td>
+        </tr>
+        <tr class="table-secondary">
+          <td>V</td>
+          <td>810 nm</td>
+          <td id="V">---</td>
+        </tr>
+        <tr class="table-secondary">
+          <td>W</td>
+          <td>860 nm</td>
+          <td id="W">---</td>
+        </tr>
+        <tr class="table-secondary">
+          <td>K</td>
+          <td>900 nm</td>
+          <td id="K">---</td>
+        </tr>
+        <tr class="table-secondary">
+          <td>L</td>
+          <td>940 nm</td>
+          <td id="L">---</td>
+        </tr>
+      </table>
+    </div>
+
+    <div class="col-sm">
+      <h4>UV+Illuminance</h4>
+      <table class="table-dark table table-sm" id="luxuv">
+        <thead class="thead-dark">
+          <tr>
+            <th>Parameter</th>
+            <th>Value</th>
+          </tr>
+        </thead>
+        <tr>
+          <td>Illuminance [lx]</td>
+          <td id="lx">---</td>
+        </tr>
+        <tr>
+          <td>UVA irradiance [μW/cm²]</td>
+          <td id="uva">---</td>
+        </tr>
+        <tr>
+          <td>UVB irradiance [μW/cm²]</td>
+          <td id="uvb">---</td>
+        </tr>
+        <tr>
+          <td>UVA/UVB average [μW/cm²]</td>
+          <td id="uvi">---</td>
+        </tr>
+      </table>
+    </div>
+    </div>
+  </div>
+</body>
 </html>

frontend/lib/flot/jquery.canvaswrapper.js

@@ -0,0 +1,550 @@
+/** ## jquery.flot.canvaswrapper
+
+This plugin contains the function for creating and manipulating both the canvas
+layers and svg layers.
+
+The Canvas object is a wrapper around an HTML5 canvas tag.
+The constructor Canvas(cls, container) takes as parameters cls,
+the list of classes to apply to the canvas adnd the containter,
+element onto which to append the canvas. The canvas operations
+don't work unless the canvas is attached to the DOM.
+
+### jquery.canvaswrapper.js API functions
+*/
+
+(function($) {
+    var Canvas = function(cls, container) {
+        var element = container.getElementsByClassName(cls)[0];
+
+        if (!element) {
+            element = document.createElement('canvas');
+            element.className = cls;
+            element.style.direction = 'ltr';
+            element.style.position = 'absolute';
+            element.style.left = '0px';
+            element.style.top = '0px';
+
+            container.appendChild(element);
+
+            // If HTML5 Canvas isn't available, throw
+
+            if (!element.getContext) {
+                throw new Error('Canvas is not available.');
+            }
+        }
+
+        this.element = element;
+
+        var context = this.context = element.getContext('2d');
+        this.pixelRatio = $.plot.browser.getPixelRatio(context);
+
+        // Size the canvas to match the internal dimensions of its container
+        var width = $(container).width();
+        var height = $(container).height();
+        this.resize(width, height);
+
+        // Collection of HTML div layers for text overlaid onto the canvas
+
+        this.SVGContainer = null;
+        this.SVG = {};
+
+        // Cache of text fragments and metrics, so we can avoid expensively
+        // re-calculating them when the plot is re-rendered in a loop.
+
+        this._textCache = {};
+    }
+
+    /**
+    - resize(width, height)
+
+     Resizes the canvas to the given dimensions.
+     The width represents the new width of the canvas, meanwhile the height
+     is the new height of the canvas, both of them in pixels.
+    */
+
+    Canvas.prototype.resize = function(width, height) {
+        var minSize = 10;
+        width = width < minSize ? minSize : width;
+        height = height < minSize ? minSize : height;
+
+        var element = this.element,
+            context = this.context,
+            pixelRatio = this.pixelRatio;
+
+        // Resize the canvas, increasing its density based on the display's
+        // pixel ratio; basically giving it more pixels without increasing the
+        // size of its element, to take advantage of the fact that retina
+        // displays have that many more pixels in the same advertised space.
+
+        // Resizing should reset the state (excanvas seems to be buggy though)
+
+        if (this.width !== width) {
+            element.width = width * pixelRatio;
+            element.style.width = width + 'px';
+            this.width = width;
+        }
+
+        if (this.height !== height) {
+            element.height = height * pixelRatio;
+            element.style.height = height + 'px';
+            this.height = height;
+        }
+
+        // Save the context, so we can reset in case we get replotted.  The
+        // restore ensure that we're really back at the initial state, and
+        // should be safe even if we haven't saved the initial state yet.
+
+        context.restore();
+        context.save();
+
+        // Scale the coordinate space to match the display density; so even though we
+        // may have twice as many pixels, we still want lines and other drawing to
+        // appear at the same size; the extra pixels will just make them crisper.
+
+        context.scale(pixelRatio, pixelRatio);
+    };
+
+    /**
+    - clear()
+
+     Clears the entire canvas area, not including any overlaid HTML text
+    */
+    Canvas.prototype.clear = function() {
+        this.context.clearRect(0, 0, this.width, this.height);
+    };
+
+    /**
+    - render()
+
+     Finishes rendering the canvas, including managing the text overlay.
+    */
+    Canvas.prototype.render = function() {
+        var cache = this._textCache;
+
+        // For each text layer, add elements marked as active that haven't
+        // already been rendered, and remove those that are no longer active.
+
+        for (var layerKey in cache) {
+            if (hasOwnProperty.call(cache, layerKey)) {
+                var layer = this.getSVGLayer(layerKey),
+                    layerCache = cache[layerKey];
+
+                var display = layer.style.display;
+                layer.style.display = 'none';
+
+                for (var styleKey in layerCache) {
+                    if (hasOwnProperty.call(layerCache, styleKey)) {
+                        var styleCache = layerCache[styleKey];
+                        for (var key in styleCache) {
+                            if (hasOwnProperty.call(styleCache, key)) {
+                                var val = styleCache[key],
+                                    positions = val.positions;
+
+                                for (var i = 0, position; positions[i]; i++) {
+                                    position = positions[i];
+                                    if (position.active) {
+                                        if (!position.rendered) {
+                                            layer.appendChild(position.element);
+                                            position.rendered = true;
+                                        }
+                                    } else {
+                                        positions.splice(i--, 1);
+                                        if (position.rendered) {
+                                            while (position.element.firstChild) {
+                                                position.element.removeChild(position.element.firstChild);
+                                            }
+                                            position.element.parentNode.removeChild(position.element);
+                                        }
+                                    }
+                                }
+
+                                if (positions.length === 0) {
+                                    if (val.measured) {
+                                        val.measured = false;
+                                    } else {
+                                        delete styleCache[key];
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+
+                layer.style.display = display;
+            }
+        }
+    };
+
+    /**
+    - getSVGLayer(classes)
+
+     Creates (if necessary) and returns the SVG overlay container.
+     The classes string represents the string of space-separated CSS classes
+     used to uniquely identify the text layer. It return the svg-layer div.
+    */
+    Canvas.prototype.getSVGLayer = function(classes) {
+        var layer = this.SVG[classes];
+
+        // Create the SVG layer if it doesn't exist
+
+        if (!layer) {
+            // Create the svg layer container, if it doesn't exist
+
+            var svgElement;
+
+            if (!this.SVGContainer) {
+                this.SVGContainer = document.createElement('div');
+                this.SVGContainer.className = 'flot-svg';
+                this.SVGContainer.style.position = 'absolute';
+                this.SVGContainer.style.top = '0px';
+                this.SVGContainer.style.left = '0px';
+                this.SVGContainer.style.height = '100%';
+                this.SVGContainer.style.width = '100%';
+                this.SVGContainer.style.pointerEvents = 'none';
+                this.element.parentNode.appendChild(this.SVGContainer);
+
+                svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+                svgElement.style.width = '100%';
+                svgElement.style.height = '100%';
+
+                this.SVGContainer.appendChild(svgElement);
+            } else {
+                svgElement = this.SVGContainer.firstChild;
+            }
+
+            layer = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+            layer.setAttribute('class', classes);
+            layer.style.position = 'absolute';
+            layer.style.top = '0px';
+            layer.style.left = '0px';
+            layer.style.bottom = '0px';
+            layer.style.right = '0px';
+            svgElement.appendChild(layer);
+            this.SVG[classes] = layer;
+        }
+
+        return layer;
+    };
+
+    /**
+    - getTextInfo(layer, text, font, angle, width)
+
+     Creates (if necessary) and returns a text info object.
+     The object looks like this:
+     ```js
+     {
+         width //Width of the text's wrapper div.
+         height //Height of the text's wrapper div.
+         element //The HTML div containing the text.
+         positions //Array of positions at which this text is drawn.
+      }
+      ```
+      The positions array contains objects that look like this:
+      ```js
+      {
+         active //Flag indicating whether the text should be visible.
+         rendered //Flag indicating whether the text is currently visible.
+         element //The HTML div containing the text.
+         text //The actual text and is identical with element[0].textContent.
+         x //X coordinate at which to draw the text.
+         y //Y coordinate at which to draw the text.
+      }
+      ```
+      Each position after the first receives a clone of the original element.
+      The idea is that that the width, height, and general 'identity' of the
+      text is constant no matter where it is placed; the placements are a
+      secondary property.
+
+      Canvas maintains a cache of recently-used text info objects; getTextInfo
+      either returns the cached element or creates a new entry.
+
+     The layer parameter is string of space-separated CSS classes uniquely
+     identifying the layer containing this text.
+     Text is the text string to retrieve info for.
+     Font is either a string of space-separated CSS classes or a font-spec object,
+     defining the text's font and style.
+     Angle is the angle at which to rotate the text, in degrees. Angle is currently unused,
+     it will be implemented in the future.
+     The last parameter is the Maximum width of the text before it wraps.
+     The method returns a text info object.
+    */
+    Canvas.prototype.getTextInfo = function(layer, text, font, angle, width) {
+        var textStyle, layerCache, styleCache, info;
+
+        // Cast the value to a string, in case we were given a number or such
+
+        text = '' + text;
+
+        // If the font is a font-spec object, generate a CSS font definition
+
+        if (typeof font === 'object') {
+            textStyle = font.style + ' ' + font.variant + ' ' + font.weight + ' ' + font.size + 'px/' + font.lineHeight + 'px ' + font.family;
+        } else {
+            textStyle = font;
+        }
+
+        // Retrieve (or create) the cache for the text's layer and styles
+
+        layerCache = this._textCache[layer];
+
+        if (layerCache == null) {
+            layerCache = this._textCache[layer] = {};
+        }
+
+        styleCache = layerCache[textStyle];
+
+        if (styleCache == null) {
+            styleCache = layerCache[textStyle] = {};
+        }
+
+        var key = generateKey(text);
+        info = styleCache[key];
+
+        // If we can't find a matching element in our cache, create a new one
+
+        if (!info) {
+            var element = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+            if (text.indexOf('<br>') !== -1) {
+                addTspanElements(text, element, -9999);
+            } else {
+                var textNode = document.createTextNode(text);
+                element.appendChild(textNode);
+            }
+
+            element.style.position = 'absolute';
+            element.style.maxWidth = width;
+            element.setAttributeNS(null, 'x', -9999);
+            element.setAttributeNS(null, 'y', -9999);
+
+            if (typeof font === 'object') {
+                element.style.font = textStyle;
+                element.style.fill = font.fill;
+            } else if (typeof font === 'string') {
+                element.setAttribute('class', font);
+            }
+
+            this.getSVGLayer(layer).appendChild(element);
+            var elementRect = element.getBBox();
+
+            info = styleCache[key] = {
+                width: elementRect.width,
+                height: elementRect.height,
+                measured: true,
+                element: element,
+                positions: []
+            };
+
+            //remove elements from dom
+            while (element.firstChild) {
+                element.removeChild(element.firstChild);
+            }
+            element.parentNode.removeChild(element);
+        }
+
+        info.measured = true;
+        return info;
+    };
+
+    function updateTransforms (element, transforms) {
+        element.transform.baseVal.clear();
+        if (transforms) {
+            transforms.forEach(function(t) {
+                element.transform.baseVal.appendItem(t);
+            });
+        }
+    }
+
+    /**
+    - addText (layer, x, y, text, font, angle, width, halign, valign, transforms)
+
+     Adds a text string to the canvas text overlay.
+     The text isn't drawn immediately; it is marked as rendering, which will
+     result in its addition to the canvas on the next render pass.
+
+     The layer is string of space-separated CSS classes uniquely
+     identifying the layer containing this text.
+     X and Y represents the X and Y coordinate at which to draw the text.
+     and text is the string to draw
+    */
+    Canvas.prototype.addText = function(layer, x, y, text, font, angle, width, halign, valign, transforms) {
+        var info = this.getTextInfo(layer, text, font, angle, width),
+            positions = info.positions;
+
+        // Tweak the div's position to match the text's alignment
+
+        if (halign === 'center') {
+            x -= info.width / 2;
+        } else if (halign === 'right') {
+            x -= info.width;
+        }
+
+        if (valign === 'middle') {
+            y -= info.height / 2;
+        } else if (valign === 'bottom') {
+            y -= info.height;
+        }
+
+        y += 0.75 * info.height;
+
+
+        // Determine whether this text already exists at this position.
+        // If so, mark it for inclusion in the next render pass.
+
+        for (var i = 0, position; positions[i]; i++) {
+            position = positions[i];
+            if (position.x === x && position.y === y && position.text === text) {
+                position.active = true;
+                // update the transforms
+                updateTransforms(position.element, transforms);
+
+                return;
+            } else if (position.active === false) {
+                position.active = true;
+                position.text = text;
+                if (text.indexOf('<br>') !== -1) {
+                    y -= 0.25 * info.height;
+                    addTspanElements(text, position.element, x);
+                } else {
+                    position.element.textContent = text;
+                }
+                position.element.setAttributeNS(null, 'x', x);
+                position.element.setAttributeNS(null, 'y', y);
+                position.x = x;
+                position.y = y;
+                // update the transforms
+                updateTransforms(position.element, transforms);
+
+                return;
+            }
+        }
+
+        // If the text doesn't exist at this position, create a new entry
+
+        // For the very first position we'll re-use the original element,
+        // while for subsequent ones we'll clone it.
+
+        position = {
+            active: true,
+            rendered: false,
+            element: positions.length ? info.element.cloneNode() : info.element,
+            text: text,
+            x: x,
+            y: y
+        };
+
+        positions.push(position);
+
+        if (text.indexOf('<br>') !== -1) {
+            y -= 0.25 * info.height;
+            addTspanElements(text, position.element, x);
+        } else {
+            position.element.textContent = text;
+        }
+
+        // Move the element to its final position within the container
+        position.element.setAttributeNS(null, 'x', x);
+        position.element.setAttributeNS(null, 'y', y);
+        position.element.style.textAlign = halign;
+        // update the transforms
+        updateTransforms(position.element, transforms);
+   };
+
+    var addTspanElements = function(text, element, x) {
+        var lines = text.split('<br>'),
+            tspan, i, offset;
+
+        for (i = 0; i < lines.length; i++) {
+            if (!element.childNodes[i]) {
+                tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+                element.appendChild(tspan);
+            } else {
+                tspan = element.childNodes[i];
+            }
+            tspan.textContent = lines[i];
+            offset = i * 1 + 'em';
+            tspan.setAttributeNS(null, 'dy', offset);
+            tspan.setAttributeNS(null, 'x', x);
+        }
+    }
+
+    /**
+    - removeText (layer, x, y, text, font, angle)
+
+      The function removes one or more text strings from the canvas text overlay.
+      If no parameters are given, all text within the layer is removed.
+
+      Note that the text is not immediately removed; it is simply marked as
+      inactive, which will result in its removal on the next render pass.
+      This avoids the performance penalty for 'clear and redraw' behavior,
+      where we potentially get rid of all text on a layer, but will likely
+      add back most or all of it later, as when redrawing axes, for example.
+
+      The layer is a string of space-separated CSS classes uniquely
+      identifying the layer containing this text. The following parameter are
+      X and Y coordinate of the text.
+      Text is the string to remove, while the font is either a string of space-separated CSS
+      classes or a font-spec object, defining the text's font and style.
+     */
+    Canvas.prototype.removeText = function(layer, x, y, text, font, angle) {
+        var info, htmlYCoord;
+        if (text == null) {
+            var layerCache = this._textCache[layer];
+            if (layerCache != null) {
+                for (var styleKey in layerCache) {
+                    if (hasOwnProperty.call(layerCache, styleKey)) {
+                        var styleCache = layerCache[styleKey];
+                        for (var key in styleCache) {
+                            if (hasOwnProperty.call(styleCache, key)) {
+                                var positions = styleCache[key].positions;
+                                positions.forEach(function(position) {
+                                    position.active = false;
+                                });
+                            }
+                        }
+                    }
+                }
+            }
+        } else {
+            info = this.getTextInfo(layer, text, font, angle);
+            positions = info.positions;
+            positions.forEach(function(position) {
+                htmlYCoord = y + 0.75 * info.height;
+                if (position.x === x && position.y === htmlYCoord && position.text === text) {
+                    position.active = false;
+                }
+            });
+        }
+    };
+
+    /**
+    - clearCache()
+
+     Clears the cache used to speed up the text size measurements.
+     As an (unfortunate) side effect all text within the text Layer is removed.
+     Use this function before plot.setupGrid() and plot.draw() if the plot just
+     became visible or the styles changed.
+    */
+    Canvas.prototype.clearCache = function() {
+        var cache = this._textCache;
+        for (var layerKey in cache) {
+            if (hasOwnProperty.call(cache, layerKey)) {
+                var layer = this.getSVGLayer(layerKey);
+                while (layer.firstChild) {
+                    layer.removeChild(layer.firstChild);
+                }
+            }
+        };
+
+        this._textCache = {};
+    };
+
+    function generateKey(text) {
+        return text.replace(/0|1|2|3|4|5|6|7|8|9/g, '0');
+    }
+
+    if (!window.Flot) {
+        window.Flot = {};
+    }
+
+    window.Flot.Canvas = Canvas;
+})(jQuery);

frontend/lib/flot/jquery.colorhelpers.js

@@ -0,0 +1,199 @@
+/* Plugin for jQuery for working with colors.
+ *
+ * Version 1.1.
+ *
+ * Inspiration from jQuery color animation plugin by John Resig.
+ *
+ * Released under the MIT license by Ole Laursen, October 2009.
+ *
+ * Examples:
+ *
+ *   $.color.parse("#fff").scale('rgb', 0.25).add('a', -0.5).toString()
+ *   var c = $.color.extract($("#mydiv"), 'background-color');
+ *   console.log(c.r, c.g, c.b, c.a);
+ *   $.color.make(100, 50, 25, 0.4).toString() // returns "rgba(100,50,25,0.4)"
+ *
+ * Note that .scale() and .add() return the same modified object
+ * instead of making a new one.
+ *
+ * V. 1.1: Fix error handling so e.g. parsing an empty string does
+ * produce a color rather than just crashing.
+ */
+
+(function($) {
+    $.color = {};
+
+    // construct color object with some convenient chainable helpers
+    $.color.make = function (r, g, b, a) {
+        var o = {};
+        o.r = r || 0;
+        o.g = g || 0;
+        o.b = b || 0;
+        o.a = a != null ? a : 1;
+
+        o.add = function (c, d) {
+            for (var i = 0; i < c.length; ++i) {
+                o[c.charAt(i)] += d;
+            }
+
+            return o.normalize();
+        };
+
+        o.scale = function (c, f) {
+            for (var i = 0; i < c.length; ++i) {
+                o[c.charAt(i)] *= f;
+            }
+
+            return o.normalize();
+        };
+
+        o.toString = function () {
+            if (o.a >= 1.0) {
+                return "rgb(" + [o.r, o.g, o.b].join(",") + ")";
+            } else {
+                return "rgba(" + [o.r, o.g, o.b, o.a].join(",") + ")";
+            }
+        };
+
+        o.normalize = function () {
+            function clamp(min, value, max) {
+                return value < min ? min : (value > max ? max : value);
+            }
+
+            o.r = clamp(0, parseInt(o.r), 255);
+            o.g = clamp(0, parseInt(o.g), 255);
+            o.b = clamp(0, parseInt(o.b), 255);
+            o.a = clamp(0, o.a, 1);
+            return o;
+        };
+
+        o.clone = function () {
+            return $.color.make(o.r, o.b, o.g, o.a);
+        };
+
+        return o.normalize();
+    }
+
+    // extract CSS color property from element, going up in the DOM
+    // if it's "transparent"
+    $.color.extract = function (elem, css) {
+        var c;
+
+        do {
+            c = elem.css(css).toLowerCase();
+            // keep going until we find an element that has color, or
+            // we hit the body or root (have no parent)
+            if (c !== '' && c !== 'transparent') {
+                break;
+            }
+
+            elem = elem.parent();
+        } while (elem.length && !$.nodeName(elem.get(0), "body"));
+
+        // catch Safari's way of signalling transparent
+        if (c === "rgba(0, 0, 0, 0)") {
+            c = "transparent";
+        }
+
+        return $.color.parse(c);
+    }
+
+    // parse CSS color string (like "rgb(10, 32, 43)" or "#fff"),
+    // returns color object, if parsing failed, you get black (0, 0,
+    // 0) out
+    $.color.parse = function (str) {
+        var res, m = $.color.make;
+
+        // Look for rgb(num,num,num)
+        res = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(str);
+        if (res) {
+            return m(parseInt(res[1], 10), parseInt(res[2], 10), parseInt(res[3], 10));
+        }
+
+        // Look for rgba(num,num,num,num)
+        res = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str)
+        if (res) {
+            return m(parseInt(res[1], 10), parseInt(res[2], 10), parseInt(res[3], 10), parseFloat(res[4]));
+        }
+
+        // Look for rgb(num%,num%,num%)
+        res = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)%\s*,\s*([0-9]+(?:\.[0-9]+)?)%\s*,\s*([0-9]+(?:\.[0-9]+)?)%\s*\)/.exec(str);
+        if (res) {
+            return m(parseFloat(res[1]) * 2.55, parseFloat(res[2]) * 2.55, parseFloat(res[3]) * 2.55);
+        }
+
+        // Look for rgba(num%,num%,num%,num)
+        res = /rgba\(\s*([0-9]+(?:\.[0-9]+)?)%\s*,\s*([0-9]+(?:\.[0-9]+)?)%\s*,\s*([0-9]+(?:\.[0-9]+)?)%\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str);
+        if (res) {
+            return m(parseFloat(res[1]) * 2.55, parseFloat(res[2]) * 2.55, parseFloat(res[3]) * 2.55, parseFloat(res[4]));
+        }
+
+        // Look for #a0b1c2
+        res = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(str);
+        if (res) {
+            return m(parseInt(res[1], 16), parseInt(res[2], 16), parseInt(res[3], 16));
+        }
+
+        // Look for #fff
+        res = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(str);
+        if (res) {
+            return m(parseInt(res[1] + res[1], 16), parseInt(res[2] + res[2], 16), parseInt(res[3] + res[3], 16));
+        }
+
+        // Otherwise, we're most likely dealing with a named color
+        var name = $.trim(str).toLowerCase();
+        if (name === "transparent") {
+            return m(255, 255, 255, 0);
+        } else {
+            // default to black
+            res = lookupColors[name] || [0, 0, 0];
+            return m(res[0], res[1], res[2]);
+        }
+    }
+
+    var lookupColors = {
+        aqua: [0, 255, 255],
+        azure: [240, 255, 255],
+        beige: [245, 245, 220],
+        black: [0, 0, 0],
+        blue: [0, 0, 255],
+        brown: [165, 42, 42],
+        cyan: [0, 255, 255],
+        darkblue: [0, 0, 139],
+        darkcyan: [0, 139, 139],
+        darkgrey: [169, 169, 169],
+        darkgreen: [0, 100, 0],
+        darkkhaki: [189, 183, 107],
+        darkmagenta: [139, 0, 139],
+        darkolivegreen: [85, 107, 47],
+        darkorange: [255, 140, 0],
+        darkorchid: [153, 50, 204],
+        darkred: [139, 0, 0],
+        darksalmon: [233, 150, 122],
+        darkviolet: [148, 0, 211],
+        fuchsia: [255, 0, 255],
+        gold: [255, 215, 0],
+        green: [0, 128, 0],
+        indigo: [75, 0, 130],
+        khaki: [240, 230, 140],
+        lightblue: [173, 216, 230],
+        lightcyan: [224, 255, 255],
+        lightgreen: [144, 238, 144],
+        lightgrey: [211, 211, 211],
+        lightpink: [255, 182, 193],
+        lightyellow: [255, 255, 224],
+        lime: [0, 255, 0],
+        magenta: [255, 0, 255],
+        maroon: [128, 0, 0],
+        navy: [0, 0, 128],
+        olive: [128, 128, 0],
+        orange: [255, 165, 0],
+        pink: [255, 192, 203],
+        purple: [128, 0, 128],
+        violet: [128, 0, 128],
+        red: [255, 0, 0],
+        silver: [192, 192, 192],
+        white: [255, 255, 255],
+        yellow: [255, 255, 0]
+    };
+})(jQuery);

frontend/lib/flot/jquery.flot.axislabels.js

@@ -0,0 +1,212 @@
+/*
+Axis label plugin for flot
+
+Derived from:
+Axis Labels Plugin for flot.
+http://github.com/markrcote/flot-axislabels
+
+Original code is Copyright (c) 2010 Xuan Luo.
+Original code was released under the GPLv3 license by Xuan Luo, September 2010.
+Original code was rereleased under the MIT license by Xuan Luo, April 2012.
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+
+(function($) {
+    "use strict";
+
+    var options = {
+        axisLabels: {
+            show: true
+        }
+    };
+
+    function AxisLabel(axisName, position, padding, placeholder, axisLabel, surface) {
+        this.axisName = axisName;
+        this.position = position;
+        this.padding = padding;
+        this.placeholder = placeholder;
+        this.axisLabel = axisLabel;
+        this.surface = surface;
+        this.width = 0;
+        this.height = 0;
+        this.elem = null;
+    }
+
+    AxisLabel.prototype.calculateSize = function() {
+        var axisId = this.axisName + 'Label',
+            layerId = axisId + 'Layer',
+            className = axisId + ' axisLabels';
+
+        var info = this.surface.getTextInfo(layerId, this.axisLabel, className);
+        this.labelWidth = info.width;
+        this.labelHeight = info.height;
+
+        if (this.position === 'left' || this.position === 'right') {
+            this.width = this.labelHeight + this.padding;
+            this.height = 0;
+        } else {
+            this.width = 0;
+            this.height = this.labelHeight + this.padding;
+        }
+    };
+
+    AxisLabel.prototype.transforms = function(degrees, x, y, svgLayer) {
+        var transforms = [], translate, rotate;
+        if (x !== 0 || y !== 0) {
+            translate = svgLayer.createSVGTransform();
+            translate.setTranslate(x, y);
+            transforms.push(translate);
+        }
+        if (degrees !== 0) {
+            rotate = svgLayer.createSVGTransform();
+            var centerX = Math.round(this.labelWidth / 2),
+                centerY = 0;
+            rotate.setRotate(degrees, centerX, centerY);
+            transforms.push(rotate);
+        }
+
+        return transforms;
+    };
+
+    AxisLabel.prototype.calculateOffsets = function(box) {
+        var offsets = {
+            x: 0,
+            y: 0,
+            degrees: 0
+        };
+        if (this.position === 'bottom') {
+            offsets.x = box.left + box.width / 2 - this.labelWidth / 2;
+            offsets.y = box.top + box.height - this.labelHeight;
+        } else if (this.position === 'top') {
+            offsets.x = box.left + box.width / 2 - this.labelWidth / 2;
+            offsets.y = box.top;
+        } else if (this.position === 'left') {
+            offsets.degrees = -90;
+            offsets.x = box.left - this.labelWidth / 2;
+            offsets.y = box.height / 2 + box.top;
+        } else if (this.position === 'right') {
+            offsets.degrees = 90;
+            offsets.x = box.left + box.width - this.labelWidth / 2;
+            offsets.y = box.height / 2 + box.top;
+        }
+        offsets.x = Math.round(offsets.x);
+        offsets.y = Math.round(offsets.y);
+
+        return offsets;
+    };
+
+    AxisLabel.prototype.cleanup = function() {
+        var axisId = this.axisName + 'Label',
+            layerId = axisId + 'Layer',
+            className = axisId + ' axisLabels';
+        this.surface.removeText(layerId, 0, 0, this.axisLabel, className);
+    };
+
+    AxisLabel.prototype.draw = function(box) {
+        var axisId = this.axisName + 'Label',
+            layerId = axisId + 'Layer',
+            className = axisId + ' axisLabels',
+            offsets = this.calculateOffsets(box),
+            style = {
+                position: 'absolute',
+                bottom: '',
+                right: '',
+                display: 'inline-block',
+                'white-space': 'nowrap'
+            };
+
+        var layer = this.surface.getSVGLayer(layerId);
+        var transforms = this.transforms(offsets.degrees, offsets.x, offsets.y, layer.parentNode);
+
+        this.surface.addText(layerId, 0, 0, this.axisLabel, className, undefined, undefined, undefined, undefined, transforms);
+        this.surface.render();
+        Object.keys(style).forEach(function(key) {
+            layer.style[key] = style[key];
+        });
+    };
+
+    function init(plot) {
+        plot.hooks.processOptions.push(function(plot, options) {
+            if (!options.axisLabels.show) {
+                return;
+            }
+
+            var axisLabels = {};
+            var defaultPadding = 2; // padding between axis and tick labels
+
+            plot.hooks.axisReserveSpace.push(function(plot, axis) {
+                var opts = axis.options;
+                var axisName = axis.direction + axis.n;
+
+                axis.labelHeight += axis.boxPosition.centerY;
+                axis.labelWidth += axis.boxPosition.centerX;
+
+                if (!opts || !opts.axisLabel || !axis.show) {
+                    return;
+                }
+
+                var padding = opts.axisLabelPadding === undefined
+                    ? defaultPadding
+                    : opts.axisLabelPadding;
+
+                var axisLabel = axisLabels[axisName];
+                if (!axisLabel) {
+                    axisLabel = new AxisLabel(axisName,
+                        opts.position, padding,
+                        plot.getPlaceholder()[0], opts.axisLabel, plot.getSurface());
+                    axisLabels[axisName] = axisLabel;
+                }
+
+                axisLabel.calculateSize();
+
+                // Incrementing the sizes of the tick labels.
+                axis.labelHeight += axisLabel.height;
+                axis.labelWidth += axisLabel.width;
+            });
+
+            // TODO - use the drawAxis hook
+            plot.hooks.draw.push(function(plot, ctx) {
+                $.each(plot.getAxes(), function(flotAxisName, axis) {
+                    var opts = axis.options;
+                    if (!opts || !opts.axisLabel || !axis.show) {
+                        return;
+                    }
+
+                    var axisName = axis.direction + axis.n;
+                    axisLabels[axisName].draw(axis.box);
+                });
+            });
+
+            plot.hooks.shutdown.push(function(plot, eventHolder) {
+                for (var axisName in axisLabels) {
+                    axisLabels[axisName].cleanup();
+                }
+            });
+        });
+    };
+
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: 'axisLabels',
+        version: '3.0'
+    });
+})(jQuery);

frontend/lib/flot/jquery.flot.browser.js

@@ -0,0 +1,98 @@
+/** ## jquery.flot.browser.js
+
+This plugin is used to make available some browser-related utility functions.
+
+### Methods
+*/
+
+(function ($) {
+    'use strict';
+
+    var browser = {
+        /**
+        - getPageXY(e)
+
+         Calculates the pageX and pageY using the screenX, screenY properties of the event
+         and the scrolling of the page. This is needed because the pageX and pageY
+         properties of the event are not correct while running tests in Edge. */
+        getPageXY: function (e) {
+            // This code is inspired from https://stackoverflow.com/a/3464890
+            var doc = document.documentElement,
+                pageX = e.clientX + (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0),
+                pageY = e.clientY + (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
+            return { X: pageX, Y: pageY };
+        },
+
+        /**
+        - getPixelRatio(context)
+
+         This function returns the current pixel ratio defined by the product of desktop
+         zoom and page zoom.
+         Additional info: https://www.html5rocks.com/en/tutorials/canvas/hidpi/
+        */
+        getPixelRatio: function(context) {
+            var devicePixelRatio = window.devicePixelRatio || 1,
+                backingStoreRatio =
+                context.webkitBackingStorePixelRatio ||
+                context.mozBackingStorePixelRatio ||
+                context.msBackingStorePixelRatio ||
+                context.oBackingStorePixelRatio ||
+                context.backingStorePixelRatio || 1;
+            return devicePixelRatio / backingStoreRatio;
+        },
+
+        /**
+        - isSafari, isMobileSafari, isOpera, isFirefox, isIE, isEdge, isChrome, isBlink
+
+         This is a collection of functions, used to check if the code is running in a
+         particular browser or Javascript engine.
+        */
+        isSafari: function() {
+            // *** https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
+            // Safari 3.0+ "[object HTMLElementConstructor]"
+            return /constructor/i.test(window.top.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window.top['safari'] || (typeof window.top.safari !== 'undefined' && window.top.safari.pushNotification));
+        },
+
+        isMobileSafari: function() {
+            //isMobileSafari adapted from https://stackoverflow.com/questions/3007480/determine-if-user-navigated-from-mobile-safari
+            return navigator.userAgent.match(/(iPod|iPhone|iPad)/) && navigator.userAgent.match(/AppleWebKit/);
+        },
+
+        isOpera: function() {
+            // *** https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
+            //Opera 8.0+
+            return (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
+        },
+
+        isFirefox: function() {
+            // *** https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
+            // Firefox 1.0+
+            return typeof InstallTrigger !== 'undefined';
+        },
+
+        isIE: function() {
+            // *** https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
+            // Internet Explorer 6-11
+            return /*@cc_on!@*/false || !!document.documentMode;
+        },
+
+        isEdge: function() {
+            // *** https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
+            // Edge 20+
+            return !browser.isIE() && !!window.StyleMedia;
+        },
+
+        isChrome: function() {
+            // *** https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
+            // Chrome 1+
+            return !!window.chrome && !!window.chrome.webstore;
+        },
+
+        isBlink: function() {
+            // *** https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
+            return (browser.isChrome() || browser.isOpera()) && !!window.CSS;
+        }
+    };
+
+    $.plot.browser = browser;
+})(jQuery);

frontend/lib/flot/jquery.flot.categories.js

@@ -0,0 +1,202 @@
+/* Flot plugin for plotting textual data or categories.
+
+Copyright (c) 2007-2014 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+Consider a dataset like [["February", 34], ["March", 20], ...]. This plugin
+allows you to plot such a dataset directly.
+
+To enable it, you must specify mode: "categories" on the axis with the textual
+labels, e.g.
+
+    $.plot("#placeholder", data, { xaxis: { mode: "categories" } });
+
+By default, the labels are ordered as they are met in the data series. If you
+need a different ordering, you can specify "categories" on the axis options
+and list the categories there:
+
+    xaxis: {
+        mode: "categories",
+        categories: ["February", "March", "April"]
+    }
+
+If you need to customize the distances between the categories, you can specify
+"categories" as an object mapping labels to values
+
+    xaxis: {
+        mode: "categories",
+        categories: { "February": 1, "March": 3, "April": 4 }
+    }
+
+If you don't specify all categories, the remaining categories will be numbered
+from the max value plus 1 (with a spacing of 1 between each).
+
+Internally, the plugin works by transforming the input data through an auto-
+generated mapping where the first category becomes 0, the second 1, etc.
+Hence, a point like ["February", 34] becomes [0, 34] internally in Flot (this
+is visible in hover and click events that return numbers rather than the
+category labels). The plugin also overrides the tick generator to spit out the
+categories as ticks instead of the values.
+
+If you need to map a value back to its label, the mapping is always accessible
+as "categories" on the axis object, e.g. plot.getAxes().xaxis.categories.
+
+*/
+
+(function ($) {
+    var options = {
+        xaxis: {
+            categories: null
+        },
+        yaxis: {
+            categories: null
+        }
+    };
+
+    function processRawData(plot, series, data, datapoints) {
+        // if categories are enabled, we need to disable
+        // auto-transformation to numbers so the strings are intact
+        // for later processing
+
+        var xCategories = series.xaxis.options.mode === "categories",
+            yCategories = series.yaxis.options.mode === "categories";
+
+        if (!(xCategories || yCategories)) {
+            return;
+        }
+
+        var format = datapoints.format;
+
+        if (!format) {
+            // FIXME: auto-detection should really not be defined here
+            var s = series;
+            format = [];
+            format.push({ x: true, number: true, required: true, computeRange: true});
+            format.push({ y: true, number: true, required: true, computeRange: true });
+
+            if (s.bars.show || (s.lines.show && s.lines.fill)) {
+                var autoScale = !!((s.bars.show && s.bars.zero) || (s.lines.show && s.lines.zero));
+                format.push({ y: true, number: true, required: false, defaultValue: 0, computeRange: autoScale });
+                if (s.bars.horizontal) {
+                    delete format[format.length - 1].y;
+                    format[format.length - 1].x = true;
+                }
+            }
+
+            datapoints.format = format;
+        }
+
+        for (var m = 0; m < format.length; ++m) {
+            if (format[m].x && xCategories) {
+                format[m].number = false;
+            }
+
+            if (format[m].y && yCategories) {
+                format[m].number = false;
+                format[m].computeRange = false;
+            }
+        }
+    }
+
+    function getNextIndex(categories) {
+        var index = -1;
+
+        for (var v in categories) {
+            if (categories[v] > index) {
+                index = categories[v];
+            }
+        }
+
+        return index + 1;
+    }
+
+    function categoriesTickGenerator(axis) {
+        var res = [];
+        for (var label in axis.categories) {
+            var v = axis.categories[label];
+            if (v >= axis.min && v <= axis.max) {
+                res.push([v, label]);
+            }
+        }
+
+        res.sort(function (a, b) { return a[0] - b[0]; });
+
+        return res;
+    }
+
+    function setupCategoriesForAxis(series, axis, datapoints) {
+        if (series[axis].options.mode !== "categories") {
+            return;
+        }
+
+        if (!series[axis].categories) {
+            // parse options
+            var c = {}, o = series[axis].options.categories || {};
+            if ($.isArray(o)) {
+                for (var i = 0; i < o.length; ++i) {
+                    c[o[i]] = i;
+                }
+            } else {
+                for (var v in o) {
+                    c[v] = o[v];
+                }
+            }
+
+            series[axis].categories = c;
+        }
+
+        // fix ticks
+        if (!series[axis].options.ticks) {
+            series[axis].options.ticks = categoriesTickGenerator;
+        }
+
+        transformPointsOnAxis(datapoints, axis, series[axis].categories);
+    }
+
+    function transformPointsOnAxis(datapoints, axis, categories) {
+        // go through the points, transforming them
+        var points = datapoints.points,
+            ps = datapoints.pointsize,
+            format = datapoints.format,
+            formatColumn = axis.charAt(0),
+            index = getNextIndex(categories);
+
+        for (var i = 0; i < points.length; i += ps) {
+            if (points[i] == null) {
+                continue;
+            }
+
+            for (var m = 0; m < ps; ++m) {
+                var val = points[i + m];
+
+                if (val == null || !format[m][formatColumn]) {
+                    continue;
+                }
+
+                if (!(val in categories)) {
+                    categories[val] = index;
+                    ++index;
+                }
+
+                points[i + m] = categories[val];
+            }
+        }
+    }
+
+    function processDatapoints(plot, series, datapoints) {
+        setupCategoriesForAxis(series, "xaxis", datapoints);
+        setupCategoriesForAxis(series, "yaxis", datapoints);
+    }
+
+    function init(plot) {
+        plot.hooks.processRawData.push(processRawData);
+        plot.hooks.processDatapoints.push(processDatapoints);
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: 'categories',
+        version: '1.0'
+    });
+})(jQuery);

frontend/lib/flot/jquery.flot.composeImages.js

@@ -0,0 +1,330 @@
+/** ## jquery.flot.composeImages.js
+
+This plugin is used to expose a function used to overlap several canvases and
+SVGs, for the purpose of creating a snaphot out of them.
+
+### When composeImages is used:
+When multiple canvases and SVGs have to be overlapped into a single image
+and their offset on the page, must be preserved.
+
+### Where can be used:
+In creating a downloadable snapshot of the plots, axes, cursors etc of a graph.
+
+### How it works:
+The entry point is composeImages function. It expects an array of objects,
+which should be either canvases or SVGs (or a mix). It does a prevalidation
+of them, by verifying if they will be usable or not, later in the flow.
+After selecting only usable sources, it passes them to getGenerateTempImg
+function, which generates temporary images out of them. This function
+expects that some of the passed sources (canvas or SVG) may still have
+problems being converted to an image and makes sure the promises system,
+used by composeImages function, moves forward. As an example, SVGs with
+missing information from header or with unsupported content, may lead to
+failure in generating the temporary image. Temporary images are required
+mostly on extracting content from SVGs, but this is also where the x/y
+offsets are extracted for each image which will be added. For SVGs in
+particular, their CSS rules have to be applied.
+After all temporary images are generated, they are overlapped using
+getExecuteImgComposition function. This is where the destination canvas
+is set to the proper dimensions. It is then output by composeImages.
+This function returns a promise, which can be used to wait for the whole
+composition process. It requires to be asynchronous, because this is how
+temporary images load their data.
+*/
+
+(function($) {
+    "use strict";
+    const GENERALFAILURECALLBACKERROR = -100; //simply a negative number
+    const SUCCESSFULIMAGEPREPARATION = 0;
+    const EMPTYARRAYOFIMAGESOURCES = -1;
+    const NEGATIVEIMAGESIZE = -2;
+    var pixelRatio = 1;
+    var browser = $.plot.browser;
+    var getPixelRatio = browser.getPixelRatio;
+
+    function composeImages(canvasOrSvgSources, destinationCanvas) {
+        var validCanvasOrSvgSources = canvasOrSvgSources.filter(isValidSource);
+        pixelRatio = getPixelRatio(destinationCanvas.getContext('2d'));
+
+        var allImgCompositionPromises = validCanvasOrSvgSources.map(function(validCanvasOrSvgSource) {
+            var tempImg = new Image();
+            var currentPromise = new Promise(getGenerateTempImg(tempImg, validCanvasOrSvgSource));
+            return currentPromise;
+        });
+
+        var lastPromise = Promise.all(allImgCompositionPromises).then(getExecuteImgComposition(destinationCanvas), failureCallback);
+        return lastPromise;
+    }
+
+    function isValidSource(canvasOrSvgSource) {
+        var isValidFromCanvas = true;
+        var isValidFromContent = true;
+        if ((canvasOrSvgSource === null) || (canvasOrSvgSource === undefined)) {
+            isValidFromContent = false;
+        } else {
+            if (canvasOrSvgSource.tagName === 'CANVAS') {
+                if ((canvasOrSvgSource.getBoundingClientRect().right === canvasOrSvgSource.getBoundingClientRect().left) ||
+                    (canvasOrSvgSource.getBoundingClientRect().bottom === canvasOrSvgSource.getBoundingClientRect().top)) {
+                    isValidFromCanvas = false;
+                }
+            }
+        }
+        return isValidFromContent && isValidFromCanvas && (window.getComputedStyle(canvasOrSvgSource).visibility === 'visible');
+    }
+
+    function getGenerateTempImg(tempImg, canvasOrSvgSource) {
+        tempImg.sourceDescription = '<info className="' + canvasOrSvgSource.className + '" tagName="' + canvasOrSvgSource.tagName + '" id="' + canvasOrSvgSource.id + '">';
+        tempImg.sourceComponent = canvasOrSvgSource;
+
+        return function doGenerateTempImg(successCallbackFunc, failureCallbackFunc) {
+            tempImg.onload = function(evt) {
+                tempImg.successfullyLoaded = true;
+                successCallbackFunc(tempImg);
+            };
+
+            tempImg.onabort = function(evt) {
+                tempImg.successfullyLoaded = false;
+                console.log('Can\'t generate temp image from ' + tempImg.sourceDescription + '. It is possible that it is missing some properties or its content is not supported by this browser. Source component:', tempImg.sourceComponent);
+                successCallbackFunc(tempImg); //call successCallback, to allow snapshot of all working images
+            };
+
+            tempImg.onerror = function(evt) {
+                tempImg.successfullyLoaded = false;
+                console.log('Can\'t generate temp image from ' + tempImg.sourceDescription + '. It is possible that it is missing some properties or its content is not supported by this browser. Source component:', tempImg.sourceComponent);
+                successCallbackFunc(tempImg); //call successCallback, to allow snapshot of all working images
+            };
+
+            generateTempImageFromCanvasOrSvg(canvasOrSvgSource, tempImg);
+        };
+    }
+
+    function getExecuteImgComposition(destinationCanvas) {
+        return function executeImgComposition(tempImgs) {
+            var compositionResult = copyImgsToCanvas(tempImgs, destinationCanvas);
+            return compositionResult;
+        };
+    }
+
+    function copyCanvasToImg(canvas, img) {
+        img.src = canvas.toDataURL('image/png');
+    }
+
+    function getCSSRules(document) {
+        var styleSheets = document.styleSheets,
+            rulesList = [];
+        for (var i = 0; i < styleSheets.length; i++) {
+            // CORS requests for style sheets throw and an exception on Chrome > 64
+            try {
+                // in Chrome, the external CSS files are empty when the page is directly loaded from disk
+                var rules = styleSheets[i].cssRules || [];
+                for (var j = 0; j < rules.length; j++) {
+                    var rule = rules[j];
+                    rulesList.push(rule.cssText);
+                }
+            } catch (e) {
+                console.log('Failed to get some css rules');
+            }
+        }
+        return rulesList;
+    }
+
+    function embedCSSRulesInSVG(rules, svg) {
+        var text = [
+            '<svg class="snapshot ' + svg.classList + '" width="' + svg.width.baseVal.value * pixelRatio + '" height="' + svg.height.baseVal.value * pixelRatio + '" viewBox="0 0 ' + svg.width.baseVal.value + ' ' + svg.height.baseVal.value + '" xmlns="http://www.w3.org/2000/svg">',
+            '<style>',
+            '/* <![CDATA[ */',
+            rules.join('\n'),
+            '/* ]]> */',
+            '</style>',
+            svg.innerHTML,
+            '</svg>'
+        ].join('\n');
+        return text;
+    }
+
+    function copySVGToImgMostBrowsers(svg, img) {
+        var rules = getCSSRules(document),
+            source = embedCSSRulesInSVG(rules, svg);
+
+        source = patchSVGSource(source);
+
+        var blob = new Blob([source], {type: "image/svg+xml;charset=utf-8"}),
+            domURL = self.URL || self.webkitURL || self,
+            url = domURL.createObjectURL(blob);
+        img.src = url;
+    }
+
+    function copySVGToImgSafari(svg, img) {
+        // Use this method to convert a string buffer array to a binary string.
+        // Do so by breaking up large strings into smaller substrings; this is necessary to avoid the
+        // "maximum call stack size exceeded" exception that can happen when calling 'String.fromCharCode.apply'
+        // with a very long array.
+        function buildBinaryString (arrayBuffer) {
+            var binaryString = "";
+            const utf8Array = new Uint8Array(arrayBuffer);
+            const blockSize = 16384;
+            for (var i = 0; i < utf8Array.length; i = i + blockSize) {
+                const binarySubString = String.fromCharCode.apply(null, utf8Array.subarray(i, i + blockSize));
+                binaryString = binaryString + binarySubString;
+            }
+            return binaryString;
+        };
+
+        var rules = getCSSRules(document),
+            source = embedCSSRulesInSVG(rules, svg),
+            data,
+            utf8BinaryString;
+
+        source = patchSVGSource(source);
+
+        // Encode the string as UTF-8 and convert it to a binary string. The UTF-8 encoding is required to
+        // capture unicode characters correctly.
+        utf8BinaryString = buildBinaryString(new (TextEncoder || TextEncoderLite)('utf-8').encode(source));
+
+        data = "data:image/svg+xml;base64," + btoa(utf8BinaryString);
+        img.src = data;
+    }
+
+    function patchSVGSource(svgSource) {
+        var source = '';
+        //add name spaces.
+        if (!svgSource.match(/^<svg[^>]+xmlns="http:\/\/www\.w3\.org\/2000\/svg"/)) {
+            source = svgSource.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
+        }
+        if (!svgSource.match(/^<svg[^>]+"http:\/\/www\.w3\.org\/1999\/xlink"/)) {
+            source = svgSource.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
+        }
+
+        //add xml declaration
+        return '<?xml version="1.0" standalone="no"?>\r\n' + source;
+    }
+
+    function copySVGToImg(svg, img) {
+        if (browser.isSafari() || browser.isMobileSafari()) {
+            copySVGToImgSafari(svg, img);
+        } else {
+            copySVGToImgMostBrowsers(svg, img);
+        }
+    }
+
+    function adaptDestSizeToZoom(destinationCanvas, sources) {
+        function containsSVGs(source) {
+            return source.srcImgTagName === 'svg';
+        }
+
+        if (sources.find(containsSVGs) !== undefined) {
+            if (pixelRatio < 1) {
+                destinationCanvas.width = destinationCanvas.width * pixelRatio;
+                destinationCanvas.height = destinationCanvas.height * pixelRatio;
+            }
+        }
+    }
+
+    function prepareImagesToBeComposed(sources, destination) {
+        var result = SUCCESSFULIMAGEPREPARATION;
+        if (sources.length === 0) {
+            result = EMPTYARRAYOFIMAGESOURCES; //nothing to do if called without sources
+        } else {
+            var minX = sources[0].genLeft;
+            var minY = sources[0].genTop;
+            var maxX = sources[0].genRight;
+            var maxY = sources[0].genBottom;
+            var i = 0;
+
+            for (i = 1; i < sources.length; i++) {
+                if (minX > sources[i].genLeft) {
+                    minX = sources[i].genLeft;
+                }
+
+                if (minY > sources[i].genTop) {
+                    minY = sources[i].genTop;
+                }
+            }
+
+            for (i = 1; i < sources.length; i++) {
+                if (maxX < sources[i].genRight) {
+                    maxX = sources[i].genRight;
+                }
+
+                if (maxY < sources[i].genBottom) {
+                    maxY = sources[i].genBottom;
+                }
+            }
+
+            if ((maxX - minX <= 0) || (maxY - minY <= 0)) {
+                result = NEGATIVEIMAGESIZE; //this might occur on hidden images
+            } else {
+                destination.width = Math.round(maxX - minX);
+                destination.height = Math.round(maxY - minY);
+
+                for (i = 0; i < sources.length; i++) {
+                    sources[i].xCompOffset = sources[i].genLeft - minX;
+                    sources[i].yCompOffset = sources[i].genTop - minY;
+                }
+
+                adaptDestSizeToZoom(destination, sources);
+            }
+        }
+        return result;
+    }
+
+    function copyImgsToCanvas(sources, destination) {
+        var prepareImagesResult = prepareImagesToBeComposed(sources, destination);
+        if (prepareImagesResult === SUCCESSFULIMAGEPREPARATION) {
+            var destinationCtx = destination.getContext('2d');
+
+            for (var i = 0; i < sources.length; i++) {
+                if (sources[i].successfullyLoaded === true) {
+                    destinationCtx.drawImage(sources[i], sources[i].xCompOffset * pixelRatio, sources[i].yCompOffset * pixelRatio);
+                }
+            }
+        }
+        return prepareImagesResult;
+    }
+
+    function adnotateDestImgWithBoundingClientRect(srcCanvasOrSvg, destImg) {
+        destImg.genLeft = srcCanvasOrSvg.getBoundingClientRect().left;
+        destImg.genTop = srcCanvasOrSvg.getBoundingClientRect().top;
+
+        if (srcCanvasOrSvg.tagName === 'CANVAS') {
+            destImg.genRight = destImg.genLeft + srcCanvasOrSvg.width;
+            destImg.genBottom = destImg.genTop + srcCanvasOrSvg.height;
+        }
+
+        if (srcCanvasOrSvg.tagName === 'svg') {
+            destImg.genRight = srcCanvasOrSvg.getBoundingClientRect().right;
+            destImg.genBottom = srcCanvasOrSvg.getBoundingClientRect().bottom;
+        }
+    }
+
+    function generateTempImageFromCanvasOrSvg(srcCanvasOrSvg, destImg) {
+        if (srcCanvasOrSvg.tagName === 'CANVAS') {
+            copyCanvasToImg(srcCanvasOrSvg, destImg);
+        }
+
+        if (srcCanvasOrSvg.tagName === 'svg') {
+            copySVGToImg(srcCanvasOrSvg, destImg);
+        }
+
+        destImg.srcImgTagName = srcCanvasOrSvg.tagName;
+        adnotateDestImgWithBoundingClientRect(srcCanvasOrSvg, destImg);
+    }
+
+    function failureCallback() {
+        return GENERALFAILURECALLBACKERROR;
+    }
+
+    // used for testing
+    $.plot.composeImages = composeImages;
+
+    function init(plot) {
+        // used to extend the public API of the plot
+        plot.composeImages = composeImages;
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        name: 'composeImages',
+        version: '1.0'
+    });
+})(jQuery);

frontend/lib/flot/jquery.flot.crosshair.js

@@ -0,0 +1,202 @@
+/* Flot plugin for showing crosshairs when the mouse hovers over the plot.
+
+Copyright (c) 2007-2014 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+The plugin supports these options:
+
+    crosshair: {
+        mode: null or "x" or "y" or "xy"
+        color: color
+        lineWidth: number
+    }
+
+Set the mode to one of "x", "y" or "xy". The "x" mode enables a vertical
+crosshair that lets you trace the values on the x axis, "y" enables a
+horizontal crosshair and "xy" enables them both. "color" is the color of the
+crosshair (default is "rgba(170, 0, 0, 0.80)"), "lineWidth" is the width of
+the drawn lines (default is 1).
+
+The plugin also adds four public methods:
+
+  - setCrosshair( pos )
+
+    Set the position of the crosshair. Note that this is cleared if the user
+    moves the mouse. "pos" is in coordinates of the plot and should be on the
+    form { x: xpos, y: ypos } (you can use x2/x3/... if you're using multiple
+    axes), which is coincidentally the same format as what you get from a
+    "plothover" event. If "pos" is null, the crosshair is cleared.
+
+  - clearCrosshair()
+
+    Clear the crosshair.
+
+  - lockCrosshair(pos)
+
+    Cause the crosshair to lock to the current location, no longer updating if
+    the user moves the mouse. Optionally supply a position (passed on to
+    setCrosshair()) to move it to.
+
+    Example usage:
+
+    var myFlot = $.plot( $("#graph"), ..., { crosshair: { mode: "x" } } };
+    $("#graph").bind( "plothover", function ( evt, position, item ) {
+        if ( item ) {
+            // Lock the crosshair to the data point being hovered
+            myFlot.lockCrosshair({
+                x: item.datapoint[ 0 ],
+                y: item.datapoint[ 1 ]
+            });
+        } else {
+            // Return normal crosshair operation
+            myFlot.unlockCrosshair();
+        }
+    });
+
+  - unlockCrosshair()
+
+    Free the crosshair to move again after locking it.
+*/
+
+(function ($) {
+    var options = {
+        crosshair: {
+            mode: null, // one of null, "x", "y" or "xy",
+            color: "rgba(170, 0, 0, 0.80)",
+            lineWidth: 1
+        }
+    };
+
+    function init(plot) {
+        // position of crosshair in pixels
+        var crosshair = {x: -1, y: -1, locked: false, highlighted: false};
+
+        plot.setCrosshair = function setCrosshair(pos) {
+            if (!pos) {
+                crosshair.x = -1;
+            } else {
+                var o = plot.p2c(pos);
+                crosshair.x = Math.max(0, Math.min(o.left, plot.width()));
+                crosshair.y = Math.max(0, Math.min(o.top, plot.height()));
+            }
+
+            plot.triggerRedrawOverlay();
+        };
+
+        plot.clearCrosshair = plot.setCrosshair; // passes null for pos
+
+        plot.lockCrosshair = function lockCrosshair(pos) {
+            if (pos) {
+                plot.setCrosshair(pos);
+            }
+
+            crosshair.locked = true;
+        };
+
+        plot.unlockCrosshair = function unlockCrosshair() {
+            crosshair.locked = false;
+            crosshair.rect = null;
+        };
+
+        function onMouseOut(e) {
+            if (crosshair.locked) {
+                return;
+            }
+
+            if (crosshair.x !== -1) {
+                crosshair.x = -1;
+                plot.triggerRedrawOverlay();
+            }
+        }
+
+        function onMouseMove(e) {
+            var offset = plot.offset();
+            if (crosshair.locked) {
+                var mouseX = Math.max(0, Math.min(e.pageX - offset.left, plot.width()));
+                var mouseY = Math.max(0, Math.min(e.pageY - offset.top, plot.height()));
+
+                if ((mouseX > crosshair.x - 4) && (mouseX < crosshair.x + 4) && (mouseY > crosshair.y - 4) && (mouseY < crosshair.y + 4)) {
+                    if (!crosshair.highlighted) {
+                        crosshair.highlighted = true;
+                        plot.triggerRedrawOverlay();
+                    }
+                } else {
+                    if (crosshair.highlighted) {
+                        crosshair.highlighted = false;
+                        plot.triggerRedrawOverlay();
+                    }
+                }
+                return;
+            }
+
+            if (plot.getSelection && plot.getSelection()) {
+                crosshair.x = -1; // hide the crosshair while selecting
+                return;
+            }
+
+            crosshair.x = Math.max(0, Math.min(e.pageX - offset.left, plot.width()));
+            crosshair.y = Math.max(0, Math.min(e.pageY - offset.top, plot.height()));
+            plot.triggerRedrawOverlay();
+        }
+
+        plot.hooks.bindEvents.push(function (plot, eventHolder) {
+            if (!plot.getOptions().crosshair.mode) {
+                return;
+            }
+
+            eventHolder.mouseout(onMouseOut);
+            eventHolder.mousemove(onMouseMove);
+        });
+
+        plot.hooks.drawOverlay.push(function (plot, ctx) {
+            var c = plot.getOptions().crosshair;
+            if (!c.mode) {
+                return;
+            }
+
+            var plotOffset = plot.getPlotOffset();
+
+            ctx.save();
+            ctx.translate(plotOffset.left, plotOffset.top);
+
+            if (crosshair.x !== -1) {
+                var adj = plot.getOptions().crosshair.lineWidth % 2 ? 0.5 : 0;
+
+                ctx.strokeStyle = c.color;
+                ctx.lineWidth = c.lineWidth;
+                ctx.lineJoin = "round";
+
+                ctx.beginPath();
+                if (c.mode.indexOf("x") !== -1) {
+                    var drawX = Math.floor(crosshair.x) + adj;
+                    ctx.moveTo(drawX, 0);
+                    ctx.lineTo(drawX, plot.height());
+                }
+                if (c.mode.indexOf("y") !== -1) {
+                    var drawY = Math.floor(crosshair.y) + adj;
+                    ctx.moveTo(0, drawY);
+                    ctx.lineTo(plot.width(), drawY);
+                }
+                if (crosshair.locked) {
+                    if (crosshair.highlighted) ctx.fillStyle = 'orange';
+                    else ctx.fillStyle = c.color;
+                    ctx.fillRect(Math.floor(crosshair.x) + adj - 4, Math.floor(crosshair.y) + adj - 4, 8, 8);
+                }
+                ctx.stroke();
+            }
+            ctx.restore();
+        });
+
+        plot.hooks.shutdown.push(function (plot, eventHolder) {
+            eventHolder.unbind("mouseout", onMouseOut);
+            eventHolder.unbind("mousemove", onMouseMove);
+        });
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: 'crosshair',
+        version: '1.0'
+    });
+})(jQuery);

frontend/lib/flot/jquery.flot.drawSeries.js

@@ -0,0 +1,663 @@
+/**
+## jquery.flot.drawSeries.js
+
+This plugin is used by flot for drawing lines, plots, bars or area.
+
+### Public methods
+*/
+
+(function($) {
+    "use strict";
+
+    function DrawSeries() {
+        function plotLine(datapoints, xoffset, yoffset, axisx, axisy, ctx, steps) {
+            var points = datapoints.points,
+                ps = datapoints.pointsize,
+                prevx = null,
+                prevy = null;
+            var x1 = 0.0,
+                y1 = 0.0,
+                x2 = 0.0,
+                y2 = 0.0,
+                mx = null,
+                my = null,
+                i = 0;
+
+            ctx.beginPath();
+            for (i = ps; i < points.length; i += ps) {
+                x1 = points[i - ps];
+                y1 = points[i - ps + 1];
+                x2 = points[i];
+                y2 = points[i + 1];
+
+                if (x1 === null || x2 === null) {
+                    mx = null;
+                    my = null;
+                    continue;
+                }
+
+                if (isNaN(x1) || isNaN(x2) || isNaN(y1) || isNaN(y2)) {
+                    prevx = null;
+                    prevy = null;
+                    continue;
+                }
+
+                if(steps){
+                    if (mx !== null && my !== null) {
+                        // if middle point exists, transfer p2 -> p1 and p1 -> mp
+                        x2 = x1;
+                        y2 = y1;
+                        x1 = mx;
+                        y1 = my;
+
+                        // 'remove' middle point
+                        mx = null;
+                        my = null;
+
+                        // subtract pointsize from i to have current point p1 handled again
+                        i -= ps;
+                    } else if (y1 !== y2 && x1 !== x2) {
+                        // create a middle point
+                        y2 = y1;
+                        mx = x2;
+                        my = y1;
+                    }
+                }
+
+                // clip with ymin
+                if (y1 <= y2 && y1 < axisy.min) {
+                    if (y2 < axisy.min) {
+                        // line segment is outside
+                        continue;
+                    }
+                    // compute new intersection point
+                    x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
+                    y1 = axisy.min;
+                } else if (y2 <= y1 && y2 < axisy.min) {
+                    if (y1 < axisy.min) {
+                        continue;
+                    }
+
+                    x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
+                    y2 = axisy.min;
+                }
+
+                // clip with ymax
+                if (y1 >= y2 && y1 > axisy.max) {
+                    if (y2 > axisy.max) {
+                        continue;
+                    }
+
+                    x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
+                    y1 = axisy.max;
+                } else if (y2 >= y1 && y2 > axisy.max) {
+                    if (y1 > axisy.max) {
+                        continue;
+                    }
+
+                    x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
+                    y2 = axisy.max;
+                }
+
+                // clip with xmin
+                if (x1 <= x2 && x1 < axisx.min) {
+                    if (x2 < axisx.min) {
+                        continue;
+                    }
+
+                    y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
+                    x1 = axisx.min;
+                } else if (x2 <= x1 && x2 < axisx.min) {
+                    if (x1 < axisx.min) {
+                        continue;
+                    }
+
+                    y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
+                    x2 = axisx.min;
+                }
+
+                // clip with xmax
+                if (x1 >= x2 && x1 > axisx.max) {
+                    if (x2 > axisx.max) {
+                        continue;
+                    }
+
+                    y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
+                    x1 = axisx.max;
+                } else if (x2 >= x1 && x2 > axisx.max) {
+                    if (x1 > axisx.max) {
+                        continue;
+                    }
+
+                    y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
+                    x2 = axisx.max;
+                }
+
+                if (x1 !== prevx || y1 !== prevy) {
+                    ctx.moveTo(axisx.p2c(x1) + xoffset, axisy.p2c(y1) + yoffset);
+                }
+
+                prevx = x2;
+                prevy = y2;
+                ctx.lineTo(axisx.p2c(x2) + xoffset, axisy.p2c(y2) + yoffset);
+            }
+            ctx.stroke();
+        }
+
+        function plotLineArea(datapoints, axisx, axisy, fillTowards, ctx, steps) {
+            var points = datapoints.points,
+                ps = datapoints.pointsize,
+                bottom = fillTowards > axisy.min ? Math.min(axisy.max, fillTowards) : axisy.min,
+                i = 0,
+                ypos = 1,
+                areaOpen = false,
+                segmentStart = 0,
+                segmentEnd = 0,
+                mx = null,
+                my = null;
+
+            // we process each segment in two turns, first forward
+            // direction to sketch out top, then once we hit the
+            // end we go backwards to sketch the bottom
+            while (true) {
+                if (ps > 0 && i > points.length + ps) {
+                    break;
+                }
+
+                i += ps; // ps is negative if going backwards
+
+                var x1 = points[i - ps],
+                    y1 = points[i - ps + ypos],
+                    x2 = points[i],
+                    y2 = points[i + ypos];
+
+                if (ps === -2) {
+                    /* going backwards and no value for the bottom provided in the series*/
+                    y1 = y2 = bottom;
+                }
+
+                if (areaOpen) {
+                    if (ps > 0 && x1 != null && x2 == null) {
+                        // at turning point
+                        segmentEnd = i;
+                        ps = -ps;
+                        ypos = 2;
+                        continue;
+                    }
+
+                    if (ps < 0 && i === segmentStart + ps) {
+                        // done with the reverse sweep
+                        ctx.fill();
+                        areaOpen = false;
+                        ps = -ps;
+                        ypos = 1;
+                        i = segmentStart = segmentEnd + ps;
+                        continue;
+                    }
+                }
+
+                if (x1 == null || x2 == null) {
+                    mx = null;
+                    my = null;
+                    continue;
+                }
+
+                if(steps){
+                    if (mx !== null && my !== null) {
+                        // if middle point exists, transfer p2 -> p1 and p1 -> mp
+                        x2 = x1;
+                        y2 = y1;
+                        x1 = mx;
+                        y1 = my;
+
+                        // 'remove' middle point
+                        mx = null;
+                        my = null;
+
+                        // subtract pointsize from i to have current point p1 handled again
+                        i -= ps;
+                    } else if (y1 !== y2 && x1 !== x2) {
+                        // create a middle point
+                        y2 = y1;
+                        mx = x2;
+                        my = y1;
+                    }
+                }
+
+                // clip x values
+
+                // clip with xmin
+                if (x1 <= x2 && x1 < axisx.min) {
+                    if (x2 < axisx.min) {
+                        continue;
+                    }
+
+                    y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
+                    x1 = axisx.min;
+                } else if (x2 <= x1 && x2 < axisx.min) {
+                    if (x1 < axisx.min) {
+                        continue;
+                    }
+
+                    y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
+                    x2 = axisx.min;
+                }
+
+                // clip with xmax
+                if (x1 >= x2 && x1 > axisx.max) {
+                    if (x2 > axisx.max) {
+                        continue;
+                    }
+
+                    y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
+                    x1 = axisx.max;
+                } else if (x2 >= x1 && x2 > axisx.max) {
+                    if (x1 > axisx.max) {
+                        continue;
+                    }
+
+                    y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
+                    x2 = axisx.max;
+                }
+
+                if (!areaOpen) {
+                    // open area
+                    ctx.beginPath();
+                    ctx.moveTo(axisx.p2c(x1), axisy.p2c(bottom));
+                    areaOpen = true;
+                }
+
+                // now first check the case where both is outside
+                if (y1 >= axisy.max && y2 >= axisy.max) {
+                    ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.max));
+                    ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.max));
+                    continue;
+                } else if (y1 <= axisy.min && y2 <= axisy.min) {
+                    ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.min));
+                    ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.min));
+                    continue;
+                }
+
+                // else it's a bit more complicated, there might
+                // be a flat maxed out rectangle first, then a
+                // triangular cutout or reverse; to find these
+                // keep track of the current x values
+                var x1old = x1,
+                    x2old = x2;
+
+                // clip the y values, without shortcutting, we
+                // go through all cases in turn
+
+                // clip with ymin
+                if (y1 <= y2 && y1 < axisy.min && y2 >= axisy.min) {
+                    x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
+                    y1 = axisy.min;
+                } else if (y2 <= y1 && y2 < axisy.min && y1 >= axisy.min) {
+                    x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
+                    y2 = axisy.min;
+                }
+
+                // clip with ymax
+                if (y1 >= y2 && y1 > axisy.max && y2 <= axisy.max) {
+                    x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
+                    y1 = axisy.max;
+                } else if (y2 >= y1 && y2 > axisy.max && y1 <= axisy.max) {
+                    x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
+                    y2 = axisy.max;
+                }
+
+                // if the x value was changed we got a rectangle
+                // to fill
+                if (x1 !== x1old) {
+                    ctx.lineTo(axisx.p2c(x1old), axisy.p2c(y1));
+                    // it goes to (x1, y1), but we fill that below
+                }
+
+                // fill triangular section, this sometimes result
+                // in redundant points if (x1, y1) hasn't changed
+                // from previous line to, but we just ignore that
+                ctx.lineTo(axisx.p2c(x1), axisy.p2c(y1));
+                ctx.lineTo(axisx.p2c(x2), axisy.p2c(y2));
+
+                // fill the other rectangle if it's there
+                if (x2 !== x2old) {
+                    ctx.lineTo(axisx.p2c(x2), axisy.p2c(y2));
+                    ctx.lineTo(axisx.p2c(x2old), axisy.p2c(y2));
+                }
+            }
+        }
+
+        /**
+        - drawSeriesLines(series, ctx, plotOffset, plotWidth, plotHeight, drawSymbol, getColorOrGradient)
+
+         This function is used for drawing lines or area fill.  In case the series has line decimation function
+         attached, before starting to draw, as an optimization the points will first be decimated.
+
+         The series parameter contains the series to be drawn on ctx context. The plotOffset, plotWidth and
+         plotHeight are the corresponding parameters of flot used to determine the drawing surface.
+         The function getColorOrGradient is used to compute the fill style of lines and area.
+        */
+        function drawSeriesLines(series, ctx, plotOffset, plotWidth, plotHeight, drawSymbol, getColorOrGradient) {
+            ctx.save();
+            ctx.translate(plotOffset.left, plotOffset.top);
+            ctx.lineJoin = "round";
+
+            if (series.lines.dashes && ctx.setLineDash) {
+                ctx.setLineDash(series.lines.dashes);
+            }
+
+            var datapoints = {
+                format: series.datapoints.format,
+                points: series.datapoints.points,
+                pointsize: series.datapoints.pointsize
+            };
+
+            if (series.decimate) {
+                datapoints.points = series.decimate(series, series.xaxis.min, series.xaxis.max, plotWidth, series.yaxis.min, series.yaxis.max, plotHeight);
+            }
+
+            var lw = series.lines.lineWidth;
+
+            ctx.lineWidth = lw;
+            ctx.strokeStyle = series.color;
+            var fillStyle = getFillStyle(series.lines, series.color, 0, plotHeight, getColorOrGradient);
+            if (fillStyle) {
+                ctx.fillStyle = fillStyle;
+                plotLineArea(datapoints, series.xaxis, series.yaxis, series.lines.fillTowards || 0, ctx, series.lines.steps);
+            }
+
+            if (lw > 0) {
+                plotLine(datapoints, 0, 0, series.xaxis, series.yaxis, ctx, series.lines.steps);
+            }
+
+            ctx.restore();
+        }
+
+        /**
+        - drawSeriesPoints(series, ctx, plotOffset, plotWidth, plotHeight, drawSymbol, getColorOrGradient)
+
+         This function is used for drawing points using a given symbol. In case the series has points decimation
+         function attached, before starting to draw, as an optimization the points will first be decimated.
+
+         The series parameter contains the series to be drawn on ctx context. The plotOffset, plotWidth and
+         plotHeight are the corresponding parameters of flot used to determine the drawing surface.
+         The function drawSymbol is used to compute and draw the symbol chosen for the points.
+        */
+        function drawSeriesPoints(series, ctx, plotOffset, plotWidth, plotHeight, drawSymbol, getColorOrGradient) {
+            function drawCircle(ctx, x, y, radius, shadow, fill) {
+                ctx.moveTo(x + radius, y);
+                ctx.arc(x, y, radius, 0, shadow ? Math.PI : Math.PI * 2, false);
+            }
+            drawCircle.fill = true;
+            function plotPoints(datapoints, radius, fill, offset, shadow, axisx, axisy, drawSymbolFn) {
+                var points = datapoints.points,
+                    ps = datapoints.pointsize;
+
+                ctx.beginPath();
+                for (var i = 0; i < points.length; i += ps) {
+                    var x = points[i],
+                        y = points[i + 1];
+                    if (x == null || x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max) {
+                        continue;
+                    }
+
+                    x = axisx.p2c(x);
+                    y = axisy.p2c(y) + offset;
+
+                    drawSymbolFn(ctx, x, y, radius, shadow, fill);
+                }
+                if (drawSymbolFn.fill && !shadow) {
+                    ctx.fill();
+                }
+                ctx.stroke();
+            }
+
+            ctx.save();
+            ctx.translate(plotOffset.left, plotOffset.top);
+
+            var datapoints = {
+                format: series.datapoints.format,
+                points: series.datapoints.points,
+                pointsize: series.datapoints.pointsize
+            };
+
+            if (series.decimatePoints) {
+                datapoints.points = series.decimatePoints(series, series.xaxis.min, series.xaxis.max, plotWidth, series.yaxis.min, series.yaxis.max, plotHeight);
+            }
+
+            var lw = series.points.lineWidth,
+                radius = series.points.radius,
+                symbol = series.points.symbol,
+                drawSymbolFn;
+
+            if (symbol === 'circle') {
+                drawSymbolFn = drawCircle;
+            } else if (typeof symbol === 'string' && drawSymbol && drawSymbol[symbol]) {
+                drawSymbolFn = drawSymbol[symbol];
+            } else if (typeof drawSymbol === 'function') {
+                drawSymbolFn = drawSymbol;
+            }
+
+            // If the user sets the line width to 0, we change it to a very
+            // small value. A line width of 0 seems to force the default of 1.
+
+            if (lw === 0) {
+                lw = 0.0001;
+            }
+
+            ctx.lineWidth = lw;
+            ctx.fillStyle = getFillStyle(series.points, series.color, null, null, getColorOrGradient);
+            ctx.strokeStyle = series.color;
+            plotPoints(datapoints, radius,
+                true, 0, false,
+                series.xaxis, series.yaxis, drawSymbolFn);
+            ctx.restore();
+        }
+
+        function drawBar(x, y, b, barLeft, barRight, fillStyleCallback, axisx, axisy, c, horizontal, lineWidth) {
+            var left = x + barLeft,
+                right = x + barRight,
+                bottom = b, top = y,
+                drawLeft, drawRight, drawTop, drawBottom = false,
+                tmp;
+
+            drawLeft = drawRight = drawTop = true;
+
+            // in horizontal mode, we start the bar from the left
+            // instead of from the bottom so it appears to be
+            // horizontal rather than vertical
+            if (horizontal) {
+                drawBottom = drawRight = drawTop = true;
+                drawLeft = false;
+                left = b;
+                right = x;
+                top = y + barLeft;
+                bottom = y + barRight;
+
+                // account for negative bars
+                if (right < left) {
+                    tmp = right;
+                    right = left;
+                    left = tmp;
+                    drawLeft = true;
+                    drawRight = false;
+                }
+            }
+            else {
+                drawLeft = drawRight = drawTop = true;
+                drawBottom = false;
+                left = x + barLeft;
+                right = x + barRight;
+                bottom = b;
+                top = y;
+
+                // account for negative bars
+                if (top < bottom) {
+                    tmp = top;
+                    top = bottom;
+                    bottom = tmp;
+                    drawBottom = true;
+                    drawTop = false;
+                }
+            }
+
+            // clip
+            if (right < axisx.min || left > axisx.max ||
+                top < axisy.min || bottom > axisy.max) {
+                return;
+            }
+
+            if (left < axisx.min) {
+                left = axisx.min;
+                drawLeft = false;
+            }
+
+            if (right > axisx.max) {
+                right = axisx.max;
+                drawRight = false;
+            }
+
+            if (bottom < axisy.min) {
+                bottom = axisy.min;
+                drawBottom = false;
+            }
+
+            if (top > axisy.max) {
+                top = axisy.max;
+                drawTop = false;
+            }
+
+            left = axisx.p2c(left);
+            bottom = axisy.p2c(bottom);
+            right = axisx.p2c(right);
+            top = axisy.p2c(top);
+
+            // fill the bar
+            if (fillStyleCallback) {
+                c.fillStyle = fillStyleCallback(bottom, top);
+                c.fillRect(left, top, right - left, bottom - top)
+            }
+
+            // draw outline
+            if (lineWidth > 0 && (drawLeft || drawRight || drawTop || drawBottom)) {
+                c.beginPath();
+
+                // FIXME: inline moveTo is buggy with excanvas
+                c.moveTo(left, bottom);
+                if (drawLeft) {
+                    c.lineTo(left, top);
+                } else {
+                    c.moveTo(left, top);
+                }
+
+                if (drawTop) {
+                    c.lineTo(right, top);
+                } else {
+                    c.moveTo(right, top);
+                }
+
+                if (drawRight) {
+                    c.lineTo(right, bottom);
+                } else {
+                    c.moveTo(right, bottom);
+                }
+
+                if (drawBottom) {
+                    c.lineTo(left, bottom);
+                } else {
+                    c.moveTo(left, bottom);
+                }
+
+                c.stroke();
+            }
+        }
+
+        /**
+        - drawSeriesBars(series, ctx, plotOffset, plotWidth, plotHeight, drawSymbol, getColorOrGradient)
+
+         This function is used for drawing series represented as bars. In case the series has decimation
+         function attached, before starting to draw, as an optimization the points will first be decimated.
+
+         The series parameter contains the series to be drawn on ctx context. The plotOffset, plotWidth and
+         plotHeight are the corresponding parameters of flot used to determine the drawing surface.
+         The function getColorOrGradient is used to compute the fill style of bars.
+        */
+        function drawSeriesBars(series, ctx, plotOffset, plotWidth, plotHeight, drawSymbol, getColorOrGradient) {
+            function plotBars(datapoints, barLeft, barRight, fillStyleCallback, axisx, axisy) {
+                var points = datapoints.points,
+                    ps = datapoints.pointsize,
+                    fillTowards = series.bars.fillTowards || 0,
+                    defaultBottom = fillTowards > axisy.min ? Math.min(axisy.max, fillTowards) : axisy.min;
+
+                for (var i = 0; i < points.length; i += ps) {
+                    if (points[i] == null) {
+                        continue;
+                    }
+
+                    // Use third point as bottom if pointsize is 3
+                    var bottom = ps === 3 ? points[i + 2] : defaultBottom;
+                    drawBar(points[i], points[i + 1], bottom, barLeft, barRight, fillStyleCallback, axisx, axisy, ctx, series.bars.horizontal, series.bars.lineWidth);
+                }
+            }
+
+            ctx.save();
+            ctx.translate(plotOffset.left, plotOffset.top);
+
+            var datapoints = {
+                format: series.datapoints.format,
+                points: series.datapoints.points,
+                pointsize: series.datapoints.pointsize
+            };
+
+            if (series.decimate) {
+                datapoints.points = series.decimate(series, series.xaxis.min, series.xaxis.max, plotWidth);
+            }
+
+            ctx.lineWidth = series.bars.lineWidth;
+            ctx.strokeStyle = series.color;
+
+            var barLeft;
+            var barWidth = series.bars.barWidth[0] || series.bars.barWidth;
+            switch (series.bars.align) {
+                case "left":
+                    barLeft = 0;
+                    break;
+                case "right":
+                    barLeft = -barWidth;
+                    break;
+                default:
+                    barLeft = -barWidth / 2;
+            }
+
+            var fillStyleCallback = series.bars.fill ? function(bottom, top) {
+                return getFillStyle(series.bars, series.color, bottom, top, getColorOrGradient);
+            } : null;
+
+            plotBars(datapoints, barLeft, barLeft + barWidth, fillStyleCallback, series.xaxis, series.yaxis);
+            ctx.restore();
+        }
+
+        function getFillStyle(filloptions, seriesColor, bottom, top, getColorOrGradient) {
+            var fill = filloptions.fill;
+            if (!fill) {
+                return null;
+            }
+
+            if (filloptions.fillColor) {
+                return getColorOrGradient(filloptions.fillColor, bottom, top, seriesColor);
+            }
+
+            var c = $.color.parse(seriesColor);
+            c.a = typeof fill === "number" ? fill : 0.4;
+            c.normalize();
+            return c.toString();
+        }
+
+        this.drawSeriesLines = drawSeriesLines;
+        this.drawSeriesPoints = drawSeriesPoints;
+        this.drawSeriesBars = drawSeriesBars;
+        this.drawBar = drawBar;
+    };
+
+    $.plot.drawSeries = new DrawSeries();
+})(jQuery);

frontend/lib/flot/jquery.flot.errorbars.js

@@ -0,0 +1,375 @@
+/* Flot plugin for plotting error bars.
+
+Copyright (c) 2007-2014 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+Error bars are used to show standard deviation and other statistical
+properties in a plot.
+
+* Created by Rui Pereira  -  rui (dot) pereira (at) gmail (dot) com
+
+This plugin allows you to plot error-bars over points. Set "errorbars" inside
+the points series to the axis name over which there will be error values in
+your data array (*even* if you do not intend to plot them later, by setting
+"show: null" on xerr/yerr).
+
+The plugin supports these options:
+
+    series: {
+        points: {
+            errorbars: "x" or "y" or "xy",
+            xerr: {
+                show: null/false or true,
+                asymmetric: null/false or true,
+                upperCap: null or "-" or function,
+                lowerCap: null or "-" or function,
+                color: null or color,
+                radius: null or number
+            },
+            yerr: { same options as xerr }
+        }
+    }
+
+Each data point array is expected to be of the type:
+
+    "x"  [ x, y, xerr ]
+    "y"  [ x, y, yerr ]
+    "xy" [ x, y, xerr, yerr ]
+
+Where xerr becomes xerr_lower,xerr_upper for the asymmetric error case, and
+equivalently for yerr. Eg., a datapoint for the "xy" case with symmetric
+error-bars on X and asymmetric on Y would be:
+
+    [ x, y, xerr, yerr_lower, yerr_upper ]
+
+By default no end caps are drawn. Setting upperCap and/or lowerCap to "-" will
+draw a small cap perpendicular to the error bar. They can also be set to a
+user-defined drawing function, with (ctx, x, y, radius) as parameters, as eg.
+
+    function drawSemiCircle( ctx, x, y, radius ) {
+        ctx.beginPath();
+        ctx.arc( x, y, radius, 0, Math.PI, false );
+        ctx.moveTo( x - radius, y );
+        ctx.lineTo( x + radius, y );
+        ctx.stroke();
+    }
+
+Color and radius both default to the same ones of the points series if not
+set. The independent radius parameter on xerr/yerr is useful for the case when
+we may want to add error-bars to a line, without showing the interconnecting
+points (with radius: 0), and still showing end caps on the error-bars.
+shadowSize and lineWidth are derived as well from the points series.
+
+*/
+
+(function ($) {
+    var options = {
+        series: {
+            points: {
+                errorbars: null, //should be 'x', 'y' or 'xy'
+                xerr: {err: 'x', show: null, asymmetric: null, upperCap: null, lowerCap: null, color: null, radius: null},
+                yerr: {err: 'y', show: null, asymmetric: null, upperCap: null, lowerCap: null, color: null, radius: null}
+            }
+        }
+    };
+
+    function processRawData(plot, series, data, datapoints) {
+        if (!series.points.errorbars) {
+            return;
+        }
+
+        // x,y values
+        var format = [
+            { x: true, number: true, required: true },
+            { y: true, number: true, required: true }
+        ];
+
+        var errors = series.points.errorbars;
+        // error bars - first X then Y
+        if (errors === 'x' || errors === 'xy') {
+            // lower / upper error
+            if (series.points.xerr.asymmetric) {
+                format.push({ x: true, number: true, required: true });
+                format.push({ x: true, number: true, required: true });
+            } else {
+                format.push({ x: true, number: true, required: true });
+            }
+        }
+        if (errors === 'y' || errors === 'xy') {
+            // lower / upper error
+            if (series.points.yerr.asymmetric) {
+                format.push({ y: true, number: true, required: true });
+                format.push({ y: true, number: true, required: true });
+            } else {
+                format.push({ y: true, number: true, required: true });
+            }
+        }
+        datapoints.format = format;
+    }
+
+    function parseErrors(series, i) {
+        var points = series.datapoints.points;
+
+        // read errors from points array
+        var exl = null,
+            exu = null,
+            eyl = null,
+            eyu = null;
+        var xerr = series.points.xerr,
+            yerr = series.points.yerr;
+
+        var eb = series.points.errorbars;
+        // error bars - first X
+        if (eb === 'x' || eb === 'xy') {
+            if (xerr.asymmetric) {
+                exl = points[i + 2];
+                exu = points[i + 3];
+                if (eb === 'xy') {
+                    if (yerr.asymmetric) {
+                        eyl = points[i + 4];
+                        eyu = points[i + 5];
+                    } else {
+                        eyl = points[i + 4];
+                    }
+                }
+            } else {
+                exl = points[i + 2];
+                if (eb === 'xy') {
+                    if (yerr.asymmetric) {
+                        eyl = points[i + 3];
+                        eyu = points[i + 4];
+                    } else {
+                        eyl = points[i + 3];
+                    }
+                }
+            }
+        // only Y
+        } else {
+            if (eb === 'y') {
+                if (yerr.asymmetric) {
+                    eyl = points[i + 2];
+                    eyu = points[i + 3];
+                } else {
+                    eyl = points[i + 2];
+                }
+            }
+        }
+
+        // symmetric errors?
+        if (exu == null) exu = exl;
+        if (eyu == null) eyu = eyl;
+
+        var errRanges = [exl, exu, eyl, eyu];
+        // nullify if not showing
+        if (!xerr.show) {
+            errRanges[0] = null;
+            errRanges[1] = null;
+        }
+        if (!yerr.show) {
+            errRanges[2] = null;
+            errRanges[3] = null;
+        }
+        return errRanges;
+    }
+
+    function drawSeriesErrors(plot, ctx, s) {
+        var points = s.datapoints.points,
+            ps = s.datapoints.pointsize,
+            ax = [s.xaxis, s.yaxis],
+            radius = s.points.radius,
+            err = [s.points.xerr, s.points.yerr],
+            tmp;
+
+        //sanity check, in case some inverted axis hack is applied to flot
+        var invertX = false;
+        if (ax[0].p2c(ax[0].max) < ax[0].p2c(ax[0].min)) {
+            invertX = true;
+            tmp = err[0].lowerCap;
+            err[0].lowerCap = err[0].upperCap;
+            err[0].upperCap = tmp;
+        }
+
+        var invertY = false;
+        if (ax[1].p2c(ax[1].min) < ax[1].p2c(ax[1].max)) {
+            invertY = true;
+            tmp = err[1].lowerCap;
+            err[1].lowerCap = err[1].upperCap;
+            err[1].upperCap = tmp;
+        }
+
+        for (var i = 0; i < s.datapoints.points.length; i += ps) {
+            //parse
+            var errRanges = parseErrors(s, i);
+
+            //cycle xerr & yerr
+            for (var e = 0; e < err.length; e++) {
+                var minmax = [ax[e].min, ax[e].max];
+
+                //draw this error?
+                if (errRanges[e * err.length]) {
+                    //data coordinates
+                    var x = points[i],
+                        y = points[i + 1];
+
+                    //errorbar ranges
+                    var upper = [x, y][e] + errRanges[e * err.length + 1],
+                        lower = [x, y][e] - errRanges[e * err.length];
+
+                    //points outside of the canvas
+                    if (err[e].err === 'x') {
+                        if (y > ax[1].max || y < ax[1].min || upper < ax[0].min || lower > ax[0].max) {
+                            continue;
+                        }
+                    }
+
+                    if (err[e].err === 'y') {
+                        if (x > ax[0].max || x < ax[0].min || upper < ax[1].min || lower > ax[1].max) {
+                            continue;
+                        }
+                    }
+
+                    // prevent errorbars getting out of the canvas
+                    var drawUpper = true,
+                        drawLower = true;
+
+                    if (upper > minmax[1]) {
+                        drawUpper = false;
+                        upper = minmax[1];
+                    }
+                    if (lower < minmax[0]) {
+                        drawLower = false;
+                        lower = minmax[0];
+                    }
+
+                    //sanity check, in case some inverted axis hack is applied to flot
+                    if ((err[e].err === 'x' && invertX) || (err[e].err === 'y' && invertY)) {
+                        //swap coordinates
+                        tmp = lower;
+                        lower = upper;
+                        upper = tmp;
+                        tmp = drawLower;
+                        drawLower = drawUpper;
+                        drawUpper = tmp;
+                        tmp = minmax[0];
+                        minmax[0] = minmax[1];
+                        minmax[1] = tmp;
+                    }
+
+                    // convert to pixels
+                    x = ax[0].p2c(x);
+                    y = ax[1].p2c(y);
+                    upper = ax[e].p2c(upper);
+                    lower = ax[e].p2c(lower);
+                    minmax[0] = ax[e].p2c(minmax[0]);
+                    minmax[1] = ax[e].p2c(minmax[1]);
+
+                    //same style as points by default
+                    var lw = err[e].lineWidth ? err[e].lineWidth : s.points.lineWidth,
+                        sw = s.points.shadowSize != null ? s.points.shadowSize : s.shadowSize;
+
+                    //shadow as for points
+                    if (lw > 0 && sw > 0) {
+                        var w = sw / 2;
+                        ctx.lineWidth = w;
+                        ctx.strokeStyle = "rgba(0,0,0,0.1)";
+                        drawError(ctx, err[e], x, y, upper, lower, drawUpper, drawLower, radius, w + w / 2, minmax);
+
+                        ctx.strokeStyle = "rgba(0,0,0,0.2)";
+                        drawError(ctx, err[e], x, y, upper, lower, drawUpper, drawLower, radius, w / 2, minmax);
+                    }
+
+                    ctx.strokeStyle = err[e].color
+                        ? err[e].color
+                        : s.color;
+                    ctx.lineWidth = lw;
+                    //draw it
+                    drawError(ctx, err[e], x, y, upper, lower, drawUpper, drawLower, radius, 0, minmax);
+                }
+            }
+        }
+    }
+
+    function drawError(ctx, err, x, y, upper, lower, drawUpper, drawLower, radius, offset, minmax) {
+        //shadow offset
+        y += offset;
+        upper += offset;
+        lower += offset;
+
+        // error bar - avoid plotting over circles
+        if (err.err === 'x') {
+            if (upper > x + radius) drawPath(ctx, [[upper, y], [Math.max(x + radius, minmax[0]), y]]);
+            else drawUpper = false;
+
+            if (lower < x - radius) drawPath(ctx, [[Math.min(x - radius, minmax[1]), y], [lower, y]]);
+            else drawLower = false;
+        } else {
+            if (upper < y - radius) drawPath(ctx, [[x, upper], [x, Math.min(y - radius, minmax[0])]]);
+            else drawUpper = false;
+
+            if (lower > y + radius) drawPath(ctx, [[x, Math.max(y + radius, minmax[1])], [x, lower]]);
+            else drawLower = false;
+        }
+
+        //internal radius value in errorbar, allows to plot radius 0 points and still keep proper sized caps
+        //this is a way to get errorbars on lines without visible connecting dots
+        radius = err.radius != null
+            ? err.radius
+            : radius;
+
+        // upper cap
+        if (drawUpper) {
+            if (err.upperCap === '-') {
+                if (err.err === 'x') drawPath(ctx, [[upper, y - radius], [upper, y + radius]]);
+                else drawPath(ctx, [[x - radius, upper], [x + radius, upper]]);
+            } else if ($.isFunction(err.upperCap)) {
+                if (err.err === 'x') err.upperCap(ctx, upper, y, radius);
+                else err.upperCap(ctx, x, upper, radius);
+            }
+        }
+        // lower cap
+        if (drawLower) {
+            if (err.lowerCap === '-') {
+                if (err.err === 'x') drawPath(ctx, [[lower, y - radius], [lower, y + radius]]);
+                else drawPath(ctx, [[x - radius, lower], [x + radius, lower]]);
+            } else if ($.isFunction(err.lowerCap)) {
+                if (err.err === 'x') err.lowerCap(ctx, lower, y, radius);
+                else err.lowerCap(ctx, x, lower, radius);
+            }
+        }
+    }
+
+    function drawPath(ctx, pts) {
+        ctx.beginPath();
+        ctx.moveTo(pts[0][0], pts[0][1]);
+        for (var p = 1; p < pts.length; p++) {
+            ctx.lineTo(pts[p][0], pts[p][1]);
+        }
+
+        ctx.stroke();
+    }
+
+    function draw(plot, ctx) {
+        var plotOffset = plot.getPlotOffset();
+
+        ctx.save();
+        ctx.translate(plotOffset.left, plotOffset.top);
+        $.each(plot.getData(), function (i, s) {
+            if (s.points.errorbars && (s.points.xerr.show || s.points.yerr.show)) {
+                drawSeriesErrors(plot, ctx, s);
+            }
+        });
+        ctx.restore();
+    }
+
+    function init(plot) {
+        plot.hooks.processRawData.push(processRawData);
+        plot.hooks.draw.push(draw);
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: 'errorbars',
+        version: '1.0'
+    });
+})(jQuery);

frontend/lib/flot/jquery.flot.fillbetween.js

@@ -0,0 +1,254 @@
+/* Flot plugin for computing bottoms for filled line and bar charts.
+
+Copyright (c) 2007-2014 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+The case: you've got two series that you want to fill the area between. In Flot
+terms, you need to use one as the fill bottom of the other. You can specify the
+bottom of each data point as the third coordinate manually, or you can use this
+plugin to compute it for you.
+
+In order to name the other series, you need to give it an id, like this:
+
+    var dataset = [
+        { data: [ ... ], id: "foo" } ,         // use default bottom
+        { data: [ ... ], fillBetween: "foo" }, // use first dataset as bottom
+    ];
+
+    $.plot($("#placeholder"), dataset, { lines: { show: true, fill: true }});
+
+As a convenience, if the id given is a number that doesn't appear as an id in
+the series, it is interpreted as the index in the array instead (so fillBetween:
+0 can also mean the first series).
+
+Internally, the plugin modifies the datapoints in each series. For line series,
+extra data points might be inserted through interpolation. Note that at points
+where the bottom line is not defined (due to a null point or start/end of line),
+the current line will show a gap too. The algorithm comes from the
+jquery.flot.stack.js plugin, possibly some code could be shared.
+
+*/
+
+(function ($) {
+    var options = {
+        series: {
+            fillBetween: null    // or number
+        }
+    };
+
+    function init(plot) {
+        function findBottomSeries(s, allseries) {
+            var i;
+
+            for (i = 0; i < allseries.length; ++i) {
+                if (allseries[ i ].id === s.fillBetween) {
+                    return allseries[ i ];
+                }
+            }
+
+            if (typeof s.fillBetween === "number") {
+                if (s.fillBetween < 0 || s.fillBetween >= allseries.length) {
+                    return null;
+                }
+                return allseries[ s.fillBetween ];
+            }
+
+            return null;
+        }
+
+        function computeFormat(plot, s, data, datapoints) {
+            if (s.fillBetween == null) {
+                return;
+            }
+            
+            format = datapoints.format;
+            var plotHasId = function(id) {
+                var plotData = plot.getData();
+                for (i = 0; i < plotData.length; i++) {
+                    if (plotData[i].id === id) {
+                        return true;
+                    }
+                }
+
+                return false;
+            }
+
+            if (!format) {
+                format = [];
+
+                format.push({ 
+                    x: true, 
+                    number: true, 
+                    computeRange: s.xaxis.options.autoScale !== 'none',
+                    required: true 
+                });
+                format.push({ 
+                    y: true, 
+                    number: true, 
+                    computeRange: s.yaxis.options.autoScale !== 'none',
+                    required: true 
+                });
+
+                if (s.fillBetween !== undefined && s.fillBetween !== '' && plotHasId(s.fillBetween) && s.fillBetween !== s.id) {
+                    format.push({
+                        x: false,
+                        y: true,
+                        number: true,
+                        required: false,
+                        computeRange: s.yaxis.options.autoScale !== 'none',
+                        defaultValue: 0
+                    });
+                }
+
+                datapoints.format = format;
+            }
+        }
+
+        function computeFillBottoms(plot, s, datapoints) {
+            if (s.fillBetween == null) {
+                return;
+            }
+
+            var other = findBottomSeries(s, plot.getData());
+
+            if (!other) {
+                return;
+            }
+
+            var ps = datapoints.pointsize,
+                points = datapoints.points,
+                otherps = other.datapoints.pointsize,
+                otherpoints = other.datapoints.points,
+                newpoints = [],
+                px, py, intery, qx, qy, bottom,
+                withlines = s.lines.show,
+                withbottom = ps > 2 && datapoints.format[2].y,
+                withsteps = withlines && s.lines.steps,
+                fromgap = true,
+                i = 0,
+                j = 0,
+                l, m;
+
+            while (true) {
+                if (i >= points.length) {
+                    break;
+                }
+
+                l = newpoints.length;
+
+                if (points[ i ] == null) {
+                    // copy gaps
+                    for (m = 0; m < ps; ++m) {
+                        newpoints.push(points[ i + m ]);
+                    }
+
+                    i += ps;
+                } else if (j >= otherpoints.length) {
+                    // for lines, we can't use the rest of the points
+                    if (!withlines) {
+                        for (m = 0; m < ps; ++m) {
+                            newpoints.push(points[ i + m ]);
+                        }
+                    }
+
+                    i += ps;
+                } else if (otherpoints[ j ] == null) {
+                    // oops, got a gap
+                    for (m = 0; m < ps; ++m) {
+                        newpoints.push(null);
+                    }
+
+                    fromgap = true;
+                    j += otherps;
+                } else {
+                    // cases where we actually got two points
+                    px = points[ i ];
+                    py = points[ i + 1 ];
+                    qx = otherpoints[ j ];
+                    qy = otherpoints[ j + 1 ];
+                    bottom = 0;
+
+                    if (px === qx) {
+                        for (m = 0; m < ps; ++m) {
+                            newpoints.push(points[ i + m ]);
+                        }
+
+                        //newpoints[ l + 1 ] += qy;
+                        bottom = qy;
+
+                        i += ps;
+                        j += otherps;
+                    } else if (px > qx) {
+                        // we got past point below, might need to
+                        // insert interpolated extra point
+
+                        if (withlines && i > 0 && points[ i - ps ] != null) {
+                            intery = py + (points[ i - ps + 1 ] - py) * (qx - px) / (points[ i - ps ] - px);
+                            newpoints.push(qx);
+                            newpoints.push(intery);
+                            for (m = 2; m < ps; ++m) {
+                                newpoints.push(points[ i + m ]);
+                            }
+                            bottom = qy;
+                        }
+
+                        j += otherps;
+                    } else {
+                        // px < qx
+                        // if we come from a gap, we just skip this point
+
+                        if (fromgap && withlines) {
+                            i += ps;
+                            continue;
+                        }
+
+                        for (m = 0; m < ps; ++m) {
+                            newpoints.push(points[ i + m ]);
+                        }
+
+                        // we might be able to interpolate a point below,
+                        // this can give us a better y
+
+                        if (withlines && j > 0 && otherpoints[ j - otherps ] != null) {
+                            bottom = qy + (otherpoints[ j - otherps + 1 ] - qy) * (px - qx) / (otherpoints[ j - otherps ] - qx);
+                        }
+
+                        //newpoints[l + 1] += bottom;
+
+                        i += ps;
+                    }
+
+                    fromgap = false;
+
+                    if (l !== newpoints.length && withbottom) {
+                        newpoints[ l + 2 ] = bottom;
+                    }
+                }
+
+                // maintain the line steps invariant
+
+                if (withsteps && l !== newpoints.length && l > 0 &&
+                    newpoints[ l ] !== null &&
+                    newpoints[ l ] !== newpoints[ l - ps ] &&
+                    newpoints[ l + 1 ] !== newpoints[ l - ps + 1 ]) {
+                    for (m = 0; m < ps; ++m) {
+                        newpoints[ l + ps + m ] = newpoints[ l + m ];
+                    }
+                    newpoints[ l + 1 ] = newpoints[ l - ps + 1 ];
+                }
+            }
+
+            datapoints.points = newpoints;
+        }
+
+        plot.hooks.processRawData.push(computeFormat);
+        plot.hooks.processDatapoints.push(computeFillBottoms);
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: "fillbetween",
+        version: "1.0"
+    });
+})(jQuery);

frontend/lib/flot/jquery.flot.flatdata.js

@@ -0,0 +1,47 @@
+/* Support for flat 1D data series.
+
+A 1D flat data series is a data series in the form of a regular 1D array. The
+main reason for using a flat data series is that it performs better, consumes
+less memory and generates less garbage collection than the regular flot format.
+
+Example:
+
+    plot.setData([[[0,0], [1,1], [2,2], [3,3]]]); // regular flot format
+    plot.setData([{flatdata: true, data: [0, 1, 2, 3]}]); // flatdata format
+
+Set series.flatdata to true to enable this plugin.
+
+You can use series.start to specify the starting index of the series (default is 0)
+You can use series.step to specify the interval between consecutive indexes of the series (default is 1)
+*/
+
+/* global jQuery*/
+
+(function ($) {
+    'use strict';
+
+    function process1DRawData(plot, series, data, datapoints) {
+        if (series.flatdata === true) {
+            var start = series.start || 0;
+            var step = typeof series.step === 'number' ? series.step : 1;
+            datapoints.pointsize = 2;
+            for (var i = 0, j = 0; i < data.length; i++, j += 2) {
+                datapoints.points[j] = start + (i * step);
+                datapoints.points[j + 1] = data[i];
+            }
+            if (datapoints.points !== undefined) {
+                datapoints.points.length = data.length * 2;
+            } else {
+                datapoints.points = [];
+            }
+        }
+    }
+
+    $.plot.plugins.push({
+        init: function(plot) {
+            plot.hooks.processRawData.push(process1DRawData);
+        },
+        name: 'flatdata',
+        version: '0.0.2'
+    });
+})(jQuery);

frontend/lib/flot/jquery.flot.hover.js

@@ -0,0 +1,350 @@
+/* global jQuery */
+
+/**
+## jquery.flot.hover.js
+
+This plugin is used for mouse hover and tap on a point of plot series.
+It supports the following options:
+```js
+grid: {
+    hoverable: false, //to trigger plothover event on mouse hover or tap on a point
+    clickable: false //to trigger plotclick event on mouse hover
+}
+```
+
+It listens to native mouse move event or click, as well as artificial generated
+tap and touchevent.
+
+When the mouse is over a point or a tap on a point is performed, that point or
+the correscponding bar will be highlighted and a "plothover" event will be generated.
+
+Custom "touchevent" is triggered when any touch interaction is made. Hover plugin
+handles this events by unhighlighting all of the previously highlighted points and generates
+"plothovercleanup" event to notify any part that is handling plothover (for exemple to cleanup
+the tooltip from webcharts).
+*/
+
+(function($) {
+    'use strict';
+
+    var options = {
+        grid: {
+            hoverable: false,
+            clickable: false
+        }
+    };
+
+    var browser = $.plot.browser;
+
+    var eventType = {
+        click: 'click',
+        hover: 'hover'
+    }
+
+    function init(plot) {
+        var lastMouseMoveEvent;
+        var highlights = [];
+
+        function bindEvents(plot, eventHolder) {
+            var o = plot.getOptions();
+
+            if (o.grid.hoverable || o.grid.clickable) {
+                eventHolder[0].addEventListener('touchevent', triggerCleanupEvent, false);
+                eventHolder[0].addEventListener('tap', generatePlothoverEvent, false);
+            }
+
+            if (o.grid.clickable) {
+                eventHolder.bind("click", onClick);
+            }
+
+            if (o.grid.hoverable) {
+                eventHolder.bind("mousemove", onMouseMove);
+
+                // Use bind, rather than .mouseleave, because we officially
+                // still support jQuery 1.2.6, which doesn't define a shortcut
+                // for mouseenter or mouseleave.  This was a bug/oversight that
+                // was fixed somewhere around 1.3.x.  We can return to using
+                // .mouseleave when we drop support for 1.2.6.
+
+                eventHolder.bind("mouseleave", onMouseLeave);
+            }
+        }
+
+        function shutdown(plot, eventHolder) {
+            eventHolder[0].removeEventListener('tap', generatePlothoverEvent);
+            eventHolder[0].removeEventListener('touchevent', triggerCleanupEvent);
+            eventHolder.unbind("mousemove", onMouseMove);
+            eventHolder.unbind("mouseleave", onMouseLeave);
+            eventHolder.unbind("click", onClick);
+            highlights = [];
+        }
+
+
+        function generatePlothoverEvent(e) {
+            var o = plot.getOptions(),
+                newEvent = new CustomEvent('mouseevent');
+
+            //transform from touch event to mouse event format
+            newEvent.pageX = e.detail.changedTouches[0].pageX;
+            newEvent.pageY = e.detail.changedTouches[0].pageY;
+            newEvent.clientX = e.detail.changedTouches[0].clientX;
+            newEvent.clientY = e.detail.changedTouches[0].clientY;
+
+            if (o.grid.hoverable) {
+                doTriggerClickHoverEvent(newEvent, eventType.hover, 30);
+            }
+            return false;
+        }
+
+        function doTriggerClickHoverEvent(event, eventType, searchDistance) {
+            var series = plot.getData();
+            if (event !== undefined
+                && series.length > 0
+                && series[0].xaxis.c2p !== undefined
+                && series[0].yaxis.c2p !== undefined) {
+                var eventToTrigger = "plot" + eventType;
+                var seriesFlag = eventType + "able";
+                triggerClickHoverEvent(eventToTrigger, event,
+                    function(i) {
+                        return series[i][seriesFlag] !== false;
+                    }, searchDistance);
+            }
+        }
+
+        function onMouseMove(e) {
+            lastMouseMoveEvent = e;
+            plot.getPlaceholder()[0].lastMouseMoveEvent = e;
+            doTriggerClickHoverEvent(e, eventType.hover);
+        }
+
+        function onMouseLeave(e) {
+            lastMouseMoveEvent = undefined;
+            plot.getPlaceholder()[0].lastMouseMoveEvent = undefined;
+            triggerClickHoverEvent("plothover", e,
+                function(i) {
+                    return false;
+                });
+        }
+
+        function onClick(e) {
+            doTriggerClickHoverEvent(e, eventType.click);
+        }
+
+        function triggerCleanupEvent() {
+            plot.unhighlight();
+            plot.getPlaceholder().trigger('plothovercleanup');
+        }
+
+        // trigger click or hover event (they send the same parameters
+        // so we share their code)
+        function triggerClickHoverEvent(eventname, event, seriesFilter, searchDistance) {
+            var options = plot.getOptions(),
+                offset = plot.offset(),
+                page = browser.getPageXY(event),
+                canvasX = page.X - offset.left,
+                canvasY = page.Y - offset.top,
+                pos = plot.c2p({
+                    left: canvasX,
+                    top: canvasY
+                }),
+                distance = searchDistance !== undefined ? searchDistance : options.grid.mouseActiveRadius;
+
+            pos.pageX = page.X;
+            pos.pageY = page.Y;
+
+            var item = plot.findNearbyItem(canvasX, canvasY, seriesFilter, distance);
+
+            if (item) {
+                // fill in mouse pos for any listeners out there
+                item.pageX = parseInt(item.series.xaxis.p2c(item.datapoint[0]) + offset.left, 10);
+                item.pageY = parseInt(item.series.yaxis.p2c(item.datapoint[1]) + offset.top, 10);
+            }
+
+            if (options.grid.autoHighlight) {
+                // clear auto-highlights
+                for (var i = 0; i < highlights.length; ++i) {
+                    var h = highlights[i];
+                    if ((h.auto === eventname &&
+                        !(item && h.series === item.series &&
+                            h.point[0] === item.datapoint[0] &&
+                            h.point[1] === item.datapoint[1])) || !item) {
+                        unhighlight(h.series, h.point);
+                    }
+                }
+
+                if (item) {
+                    highlight(item.series, item.datapoint, eventname);
+                }
+            }
+
+            plot.getPlaceholder().trigger(eventname, [pos, item]);
+        }
+
+        function highlight(s, point, auto) {
+            if (typeof s === "number") {
+                s = plot.getData()[s];
+            }
+
+            if (typeof point === "number") {
+                var ps = s.datapoints.pointsize;
+                point = s.datapoints.points.slice(ps * point, ps * (point + 1));
+            }
+
+            var i = indexOfHighlight(s, point);
+            if (i === -1) {
+                highlights.push({
+                    series: s,
+                    point: point,
+                    auto: auto
+                });
+
+                plot.triggerRedrawOverlay();
+            } else if (!auto) {
+                highlights[i].auto = false;
+            }
+        }
+
+        function unhighlight(s, point) {
+            if (s == null && point == null) {
+                highlights = [];
+                plot.triggerRedrawOverlay();
+                return;
+            }
+
+            if (typeof s === "number") {
+                s = plot.getData()[s];
+            }
+
+            if (typeof point === "number") {
+                var ps = s.datapoints.pointsize;
+                point = s.datapoints.points.slice(ps * point, ps * (point + 1));
+            }
+
+            var i = indexOfHighlight(s, point);
+            if (i !== -1) {
+                highlights.splice(i, 1);
+
+                plot.triggerRedrawOverlay();
+            }
+        }
+
+        function indexOfHighlight(s, p) {
+            for (var i = 0; i < highlights.length; ++i) {
+                var h = highlights[i];
+                if (h.series === s &&
+                    h.point[0] === p[0] &&
+                    h.point[1] === p[1]) {
+                    return i;
+                }
+            }
+
+            return -1;
+        }
+
+        function processDatapoints() {
+            triggerCleanupEvent();
+            doTriggerClickHoverEvent(lastMouseMoveEvent, eventType.hover);
+        }
+
+        function setupGrid() {
+            doTriggerClickHoverEvent(lastMouseMoveEvent, eventType.hover);
+        }
+
+        function drawOverlay(plot, octx, overlay) {
+            var plotOffset = plot.getPlotOffset(),
+                i, hi;
+
+            octx.save();
+            octx.translate(plotOffset.left, plotOffset.top);
+            for (i = 0; i < highlights.length; ++i) {
+                hi = highlights[i];
+
+                if (hi.series.bars.show) drawBarHighlight(hi.series, hi.point, octx);
+                else drawPointHighlight(hi.series, hi.point, octx, plot);
+            }
+            octx.restore();
+        }
+
+        function drawPointHighlight(series, point, octx, plot) {
+            var x = point[0],
+                y = point[1],
+                axisx = series.xaxis,
+                axisy = series.yaxis,
+                highlightColor = (typeof series.highlightColor === "string") ? series.highlightColor : $.color.parse(series.color).scale('a', 0.5).toString();
+
+            if (x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max) {
+                return;
+            }
+
+            var pointRadius = series.points.radius + series.points.lineWidth / 2;
+            octx.lineWidth = pointRadius;
+            octx.strokeStyle = highlightColor;
+            var radius = 1.5 * pointRadius;
+            x = axisx.p2c(x);
+            y = axisy.p2c(y);
+
+            octx.beginPath();
+            var symbol = series.points.symbol;
+            if (symbol === 'circle') {
+                octx.arc(x, y, radius, 0, 2 * Math.PI, false);
+            } else if (typeof symbol === 'string' && plot.drawSymbol && plot.drawSymbol[symbol]) {
+                plot.drawSymbol[symbol](octx, x, y, radius, false);
+            }
+
+            octx.closePath();
+            octx.stroke();
+        }
+
+        function drawBarHighlight(series, point, octx) {
+            var highlightColor = (typeof series.highlightColor === "string") ? series.highlightColor : $.color.parse(series.color).scale('a', 0.5).toString(),
+                fillStyle = highlightColor,
+                barLeft;
+
+            var barWidth = series.bars.barWidth[0] || series.bars.barWidth;
+            switch (series.bars.align) {
+                case "left":
+                    barLeft = 0;
+                    break;
+                case "right":
+                    barLeft = -barWidth;
+                    break;
+                default:
+                    barLeft = -barWidth / 2;
+            }
+
+            octx.lineWidth = series.bars.lineWidth;
+            octx.strokeStyle = highlightColor;
+
+            var fillTowards = series.bars.fillTowards || 0,
+                bottom = fillTowards > series.yaxis.min ? Math.min(series.yaxis.max, fillTowards) : series.yaxis.min;
+
+            $.plot.drawSeries.drawBar(point[0], point[1], point[2] || bottom, barLeft, barLeft + barWidth,
+                function() {
+                    return fillStyle;
+                }, series.xaxis, series.yaxis, octx, series.bars.horizontal, series.bars.lineWidth);
+        }
+
+        function initHover(plot, options) {
+            plot.highlight = highlight;
+            plot.unhighlight = unhighlight;
+            if (options.grid.hoverable || options.grid.clickable) {
+                plot.hooks.drawOverlay.push(drawOverlay);
+                plot.hooks.processDatapoints.push(processDatapoints);
+                plot.hooks.setupGrid.push(setupGrid);
+            }
+
+            lastMouseMoveEvent = plot.getPlaceholder()[0].lastMouseMoveEvent;
+        }
+
+        plot.hooks.bindEvents.push(bindEvents);
+        plot.hooks.shutdown.push(shutdown);
+        plot.hooks.processOptions.push(initHover);
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: 'hover',
+        version: '0.1'
+    });
+})(jQuery);

frontend/lib/flot/jquery.flot.image.js

@@ -0,0 +1,249 @@
+/* Flot plugin for plotting images.
+
+Copyright (c) 2007-2014 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+The data syntax is [ [ image, x1, y1, x2, y2 ], ... ] where (x1, y1) and
+(x2, y2) are where you intend the two opposite corners of the image to end up
+in the plot. Image must be a fully loaded Javascript image (you can make one
+with new Image()). If the image is not complete, it's skipped when plotting.
+
+There are two helpers included for retrieving images. The easiest work the way
+that you put in URLs instead of images in the data, like this:
+
+    [ "myimage.png", 0, 0, 10, 10 ]
+
+Then call $.plot.image.loadData( data, options, callback ) where data and
+options are the same as you pass in to $.plot. This loads the images, replaces
+the URLs in the data with the corresponding images and calls "callback" when
+all images are loaded (or failed loading). In the callback, you can then call
+$.plot with the data set. See the included example.
+
+A more low-level helper, $.plot.image.load(urls, callback) is also included.
+Given a list of URLs, it calls callback with an object mapping from URL to
+Image object when all images are loaded or have failed loading.
+
+The plugin supports these options:
+
+    series: {
+        images: {
+            show: boolean
+            anchor: "corner" or "center"
+            alpha: [ 0, 1 ]
+        }
+    }
+
+They can be specified for a specific series:
+
+    $.plot( $("#placeholder"), [{
+        data: [ ... ],
+        images: { ... }
+    ])
+
+Note that because the data format is different from usual data points, you
+can't use images with anything else in a specific data series.
+
+Setting "anchor" to "center" causes the pixels in the image to be anchored at
+the corner pixel centers inside of at the pixel corners, effectively letting
+half a pixel stick out to each side in the plot.
+
+A possible future direction could be support for tiling for large images (like
+Google Maps).
+
+*/
+
+(function ($) {
+    var options = {
+        series: {
+            images: {
+                show: false,
+                alpha: 1,
+                anchor: "corner" // or "center"
+            }
+        }
+    };
+
+    $.plot.image = {};
+
+    $.plot.image.loadDataImages = function (series, options, callback) {
+        var urls = [], points = [];
+
+        var defaultShow = options.series.images.show;
+
+        $.each(series, function (i, s) {
+            if (!(defaultShow || s.images.show)) {
+                return;
+            }
+
+            if (s.data) {
+                s = s.data;
+            }
+
+            $.each(s, function (i, p) {
+                if (typeof p[0] === "string") {
+                    urls.push(p[0]);
+                    points.push(p);
+                }
+            });
+        });
+
+        $.plot.image.load(urls, function (loadedImages) {
+            $.each(points, function (i, p) {
+                var url = p[0];
+                if (loadedImages[url]) {
+                    p[0] = loadedImages[url];
+                }
+            });
+
+            callback();
+        });
+    }
+
+    $.plot.image.load = function (urls, callback) {
+        var missing = urls.length, loaded = {};
+        if (missing === 0) {
+            callback({});
+        }
+
+        $.each(urls, function (i, url) {
+            var handler = function () {
+                --missing;
+                loaded[url] = this;
+
+                if (missing === 0) {
+                    callback(loaded);
+                }
+            };
+
+            $('<img />').load(handler).error(handler).attr('src', url);
+        });
+    };
+
+    function drawSeries(plot, ctx, series) {
+        var plotOffset = plot.getPlotOffset();
+
+        if (!series.images || !series.images.show) {
+            return;
+        }
+
+        var points = series.datapoints.points,
+            ps = series.datapoints.pointsize;
+
+        for (var i = 0; i < points.length; i += ps) {
+            var img = points[i],
+                x1 = points[i + 1], y1 = points[i + 2],
+                x2 = points[i + 3], y2 = points[i + 4],
+                xaxis = series.xaxis, yaxis = series.yaxis,
+                tmp;
+
+            // actually we should check img.complete, but it
+            // appears to be a somewhat unreliable indicator in
+            // IE6 (false even after load event)
+            if (!img || img.width <= 0 || img.height <= 0) {
+                continue;
+            }
+
+            if (x1 > x2) {
+                tmp = x2;
+                x2 = x1;
+                x1 = tmp;
+            }
+            if (y1 > y2) {
+                tmp = y2;
+                y2 = y1;
+                y1 = tmp;
+            }
+
+            // if the anchor is at the center of the pixel, expand the
+            // image by 1/2 pixel in each direction
+            if (series.images.anchor === "center") {
+                tmp = 0.5 * (x2 - x1) / (img.width - 1);
+                x1 -= tmp;
+                x2 += tmp;
+                tmp = 0.5 * (y2 - y1) / (img.height - 1);
+                y1 -= tmp;
+                y2 += tmp;
+            }
+
+            // clip
+            if (x1 === x2 || y1 === y2 ||
+                x1 >= xaxis.max || x2 <= xaxis.min ||
+                y1 >= yaxis.max || y2 <= yaxis.min) {
+                continue;
+            }
+
+            var sx1 = 0, sy1 = 0, sx2 = img.width, sy2 = img.height;
+            if (x1 < xaxis.min) {
+                sx1 += (sx2 - sx1) * (xaxis.min - x1) / (x2 - x1);
+                x1 = xaxis.min;
+            }
+
+            if (x2 > xaxis.max) {
+                sx2 += (sx2 - sx1) * (xaxis.max - x2) / (x2 - x1);
+                x2 = xaxis.max;
+            }
+
+            if (y1 < yaxis.min) {
+                sy2 += (sy1 - sy2) * (yaxis.min - y1) / (y2 - y1);
+                y1 = yaxis.min;
+            }
+
+            if (y2 > yaxis.max) {
+                sy1 += (sy1 - sy2) * (yaxis.max - y2) / (y2 - y1);
+                y2 = yaxis.max;
+            }
+
+            x1 = xaxis.p2c(x1);
+            x2 = xaxis.p2c(x2);
+            y1 = yaxis.p2c(y1);
+            y2 = yaxis.p2c(y2);
+
+            // the transformation may have swapped us
+            if (x1 > x2) {
+                tmp = x2;
+                x2 = x1;
+                x1 = tmp;
+            }
+            if (y1 > y2) {
+                tmp = y2;
+                y2 = y1;
+                y1 = tmp;
+            }
+
+            tmp = ctx.globalAlpha;
+            ctx.globalAlpha *= series.images.alpha;
+            ctx.drawImage(img,
+                          sx1, sy1, sx2 - sx1, sy2 - sy1,
+                          x1 + plotOffset.left, y1 + plotOffset.top,
+                          x2 - x1, y2 - y1);
+            ctx.globalAlpha = tmp;
+        }
+    }
+
+    function processRawData(plot, series, data, datapoints) {
+        if (!series.images.show) {
+            return;
+        }
+
+        // format is Image, x1, y1, x2, y2 (opposite corners)
+        datapoints.format = [
+            { required: true },
+            { x: true, number: true, required: true },
+            { y: true, number: true, required: true },
+            { x: true, number: true, required: true },
+            { y: true, number: true, required: true }
+        ];
+    }
+
+    function init(plot) {
+        plot.hooks.processRawData.push(processRawData);
+        plot.hooks.drawSeries.push(drawSeries);
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: 'image',
+        version: '1.1'
+    });
+})(jQuery);