Building an Electronic Program Guide (EPG) on Roku with BrightScript

Building an Electronic Program Guide (EPG) on Roku with BrightScript
An Electronic Program Guide (EPG) is a cornerstone of streaming applications, enabling users to explore channel schedules and program details in an organized, interactive way. On Roku, creating an EPG involves leveraging BrightScript and its powerful TimeGrid node. Here, we'll walk you through building an EPG for your Roku app while addressing layout, data handling, and common challenges.

Understanding the Layout of an EPG
Before diving into code, let's understand the basic layout of an EPG:

1.Channel List:-
Displays channel numbers or logos for easy identification.
Programs:-
2.Shows program details, including titles and scheduled start times.
3.Time Slots:-
Each time slot spans 30 minutes, giving users a clear view of program schedules.

How to Display Data on the User Interface
The TimeGrid node in BrightScript is the backbone of the EPG layout. Below is a sample function that sets up the TimeGrid with essential properties and loads data dynamically.

sub Home_screenTimegridData()
m.timeGrid = m.top.findNode("timeGrid")

' Set up TimeGrid properties
m.timeGrid.numRows = 0
m.timeGrid.maxDays = 2
m.timeGrid.translation = [95, 580]
m.timeGrid.contentStartTime = GetCurrentTimeRounded()
m.timeGrid.duration = 7200 ' Duration in seconds (2 hours)
m.timeGrid.channelNoDataText = "Loading..."
m.timeGrid.nowBarBlendColor = "0xFFFFFF"
m.timeGrid.programTitleFocusedColor = "#FFFFFF"
m.timeGrid.programTitleFont = getFont(30, "pkg:/fonts/HelveticaNeueMedium.ttf")

' Assign images for custom styling
m.timeGrid.nowBarBitmapUri = "pkg:/images/epg_timebar.png"
m.timeGrid.focusBitmapUri = "pkg:/images/epg_program_focus.png"
m.timeGrid.programBackgroundBitmapUri = "pkg:/images/epg_program.png"

' Observe user interactions
m.timeGrid.observeField("programSelected", "epgProgramSelected")
m.timeGrid.observeField("programFocused", "epgProgramFocused")
m.timeGrid.observeField("channelFocused", "epgChannelFocused")
end sub

function GetCurrentTimeRounded() as Integer
currentTime = CreateObject("roDateTime")
t = currentTime.AsSeconds()
remainder = t mod (30 * 60)
return t - remainder ' Round to the nearest 30-minute mark
end function

Challenges & Solutions

1.Getting TMS ID and Index
It's crucial to correctly fetch the program details, including the TMS ID (unique identifier for TV programs). One effective way is:
m.notdatafound = m.epg_channelList.data[m.channelIndex].program[m.programIndex]
if m.notdatafound <> invalid
m.firstElementData = m.epg_channelList.data[m.channelIndex].program[m.programIndex].TMSId
endif

2. set Utc Time. 
timestamp=item.start
num = timestamp
dateTest = CreateObject("roDateTime")
' dateTest.AsSeconds(num)
dateTest.FromSeconds(num)

dateTest.ToLocalTime()
? dateTest.asTimeStringLoc("short"),"epochtime21345"

Conclusion:-
Creating an EPG on Roku using BrightScript and nodes like TimeGrid is both rewarding and challenging. By understanding the layout, focusing on smooth data handling, and addressing common hurdles, you can deliver a user-friendly guide that elevates your streaming app's functionality.