Skip to content

Latest commit

 

History

History
60 lines (39 loc) · 4.23 KB

README.md

File metadata and controls

60 lines (39 loc) · 4.23 KB

Build Status codecov BCH compliance Maintainability Known Vulnerabilities GitLicense

SmartFootballTableUi

This is the user interface of the @smart-football-table project. It is purely developed with Angular and uses the MQTT protocol to communicate with the other modules of this project.

Prerequesites

To interact with the UI and run the unit tests a mqtt broker with websockets enabled is needed. If your mqtt broker is not running on localhost:9001 (websocket port) you will have to edit the environment.ts and environment.prod.ts files. See chapter Configuration for further information.

Configuration

In order to configure the UI you can edit the environment.ts and environment.prod.ts files. If you are running the app with docker only the environment.prod.ts file will be used. For dev configuration edit the environment.ts file. The following configurations are possible:

config value Description Example (Default value)
mqttHost Sets the host adress of your mqtt broker 'localhost'
mqttPort The port your mqtt broker runs on (Websocket port) 9001
heatmapMinData The minimum Value of a point on the heatmap 0
heatmapMaxData The maximum Value of a point on the heatmap 10

About Heatmap Max and Min

Heatmap Points consist of three values. A "X" coordinate, a "Y" coordinate and a "value" associated with this specific point. Every time the ball reaches this position, the value of this coordinate is increased. If your heatmapMaxData is set to 10 for example this coordinate will be coloured in deep red after the 10th time the ball reached this position. If the heatmap gets too crowded too fast you will have to increase the heatmapMaxData value in order to grow the heatmap at a lower pace.

Conclusion: If you want to have a fast buildup of the heatmap you have to lower the heatmapMaxData Value. If you want the heatmap to populate at a slow pace over time you have to increase the heatmapMaxData value.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.