Interface InfiniteEngineLoadingStateAttachment

The InfiniteEngineLoadingStateAttachment is the attachment of the InfiniteEngineInterfaceSignal.LoadingStateChanged signal sent by the InfiniteEngineInterface when the loading state of the InfiniteEngineInterface has changed.

This object stores information about the previous and the new state of the resource management system.

/** 
 * Sample to illustrate the screenshot procedure of the InfiniteEngineInterface.
 */
import {
    InfiniteEngineInterface, LoadingStates, Vector3, InfiniteEngineLoadingStateAttachment,
    InfiniteEngineInterfaceSignal, InfiniteEvent, InfiniteImageInterface, ScreenshotType
} from 'generated_files/documentation/appinfiniteapi';

// We try to make a screenshot when all data is loaded

// the div to render the 3D display
let lView3D: HTMLElement;

// created previously, should receive the image data to be displayed to the user (or ask for a download maybe ?)
let lImageData : HTMLImageElement;

// created previously the position of the camera for the screenshot
let lCameraLocation : Vector3;

// created previously the camera center of interest
let lCenterOfInterest : Vector3;

// created previously the 3D engine
let lInfiniteEngine: InfiniteEngineInterface;

let lScreenshotId : string = '';
// What to do when screenshot is ready ?
let onScreenshotReady : (pEvent : InfiniteEvent, _pCallbackData) => void = undefined;

// What to do when all data is loaded ?
let onDataStateChanged : (pEvent : InfiniteEvent, _pCallbackData) => void = undefined;

// bind the 3D rendering to the div (should have been done earlier :) )
lInfiniteEngine.setView(lView3D);

// we will make screenshot of 1024x1024
lInfiniteEngine.setFixedResolution(1024, 1024, 1);

lInfiniteEngine.addEventListener(InfiniteEngineInterfaceSignal.LoadingStateChanged, onDataStateChanged);
lInfiniteEngine.addEventListener(InfiniteEngineInterfaceSignal.ScreenshotReady, onScreenshotReady);

// go to the expected position / location
lInfiniteEngine.getCameraManager().setCameraLocation(lCameraLocation);
lInfiniteEngine.getCameraManager().lookAt(lCenterOfInterest, 0);

// ####################################################################################################################################
// ############################################ Screenshot ############################################################################
// ####################################################################################################################################

// What to do when state changes ? We wait till everything is loaded and then make a screenshot
onDataStateChanged = (pEvent : InfiniteEvent, _pCallbackData) : void =>
{
    // check the attachment
    const lStateAttachment : InfiniteEngineLoadingStateAttachment = pEvent.attachments;

    // some check, but useless, only for illustration purpose
    console.assert(lStateAttachment.newLoadingState === lInfiniteEngine.getResourceLoadingState());

    switch (lStateAttachment.newLoadingState)
    {
        case LoadingStates.S_Loading:
            // do nothing if we are still loading
            return;
        case LoadingStates.S_OutOfBudget:
            // some fancy message
            console.log('Taking a screenshot without everything loaded');
            // but we still make a screenshot :)
            break;
        default:
            break;
    }
    // make a screenshot request in jpeg with 95% quality, data will be base64 encoded
    lScreenshotId = lInfiniteEngine.screenshot(ScreenshotType.ST_Color, true, 'image/jpeg', 0.95);
    if (lScreenshotId.length === 0)
    {
        // for some reason, this failed
        console.log('Screenshot request failed');
    }
};

// what to do when we get the screenshot result ?
onScreenshotReady = (pEvent : InfiniteEvent, _pCallbackData) : void =>
{
    // the image result
    const lInfiniteImage : InfiniteImageInterface = pEvent.attachments;

    // if the id does not match, bail out
    if (lInfiniteImage.screenshotid !== lScreenshotId)
    {
        console.log('This is not the expected screenshot id, aborting');
        return;
    }

    // is the image valid ? and base64 encoded ?
    if ((lInfiniteImage.width === 0) || (!lInfiniteImage.data) || (!lInfiniteImage.base64))
    {
        console.log('Unexpected screenshot error, aborting');
        return;
    }

    // create the data url in base64
    // even if we did not get the expected format, we still get the result
    const lDataUrl : string = 'data:' + lInfiniteImage.format + ';base64,' + lInfiniteImage.data;

    // resize the image markup
    lImageData.width = lInfiniteImage.width;
    lImageData.height = lInfiniteImage.height;
    // and set data
    lImageData.src = lDataUrl;

    // we get back to the size of the 3d view but this is up to the application needs
    lInfiniteEngine.unsetFixedResolution();
};

