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.