• Station02-CustomUI: CustomUI gizmo
  • Visible: true
  • Script: the script that defines the custom UI elements must be attached.
    • In this case, the script name is Station02-ImageFromAsset
• Station02-ImageFromAsset: script
  • This script defines the customUI object and loads the image referenced in the CustomUI gizmo properties panel.
• StationAll-CustomUI-Library: script
  • This library file contains some objects and functions that are used in multiple places in the world. Instead of making updates (and therefore mistakes) across multiple files, you should get in the habit of centralizing your reused code objects in distinct files.
  • This library file is imported into the Station’s script.

Note: The default scope of your script is the script file itself. However, you can pull in through the import keyword API components and objects stored in other files. To make objects available to other scripts, use the export keyword.

// The loadImage2 function performs the simple act of returning the results of calling the Image function,
// which has been loaded from the Image API component. This function pulls in its ImageSource (another component)
// from the source asset, which is specified in the TextureAsset property in the Properties panel.
// A designer selects the asset from the drop-down in the Properties panel, and the code loads it,
// applying the baseImageStyle definitions for it.

export function loadImage2(asset: Asset, style: ImageStyle) {
  return Image({
    source: ImageSource.fromTextureAsset(asset),
    style: style,
  });
}

// This type declaration for UITextureProps identifies the object textureAsset to be of Asset type.
// Asset type identifies objects that have been uploaded into the Asset Library.

export type UITextureProps = {
  textureAsset: Asset;
};

• Import:
  • At the top of the file, you can see the standard import declarations.
  • There is two items of interest in these declarations:
    • Import only what is needed.
    • Import from other files, like the Library.
    • See “TypeScript coding” below.
• The constructor baseSimpleImage2Style object is defined as an instance of an ImageStyle object with two properties specified.

const baseSimpleImage2Style: ImageStyle = {height: 200, width: 200};

• This object gets passed into the loadImage2() function to define the styling of the loaded image.
• Class SimpleImage2 declaration:
  • References the UITextureProps properties type definition which is imported from the Library.
  • Defines the height and width of the customUI panel. These properties are different from the ImageStyle properties, which apply to the image that is imported. These values should be greater than the values applied to ImageStyle.
• propsDefinition:
  • This declaration defines the textureAsset property to be a PropTypes property. PropTypes is a reference to properties available on the Properties panel of the parent object, which in this case is the CustomUI gizmo.
  • The Property that is referenced is of Asset property type, which means that a drop-down is available in the panel from which you can select an asset to which you have access.
  • In the Properties panel, the textureAsset property looks like the following:
  
  textureAsset property
• InitializeUI() method:
  • The returned View() object contains three simple elements.
  • Text() - a simple text label.
  • loadImage2() - this is a call to the function that is imported from the Library. Its parameters are the value that a designer has selected in the textureAsset property in the gizmo and the base styling object to apply to the loaded image.
    • What is returned is displayed in the View() object.
• register() method:
  • Declared class must be registered with the abstract class UIComponent.

• How to load a static image into a customUI panel
  • Image must be uploaded as a PNG to your Asset Library
• How to apply styling to images through the ImageStyle object
  • In the file, select ImageStyle and right-click to select Go to Definition. Available options for styling an image are displayed.

// Below declarations are from the UI module of the API.
// These imports might need to be added to this list to extend capabilities:
//  ViewStyle,
//  Callback,
//  Pressable,
//  Binding,
//  UINode,

import {UIComponent, Text, ImageStyle, Image, ImageSource} from 'horizon/ui';

// This import is pulling in the loadImage2 function from the TypeScript file: StationAll-CustomUI-Library.
// This type of a Library file allows you to create single definitions of functions and types and then to
// use them consistently throughout your project.
import {loadImage2} from 'StationAll-CustomUI-Library';

// This import pulls in the UI texture properties type declaration from the Library file.
import {type UITextureProps} from 'StationAll-CustomUI-Library';