Roku Developer Program

Developers and content creators—a complete solution for growing an audience directly.
cancel
Showing results for 
Search instead for 
Did you mean: 
coredump
Level 7

Showing Bitmaps when DrawObject is called

I have a bitmap array where each bitmap is loaded from the internet. As a result, the app waits for all the bitmaps to load before displaying them. If I call swap buffers before I start loading them everything shows up right away except for the images, obviously. If I switchbuffers before and after loading the images. The rest of the page is displayed immediately but goes away when I display the images because I am calling swapbuffers. Is there a way for them to appear while they are being loaded, so the user doesn't have to wait ? I am using roScreen and the 2D API to accomplish this.
0 Kudos
6 Replies
TheEndless
Level 7

Re: Showing Bitmaps when DrawObject is called

You have to redraw the entire screen on every SwapBuffers() call. You can load the bitmaps asynchronously using the roTextureManager, but you'll still need to redraw the full screen on every pass. Depending on how your code is set up, using the roCompositor might make that easier for you.
My Channels: http://roku.permanence.com - Twitter: @TheEndlessDev
Instant Watch Browser (NetflixIWB), Aquarium Screensaver (AQUARIUM), Clever Clocks Screensaver (CLEVERCLOCKS), iTunes Podcasts (ITPC), My Channels (MYCHANNELS)
0 Kudos
coredump
Level 7

Re: Showing Bitmaps when DrawObject is called

I am new to the 2D API and roku developing obviously and was trying to figure out how the roCompositor would help me. I am creating a custom UI that looks something like this

+--------------------------------------------+
| Logo |
+--------------------------------------------+
| menu item 1 Category Title |
| menu item 2 |
| menu item 3 poster 1 , 2 , 3 |
| menu item 4 poster 4 , 5 , 6 |
| |
+--------------------------------------------+

The Logo is drawn with DrawObject, the menu item's and category title's are drawn with DrawText. Here is the code I use to load the posters and draw them (I am not checking return values at the moment, just trying to get basic concepts to work before making it robust) :


' Draw Movie Posters
current_movie = 0
poster_columns = 3
poster_height = 285
poster_row_pad = 50
poster_width = 201
poster_column_pad = 50

l_width = poster_width + poster_column_pad
l_x = 366
l_y = 220

' NewHttp2 is part of the urlUtils.brs included with the scroll SDK example
http = NewHttp2("http://whopix.files.wordpress.com/2013/07/doctor-widow-wardrobe-dvd.jpg", "text/xml")
http.GetToFileWithTimeout("tmp:/doctor-widow-wardrobe-dvd.jpg", 120)
poster1 = CreateObject("roBitmap", "tmp:/doctor-widow-wardrobe-dvd.jpg")

http = NewHttp2("http://whopix.files.wordpress.com/2013/07/doctor-widow-wardrobe-dvd.jpg", "text/xml")
http.GetToFileWithTimeout("tmp:/doctor-widow-wardrobe-dvd.jpg", 120)
poster2 = CreateObject("roBitmap", "tmp:/doctor-widow-wardrobe-dvd.jpg")

http = NewHttp2("http://whopix.files.wordpress.com/2013/07/doctor-widow-wardrobe-dvd.jpg", "text/xml")
http.GetToFileWithTimeout("tmp:/doctor-widow-wardrobe-dvd.jpg", 120)
poster3 = CreateObject("roBitmap", "tmp:/doctor-widow-wardrobe-dvd.jpg")

http = NewHttp2("http://whopix.files.wordpress.com/2013/07/doctor-widow-wardrobe-dvd.jpg", "text/xml")
http.GetToFileWithTimeout("tmp:/doctor-widow-wardrobe-dvd.jpg", 120)
poster4 = CreateObject("roBitmap", "tmp:/doctor-widow-wardrobe-dvd.jpg")

http = NewHttp2("http://whopix.files.wordpress.com/2013/07/doctor-widow-wardrobe-dvd.jpg", "text/xml")
http.GetToFileWithTimeout("tmp:/doctor-widow-wardrobe-dvd.jpg", 120)
poster5 = CreateObject("roBitmap", "tmp:/doctor-widow-wardrobe-dvd.jpg")

