HISE Docs

Content


The Content object contains all methods related to interface design.

Content.makeFrontInterface(600, 500); // creates the user interface

const var Knob1 = Content.getComponent("Knob1"); // Knob reference

Content.addButton("ButtonName", 0, 0) // Adds a button programmatically


Class methods

addAudioWaveform

Adds a audio waveform display. Edit on GitHub 

Content.addAudioWaveform(String audioWaveformName, int x, int y)



addButton

Adds a toggle button to the Content and returns the component index. Edit on GitHub 

Content.addButton(String buttonName, int x, int y)



addComboBox

Adds a comboBox to the Content and returns the component index. Edit on GitHub 

Content.addComboBox(String boxName, int x, int y)



addDynamicContainer

Adds a dynamic container component. Edit on GitHub 

Content.addDynamicContainer(String containerId, int x, int y)



addFloatingTile

Adds a floating layout component. Edit on GitHub 

Content.addFloatingTile(String floatingTileName, int x, int y)



addImage

Adds a image to the script interface. Edit on GitHub 

Content.addImage(String imageName, int x, int y)



addKnob

Adds a knob to the Content and returns the component index. Edit on GitHub 

Content.addKnob(String knobName, int x, int y)



addLabel

Adds a text input label. Edit on GitHub 

Content.addLabel(String label, int x, int y)



addMultipageDialog

Adds a multipage dialog component. Edit on GitHub 

Content.addMultipageDialog(String dialogId, int x, int y)



addPanel

Adds a panel (rectangle with border and gradient). Edit on GitHub 

Content.addPanel(String panelName, int x, int y)



addSliderPack

Adds a slider pack. Edit on GitHub 

Content.addSliderPack(String sliderPackName, int x, int y)



addTable

Adds a table editor to the Content and returns the component index. Edit on GitHub 

Content.addTable(String tableName, int x, int y)



addViewport

Adds a viewport. Edit on GitHub 

Content.addViewport(String viewportName, int x, int y)



addVisualGuide

Creates either a line or rectangle with the given colour.

Content.addVisualGuide(var guideData, var colour)


This function creates visual guide lines or rectangles that appear on the interface (not in the compiled plugin). They are useful for debugging or layout alignments.

