Skip to content

Screen UI

finnTE edited this page Oct 19, 2018 · 15 revisions

You can design custom graphical user interfaces for your MIDI gear. Let's make a basic fader control. For this to make sense you need to connect a device with both MIDI output and MIDI input such as the OP-Z.

Draw a meter

  1. Add an Image to your scene (GameObject > UI > Image), name it "Fader". Edit the size and color to fit your scene.
  2. Duplicate the Fader object and name it "Fill". Change the color to something different from the Fader.
  3. Add a Rect Mask to the Fader.
  4. Move the Fill object so it is just below the Fader.

Fader

Show a knob value

Add a Klak patch to your scene (GameObject > Klak > Patch). Open the patcher and wire the following patch:

Fader Input

Make sure you match the Base Vector Y value to the height of your Fader. Assign the Fill object to the Target Transform property on your Transform Out node.

Now set your Knob Input node Knob Number to whatever MIDI CC you want to monitor. Press play and watch as your fader tracks your MIDI controller.

Control a knob

Now add a few more nodes like this:

Fader Output

Assign your Fader object to the Trigger Rect property on the Drag Event Input node. Make sure Relative is unchecked and that Range matches the height of your Fader.

Now set the Knob Out node Knob Number to match the Knob Input node. Press play and marvel at your new MIDI controller.