http = NewHttp2("http://whopix.files.wordpress.com/2013/07/doctor-widow-wardrobe-dvd.jpg", "text/xml")
http.GetToFileWithTimeout("tmp:/doctor-widow-wardrobe-dvd.jpg", 120)
poster6 = CreateObject("roBitmap", "tmp:/doctor-widow-wardrobe-dvd.jpg")

posterArray = [poster1, poster2, poster3, poster4, poster5, poster6]

For each bitmap in posterArray
screen.DrawScaledObject( l_x, l_y, 0.75, 0.75, bitmap )
l_x = l_x + l_width
current_movie = current_movie + 1
if (current_movie = poster_columns)
l_x = 366
l_y = l_y + (poster_height + poster_row_pad)
current_movie = 0
end if
end for

screen.swapbuffers()
0 Kudos
squirreltown
Level 9

Re: Showing Bitmaps when DrawObject is called

Well the good news is that you are doing it the absolute slowest way possible, so it can only get faster. Like theEndless said, you probably should use the textureManager to get your bitmaps, but no matter how you do it you need to request them all at once asynchronously with some sort of for-each loop, then as they come in deal with making the bitmaps.
Whats happening now by using GetToFile instead of AsyncGetToFile is that the second bitmap isn't even starting to download until the first is finished and the Roku can handle multiple downloads at the same time. I have a screen in one of my channels that scrolls around a very large picture made up of 256x256 tiles. I request all 200 jpgs at the same time and then have a while loop to deal with them as they come in.
Kinetics Screensavers
0 Kudos
coredump
Level 7

Re: Showing Bitmaps when DrawObject is called

Guess I am confused as to how to use the roTextureManager in this code I provided. I am looking at the docs for the roTextureManager and am guessing that I create the object, assign a port and wait for a message.

The confusing part for me is that it seems to be requesting a bitmap from the assets package instead of a URL:


request = CreateObject("roTextureRequest","pkg:/assets/comet.jpg")
mgr.RequestTexture(request)


Would I request the URL here ? Like this :


request = CreateObject("roTextureRequest","http://www.google.com/image.jpg")
mgr.RequestTexture(request)


and then wait for a message to come in when it is retrieved ? Then draw to the screen and swapbuffers ? Is it possible to get a small code snippet demonstrating this technique ? Sorry for the N00b questions
0 Kudos
NewManLiving
Level 7

Re: Showing Bitmaps when DrawObject is called

I posted an example on the texturemanager a few months back
viewtopic.php?f=34&t=70983#p446193

I have improved on this somewhat, but the core logic is the same. Your really diving into a complex area right off the bat. It took me nearly 6 months( not full time ) to
perfect a grid using the texturemanager. Don't mind sharing any code, but my style is different than most 2D programmers. And very complex to those who are just beginning BrightScript as well as the API. I make extensive use of Associative Arrays as objects which beginners find hard to understand, and I use Compositor, regions, and sprites, now mixed with drawing directly to the screen. I find this the best way to optimize the constant drawing that is involved (as TheEndless has mentioned) Taken together it presents a complex task to a beginner no matter how many comments I put in. So I am reluctant to put out my latest grid. Of course I feel responsible for leading you down this path so I do want to be helpful
My Channels: 2D API Framework Presentation: https://owner.roku.com/add/2M9LCVC
Updated: 11-11-2015 - Completed Keyboard interface
The Joel Channel ( Final Beta )
0 Kudos
squirreltown
Level 9

Re: Showing Bitmaps when DrawObject is called

Just thought I would add, as someone who when I started, didn't know what an array was - that you don't have to learn everything at once. You've made a really smart move already which is to jump on the 2D API - the built-in components are a dead end and you wouldn't learn anything from them you cant learn doing it 2D.
You don't have to use the texture manager - maybe its called for, maybe not, but you can always re-write those parts later. There are even some occasional advantages to not using it. One problem at a time.
Kinetics Screensavers
0 Kudos