Header configuration - resoai/TileBoard GitHub Wiki

header object can be placed directly in CONFIG object, or to the each page you have. In first case header will be global, in second case - well, yes, only for that page.

header object may have next fields:

• styles are js-css styles e.g. {marginLeft: '100px'};
• left array of items in the left part of header
• right yes, you get it right

There's few HEADER_ITEMS types:

• TIME time in format you've provided in CONFIG (24 default)
• DATE date in custom format ('EEEE, LLLL dd' is default)
• DATETIME just a combination of two above
• WEATHER similar to the TYPES.WEATHER object with fields, icon, icons fields
• CUSTOM_HTML custom html string

Example

Here provided default TileBoard's header

{
   styles: {
      margin: '30px 130px 0',
      fontSize: '28px'
   },
   left: [
      {
         type: HEADER_ITEMS.DATETIME,
         dateFormat: 'EEEE, LLLL dd', //https://docs.angularjs.org/api/ng/filter/date
         styles: {
            margin: '0'
         }
      }
   ],
   right: [
      {
         type: HEADER_ITEMS.CUSTOM_HTML,
         html: 'Welcome to the <b>TileBoard</b>',
         styles: {
            margin: '40px 0 0'
         }
      },
      // Uncomment weather object to get weather in your header.
      /*{
         type: HEADER_ITEMS.WEATHER,
         styles: {
            margin: '0 0 0'
         },
         icon: '&sensor.dark_sky_icon.state',
         icons: {
            'clear-day': 'clear',
            'clear-night': 'nt-clear',
            'cloudy': 'cloudy',
            'rain': 'rain',
            'sleet': 'sleet',
            'snow': 'snow',
            'wind': 'hazy',
            'fog': 'fog',
            'partly-cloudy-day': 'partlycloudy',
            'partly-cloudy-night': 'nt-partlycloudy'
         },
         fields: {
            summary: '&sensor.dark_sky_summary.state',
            temperature: '&sensor.dark_sky_temperature.state',
            temperatureUnit: '&sensor.dark_sky_temperature.attributes.unit_of_measurement',
         }
      }*/
   ]
};

You can configure header as you want. Please make sure you've changed all margins and paddings for your TileBoard styles.