Forum Discussion

hugetv's avatar
hugetv
Visitor
10 years ago

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}
})

4 Replies

  • RokuKC's avatar
    RokuKC
    Roku Employee
    "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.
  • 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