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)



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)



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);


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. Edit on GitHub 

Content.showModalTextInput(var properties, var callback)



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