Skip to main content

Showcase app theming and configuration

Updated

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",
  • 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"
  },
  "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
  },
  "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
  },

 

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
  },

 

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
  },

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"
  },

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"
    }
  }
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": {...}
  },

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:
  • "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)
 For each named theme you have the following settings:
  • "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": {
        "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
        }
      }
    }
  }

Related articles

Powered by Zendesk