DTVF v2.0.0

This page is a work in progress.

Introduction

A central framework for Digital Twin Visualisations (the Digital Twin Visualisation Framework, or DTVF) has been created so that in most cases, the process of creating a new visualisation to display pre-generated data is as simple as possible. The goal is that a developer that is inexperienced with Typescript (or the Javascript libraries we're using) can get a reasonable visualisation of the data by simply ensuring the data meets a set format and providing some basic metadata files.

This directory houses the Typescript, CSS, and HTML files that make up the framework along with some configuration files to make them available for deployment/hosting. When creating visualisations, the hosted version of this framework should be used; files from this directory should not be copied into/directly linked to visualisation implementations.

The most recent, hosted version of the framework is located at the following URLs:

https://kg.cmclinnovations.com/cdn/dtvf/2.0.0/dtvf.min.js
https://kg.cmclinnovations.com/cdn/dtvf/2.0.0/dtvf.min.css

For an example implementation of the framework, see the example-visualisation directory of the repository.

Expected Data Format

The DTVF can detect and plot data automatically provided that the data meets a set structure. Read the DTVF Data v2.0.0 page for a breakdown of the supported data structure.

To see a sample set of data, view the GeoJSON files commited as part of the example visualisation (see above).

Development

A number of configuration files are also present that allow the generation of a Docker container that can be used as a live development environment. The container houses TypeScript and Grunt installations. These can be used for active development, compile-time checks/linting, or generation of deployable files.

To spin up the container and use it as a development environment via VSCode...

• Run the docker-compose up dtvf-devel command from within this directory.
• Select the Remote Explorer menu within VSCode.
  • You many need to install the Docker extension if you haven't done so already.
• Select the Attach to Container button for the dtvf-devel container.
• Once a new VSCode window appears (and the loading completes), you can now open a file/folder within the container and begin development.
• The entire library directory has been set up to share between your local machine and the container. This means that any changes you make within the container, will persist to your local filesystem.

Deployment

To make the DTVF ready for deployment...

• Ensure the GruntFile.js script contains the correct configuration (if adding new files to the library, this may need to be updated).
• Run the docker-compose up dtvf-build command from within this directory.
• The container will compile and process the typescript files for deployment, then shutdown.
  • If successful, single JS and CSS files will be generated within the output directory.
  • These can then be uploaded to a web server to make them publicly available.
    • To upload these to the KG website server, please contact the support team at CMCL Innovations.

Creating a new visualisation

To create a new visualisation using the DTVF, developers first need to ensure that the data they intend to visualise meets the correct format. If it does not, then the developer will not be able to use the framework.

An example of an index.html file is provided in the example-visualisation directory. A copy of this file (and it's docker configuration) can be taken to produce the basis for a new visualisation. The template index.html is also commented to show the exact areas in which customisation options can be changed. Adjusting any of the HTML or JavaScript code outside of these commented areas is unadvised.

The base endpoint of data stacks will need to be specified within the index.html file before any data can be visualised. If local data is being used rather than a remote stack, then the directory containing the data and configuration files will need to be hosted within the visualisation container and the endpoints updated to its location relative to localhost.