Skip to content

Latest commit

 

History

History
82 lines (56 loc) · 3.23 KB

README.md

File metadata and controls

82 lines (56 loc) · 3.23 KB
Raw

S.C.I.L.E.R. Front-end

To create an escape room with SCILER you will need to set up a front-end server so the operator can control the system.

Deployment

Start a server on your desired server machine and insert a build of the front-end app into its html source, to get a build follow the following steps:

Set-up

Git clone the project into your development environment.

Get all dependency using npm from the front-end directory

    npm install

Set-up configuration

In directory front-end (copy and) rename src/assets/config.json.default to config.json, change this file as desired to match your broker IP address and port

install lighttpd

  • run sudo apt-get install lighttpd

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Move the the build artifacts to the html directory of the server machine, by:

  • run cd /
  • run sudo rm -r var/www/html/*
  • move the contents of dist/sciler/ to var/www/html/

Development

This project was generated with Angular CLI version 8.3.19.

Project structure

index.html is the main html file that is generated. This includes app-root. In app.component.html the main app is described, which includes multiple components. These are included by a <app-componentname> tag, and are generated by the files in componentname package in components.

The name.component.html file generates html, name.component.css adds css to this html. name.component.ts manages this component, this the place to define additional imports (all files use src/assets/css/main.css) and parameters. These parameters can used in the html file with: {{ parameter }}. Finally, name.component.spec.ts tests this specific component, using Karma.

The application consists of three screens: home, camera, config. These can be selected in the side menu, which can be reached in the top-left corner. The home screen contains the main control mechanisms for the escape room. The camera screen allows for the operator to see camera feeds and the config page lets the user enter a new configuration file for checking and the use.

Set-up prettier

    npm install --save-dev --save-exact prettier
    npm install --save-dev tslint-config-prettier
  • navigate to Settings > Tools > File Watchers
  • press + and select Prettier
  • enable auto saved files to trigger the watcher in advanced settings
  • press ok

Run prettier manually

  • navigate to BEP_1920_Q2/front-end/
  • run following command:
prettier --write "**/*.ts"

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.

Running unit tests

Run ng test to execute the unit tests via Karma.

Further help

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