Google Maps & Overlays in ROKU
Hi,
I am relatively new to ROKU platform and have an assignment to show google maps and some overlays over the maps. I will need some help in implementing this requirement and any help on this is much appreciated. Here is the requirement:
1. Open static google maps on basis of geo-coordinates of the place selected. This is going to be static map.
2. Get list of overlay images from a server (10 images to be displayed one after other). Each image is high resolution image 1280 * 720 px or more and size of the images ranges from 200 kb to 550 kb (totalling at around 5MB for 10 images).
3. I have implemented a solution after going through various posts on roku forum and referring to roku technical documentation but the implementation is badly hit by performance and freezes the screen or rotates images very slow; giving the end user bad experience of this feature. Here is the sample code:
function main()
m.mapCanvas = createObject("roImageCanvas")
mapPort = CreateObject("roMessagePort")
m.mapCanvas.SetMessagePort(mapPort)
m.mapCanvas.SetRequireAllImagesToDraw(false)
m.mapCanvas.PurgeCachedImages()
m.mapCanvas.AllowUpdates(false)
list = []
list.push({Color:"#b2cffb", CompositionMode:"Source"})
m.mapCanvas.setLayer(0, list)
m.mapCanvas.AllowUpdates(true)
m.mapCanvas.show()
while true
msg = wait(2500, mapPort)
if(type(msg) = "roImageCanvasEvent")
if(msg.isRemoteKeyPressed())
print "Remote Event called."
else if(msg.isScreenClosed())
print "Screen Closed Event called."
end if
else
showOverlay()
end if
end while
end function
Function showOverlay()
m.mapCanvas.AllowUpdates(false)
list = []
overlayURL = Different_Overlay_Url_Comes_Here_Every_Time
list.Push({
url: overlayURL
TargetRect:{x:0, y:0, w:1280, h:720}
})
m.mapCanvas.SetLayer(1, list)
m.mapCanvas.AllowUpdates(true)
End Function
Any help around this or sample code will be greatly appreciated. If I need to use some different control, please provide me sample code if you can.
I am relatively new to ROKU platform and have an assignment to show google maps and some overlays over the maps. I will need some help in implementing this requirement and any help on this is much appreciated. Here is the requirement:
1. Open static google maps on basis of geo-coordinates of the place selected. This is going to be static map.
2. Get list of overlay images from a server (10 images to be displayed one after other). Each image is high resolution image 1280 * 720 px or more and size of the images ranges from 200 kb to 550 kb (totalling at around 5MB for 10 images).
3. I have implemented a solution after going through various posts on roku forum and referring to roku technical documentation but the implementation is badly hit by performance and freezes the screen or rotates images very slow; giving the end user bad experience of this feature. Here is the sample code:
function main()
m.mapCanvas = createObject("roImageCanvas")
mapPort = CreateObject("roMessagePort")
m.mapCanvas.SetMessagePort(mapPort)
m.mapCanvas.SetRequireAllImagesToDraw(false)
m.mapCanvas.PurgeCachedImages()
m.mapCanvas.AllowUpdates(false)
list = []
list.push({Color:"#b2cffb", CompositionMode:"Source"})
m.mapCanvas.setLayer(0, list)
m.mapCanvas.AllowUpdates(true)
m.mapCanvas.show()
while true
msg = wait(2500, mapPort)
if(type(msg) = "roImageCanvasEvent")
if(msg.isRemoteKeyPressed())
print "Remote Event called."
else if(msg.isScreenClosed())
print "Screen Closed Event called."
end if
else
showOverlay()
end if
end while
end function
Function showOverlay()
m.mapCanvas.AllowUpdates(false)
list = []
overlayURL = Different_Overlay_Url_Comes_Here_Every_Time
list.Push({
url: overlayURL
TargetRect:{x:0, y:0, w:1280, h:720}
})
m.mapCanvas.SetLayer(1, list)
m.mapCanvas.AllowUpdates(true)
End Function
Any help around this or sample code will be greatly appreciated. If I need to use some different control, please provide me sample code if you can.
