Roku Developer Program

Join our online forum to talk to Roku developers and fellow channel creators. Ask questions, share tips with the community, and find helpful resources.
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

How can I add buttons to roImagecanvas(customvideoplayer)

I am newbie in ROKU development.I am working on customvideoplayer example that comes with ROKU sdk examples. I want to add buttons on the canvas for play ,stop ,minimise and maximise functionality. I have reseacrhed on it but have not been able to add the buttons. Moreover I also want to capture the click events of those buttons and perform the requireds fuctionality on their click. Any suggestions about how I can create those buttons and 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?
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: false
eventloop: EventLoop
}
this.targetRect ={x: 100, y: 100, w: 600, h:500}
' this.targetRect = this.canvas.GetCanvasRect()
'this.textRect = {x: 520, y: 480, w: 300, h:200}
this.textRect = {x: 150, y: 470, w: 300, h:200}
this.load()
'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 = []

if m.progress < 100
progress_bar = {TargetRect: {x: 100, y: 500, w: 598, h: 37}, url: "pkg:/images/progress_bar.png"}
color = "#00a0a0a0"
splash.Push({
url: "pkg:/images/splash.png"
TargetRect: m.targetRect
})
list.Push({
Text: "Loading..."
TextAttrs: { font: "large", color: "#707070" }
TargetRect: m.textRect
})
if m.progress >= 0 AND m.progress < 20
progress_bar.url = "pkg:/images/progress_bar_1.png"
print progress_bar.url
else if m.progress >= 20 AND m.progress < 40
progress_bar.url = "pkg:/images/progress_bar_2.png"
print progress_bar.url
else if m.progress >= 40 AND m.progress < 75
progress_bar.url = "pkg:/images/progress_bar_3.png"
print progress_bar.url
else
progress_bar.url = "pkg:/images/progress_bar_4.png"
print progress_bar.url
endif
list.Push(progress_bar)

end if

if m.drawtext
textArr = m.create_playlist_text()
yTxt = 100
color = "#00000000"
index = 0
for each str in textArr
if index = m.playing
textColor = "#00ff00"
else
textColor = "#dddddd"
endif
list.Push({
Text: str
TextAttrs: {color: textColor, font: "medium"}
TargetRect: {x:700, y:yTxt, w: 500, h: 100}
})
yTxt = yTxt + 100
index = index + 1
end for
else
color = "#00000000"
list.Push({
Text: ""
TextAttrs: {font: "medium"}
TargetRect: {x:100, 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: "mp4"
})
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
0 Kudos
Need Assistance?
Welcome to the Roku Community! Feel free to search our Community for answers or post your question to get help.

Become a Roku Streaming Expert!

Share your expertise, help fellow streamers, and unlock exclusive rewards as part of the Roku Community. Learn more.