DCC Viewer JavaScript "dccviewer-js"
A lightweight JavaScript/HTML application for displaying Digital Calibration Certificates (DCC) from XML files. The application parses a DCC XML file, renders administrative data and measurement results interactively (including charts and tables), and supports multiple languages based on the certificate’s data.
Licencs and other Information
This Library is a proof of concept of the advantages of interactive visualisation of the DCC-XML 3.3.0 Calibration certificates. There are errors in this code, and many parts missing so far, and it's not guaranteed that all elements are rendered correct or even rendered at all. This code is licensed under LGPL-2.1 since we hope to build a more generic libary in the future and sharing it and it's development efforts with the world.
Project Structure
├── data
│ ├── 1DTableDataWithRenderingComments.xml # Example XML file with table rendering comments
│ └── sin_acceleration_example_dcc_WithExampleConformatyStatment.xml # Example DCC XML file
├── dcc-viewer # (Optional) Output directory for built package
├── index.html # Main HTML file
├── package.json # NPM package file
├── readME.md # This file
├── src
│ ├── app.js # Main application module (initializes the app, loads XML, renders UI)
│ ├── dccQuantity.js # Module for parsing DCC quantities and conformity data
│ ├── main.js # Entry point – initializes app after DOM loads and loads test XML (for development)
│ ├── renderers
│ │ ├── AdminRenderer.js # Renders administrative data (using a JSON tree viewer)
│ │ ├── MeasurementRenderer.js # Renders measurement results in a tabbed layout with charts, tables, etc.
│ │ └── SelectRenderer.js # (Optional) For selecting which renderer to use for a given XML section
│ └── styles.css # Application styling└── vite.config.js # Vite configuration fileFeatures
-
Multi-Language Support:
Automatically extracts available languages from the XML's administrative data and builds a dynamic language dropdown. -
Interactive Measurement Rendering:
Measurement results are rendered in a tabbed layout, with interactive charts (using Plotly) and tables that update with scaling options and tolerance markings. -
Expandable Sections:
Used methods and influence conditions are rendered in collapsible sections using JSONEditor.
Installation
-
Clone the Repository:
git clone <repository_url> cd dccviewer-js -
Install Dependencies:
npm install
Development
This project uses Vite for development.
-
Start the Development Server:
npm run devThis will start the server (usually on
http://localhost:5173/). The app usessrc/main.jsas its entry point. -
View Example:
For testing purposes, the development version loads a sample XML file from the
datadirectory. You can change the XML inmain.jsif needed.
Building & Packaging
-
Build for Production:
npm run buildThis command uses Vite to build a production version of your application. The output is typically placed in a
distdirectory. -
Packaging as an NPM Module:
- Remove the test XML file loading from your module (it's now handled in
main.js). - Publish your module to npm (or use it locally) so that the consuming project can call your exported
init(xmlStr, options)function to load and render a DCC XML file.
- Remove the test XML file loading from your module (it's now handled in
Usage in a Standalone HTML File
If you want to use the module in a simple HTML file, you can create an HTML file like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>DCC Viewer</title>
<link rel="stylesheet" href="dist/styles.css" />
</head>
<body>
<div id="app"></div>
<script type="module">
import { init } from './dist/app.js';
// Replace the following XML string with your own XML data.
fetch('path/to/your/dcc.xml')
.then(response => response.text())
.then(xmlStr => {
init(xmlStr, { containerId: 'app', language: 'en' });
});
</script>
</body>
</html>This example shows how to initialize the app by passing an XML string and configuration options (such as the container ID and language).