Configuring Pages

What is a page

In Tileboard, pages are the most basic type of organization. Pages hold groups and groups hold tiles.

Basic Example:

pages: [
  {
    title: 'Page title',
    bg: 'images/bg1.jpg',
    icon: 'mdi-home-outline',
    header: DEFAULT_HEADER,
    groups: [] // list of tile groups
  }
]

Configuration Variables:

• title = The name of the page (Required)
• bg = The link to the background image. (Optional)
• icon = The icon of the page that is displayed on the side menu. You can find all the icons in this website. you will write mdi- then the name of the icon, for example, an icon names ab-testing will be written like mdi-ab-testing. (Optional)
• header = A header is the top part of the page that displays various elements such as weather and time. This element is highly customizable and more information can be found here. Defualts to the theme. (Optional)
• tilesize = The size of each tile. If defined, it will override the tile size that is set globally for only this page. Defualts to the theme (Optional)
• groupmargininCss = The space between groups. If defined, it will override the group margin that is set globally for only this page. Defualts to the theme (Optional)
• hidden = hides the page if true. can be a boolean or function that returns true or false. (Optional)
• groups = Defines groups on the page which store tiles. You can find more information on the next step

Example with all variables

pages: [
  {
    title: 'Page title',
    bg: 'images/bg1.jpg',
    icon: 'mdi-home-outline',
    header: DEFAULT_HEADER,
    tileSize: 3,
    groupMarginCss: '20px 40px',
    hidden: Boolean | Function,
    groups: [] // list of tile groups
  }
]

Adding this to our Tileboard

Let's add this to our tileboard that we started on the previous step.

With a page called Home that has an icon of a house and a background image that has a name in bg1.jpg looks like this.

var CONFIG = {
   customTheme: null,
   transition: TRANSITIONS.ANIMATED_GPU
   entitySize: ENTITY_SIZES.NORMAL,
   tileSize: 150,
   tileMargin: 6,
   serverUrl: "http://192.168.86.27:8123",
   wsUrl: "ws://192.168.86.27:8123/api/websocket",
   authToken: null,
   pages: [
     {
       title: 'Home',
       bg: 'images/bg1.jpg',
       icon: 'mdi-home-outline',
       header: DEFAULT_HEADER,
       groups: [] // list of tile groups
    }
  ]
}

Now the next step to completing out Tileboard is to add groups