I am working on customvideoplayer example that comes with ROKU sdk examples. I want to add scroll functionality in the list of text and limit quantity view text. example.. on front view 5 text with list 20 text.
Any suggestions about how I can create those scroll to perform required functionality , would be really appreciated.
Here is the code I am using:
Sub RunUserInterface()
o = Setup()
o.setup()
o.paint()
o.eventloop()
End Sub
Sub Setup() As Object
this = {
port: CreateObject("roMessagePort")
progress: 0 'buffering progress
position: 0 'playback position (in seconds)
paused: false 'is the video currently paused?
fonts: CreateObject("roFontRegistry") 'global font registry
feedData: invalid
playing: 0
playingPrev: 0
playlistSize: 0
canvas: CreateObject("roImageCanvas") 'user interface
player: CreateObject("roVideoPlayer")
load: LoadFeed
setup: SetupFullscreenCanvas
paint: PaintFullscreenCanvas
create_playlist_text: CreatePlaylistText
drawtext: true
eventloop: EventLoop
' Do lots of initialization stuff
' Display the main UI roScreen
}
this.targetRect = this.canvas.GetCanvasRect()
this.textRect = {x: 520, y: 480, w: 300, h:200}
this.load()
'Resolution-specific settings:
mode = CreateObject("roDeviceInfo").GetDisplayMode()
if mode = "720p"
this.layout = {
full: this.canvas.GetCanvasRect()
top: { x: 0, y: 0, w:1280, h: 130 }
left: { x: 249, y: 177, w: 391, h: 291 }
right: { x: 700, y: 177, w: 350, h: 291 }
bottom: { x: 249, y: 500, w: 780, h: 300 }
}
this.background = "pkg:/images/back-hd.jpg"
this.headerfont = this.fonts.get("lmroman10 caps", 50, 50, false)
else
this.layout = {
full: this.canvas.GetCanvasRect()
top: { x: 0, y: 0, w: 720, h: 80 }
left: { x: 100, y: 100, w: 280, h: 210 }
right: { x: 400, y: 100, w: 220, h: 210 }
bottom: { x: 100, y: 340, w: 520, h: 140 }
}
this.background = "pkg:/images/back-sd.jpg"
this.headerfont = this.fonts.get("lmroman10 caps", 30, 50, false)
end if
'Static help text:
this.help = "Press the right or left arrow buttons on the remote control "
this.help = this.help + "to seek forward or back through the video at "
this.help = this.help + "approximately one minute intervals. Press down "
this.help = this.help + "to toggle fullscreen."
'Register available fonts:
this.fonts.Register("pkg:/fonts/caps.otf")
this.textcolor = "#406040"
Print "font"
print this.fonts.getfamilies()
'Setup image canvas:
this.canvas.SetMessagePort(this.port)
this.canvas.SetLayer(0, { Color: "#000000" })
this.canvas.Show()
this.player.SetMessagePort(this.port)
this.player.SetLoop(true)
this.player.SetPositionNotificationPeriod(1)
this.player.SetDestinationRect(this.targetRect)
this.player.Play()
this.playingPrev = this.playing
return this
End Sub
Sub EventLoop()
while true
msg = wait(0, m.port)
if msg <> invalid
if msg.isStatusMessage() and msg.GetMessage() = "startup progress"
m.paused = false
print "Raw progress: " + stri(msg.GetIndex())
progress% = msg.GetIndex() / 10
if m.progress <> progress%
m.progress = progress%
m.paint()
end if
'Playback progress (in seconds):
else if msg.isPlaybackPosition()
m.position = msg.GetIndex()
print "Playback position: " + stri(m.position)
else if msg.isRemoteKeyPressed()
index = msg.GetIndex()
print "Remote button pressed: " + index.tostr()
if index = 4 '<LEFT>
m.playing = m.playing - 1
if (m.playing < 0)
m.playing = 2
endif
m.player.SetNext(m.playing)
m.player.Play()
m.playingPrev = m.playing
else if index = 8 '<REV>
m.position = m.position - 60
m.player.Seek(m.position * 1000)
else if index = 5 '<RIGHT>
m.playing = m.playing + 1
if (m.playing > 2)
m.playing = 0
endif
m.player.SetNext(m.playing)
m.player.Play()
m.playingPrev = m.playing
else if index = 9 '<REV>
m.position = m.position + 60
m.player.Seek(m.position * 1000)
else if index = 2 '<Up>
if m.drawtext
m.playing = m.playing - 1
if (m.playing < 0)
m.playing = m.playlistSize-1
endif
m.paint()
endif
else if index = 3 '<Down>
if m.drawtext
m.playing = m.playing + 1
if (m.playing > m.playlistSize-1)
m.playing = 0
endif
m.paint()
endif
else if index = 13 '<PAUSE/PLAY>
if m.paused m.player.Resume() else m.player.Pause()
else if index = 6 'OK
if m.drawtext
m.drawtext = false
if m.playing <> m.playingPrev
m.player.SetNext(m.playing)
m.player.Play()
m.playingPrev = m.playing
endif
else
m.drawtext = true
endif
m.paint()
end if
else if msg.isPaused()
m.paused = true
m.paint()
else if msg.isResumed()
m.paused = false
m.paint()
end if
endif
end while
End Sub
Sub SetupFullscreenCanvas()
m.canvas.AllowUpdates(false)
m.paint()
m.canvas.AllowUpdates(true)
End Sub
Sub PaintFullscreenCanvas()
splash = []
list = []
color = "#00000000" ' fully transparent
if m.progress < 100 then
color = "#00a0a0a0"
screen = m.canvas.GetCanvasRect()
topBar% = (screen.h - 12) / 2
leftBar% = (screen.w - 532) / 2
progress_bar = {
TargetRect: { x: leftBar%, y: topBar%, w: 532, h: 12 },
url: "pkg:/images/loading_bar.png"
}
padding% = 20
topLogo% = topBar% - (79 + padding%)
leftLogo% = (screen.w - 81) / 2
list.Push({
TargetRect: { x: leftLogo%, y: topLogo%, w: 81, h: 79 },
url: "pkg:/images/loading_logo.png"
})
topText% = topBar% + (12 + padding%)
leftText% = (screen.w - 300) / 2
list.Push({
Text: "Loading..."
TextAttrs: { font: "large", color: "#707070" }
TargetRect: { x: leftText%, y: topText%, w: 300, h: 100 }
})
if m.progress > 0 and m.progress <= 13 then
progress_bar.url = "pkg:/images/loading_bar_1.png"
else if m.progress > 13 and m.progress <= 25 then
progress_bar.url = "pkg:/images/loading_bar_2.png"
else if m.progress > 25 and m.progress <= 38 then
progress_bar.url = "pkg:/images/loading_bar_3.png"
else if m.progress > 38 and m.progress <= 50 then
progress_bar.url = "pkg:/images/loading_bar_4.png"
else if m.progress > 50 and m.progress <= 63 then
progress_bar.url = "pkg:/images/loading_bar_5.png"
else if m.progress > 63 and m.progress <= 75 then
progress_bar.url = "pkg:/images/loading_bar_6.png"
else if m.progress > 75 and m.progress <= 88 then
progress_bar.url = "pkg:/images/loading_bar_7.png"
else
progress_bar.url = "pkg:/images/loading_bar_8.png"
end if
list.Push(progress_bar)
else if m.status = "paused" then
print "Painting the paused text"
color = "#80000000" ' semi-transparent black
list.push({
Text: "Paused"
TextAttrs: { font: "huge" }
TargetRect: m.canvas.GetCanvasRect()
})
end if
if m.drawtext
textArr = m.create_playlist_text()
yTxt = 40
color = "#00000000"
index = 0
for each str in textArr
if index = m.playing
textColor = "#3399FF"
else
textColor = "#dddddd"
endif
list.Push({
Text: str
TextAttrs: {color: textColor, Font:"small", HAlign:"left", VAlign:"top", Direction:"LeftToRight"}
TargetRect: {x:100, y:yTxt, w: 300, h: 250}
})
yTxt = yTxt + 20
index = index + 1
end for
else
color = "#00000000"
list.Push({
Text: ""
TextAttrs: {font: "medium"}
TargetRect: {x:900, y:600, w: 300, h: 100}
})
endif
'Clear previous contents
m.canvas.ClearLayer(0)
m.canvas.ClearLayer(1)
m.canvas.ClearLayer(2)
m.canvas.SetLayer(0, { Color: color, CompositionMode: "Source" })
if (splash.Count() > 0)
m.canvas.SetLayer(1, splash)
m.canvas.SetLayer(2, list)
else
m.canvas.SetLayer(1, list)
endif
list.Clear()
splash.Clear()
End Sub
Function LoadFeed() as void
jsonAsString = ReadAsciiFile("pkg:/json/feed.json")
m.feedData = ParseJSON(jsonAsString)
m.playlistSize = m.feedData.Videos.Count()
contentList = []
for each video in m.feedData.Videos
contentList.Push({
Stream: { url: video.url }
StreamFormat: "hls"
})
end for
m.player.SetContentList(contentList)
End Function
Function CreatePlaylistText() as object
textArr = []
for each video in m.feedData.Videos
textArr.Push(video.title)
end for
return textArr
End Function
