diff --git a/README.md b/README.md
index 920ba3a0456a0aa9153b0dd23bde938a02e7c0cc..75b4aa8bafdd172c2b365a40874d1aad1f589e18 100644
--- a/README.md
+++ b/README.md
@@ -8,31 +8,11 @@ The application parses a DCC XML file, renders administrative data and measureme
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.
+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
-
-
-## 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 file
-```
+https://gitlab1.ptb.de/Seeger/dccviewer-js
## Features
@@ -50,47 +30,16 @@ This code is licensed under LGPL-2.1 since we hope to build a more generic libar
1. **Clone the Repository:**
```bash
- git clone <repository_url>
+ git clone https://gitlab1.ptb.de/Seeger/dccviewer-js
cd dccviewer-js
```
2. **Install Dependencies:**
```bash
- npm install
- ```
-
-## Development
-
-This project uses [Vite](https://vitejs.dev/) for development.
-
-1. **Start the Development Server:**
-
- ```bash
- npm run dev
+ npm install dccviewer-js
```
- This will start the server (usually on `http://localhost:5173/`). The app uses `src/main.js` as its entry point.
-
-2. **View Example:**
-
- For testing purposes, the development version loads a sample XML file from the `data` directory. You can change the XML in `main.js` if needed.
-
-## Building & Packaging
-
-1. **Build for Production:**
-
- ```bash
- npm run build
- ```
-
- This command uses Vite to build a production version of your application. The output is typically placed in a `dist` directory.
-
-2. **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.
-
## 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:
@@ -119,4 +68,55 @@ If you want to use the module in a simple HTML file, you can create an HTML file
```
This example shows how to initialize the app by passing an XML string and configuration options (such as the container ID and language).
-## License
\ No newline at end of file
+
+## Usage in an DCC XLT
+
+this preamble in the DCC-XML enables automatic usage of this js-libary to render the DCC
+```xml
+<?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 -->
+```
\ No newline at end of file
diff --git a/data/sin_acceleration_example_dcc_WithExampleConformatyStatmentXLT.xml b/data/sin_acceleration_example_dcc_WithExampleConformatyStatmentXLT.xml
index c4b2794dd9324ebffedcdd0a1020f25fe0026302..2a9e1a0230b8313574415c1453427a75277edc29 100644
--- a/data/sin_acceleration_example_dcc_WithExampleConformatyStatmentXLT.xml
+++ b/data/sin_acceleration_example_dcc_WithExampleConformatyStatmentXLT.xml
@@ -2,7 +2,7 @@
<?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://gitlab1.ptb.de/digitaldynamicmeasurement/dccanddsischemawithoutdepricatedelements/-/raw/main/dcc.xsd"
+ 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 -->
@@ -20,7 +20,7 @@
<meta charset="UTF-8"/>
<title>DCC Viewer</title>
<!-- Link to production CSS -->
- <link rel="stylesheet" type="text/css" href="http://141.25.102.20:5173/dist/style.css"/>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/dccviewer-js/dist/style.css"/>
</head>
<body>
<div id="app"></div>
@@ -31,7 +31,7 @@
<!-- Load the production bundle and initialize the app -->
<script type="module">
<![CDATA[
- import { init } from 'http://141.25.102.20:5173/dist/dccviewer-js.es.js';
+ 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);
diff --git a/package-lock.json b/package-lock.json
index 5eebfa1b7da8fc64979e8d3da4f1a17bf0c6bc22..6419b97cf4a9efb64a39963bdb0b3b25a45da648 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,16 +1,18 @@
{
- "name": "dccviewertypescript",
+ "name": "dccviewer-js",
"version": "0.1.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
- "name": "dccviewertypescript",
+ "name": "dccviewer-js",
"version": "0.1.0",
"dependencies": {
"dsiunits-js": "^0.9.1",
"events": "^3.3.0",
"jsoneditor": "^9.5.6",
+ "mime": "^4.0.6",
+ "mime-types": "^2.1.35",
"plotly.js-dist": "^2.18.2",
"xml2js": "^0.4.23"
},
@@ -5237,11 +5239,25 @@
"node": ">=8.6"
}
},
+ "node_modules/mime": {
+ "version": "4.0.6",
+ "resolved": "https://registry.npmjs.org/mime/-/mime-4.0.6.tgz",
+ "integrity": "sha512-4rGt7rvQHBbaSOF9POGkk1ocRP16Md1x36Xma8sz8h8/vfCUI2OtEIeCqe4Ofes853x4xDoPiFLIT47J5fI/7A==",
+ "funding": [
+ "https://github.com/sponsors/broofa"
+ ],
+ "license": "MIT",
+ "bin": {
+ "mime": "bin/cli.js"
+ },
+ "engines": {
+ "node": ">=16"
+ }
+ },
"node_modules/mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.6"
@@ -5251,7 +5267,6 @@
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
- "dev": true,
"license": "MIT",
"dependencies": {
"mime-db": "1.52.0"
diff --git a/package.json b/package.json
index 55673868eb83376690a6f829cc0f6b9284f37bf2..5f12e85c11112b65be200e107a3eca9b18675aa2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "dccviewer-js",
- "version": "0.1.0",
+ "version": "0.1.1",
"description": "A JS application for displaying digital calibration certificates.",
"main": "dist/dccviewer-js.bundle.js",
"files": [
@@ -34,7 +34,9 @@
"identity-obj-proxy": "^3.0.0",
"jest": "^29.0.0",
"jest-environment-jsdom": "^29.7.0",
- "vite": "^4.5.9"
+ "vite": "^4.5.9",
+ "mime": "^4.0.6",
+ "mime-types": "^2.1.35"
},
"babel": {
"presets": [
diff --git a/src/app.js b/src/app.js
index c803821c4fcc730a3b38e1c92b613a1c2e3fb3be..9c8c14d0785e7969067a58e69559b205fb91e5dd 100644
--- a/src/app.js
+++ b/src/app.js
@@ -15,7 +15,7 @@ export function init(xmlStr, options = {}) {
console.error('No container found with id', containerId);
return;
}
- appContainer.innerHTML = '';
+ appContainer.innerHTML = '<div id="disclaimer" style="background:orangered; color:#000; padding:8px; margin-bottom:10px; font-family: sans-serif; font-weight:bold;">This is a proof of concept and contains missing fields and errors. It is not for production use.</div>';
// Parse the XML string first
const cleanXmlStr = xmlStr.trim();
diff --git a/vite.config.js b/vite.config.js
index 82a6b4ce048975e4c6202310028a4454d664961a..e1adac72f87dc459f5c77cc75712c60ce5b5cbaf 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -2,7 +2,17 @@ import { defineConfig } from 'vite';
export default defineConfig({
server: {
- cors: true
+ cors: true,
+ configureServer(server) {
+ server.middlewares.use((req, res, next) => {
+ if (req.url && req.url.startsWith('/data/')) {
+ // Use mime-types to get the proper Content-Type
+ const type = mime.lookup(req.url) || 'application/xml';
+ res.setHeader('Content-Type', type);
+ }
+ next();
+ });
+ }
},
resolve: {
alias: {