Configuration

Last update: 25 August, 2021

Description

Required objects and configurations for the viewer to work.

Configurations

Configuration object	Description	Type
Aphrodite Config	3D Viewer configuration object	Object
Horus Config	2D Viewer configuration object	Object
Data Provider Config	Data provider configuration object	Object
Layers Config	Custom Layers objects	Array
Components Config	Component visibility settings	Object

Aphrodite Config

const aphrodite = {
    buildingId: 12345,
    serverUrl: 'https://geoapi.youbim.com:8181/',
    socketUrl: 'wss://geoapi.youbim.com:8181/',
    headers: {
        'x-auth-identifier': 'provided-by-youbim',
        'x-auth-secret-key': 'provided-by-youbim',
    },
    
    // Provided with the YIF package
    loaderUrl: './loader.min.js'
}

Horus Config

const horus = {
    buildingId: 12345,
    serverUrl: "https://geoapi.youbim.com:6969/"
}

Data Provider Config

const data = {
    provider: CustomDataProvider
}

Layers

// Create a new Layer
class LayerTest extends YouBIMIntegrationFramework.Layer {}

// Create a new configuration object for aphrodite 
const layers = [LayerTest];

Note: See Layers for the LayerTest definition.

Components Config

Property	Defaul value	Description
enableAssets	true	The list of assets is shown on the left side of the app.
enableHeader	true	The header is shown.
fullWidth2D	false	2D viewer is displayed in full screen
enableAssetDetail	true	The detail modal of an asset is displayed when clicking in the viewer
enableSystems	true	Whether to display or hide the systems filter

    const visibilitySettings = {
          enableAssets: false,
          enableHeader: true,
          fullWidth2D: false,
          enableAssetDetail: true,
    },

Initialization Example

Once all configurations have been created, the YIF object can be instantiated in the following way:

<script>
    // Container to append the integration framework to
    const iFrameworkContainer = document.querySelector('#youbim-integration-framework-container');
    
    // Create the framework instance
    const YouBIMIntegrationFrameworkInstance = YouBIMIntegrationFramework.default(
        iFrameworkContainer,
        {
            horus, aphrodite, data, layers: [LayerTest], visibilitySettings,
        }
    );
</script>