window

namespace

js/foo_uie_jsplitter.js:2589

Functions for working with the current JSplitter panel and accessing it's properties.

property

DPI

js/foo_uie_jsplitter.js:2606

DPI: number

Window DPI. This value never changes while foobar2000 is running. If you change DPI settings, you must restart the application.

property

DrawMode

js/foo_uie_jsplitter.js:2662

DrawMode: number = 0

Current graphics rendering mode.
0 (default) - GDI+
1 - Direct2D
IMPORTANT: After switching the rendering mode, all drawing objects created for the other mode will be unavailable for use in the current mode.
Therefore, the developer should create all drawing objects only after changing the mode.
Ideally, the mode change should be made in the VERY first line of the main script to avoid accidentally creating objects of the wrong type.
Also, calling any of d2d.* methods for creating objects like fonts, bitmaps or effects, will cause a script crash until the DrawMode is set to 1 at least once (in this case, the resources required for D2D operation are initialized).

property

EraseOnRepaint

js/foo_uie_jsplitter.js:2614

EraseOnRepaint: boolean = true

Set whether the JSplitter panel should be cleared with background color before raising on_paint callback.
Default value: true.

Example

"use strict";
window.DrawMode = 0;
window.EraseOnRepaint = false;

let ww = 0;
let wh = 0;

const alphabet = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッンABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%&*';
const fontSize = 16;
const font = gdi.Font("Consolas", fontSize, 1);
const drops = [];

function on_size(width, height) {
    ww = width;
    wh = height;
    if(ww > 0 && wh > 0) {
        const columns = Math.floor(ww / fontSize);
        drops.length = columns;
        for (let i = 0; i < columns; i++) if (isNaN(drops[i])) drops[i] = 0;
    }
}

function on_paint(gr) {
    gr.FillSolidRect(0, 0, ww, wh, 0x0D000000);

    for (let i = 0; i < drops.length; i++) {
    const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));
    const x = i * fontSize;
    const y = drops[i] * fontSize;

    gr.GdiDrawText(text, font, 0xFF00FF00, x, y, fontSize, fontSize * 4 / 3);

    if (y > wh && Math.random() > 0.975)
        drops[i] = 0;
    else
        drops[i]++;
    }	
}

window.SetInterval(() => { window.Repaint(); }, 50);

property

FoobarWindowHeight

js/foo_uie_jsplitter.js:3265

FoobarWindowHeight: number = 0

Change height of main foobar2000 window

property

FoobarWindowWidth

js/foo_uie_jsplitter.js:3258

FoobarWindowWidth: number = 0

Change width of main foobar2000 window

property

FoobarWindowX

js/foo_uie_jsplitter.js:3244

FoobarWindowX: number = 0

Change X position of main foobar2000 window

property

FoobarWindowY

js/foo_uie_jsplitter.js:3251

FoobarWindowY: number = 0

Change Y position of main foobar2000 window

property

HandOnButtons

js/foo_uie_jsplitter.js:3216

HandOnButtons: boolean = false

Switches the mouse cursor for all buttons either to the hand or to the arrow. This property also affects all subsequently created buttons. This property can be changed individually for each button (see ButtonObject class).

propertyreadonly

Height

js/foo_uie_jsplitter.js:2728

Height: number

propertyreadonly

ID

js/foo_uie_jsplitter.js:2674

ID: number

Window handle

propertyreadonly

InstanceType

js/foo_uie_jsplitter.js:2682

InstanceType: number

You need this to determine which GetFontXXX and GetColourXXX methods to use, assuming you want to support both interfaces.
See UIInstanceType
0 - if using Columns UI
1 - if using default UI.

propertyreadonly

IsTransparent

js/foo_uie_jsplitter.js:2693

IsTransparent: boolean

Only useful within Panel Stack Splitter (Columns UI component)
Depends on setting inside Spider Monkey Panel Configuration window. You generally use it to determine whether or not to draw a background.

propertyreadonly

IsVisible

js/foo_uie_jsplitter.js:2703

IsVisible: boolean

propertyreadonly

JsMemoryStats

