ok and I managed to do it but I have a problem with time bara
'******************************************
'* paint.brs
'* display the screen and dynamic overlay
'******************************************
Sub PaintFullscreenCanvas()
splash = []
canvasItems = []
navItems = []
'Clear previous contents
m.canvas.ClearLayer(0)
m.canvas.ClearLayer(1)
m.canvas.ClearLayer(2)
m.canvas.ClearLayer(3)
' display a custom loading image
if m.progress < 100
splash.Push({
url: "pkg:/images/splash.png"
TargetRect: m.textRect
})
endif
if m.overlay
' Display overlay with a list of canvasItems
' Get the canvas size to work with
canvasRect = m.targetRect
' Set the starting Y value, top of the overlay
yVal = canvasRect.h - 150
' Get the overall width
wVal = canvasRect.w
' Set the offsets for the controls
controlxoff = int( canvasRect.w / 2 ) - 115
controlyoff = yVal+200
' Set the width of the time bars
barwidth = int( wVal / 6 )
' Get values from the json feed for the selected title, this should be loaded in a sub
mytitle = m.feedData.Videos[m.playing].title
mydesc = m.feedData.Videos[m.playing].desc
mytag = m.feedData.Videos[m.playing].tag
myepisode = m.feedData.Videos[m.playing].episode
myepisode2 = m.feedData.Videos[m.playing].episode2
myimage = m.feedData.Videos[m.playing].image
' Calculate horizontal offset when there is a highlight tag
font_registry = CreateObject("roFontRegistry")
font_regular = font_registry.getdefaultfont()
' Need to factor the length to get a good fit - research font behavior
tagOffset = 110 + int( 2/3 * font_regular.GetOneLineWidth( mytag, 999 ) )
' Calculate horizontal offset for Station, symbols
stationoff = tagOffset + int( 2/3 * font_regular.GetOneLineWidth( myepisode, 999 ) ) - 30
symbol_1off = stationoff + 125
symbol_2off = stationoff + 225
symbol_3off = stationoff + 300
' normally the times would come from the feed or device. hardcode for demo:
starttime = "11:00 AM"
endtime = "1:00 PM"
' Calculatation for the time display and for the orange bar
print m.position " is the current position in seconds"
' time bars are gray by default
bar2color = "#FF999999"
bar3color = "#FF999999"
' the percent of the bar shown orange is m.position divided by half hour (1800 sec)
' multiply by barwidth to get the width of the orange portion
' need to add 1 since 0 makes it unlimited width
worange = 1 + int( barwidth * m.position / 1800 )
print "width of orange on the second time bar is " str(worange)
' Format the current time display
mymin = int ( m.position / 10 )
'mysec = m.position mod 60
if mymin < 30 then
' Hack to set current time display
mytime = "11:" + str(30 + mymin).trim()
' horizontal starting point of highlighted time bar
hloffset = 195+barwidth
' set the placement offset for the current time
offsettime = 217 + worange + int ( barwidth * 2 / 3 )
else
' hack for demo - ultimately all bars would be dynamic
' 2nd bar full orange
bar2color = "#FFFFA500"
' set the placement offset for the current time
offsettime = 217 + worange + int ( barwidth * 2 / 3 )
if mymin > 59
' 3rd bar full orange
bar3color = "#FFFFA500"
' horizontal starting point of highlighted time bar
hloffset = 195+barwidth*3
' width of highlight
worange = worange - (2*barwidth)
else
' horizontal starting point of highlighted time bar
hloffset = 195+barwidth*2
' width of highlight
worange = worange - barwidth
endif
if mymin > 89
' went past the end, go to beginning?
' hack the display for now
mymin = 30
endif
if mymin > 39
mytime = "12:"
else
mytime = "12:0"
endif
mytime = mytime + str(mymin - 30).trim()
endif
print "current time to display " + mytime
canvasItems = [
{
color:"#AA000000"
TargetRect:{x:0,y:yVal,w:wVal,h:350}
},
{
Text:mytitle
TextAttrs:{Color:"#FFFFFFFF", Font:"Medium",
HAlign:"Left", VAlign:"VCenter",
Direction:"LeftToRight"}
TargetRect:{x:40,y:yVal-15,w:500,h:60}
},
{
url: myimage
TargetRect:{x:40,y:yVal+35,w:80,h:80}
},
{
Text:"LIVE"
TextAttrs:{Color:"#00FF18", Font:"Mini",
HAlign:"Left", VAlign:"VCenter",
Direction:"LeftToRight"}
TargetRect:{x:140,y:yVal+30,w:50,h:40}
},
{
Text:myepisode
TextAttrs:{Color:"#FFFFFFFF", Font:"Small",
HAlign:"Left", VAlign:"VCenter",
Direction:"LeftToRight"}
TargetRect:{x:190,y:yVal+30,w:550,h:40}
},
{
Text:"NEXT"
TextAttrs:{Color:"#0000FF", Font:"Mini",
HAlign:"Left", VAlign:"VCenter",
Direction:"LeftToRight"}
TargetRect:{x:140,y:yVal+85,w:50,h:40}
},
{
Text:myepisode2
TextAttrs:{Color:"#FFFFFFFF", Font:"Small",
HAlign:"Left", VAlign:"VCenter",
Direction:"LeftToRight"}
TargetRect:{x:190,y:yVal+85,w:550,h:40}
},
{
Text:starttime
TextAttrs:{Color:"#FFFFFFFF", Font:"Mini",
HAlign:"Left", VAlign:"VCenter",
Direction:"LeftToRight"}
TargetRect:{x:140,y:yVal+62,w:100,h:20}
},
{
color:"#FFFFA500"
TargetRect: {x:140, y:yVal+83, w:barwidth-3, h:4}
},
{
color:bar2color
TargetRect: {x:140+barwidth, y:yVal+83, w:barwidth-3, h:4}
},
{
color:bar3color
TargetRect: {x:140+barwidth*2, y:yVal+83, w:barwidth-3, h:4}
},
{
color:"#FF999999"
TargetRect: {x:140+barwidth*3, y:yVal+83, w:barwidth-3, h:4}
},
{
Text:endtime
TextAttrs:{Color:"#FFFFFFFF", Font:"Mini",
HAlign:"Left", VAlign:"VCenter",
Direction:"LeftToRight"}
TargetRect:{x:200+barwidth*3,y:yVal+62,w:100,h:20}
},
{
color:"#FFFFA500"
TargetRect: {x:hloffset, y:yVal+83, w:worange, h:4}
},
{
color:"#EFFFFFFF"
TargetRect: {x:hloffset+worange, y:yVal+83, w:2, h:4}
},
{
Text:"TIME:"+mytime
TextAttrs:{Color:"#FFFFFFFF", Font:"Mini",
HAlign:"HCenter", VAlign:"VCenter",
Direction:"LeftToRight"}
TargetRect:{x:200+barwidth*4,y:yVal+15,w:100,h:12}
}
]
else
' No overlay
canvasItems = []
endif
m.canvas.SetLayer(0, { Color: "#00000000", CompositionMode: "Source" })
if (splash.Count() > 0)
m.canvas.SetLayer(1, splash)
m.canvas.SetLayer(2, canvasItems)
else
m.canvas.SetLayer(1, canvasItems)
endif
canvasItems.Clear()
splash.Clear()
End Sub
http://i.imgur.com/hXLe9QB.png
Our system http://www.rokumanager.com