Skip to main content
ChannelBanner is a SceneGraph Group component that slides into view whenever the active channel changes. It displays the channel number, name, category, and logo alongside a live-status label and a network connectivity indicator. After a fixed display period it fades out automatically.

​
Display timing

Timing constants are defined in AppConstants:
ConstantValueDescription
BANNER_MS3000 msHow long the banner remains fully visible before fading
BANNER_FADE_MS300 msApproximate fade-out duration (6 ticks × 50 ms timer)
Internally, a hideTimer with duration="3" (seconds) triggers the fade sequence. A 50 ms repeating fadeTimer drives opacity from 1.0 to 0.0 in steps of approximately 0.1667 per tick.

​
Interface fields

​
channelData
assocarray
Associative array describing the channel to display. Setting this field resets and shows the banner immediately. Triggers onChannelDataChanged.
KeyTypeDescription
numberintegerChannel number shown in lblNumber
namestringChannel name shown in lblName
groupstringCategory/group label shown in lblCategory
logostringURL of the channel logo image (chLogo Poster)
​
networkOnline
boolean
default:"true"
Controls the network status label (lblNetwork). true renders "RED: OK" in green (0x9DFFB2FF); false renders "RED: OFF" in red (0xFF9D9DFF). Triggers onNetworkOnlineChanged.
​
statusText
string
default:""
Custom status string displayed in lblStatus. Defaults to "En vivo" when empty. Triggers onStatusTextChanged.

​
What information it shows

The banner card contains the following visual elements:

Channel number

Large bold label (lblNumber) showing the numeric channel ID.

Channel logo

Poster node (chLogo) rendered at 136 × 136 px design size. Hidden when channelData.logo is empty.

Channel name

Medium bold label (lblName) with up to two lines of text.

Status

Small label (lblStatus) for playback state, e.g. "En vivo".

Category

Small label (lblCategory) showing the channel group.

Network indicator

Small label (lblNetwork) in the top-right corner showing RED: OK or RED: OFF.

​
XML component definition

<component name="ChannelBanner" extends="Group">
    <interface>
        <field id="channelData"   type="assocarray" onChange="onChannelDataChanged" />
        <field id="networkOnline" type="boolean"    value="true" onChange="onNetworkOnlineChanged" />
        <field id="statusText"    type="string"     value=""     onChange="onStatusTextChanged" />
    </interface>
    ...
    <children>
        <Rectangle id="bannerBg"     width="760"  height="236" color="0x14234FCC" />
        <Rectangle id="bannerAccent" width="8"    height="236" color="0x2D57C1FF" />
        <Label     id="lblNumber"    font="font:LargeBoldSystemFont" />
        <Poster    id="chLogo"       width="136"  height="136" loadDisplayMode="scaleToFit" />
        <Label     id="lblName"      font="font:MediumBoldSystemFont" maxLines="2" />
        <Label     id="lblStatus"    font="font:SmallSystemFont" />
        <Label     id="lblCategory"  font="font:SmallSystemFont" />
        <Timer     id="hideTimer"    duration="3"    repeat="false" />
        <Timer     id="fadeTimer"    duration="0.05" repeat="true" />
    </children>
</component>

​
Triggering the banner

Set channelData to display the banner for the new channel. The component immediately sets opacity = 1.0, updates all labels and the logo, then starts hideTimer. When hideTimer fires, fadeTimer begins decrementing opacity until the banner is invisible. 
channelBanner.channelData = {
    number: 12
    name: "Canal 12 HD"
    group: "Noticias"
    logo: "https://cdn.example.com/logo-12.png"
}
The banner uses a responsive layout computed by ApplyResponsiveLayout via GTV_GetLayoutContext. All design coordinates (e.g. 760 px wide card) are scaled uniformly to the actual display resolution.

Build docs developers (and LLMs) love

Get started for freeTalk to us