Skip to content
A vizualization tool for data generated by the bal framework
JavaScript
Branch: master
Clone or download
Latest commit ce8c3b4 Aug 8, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Initial commit Aug 8, 2019
src Initial commit Aug 8, 2019
.babelrc Initial commit Aug 8, 2019
.gitignore Initial commit Aug 8, 2019
README.md Initial commit Aug 8, 2019
publish.js Initial commit Aug 8, 2019
webpack.config.js Initial commit Aug 8, 2019

README.md

BAL Visualizer

The BAL Visualizer is a tool used to visualize binary data. The visualization file is generated by the BAL framework. The visualization application runs entirely in a browser, no data is uploaded to the network. It is available on the github.io page for this project.

Instructions

The BAL visualizer displays nested binary data. A BAL implementation takes care of unpacking the binary data and transforms it into a tree data structure. The visualizer displays that tree and how each node relates to the original binary data.

When first loading the visualizer, you will be greeted by a menu bar and a sleeping bear. From the menu bar, click the left-most icon to get a file upload prompt. Select the data.json file generated by the HAL VisualizationAnalyzer.

The main interface for the visualizer should be fully loaded now. At the top are the breadcrumbs. It displays the location of the selected node within the tree. On the left, there are 2 panels. The top panel shows the extracted information for the currently selected node. The bottom panel shows the original binary data as hex. The main panel shows a visualization of all the configured leaves in the root node.

There are 2 important concepts to understand the visualizer: The root node and the selected node.

The root node is the node being visualized. The root node dictates the content of the main panel and the hex panel. You can tell what the current root node is by looking at the bread crumbs. It is shown in a black, bold font.

The selected node is the node which information is displayed in the info panel. It is the only node in the breadcrumbs that cannot be clicked. The selected node is highlighted in pink in the main panel and bottom left panel.

The root node can be changed in the following ways:

  • Click any pink link in the breadcrumbs.
  • Double click any rectangle in the visualization panel
  • Double click any byte in the hex panel

The selected node can be changed

  • Click any link the breadcrumbs.
  • Click any rectangle in the visualization panel
  • Click any byte in the hex panel

Setup

If you do not plan on making changes to the visualizer, we strongly suggest using the tool hosted on github.io.

In order to run a local version of the code, you will need to install the npm dependencies, transpile the javascript source code and serve it:

npm install # Install the dependencies
npm run build # Transpile the code.
npm run serve # Serve the file in the `./dist/` directory. 

Head over to http://localhost:5000 to use the visualizer.

You can’t perform that action at this time.