Copy

or asynchronously :

/** 
 * Sample to illustrate the asynchronous screenshot procedure of the InfiniteEngineInterface.
 */
import {
    InfiniteEngineInterface, LoadingStates, Vector3,
    InfiniteImageInterface, ScreenshotType, AsyncDataLoadedResult, AsyncResultReason, AsyncScreenshotResult
} from 'generated_files/documentation/appinfiniteapi';

// We try to make a screenshot when all data is loaded

// the div to render the 3D display
let lView3D: HTMLElement;

// created previously, should receive the image data to be displayed to the user (or ask for a download maybe ?)
let lImageData : HTMLImageElement;

// created previously the position of the camera for the screenshot
let lCameraLocation : Vector3;

// created previously the camera center of interest
let lCenterOfInterest : Vector3;

// created previously the 3D engine
let lInfiniteEngine: InfiniteEngineInterface;

const takeScreenshot = async () : Promise<void> =>
{
    // bind the 3D rendering to the div (should have been done earlier :) )
    lInfiniteEngine.setView(lView3D);

    // we will make screenshot of 1024x1024
    lInfiniteEngine.setFixedResolution(1024, 1024, 1);

    // go to the expected position / location
    lInfiniteEngine.getCameraManager().setCameraLocation(lCameraLocation);
    lInfiniteEngine.getCameraManager().lookAt(lCenterOfInterest, 0);

    // What to do when all data is loaded ?
    const lDataLoaded : AsyncDataLoadedResult = await lInfiniteEngine.asyncWaitForDataLoaded();
    if (lDataLoaded.reason !== AsyncResultReason.ARR_Success || lDataLoaded.value === undefined)
    {
        // this is an error that should not happen (perhaps the engine interface has been destroyed ?)
        console.log('screenshot procedure failed for some reason');
        return;
    }
    const lDataLoadedState : LoadingStates = lDataLoaded.value.newLoadingState;
    switch (lDataLoadedState)
    {
        case LoadingStates.S_Loading:
            // this is an unexpected error
            console.log('unexpected error');
            return;
        case LoadingStates.S_OutOfBudget:
            // some fancy message
            console.log('Taking a screenshot without everything loaded');
            // but we still make a screenshot :)
            break;
        default:
            break;
    }
    const lScreenshot : AsyncScreenshotResult = await lInfiniteEngine.asyncScreenshot(ScreenshotType.ST_Color, true, 'image/jpeg', 0.95);
    if (lScreenshot.reason !== AsyncResultReason.ARR_Success || lScreenshot.value === undefined)
    {
        // this is an error that may happen (perhaps the engine interface has been destroyed ?, or bad inputs ?)
        console.log('screenshot procedure failed for some reason');
        return;
    }
    // What to do when screenshot is ready ?

    // the image result
    const lInfiniteImage : InfiniteImageInterface = lScreenshot.value;

    // is the image valid ? and base64 encoded ?
    if ((lInfiniteImage.width === 0) || (!lInfiniteImage.data) || (!lInfiniteImage.base64))
    {
        console.log('Unexpected screenshot error, aborting');
        return;
    }

    // create the data url in base64
    // even if we did not get the expected format, we still get the result
    const lDataUrl : string = 'data:' + lInfiniteImage.format + ';base64,' + lInfiniteImage.data;

    // resize the image markup
    lImageData.width = lInfiniteImage.width;
    lImageData.height = lInfiniteImage.height;
    // and set data
    lImageData.src = lDataUrl;

    // we get back to the size of the 3d view but this is up to the application needs
    lInfiniteEngine.unsetFixedResolution();
};

takeScreenshot();

Copy

Please make sure the destination browser supports promises before using async calls.