Code Monkey home page Code Monkey logo

shortestpath's Introduction

Shortestpath

This project was generated with Angular CLI version 10.0.1.

This project was as a part of the Microsoft Mars Colonization Program.

It consists of a web application to visualise Dijkstra's algorithm in a user defined grid with 3 types of predetermined weights.

Instructions to run

The application is deployed on Firebase and is available here

To run this project on your local machine clone the repository

Run npm install to install the dependancies. Run ng serve to run a local server on localhost/4200

Workflow

This application is a front end application built using Angular. Angular is a typescript based open source web application framework made by Google. It has a Single Page Application Architecture with only one index.html file. It is composed of various components that interact with each other and let users make dynamic changes to their webpages.

The components in this angular application are:

element - forms one small box on a grid. The grid is present in the main app.component and is rendered by forming a 2D array of elements in the html file by using the ngFor directive. Each element points to a class Node which contains the status of each Node in the application with objects such as row, column, startPoint, endPoint, etc. It includes the css styling to change colours when interacted with and when given a certain property.

Node - is the logic behind each element. Contains various fields to store the current state of the element along with a function to update the distance from the previous element, by comparing values and selecting the shorter value.

app.component - contains the overall design of the web page including the toolbar, the form and the grid composed of individual element components. It includes the main code to find the shortest path, which operates by using the distance object in the node, and comparing it to its neighbours and updating it.

Screenshots

Green is Start Point Blue is End Point Light elevation corresponds to a weight of 1.2 units. High elevation corresponds to a weight of 1.4 units. Extreme elevation corresponds to impassable terrain. On clicking submit, the green line will give the shortest path.

Screenshot from 2020-07-24 23-26-48 Screenshot from 2020-07-24 23-27-17 Screenshot from 2020-07-24 23-35-32 Screenshot from 2020-07-24 23-35-54

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.