$0.00 0

YOUR CART
Checkout

SUBTOTAL
DISCOUNT
TOTAL
Checkout
Creating a unique and responsive custom GUI in Reaktor is an important part of making an...

Creating a unique and responsive custom GUI in Reaktor is an important part of making an immediate impression on your users. In this series, I’ll go over a variety of ways we can improve upon Reaktor’s default knobs, in order to create a better user experience.

CREATING CUSTOM SKINS

The easiest way to make your work stand out is to create your own custom UI elements – the default Reaktor knobs are pretty boring and generic.

[aside title = “Pro Tip”]Use Knobman to create custom GUI elements[/aside]

Unfortunately, Reaktor does not come with a tool to help you design your own controls. However, there is a wonderful free program designed specifically for the creation of custom GUI elements called Knobman, which you can download here.

A tutorial on Knobman is beyond the scope of this article (and this website), but you can find a simple intro here. It’s pretty simple to get the basics.

Once you have a new skin, you can make a knob use that picture in the VIEW tab of the properties:

Custom GUI in Reaktor, Part I - ADSR

This brings up a window where you can specify the height, width, and number of animations in the knob:

Custom GUI in Reaktor, Part I - ADSR

Once a skin has been loaded into an ensemble, you can also select it directly from the Skin Bitmap menu, saving the step of specifying the height, etc.

PLAN AHEAD!

An important thing to consider about your GUI is that often you want to be planning pretty far ahead. For instance, if you want your knobs to behave in a specific way that requires a little extra programming, you’ll probably want to design a knob macro before getting too deep into the project. This saves you the effort of having to replace each knob manually later on.

Even if you are simply going to design a skin for your knobs, you can save yourself a lot of time this way. Imagine you have a synth with 40 or 50 knobs. If you wait until the end of the building process to skin your knobs, you’ll have to change the bitmap for each knob individually!

In contrast, if you create a placeholder skin early on, you can create a knob using that skin. Then create any other knobs by duplicating a knob with the placeholder skin. At the end of the project, you can refine your skin. Then, by selecting the ‘Picture Properties’ option in the Skin Bitmap menu in properties,

Custom GUI in Reaktor, Part I - ADSR

you can change the look of all knobs in your project at once! This is really very helpful when you want to tweak a knob’s skin without reloading the graphic dozens of times.

EXPANDING FUNCTIONALITY

By default, Reaktor’s knobs only respond to left clicks on the mouse, and events are only sent when a knob’s value is changed. This works fine in many instances, but other times it leaves something to be desired.

For example, I like to create custom knobs with no numeric display attached. I find that the displays take up space and often display information that is quite useless to the user. An attack knob for an envelope, for instance, displays little of use to the user, unless that user is versed in translating from the logarithmic scale into milliseconds.

So, instead of displaying the value of each knob directly below the knob graphic, I like to use a single numeric display that only shows the most recently used knob. In a sense, this is simple – you can simply merge together all of the values from knobs in the ensemble, and the most recently sent value will be displayed:

Custom GUI in Reaktor, Part I - ADSR

The problem is that, as I mentioned above, knobs only send events when their value changes. Therefore, simply clicking on a knob will not be enough to display it’s value in this setup, the user will actually have to change the value in order to see it. This is clearly not optimal behavior.

A trick I like to use to expand the functionality of the Knob module is to layer a Mouse Area directly over the knob itself. In this picture, I’ve turned down the transparency on the mouse area so you can see what I mean:

Custom GUI in Reaktor, Part I - ADSR

Make sure the knob and the Mouse Area are about the same size. For default Reaktor knobs, I use a height and width of 40.

As long as the knob is in the same macro as the Mouse Area, whenever you click on the knob in the panel, the Mouse Area will receive the data instead. So, you must use the Mouse Area to control the knob, which can be very easily achieved using an IC Send module. Connect the IC send to the knob using the CONNECT tab of the properties.

Custom GUI in Reaktor, Part I - ADSR

An important part of this structure is that you must set the ‘Incremental Mouse Mode’ to be on in the properties of the Mouse Area.

In the above picture, the Mouse Area controls the knob whenever the left mouse button is active. We can easily extend this structure so that a new mouse button also reads out the knob value, sending it to be displayed regardless of whether the knob value changes or not:

Custom GUI in Reaktor, Part I - ADSR

And we can merge the outputs of these macros together to be displayed:

Custom GUI in Reaktor, Part I - ADSR

Another advantage of this setup is that we can use the right and center mouse buttons for other purposes, such as setting up modulation routing for that specific knob.

In this section, we see very clearly the reason for planning ahead and deciding upon the functionality you want for your GUI before you get too deep into building – obviously replacing every knob in a large ensemble with one of these macros is a huge pain that can easily be avoided by careful planning.

CONCLUSION

We have just scratched the surface of this topic – creating a good GUI is on of the harder things to do in Reaktor, requiring a great deal of patience and planning, as well as a solid understanding of the Panel modules. There is much more we could cover on this topic, please let me know if you are interested!

RELATED COURSES

Building in Reaktor for Beginners

ADSR Courses

Add to cart

Sequencer Modules in Reaktor

ADSR Courses

Add to cart

FFT (Fast Fourier Transform) with Reaktor

ADSR Courses

Add to cart

Reaktor Core Masterclass

ADSR Courses

Add to cart
Waveform Loaded
Waveform Played
×
PLAYLIST
Clear all
WISHLISTS
Create an account to use wishlists
×
SAVE TUTORIALS
Create an account to save tutorials
×
FOLLOW YOUR FAVORITES
Follow your favourite labels, formats and genre's and ADSR will show what's new in those on your next visit.
×
  • Create product wishlist
  • Save your favorite tutorials
  • Regular discounts and exclusives
  • Never miss a sound! Follow your favorite labels.
Sign up to My ADSR to ensure you're ahead of the pack. Save your favorite content and be notified of new content. You'll never miss a thing!
Create your account now!
CREATE ACCOUNT
Sign up to My ADSR to ensure you're ahead of the pack. Save your favorite content and be notified of new content. You'll never miss a thing!
  • Get 7 days all ADSR courses free
  • Create product wishlist
  • Save your favorite tutorials
  • Regular discounts and exclusives
Create your account now!
SIGN IN
adsrsounds.com login Video streaming login
Remember me
Forgot your password?
DON'T HAVE AN ADSR ACCOUNT?
Create your account
FORGOT PASSWORD

Send info
  1. Enter your email address
  2. Click "Send info"
  3. Check your inbox for an activation link
  4. Visit activation link and enter set new password
Sign in
DON'T HAVE AN ADSR ACCOUNT?
Create your account