https://github.com/akurtz87/osi-model-visualization
https://github.com/akurtz87/osi-model-visualization
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/akurtz87/osi-model-visualization
- Owner: AKurtz87
- Created: 2023-06-26T07:33:19.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-10T19:40:49.000Z (almost 2 years ago)
- Last Synced: 2025-02-13T19:39:16.458Z (4 months ago)
- Language: HTML
- Size: 5.86 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# OSI Model Visualization
This project provides a simple, interactive visualization of the Open Systems Interconnection (OSI) model. The OSI model is a conceptual model that characterizes and standardizes the internal functions of a communication system by partitioning it into abstraction layers.
The project uses basic web technologies, such as HTML, CSS, and JavaScript, to render the model in a user-friendly way and to add interactivity.
## Features
**Layer-by-Layer Structure:** The model is laid out layer by layer from the application layer down to the physical layer. Each layer has a separate block with a title representing the layer's name.
**Interactive Layers:** By clicking on each layer, you can toggle the visibility of detailed information for that layer, such as the protocols used and a sample data representation.
**Detailed Information:** The detailed information for each layer includes the protocols used at that layer and a visual representation of how data is encapsulated or treated at that layer.
## Setup
+ Clone the repository
>git clone https://github.com/yourusername/osi-model-visualization.git
+ Open the HTML file
+ Navigate to the project directory and open the index.html file in your preferred web browser.
## Usage
**To use the OSI Model Visualization tool:**
**Click on a layer:** Click on any layer block to reveal the protocols used at that layer and a table demonstrating how data is encapsulated or treated at that layer.
**Click again to hide details:** If you want to hide the details of a layer, simply click on the layer block again.
## Contribution
Feel free to fork this project, submit PRs, and report issues. Any kind of contribution is much appreciated!
## License
The project is open source and available under the MIT License.