Standalone usage

The @labirthermal/core package can be used directly from TypeScript or through @labirthermal/webcomponents.

Load a single file

The simpliest possible thing you can do with @labirthermal/core is to load a single file.

import {
    ThermalManager,
    ThermalFileInstance,
    ThermalFileFailure
} 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(
    
    // The URL of the IR image
    "/files/sequence.lrc",

    // An optional URL of the visible file
    undefined, 

    // A group to which the file will be added
    group, 

    // What to do when the file is OK
    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 );
        }

    }
);

Load multiple files

You can load multiple files at once into a single group.

import {
    ThermalManager,
    ThermalFileInstance,
    ThermalFileFailure
} 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" );

// Callback for all files - mount the instance into a div
const loadCallback = async (
    result: ThermalFileInstance | ThermalFileFailure 
) => {

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

    if ( result instanceof ThermalFileInstance ) {
        result.mountToDom( div );
    } else {
        console.error( `The file was not loaded: ${result.message}` );
    }

}

// URLS to load
const files = [
    "/files/sequence.lrc",
    "/files/klokan.lrc",
    "/files/makak.lrc"
];

// Create a batch object
const batch = registry.batch.createBatch();

// Iterate the files and register them into the batch
for ( const file of files ) {

    batch.request(
        file,
        undefined,
        group, 
        loadCallback
    );

}


// In the next tick, the batch object will fetch files

// After all files are fetched, the callback is triggered

Control internal properties

You can create any sort of GUI for controlling internal properties of the @labirthermal/core. The example below shows how to load a file and create a dropdown that switches the thermal palette.

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 );
        }

    }
);

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 );
    } );
}