I am looking to do a very simple channel that will remain private. I run operations for a restaurant chain and I want to utilize a tv at each location for showing marketing initiatives and merchandise. I have images hosted publicly on our web host.
I am a complete noob when it comes to developing on roku. This seems like the best way to accomplish what I am looking to do. I want to point the channel to a folder on our server and have the channel load all the images in the folder and show them in a slideshow.
Problem I am trying to solve
Our teams currently have jump drives plugged in to their tv’s and the images are outdated and hard to manage. I would like to load the new images into a folder on our host and the channel would read the images on the server and play them as a slideshow.
I hope this is clear and any help would be greatly appreciated!
I have my developer account setup, I have developer mode enabled on my Roku 3 and I am at the point where I am unclear on how to structure files and build the channel to point it at the folder on my server. From their, I am able to zip the folder and upload to my roku for testing. Thanks again in advance for any help provided.
Here’s a simple channel to get you started.
Create an Xml file containing the list of image urls on your server, e.g:
kittens.xml:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<feed>
<Period>10</Period>
<TextOverlayIsVisible>True</TextOverlayIsVisible>
<TextOverlayHoldTime>2000</TextOverlayHoldTime>
<item>
<TextOverlayBody>Cute Kitten #1</TextOverlayBody>
<Url>http://r.ddmcdn.com/s_f/o_1/APL/uploads/2014/05/128942088217813223400601197_MilkMoustache.jpg</Url>
</item>
<item>
<TextOverlayBody>Cute Kitten #2</TextOverlayBody>
<Url>http://www.welikeviral.com/files/2014/12/8325_8_site.jpeg</Url>
</item>
<item>
<TextOverlayBody>Cute Kitten #3</TextOverlayBody>
<Url>http://rosegalaxy.com/wp-content/uploads/2015/08/Beautiful-kittens-Wallpaper.jpg</Url>
</item>
<item>
<TextOverlayBody>Cute Kitten #4</TextOverlayBody>
<Url>https://i.ytimg.com/vi/3dzUgmpXPX0/hqdefault.jpg</Url>
</item>
<item>
<TextOverlayBody>Cute Kitten #5</TextOverlayBody>
<Url>http://vignette3.wikia.nocookie.net/clubpenguinpookie/images/d/d0/Extremely-cute-kitten_large.jpg</Url>
</item>
<item>
<TextOverlayBody>Cute Kitten #6</TextOverlayBody>
<Url>http://static.tumblr.com/vlykcdf/lN2l9mwte/cute-kitten-303.jpg</Url>
</item>
</feed>
Use this channel code to read the Xml file from your server (or from your local channel pkg: directory), and display the images in a slideshow:
main.brs:
Sub Main ()
'content = getContent ("pkg:/xml/kittens.xml")'
content = getContent ("http://belltown.tk/kittens.xml")
displayUI (content)
End Sub
Function getContent (path As String) As Object
content = {}
content.period = 0
content.textOverlayIsVisible = False
content.textOverlayHoldTime = 0
content.contentList = []
contentData = getPath (path)
xml = CreateObject ("roXmlElement")
If xml.Parse (contentData)
content.period = getXml (xml, "period").ToInt ()
content.textOverlayIsVisible = LCase (getXml (xml, "TextOverlayIsVisible")) = "true"
content.textOverlayHoldTime = getXml (xml, "TextOverlayHoldTime").ToInt ()
For Each item In xml.item
content.contentList.Push ({
Url: getXml (item, "Url")
TextOverlayBody: getXml (item, "TextOverlayBody")
TextOverlayUL: ""
TextOverlayUR: ""
})
End For
Else
Print "Xml failed to parse"
End If
Return content
End Function
Function getXml (xml As Object, elementName As String) As String
returnValue = ""
elementList = xml.GetNamedElementsCI (elementName)
If elementList.Count () > 0
returnValue = elementList [0].GetText ()
End If
Return returnValue
End Function
Function getPath (path As String) As String
data = ""
http = "http"
If LCase (Left (path, Len (http))) = http
ut = CreateObject ("roUrlTransfer")
ut.SetUrl (path)
data = ut.GetToString ()
Else
data = ReadAsciiFile (path)
End If
Return data
End Function
Function displayUI (content As Object) As Void
port = CreateObject ("roMessagePort")
ui = CreateObject ("roSlideShow")
ui.SetMessagePort (port)
If content.textOverlayIsVisible
ui.SetTextOverlayHoldTime (content.textOverlayHoldTime)
End If
ui.SetPeriod (content.period)
ui.SetContentList (content.contentList)
ui.Show ()
While True
msg = Wait (0, port)
If Type (msg) = "roSlideShowEvent"
If msg.IsScreenClosed ()
Exit While
Else If msg.IsRemoteKeyPressed ()
key = msg.GetIndex ()
If key = 0 ' Back Button '
ui.Close ()
Else If key = 6 ' OK Button '
ui.Close ()
EndIf
EndIf
EndIf
End While
End Function
It shouldn’t be too hard to write a script on your server to read a folder and generate the Xml file from its contents.
Thank you very much. Will test this out today. I will also look in to how I can make a script to generate the xml based on images in a folder.
“keeganlanier” wrote:
I will also look in to how I can make a script to generate the xml based on images in a folder.
If your server has php you can use the following script. Make sure you set up the $server and $folder variables correctly, then change your main.brs file so that it points to the php script on your server.
imglist.php
<?php
// Define your server name here
$server = 'http://localhost';
// Define the path to your image folder here, relative to your server's document root
$folder = '/blahblah/blah';
// Get the path to your server's document root
$documentRoot = $_SERVER ['DOCUMENT_ROOT'];
// Get a list of all file names in your image folder
$fileArray = scandir ($documentRoot.$folder);
$xml = new XMLWriter();
$xml->openURI('php://output');
$xml->startDocument('1.0','UTF-8');
$xml->setIndent(true); // For testing
$xml->startElement('root');
$xml->writeElement('Period', '10');
$xml->writeElement('TextOverlayIsVisible', 'True');
$xml->writeElement('TextOverlayHoldTime', '2000');
foreach ($fileArray as $fileName) {
$ext = pathinfo($fileName, PATHINFO_EXTENSION);
// Only handle image files
if ($ext === 'jpg' || $ext === 'jpeg' || $ext ==='png' || $ext === 'gif') {
$xml->startElement('item');
$xml->writeElement('TextOverlayBody', $fileName);
$xml->writeElement('Url', "$server$folder/$fileName");
$xml->endElement();
}
}
$xml->endElement();
$xml->endDocument();
$xml->flush();
?>
Hey Belltown, thanks for this code, it works GREAT!!
I wondering if there’s any way to reload the XML file periodically so that new items in the XML would show up?? I realize this will happen if I exit the channel and re-enter it, but it would be nice to have a solution that would run automatically.
Thanks!!
Hi guys,
Great advise and tutorial. I have a similar issue. However my need is different.
The restaurant owner has several TVs, and I need to create a channel with several options within. Theoretically, each option will select a different slideshow (from web server folders) remotely. Also, some options might have a non ending video playing looping.
I need the options to be in a grid style. Is this possible, any advice.
