Roku - Simple Cell

Introduction

A Cell is attached to a component such as a grid or list and then styled in a similar principle to Quick Brick mobile and TV apps Power Cells.

Roku has 2 specific Cells of its own: the Simple Cell and the Power Cell.

The Simple Cell is an image with focusability and a single text element (e.g.title, summary etc.) 

Example 1

Example 2

Setup

Ensure the Simple Cell plugin is in your app pre-build

Attaching Simple Cell to a component

In Zapp Studio go to the Cell Styles tab and add a Simple Cell. You can add as many as you wish and style them individually as required.

In the configuration panel select EDIT INFO and rename the cell. It is best to give it an identifiable use-case name e.g. Live Programs Cell. Save your settings

Attach the cell to a component

In Zapp Studio select your desired component and use the Cell Styles Select button (1) to attach your created cell to this component.

Style the Cell

Now go back to your created cell and use the styling parameters

Cell Layout

Cell Width and Height Set cell width and height in pixels

Row Item Spacing Set the spacing between cells within a component in X and Y pixel dimensions e.g. 44,0. Use of the X or Y dimension depends whether the item is

• A horizontal rail (use X)
• A grid (use X, Y)
• A grid with column number set to 1 (use Y)

Show loading item Enable this toggle to show the placeholder image whilst content is loading

Row Spacing Set the pixel gap between rows

Focus X Offset How much the first item in a row is offset relative to the left hand edge. Positive values push the row to the right

e.g. a value of 0

or a value of 100

or a value of -100

Row Header setting

These settings only apply when this style is applied to Horizontal List, List, or Full Screen Rails component

• Enable a row counter to show the number of items in the row on the top right hand corner

Control the component header settings. The header text comes from the Data Feed Title for the component

• Show Header Enable headers and set the header font attributes and position the header relative to the component

Focus Settings

The simple cell can control focus for the user by using an image overlay over the cell. By default the cell has an asset loaded. If required this can be replaced by one from the asset bundle file Roku - SDK Assets and Assets Bundle Upload Plugin

Focus behaviour can be set horizontally and vertically across components

• Fixed: The focus highlight is anchored over the first cell in a row and the row scrolls behind the focus
• Floating: The focus highlight moves across the screen until the last visible item in the screen and then the rest of the row scrolls behind the focus until the end of the row
• Fixed focus wrap: Not recommended to use

Main Image

Configure the image to be displayed in the cell

Show: Enable Image toggle

Data source type: Select where the image will come from in your feed

• If the data source type is static, then the value will be whatever you enter here. 
• If your data source type is [...]field, then the value here will contain the full path of a field on your item. In this case use the format "path.to.data" - where the path is where to find the data on your entry
  • Note: On roku, the full json that is in your dsp feed can be found at entry.json, so a value of "title" will retrieve entry.title, whereas "json.extensions.subtitle" will resolve to entry.extensions.subtitle
• Common Field

  • Field: Shown when the data source type is Common. Choose the source in your feed to be used to retrieve the image location

• Custom Field: Use this if you wish to define a custom entry from your feed for the source of the text

Use legacy resize arguments: If true, the image will have query params appended to it, to get the correct size. IT IS VITAL you use this on an Applicaster CMS app, or you will crash your Roku. If this is false, then please ensure your feed is giving you images at size you are displaying them.

Image Visibility:

Position Y, X: Define the position of the image within the cell, if not occupying the full cell width or height

Width / Height: Define the image container size within the cell

Place holder image: The source for your placeholder image if the main image is missing in a feed Roku - SDK Assets and Assets Bundle Upload Plugin

Scaling: Image scaling to the cell dimensions: Select from 

• Scale to fit: Fit to the available cell width or height but retain image aspect ratio. Vertical or horizontal background bars may be seen depending which dimension is less than the cell dimension when scaled.
• Scale to fill: Fill the available cell. Aspect ratio will be broken.
• Scale to zoom: (cover) Fill the available cell. Retain image aspect ratio. Parts of image outside the cell will not be visible.

Image 2

A second image can be placed over the top of a Main Image. It can be sourced either from the feed or as a static image. The use case for Image 2 might be

• A fixed overlay image to provide an artistic gradient
• An overlay image to present a play icon for live content "on now"

The image can be configured with its own source and styling fields as per Main Image. 

Title label

Show: Enable or disable the text label

Data Source type: Enter the binding value for the field.

• If the data source type is static, then the value will be whatever you enter here. I
• f your data source type is []field, then the value here will contain the full path of a field on your item. In this case use the format "path.to.data" - where the path is where to find the data on your entry
  • Note: On roku, the full json that is in your dsp feed can be found at entry.json, so a value of "title" will retrieve entry.title, whereas "json.extensions.subtitle" will resolve to entry.extensions.subtitle
• Common Field

  • Field: Shown when the data source type is Common. Choose the information to be taken from the feed as:

    • Title
    • Description
    • Subtitle
    • Summary
• Custom Field: Use this if you wish to define a custom entry from your feed for the source of the text
• Static Value
• Position X, Y: set the position of the text in the cell. Values are relative to the horizontal and vertical align settings.  Careful use of the  Y value will allow you to place the text over the image or outside the image
• Width: The available width for the text. Any text string longer than this will truncate with elipsis
• Height
• Is Title Scrolling: If enabled any text string longer than the value set in width will scroll when the cell is in focus
• Max Lines: Set the maximum amount of text lines to display if the text string is long enough
• Horizontal and vertical align: Set as Left, Centre, Right, Top Middle, Bottom
• Font, Size, Color: The text font settings
• Different style on focus: Enable if you wish a different font, size, color setting for the in-focus cell