Below is a short README for your project that explains how to install, run in development mode, and serve a debug version with Python:
DCC Viewer
This is a front-end only digital calibration certificate viewer built with vanilla JavaScript, Vite, Plotly, xml2js, and JSONEditor. It converts a DCC XML file into JSON and renders administrative and measurement data with interactive plots, tables, and tooltips.
Features
- XML-to-JSON conversion: Uses xml2js to convert the calibration certificate XML into JSON.
- Interactive Measurement Renderer: Displays measurement results as grouped subplots with error bars, custom tooltips (including conformity status), and a correlated data table.
- JSON Tree Viewer: Uses JSONEditor for a modern, read-only view of the administrative data.
- Responsive UI: Supports language switching and dynamic updates.
Installation
-
Make sure you have Node.js installed.
-
Clone the repository and navigate to the project directory.
-
Install dependencies:
npm install
Development
Start the Vite development server:
npm run dev
This will launch the app (usually on http://localhost:5173/). Changes to the source files will trigger hot reloading.
Serving the Debug Version with Python
If you prefer to view the debug version using Python's built-in HTTP server, follow these steps:
-
Build the project (or use the current static files in the project root):
npm run build
The output will be placed in the
dist
folder. -
Navigate to the
dist
folder:cd dist
-
Serve the folder using Python (Python 3):
python3 -m http.server 8000
This command will start a local server on port 8000.
-
Open your browser and navigate to http://localhost:8000 to view the debug version.
Note: You can also serve the project directly from the project root (if your files are static) by running the Python server there, but using the Vite build output (in dist
) is recommended for a production-like environment.
Debugging
-
Chrome Developer Tools:
Open the Sources tab and locate your source files (source maps are enabled by default with Vite) to set breakpoints and inspect variables. -
WebStorm:
Create a JavaScript Debug configuration (with URLhttp://localhost:5173/
) and set breakpoints directly in the IDE.
This README should help you get started with development and debugging. Let me know if you need any additional information!