Quick Brick TV Apps - Standard Component types and Cells styles

Introduction

A Quick Brick TV screen can contain one or more of the following components

• Hero Carousel
• Grid
• Horizontal List

and a user can select to use either

• Out of the box cell styles that have limited configuration possibilities using app-level / build-time SDK styling keys
• One of 2 power cells with run-time configuration possibilities

If a designer is used to working with QB mobile apps be aware that

• Component positioning on the TV screen is hard coded so it is not possible to control
  • Spacings of components from the top of the screen
  • Spacings between components e.g. between 1 horizontal rail and the next
• There is no group component support
• There is no header cell style - only text

Standard Hero Carousel 

The standard Hero Carousel component and cell looks like this

In any screen add the Hero component type

Characteristics

• The Hero component is a carousel with infinite scroll. Do not use it within a screen picker screen as you will not be able to navigate left from the carousel to the screen picker
• Cell image aspect ratio is 1500px x 500px
• If Item limit is set to 1 then you will see a single Hero on the sreen, it will not function as a carousel

Configure the Hero component by entering

• Item limit
  • Leave blank for unrestricted content length
• Attach to a data source type and feed
• Link to a target screen in the case of using appropriate feeds to e.g. the Hero contains Shows and the target screen links to episodes
• Cell style
  • Leave blank to use the standard Hero component
  • Select a specific Cell Style if using a Hero Power Cell replacement for the standard cell
  • Enable headers if required

Style the Standard Hero

Styling is controlled by the SDK keys at build time. For greater flexibility we recommend to use a power cell to replace the standard Hero

The relevant keys are

• Main text
  • The color of the text in below the image when the cell is not in focus
• Focused text color
  • The color of the text in below the image when the cell is in focus
• Background Colour
  • The color of the cell below the image when the cell is not in focus
• Focus
  • The color of the cell below the image when the cell is in focus 

Standard Grid and Horizontal Rail

Add the following components to your screen as required

Configure the Grid or List component by entering

• Item limit
  • Leave blank for unrestricted content length
• Attach to a data source type and feed
• Link to a target screen in the case of using appropriate feeds to e.g. the Hero contains Shows and the target screen links to episodes
• Cell style
  • Leave blank to use the standard Hero component
  • Select a specific Cell Style if using a Hero Power Cell replacement for the standard cell
  • Enable headers if required

Style the Standard Grid and List

Styling is controlled by the SDK keys at build time. For greater flexibility we recommend to use a power cell to replace the standard Hero

The relevant keys are

• Main text
  • The color of the text in below the image when the cell is not in focus
• Focused text color
  • The color of the text in below the image when the cell is in focus
• Background Colour
  • The color of the cell below the image when the cell is not in focus
• Focus
  • The color of the cell below the image when the cell is in focus

Image size is 454px x 254px