Skip to content
Snippets Groups Projects

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

  1. Make sure you have Node.js installed.

  2. Clone the repository and navigate to the project directory.

  3. 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:

  1. 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.

  2. Navigate to the dist folder:

    cd dist
  3. Serve the folder using Python (Python 3):

    python3 -m http.server 8000

    This command will start a local server on port 8000.

  4. 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 URL http://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!