js/foo_uie_jsplitter.js:2720

JsMemoryStats: JsMemoryStats

Get memory statistics for JavaScript engine.

property

MaxHeight

js/foo_uie_jsplitter.js:2734

MaxHeight: number

window.MaxHeight, window.MaxWidth, window.MinHeight and window.MinWidth can be used to lock the panel size.
Do not use if panels are contained within Panel Stack Splitter (Columns UI component) or JSplitter itself

property

MaxWidth

js/foo_uie_jsplitter.js:2742

MaxWidth: number

See window.MaxHeight.

propertyreadonlydeprecated

MemoryLimit

js/foo_uie_jsplitter.js:2749

MemoryLimit: number

Deprecated.

Maximum allowed memory usage for the component (in bytes).
If the total memory usage exceeds this value, all panels will fail with OOM error.

Deprecated: use window.JsMemoryStats.TotalMemoryLimit instead.

property

MinHeight

js/foo_uie_jsplitter.js:2762

MinHeight: number

See window.MaxHeight.

property

MinWidth

js/foo_uie_jsplitter.js:2769

MinWidth: number

See window.MaxHeight.

propertyreadonly

Name

js/foo_uie_jsplitter.js:2776

Name: string

Returns the panel name set in window.ShowConfigureV2.

propertyreadonlydeprecated

PanelMemoryUsage

js/foo_uie_jsplitter.js:2784

PanelMemoryUsage: number

Deprecated.

Memory usage of the current panel (in bytes).

Deprecated: use JsMemoryStats.MemoryUsage instead.

propertyreadonly

ScriptInfo

js/foo_uie_jsplitter.js:2807

ScriptInfo: ScriptInfo

Information about the panel script.

propertyreadonly

Tooltip

js/foo_uie_jsplitter.js:2815

Tooltip: FbTooltip

Get associated tooltip object.

propertyreadonlydeprecated

TotalMemoryUsage

js/foo_uie_jsplitter.js:2823

TotalMemoryUsage: number

Deprecated.

Total memory usage of all panels (in bytes).

Deprecated: use window.JsMemoryStats.TotalMemoryUsage instead.

property

TrackMouseEnterLeaveOnPanels

js/foo_uie_jsplitter.js:3225

TrackMouseEnterLeaveOnPanels: boolean = false

Enables tracking of the mouse cursor entering/exiting the panel area. By default = false.
The following functions are used to handle events:
on_panel_mouse_enter(name) - cursor entering the panel area, name is the panel name
on_panel_mouse_leave(name) - cursor leaving the panel area, name is the panel name

property

TrackMouseMoveOnPanels

js/foo_uie_jsplitter.js:3235

TrackMouseMoveOnPanels: boolean = false

Enables tracking of the mouse cursor position within the panel area.
By default = false . The following function is used to handle the event:
on_panel_mouse_move(name, x, y, mask): the event of moving the cursor within the panel area, name is the name of the panel, x, y are the coordinates of the point on the panel.

propertyreadonly

Width

js/foo_uie_jsplitter.js:2835

Width: number

method

ClearInterval

js/foo_uie_jsplitter.js:2855

ClearInterval(timerID)

See clearInterval.

Parameters

Name	Type	Description
`timerID`	`number`

method

ClearProperties

js/foo_uie_jsplitter.js:2841

ClearProperties(reload_panel)

Clears all current panel properties set by window.SetProperty, window.SetProperties or window.ImportProperties

Parameters

Name	Type	Description
`reload_panel = false`optional	`boolean`	If true, reloads panel script after clearing

method

ClearTimeout

js/foo_uie_jsplitter.js:2848

ClearTimeout(timerID)

See clearTimeout.

Parameters

Name	Type	Description
`timerID`	`number`

method

CreateButton

js/foo_uie_jsplitter.js:3163

CreateButton(x, y, images, hover_images)

Creates a button in the splitter. The button will be created in the root of the window and will be placed at the coordinates (x, y). The function is also passed images to set the appearance of the button. The number of states the button can take will depend on the number of images passed to the function. hover_images - button images displayed when the mouse cursor hovers over the button. The function is flexible enough to create different types of buttons

