Advanced config

Note: This documentation is incomplete and still a work in progress

Here's a list of all available configuration fields for TileBoard:

Main TileBoard Configuration

Home Assistant Settings

• serverUrl The URL to your HomeAssistant server. Required Example: serverUrl: 'http://192.168.12.34:8123'

• wsUrl The URL to your HomeAssistant Websocket connection. Required Example: wsUrl: 'ws://192.168.12.34:8123/api/websocket' If HomeAssistant or TileBoard are set up to utilize SSL, you will need to use wss:// in the wsURL.

TileBoard Theme/Layout Settings

• transition The transition effect used between Pages. Valid options are ANIMATED_GPU, ANIMATED or BASIC. Example: transition: ANIMATED_GPU

• tileSize The default size (in pixels) of a tile. Required Example: tileSize: 150

• tileMargin The default margin (in pixels) between tiles. Example: tileMargin: 6

• customTheme A custom theme to use Optional - Default: null Valid options are CUSTOM_THEMES.TRANSPARENT, CUSTOM_THEMES.WIN95, CUSTOM_THEMES.MOBILE, CUSTOM_THEMES.WINPHONE Example: customTheme: CUSTOM_THEMES.TRANSPARENT

• groupMarginCss CSS string for group margins Example: groupMarginCss: '20px 40px'

• timeFormat 12 or 24 hour clock. Optional - Default: 24 Example: timeFormat: 12

• menuPosition Position of the page menu Optional - Default: MENU_POSITIONS.LEFT Valid options are MENU_POSITIONS.LEFT, MENU_POSITIONS.BOTTOM Example: menuPosition: MENU_POSITIONS.BOTTOM

• hideScrollbar Whether or not to hide the browser scrollbars Optional - Default: false Example: hideScrollbar: true

• entitySize Default entity sizes Optional - Default: ENTITY_SIZES.NORMAL Valid options are ENTITY_SIZES.SMALL, ENTITY_SIZES.NORMAL, ENTITY_SIZES.BIG Example: entitySize: ENTITY_SIZES.SMALL

Pages

• title of page (not currently used)
• bg link to bg image
• icon icon class for sidebar
• head import a page template as a header
• tileSize override the global tileSize value for the current page
• groupMarginCss override global groupMarginCss for the current page
• groups list of groups

Here is a detailed guide on Pages

Groups

• title Title to display above the group
• width count of tiles horizontally
• height count of tiles vertically
• groupMarginCss override default margin of tiles for the current group
• items list of tiles

Here is a detailed guide on groups

Tiles

• position The position of the tile in the group, in [x, y] format. Example: [0, 0].
• type The type of tile. See tile types documentation for a list of options.
• id The entity_id from HomeAssistant.
• title Title to display on the tile (Optional).
• subtitle Subtitle to display on the tile (Optional).
• width How many tiles wide. (Optional) Defaults to 1.
• height How many tiles tall. (Optional) Defaults to 1.
• states Map a state from HomeAssistant to a different value for TileBoard to display (Optional).
• state Set a custom state for the tile. (Optional)
• icons Set the icon for a tile Dynamic. All icons can be found here.
• icon Set a static icon for a tile Static. All icons can be found here.
• bg Link to a background image for the tile
• bgSuffix Same as bg, but with the serverUrl included
• bgOpacity A decimal between 0 and 1 for the background opacity
• theme Override default theme for the tile
• classes A list of classes to be appended to the tile element
• slides A list of slide images to use for the background. Currently, a maximum of 3 slides are supported
• action Define a custom action on click. You can override the default action for any tile type. This function will be evaluated when the user clicks the tile.
• secondaryAction Define a custom secondary action (on long press). You can override the default secondary action for any tile type. This function will be evaluated when the user long-presses the tile.
• hidden hides the tile

Here is a detailed guide on tiles