EPG – Overview and creation of EPG in Roku using TimeGrid

In the digital television and OTT world, convenience and user-friendly navigation are key to enhancing the viewing experience. One such feature that has become integral to modern TV is the Electronic Program Guide (EPG). But what exactly is an EPG, and how does it work? This blog post will take you through the ins and outs of an EPG guide, its benefits, and how we can create the EPG in Roku with the help of the TImeGrid component.

What is an EPG?

An Electronic Program Guide (EPG) is an interactive on-screen guide that provides viewers with detailed information about current and upcoming TV programs. It allows users to see a schedule of shows, typically spanning several days in advance and can be accessed through a simple press of a button on a TV remote.

Unlike traditional printed TV listings, EPGs are dynamic, providing real-time information that can be updated frequently by broadcasters. They offer metadata about TV shows, such as titles, descriptions, cast members, and even parental guidance ratings, helping users make informed decisions on what to watch.

Key Features of an EPG Guide

• TV Schedule Overview
  The most basic and essential feature of an EPG guide is the ability to view a full TV schedule. Users can browse through the list of channels and see what programs are airing, along with their start and end times. Most guides cover up to 7 to 14 days of programming.
• Program Information
  Clicking on a specific show or movie in the EPG guide brings up detailed information. This typically includes:
• • Title and Genre
  • Synopsis or plot summary
  • Episode information (for series, including season and episode numbers)
  • Cast and Crew details
  • Parental Ratings and content advisories
  • Duration of the program
• Search and Filtering Options
  EPGs often feature robust search functions that allow viewers to find programs based on titles, genres, or keywords. Some guides even allow for filtering based on preferences, such as sports, movies, kids’ content, or news.
• Recordings and DVR Integration
  Integration with DVR (Digital Video Recorder) functionality is one of the most convenient features of modern EPG guides. Users can schedule recordings directly from the EPG, allowing them to record an episode or even an entire series.

Benefits of an EPG Guide

• Convenience and Ease of Use
  The primary advantage of an EPG is the ease with which viewers can browse and discover new content. Instead of manually flipping through channels, an EPG provides a clear and organized way to see what’s available, improving user experience.
• Personalization
  Many modern EPG systems allow for a degree of personalization, such as remembering favorite channels or curating suggestions based on past viewing habits. This tailored experience makes it easier to find content that matches individual preferences.
• Enhanced Viewing Control
  Through reminders, scheduled recordings, and DVR features, EPG guides offer control over what and when you watch. If you can’t be at home when your favorite show airs, simply schedule a recording and watch it at your convenience.

Challenges and Limitations of EPG Guides

While EPGs are highly convenient, they are not without their drawbacks:

• Outdated or Incorrect Information
  Sometimes, the information displayed on the EPG may not be accurate due to last-minute changes in programming by broadcasters.
• Complexity
  Some viewers, particularly older generations, may find the advanced features of modern EPGs confusing or difficult to navigate, especially if they are used to traditional TV-watching habits.
• Regional Restrictions
  EPG services often vary based on geographic location. Some features may not be available in certain countries, or the range of programs listed may be limited due to licensing agreements.
• Data Loading
  EPGs consisting lots of channels and program data. Sometimes it takes so much time to load the channel program data.

How to create EPG in Roku?

There are several ways to create an EPG guide in Roku, we can create a custom EPG through the help of Rowlist and other grid components. Or we can create it by using the Timegrid component of Roku.

Creation of an EPG using TImegrid is the most efficient way, easy to use, less time-consuming, and it provides an optimized and quality structure of an EPG.

What is a Timegrid?

TimeGrid is a component provided by Roku used to create an EPG guide. It consists of several sections that display information about channels and programs along with their start time and end times.

Timegrid EPG

Key elements of TimeGrid

Here is the list of key elements of TimeGrid which makes the structure of EPG.

Channel column

• The first left column represents the channel column. We can add as many channels as we want.
• We can able to customize every channel column as per our requirements.
• For customization of the channel column, we use the channelInfoComponentName field. Need to mention our custom channel component name in this field.

Program grid

