S7_snap7_Stremer_n_Recorder/OFFLINE_USAGE.md

Offline Usage Configuration

Overview

The application has been configured to work completely offline without any CDN dependencies.

Changes Made

1. Chart.js Libraries Migration

Before (CDN Dependencies):

• Chart.js loaded from https://cdn.jsdelivr.net/npm/chart.js@3.9.1
• Luxon from https://cdn.jsdelivr.net/npm/luxon@2
• Chart.js adapter from https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.3.1
• Zoom plugin from https://unpkg.com/chartjs-plugin-zoom@1.2.1
• Streaming plugin from https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2.0.0

After (NPM Dependencies): All Chart.js libraries are now installed as npm packages and bundled with the application:

"chart.js": "^3.9.1",
"chartjs-adapter-luxon": "^1.3.1", 
"chartjs-plugin-streaming": "^2.0.0",
"chartjs-plugin-zoom": "^1.2.1",
"luxon": "^2.5.2"

2. Chart.js Setup Module

Created frontend/src/utils/chartSetup.js that:

• Imports all Chart.js components as ES modules
• Registers all required plugins (zoom, streaming, time scales)
• Makes Chart.js available globally for existing components
• Provides console confirmation of successful setup

3. Application Entry Point

Modified frontend/src/main.jsx to import the Chart.js setup before rendering the application.

4. Updated HTML Template

Removed all CDN script tags from frontend/index.html.

Verification

Build Verification

The application builds successfully without any external dependencies:

cd frontend
npm run build

Development Server

The development server runs without internet connection:

cd frontend  
npm run dev

Runtime Verification

• No network requests to external CDNs
• All Chart.js functionality preserved (zooming, streaming, real-time plots)
• Completely self-contained in bundled JavaScript

Backend Offline Compliance

The Python backend already uses only local dependencies:

• Flask for web server
• python-snap7 for PLC communication
• Local file-based configuration
• No external API calls or services

Deployment for Offline Use

Frontend Production Build

cd frontend
npm run build

The dist/ folder contains all necessary files with no external dependencies.

Complete Offline Package

The entire application (backend + frontend) can be deployed on systems without internet access:

1. Python Requirements: Install from requirements.txt
2. Frontend: Use built files from dist/ folder
3. PLC Communication: Requires snap7.dll in system PATH
4. Configuration: All JSON-based, stored locally

Chart.js Feature Compatibility

All existing Chart.js features remain functional:

• ✅ Real-time streaming plots
• ✅ Zoom and pan functionality
• ✅ Time-based X-axis with Luxon adapter
• ✅ Multiple dataset support
• ✅ Dynamic color assignment
• ✅ Plot session management
• ✅ CSV data export integration

Technical Notes

Global vs ES Module Access

The setup maintains backward compatibility by making Chart.js available both ways:

• Global: window.Chart (for existing components)
• ES Module: import ChartJS from './utils/chartSetup.js' (for new components)

Bundle Size Impact

The Chart.js libraries add approximately ~400KB to the bundle (gzipped), which is acceptable for offline industrial applications.

Browser Compatibility

All dependencies support modern browsers without requiring polyfills for the target deployment environment.