It expects two arguments, the first must be an array with either two or four elements and the second must be a colour (it's recommended to use the Colours constants for this).

If the array has two elements, it will add a horizontal or vertical line, depending on which element is non-zero. If the array has four elements it will be a rectangle (with the same format that you pass into eg. Graphics.fillRect() ).

Anything else will cause the visual guides to be cleared, so if you want to delete all lines, just pass in 0 .

Content.addVisualGuide([0, 200], Colours.white);       // adds a horizontal line at 200px
Content.addVisualGuide([100, 0], Colours.red);         // adds a vertical line at 100px
Content.addVisualGuide([10, 10, 100, 50], 0xFF00FF00); // adds a rectangle

Content.addVisualGuide(0, 0);                          // clears all visual guides

The lines will always be rendered on top of all UI elements so that they are always visible.

addWebView

Adds a web view. Edit on GitHub 

Content.addWebView(String webviewName, int x, int y)



callAfterDelay

Calls a function after a delay. This is not accurate and only useful for UI purposes!. Edit on GitHub 

Content.callAfterDelay(int milliSeconds, var function, var thisObject)



componentExists

Checks if the component exists. Edit on GitHub 

Content.componentExists( String name)



createLocalLookAndFeel

Creates a look and feel that you can attach manually to certain components. Edit on GitHub 

Content.createLocalLookAndFeel()



createMarkdownRenderer

Creates a MarkdownRenderer. Edit on GitHub 

Content.createMarkdownRenderer()



createPath

Creates a Path that can be drawn to a ScriptPanel. Edit on GitHub 

Content.createPath()



createScreenshot

Creates a screenshot of the area relative to the content's origin.

Content.createScreenshot(var area, var directory, String name)


This function can be used to create an image from a section of your interface and save it as PNG file. Just pass an array with 4 elements ([x, y, w, h] ), a File object that points to a directory and a relative filename (without the file extension) and it will render the specified area into a PNG image.

// Save the image to C:\Users\UserName\Documents\myimage.png;
Content.createScreenShot([0, 0, 1024 768], 
                         FileSystem.getFolder(FileSystem.Documents), 
                         "myimage");

Be aware that this takes the current zoom factor into account, so if you have a UI Zoom Factor of 200%, the resulting image will be twice the size of the "default" interface dimensions. It will also hide any visual guides that you might have added so they don't clutter your exported image.

Also be aware that if you use OpenGL shaders, they will not be rendered to the image (because they are rendered directly to the screen). However there is a helper function available to enable shaders to be rendered to a screenshot.

createShader

Creates an OpenGL framgent shader.

Content.createShader( String fileName)


If you want to create a ScriptShader , use this method and supply the filename as parameter (see ScriptShader.setFragmentShader() for more information about including shaders).

createSVG

Creates an SVG object from the converted Base64 String. Edit on GitHub 

Content.createSVG( String base64String)



getAllComponents

Returns an array of all components that match the given regex. Edit on GitHub 

Content.getAllComponents(String regex)



getComponent

Returns the reference to the given component. Edit on GitHub 

Content.getComponent(var name)



getComponentUnderDrag

Returns the ID of the component under the mouse. Edit on GitHub 

Content.getComponentUnderDrag()



getComponentUnderMouse

Returns the name of the component that is currently hovered. Edit on GitHub 

Content.getComponentUnderMouse()



getCurrentTooltip

Returns the current tooltip.

Content.getCurrentTooltip()


This can be used to create a custom tooltip implementation if the TooltipPanel does not suit your needs.

This will return the "raw" tooltip (as in the tooltip from the UI element where the mouse is hovering over). For most applications you might want to introduce a custom delay, so that if you move the mouse away from the element, it will "stick" a little bit longer.

This example will display the current tooltip on a label with a delay of a second.

const var t = Engine.createTimerObject();
const var Label1 = Content.getComponent("Label1");
reg isPending = false;

t.setTimerCallback(function()
{
	var tooltip = Content.getCurrentTooltip();
	
	if(tooltip == "")
	{
		// Now the mouse is over a component without a tooltip
	
		if(Label1.get("text") != "" && !isPending)
		{
			// The tooltip label was not empty so we set the isPending flag
			// and reset the internal counter of the timer object
			isPending = true;
			this.resetCounter(); // [1]
		}
		else if (this.getMilliSecondsSinceCounterReset() > 1000)
		{
			// Now a second has passed since [1] without a new tooltip being
			// set, so we clear the label and reset the isPending flag
			isPending = false;
			Label1.set("text", "");
		}
	}
	else
	{
		// We update the label with the new tooltip and
		// clear the isPending flag
		isPending = false;
		Label1.set("text", tooltip);
	}
});

// We don't need it to be super fast, so 100ms should be fine
t.startTimer(100);


getInterfaceSize

Returns an array containing the width and height of the interface. Edit on GitHub 

Content.getInterfaceSize()



getScreenBounds

Returns the total bounds of the main display. Edit on GitHub 

Content.getScreenBounds(bool getTotalArea)



isCtrlDown

Checks whether the CTRL key's flag is set. Edit on GitHub 

Content.isCtrlDown()



isMouseDown

Returns 1 if the left mouse button is clicked somewhere on the interface and 2 if the right button is clicked. Edit on GitHub 

Content.isMouseDown()



makeFrontInterface

Sets this script as main interface with the given size. Edit on GitHub 

Content.makeFrontInterface(int width, int height)



makeFullScreenInterface

Sets this script as main interface with the given device resolution (only works with mobile devices). Edit on GitHub 

Content.makeFullScreenInterface()



refreshDragImage

Calls the paint function of the drag operation again to refresh the image. Edit on GitHub 

Content.refreshDragImage()



restoreAllControlsFromPreset

Restores all controls from a previously saved XML data file. Edit on GitHub 

Content.restoreAllControlsFromPreset( String fileName)



setColour

Sets the colour for the panel. Edit on GitHub 

Content.setColour(int red, int green, int blue)



setContentTooltip

sets the Tooltip that will be shown if the mouse hovers over the script's tab button. Edit on GitHub 

Content.setContentTooltip( String tooltipToShow)



setHeight

Sets the height of the content.

Content.setHeight(int newHeight)


This can now also be called after the onInit callback to change the interface dimensions. And you can attach a broadcaster to be notified when the interface changes its size using Broadcaster.attachToInterfaceSize() .

setKeyPressCallback

Adds a callback that will be performed asynchronously when the key is pressed. Edit on GitHub 

Content.setKeyPressCallback( var keyPress, var keyPressCallback)



setName

Sets the name that will be displayed in big fat Impact. Edit on GitHub 

Content.setName( String newName)



setPropertiesFromJSON

Restore the Component from a JSON object. Edit on GitHub 

Content.setPropertiesFromJSON( String name,  var jsonData)



setSuspendTimerCallback

Sets a callback that will be notified whenever the UI timers are suspended.

Content.setSuspendTimerCallback(var suspendFunction)


HISE automatically detects when there is no interface of your plugin open and automatically suspends all Panel timer callbacks (as well as the deferred MIDI callbacks) in order to save CPU resources. However the timers created with Engine.createTimerObject() will keep running. The rationale behind this difference is that in an usual project you have many panels with timer callbacks but just a few selected dedicated timer objects so the overhead is neglible, but if that is not the case for your project, you can use this method to attach a callback to the suspension event and then start and stop the timers yourself (along with other things that might be required).

The callback you pass in requires a single parameter, which will be true if the plugin is supposed to be suspended (and false if there is at least one plugin interface visible).

During development you cannot close and open plugin interfaces, so there is a new tool function in the interface designer which simulates the suspension process (the moon icon).

Check out the documentation of the Timer class for an example of how to use this method. For complex projects it's highly recommended to attach a broadcaster to this callback slot and then attach all timer objects as listeners at their definition.

setToolbarProperties

Sets the main toolbar properties from a JSON object. Edit on GitHub 

Content.setToolbarProperties( var toolbarProperties)



setUseHighResolutionForPanels

Set this to true to render all script panels with double resolution for retina or rescaling. Edit on GitHub 

Content.setUseHighResolutionForPanels(bool shouldUseDoubleResolution)



setValuePopupData

sets the data for the value popups.

Content.setValuePopupData(var jsonData)


Examples:

Content.setValuePopupData({
    "itemColour":   Colours.forestgreen,    // BG colour TOP
    "itemColour2":  Colours.firebrick, // BG colour BOTTOM
    "bgColour":     Colours.gainsboro,      // In fact the Border colour...
    "borderSize":   6.66,
    "textColour":   Colours.navajowhite,
    "fontSize":     66.6,
    "fontName":     "Comic Sans MS"
});
Content.setValuePopupData({
    "fontName":"Comic Sans MS",
    "fontSize": 14,
    "borderSize": 1,
    "borderRadius": 1,
    "margin":0,
    "bgColour": 0xFF636363,
    "itemColour": 0xFF000000,
    "itemColour2": 0xFF000000,
     "textColour": 0xFF636363 
});


setWidth

Sets the height of the content.

Content.setWidth(int newWidth)


This can now also be called after the onInit callback to change the interface dimensions. And you can attach a broadcaster to be notified when the interface changes its size using Broadcaster.attachToInterfaceSize() .

showModalTextInput

Opens a text input box with the given properties and executes the callback when finished.

Content.showModalTextInput(var properties, var callback)


This function can be used to add a text input label to any component. You can define the appearance of the text box and supply a callback that will be executed when the user dismisses the input box.

The function expects two arguments:

  1. A JSON object with the properties for the textbox
  2. A callable object with two arguments that will be executed when the text input is closed. The first argument will contain the state of the text input: 0 if the input was dismissed by pressing Escape or moving the keyboard focus away and 1 if the user pressed enter to submit the value. The second argument will be the string that the user typed into the box.

Be aware that you will have to convert the string to a number if you want to store it as value. You can use either parseInt() , parseFloat() or Engine.getValueForText() for a custom mode parser (like Frequency or Tempo names).

Note that this text box will appear mutually exclusive, so there will only be a single text input box visible at all times.

The JSON object can have these properties to define the appearance / behaviour of the input box:

Property Type Default Description
parentComponent String none the ID of the UI component that you want to show the editor for.
text String none The text value that will be shown in the editor when its opened.
x, y, width, height int none the dimensions of the text input relative to the parent component. If the area defined by these properties is empty, then the text editor will use a default positioning in the centre of the UI component.
bgColour Colour 0x88000000 The default background colour for the text editor.
itemColour Colour 0 The item colour (currently unused)
textColour Colour 0xAAFFFFFF The default text colour used by the text editor.
alignment String "centred" the alignment of the text editor.
fontName String "Lato" The font name.
fontStyle String "plain" The font styling (bold or italic or plain).
fontSize Number 13.0 The font size.

Example

This example shows how to use this function with a ScriptPanel. Shift clicking on the panel opens the text box and sets the Panel's value.

// Attaches a text input box to the given panel.
inline function make(n)
{
	local p = Content.getComponent(n);
	
	p.set("allowCallbacks", "Clicks Only");
	
	p.setPaintRoutine(function(g)
	{
		g.setColour(Colours.white);
		g.drawText(this.getValue(), this.getLocalBounds(0));
	});
	
	p.setMouseCallback(function(event)
	{
		if(event.clicked && event.shiftDown)
		{
			// Since we want to pass that into the textbox callback as lambda ;
			// we need to store it as local variable before.
			var tp = this;
			
			var textBoxProperties = {
				parentComponent: this.get("id"),
				x: 10,
				y: 10,
				width: 80,
				height: 20,
				bgColour: Colours.red,
				textColour: Colours.black
			};
			
			Content.showModalTextInput(textBoxProperties, function[tp](status, value)
			{
				tp.setValue(parseInt(value));
				tp.changed();
				tp.repaint();
			});
		}
	});
	
	return p;
}

// Call this multiple times. If you click on the second panel while the
// first input box is active you'll see that it works exclusively.
make("Panel1");
make("Panel2");


storeAllControlsAsPreset

Saves all controls that should be saved into a XML data file. Edit on GitHub 

Content.storeAllControlsAsPreset( String fileName,  ValueTree automationData)



Edit on GitHub Next: Date

Christoph Hart
04.06.2019