• It is the grid that consists of the channel program cells in columns of the channel row.
• We can control the program cell’s data with the help of some fields provided by the Timegrid component.

TimeBar

• TimeBar helps to indicate the start time of the programs.
• We can also customize the UI and timeframes of the time bar.

Now Bar

• Now bar is the element that is used for indicating the current time.

Let’s integrate the Timegrid to Create an EPG

For integrating the timegrid, we need to add the Timegrid component indicating with <Timegrid /> tag in the Scenegraph XML file.

<TimeGrid
id="Grid"
channelInfoCOmponenetName="ChannelInfoComponent"
itemSize="[1280,60]"
duration="7200"
programTitleFocusedColor="#000000"
overlayBitmapUri=""
scrollspeed="5"
channelNoDataText="Loading..."
vertFocusAnimationStyle="floatingFocus"
translation="[0,400]">
</TimeGrid>

After, adding the Timegrid tag with the following details, we need to initialize it into the mainscene.brs file.

function initialiseEPG()
    m.grid = m.top.findnode.findnode("grid")
    date = CreateObject("roDateTime")
    m.grid.contentStartTime = date.AsSeconds()
    GetChannelContent()
end function

Now, you can able to see the empty EPG(EPG with No channel-program data) on the screen. And now we need to populate the channel and program data. We used the sample JSON file data for demonstration but in the real channel case, you can fetch the same data through the API.

For populating the Channel and program data Timegrid provides the content field, we can create a content node for channels and pass that node to this content field. Similarly, we can also populate the program data into the grid.

1. Code for Creating channels in the list.

sub GetChannelContent()
' make an API call to get the list of channels

raw = ReadASCIIFile("pkg:/api/1_channels.json")
json = ParseJSON(raw)
m.gridContent = createObject("roSGNode","ContentNode")
for each channel in json
' make another API call to get detailed metadata for each channel
raw = ReadASCIIFile("pkg:/api/" + channel + ".json")
channelJSON = ParseJSON(raw)

' create a node for the channel and set its metadata fields
channelNode = m.gridContent.createChild("ContentNode")
channelNode.title = channelJSON.channel.call_sign
if channelJSON.channel.major <> invalid
channelNode.title += " " + channelJSON.channel.major.ToStr()
end if
if channelJSON.channel.minor <> invalid
channelNode.title += "." + channelJSON.channel.minor.ToStr()
end if
channelNode.id = channelJSON.object_id.ToStr()
end for
m.grid.content = m.gridContent
createProgramCells()
end sub

2. Code for Populating the Programs according to the channel rows:

function fetchPrograms(channel as dynamic)
    id = channel.id
    ' we'll fake the timestamps for demo purposes so that there Is
    ' always content displayed for the current time
    dt = CreateObject("roDateTime")
    now = dt.AsSeconds()
    playStart = now - (now mod 1800) - 3600

    ' make an API call to get the guide data for the channel
    raw = ReadASCIIFile("pkg:/api/3_guide_" + id + ".json")
    json = ParseJSON(raw)

    
    for each program in json
        ' create a node for the program and set its metadata fields
        children = []
        if program.title <> invalid and program.title <> ""
            programNode.title = program.title
        else if program.airing_details.show_title <> invalid and program.airing_details.show_title <> ""
            programNode.title = program.airing_details.show_title
        else
            programNode.title = "---"
        end if
        if program.season_number <> invalid and program.episode_number <> invalid
            programNode.description = "S" + program.season_number.ToStr() + " E" + program.episode_number.ToStr()
        end if
        programNode.playStart = playStart
        programNode.playDuration = program.airing_details.duration

        children.Push(programNode)
        playstart += programNode.playDuration
    end for

    ' update the row node with all the programs for the channel as children
    ' so they will be displayed in the view
    channel.Update(children)
end function

Conclusion

By using the TimeGrid component, you can create a powerful, time-based Electronic Program Guide (EPG) in Roku that provides users with a clear and easy-to-navigate schedule of live programming. The process involves setting up the TimeGrid, populating it with channel and program data, and handling user navigation.

This approach allows you to build an engaging, user-friendly EPG experience for your Roku-channel.