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: 
hugetv
Visitor

implement this background to Canvas

implement this background to Canvas

list.Push({
Text: str
TextAttrs: {color: textColor, Font:"Medium", HAlign:"left", VAlign:"left", Direction:"LeftToRight"}
TargetRect: {x:100, y:yTxt, w: 300, h: 250}
})
Our system http://www.rokumanager.com
0 Kudos
4 REPLIES 4
RokuKC
Roku Employee
Roku Employee

Re: implement this background to Canvas

"hugetv" wrote:
implement this background to Canvas

list.Push({
Text: str
TextAttrs: {color: textColor, Font:"Medium", HAlign:"left", VAlign:"left", Direction:"LeftToRight"}
TargetRect: {x:100, y:yTxt, w: 300, h: 250}
})


Possibly you mean to have VAlign:"top" instead of VAlign:"left"?
Otherwise I'm not sure what the question might be.
0 Kudos
hugetv
Visitor

Re: implement this background to Canvas

this code

Sub RunUserInterface()
o = Setup()
o.setup()
o.paint()
o.eventloop()
End Sub

Sub Setup() As Object

if mode = "720p"
this.layout = {
full: this.canvas.GetCanvasRect()
top: { x: 0, y: 0, w:1280, h: 130 }
left: { x: 0, y: 160, w: 852, h: 450 }
right: { x: 800, y: 227, w: 350, h: 291 }
bottom: { x: 249, y: 630, w: 780, h: 100 }
}
this.background = "pkg:/images/back-hd.jpg"
else
this.layout = {
full: this.canvas.GetCanvasRect()
top: { x: 0, y: 0, w: 720, h: 80 }
left: { x: 0, y: 100, w: 550, h: 311 }
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"
end if
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 = this.canvas.GetCanvasRect()
this.textRect = {x: 520, y: 480, 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()

list = []

if m.progress < 100

progress_bar = {TargetRect: {x: 350, y: 500, w: 598, h: 37}, url: "pkg:/images/progress_bar.png"}
color = "#80000000"
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 = 40
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", HAlign:"left", VAlign:"left", Direction:"LeftToRight"}
TargetRect: {x:100, y:yTxt, w: 300, h: 250}
})

yTxt = yTxt + 40
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.SetLayer(0, { Color: color, CompositionMode: "Source" })
m.canvas.SetLayer(1, list)

list.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({
Title: video.title
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


and I want to put the background picture to be displayed on channel list
Our system http://www.rokumanager.com
0 Kudos
hugetv
Visitor

Re: implement this background to Canvas

I want to do something with a background photo

Our system http://www.rokumanager.com
0 Kudos
hugetv
Visitor

Re: implement this background to Canvas

plis help this code
Our system http://www.rokumanager.com
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.