SEAWeb

The WEB GUI client of SEA.

This repository contains the code of the server for the control and graphical parts, plus the client code (HTML, CSS, JS)

Global architecture

The current server exposes some routes for the graphical part and the control part. It also serves the client files.

Installation (!!! WIP !!!)

  1. Clone this repository on the ~ folder on your machine
  2. If not done yet, activate a Python environnment
  3. Run the command cd seaweb

Configuring the application (!!! WIP !!!)

Starting the application (!!! WIP !!!)

  1. Run the command cd ~/seaweb

Stopping the application (!!! WIP !!!)

  1. Run the command ps ax | grep seaweb
  2. In the output of the previous command, identifiy the PID corresponding to the server process
  3. Run the command kill <previously_identified_PID>

InfluxDB

(24/07/24) The InfluxDB instance is fed every 30 seconds with the last values contained in the timerange [now - 30s, now]. We do not know if this process is synchronized for all the measurements or not.

Server

Client

The way the main page is served (where you can select the instrument you want to interact with) has not been decided yet, even if its code is in this repository.

Initialization

For a selected instrument, there is a single HTML file that holds the application : the SEAWebClient.html file, which is served as the main route. It includes all the JS files needed, meaning all the JS files located in the client/jsFiles folder excepted SeaWebClientStart.js, plus the external librairies (client/externalFiles/).

The entry point is the SEAWebClientMain.js, which has a window.onload function and which initiates all the content of the page, plus the responsitivity.

About updating graphics

  • When the server is pushing data, the newly received data is appened to the current curves (on livemode).
  • When zooming in the x direction, when the zoom is complete (for e.g. meaning that there are no longer enough mouse wheel step in a certain range of time), then the resolution is computed, the client asks for the data within the new viewing window with the given resolution, and then sets (overwrites) the data for the curves.

About livemode

Using it

Every plain minute, all the curves are synchronized. For the curve that have not receive any new data, their last known point is retreived at the "now" date.

Setting it

In the context of the client

An user enters the livemode when :

  • arriving on the app,
  • clicking on the "Go to now" button

An user leaves the livemode when :

  • zooming (more precisely, when the zoom is complete),
  • moving the visualisation window, if the maximum time on the x axis is older than the last received (displayed) value of one of the curves in all the graphs

In the context of the server

Known bugs

Even if the livemode is set to true on the client side, the server can set it to HISTORICAL because of (not fully investigated yet)

External libraries

Name Version Website
AlertifyJS v1.8.0 http://alertifyjs.com
ChartJS v2.9.4 https://www.chartjs.org
+ Zoom plugin for ChartJS v0.7.3 https://www.chartjs.org
EventSource unknown https://github.com/Yaffle/EventSource/
Hammer.JS v2.0.7 http://hammerjs.github.io/
Swipper v4.5.0 http://www.idangero.us/swiper/
Description
No description provided
Readme 2.8 MiB
Languages
JavaScript 71.4%
Python 14.1%
CSS 10.2%
HTML 4.3%