Interface Designer

The Interface Designer is split in three parts:

The Canvas , a WYSIWYG editor for your plugins GUI.
The Component List which is a value-tree representation of all the UI Components that have been added to the Canvas.
The Property Editor , with which you can change the properties of each UI Component, on the fly.

Canvas

The Canvas shows your plugins Graphical User Interface if you connect an Interface ScriptProcessor to it. (If you don't see anything yet, create a new User Interface by clicking the house symbol in the top-bar.)

With the Pen/Lock symbol in the Toolbar you can toggle between the Edit and Play -Mode. In Edit Mode you can right-click on the interface to create new UI Components and edit their properties in the Property Editor.

When you lock down the interface into Play Mode you can use the UI Components as in a compiled plugin.

The Toolbar features convenient helpers, like a zoom selector, undo/redo functions and automatic positioners.

Icon	Shortcut	Name	Description
		Zoom Fit	Sets the zoom factor so that the entire interface is displayed.
	`F4`	Edit	Toggles the canvas between play mode(where you can actually use the Components) and edit mode where you can edit them and drag them around.
	`F4`	Editoff	Toggles the canvas between play mode(where you can actually use the Components) and edit mode where you can edit them and drag them around.
		Lock	You can lock the current component selection so that it will not be included when you drag the lasso for selecting components. This is helpful for background panels, etc. which you don't want to select but their child elements.
		Move	Enabling this will prevent the mouse dragging of selected elements to move their position. This avoids screwing up your interface layout accidentally.
	`escape`	Cancel	Deselects all items
	`ctrl + Z`	Undo	Undo the last property change. This is using the global undo manager, so it also undoes drag operations in the Component List or property changes in the Property Editor.
	`ctrl + Y`	Redo	Same as undo says Captain Obvious.
	`ctrl + F5`	Rebuild	Refreshes the UI model.
		Learn	This enables the connection learn mode. Click this to enable the learn mode for the current selection, then move any other knob or UI element of another processor (or a meta parameter of a DSP network). It will then assign the processor connection and update the range of the Knob to match the target.
		Vertical Align	Align the selection vertically on the left edge.
		Horizontal Align	Align the selection horizontally on the top edge.
		Vertical Distribute	Distribute the selection vertically with equal space.
		Horizontal Distribute	Distribute the selection horizontally with equal space.
	`J`	Edit Json	This will open a popup with the JSON properties of the currently selected elements. It allows you to manually change the properties and do batch processing. Note that this is a very risky operation so it's possible to mess up the entire component tree so proceed with caution!
		Debug Css	If enabled you can hover over an element that has a CSS stylesheet attached to inspect the CSS properties (and variables) that are applied to the component.
		Suspend	This simulates the suspension of the UI timers just as if the user would close your plugin window. You can use this to check if any vital functionality is depending on the UI timers being active.

Behind the scenes, HISE uses a layer called ScriptComponent that wraps around the data model for each control. It stores a reference to the data and communicates between the actual GUI you see and the script / UI model in the backend. However, in some cases these connections may break and you'll wind up with a somewhat broken interface. This can easily be fixed by deleting all those wrappers and create them new from the UI model. You can do that with the Rebuild Button . If you only rebuild the interface, your ScriptProcessor script will not automatically be recompiled, so in order to make a full reset, you need to rebuild the interface first, and then recompile your script.

Select and position UI Components

You can select components by clicking on them or dragging a lasso around many, for multiple selection. While holding the Command/Ctrl key you can add and delete components from the selection. To deselect all components, press the Escape key .

You can move the selected Components with Mouse Dragging or the Arrow Keys on your keyboard. The Modifier Keys change their effect depending on each method:

Modifier Key	Arrows Keys	Mouse Dragging
Cmd / Ctrl	Move the component in a 10px grid	10px grid
Shift	Change the width/height of the component	Restrict the movement to horizontal / vertical
Alt	-	Duplicates the selected component

You have to start a Mouse drag before the Modifier Keys take effect.

You can combine Modifier Keys. Shift + Cmd + Right-Key will increase the selections component width by 10 pixels.

Component List

The Component List shows a list of all UI Components that have been added to the Interface. You can add new components in here, too.

The Z-order of the components starts on the top (background) and advances to the bottom (front).

You can group components into each other. Create a Panel or a Viewport and add or drag other components beneath them in the Component List. This will group components together, which makes it easy to implement page-like logic for complex projects.

The little green/red dot indicates if an UIComponent has its saveinPreset -property set to true or false. Learn more about this in the User Presets chapter.

Property Editor

The Property Editor displays a list of all available properties of a selected component. All UI Components have the same core properties like ID and Component Size , but they may vary widely in their additional properties, depending on their specific use. Have a look at Plugin Components for a list of all Common-, and Component Specific properties .

When you select multiple components, the property change will affect all selected components. If the selection has varying property values, it will show an asterisk, indicating that you are editing multiple values.

Set the ID

The textbox in the top row is used to change the ID of the component.

Bear in mind that the ID is ridiculously important for further processing - preset restoring, script referencing, resolving the UI parent hierarchy etc. - Try to pick a name once and stick to it because changing the ID later on will become more and more unpleasant over time.

Copying selected properties as JSON

On the top-right of the Property Editor you can find two litte icons for copy & pasting properties with a JSON dump. With this functionality you can transfer multiple property values to other UI Components without hustle.

Select a component and set its properties to your needs.
Click on the property name to select it. You'll notice that it lights up. Use the usual modifier keys (Ctrl/Shift) to select multiple properties.
Hit the Copy Button to create a JSON dump in your clipboard containing all selected properties including their values.
Select all components that you want to paste the property selection to.
Click on the Paste button to apply the property values for the entire selection.

If you still have older HISE projects or are interested in the History of the Interface Designer, please have a look at this link that explains the transition to the current Interface Designer concept.

Edit on GitHub Next: The Code editor