Web FPGA - SPIN

This repository held a tool to visualize an FPGA simulation.

---

Definition

This project involves creating a web-based interface for an FPGA simulator that visually demonstrates how signals propagate within an FPGA. It is designed to serve as an educational tool. Our goal is to help users understand FPGA internals by merging a 2D floorplan view of the FPGA (showing its basic elements and the interconnections between them) with a dynamic simulation of signal timing.

---

Table Of Contents

• Status
• Usage
  • How To Visualize An Example
  • How To Create A New Example
• Installing/Getting Started
• Roadmap
• Documentation Of The Project
• Development
  • Built With
  • Prerequisites
• Tests
• Contributing
• API Description
• Changelog
• Copyrights
• Contacts
• Credits And Acknowledgement

---

Status

This project is currently in progress. However, after 2025/04/01, our team will be focusing on another project, which is why the frequency of updates will be greatly diminished.
Therefore, if you are willing to keep going on this project, please refer to the Contributing part.

---

Usage

How To Visualize An Example

1. Click on Visualize.

2. Click on the desired example.

A new page with the visualization of the example should open.

Note

On the visualization page, you can:

• Zoom In/Zoom Out
• Move around
• Fullscreen

---

How To Create A New Example

1. Click on Create.

2. Click on the name text box, then, enter your example name.

3. Click on Add Example, then, select the wanted files.

Note

You can also drag and drop them directly inside the section.

4. Click on the Create button.

You can now refer to the How To Visualize An Example section to visualize your example again.

---

Installing/Getting Started

1. Clone the repository.

git clone https://github.com/algosup/2024-2025-project-4-web-fpga-team-5

2. Navigate to the directory.

cd 2024-2025-project-4-web-fpga-team-5

3. Install dependencies.

npm i

4. Run the app.

npm run main

---

The application is now available at the following address:

http://localhost:5173

Or:

http://[adresseIP]:5173

---

For better information, please, refer to the User Manual.

---

Roadmap

This project is a six-week school project. Therefore, the roadmap would only be effective for this amount of time.
If you want to take a look, you can access the roadmap by clicking this link.

---

Documentation Of The Project

Functional Specifications: Describes what the software does by outlining user requirements and expected functionalities.

Technical Specifications: Details how the software will be built, including architecture, design, and technology choices.

Project Charter: Officially initiates the project by defining its scope, objectives, stakeholders, and overall framework.

Test Plan: Outlines the strategy, procedures, and criteria for verifying that the system meets its requirements.

User Manual: Provides end-users with instructions on how to use the system and how to troubleshoot common issues.

---

Development

Built With

The list of the main libraries and frameworks used in our project :

Category	Technology/Tool	Link	Description
Frontend	React.js		JavaScript library to create dynamic user interfaces.
Frontend	D3.js		Library to create dynamic data visualizations.
Backend	Node.js & Express.js		JavaScript server-side runtime environment with a framework for creating APIs.
Database	No DB		Store as JSON.
Other	Vite		Tool to manage and build JavaScript modules.

Language: JS

---

Prerequisites

To set up the dev environment you'll need to have many dependencies and libraries installed.

All the different installation guides can be found in the Technical Specifications.

---

Tests

This section explains how to run the end-to-end tests created by the quality assurance.
You must be at the root of the project and Node.JS is already installed.
If not you need to fork the project at this link and install Node.JS at this one.

To test the front-end:

# Move to the correct folder
cd frontend/

# Dependencies installation
npm i

# Execute the test suites
npm run test:e2e

To test the back-end:

# Move to the correct folder
cd backend/

# Dependencies installation
npm i

# Execute the test suites
npm run test:e2e

---

Contributing

To contribute to our project, please, ensure you follow the conventions you can find in the CONTRIBUTING.md file.

---

API Description

Access the API documentation here.

---

Changelog

Latest: NULL
Current: NULL
Version List: Click to view

---

Copyrights

Ownership: CNES and ALGOSUP Third-party Assets:

Images:

• CNES Logo (Public Domain)
• React Logo (MIT License)
• D3.js Logo (BSD-3-Clause License)
• Node.js Logo (MIT License)
• JSON Logo (Public Domain)
• Vite Logo (MIT License)
• SPIN Logo (AI-Generated)

Frontend:

• React.js (MIT License)
• React DOM (MIT License)
• React Router DOM (MIT License)
• D3.js (BSD-3-Clause License)
• TailwindCSS (MIT License)
• Vite (MIT License)
• @tailwindcss/vite (MIT License)

Backend:

• Express.js (MIT License)
• CORS (MIT License)
• Multer (MIT License)
• Jest (MIT License)
• Supertest (MIT License)

Copyright Notice: © 2024 CNES and ALGOSUP. All rights reserved.

---

Contacts

To contact our project team. Please, send a message to the following E-mails:

• Project Manager's E-mail: [email protected]
• Program Manager's E-mail: [email protected]

For other social media information, please, refer to Credits And Acknowledgement.

---

Credits And Acknowledgement

Particular thanks to Florent from the CNES for giving us the opportunity to work on this project.

Thanks to our school, ALGOSUP for letting us improve and having such interesting projects.

Finally, thanks to all the team members for those six weeks.
You can find their profiles underneath.

Role	Name	Contact
Project Manager	Robin GOUMY	GitHub | LinkedIn
Program Manager	Alexandre BOPP	GitHub | LinkedIn
Technical Leader	Maxime THIZEAU	GitHub | LinkedIn
Software Engineer	Geoffrey Delrieu	GitHub | LinkedIn
Quality Assurance	Mathias DELILLE	GitHub | LinkedIn
Technical Writer	Habi CAILLEAU	GitHub | LinkedIn

Back to the top