DraggableFilterPanel

Connects to module type: Parametric EQ

Please enter a brief description.

This FloatingTile expands on the FilterDisplay UI element and offers a drag functionality to change the filter parameters directly in the filter graph.

In order to use it connect is to a Parametric EQ or other types in order to display the editable filter curve in the floating tile.

If you want to use it in HISE 5.0+ with other modules than the Parametric EQ, you will need to supply a JSON definition with this function.

Note that this UI element does not store any data so you have to take care of the parameter persistency otherwise - the most obvious option is to use Engine.addModuleStateToUserPreset() which will save the entire module in the user preset.

PathTypes

There are four different path type available that define how the filter response graph is constructed:

You might want to try out different types and see what style fits best.

Example Snippets

There are a few example snippets that demonstrate the usage of this floating tile in combination with different modules:

• Custom Draggable EQ
• Drggable Filter Example
• PathType example

CSS Styling

This element can also be styled using CSS. In order to do so, you can use the following selectors:

Styling the filter path

The filter background including the frequency response graph can be styled exactly like the FilterDisplay using the the .filtergraph class selector. In order to draw the frequency response, you can use the path supplied with the variable var(--filterPath) as background-image property.

Note that if you use the border property to stroke the path, you have to set the box-sizing property to border-box , otherwise the path scaling will be off if you use any margin or padding property.

Styling the filter handles

The .filterHandle class selector styles each filter handle (the thing that you can drag around). There are a few variable values available in case you want to display some text:

If you want to improve the mouse behaviour, these pseudoclasses are available for different states:

/* when hovered. */
.filterHandle:hover {}

/* when the band is inactive. */
.filterHandle:disabled {}

/* when the band is selected. */
.filterHandle:focus {}

/* when the band is being dragged. */
.filterHandle:active {}