Core Look and Feel

File: Rhapsodist/Core/Includes/CoreLookAndFeel.js · Namespace: CoreLookAndFeel

Overview

CoreLookAndFeel is included by Core.js which loads Rhapsodist’s bundled fonts and implements the default drawing for every standard component type.

Widgets included with Rhapsodist’s scripts automatically assign the correct look and feel functions from the CoreLookAndFeel namespace.

You can attach these to your custom components too. For example to add CoreLookAndFeel to a knob on your interface would look like this:

const knbFrequency = Content.getComponent("knbFrequency");
knbFrequency.setLocalLookAndFeel(CoreLookAndFeel.knob);

Overrides

Almost every drawing function checks for a matching override in App/LookAndFeel.js first, and only falls back to its own drawing if none is found:

laf.registerFunction("drawPopupMenuItem", function(g, obj)
{
    if (isDefined(LookAndFeel.drawPopupMenuItem))
        return LookAndFeel.drawPopupMenuItem();

    drawPopupMenuItem();
});

This isDefined(LookAndFeel.xxx) pattern is Rhapsodist’s standard look and feel extension mechanism, used throughout Core and the Widgets, not just here. To restyle a component, declare a same-named function inside namespace LookAndFeel in your project’s App/LookAndFeel.js.

Objects and Overrides

Assign one of these to a component with component.setLocalLookAndFeel(CoreLookAndFeel.xxx). Each one draws a specific HISE component type, and checks the listed LookAndFeel.xxx function(s) for an override before using its own default:

LAF Object	Assign to	Overrides
`knob`	rotary `ScriptSlider`	`drawKnob`, `drawBigKnob`, `drawSmallKnob`
`slider`	linear `ScriptSlider`	`drawSlider`, `drawHorizontalSlider`, `drawVerticalSlider`.
`toggleSwitch`	`ScriptButton`	`drawToggleSwitch`
`iconButton`	`ScriptButton` (icon, non-toggling)	`drawIconButton`
`iconButtonToggle`	`ScriptButton` (icon, toggling)	`drawIconToggleButton`
`textButton`	`ScriptButton` (text, non-toggling)	`drawTextButton`, falling back to `drawTextButtonToggle` if that’s the only one defined
`textButtonToggle`	`ScriptButton` (text, toggling)	`drawTextButtonToggle`
`powerButton`	`ScriptButton` (drawn as a power indicator)	`drawPowerButton`
`comboBox`	`ScriptComboBox`	`drawComboBox` for the box itself; its popup uses the shared popup overrides below
`viewport`	`ScriptedViewport`	`drawScrollbar` (shared, see below)
`peakMeter`	`ScriptFloatingTile` hosting the built-in Matrix Peak Meter	`drawMatrixPeakMeter`
`table`	`ScriptTable`	`drawTableBackground`, `drawTablePath`, `drawTablePoint`, `drawTableRuler`
`viewportTable`	`ScriptFloatingTile` hosting a built-in MIDI Learn/Macro panel, or a `ScriptedViewport` used as a data table (e.g. the Automation MPE table)	`drawViewportTableToggleButton`, `drawViewportTableHeaderBackground`, `drawTableHeaderColumn`, `drawTableRowBackground`, `drawTableCell`, `drawTableLinearSlider`, `drawTableScrollbar`, `drawTableComboBox`; its popup uses the shared popup overrides below
`empty`	when you want to draw nothing	none, useful for suppressing default painting

Body

Core.js sets a paint routine on pnlBody and checks LookAndFeel.drawBody for an override, following the standard isDefined(LookAndFeel.xxx) pattern.

Global Look and Feel

Some of elements, such as alert windows, macro tags, and some popup menus require global look and feel instead of local. For these cases CoreLookAndFeel includes a global look and feel object called laf. Overrides are provided.

Popup menus and scrollbars share one override each across every component that shows one, there’s no per-component variant:

drawPopupMenuBackground, drawPopupMenuItem, getIdealPopupMenuItemSize: every popup menu (combo boxes, viewportTable, and HISE’s own alert/macro popups).
drawScrollbar: every scrollbar (viewport, and viewportTable’s own scrollbar, which applies its colours first and then falls through to this).

A handful of overrides apply automatically without assigning anything, since they cover HISE’s own built-in popups and overlays rather than a component you place: drawNumberTag (macro tags), drawAlertWindow, getAlertWindowMarkdownStyleData, drawAlertWindowIcon, drawDialogButton (all for the native alert window), and drawPerformanceLabel.

Style dependency

Colours, fonts, and other properties are read from CoreLookAndFeel.style, populated by StyleHandler before anything else in Core paints.

Keyboard shortcuts