{"id":67181,"date":"2024-10-21T11:18:07","date_gmt":"2024-10-21T05:48:07","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=67181"},"modified":"2024-10-23T22:12:51","modified_gmt":"2024-10-23T16:42:51","slug":"epg-overview-and-creation-of-epg-in-roku-using-timegrid","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/epg-overview-and-creation-of-epg-in-roku-using-timegrid\/","title":{"rendered":"EPG \u2013 Overview and creation of EPG in Roku using TimeGrid"},"content":{"rendered":"<p>In the digital television and <a href=\"https:\/\/www.tothenew.com\/media-and-entertainment-solutions\">OTT<\/a> 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.<\/p>\n<h3>What is an EPG?<\/h3>\n<p>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.<\/p>\n<p>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.<\/p>\n<h3>Key Features of an EPG Guide<\/h3>\n<ul>\n<li><strong>TV Schedule Overview<\/strong><br \/>\nThe 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.<\/li>\n<li><strong>Program Information<\/strong><br \/>\nClicking on a specific show or movie in the EPG guide brings up detailed information. This typically includes:<\/li>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Title and Genre<\/li>\n<li>Synopsis or plot summary<\/li>\n<li>Episode information (for series, including season and episode numbers)<\/li>\n<li>Cast and Crew details<\/li>\n<li>Parental Ratings and content advisories<\/li>\n<li>Duration of the program<\/li>\n<\/ul>\n<\/li>\n<li><strong>Search and Filtering Options<\/strong><br \/>\nEPGs 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&#8217; content, or news.<\/li>\n<li><strong>Recordings and DVR Integration<\/strong><br \/>\nIntegration 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.<\/li>\n<\/ul>\n<h3>Benefits of an EPG Guide<\/h3>\n<ul>\n<li><strong>Convenience and Ease of Use<\/strong><br \/>\nThe 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\u2019s available, improving user experience.<\/li>\n<li><strong>Personalization<\/strong><br \/>\nMany 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.<\/li>\n<li><strong>Enhanced Viewing Control<\/strong><br \/>\nThrough reminders, scheduled recordings, and DVR features, EPG guides offer control over what and when you watch. If you can\u2019t be at home when your favorite show airs, simply schedule a recording and watch it at your convenience.<\/li>\n<\/ul>\n<h3>Challenges and Limitations of EPG Guides<\/h3>\n<p>While EPGs are highly convenient, they are not without their drawbacks:<\/p>\n<ul>\n<li><strong>Outdated or Incorrect Information<\/strong><br \/>\nSometimes, the information displayed on the EPG may not be accurate due to last-minute changes in programming by broadcasters.<\/li>\n<li><strong>Complexity<\/strong><br \/>\nSome 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.<\/li>\n<li><strong>Regional Restrictions<\/strong><br \/>\nEPG 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.<\/li>\n<li><strong>Data Loading<\/strong><br \/>\nEPGs consisting lots of channels and program data. Sometimes it takes so much time to load the channel program data.<\/li>\n<\/ul>\n<h3>How to create EPG in Roku?<\/h3>\n<p>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 <strong>Timegrid<\/strong> component of Roku.<\/p>\n<p>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.<\/p>\n<h3>What is a Timegrid?<\/h3>\n<p>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.<\/p>\n<div id=\"attachment_67193\" style=\"width: 635px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-67193\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-67193 size-large\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/09\/timegrid-1024x576.jpg\" alt=\"EPG\" width=\"625\" height=\"352\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/09\/timegrid-1024x576.jpg 1024w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/timegrid-300x169.jpg 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/timegrid-768x432.jpg 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/timegrid-1536x864.jpg 1536w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/timegrid-624x351.jpg 624w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/timegrid.jpg 1920w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><p id=\"caption-attachment-67193\" class=\"wp-caption-text\">Timegrid EPG<\/p><\/div>\n<h4>Key elements of TimeGrid<\/h4>\n<p>Here is the list of key elements of TimeGrid which makes the structure of EPG.<\/p>\n<p><strong>Channel column<\/strong><\/p>\n<ul>\n<li>The first left column represents the channel column. We can add as many channels as we want.<\/li>\n<li>We can able to customize every channel column as per our requirements.<\/li>\n<li>For customization of the channel column, we use the <strong>channelInfoComponentName<\/strong> field. Need to mention our custom channel component name in this field.<\/li>\n<\/ul>\n<p><strong>Program grid<\/strong><\/p>\n<ul>\n<li>It is the grid that consists of the channel program cells in columns of the channel row.<\/li>\n<li>We can control the program cell&#8217;s data with the help of some fields provided by the Timegrid component.<\/li>\n<\/ul>\n<p><strong>TimeBar<\/strong><\/p>\n<ul>\n<li>TimeBar helps to indicate the start time of the programs.<\/li>\n<li>We can also customize the UI and timeframes of the time bar.<\/li>\n<\/ul>\n<p><strong>Now Bar<\/strong><\/p>\n<ul>\n<li>Now bar is the element that is used for indicating the current time.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3>Let&#8217;s integrate the Timegrid to Create an EPG<\/h3>\n<p>For integrating the timegrid, we need to add the Timegrid component indicating with &lt;Timegrid \/&gt; tag in the Scenegraph XML file.<\/p>\n<pre style=\"text-align: justify; padding-left: 40px;\">&lt;TimeGrid\r\nid=\"Grid\"\r\nchannelInfoCOmponenetName=\"ChannelInfoComponent\"\r\nitemSize=\"[1280,60]\"\r\nduration=\"7200\"\r\nprogramTitleFocusedColor=\"#000000\"\r\noverlayBitmapUri=\"\"\r\nscrollspeed=\"5\"\r\nchannelNoDataText=\"Loading...\"\r\nvertFocusAnimationStyle=\"floatingFocus\"\r\ntranslation=\"[0,400]\"&gt;\r\n&lt;\/TimeGrid&gt;<\/pre>\n<p>After, adding the Timegrid tag with the following details, we need to initialize it into the mainscene.brs file.<\/p>\n<pre>function initialiseEPG()\r\n\u00a0 \u00a0 m.grid = m.top.findnode.findnode(\"grid\")\r\n\u00a0 \u00a0 date = CreateObject(\"roDateTime\")\r\n  \u00a0 m.grid.contentStartTime = date.AsSeconds()\r\n    GetChannelContent()\r\nend function<\/pre>\n<p>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.<\/p>\n<p>For populating the Channel and program data Timegrid provides the <strong>content<\/strong> 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.<\/p>\n<p><strong>1. Code for Creating channels in the list.<\/strong><\/p>\n<pre>sub GetChannelContent()\r\n' make an API call to get the list of channels\r\n\r\nraw = ReadASCIIFile(\"pkg:\/api\/1_channels.json\")\r\njson = ParseJSON(raw)\r\nm.gridContent = createObject(\"roSGNode\",\"ContentNode\")\r\nfor each channel in json\r\n' make another API call to get detailed metadata for each channel\r\nraw = ReadASCIIFile(\"pkg:\/api\/\" + channel + \".json\")\r\nchannelJSON = ParseJSON(raw)\r\n\r\n' create a node for the channel and set its metadata fields\r\nchannelNode = m.gridContent.createChild(\"ContentNode\")\r\nchannelNode.title = channelJSON.channel.call_sign\r\nif channelJSON.channel.major &lt;&gt; invalid\r\nchannelNode.title += \" \" + channelJSON.channel.major.ToStr()\r\nend if\r\nif channelJSON.channel.minor &lt;&gt; invalid\r\nchannelNode.title += \".\" + channelJSON.channel.minor.ToStr()\r\nend if\r\nchannelNode.id = channelJSON.object_id.ToStr()\r\nend for\r\nm.grid.content = m.gridContent\r\ncreateProgramCells()\r\nend sub<\/pre>\n<p><strong>2. Code for Populating the Programs according to the channel rows:<\/strong><\/p>\n<pre>function fetchPrograms(channel as dynamic)\r\n\u00a0 \u00a0 id = channel.id\r\n\u00a0 \u00a0 ' we'll fake the timestamps for demo purposes so that there Is\r\n\u00a0 \u00a0 ' always content displayed for the current time\r\n\u00a0 \u00a0 dt = CreateObject(\"roDateTime\")\r\n\u00a0 \u00a0 now = dt.AsSeconds()\r\n\u00a0 \u00a0 playStart = now - (now mod 1800) - 3600\r\n\r\n\u00a0 \u00a0 ' make an API call to get the guide data for the channel\r\n\u00a0 \u00a0 raw = ReadASCIIFile(\"pkg:\/api\/3_guide_\" + id + \".json\")\r\n\u00a0 \u00a0 json = ParseJSON(raw)\r\n\r\n\u00a0 \u00a0 \r\n\u00a0 \u00a0 for each program in json\r\n\u00a0 \u00a0 \u00a0 \u00a0 ' create a node for the program and set its metadata fields\r\n\u00a0 \u00a0 \u00a0 \u00a0 children = []\r\n\u00a0 \u00a0 \u00a0 \u00a0 if program.title &lt;&gt; invalid and program.title &lt;&gt; \"\"\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 programNode.title = program.title\r\n\u00a0 \u00a0 \u00a0 \u00a0 else if program.airing_details.show_title &lt;&gt; invalid and program.airing_details.show_title &lt;&gt; \"\"\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 programNode.title = program.airing_details.show_title\r\n\u00a0 \u00a0 \u00a0 \u00a0 else\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 programNode.title = \"---\"\r\n\u00a0 \u00a0 \u00a0 \u00a0 end if\r\n\u00a0 \u00a0 \u00a0 \u00a0 if program.season_number &lt;&gt; invalid and program.episode_number &lt;&gt; invalid\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 programNode.description = \"S\" + program.season_number.ToStr() + \" E\" + program.episode_number.ToStr()\r\n\u00a0 \u00a0 \u00a0 \u00a0 end if\r\n\u00a0 \u00a0 \u00a0 \u00a0 programNode.playStart = playStart\r\n\u00a0 \u00a0 \u00a0 \u00a0 programNode.playDuration = program.airing_details.duration\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 children.Push(programNode)\r\n\u00a0 \u00a0 \u00a0 \u00a0 playstart += programNode.playDuration\r\n\u00a0 \u00a0 end for\r\n\r\n\u00a0 \u00a0 ' update the row node with all the programs for the channel as children\r\n\u00a0 \u00a0 ' so they will be displayed in the view\r\n\u00a0 \u00a0 channel.Update(children)\r\nend function<\/pre>\n<p>&nbsp;<\/p>\n<h3>Conclusion<\/h3>\n<p>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.<\/p>\n<p>This approach allows you to build an engaging, user-friendly EPG experience for your <a href=\"https:\/\/www.tothenew.com\/media-and-entertainment-solutions\">Roku-channel.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1526,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":450},"categories":[3477],"tags":[6662,3474,6663],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/67181"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1526"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=67181"}],"version-history":[{"count":9,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/67181\/revisions"}],"predecessor-version":[{"id":68458,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/67181\/revisions\/68458"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=67181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=67181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=67181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}