Dynamic Webpage: Difference between revisions

From Aquarium-Control
Jump to navigation Jump to search
No edit summary
 
(13 intermediate revisions by the same user not shown)
Line 2: Line 2:


* Display of measurement data
* Display of measurement data
* Display of history of refill events
* Display of log from refill, Balling mineral dosing and feed
* Display of history of mineral dosing events
* Display of history of feed events
* Display and interface for creating and modifying feed profiles
* Display and interface for creating and modifying feed profiles
* Display and interface for modifying the feed schedule
* Display and interface for modifying the feed schedule
* Interface for modifying the mineral dosing amount
* 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 [http://vps2483992.servdiscount-customer.com/ here]
== Installation ==
== Installation ==
Create the text file <code>/var/www/app.ini</code> with the matching credentials for the database:
=== Prerequisites ===
A working Apache 2 installation is required. The web server must be capable of executing the php scripts of the [[REST API]].


<code>
=== Webpage ===
[database]
Clone the website and the API to <code>/usr/local/src/</code>:
server = localhost
* git clone https://in-dubio@bitbucket.org/in-dubio/aquarium-vue.git
port = 3306
* git clone https://in-dubio@bitbucket.org/in-dubio/aquarium-api.git
user = aquarium
password = password
database = aquarium
</code>


Remove existing webpage using <code>rm /var/www/index.html</code>.


Clone the website to <code>/var/www/html</code> using <code>git clone https://in-dubio@bitbucket.org/in-dubio/aquarium-web.git</code>
Assuming the web server is storing the content in <code>/var/www/html/</code>:
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:
* <code>sudo ln -s /usr/local/src/aquarium-api/api.php /var/www/html/api.php</code>
* <code>sudo ln -s /srv/aquarium-api/functions.php /var/www/html/functions.php</code>
* <code>sudo ln -s /srv/aquarium-api/db.php /var/www/html/db.php</code>
 
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 <code>js</code> folder.
 
==== Vue.js ====
* <code>mkdir /usr/local/src/vue.js</code>
* <code>cd /usr/local/src/vue.js</code>
* <code>wget -O vue.global.prod.js https://unpkg.com/vue@3/dist/vue.global.prod.js</code>
* <code>sudo ln /usr/local/src/vue.js/vue.global.prod.js vue.global.prod.js</code>
 
==== Moment.js ====
* <code>mkdir /usr/local/src/moment.js</code>
* <code>cd /usr/local/src/moment.js</code>
* <code>wget -O moment.min.js https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js</code>
* <code>sudo ln /usr/local/src/moment.js/moment.min.js moment.min.js</code>
 
==== Chart.js ====
* <code>mkdir /usr/local/src/chart.js</code>
* <code>cd /usr/local/src/chart.js</code>
* <code>wget -O Chart.min.js https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js</code>
* <code>sudo ln /usr/local/src/chart.js/Chart.min.js Chart.min.js </code>
 
= 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 <code>GET</code> 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

Latest revision as of 19:46, 8 December 2025

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

Prerequisites

A working Apache 2 installation is required. The web server must be capable of executing the php scripts of the REST API.

Webpage

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

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

Moment.js

Chart.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
Retrieved from "http://217.79.180.177/mediawiki/index.php?title=Dynamic_Webpage&oldid=298"