/Multi-Channel-Signal-Viewer

Primary LanguageJavaScript

Multi-Channel Signal Viewer

Table of contents

Introduction
Requirements
Project Structure
Project Features
Run the project
Team members

Introduction

A web application that illustrates a real time signal using a multi-channel signal viewer.

Requirements

  • Contain two main identical graphs. The user can open different signals in each graph
  • Each graph has to have its own UI controls such as:
    • Zooming
    • panning through the mouse movements
    • Scrolling through sliders
    • Changing color
    • Adding a label/title for each signal
    • Pausing/playing/rewinding
    • Exporting & Reporting ( PDF that has data statistics such as mean, std, duration, min and max values for each signal )
  • Link both graphs via a button in the UI. When the graphs are linked, the two graphs must display the same time frames, signal speed

Project Features

VID_20230406_032735_Trim.mp4

Project Structure

The web app is built using:

  • Frontend:

    • HTML
    • CSS
    • Javascript
    • Bootstrap

  • Backend:

    • Node.js
    • Express.js
master
├─ website (Front-end)
│  ├─ app.js
│  ├─ plotly-2.18.2.min
|  ├─ style.css
|  └─ index.html
├─ data 
│  ├─ datasets
|  └─ project statement
├─ .gitattributes
├─ .gitignore
├─ readme.txt
├─ package
├─ package-lock
└─ server.js (Back-end)

Run the project

  1. Download the project
  2. Download the following packages through the terminal:
    npm install
    to download all the packages in package.json which are: express, cors, body-parser, node, fs, csv-parser, path, plotly, binary-parser, pdfkit, pdfkit-table, papaparse, util or download each package manually by writing
    npm install -packagename-
  3. Run the server by writing this in the terminal :
    node server.js

Team

Biomedical Signal Processing (SBEN311) class task created by:

Team Members
Nada Mohamed
Abdulmonem Elsherif
Asmaa Khalid
Mariam Gamal

Submitted to:

  • Dr. Tamer Basha & Eng. Christina Adly