web

Web

---

The web folder is basically the front end. It consists of the web interface, which request and send data to the firebase server.

HTML

The structure of HTML files is:

|-index.html
|---motor_1.html
|---motor_2.html
|---motor_3.html
|---motor_4.html
|-404.html (Generated by firebase)

• index.html contains the intro page of the web app, which is a lateral bar and two cards. The first card contains links to open the motors pages. The second card will contain the input form to register new motors.
• 404.html contains the error page
• motor_X.html are pages that show the graphs of each motor (temperature, humidity and operating) with respect to time. It is possible to zoom in the graphs using the mouse cursor or by choosing an especific date on the datepicker form. There are also cards that contain (almost) realtime information of the motor, such as its current state, temperature, daily operating times, etc. In this cards, it is possible to reset halted motors and change the SP time.

CSS

The structure of CSS files is:

|-all.css
|-dashboard.css
|-jquery-ui.css
|-reset.css

These files have all the styling definitions of every classes and objects inside the HTML files. The jquery-ui.css is special, it contains information specifically of the datepicker.

JS

There are only one JS file, the main.js, which contains the interface to the firebase database and other stuff such as loading animations, functions to draw zing charts and do automatic zoom, functions to work with UNIX timestamp, etc. Please refer to firebase documentation to understand some of the functions used there. To use zing charts, please also check its documentation

Firebase

For Firebase hosting, please refer to its documentation. With respect to the database, we have pretty much the following structure:

root {
	motor_1: {
		- M61_vCVgkNTwwjbF5MB : {
			CO: 60,
			D: 1588107627,
			DO: 60,
			H: 88,
			S: 1,
			T: 31
		},
		...
	},
	motor_2: {...},
	motor_3: {...},
	motor_4: {...},
	sp_time: {
		motor_1 : 200,
		motor_2 : 750,
		motor_3 : 800,
		motor_4 : 300
	},
	front_end_reset_status: {
		motor_1 : 200,
		motor_2 : 750,
		motor_3 : 800,
		motor_4 : 300
	},
	daily: {
		motor_1 : {
		- M61_vCVgkNTwwjbF5MB : {
			D: 1588107627,
			DO: 60
		},
	}

The motor_X childs receive informations from motors every minute. Back End writes to this child and Front End only reads. the format is the following:

- M61_vCVgkNTwwjbF5MB : {
			CO: 60,
			D: 1588107627,
			DO: 60,
			H: 88,
			S: 1,
			T: 31
		},

- M61_vCVgkNTwwjbF5MB is a timestamp key automatically created by firebase. It occurs because we are doing POST requests with this information. Each minute, up to 60 of this blocks are updated to the database by the motors, where:

Code	Meaning	Unit
CO	Continuous Operation	Seconds
D	Date	UNIX timestamp format UTC timezone
DO	Daily Operation	Seconds
H	Humidity	%
S	Status	0 - Off, 1 - Running, 2 - Halted
T	Temperature	ºC

The sp_time child have the information of SP time operation of each motor. Front End writes to this child and Back End only reads (every minute).

The front_end_reset_status child is used by the Front End to reset the motor via the front end in case it is halted.

The daily child is used to store the information of the daily operation time of a day. Front end use this data to create a bar graph that is updated daily between 23:30 and 23:59 by the back end.