https://github.com/irisgve/traffic-lights
Simulates a set of traffic lights at an intersection
https://github.com/irisgve/traffic-lights
angular rxjs typescript
Last synced: about 2 months ago
JSON representation
Simulates a set of traffic lights at an intersection
- Host: GitHub
- URL: https://github.com/irisgve/traffic-lights
- Owner: irisgve
- Created: 2019-09-13T07:38:16.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T00:28:45.000Z (over 3 years ago)
- Last Synced: 2023-03-07T09:57:03.133Z (over 3 years ago)
- Topics: angular, rxjs, typescript
- Language: TypeScript
- Homepage:
- Size: 1.38 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Traffic Demo [](https://gitlab.com/nesiri/trafficlights/commits/master) [](https://gitlab.com/nesiri/trafficlights/commits/master)
![Traffic Light Intersection Demo][demo]
[demo]: https://media.giphy.com/media/3og0IM2KdNhXh4OXpS/giphy.gif
This traffic demo project simulates a set of traffic lights at an intersection. The traffic lights are designated (N, S) and (E, W) like a compass.
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0.
## Project Specifications
* When switching from green to red, the yellow light must be displayed for 30 seconds prior to it switching to red and the opposite direction switching to green from red.
* The lights will change automatically every 5 minutes.
# Table of Contents
- [Prerequisites](#prerequisites)
- [Starting the application](#starting-the-application)
- [Running unit tests](#running-unit-tests)
- [Implementation](#implementation)
- [Intersection State Machine](#intersection-state-machine)
- [Technology Stack](#technology-stack)
- [Results](#results)
# Prerequisites
This project **strongly requires node >=v6.9.0 and npm >=3.10.3**. More info on Node and NPM installation [here](https://docs.npmjs.com/getting-started/installing-node).
# Starting the application
Once you have installed the necessary prerequisites, run `npm run start` to initialize a local server that hosts the application. Navigate then to `http://localhost:4200/`.
# Running unit tests
![Unit Tests][karma]
[karma]: http://i.imgur.com/u6hApoq.png
The unit tests are implemented using [Karma](https://karma-runner.github.io) and [Jasmine](https://jasmine.github.io). You can run the unit tests by running `npm run test`. This will open up a Chrome browser debugger and display a visual result of the tests.
# Implementation
* Strictly implements a traffic intersection that has four lights (N/S/W/E) and that North-South lights keep the same state as well as East-West lights
* Traffic direction is only from North to South, South to North and East to West, West to East
* North-South traffic state is opposite of East-West, that is, state of both direction depends on each other
* One cycle is set to be 5 minutes. Red Light is set for 300 seconds, Yellow Light is set for 30 seconds and Green Light is set for 270 seconds to complete a cycle.
## Intersection State Machine
The logic assumes the following state machine logic as follows:
State | North-South | East-West | Duration (secs)
------------- | ------------ |----------- |-------
0 - GreenRed | Green | Red | 270
1 - YellowRed | Yellow | Red | 30
2 - RedGreen | Red | Green | 270
3 - RedYellow | Red | Yellow | 30
It changes state according to which light duration is shorter, i.e. on GreenRed state, Green has duration of 270s and Red has duration 300s. The 270s duration then is selected.
## Technology Stack
As stated above, this is generated by the `@angular/cli` for ease of scaffolding and project setup and in consequence uses the ff technologies:
- Angular 4
- Typescript
- Karma/Jasmine
- Webpack
- RxJS
The relevant code is mostly inside `app/*`. This project can also take in environment-based cycle time, i.e. 5 mins can be changed to x mins easily in `environments/*`.
`app/app.component.ts`
The overall view with the traffic lights are constructed inside `app.component.ts`. This is also where the traffic light controller and logger service are instantiated.
`app/traffic-light/traffic-light.component.ts`
This is a single component that contains the traffic light "image". The image, however, has been purely constructed out of CSS (credits to this [codepen](https://codepen.io/abruzzi/pen/cEfGi)). It accepts an input state (which light to show) and a title.
`app/core/traffic-logger.service.ts`
The service that logs the traffic intersection state every minute and exposes a `log` method that a consumer client can call whenever to log a state update.
`app/core/traffic-intersection-controller.service.ts`
The service that controls the intersection. It exposes an `intersection` subject that consumers can subscribe to whenever the intersection state changes. It is very specific to the logic of having an intersection with North-South and East-West direction.
## Results
These are the resulting logs for 30 minutes (ran from 9:12am to 9:42am). The overall results, including the demo image and the unit test results image are located in the `results/*` directory.
```
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:12:28 GMT+0800 (+08)---
North: green
South: green
East: red
West: red
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:13:28 GMT+0800 (+08)---
North: green
South: green
East: red
West: red
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:14:28 GMT+0800 (+08)---
North: green
South: green
East: red
West: red
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:15:28 GMT+0800 (+08)---
North: green
South: green
East: red
West: red
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:16:28 GMT+0800 (+08)---
North: green
South: green
East: red
West: red
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:16:58 GMT+0800 (+08)---
North: yellow
South: yellow
East: red
West: red
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:17:28 GMT+0800 (+08)---
North: yellow
South: yellow
East: red
West: red
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:17:28 GMT+0800 (+08)---
North: red
South: red
East: green
West: green
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:18:28 GMT+0800 (+08)---
North: red
South: red
East: green
West: green
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:19:28 GMT+0800 (+08)---
North: red
South: red
East: green
West: green
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:20:28 GMT+0800 (+08)---
North: red
South: red
East: green
West: green
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:21:28 GMT+0800 (+08)---
North: red
South: red
East: green
West: green
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:21:58 GMT+0800 (+08)---
North: red
South: red
East: yellow
West: yellow
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:22:28 GMT+0800 (+08)---
North: red
South: red
East: yellow
West: yellow
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:22:28 GMT+0800 (+08)---
North: green
South: green
East: red
West: red
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:23:28 GMT+0800 (+08)---
North: green
South: green
East: red
West: red
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:24:28 GMT+0800 (+08)---
North: green
South: green
East: red
West: red
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:25:28 GMT+0800 (+08)---
North: green
South: green
East: red
West: red
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:26:28 GMT+0800 (+08)---
North: green
South: green
East: red
West: red
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:26:58 GMT+0800 (+08)---
North: yellow
South: yellow
East: red
West: red
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:27:28 GMT+0800 (+08)---
North: yellow
South: yellow
East: red
West: red
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:27:28 GMT+0800 (+08)---
North: red
South: red
East: green
West: green
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:28:28 GMT+0800 (+08)---
North: red
South: red
East: green
West: green
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:29:28 GMT+0800 (+08)---
North: red
South: red
East: green
West: green
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:30:28 GMT+0800 (+08)---
North: red
South: red
East: green
West: green
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:31:28 GMT+0800 (+08)---
North: red
South: red
East: green
West: green
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:31:58 GMT+0800 (+08)---
North: red
South: red
East: yellow
West: yellow
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:32:32 GMT+0800 (+08)---
North: red
South: red
East: yellow
West: yellow
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:32:32 GMT+0800 (+08)---
North: green
South: green
East: red
West: red
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:33:36 GMT+0800 (+08)---
North: green
South: green
East: red
West: red
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:34:28 GMT+0800 (+08)---
North: green
South: green
East: red
West: red
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:35:29 GMT+0800 (+08)---
North: green
South: green
East: red
West: red
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:36:28 GMT+0800 (+08)---
North: green
South: green
East: red
West: red
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:37:08 GMT+0800 (+08)---
North: yellow
South: yellow
East: red
West: red
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:37:28 GMT+0800 (+08)---
North: yellow
South: yellow
East: red
West: red
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:37:43 GMT+0800 (+08)---
North: red
South: red
East: green
West: green
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:38:28 GMT+0800 (+08)---
North: red
South: red
East: green
West: green
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:39:30 GMT+0800 (+08)---
North: red
South: red
East: green
West: green
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:40:37 GMT+0800 (+08)---
North: red
South: red
East: green
West: green
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:41:31 GMT+0800 (+08)---
North: red
South: red
East: green
West: green
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:42:13 GMT+0800 (+08)---
North: red
South: red
East: yellow
West: yellow
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:42:28 GMT+0800 (+08)---
North: red
South: red
East: yellow
West: yellow
traffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:42:43 GMT+0800 (+08)---
North: green
South: green
East: red
West: red
```