Roku - Power Cell

Introduction

The Roku Power Cell is a plugin and offers more options for design flexibility above the simple cell.

Main features

• Cell image with up to 3 layers of image in the Z-plane
• Background color - cell non-focussed and in-focus
• 4 text entries: Title, subtitle, description, extra
• Tags

Setup

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

Attaching Power Cell to a component

In Zapp Studio go to the Cell Styles tab and add a Roku Power 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 TV Cell. Save your settings.

Style the Cell

Now go back to your created cell and use the styling parameters. The Power Cell has many more configurable parameters over the simple cell.

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

Row Header Settings

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

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

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

Focus Settings

The power 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

Background Rectangle and Background Rectangle (Focused)

A background color can be applied to the cell either as a style or to indicate state change between in-focus and not-in-focus cells

Configure the background color with the styling fields

Use the X Y co-ordinates to create an offset effect

Focus Rectangle

Focus rectangle is a styling element that can be applied to a cell and will show the configured color on the top and left side of the cell. Use negative X Y settings to control the leading position relative to the image.

Main Image, Image 2, Image 3

Up to 3 images in the Z plane can be displayed in a Power Cell, e.g. main image, background placeholder image, overlay. Enable each image as required.

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.

Text Label, Subtitle Label, Description Label, Extra Label

Show up to 4 text fields in the cell below the image. Enable each one as required and attach to the relevant field in the data source.

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
• Max Lines: Set the maximum number of lines for the text field that will show regardless if the data in the feed is longer. Last line will truncate with ... if so
• 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

Tags

Debug