Helix/HX Stomp preset-snapshot online viewer

I have implemented a Line6 Helix/HX Stomp online preset viewer, is hosted on a free heroku server here: https://sensationnel-gerard-26922.herokuapp.com/# . The app needs javascript to work.

It can display block state and parameter values for each snapshot, the active blocks have a white border and the inactive blocks have a grey border, and the parameters affected by a snapshot are in white text.

Motivation

I have the HX Stomp and I have purchased some presets that make good use of snapshots to have different sounds in the the same preset, this is important in the Stomp beacuse of the limited number of blocks available. I wanted to learn how to make my own presets but I find difficult to visualize the difference between snapshot when it changes a lot of parameters so I decided to implement a visualizer that can display all the parameters at once.

Once I had it working for the Stomp presets I adapted it to visualize the Helix presets, this way I can learn from all the presets avaliable from CustomTone.

How-To Use

To use it simply drag and drop your hlx files or click and select the files you want to visualize:

Click "Upload files":

Click "Finish" or select one preset from the list:

The preset list can be toggled with the = button to the left of  "Presets"

You can add more presets at any moment using the + button to the right of "Presets"

Technical info

The app is developed in javascript using Node.js and Express for the backend and Vue.js for the front end. The preset graphic paths and blocks are drawn in SVG.

The files are uploaded to the server but never written to disk, they are parsed in memory to build a json model ready for display. The .hlx files are json files but the parameters values lack unit information, are in different scales than displayed in the hadware and some are discrete value codes. This values are parsed in the backend and transformed to the correct display values. In the parse process the snapshot information is also transformed and embedded in the display model.