Creating controls

The @labirthermal/core package and its classes contain lots of various properties, that you can use to build complex interfaces. All of them are integrated as webcomponents in @labirthermal/webcomponents.

If you want to create your own GUI, here is a simple showcase for building buttons that switch the palette of displayed images.

In TypeScript

import {
    ThermalManager,
    ThermalFileInstance,
    ThermalFileFailure,
    ThermalPalettes
} from "@labirthermal/core";

// Create the necessary hierarchy
const manager = new ThermalManager();
const registry = manager.registries.addOrGetRegistry( "demo-registry" );
const group = registry.groups.addOrGetGroup( "demo-group" );

// load the file asynchronously
registry.batch.request(
    "/files/sequence.lrc",
    undefined, 
    group, 
    async ( result: ThermalFileInstance | ThermalFileFailure ) => {

        const div = document.createElement( "div" );
        document.body.appendChild( div );

        if ( result instanceof ThermalFileInstance ) {
            result.mountToDom( div );
        } else if ( result instanceof ThermalFileFailure ) {
            console.error( "The file was not loaded", result.message );
        }

    }
);

// Build the buttons to control the thermal palette
for ( const palette of Object.values( ThermalPalettes ) ) {
    const button = document.createElement("button");
    document.body.appendChild( button );
    button.textContent = palette.name;
    button.addEventListener( "click", () => {
        manager.palette.setPalette( palette.slug );
    } );
}

Using webcomponents

<manager-provider manager-slug="demo-manager">
    <registry-provider registry-slug="demo-registry">
        <group-provider group-slug="demo-group">
            <file-provider thermal="/files/sequence.lrc">
                <manager-palette-dropdown></manager-palette-dropdown>
                <file-canvas></file-canvas>
            </file-provider>
        </group-provider>
    </registry-provider>
</manager-provider>

See the result:

A complex example

The following webcomponents example shows more internal properties of @labirthermal/core controlled by @labirthermal/webcomponents.

Before the example, here are two commonly used controls:

Property	Core scope	Sets via provider atribute	Control elements
Thermal palette	ThermalManager	manager-provider palette="iron"	manager-palette-dropdown or manager-palette-buttons
Opacity of IR images	ThermalRegistry	registry-provider opacity="0.2"	registry-opacity-slider

<manager-provider manager-slug="demo-manager">
    <registry-provider registry-slug="demo-registry">
        <group-provider group-slug="demo-group">
            <file-provider thermal="/files/sequence.lrc">
                
                <code>manager-palette-dropdown</code>
                <manager-palette-dropdown></manager-palette-dropdown>

                <code>manager-palette-buttons</code>
                <manager-palette-buttons></manager-palette-buttons>

                <file-canvas></file-canvas>
            </file-provider>
        </group-provider>
    </registry-provider>
</manager-provider>