Parameters

Name	Type	Description
`x`	`string`
`y`	`string`
`images`	`*`	// null, string or Array
`hover_images = null`optional	`*`	// null, string or Array

Returns

ButtonObject

Example

var path = fb.FoobarPath + "themes\\lur\\black\\bio.png";
var hpath = fb.FoobarPath + "themes\\lur\\black\\bio_on.png";
// Creates a regular button with the bio.png image, which changes to bio_on.png when the mouse cursor hovers over the button
var a = window.CreateButton(0, 0, path, hpath);
// Creates a checkbox button. The normal state is bio.png, pressed (checkbox checked) - bio_on.png. 
// Note that there are no images for hovering over. 
// Usually, checkboxes do not need them, but you can set them if you want.
var b = window.CreateButton(0, 0, [path, hpath], null);
// You can create a button with three (or more) states. They will switch cyclically when pressed.
// The current state of the button can be obtained using the State property of the button (see ButtonObject class). 
var c = window.CreateButton(0, 0, [path1, path2, path3], [path1_on, path2_on, path3_on]);

method

CreatePopupMenu

js/foo_uie_jsplitter.js:2908

CreatePopupMenu()

Returns

MenuObject

Example source

samples/basic/MainMenuManager All-In-One.jsopen source

method

CreateThemeManager

js/foo_uie_jsplitter.js:2915

CreateThemeManager(class_id)

Parameters

Name	Type	Description
`class_id`	`string`	https://docs.microsoft.com/en-us/windows/win32/controls/parts-and-states

Returns

ThemeManager

Example source

samples/basic/SimpleThemedButton.jsopen source

methoddeprecated

CreateTooltip

js/foo_uie_jsplitter.js:2923

CreateTooltip(font_name, font_size_px, font_style)

Deprecated.

Note: a single panel can have only a single tooltip object. Creating a new tooltip will replace the previous one.

Deprecated: use window.Tooltip and SetFont instead.

Parameters

Name	Type	Description
`[font_name='Segoe`optional	`string`	UI']
`font_size_px = 12`optional	`number`
`font_style = 0`optional	`number`	See FontStyle flags

Returns

FbTooltip

methoddeprecated

DefinePanel

js/foo_uie_jsplitter.js:2862

DefinePanel(name, options)

Deprecated.

Setups panel and script information and available features.
Can be called only once, so it's better to define it directly in the panel Configure menu.

Deprecated: use window.DefineScript instead. Panel name can be changed via window.ShowConfigureV2.

Parameters

Name	Type	Description
`name`	`string`	Script name and panel name
`options = {}`optional	`object`
`options.author = ''`optional	`string`	Script author
`options.version = ''`optional	`string`	Script version
`options.features = undefined`optional	`object`	Additional script features
`options.features.drag_n_drop = false`optional	`boolean`	Indicates if drag_n_drop functionality should be enabled

method

DefineScript

js/foo_uie_jsplitter.js:2881

DefineScript(name, options)

Setup the script information.
Can be called only once for the whole panel.

Parameters

Name	Type	Description
`name`	`string`	Script name
`options = {}`optional	`object`
`options.author = ''`optional	`string`	Script author
`options.version = ''`optional	`string`	Script version
`options.features = undefined`optional	`object`	Additional script features
`options.features.drag_n_drop = false`optional	`boolean`	Indicates if drag_n_drop functionality should be enabled
`options.features.grab_focus = true`optional	`boolean`	Indicates if panel should grab mouse focus

method

EditScript

js/foo_uie_jsplitter.js:2895

EditScript()

Open the current panel script in the default text editor.
Default text editor can be changed via Edit button on the main tab of window.ShowConfigureV2.

method

ExportProperties

js/foo_uie_jsplitter.js:2901

ExportProperties(fileName)

Exports all current panel properties set by window.SetProperty to file

Parameters

Name	Type	Description
`fileName`	`string`

Returns

boolean —

If false, then an error occurred during export

method

GetButton

js/foo_uie_jsplitter.js:3190

GetButton(id)

