WIN1205-12 PAXGRIDCDN WEBSITE UPGRADES


 

Name: Anjali Luthra

Role: Communication Leader
  • I hold a 5-year experience in technical programming skills like JavaScript, HTML, JQuery, Python, C, C++, Java, and CSS
  • Ensured better communication practices while leading the interaction with the sponsor and the mentor
  • Played a major role in the development of the JavaScript code, designing icons and warning notifications for this project.

Name: Tejal Sharad Rupwate

Role: Team Leader
  • I have the interpersonal skills to lead a team to achieve project milestones on time and to meet the sponsor’s requirements
  • I have worked with programming languages like JavaScript, HTML, and SQL.
  • Time management, reporting, context research, and strategic thinking all assisted the team in achieving its objectives

Name: Jaspreet Kaur

Role: code tester
  • Strong attention to detail documentation and problem-solving aptitude
  • Reviewed the test prototype of the map and reported errors
  • I hold a good understanding of programing skills such as HTML, CSS , C, MySQL and have basic knowledge of JavaScript

Name: Sri Lakshmi Prasanna Vemula

Role: code developer
  • 1 Year of working experience in web programming
  • Excellent programming skills and a good grasp of modern HTML/CSS to build website layouts and user interfaces
  • Good knowledge of integrating data from different databases and back-end services

Team Name:

TheDevelopers

Team Members Names:

Anjali Luthra, Tejal Sharad Rupwate, Jaspreet Kaur, Sri Lakshmi Prasanna Vemula

Program of Study:

Wireless Information Networking

Mentor Name:


Project Name:

PAXGRIDCDN WEBSITE UPGRADES

Sponsor Name:

Martin Nathanson



Sponsor Organisation:

PaxgridCdn


Brief Description Of Project:

This project focuses on tracking roadside units at various intersections across Peterborough, and it includes features such as displaying alert notifications with detailed information such as status code, location name, and cause of the failure in real-time about the RSU if a traffic signal intersection has a problem. The network operator can quickly locate a specific location and have the focus automatically shift there, as well as display various color traffic signal icons that indicate the status of each one. Furthermore, by clicking on those icons, the network operator can obtain additional information about the issue, as well as add a new traffic signal icon to any specific roadside unit as needed, and store database records detailing roadside unit conditions for future reference.

Project Objective:

  • To build a user-friendly and detailed webpage with a mapping API (Application Programming Interface) that illustrates various map features
  • Features include traffic signal icons, zoom-in and out, alert icons, and notification pop-ups with position names, status codes, and RSU information
  • A sample database to connect with the webpage is required for this real-time information
  • The real-time interactive map is primarily intended for network operators to verify the status of roadside device failures, alert users, and rapidly fix the defective unit without disrupting traffic or causing inconvenience to the public

Project Innovation:

  • We preferred open-source Mapping API platforms Leaflet and Mapbox in sample map webpage which can easily load, display, and render the geographic data of city Peterborough to the network operators.
  • This sample prototype will assist the network operators to monitor and control the traffic signal points or the roadside unit at a time with the help of alert Popup warning notifications and visualizing the status details.
  • This map prototype is only for the network operators (not for the public) so that they can get a better glimpse of the intersection, get reported with issues if any problem occurs, and can troubleshoot the errors.
  • By analyzing and controlling the intersections, the network operators can promote roadside safety and greater user satisfaction.

Challenges & Solutions:

  • To create a webpage with sample API it was difficult to work with Leaflet with a beginner experience.

Solution: Usually Leaflet is used for basic map layer types, and this contains full API references which took us time to understand but later as we all worked with leaflet it went easy.

  • To create warning icons was difficult to find an open-source platform

Solution: Used an external support platform called adobe illustrator

  • Creating a sample database to interface with the warning notifications in the real-time scenario according to the sponsor’s objective

Solution: Found an open-source community to create a sample database to get results in real-time.

  • Adobe illustrator is not an open-source tool to design warning icons for the website.

Solution: Found an online toolkit named ‘FontAwesome’  which provided us free of cost icons for our project without the hassle of designing basic icons 


Project Results or Progress:

The webpage that we developed for the network operator to make simple and user-friendly navigation so that failure conditions at various RSU (Roadside Unit) can be located and resolved. The mapping API zoom-in/out and signal point icons were used to get things started. Real-time database updates and pop-up notifications too are essential. We wrapped up with an overview of the mapping API, database development, icon styling, and interactive webpage creation. Our project is a live industrial network that allows us to interact with, connect with, and integrate with existing map services so that we can build our own application and expand the functionality


Lessons Learned:

  • Languages: JavaScript, CSS, HTML, JQuery

The basic building blocks of websites are HTML, CSS, and JavaScript, with CSS managing the appearance of a page and JavaScript programming its functionality

Javascript: By adding custom client-side scripts, JavaScript assists web developers in making web pages dynamic and interactive.

CSS: A great HTML tool that separates content from design to give you full control over the layout and presentation of your website pages.

HTML: HTML is a programming language used to explain the arrangement of data on a website.

  • Mapping API: Mapbox, Leaflet

Leaflet: Leaflet is the most common open-source JavaScript library for creating interactive maps that are mobile-friendly. It includes all of the mapping functionality that most developers would ever need.

Mapbox: Mapbox is a location data platform that drives many common application maps and location services

  • IDE: Visual Studio 2019

This tool simplifies performing complex tasks to provide the best Web Development Services

  • Tools: Fontawesome, XAMPP tool, Apache, phpMyAdmin

XAMPP: It is a free and open-source cross-platform web server solution consisting primarily of the Apache HTTP Server and interpreters for PHP and Perl scripts


Short Video: