Customising a Showcase app – IdeaLayer

The simplest starting point is to copy an existing Showcase app bundle and use this as your starting point. For a recommended sample app bundle, please contact us.

If you are creating one from scratch, an app bundle typically has this structure:

MyApp.capp/
        assets/ (Showcase assets)
        webapp/ (Showcase runtime)
        workspaces/
	App.xml (Engine Config
        config.json (Showcase Config)
	icon.png
        loading.png
        screensaver.mp4 (optional)

The icon.png can be set to a 512 x 512 PNG image with your application icon. This is only used if you are launching the app from the IdeaLayer application menu (start screen).
The loading.png can be set to 1920 x 1080 or 3840 x 2160 for 4k Displays, this is displayed on startup when the app is loading content.
The App.xml file is used to set basic properties and configuration options for IdeaLayer Engine.
The config.json file contains theming settings for the tab bar and most other on-screen elements in your app.

Below are few sections of the App.xml that are relevant for Showcase based apps.

System Theme Settings

The options below outline theme settings for the Engine System UI which can be customised for your app. Colour values are in the format 0xRRGGBBAA, i.e. similar to a Hex colour code but with an alpha value.

## Theme Settings
# Note if the font does not exist or incorrect format this may crash IdeaLayer Engine
#DEFAULT_FONT = @appdir@/assets/fonts/font.ttf #Default font for the apps System UI

# Engine System UI Windows Colors
WINDOW_BACKGROUND_COLOUR = 0xDDDDDDFF
WINDOW_OUTLINE_COLOUR = 0x111111FF
WINDOW_TEXT_COLOUR = 0x212221FF
WINDOW_TITLE_BACKGROUND_COLOUR = 0x29333cff
WINDOW_TITLE_OUTLINE_COLOUR = 0x111111FF
WINDOW_TITLE_TEXT_COLOUR = 0xDDDDDDFF

# Engine System File Browser UI Colors
#BROWSER_BACKGROUND_COLOUR = 0xDDDDDDFF
#BROWSER_TEXT_COLOUR = 0x212221FF
#BROWSER_OUTLINE_COLOUR = 0x111111FF
#BROWSER_TITLE_BACKGROUND_COLOUR = 0x212221FF
#BROWSER_TITLE_OUTLINE_COLOUR = 0x111111FF
#BROWSER_TITLE_TEXT_COLOUR = 0xDDDDDDFF
#BROWSER_ICON_TEXTURE_COLOUR = 0xDDDDDDFF
#BROWSER_ACTIVE_TITLE_BACKGROUND_COLOUR = 0x0087E6FF
#BROWSER_ACTIVE_TITLE_OUTLINE_COLOUR = 0x005AB3FF
#BROWSER_ACTIVE_TITLE_TEXT_COLOUR = 0xFFFFFFFF
#BROWSER_ICON_ACTIVE_TEXTURE_COLOUR = 0xFFFFFFFF
#FILEBROWSER_CHILD_CONTRAST_OUTLINE = 0xB2B2B2FF
#SUBBROWSER_BACKGROUND_COLOUR = 0x666666FF
#SUBBROWSER_TEXT_COLOUR = 0xFFFFFFFF

# Engine Command Bar Colors
#COMMAND_BAR_TEXTURE_COLOUR = 0xDDDDDDFF
#COMMAND_BAR_BACKGROUND_COLOUR = 0x2121218c
#COMMAND_BAR_OUTLINE_COLOUR = 0x21212115
#COMMAND_BAR_SECONDARY_TEXTURE_COLOUR = 0xFFFFFFFF
#COMMAND_BAR_SECONDARY_BACKGROUND_COLOUR = 0x29333cff
#COMMAND_BAR_SECONDARY_OUTLINE_COLOUR = 0x212221FF

# Engine Email UI Colours
WINDOW_TITLE_HEIGHT = 0.3
WINDOW_TITLE_TEXT_SCALE = 0.125
WINDOW_CORNER_RADIUS = 0.05
# Note if the font does not exist or incorrect format it may crash IdeaLayer Engine
#WINDOW_TITLE_FONT = @appdir@/assets/fonts/

EMAILER_BUTTON_CORNER_RADIUS = 0.5
EMAILER_BUTTON_SCALE = 0.8
# Note if the font does not exist or incorrect format it may crash IdeaLayer Engine
#EMAILER_BUTTON_FONT = @appdir@/assets/fonts/

EMAILER_PRIMARY_BUTTON_COLOUR = 0x29333cff
EMAILER_PRIMARY_BUTTON_OUTLINE_COLOUR = 0x29333cff
EMAILER_PRIMARY_BUTTON_TEXT_COLOUR = 0xFFFFFFFF
EMAILER_SECONDARY_BUTTON_COLOUR = 0xFFFFFFFF
EMAILER_SECONDARY_BUTTON_OUTLINE_COLOUR = 0x29333cff
EMAILER_SECONDARY_BUTTON_TEXT_COLOUR = 0x29333cff

EMAILER_FORM_COLOUR = 0xffffffff
EMAILER_FORM_OUTLINE_COLOUR = 0x000000ff
EMAILER_FORM_TEXT_COLOUR = 0x000000ff
EMAILER_FORM_CORNER_RADIUS = 0.0

For theming the tab navigation bar and specific UI elements within the Showcase app, this is covered in the next section, Showcase app theming and configuration.

System Theme Settings

Related articles