HISE Docs

Table

An UI element that can be used to edit a curve.

Special Properties

Property ID Default Value Description
tableIndex 0 the table index (starting with 0) of the table that you want to control. In most cases it will just be zero, but eg. the Table Envelope has two tables (0 = Attack, 1 = Release). It might be possible that you have to rebuild the interface after changing this value to apply the changes.
customColours 0 if true, it will use a flat design with customizable colours, otherwise it will look like the thing above.

The Table UI component is one of the most used complex components throughout HISE and can be used to change the curve of many things:

Each module that uses a table for anything can be referenced as TableProcessor which offers ways of changing the curve by scripting calls.

You can also use it on your compiled plugin with a lot of customization options.

Using the Table

By default, each table has a line that starts at the bottom left and goes all the way to the top right. This is similar to the output function:

y = x

where input equals output. It has at least two points which are tied to the left and right edge of the table. You can click anywhere to create a new point, drag it around and change the curve by hovering over a point and moving the mousewheel. If you right click on a point it will be removed.

If you're inside the main workspace, you need to use Cmd + Mousewheel to prevent accidently changing the curve if you scroll around

Customization

If you want more control over the table please have a look at CustomLAF #Table .

Scripting API

ScriptTable

CSS Styling

You can also use CSS in order to style the table appearance. It uses the following selectors & additional properties:

Stylesheet Example

const var t = Content.addTable("Table1", 10, 10);

t.set("width", 300);
t.set("height", 100);

const var laf = Content.createLocalLookAndFeel();

t.getTableValue(Math.random());


laf.setInlineStyleSheet("

.scripttable
{
	background: #444;
	border-radius: 3px;
	
	
}

.scripttable::before
{
	content: '';
	background-image: var(--tablePath);
	background-color: #aaa;
	box-shadow: inset 0px 2px 4px rgba(0,0,0, 0.5);
}

.tablepoint
{
	background: rgba(255,255,255, 0.5);
	border-radius: 50%;
	margin: 2px;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
}

.tablepoint:hover
{
	background: white;
}

label
{
	background: rgba(255, 255, 255, 0.9);
	color: #222;
	border: 1px solid #aaa;
	padding: 5px;
}

.playhead::before
{
	content: '';
	width: 2px;
	left: calc(calc(var(--playhead) * 100%) - 1px);
	background: white;
	box-shadow: 0px 0px 4px black;
}
");

t.setLocalLookAndFeel(laf);