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 MIT since we hope to build a more generic libary in the future and sharing it and it's development efforts with the world.
Source Reposity and issue tracker
https://gitlab1.ptb.de/Seeger/dccviewer-js
Features
-
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 https://gitlab1.ptb.de/Seeger/dccviewer-js cd dccviewer-js -
Install Dependencies:
npm install dccviewer-js
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).
Usage in an DCC XLT
this preamble in the DCC-XML enables automatic usage of this js-libary to render the DCC
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="#embeddedXSL"?>
<dcc:digitalCalibrationCertificate xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:dcc="https://ptb.de/dcc" xmlns:si="https://ptb.de/si"
xsi:schemaLocation="https://ptb.de/dcc https://www.ptb.de/dcc/v3.3.0/dcc.xsd"
schemaVersion="3.3.0">
<!-- Embedded XSLT stylesheet for production -->
<xsl:stylesheet id="embeddedXSL" version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:exsl="http://exslt.org/common">
<!-- Strip extra whitespace -->
<xsl:strip-space elements="*"/>
<xsl:output method="html" encoding="UTF-8" indent="yes"/>
<!-- here we start defining the HTML template witch then get the complete xml for parsing and rendering-->
<xsl:template match="/">
<html>
<head>
<meta charset="UTF-8"/>
<title>DCC Viewer</title>
<!-- Link to production CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/dccviewer-js/dist/style.css"/>
</head>
<body>
<div id="app"></div>
<!-- Output the certificate XML into a hidden script block -->
<script id="xmlContent" type="application/xml">
<xsl:copy-of select="dcc:digitalCalibrationCertificate"/>
</script>
<!-- Load the production bundle and initialize the app, the xml put in a dummy container and then passed to the js app -->
<script type="module">
<![CDATA[
import { init } from 'https://cdn.jsdelivr.net/npm/dccviewer-js/dist/dccviewer-js.es.js';
const xmlNode = document.getElementById('xmlContent').firstChild;
const xmlStr = new XMLSerializer().serializeToString(xmlNode);
console.log('Serialized XML:', xmlStr);
init(xmlStr, { containerId: 'app', language: 'en' });
]]>
</script>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
<!--rest of dcc -->