Tijdens de projectweken werkten we samen aan een webapplicatie waarbij we camera’s moesten bedienen die in het Howest Sport Innovatie Campus reeds geïnstalleerd zijn.
In het begin van de weken verliep de ontwikkeling van het project goed. We werken in een goed teamverband en maakten duidelijke afspraken in verband met code, commit messages, taakverdeling, …
Wat wel wat zoeken was, was het inplannen van de tasks en product backlog items. Zo hadden we in het begin van de projectweken veel te weinig tasks en moesten we er constant bijmaken. Naarmate de projectweken vorderden, ging het plannen veel beter.
In het midden, meer naar het einde van de projectweken, kwamen er nog een hoop problemen opborrelen. Zo had het externe bedrijf waar de networkshare gehost is, een update uitgevoerd en hadden we geen enkele permissie meer op de share. We konden dan ook niets doen.
Qua communicatie liep er soms ook wel wat mis. Zo zijn we een dag naar Brugge gegaan om “aan de pc te werken”… Toen we aankwamen in Brugge, kregen we van meneer Di Marco te horen dat we ook op die pc konden via TeamViewer. We hebben er dan een leuke dag van gemaakt en zijn naar de Burger King gegaan.
Uiteindelijke conclusie die ik kan stellen is dat we in een goed teamverband hebben gewerkt. Hoewel we steeds nieuwe opdrachten kregen die nooit vooraf werden gecommuniceerd, maar altijd op het laatste moment er opeens bij kwamen door een of andere ingeving bij leerkrachten… We hebben ons er zo goed mogelijk proberen door te slaan, met de nodige frustraties.
Digital Coaching App
Table of Contents
- VPN connection
- User Manual
- For Developers
This project was requested by the Sport Innovation Campus in Bruges to manage the AXIS camera’s they have installed there. Those camera’s are capable of recording and showing the recordings however, the camera’s need to be managed through a computer that is installed is static. They wanted a solution to use a tablet. Since that is mobile-friendly, they can fully control the camera’s from wherever they are by using a web-app.
Install WAMP for Windows
We used WAMP on the pc that is there. So we downloaded WAMP from here .
To start the installation process, you need to open the folder where you saved the file and double-click the installer file. A security warning window will open, asking if you are sure you want to run this file. Click Run to start the installation process.
Next you will see the Welcome To The WampServer Setup Wizard screen. Click Next to continue the installation.
The next screen you are presented with is the License Agreement. Read the agreement, check the radio button next to I accept the agreement, then click Next to continue the installation.
Next you will see the Select Destination Location screen. Unless you would like to install WampServer on another drive, you should not need to change anything. Click Next to continue.
The next screen you are presented with is the Select Additional Tasks screen. You will be able to select whether you would like a Quick Launch icon added to the taskbar or a Desktop icon created once installation is complete. Make your selections, then click Next to continue.
Next you will see the Ready To Install screen. You can review your setup choices, and change any of them by clicking Back to the appropriate screen, if you choose to. Once you have reviewed your choices, click Install to continue.
WampServer will begin extracting files to the location you selected.
Once the files are extracted, you will be asked to select your default browser. WampServer defaults to Internet Explorer upon opening the local file browser window. If your default browser isn’t IE, then look in the following locations for the corresponding .exe file:
Opera: C:\Program Files (x86)\Opera\opera.exe
Firefox: C:\Program Files (x86)\Mozille Firefox\firefox.exe
Safari: C:\Program Files (x86)\Safari\safari.exe
Select your default browser’s .exe file, then click Open to continue.
A Windows Security Alert window will open, saying that Windows Firewall has blocked some features of the program. Check whether you want to allow Apache HTTP Server to communicate on a private or public network, then click Allow Access.
The Setup screen will appear next, showing you the status of the installation process.
You should see the WampServer icon appear in the systray on the right side of your taskbar. If the icon is green, then everything is working properly. If the icon is orange, then there are issues with one (or more) of the services. If the icon is red, then both Apache and MySQL services aren’t running. You will need to resolve those issues before continuing.
Once you have completed the installation process, test that your installation is working properly by going to http://localhost/ in your browser. You should see the WampServer homepage displayed.
Add special configuraton to WAMP service
We need WAMP to run as our user, instead of the SYSTEM user. Otherwise it won’t be able to perform the tasks we want it to.
Open the RUN terminal (Windowskey + R) and type in
Search for the
wampapache64 service -> right click -> properties
Go to the log on tab and select
Allow service to interact with desktop. Also choose the current logged in user, so don’t use the local system account.
Make sure you set the startup type to automatic, not manual.
Add virtual host configuration
First of all, you have to click the
Add a Virtual Host on the bottom left in localhost. A new screen will load with the following content:
The name is the URL you would like to use. We will use
digitalcoach.howest in our demonstration. The
Path is where the project files are in. Now, pay close attention! Here we need to navigate to the folder of wamp, then www and then the project folder. We used this link in our demo
c:/wamp64/www/digitalcoachingapp/dist. The dist is because that is the “main” folder of our project.
Configure MySQL database
Creating a database in WampServer is done via phpMyAdmin. You can access phpMyAdmin by entering http://localhost/phpmyadmin/ in your web browser.
The main phpMyAdmin screen will appear. On the left is a list of databases that already exist: information_schema, mysql, performance_schema, and sys. Do not delete these, as they are necessary for WampServer and phpMyAdmin to run properly.
To create a database, click Databases in the main navbar at the top.
On the Databases screen, you will need to enter the database name (for example, digitalcoach) in the left field, choose your database collation from the Collation dropdown box (utf8_unicode_ci), then click Create.
You will see a success message once the database has been created, and your new database will appear in the list on the left.
And that is it! You now have the environment setup.
We have created the default database. To import the database, navigate to the database by clicking on the name. Then, press the import button and select the database file we provided and import it. It will automatically import all the tables in the database and you’re ready to go!
To “pull” the code to your system, you need to have a application called “git”. Git or sometimes called global information tracker, is used to have control over the source code you are writing. So you can make default branches and work in team on one single project, but still keep your own code.
In our case, we worked with at least two branches; Master and Development. The master branch always was the “working” version of the software, the development was a messy place where everyone puts his/her code on and then merges it with the master.
Installing is really easy, you just navigate to the git download page and let it download. Once installed, you just click next every single time (all defaults are good).
Now, you’ll have a new option when you right-click in a folder, you can now run GIT bash to execute git commands.
Open the Git Bash in your project folder. For us this is
C:\wamp64\www\digitalcoachingapp. Once opened, you need to tell git that you’ll do “something” here with git. So, first run
git init. This will make a hidden
That folder contains all data for git to work.
Once git is initiated in that folder, you can start pulling the code. This is done by executing (in the same terminal) the following code:
git clone https://nathansegers.visualstudio.com/_git/Digital%20Coaching%20App
Now, you need to edit the
dist/config/_boot.empty.php file. First, you rename it to
_boot.php (remove the .empty) and fill in all credentials. This file contains the database connection strings. Please make sure you are the only user that has access to this file.
There are 2 default branches in our git repository.
We will only develop in the origin/development branch, so that we never screw up the master branch.
To move to this branch execute the following command:
git checkout development
(You can only checkout to another branch, when all your files have been staged / committed)
Now you can start developing your own version of the application.
Feel free to add more branches for your own different functions.
Why would you use branches?
They allow you to switch between different parts of your development, so that page 1 can be developped seperately from page 2.
If you want to add a quick fix to a function, you can make a new branch from the development branch, fix something and immediatly push it back to that, and then you can continue on your other branches.
For more information check:
How to commit?
git add .
git commit -m "ENTER YOUR MESSAGE HERE"
Mostly, the code editor you will use (say Sublime Text 3, Visual Studio Code, PHPStorm, Webstorm …) will provide you with a graphical interface to work with Git.
To make it clear for other developers, it’s preferred that you use the following format.
- When you added files, please use the prefix
+in your commit messages.
- When you updated files, please use the prefix
*in your commit messages.
- When you removed files, please use the prefix
-in your commit messages.
- When you fixed a bug, please use the prefix
~in your commit messages.
When working with issues, you could also add a prefix
~ Fixed ISS42: explanation for example.
For this project we will work with Gulp as a taskrunner.
How to install Gulp?
- Make sure you have node.js installed on your computer (https://nodejs.org/en )
- Open Powershell or CMD or the integrated terminal from your favourite coding tool. (My choice goes out to Visual Studio Code, this has an integrated VSTS plugin)
- Change Directory (cd) to the local cloned gitrepository.
- Type the following command:
npm install gulp gulp-livereload gulp-sass gulp-concat gulp-rename gulp-uglify gulp-clean-css
(If this doesn’t work, try
yarn addinstead of
How to work with Gulp?
Every time you want to start developping, you will have to run `Gulp“ in your project folder.
Our gulpfile.js contains information that only works with our specific folder structure.
The layout is as following:
File structure explained
|dist||Root folder of our project|
|config||Contains configuration files (SENSITIVE DATA)|
|_boot.php||Database configuration file (do not edit anything except the empty variables from
|includes||Contains files that can be included|
|footer.php||Content that has to be included in every page, after the content|
|functions.inc.php||Useful PHP functions|
|header.php||Content that has to be included in every page, before the content|
|media||Media content like Videos, Images, Documents …|
|images||Contains all the images on the webpage|
|model||PHP Classes (mostly Database Queries or Server Side Commands)|
|annotation.class.php||Performs Database queries for the annotations|
|camera.class.php||Performs Database queries for the camera feeds|
|comment.class.php||Performs Database queries for the comments|
|db.class.php||Performs the actual database connection and queries|
|preset.class.php||Performs Database queries and API Calls for the presets|
|record.class.php||Performs Database queries and Commands for the recordings|
|user.class.php||Performs Database queries and contains functions that have to do with Users|
|annotation.script.php||Bridge between Front-end (canvas.js) and Back-end (annotation.class.php)|
|comment.script.php||Bridge between Front-end (comment.js) and Back-end (comment.class.php)|
|preset.script.php||Bridge between Front-end (preset.js) and Back-end (preset.class.php)|
|record.script.php||Bridge between Front-end (record.js) and Back-end (record.class.php)|
|user.script.php||Bridge between Front-end (user.js) and Back-end (user.class.php)|
|app.min.js||Auto-generated by Gulp|
|style||Contains CSS files that have to be included|
|screen.min.css||Auto-generated by Gulp|
|_API.js||Everything that has to do with API calls|
|comment.js||Code for the comments section under the recordings|
|fullscreen.js||Contains code to put a browser in fullscreen|
|preset_manipulation.js||Code for adding, deleting or updating presets|
|preset_Selector.js||Code to display the beautified selector|
|record.js||Code that has to do with starting, stopping, renaming, deleting recordings|
|slider.js||Formatting and linking API calls to the sliders|
|user.js||Code about users, adding and deleting|
|style||Source SCSS files (Gulp concatenates and minifies these to
|bootstrap||Bootstrap source files|
|_body.scss||CSS for the body of the webpage|
|_comments.scss||Everything for the Comments feature|
|_content.scss||Non-grouped + content CSS|
|_custom.scss||Custom color variables for overriding Bootstrap|
|_footer.scss||Potentional footer CSS|
|_form.scss||Forms, inputs, textfields|
|_header.scss||The header of the website|
|_popup.scss||Customizing Bootstrap modals|
|_preset_buttons.scss||Formatting the preset buttons (Save, Update, Delete)|
|_recording.scss||Everything about the recording page|
|_select.scss||All CSS for the selectors|
|_sliders.scss||All CSS for the sliders|
|_typo.scss||CSS settings that have to do with Typography (H1, A, P …)|
|_vars.scss||SCSS variables we could use|
|screen.scss||Links all the SCSS files together|
To use the application, you need to be connected on the Howest network or use a VPN connection to the Howest network.
Install the VPN client service
Howest uses the Cisco AnyConnect Secure Mobility Client , so you’ll need to install that software first, in order to connect to the Howest network.
To install the software, navigate to the download page of the Cisco AnyConnect software. Just follow the steps of the installation.
Connect to the network
Connecting to the VPN servers of Howest is really easy. You open the Cisco AnyConnect software and enter the VPN server address in it. In our case is this
Once you press
Connect, you’ll be prompted to enter your credentials. Those are the same as you use for Leho/minerva.
You’ll see a message that you are connected to the howest VPN. Once you are connected, you can start using the DigitalCoaching app.
For our Digital Coaching App we needed the following items:
- 4 Axis PTZ network cameras
- 1 Tablet
- 1 Gaming PC to run the server
Using the web application
Start the web application
To start using the web application the user must start their browser and go to the following IP: 172.21.224.220 .
The user must use the login and password they received from the administrator. If they use the correct credentials they will continue to the next page, else they will see a red popup in the right corner.
Once the user logged in they will be on the home page, here they will see the cameras they can select from.
When selecting a camera you will continue to the page with the live view of the camera you selected.
Viewing the camera
On this page you will have the option to start and stop a recording (left button), change the angle of the camera (blue cog and selector) and see the live feed.
When clicking on the preset selector you will see the current presets and the option to create a new preset.
When selecting a preset the camera will automatically change to the correct settings (Pan, Tilt, Zoom).
When clicking on the settings icon (the blue cog) you will see the settings of the camera which you can change with the sliders.
When selecting the option to create a new preset you will have a button to save the changes you made in the settings of the camera and a popup will ask how you want to name the new preset.
When clicking on the settings icon (the blue cog) you will see the settings of the camera which you can change with the sliders and the buttons to update or delete a preset.
When selecting the option to create a new preset you will have the option to save the changes you made in the settings of the camera and a popup will ask how you want to name the new preset.
When you start a recording you will see a popup in the right corner of the screen (the green one) to tell you the recording started, when navigating to another page you will see a yellow popup telling you that a recording is still running.
When you navigate to the home page a red dot will indicate which cameras are recording at that time, when you logout all the recordings will stop automatically.
If you stop the recording a popup will ask you a name to save the recording with or to delete the recording.
When saving the recording the page will load until it has been saved, in the meantime you won’t be able to do anything.
To navigate on the web app there is a navigation bar at the top of the screen with the following items:
- This will return the user to the home screen with the available cameras
- This will go to a page displaying all their recordings made the current week
- This will return the user to the login page
When logged in with the administrator account you will have all the same option, except for 1:
- On this page you will be able to add users and delete users not longer needed
You will only see the page in the navigation bar when logged in as the administrator.
On this page you will be able to add users and delete users when no longer needed.
When adding a user you will see a popup in the right corner.
Trying to visit this page as a normal user, not an administrator, will redirect you back to the frontpage.
When deleting a user you will see a popup in the right corner
On this page you will see all your recordings made in the current week displayed with the name you saved it, the time and what camera used for the recording, you can’t see other users recordings. (unless you are an administrator)
After 1 week your recording will be removed from the network drive where the video is saved.
On the top of the page you have a filter to select a camera, this will only show all the recordings made with that camera.
When clicking on the pencil you will be able to edit the name of the recording, you can also delete the recording by clicking on the trash icon.
When selecting a recording you will continue to a page to replay the selected recording.
If there are more than 9 recordings a
+ icon will appear at the bottom to load more recordings.
On this page you will be able to replay the recording.
You will see 2 buttons in the right corner above the video with the possibilities to edit or share the video
Note: The edit button will only be seen when in landscape mode.
When selecting the share button you will see a popup with the share link, when clicking the link you will automatically copy the share link. On some tablets, you might need to copy/cut it yourself.
Note: This link will only work when you are on the Howest network.
When selecting the edit button the video will pause and you will be able to draw on the still image with a color and pencil width to your own wishes (default is red) and when clicking on the edit button once again your video will continue and the drawing will be saved for later use. The selected color is slighty bigger than the other dots.
You will notice there are 2 new buttons while in editing mode, undo and clear.
The undo button will erase your last drawn line. The clear button will erase all the lines on your screen and allows you to redraw a new image on that timestamp.
The drawings you make are stored on that time in the video, you will have to clear them in order to draw new lines.
If the tablet is in portrait mode you will be able to add comments to the video.
When clicking in the add comment box the video will pause and when saving your comment the video will continue and the comment will be saved and displayed with the time you saved the comment.
The documentation for the Axis camera’s can be found here . When you have a login account for the Axis website, you will find a more elaborated documentation.
The code is documented by inline comments, explaining what the functions and classes are used for, and why certain structures are used.
Logs to the developer console tell you when your code has reached certain parts.
- Export the video together with the annotations to local storage
- Allow viewing the annotation drawings on responsive screens. Currently the drawings are relative to the screen they were drawn upon.
- Add finger gestures to the camera page.
- Updating the sliders by sliding/pinching with 2 fingers.
- Center the camera to a certain position
- Add an area zoom: Draw a box and make the camera zoom to those positions.
- Speed up the loading when saving recordings
- Sliders can be managed via + and –
- Bugfix iPad/tablet rotation