In our previous article we discussed the process of calling XML functions in C++ to write data produced by particle simulations in XML format files. These output files can then be viewed in powerful tools such as VisIt or Paraview.
Modern browsers have become powerful in recent years and can now render 3D graphics quite efficiently. The next few blog posts will discuss our experience in developing a basic user interface with standard web tools to visualize simulation output data. In this article, I will explain how the input process would work in such a tool.
The VTK XML particle data format
Output data from our simulations are written to disk every few timesteps. At each timestep, we get a data file like the one listed below.
For now, let us consider only data that have been written in ASCII format.
Reading the particle XML data
We will read in this data into a code that provides a user interface to visualize the particle data.
For now, the details of the user interface are not important, but it is worth noting the following :
it uses the Vue framework for user interactions and Vuex for data management
Typescript type definitions are from npm and av-ts
the code is transpiled to ES6 using tsc and babel, and
packaged using webpack before it is run on a browser
First let us examine the actual reader code:
The convertTo1DArray method has the form
Note that we have not saved the time in this simplified version. The JSON representation of the saved data is of the form
Asynchronous IO and reading the file
The previous section assumes that a file has been read in and parsed using parseXML. Let us now see how the file is actually read from disk. We will assume that a File object is available and has been obtained using the <input> tag in the HTML document. The FileReader feature of HTML5 makes it possible to read files easily from disk without using the fs library from node.js.
The HTML input tag inside the appropriate Vue template has the form
The readVTKXMLParticleFile function is called after a file has been selected from the list of files.
The actual asynchronous read is defined in readXMLFile:
Once the data have been stored, we can start the process of visualization. Future articles will discuss our experience with vtk.js and three.js. We will also discuss the potential and pitfalls of Typescript and Vue.
If you have questions/comments/corrections, please contact banerjee at parresianz dot com dot zen (without the dot zen).