Get a button by its ID

Parameters

Name	Type	Description
`id`	`number`

Returns

ButtonObject

method

GetColourCUI

js/foo_uie_jsplitter.js:2938

GetColourCUI(type, client_guid)

Parameters

Name	Type	Description
`type`	`number`	See ColourTypeCUI enum
`client_guid`optional	`string`	Client GUID

Returns

number —

returns black colour if the requested one is not available.

method

GetColourDUI

js/foo_uie_jsplitter.js:2945

GetColourDUI(type)

Parameters

Name	Type	Description
`type`	`number`	See ColourTypeDUI enum

Returns

number —

returns black colour if the requested one is not available.

method

GetFontCUI

js/foo_uie_jsplitter.js:2951

GetFontCUI(type, client_guid)

Note: see the example in window.GetFontDUI.

Parameters

Name	Type	Description
`type`	`number`	See FontTypeCUI enum
`client_guid`optional	`string`	Client GUID

Returns

?GdiFont —

returns null if the requested font was not found.

method

GetFontDUI

js/foo_uie_jsplitter.js:2960

GetFontDUI(type)

Parameters

Name	Type	Description
`type`	`number`	See FontTypeDUI enum

Returns

?GdiFont —

returns null if the requested font was not found.

Example

// To avoid errors when trying to use the font or access its properties, you
// should use code something like this...
let font = window.GetFontDUI(0);
if (!font) {
   console.log("Unable to determine your default font. Using Segoe UI instead.");
   font = gdi.Font("Segoe UI", 12);
}

method

GetPanel

js/foo_uie_jsplitter.js:3143

GetPanel(caption)

Get an object for accessing the panel by the caption text. The first panel that matches the argument in text will be returned. The panel text is specified in the caption. By default, it has the value of the panel plugin name, but it can be changed either directly in the window title (Show coords -> Click in caption text) or in the Columns UI placer (Use custom title) or in 'Panel list' (right click on JSplitter window)

Parameters

Name	Type	Description
`caption`	`string`

Returns

PanelObject

method

GetPanelByIndex

js/foo_uie_jsplitter.js:3156

GetPanelByIndex(index)

Get an object for accessing the panel by index. the order depends on the position in the window stack: the bottommost window will have index 0.

Parameters

Name	Type	Description
`index`	`number`

Returns

PanelObject

method

GetPanelCount

js/foo_uie_jsplitter.js:3150

GetPanelCount()

Get child panels count in JSplitter

Returns

number

method

GetProperties

js/foo_uie_jsplitter.js:2975

GetProperties()

Get all current panel properties set by window.SetProperty, window.SetProperties or window.ImportProperties

Returns

Map —

Map of panel properties

Example

const props = window.GetProperties();
for(const [key, value] of props) console.log(`Key = ${key}, Value = ${value}`);

method

GetProperty

js/foo_uie_jsplitter.js:2985

GetProperty(name, default_val)

Get value of property.
If property does not exist and default_val is not undefined and not null, it will be created with the value of default_val.

Note: leading and trailing whitespace are removed from property name.

Parameters

Name	Type	Description
`name`	`string`
`default_val`optional	`*`

Returns

*

method

ImportProperties

js/foo_uie_jsplitter.js:2998

ImportProperties(fileName, reload_panel)

Imports panel properties from file and (optionally) reloads the panel script
DOES clear all existing panel properties.

Parameters

Name	Type	Description
`fileName`	`string`
`reload_panel = false`optional	`boolean`	If true, reloads panel script

Returns

boolean —

If false, then an error occurred during import. Also, if an error occurs during import, the panel does not reload.

method

NotifyOthers

js/foo_uie_jsplitter.js:3007

NotifyOthers(name, info)

This will trigger on_notify_data(name, info) in other panels.
!!! Beware !!!: data passed via info argument must NOT be used or modified in the source panel after invoking this method.

Parameters

Name	Type	Description
`name`	`string`
`info`	`*`

Example

let data = { 
   // some data
};
window.NotifyOthers('have_some_data', data);

