Dynamic Webpage: Difference between revisions

Revision as of 18:08, 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

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).

Vue.js

mkdir /usr/local/src/vue.js
cd /usr/local/src/vue.js
wget -O js/vue.global.prod.js https://unpkg.com/vue@3/dist/vue.global.prod.js
sudo ln -s vue.js /var/www/html/vue.min.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 -s moment.min.js /var/www/html/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 -s Chart.min.js /var/www/html/Chart.min.js

@@ Line 11: / Line 11: @@
 The demo of the webpage is available [http://vps2483992.servdiscount-customer.com/ here]
 == Installation ==
+=== Webpage ===
 Clone the website and the API to <code>/usr/local/src/</code>:
 * git clone https://in-dubio@bitbucket.org/in-dubio/aquarium-vue.git
@@ Line 27: / Line 28: @@
 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).
+==== Vue.js ====
+* <code>mkdir /usr/local/src/vue.js</code>
+* <code>cd /usr/local/src/vue.js</code>
+* <code>wget -O js/vue.global.prod.js https://unpkg.com/vue@3/dist/vue.global.prod.js</code>
+* <code>sudo ln -s vue.js /var/www/html/vue.min.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 -s moment.min.js /var/www/html/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 -s Chart.min.js /var/www/html/Chart.min.js</code>