Reflectieverslag project II – Digital Coaching App

Reflectie

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.

 

Instructable

Digital Coaching App

Table of Contents

Introduction

The Digital Coaching App is an application for Sport Innovation Campus Bruges. The web-app is build by Nathan Segers , Jonas Boecquaert , Robin Rosiers  and Mathieu Bonte  – Students NMCT .

What

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.

Installation

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.

"Install screen"

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.

"License Agreement Screen"

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.

"Destination folder"

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.

"Additional Tasks"

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.

"Extracting files"

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
Chrome: C:\Users\xxxxx\AppData\Local\Google\Chrome\Application\chrome.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.

"Finished installation"

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.

Testing WAMP-Server

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.

"Localhost page"

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 services.msc.

"run terminal"

Search for the wampapache64 service -> right click -> properties

"WAMP service"

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.

"Logged in user"

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:

"Add Vhost"

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

"Add database"

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.

"Database"

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.

Import database

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!

Install GIT

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.

"right-click menu"

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 .git folder.
That folder contains all data for git to work.

".git folder"

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

"Git output"

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.

"_boot.php file"

Git workflow

There are 2 default branches in our git repository.

─ origin/master
─ origin/development

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:
https://git-scm.com/book/en/v2/Git-Branching-Basic-Branching-and-Merging

How to commit?

git add .
git commit -m "ENTER YOUR MESSAGE HERE"
git push

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.

Commit messages

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.

Files

Gulp

For this project we will work with Gulp as a taskrunner.

How to install Gulp?

  1. Make sure you have node.js installed on your computer (https://nodejs.org/en )
  2. 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)
  3. Change Directory (cd) to the local cloned gitrepository. C:\wamp64\www\digitalcoachingapp
  4. 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 add instead of npm install)

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

Folder Subfolder File Explanation
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 _boot.empty.php
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)
alert.class.php Generates Javascript Alerts through PHP Sessions
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
php PHP scripts that are mainly used as bridges between Front-end Javascript and Back-end PHP
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)
script Contains Javascript files that have to be included
app.min.js Auto-generated by Gulp
style Contains CSS files that have to be included
screen.min.css Auto-generated by Gulp
src Source SCSS and Javascript files
script Source Javascript files (Gulp concatenates and minifies these to app.min.js)
_API.js Everything that has to do with API calls
alert.js Code for Javascript notifications (Toastr)
app.js Main Javascript file which contains basic Javascript functions
canvas.js Javascript code for Drawing on the recordings
comment.js Code for the comments section under the recordings
class.js Useful Javascript for classes
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 screen.min.css)
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
_fonts.scss FontAwesome CSS
_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
_transitions.scss CSS transitions
_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

VPN connection

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 vpn.howest.be.

"Cisco AnyConnect"

Once you press Connect, you’ll be prompted to enter your credentials. Those are the same as you use for Leho/minerva.

"Credentials"

You’ll see a message that you are connected to the howest VPN. Once you are connected, you can start using the DigitalCoaching app.

User manual

The setup

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 .

Login

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.

Home page

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.

home page

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

User

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.

Screen

Administrator

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.

admin view

Recording

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.

Alerts

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.

recording status

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.

Save recording

Navigation

User

To navigate on the web app there is a navigation bar at the top of the screen with the following items:

  • Home
    • This will return the user to the home screen with the available cameras
  • Recordings
    • This will go to a page displaying all their recordings made the current week
  • Logout
    • This will return the user to the login page

nav

Administrator

When logged in with the administrator account you will have all the same option, except for 1:

  • Manage
    • On this page you will be able to add users and delete users not longer needed

Nav_admin

Manage

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.

alert

When deleting a user you will see a popup in the right corner

alert

manage_page

Recordings

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.

page_recordings

Replay Recording

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.

Share link

Landscape

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.

Landscape Screen

Portrait

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.

Portrait mode

For Developers

Documentation

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.

Improvement ideas

  • 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

Promo video

Leave a Reply

Your email address will not be published. Required fields are marked *