data = null; // stop using the object immediately
// AddSomeAdditionalValues(data); // don't try to modify it, since it will affect the object in the other panel as well

method

RadioButtons

js/foo_uie_jsplitter.js:3197

RadioButtons(buttons)

Creates a group of radio buttons. Takes an array of buttons as an argument. Each button must have at least two states, otherwise the function will fail.

Parameters

Name	Type	Description
`buttons`	`Array<ButtonObject>`

Example

var a = window.CreateButton(0 , 0, [path, hpath], null);
var b = window.CreateButton(30 ,0 , [path, hpath], null);
var c = window.CreateButton(60 ,0 , [path, hpath], null);
window.RadioButtons([a, b, c]);
// Now when you click on one button (state 1), the other will be switch to state 0 and vice versa.

method

Reload

js/foo_uie_jsplitter.js:3025

Reload(clear_properties)

Reloads panel.

Parameters

Name	Type	Description
`clear_properties = false`optional	`boolean`	If true, all panel properties will be cleared before reload

method

RemoveButton

js/foo_uie_jsplitter.js:3210

RemoveButton(button)

Removes a button

Parameters

Name	Type	Description
`button`	`ButtonObject`

method

Repaint

js/foo_uie_jsplitter.js:3031

Repaint(force)

Performance note: don't force the repaint unless it's really necessary - repaint calls might be grouped up when *not forced* which will turn them into a single repaint call, thus reducing the amount of on_paint calls.

Parameters

Name	Type	Description
`force = false`optional	`boolean`	If true, will repaint immediately, otherwise a repaint task will be scheduled.

method

RepaintRect

js/foo_uie_jsplitter.js:3040

RepaintRect(x, y, w, h, force)

Repaints a part of the screen.
Use this instead of window.Repaint on frequently updated areas such as time, bitrate, seekbar, etc.

Performance note: see Performance note in window.Repaint.

Parameters

Name	Type	Description
`x`	`number`
`y`	`number`
`w`	`number`
`h`	`number`
`force = false`optional	`boolean`	If true, will repaint immediately, otherwise a repaint task will be scheduled.

method

SetCursor

js/foo_uie_jsplitter.js:3055

SetCursor(id)

This would usually be used inside the on_mouse_move callback.
Use -1 if you want to hide the cursor.

Parameters

Name	Type	Description
`id`	`number`	See Flags for flags like IDC_ARROW

method

SetInterval

js/foo_uie_jsplitter.js:3063

SetInterval(func, delay)

See setInterval.

Parameters

Name	Type	Description
`func`	`function()`
`delay`	`number`

Returns

number

method

SetProperties

js/foo_uie_jsplitter.js:3073

SetProperties(values, reload_panel)

Set panel properties from input map and (optionally) reloads the panel script
Does NOT clear existing properties before setting.

Parameters

Name	Type	Description
`values`	`Map`	Map of values to set
`reload_panel = false`optional	`reload_panel`	If true, reloads panel script after setting

Example

const values = new Map([["First value", 1], ["Second value", 2], ["Third value", 3]]);
window.SetProperties(values);

method

SetProperty

js/foo_uie_jsplitter.js:3086

SetProperty(name, val)

Set property value.
Property will be removed, if val is undefined or null.

Property values are saved per panel instance and are remembered between foobar2000 restarts.

Note: leading and trailing whitespace are removed from property name.

Parameters

Name	Type	Description
`name`	`string`
`val`optional	`*`

method

SetShortcutFilter

js/foo_uie_jsplitter.js:3099

SetShortcutFilter(enabled, type_only, suppress_children)

Sets panel shortcut filter.

Parameters

Name	Type	Description
`enabled = true`optional	`boolean`	If true filter is enabled. Suppresses player shortcuts depending on the following two parameters
`type_only = true`optional	`boolean`	If true suppresses only shortcuts that identified as user input (keyboard_shortcut_manager::is_typing_message from SDK used). If false ALL shortcuts are disabled for panel
`suppress_children = false`optional	`boolean`	If true suppresses also shortcuts for all JSplitter's children. Takes into account the parameter type_only only for DUI. For CUI alwas disables ALL shortcuts