https://github.com/chenxu2394/web-oscilloscope
A containerized oscilloscope that enables users to broadcast and visualize live data on the internet.
https://github.com/chenxu2394/web-oscilloscope
azure container docker flask http
Last synced: 2 months ago
JSON representation
A containerized oscilloscope that enables users to broadcast and visualize live data on the internet.
- Host: GitHub
- URL: https://github.com/chenxu2394/web-oscilloscope
- Owner: chenxu2394
- License: mit
- Created: 2025-02-12T20:17:50.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-09-01T05:55:41.000Z (10 months ago)
- Last Synced: 2025-10-05T18:41:21.256Z (9 months ago)
- Topics: azure, container, docker, flask, http
- Language: Python
- Homepage:
- Size: 8.92 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Web Oscilloscope
Web Oscilloscope is a containerized, real-time oscilloscope built with Flask, Bokeh, and Nginx that enables users to publish live data and view it from anywhere on the internet.
---
## Overview
Web Oscilloscope provides a web-based interface for visualizing real-time data. Data is broadcasted via HTTP POST requests to a Flask API and then displayed in a continuously updating oscilloscope powered by Bokeh.
---
## Features
- **Real-Time Visualization:**
Renders a continuously updating oscilloscope using [Bokeh](https://bokeh.org/).
- **Data Ingestion API:**
Receives data via HTTP POST requests using [Flask](https://flask.palletsprojects.com/).
- **Persistent Data Storage:**
Uses a capped global deque to store recent data points for consistent plotting for different sessions.
- **Reverse Proxy with Nginx:**
Routes incoming requests to the appropriate backend (Bokeh or Flask) while exposing a single public port.
- **Containerized & Cloud-Ready:**
Fully Dockerized for seamless deployment, e.g., via Azure Web App for Containers.
---
## Project Structure
```bash
.
├── Dockerfile # Docker build instructions
├── README.md # Project documentation
├── nginx.conf # Nginx configuration for reverse proxying
├── oscilloscope.py # Main application (Flask + Bokeh server)
├── requirements.txt # Python dependencies list
├── send_data.py # Script to simulate sending data
├── start.sh # Startup script for launching the app and Nginx
└── venv # (Optional) Local virtual environment folder
```
---
## Prerequisites
- [Docker](https://www.docker.com/) (Docker Desktop or similar)
- Python 3.7.13 if you wish to run parts of the application locally
- An [Azure account](https://azure.microsoft.com/) if you plan to deploy to Azure
---
## Getting Started (Local Testing)
### 1. Build the Docker Image
In your project directory, run:
```bash
docker build -t osc .
```
This command uses the Dockerfile to create an image named osc.
### 2. Run the Docker Container Locally
Run the container and map the container’s port 80 (Nginx) to a host port (e.g., 8080):
```bash
docker run -p 8080:80 osc
```
- Nginx listens on port 80 inside the container.
- The environment variable BOKEH_ALLOW_WS_ORIGIN is set to localhost:8080 (for local testing).
### 3. View the Oscilloscope
Open your browser and navigate to:
```bash
http://localhost:8080
```
You should see the oscilloscope interface (powered by Bokeh).
### 4. Send Data to the Oscilloscope
You can simulate data input by using the provided `send_data.py` script:
```bash
python send_data.py --url "http://localhost:8080/data"
```
Or manually send data via curl:
```bash
curl -X POST -H "Content-Type: application/json" -d '{"x": 12.34, "y": 56.78}' http://localhost:8080/data
```
Successful responses will return JSON like:
```json
{ "status": "success" }
```
---
## Deployment to Azure
### 1. Build and Push the Docker Image
```bash
docker buildx build --platform linux/amd64 -t /osc:latest --push .
```
### 2. Create an Azure Web App for Containers
1. In the Azure Portal, create a new Web App for Containers.
2. In the container settings:
- Choose Docker Hub as the image source.
- Enter the image name (e.g., `/osc:latest`).
- Azure will expose the container on port 80 by default.
3. In the Configuration section, add or update the environment variable:
- Name: `BOKEH_ALLOW_WS_ORIGIN`
- Value: `` (e.g., `osc-yourapp.azurewebsites.net`)
4. Save the configuration and restart the container.
### 3. Access the Deployed Oscilloscope
After deployment, your application will be available at the URL provided by Azure (e.g., `https://osc-yourapp.azurewebsites.net`).
- **Oscilloscope Page**:
Visit the Azure URL in your browser to view the oscilloscope.
- **Data Ingestion**:
Send data to the oscilloscope by POSTing to `https://osc-yourapp.azurewebsites.net/data`.