Dynamic Webpage

The dynamic webpage implements the following features:

• Display of measurement data
• Display of log from refill, Balling mineral dosing and feed
• Display and interface for creating and modifying feed profiles
• Display and interface for modifying the feed schedule
• Display and interface for modifying the Balling mineral dosing amount
• Display and interface for modifying the actuator schedule
• Display and interface for setting the refill controller state

The demo of the webpage is available here

Installation

Webpage

Clone the website and the API to /usr/local/src/:

• git clone https://in-dubio@bitbucket.org/in-dubio/aquarium-vue.git
• git clone https://in-dubio@bitbucket.org/in-dubio/aquarium-api.git

Remove existing webpage using rm /var/www/index.html.

Assuming the web server is storing the content in /var/www/html/: Create symbolic links from the web server directory pointing to the downloaded pages:

• sudo ln -s /usr/local/src/aquarium-vue/* /var/www/html

Create symbolic links from the web server directory pointing to the API scripts:

• sudo ln -s /usr/local/src/aquarium-api/api.php /var/www/html/api.php
• sudo ln -s /srv/aquarium-api/functions.php /var/www/html/functions.php
• sudo ln -s /srv/aquarium-api/db.php /var/www/html/db.php

Note: Do NOT copy ALL files from the API repository to the website.

Libraries

Download the libraries into separate folder(s) and create symbolic links. Ensure you have the required rights. Below versions are PROD version (no console error logging). The libraries are downloaded outside of the target directory of the webpage. Symbolic links need to be created to the js folder.

Vue.js

• mkdir /usr/local/src/vue.js
• cd /usr/local/src/vue.js
• wget -O vue.global.prod.js https://unpkg.com/vue@3/dist/vue.global.prod.js
• sudo ln /usr/local/src/vue.js/vue.global.prod.js vue.global.prod.js

Moment.js

• mkdir /usr/local/src/moment.js
• cd /usr/local/src/moment.js
• wget -O moment.min.js https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js
• sudo ln /usr/local/src/moment.js/moment.min.js moment.min.js

Chart.js

• mkdir /usr/local/src/chart.js
• cd /usr/local/src/chart.js
• wget -O Chart.min.js https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js
• sudo ln /usr/local/src/chart.js/Chart.min.js Chart.min.js

Architecture

The webpage uses HTML enhanced by JavaScript using Vue.js.

The communication with the web server uses the REST API.

The webpage is divided into several html files:

• index.html: Landing page including time data visualisation
• logs.html: One page for visualisation of the logs - controlled by a GET parameter
• balling-manager.html: One page for configuration of the dosing volumes
• refill-manager.html: One page for visualisation and control of the refill controller state
• feed-manager.html: One page for visualisation and editing of feed profiles as well as for visualisation and scheduling of feed profile execution
• ventilation-manager.html: One page for visualisation and control of the ventilation control parameters
• heating-manager.html: One page for visualisation and control of the heating control parameters as well as displaying the heating statistics