Weird Constructor / Posts / HexoSynth 2022 - Devlog #2 - New GUI Skeleton And Implementation

HexoSynth 2022 - Devlog #2 - New GUI Skeleton And Implementation

The HexoSynth modular synthesizer (programmed in Rust) got a new GUI skeleton this week.

The last days were packed with progress on HexoSynth. I will quickly go over the changes and where I did them. Feel free to skip to the pictures and videos to get an idea of the progress in the recent 10 days.

Feel also free to just skip ahead and read the conclusion at the end.

Work on the HexoTK Library and Preparation of HexoSynth

  • 2022-06-15:

    • HexoSynth: Extended the WLambda API - Pass the mouse button to the click callback.
    • HexoSynth: The hexagonal DSP node matrix is back! Finally added it back to the GUI and WLambda. Also the mouse callbacks are working again.
    • HexoSynth: WLambda API has now access to the widget layout.
    • HexoTK: Fixed minor bugs in the HexKnob widget.
    • Unfortunately no pictures :-)
  • 2022-06-16:

    • HexoTK: Prototyped a little mechanic called FrameScripts for automated testing of the GUI. Will come back to this once there is more stable functionality in HexoSynth, that is worth being tested.
    • HexoTK: For the automated testing I implemented collection of painted text label information, like position and a tag what part this piece of text belongs to:
      HexoTK - Recorded text label information for automated testing
      HexoTK - Recorded text label information for automated testing
    • HexoTK: Implemented proof of concept TestDriver API for automated testing.
    • HexoTK: The rectangle borders were quite boring, so I added more border styles such as the BorderStyle::Hex and BorderStyle::Bevel.
  • 2022-06-17:

    • HexoTK: Fixed a bug in the text entry widget control, where it would get into an endless loop while drawing.
    • HexoTK: Implemented Drag & Drop handling. Tracking the drag & drop state works now. Also rendering a drag marker widget at the mouse position works fine. The user data is queried from the "drag" event callback and the successful drop is handled by an event callback of the target. Also the widget that is used for dragging can be assigned to the widget that allows dragging.
      HexoTK - Added Drag & Drop handling
  • 2022-06-18:

    • HexoTK: Added hover callback. I want to display help text directly when a user hovers a widget in HexoSynth. This hover tracking is going to help exactly with that.
    • HexoTK: Added popup widgets and their auto hide functionality. This is going to be an important building block for lots of GUI features in HexoSynth later. Such as connecting nodes, which is going to be done in popups.
      HexoTK - Popups and Auto hiding
      HexoTK - Popups and Auto hiding
      HExoTK - Demonstration of popups

HexoSynth GUI Mockups and Implementation

  • 2022-06-19:

    • HexoTK: Fixing some issues with drawing widget borders and the offsets with padding.
    • HexoSynth: Created some mockups for the GUI design.
      HexoSynth - GUI mockup with too many things visible at once
      HexoSynth - GUI mockup with too many things visible at once
      HexoSynth - GUI mockup with the minimal visible GUI panels
      HexoSynth - GUI mockup with the minimal visible GUI panels
      HexoSynth - More or less final GUI mockup that combines the earlier approaches.
      HexoSynth - More or less final GUI mockup that combines the earlier approaches.
    • HexoSynth: Started implementing the skeleton of the new GUI, with a sliding panel for node selection and a right side panel for displaying a more node specific GUI, like a sample selector or pattern editor.
      HexoSynth - Demonstration of the GUI skeleton
  • 2022-06-20:

    • WLambda: Added TOML reading/writing for a DSP chain preset feature I'm planning for HexoSynth. It will be used for reading those presets from a compiled in list of useful DSP chains and from $HOME/.hexosynth_chains.toml.
      WLambda - Work on a TOML reader/writer for user configuration of HexoSynth
      WLambda - Work on a TOML reader/writer for user configuration of HexoSynth
  • 2022-06-21:

    • HexoSynth: I worked on the node picker panel. Just a quick and ugly demo of the unrefined layout of the buttons:
      HexoSynth - DSP node picker rough prototype
  • 2022-06-22:

    • HexoSynth: Finished the node picker, it's now possible to instanciate new DSP nodes by dragging them from the picker panel.
      HexoSynth - DSP node picker drag & drop demonstration

HexoSynth - First GUI Functionality

  • 2022-06-23:

    • HexoTK: Ported the connector widget from the old tuix code base to HexoTK.
      HexoTK - Port of the connector widget
    • HexoSynth: Factored out the styling from the application code in WLambda.
      HexoSynth - Refactored styling and layout for widgets
      HexoSynth - Refactored styling and layout for widgets
    • HexoSynth: The parameter panel on the left now finally is filled with knobs. They are even already functional, because their model is directly married with the DSP node matrix.
      HexoSynth - Input parameters/ports are listed now.
      HexoSynth - Input parameters/ports are listed now.
  • 2022-06-24:

    • HexoSynth: Integrated the popup and connector widget into the WLambda API and made a little test button to use it:
      HexoSynth - Integration of the popup and connector widget into the WLambda API

Devlog 2 Conclusion

This concludes the second dev log. As you have seen and read there were a lot of boring little things to do. And I worked a lot on the foundation of everything. The core of the GUI is now implemented in my scripting language WLambda. This allows for very quick prototyping. I take care to refactor it's code structure while I extend the implementation with new features.

My immediate goal is, to get back the fundamental audio graph editing capabilities of the previous version from 2021. Once those more fun basics work, I can also make videos with sound that are more interesting to watch. It's also more fun to work on HexoSynth if I can play around with it. That is way more motivating. The immediate next steps I have in mind are:

  • Add connection editing of node connections in the DSP matrix.
  • Add back atomic parameters to the parameter panel, and not just those knobs.
  • Implement more graph editing mouse gestures to the DSP matrix.
  • Show input/output signal graphs of the selected DSP node.
  • Add a "save" button that writes the initial patch to init.hxy.

Once all that works, I will focus on more of the detail work:

  • Display help texts from HexoDSP when hovering corresponding GUI widgets.
  • Reimplement the in depth DSP node documentation with texts in HexoDSP.
  • Add back the visual feedback widget for envelopes, LFOs and other things in the parameter panel.
  • Add back editing CV widgets.
  • Bring back the pattern sequencer editor.
  • Implement a basic sample browser to load samples in the Sampl node.

I might work on all these things not necessarily in this order. Sometimes I might skip ahead or work on more details as I see fit.

Contact

In case you find this project interesting or have questions, you can reach me via Discord these days, check out the #hexosynth channel in the Rust Audio Discord. Optionally I'm also online on IRC (via Matrix) in the Linux Audio Developer channel #lad on Libera.Chat: irc:#lad@irc.libera.chat.

Links

Weird Constructor Avatar
Weird Constructor

Nice end 30 y/o guy, geek and F(L)OSS developer that messes with: Linux, Windows, Networking, Interpreters/Compilers, Games, Audio, Music, GUIs, C/C++, Rust, Scheme/Lisp, 3D printing, electronics and more.


For updates follow me on Mastodon

All the F(L)OSS development on my projects happens in my spare time. If you find what I do useful, entertaining or just want to support me, you can do this via Liberapay:

Donate using Liberapay