Showcase apps have a config.json file which enables complete customisation over the look and feel of your app. The config file is a standard JSON file split into a few sections. If you are creating a new Showcase app, it is best to copy the config.json from the Showcase-Example app and use it as a starting point.
Global Setting
At the top level you have the following:
"app_type": "explore",
"debug": false,
"start_tab": "99_Splash",
"home_tab": "01_Fullscreen Website",
"debug": false,
"start_tab": "99_Splash",
"home_tab": "01_Fullscreen Website",
- start_tab : Is the first tab loaded into the showcase app
- home_tab : Is the default home tab when in use and is the tab that is navigated to from the splash screen
Splash Screen Configuration
You can customise the splash button theme by editing the settings under "primary_button_config", you can change its text by editing the text in "splash_button_title" in "splash_config".
If you do not wish to have a button shown on the splash screen, set "enable_splash_button" to false, which turns the entire splash screen into a touchable element.
Example Config:
"splash_config": {
"enable_splash_button": true,
"splash_button_title": "Explore"
},
"enable_splash_button": true,
"splash_button_title": "Explore"
},
"primary_button_config": {
"background_color": "0x29333cff",
"outline_color": "0xffffffFF",
"label_color": "0xffffffFF",
"font": "",
"label_scale": 0.37,
"label_margin": 0.5,
"corner_radius": 0.5
},
"background_color": "0x29333cff",
"outline_color": "0xffffffFF",
"label_color": "0xffffffFF",
"font": "",
"label_scale": 0.37,
"label_margin": 0.5,
"corner_radius": 0.5
},
"secondary_button_config": {
"background_color": "0xffffffFF",
"outline_color": "0x29333cff",
"label_color": "0x29333cff",
"font": "",
"label_scale": 0.37,
"label_margin": 0.5,
"corner_radius": 0.5
},
"background_color": "0xffffffFF",
"outline_color": "0x29333cff",
"label_color": "0x29333cff",
"font": "",
"label_scale": 0.37,
"label_margin": 0.5,
"corner_radius": 0.5
},
Menu Button
Menu Configuration
"menu_config": {
"enable_capture_screen": true,
"enable_clear_app": true,
"enable_email_and_print": true,
"enable_exit": true,
"enable_reload_app": true,
"enable_rotate": true,
"enable_switch_app": true
},
"enable_capture_screen": true,
"enable_clear_app": true,
"enable_email_and_print": true,
"enable_exit": true,
"enable_reload_app": true,
"enable_rotate": true,
"enable_switch_app": true
},
Floating Menu Button
"floating_menu_button": {
"enable": true,
"icon": "@appdir@/assets/menu_button.png",
"icon_scale": 1.0,
"corner_radius": 0.5,
"background_color_active": "0xccccccFF",
"outline_color_active": "0x00000000",
"icon_color_active": "0x656565fF",
"background_color_inactive": "0x0000006F",
"outline_color_inactive": "0x00000000",
"icon_color_inactive": "0xffffffFF",
"scale": 0.25,
"flip": false,
"position": {
"x": 3.5,
"y": 1.9
},
"padding": 0.025
},
"enable": true,
"icon": "@appdir@/assets/menu_button.png",
"icon_scale": 1.0,
"corner_radius": 0.5,
"background_color_active": "0xccccccFF",
"outline_color_active": "0x00000000",
"icon_color_active": "0x656565fF",
"background_color_inactive": "0x0000006F",
"outline_color_inactive": "0x00000000",
"icon_color_inactive": "0xffffffFF",
"scale": 0.25,
"flip": false,
"position": {
"x": 3.5,
"y": 1.9
},
"padding": 0.025
},
Carousel Configuration
"carousel_config": {
"has_title": true,
"has_subtitle": true,
"has_callback": false,
"reverse_order": false,
"title_offset": 0.2,
"background_color": "0xFFFFFF00",
"title_font": "",
"subtitle_font": "",
"title_colour": "0xFFFFFFFF",
"subtitle_colour": "0xFFFFFFFF"
},
"has_title": true,
"has_subtitle": true,
"has_callback": false,
"reverse_order": false,
"title_offset": 0.2,
"background_color": "0xFFFFFF00",
"title_font": "",
"subtitle_font": "",
"title_colour": "0xFFFFFFFF",
"subtitle_colour": "0xFFFFFFFF"
},
Fullscreen Configuration
"fullscreen_config": {
"command_bar_enabled": true,
"touch_mode_button": false,
"keyboard_button": true,
"navigation_buttons": true,
"annotation_button": false,
"enable_cast_button": true,
"enable_flip_button": true,
"flip_orientation": "portrait",
"enable_rotate_button": false,
"enable_rotate_back_button": false,
"cast_button": {
"x": 0.83,
"y": -0.46,
"aspect": 4,
"scale": 0.23,
"text": "Cast to Wall"
}
}
"command_bar_enabled": true,
"touch_mode_button": false,
"keyboard_button": true,
"navigation_buttons": true,
"annotation_button": false,
"enable_cast_button": true,
"enable_flip_button": true,
"flip_orientation": "portrait",
"enable_rotate_button": false,
"enable_rotate_back_button": false,
"cast_button": {
"x": 0.83,
"y": -0.46,
"aspect": 4,
"scale": 0.23,
"text": "Cast to Wall"
}
}
Navigator Configuration
In the config.json file the settings for the menu can be found under "navigator_settings".
"navigator_settings": {
"enable_menu_button": true,
"hide_empty_tabs": true,
"stack": true,
"enable_email_button": true,
"enable_email_tab": true,
"navigate_to_leaf": true,
"email_tab": "09_Email Tab",
"menu_button": {
"icon": "@appdir@/assets/menu_button.png",
"icon_scale": 1.0,
"corner_radius": 0,
"background_color_inactive": "0x00000000",
"outline_color_inactive": "0x00000000",
"icon_color_inactive": "0xffffffFF",
"background_color_active": "0x00000000",
"outline_color_active": "0x00000000",
"icon_color_active": "0xffffffFF"
},
"back_button": null,
"email_button": {
"icon": "@appdir@/assets/email_button.png",
"background_color_inactive": "0x00000000",
"outline_color_inactive": "0x00000000",
"icon_color_inactive": "0x29333cff",
"background_color_active": "0x00000000",
"outline_color_active": "0x00000000",
"icon_color_active": "0xffffffFF",
"icon_scale": 1.0,
"corner_radius": 0
},
"theme_settings": {...}
},
"enable_menu_button": true,
"hide_empty_tabs": true,
"stack": true,
"enable_email_button": true,
"enable_email_tab": true,
"navigate_to_leaf": true,
"email_tab": "09_Email Tab",
"menu_button": {
"icon": "@appdir@/assets/menu_button.png",
"icon_scale": 1.0,
"corner_radius": 0,
"background_color_inactive": "0x00000000",
"outline_color_inactive": "0x00000000",
"icon_color_inactive": "0xffffffFF",
"background_color_active": "0x00000000",
"outline_color_active": "0x00000000",
"icon_color_active": "0xffffffFF"
},
"back_button": null,
"email_button": {
"icon": "@appdir@/assets/email_button.png",
"background_color_inactive": "0x00000000",
"outline_color_inactive": "0x00000000",
"icon_color_inactive": "0x29333cff",
"background_color_active": "0x00000000",
"outline_color_active": "0x00000000",
"icon_color_active": "0xffffffFF",
"icon_scale": 1.0,
"corner_radius": 0
},
"theme_settings": {...}
},
Here you will here you have some global settings for the navbar:
- "hide_empty_tabs" - hide empty pages from the menu
- "navigate_to_leaf" - this forces the page to navigate directly to the first leaf page when switching pages
- "enable_menu_button" - show hide the menu button on the left of the root navbar
- "enable_email_button" - enable the email button on the right of the root navbar
- "enable_email_tab" - this enabled the use of a page to be dedicated to the emailer
- "email_tab" - this is the path to the email page if "enable_email_tab" is enabled
The section "menu_button" and "email_button" describes the settings used for their respective icons, colours are in the format 0xRRGGBBAA
Then we have the "theme_settings" section, this is where we define the themes used in the app:
Below is an example theme_settings that uses a grey and yellow them for the first level, a white, grey and yellow theme for the second and a floating top nav buttons for
- "themes" - a named list of themes used for each navbar level of the app
- "default" - This is the default theme reference, its value must match a named theme in the themes list
- "first_level" - This is the first level or root level theme reference, its value must match a named theme in the themes list (optional)
- "second_level" - This is the second level theme reference, its value must match a named theme in the themes list (optional)
- "third_level" - This is the third level theme reference, its value must match a named theme in the themes list (optional)
- "location" - supported values "top" and "bottom", this is where the navbar is located
- "scale": - The navbar scale
- "background_color" - The navbar background colour in the format 0xRRGGBBAA
- "corner_radius": the corner rounding of the the nav bar (0.5 max for a circular edge)
- "layout": the way items are laid out in the navbar, valid options are "fluid" and "grid";
- "fluid" will resize the buttons to fit the text
- "grid" will be a fixed width grid
- "grid_columns": when layout is set to grid this determines the number of columns are visible
- "auto" automatically determines the number of columns to fit all the items
- "inherit" inherits the column width from the parent navbar if there is outline_color
- Or any integer number to manually set the number of columns
- "horizontal_alignment": "left","right","center" the alignment of items in the navbar
- "margin" adjust the internal spacing between the navbar and its items. They are written as such below:
"margin": {
"left": 0,
"right": 0,
"top": 0,
"bottom": 0
} - "padding" adjust the spacing between navbars items. They are written as such below:
"padding": {
"left": 0,
"right": 0,
"top": 0,
"bottom": 0
} - "has_separator": true, false - to enable the vertical separator between items for this navbar
- "separator_color": if "has_separator" is enabled sets the color in the format 0xRRGGBBAA
- "separator_height": if "has_separator" is enabled sets the height
- "separator_thickness": if "has_separator" is enabled sets the thickness
- "has_logo": true, false - to enable the logo for this navbar
- "logo_config": The logo configuration settings:
- "icon": the location of the icon file ( "@appdir@" is used for application directory path )
- "layout": "inline", "fixed" - the position for the logo ("fixed" is to have a fixed width, "inline" positions it with the items and sets the width to the gird with if enabled )
- "icon_scale": logo scale
- "icon_margin": logo margin
- "background_color": logo background color
- "corner_radius": corner radius for the logo
- "outline_color": outline color for the logo
- "icon_color": colourisation of the logo, use "0xFFFFFFFF" for coloured logos
- "item_config": the configuration for each page link in the navbar
- "background_color_active": the background colour of a selected tab (use "0x00000000" to disable)
- "background_color_inactive": the background colour of a tab when not selected (use "0x00000000" to disable)
- "outline_color_active": the outline colour of a selected tab (use "0x00000000" to disable)
- "outline_color_inactive": the outline colour of a tab when not selected (use "0x00000000" to disable)
- "label_color_active": the text label colour of a selected tab (use "0x00000000" to disable)
- "label_color_inactive": the text label colour of a tab when not selected (use "0x00000000" to disable)
- "underline_color_active": the underline colour of a selected tab (use "0x00000000" to disable)
- "underline_color_inactive": the underline colour of a tab when not selected (use "0x00000000" to disable)
- "underline_thickness_active": the underline thickness of a selected tab (use 0 to disable)
- "underline_thickness_inactive"
: the underline thickness of a tab when not selected (use 0 to disable) - "font": the location of the text label font file ( "@appdir@" is used for application directory path ), leave as "" if unused
- "label_scale": the text label scale
- "label_margin": the text label margin
- "corner_radius": the item corner radius
Below is an example theme_settings that uses a grey and yellow them for the first level, a white, grey and yellow theme for the second and a floating top nav buttons for
"theme_settings": {
"default": "default",
"first_level": "grey_root_nav",
"second_level": "white_and_yellow_nav",
"third_level": "floating_top_nav",
"themes": {
"default": {
"location": "bottom",
"scale": 0.075,
"background_color": "0x000000CC",
"horizontal_alignment": "left",
"has_separator": true,
"separator_color": "c5c6bf7F",
"separator_height": 0.6,
"separator_thickness": 0.8,
"corner_radius": 0,
"margin": {
"left": 0,
"right": 0
},
"layout": "grid",
"grid_columns": "auto",
"has_logo": false,
"item_config": {
"background_color_active": "0x00000000",
"background_color_inactive": "0x00000000",
"outline_color_active": "0x00000000",
"outline_color_inactive": "0x00000000",
"label_color_active": "0xffffffFF",
"label_color_inactive": "0xffffffFF",
"underline_color_active": "0xffffffFF",
"underline_color_inactive": "0x00000000",
"underline_thickness_active": 0.1,
"underline_thickness_inactive" : 0,
"font": "",
"label_scale": 0.21,
"label_margin": 0.5,
"corner_radius": 0
}
},
"root": {
"location": "bottom",
"scale": 0.075,
"background_color": "0x000000CC",
"horizontal_alignment": "left",
"has_separator": true,
"separator_color": "c5c6bf7F",
"separator_height": 0.6,
"separator_thickness": 0.8,
"corner_radius": 0,
"margin": {
"default": "default",
"first_level": "grey_root_nav",
"second_level": "white_and_yellow_nav",
"third_level": "floating_top_nav",
"themes": {
"default": {
"location": "bottom",
"scale": 0.075,
"background_color": "0x000000CC",
"horizontal_alignment": "left",
"has_separator": true,
"separator_color": "c5c6bf7F",
"separator_height": 0.6,
"separator_thickness": 0.8,
"corner_radius": 0,
"margin": {
"left": 0,
"right": 0
},
"layout": "grid",
"grid_columns": "auto",
"has_logo": false,
"item_config": {
"background_color_active": "0x00000000",
"background_color_inactive": "0x00000000",
"outline_color_active": "0x00000000",
"outline_color_inactive": "0x00000000",
"label_color_active": "0xffffffFF",
"label_color_inactive": "0xffffffFF",
"underline_color_active": "0xffffffFF",
"underline_color_inactive": "0x00000000",
"underline_thickness_active": 0.1,
"underline_thickness_inactive"
"font": "",
"label_scale": 0.21,
"label_margin": 0.5,
"corner_radius": 0
}
},
"root": {
"location": "bottom",
"scale": 0.075,
"background_color": "0x000000CC",
"horizontal_alignment": "left",
"has_separator": true,
"separator_color": "c5c6bf7F",
"separator_height": 0.6,
"separator_thickness": 0.8,
"corner_radius": 0,
"margin": {
"left": 0,
"right": 0
},
"layout": "grid",
"grid_columns": "auto",
"has_logo": true,
"logo_config": {
"icon": "@appdir@/assets/idealayer- logo.png",
"layout": "inline",
"icon_scale": 0.5,
"icon_margin": 0.05,
"corner_radius": 0,
"background_color": "0x00000000",
"outline_color": "0x00000000",
"icon_color": "0xffffffFF"
},
"item_config": {
"background_color_active": "0x00000000",
"background_color_inactive": "0x00000000",
"outline_color_active": "0x00000000",
"outline_color_inactive": "0x00000000",
"label_color_active": "0xffffffFF",
"label_color_inactive": "0xffffffFF",
"underline_color_active": "0xffffffFF",
"underline_color_inactive": "0x00000000",
"underline_thickness_active": 0.1,
"underline_thickness_inactive" : 0,
"font": "",
"label_scale": 0.21,
"label_margin": 0.5,
"corner_radius": 0
}
},
"grey_root_nav": {
"nav_pos": "bottom",
"scale": 0.07,
"background_color": "0x415059FF",
"horizontal_alignment": "left",
"has_separator": true,
"separator_color": "0x999999FF",
"separator_height": 0.6,
"separator_thickness": 0.8,
"corner_radius": 0,
"layout": "grid",
"grid_columns": "auto",
"item_config": {
"background_color_active": "0xEEE149FF",
"background_color_inactive": "0x00000000",
"outline_color_active": "0x00000000",
"outline_color_inactive": "0x00000000",
"label_color_active": "0x59595FFF",
"label_color_inactive": "0xffffffFF",
"underline_color_active": "0x00000000",
"underline_color_inactive": "0x00000000",
"underline_thickness_active": 0,
"underline_thickness_inactive" : 0,
"font": "",
"label_scale": 0.24,
"label_margin": 0.5,
"corner_radius": 0
},
"has_logo": true,
"logo_config": {
"icon": "@appdir@/assets/idealayer- logo.png",
"layout": "fixed",
"width": 3.0,
"icon_scale": 0.4,
"icon_margin": 0.0,
"corner_radius": 0,
"background_color": "0x415059FF",
"outline_color": "0x00000000",
"icon_color": "0xFFFFFFFF",
"logo_after_buttons": true
}
},
"white_and_yellow_nav": {
"nav_pos": "bottom",
"scale": 0.07,
"background_color": "0xFFFFFFFF",
"horizontal_alignment": "left",
"has_separator": true,
"separator_color": "0x59595FFF",
"separator_height": 0.6,
"separator_thickness": 0.8,
"corner_radius": 0,
"margin": {
"left": 1,
"right": 0
},
"layout": "grid",
"grid_columns": "inherit",
"item_config": {
"background_color_active": "0x00000000",
"background_color_inactive": "0x00000000",
"outline_color_active": "0x00000000",
"outline_color_inactive": "0x00000000",
"label_color_active": "0x415059FF",
"label_color_inactive": "0x415059FF",
"underline_color_active": "0xEEE149FF",
"underline_color_inactive": "0x00000000",
"underline_thickness_active": 0.15,
"underline_thickness_inactive" : 0,
"font": "",
"label_scale": 0.24,
"label_margin": 0.5,
"corner_radius": 0
}
},
"floating_top_nav": {
"location": "top",
"scale": 0.1,
"background_color": "0x00000000",
"horizontal_alignment": "center",
"has_separator": false,
"separator_color": "0x00000000",
"separator_height": 0.6,
"separator_thickness": 0.8,
"corner_radius": 0,
"margin": { "left": 0, "right": 0, "top": 0, "bottom": 0 },
"padding": {
"left": 0.15,
"right": 0.15,
"top": 0.25,
"bottom": 0.25
},
"layout": "grid",
"grid_columns": "8",
"has_logo": false,
"item_config": {
"background_color_active": "0xeeeeeeff",
"background_color_inactive": "0xeeeeeeff",
"outline_color_active": "0x00000000",
"outline_color_inactive": "0x00000000",
"label_color_active": "0x575756ff",
"label_color_inactive": "0x575756ff",
"underline_color_active": "0x575756ff",
"underline_color_inactive": "0x00000000",
"underline_thickness_active": 0.1,
"underline_thickness_inactive" : 0,
"font": "",
"label_scale": 0.36,
"label_margin": 0.5,
"corner_radius": 0
}
}
}
}
"right": 0
},
"layout": "grid",
"grid_columns": "auto",
"has_logo": true,
"logo_config": {
"icon": "@appdir@/assets/idealayer-
"layout": "inline",
"icon_scale": 0.5,
"icon_margin": 0.05,
"corner_radius": 0,
"background_color": "0x00000000",
"outline_color": "0x00000000",
"icon_color": "0xffffffFF"
},
"item_config": {
"background_color_active": "0x00000000",
"background_color_inactive": "0x00000000",
"outline_color_active": "0x00000000",
"outline_color_inactive": "0x00000000",
"label_color_active": "0xffffffFF",
"label_color_inactive": "0xffffffFF",
"underline_color_active": "0xffffffFF",
"underline_color_inactive": "0x00000000",
"underline_thickness_active": 0.1,
"underline_thickness_inactive"
"font": "",
"label_scale": 0.21,
"label_margin": 0.5,
"corner_radius": 0
}
},
"grey_root_nav": {
"nav_pos": "bottom",
"scale": 0.07,
"background_color": "0x415059FF",
"horizontal_alignment": "left",
"has_separator": true,
"separator_color": "0x999999FF",
"separator_height": 0.6,
"separator_thickness": 0.8,
"corner_radius": 0,
"layout": "grid",
"grid_columns": "auto",
"item_config": {
"background_color_active": "0xEEE149FF",
"background_color_inactive": "0x00000000",
"outline_color_active": "0x00000000",
"outline_color_inactive": "0x00000000",
"label_color_active": "0x59595FFF",
"label_color_inactive": "0xffffffFF",
"underline_color_active": "0x00000000",
"underline_color_inactive": "0x00000000",
"underline_thickness_active": 0,
"underline_thickness_inactive"
"font": "",
"label_scale": 0.24,
"label_margin": 0.5,
"corner_radius": 0
},
"has_logo": true,
"logo_config": {
"icon": "@appdir@/assets/idealayer-
"layout": "fixed",
"width": 3.0,
"icon_scale": 0.4,
"icon_margin": 0.0,
"corner_radius": 0,
"background_color": "0x415059FF",
"outline_color": "0x00000000",
"icon_color": "0xFFFFFFFF",
"logo_after_buttons": true
}
},
"white_and_yellow_nav": {
"nav_pos": "bottom",
"scale": 0.07,
"background_color": "0xFFFFFFFF",
"horizontal_alignment": "left",
"has_separator": true,
"separator_color": "0x59595FFF",
"separator_height": 0.6,
"separator_thickness": 0.8,
"corner_radius": 0,
"margin": {
"left": 1,
"right": 0
},
"layout": "grid",
"grid_columns": "inherit",
"item_config": {
"background_color_active": "0x00000000",
"background_color_inactive": "0x00000000",
"outline_color_active": "0x00000000",
"outline_color_inactive": "0x00000000",
"label_color_active": "0x415059FF",
"label_color_inactive": "0x415059FF",
"underline_color_active": "0xEEE149FF",
"underline_color_inactive": "0x00000000",
"underline_thickness_active": 0.15,
"underline_thickness_inactive"
"font": "",
"label_scale": 0.24,
"label_margin": 0.5,
"corner_radius": 0
}
},
"floating_top_nav": {
"location": "top",
"scale": 0.1,
"background_color": "0x00000000",
"horizontal_alignment": "center",
"has_separator": false,
"separator_color": "0x00000000",
"separator_height": 0.6,
"separator_thickness": 0.8,
"corner_radius": 0,
"margin": { "left": 0, "right": 0, "top": 0, "bottom": 0 },
"padding": {
"left": 0.15,
"right": 0.15,
"top": 0.25,
"bottom": 0.25
},
"layout": "grid",
"grid_columns": "8",
"has_logo": false,
"item_config": {
"background_color_active": "0xeeeeeeff",
"background_color_inactive": "0xeeeeeeff",
"outline_color_active": "0x00000000",
"outline_color_inactive": "0x00000000",
"label_color_active": "0x575756ff",
"label_color_inactive": "0x575756ff",
"underline_color_active": "0x575756ff",
"underline_color_inactive": "0x00000000",
"underline_thickness_active": 0.1,
"underline_thickness_inactive"
"font": "",
"label_scale": 0.36,
"label_margin": 0.5,
"corner_radius": 0
}
}
}
}