Join our online forum to talk to Roku developers and fellow channel creators. Ask questions, share tips with the community, and find helpful resources.
Hi,
Sorry I was out for a while. So, I have been trying to get have a background image then, on top of it this scrollable items whose background will be transparent so that the main background image is visible. I tried modifying the code by enabling alpha enable in the screen and making the bitmap transparent.
However, when I scroll the items(text) in the scrollable area, the text are all over the place. please find the attached picture as well as the modified code. Any input is appreciated.
![](<BR /><!-- m --><a class="postlink" href="http://i.imgur.com/Be83tN0.jpg?1">http://i.imgur.com/Be83tN0.jpg?1</a><!-- m --><BR />)
![](<BR /><!-- m --><a class="postlink" href="http://i.imgur.com/fz0gPQY.jpg?1">http://i.imgur.com/fz0gPQY.jpg?1</a><!-- m --><BR />)
Sorry I was out for a while. So, I have been trying to get have a background image then, on top of it this scrollable items whose background will be transparent so that the main background image is visible. I tried modifying the code by enabling alpha enable in the screen and making the bitmap transparent.
However, when I scroll the items(text) in the scrollable area, the text are all over the place. please find the attached picture as well as the modified code. Any input is appreciated.
Sub Main()
' This is strictly for example - You really should NOT create your globals this way
' There is a much better way which I will not go into now, but to demonstrate how a region works
' this will have to do
' l_color = &h262626FF
img=CreateObject("roBitmap", "pkg:/locale/default/images/backgroundimg.jpg")
img.SetAlphaEnable(true)
m.Screen = CreateObject( "roScreen", True )
m.Compositor = CreateObject( "roCompositor" )
Port = CreateObject( "roMessagePort" )
m.Screen.SetMessagePort( Port )
m.Screen.Clear( 0 )
m.Screen.DrawObject(0,0,img)
'alphaenable is set to true
m.Screen.SetAlphaEnable(true)
'making the screen transparent
m.Compositor.SetDrawTo( m.Screen, &h00000000 )
Registry = CreateObject( "roFontRegistry" )
FontR26 = Registry.GetDefaultFont( 26, False, False )
l_data = [
"1) Get a Macbook pro with 4GB ram and 250gb harddrive",
"2) Get a Macbook pro with 8GB ram and 260gb harddrive",
"3) Get a Macbook pro with 12GB ram and 270gb harddrive",
"4) Get a Macbook pro with 14GB ram and 280gb harddrive",
"5) Get a Macbook pro with 16GB ram and 290gb harddrive",
"6) Get a Macbook pro with 18GB ram and 300gb harddrive",
"7) Get a Macbook pro with 20GB ram and 310gb harddrive",
"8) Get a Macbook pro with 22GB ram and 320gb harddrive",
"9) Get a Macbook pro with 24GB ram and 330gb harddrive",
"10) Get a Macbook pro with 26GB ram and 340gb harddrive",
"11) Get a Macbook pro with 28GB ram and 350gb harddrive",
"12) Get a Macbook pro with 30GB ram and 360gb harddrive"
]
' Keep in mind there are only so many text strings that you can fit into a bitmap buffer, before you exceed its maximum size
' there is a much better way to do all of this, but for now to help you understand regions, i'll keep it simple
' You have 12 items in your data
l_count = l_data.Count()
' You want to show a page size of 5 items
l_pageSize = 5
' The height of one text line for this font is GetOneLineHeight()
l_textHeight = FontR26.GetOneLineHeight()
' The largest width for your data is probably item 12 + some padding, normally you would interate
' the data and save the maximum width for your bitmap buffer. So this is the bitmap buffers width
l_width = FontR26.GetOneLineWidth( l_data[ l_count - 1 ], 1000 ) + 25
' For this examle you have to fit all those strings into a bitmap buffer. If you had 250 + strings you could not
' do this, but there is a better way like i said
' so the total height of your bitmap buffer is l_height, which is the total count * the height of each line
l_height = l_count * l_textHeight
' Now for the region size. It will be the same width as the bitmap but you only want to show pagesize of data
' So the height of the region will bee the textheight * the page size
l_pageHeight = l_textHeight * l_pageSize
' Create the bitmap with l_width and l_height
Bitmap = CreateObject( "roBitmap", { Width: l_width, Height: l_height, AlphaEnable: false } )
'Clear it or leave it transparent
'making it transparent
Bitmap.Clear(&h00000000 )
' Starting at y offset 0 ( you could play with this for margins, but then the region would have to change
' write each line of text, offsetting the y coord by text height
l_y = 0
for each l_str in l_data
Bitmap.DrawText( l_str, 0, l_y, &hCCCCCCFF, FontR26 )
l_y = l_y + l_textHeight
end for
' Create your region the same with, but only the page height
Region = CreateObject( "roRegion", Bitmap, 0, 0, l_width, l_pageHeight )
' Set wrap true
Region.SetWrap( True )
' Create the sprite
Sprite = m.Compositor.NewSprite( 200, 300, Region, 1 )
' Draw everything
m.Compositor.DrawAll()
m.Screen.SwapBuffers()
' Set up your event loop
' The frame rate for the up/down arrow
l_slowRate = 8
' The frame rate/number fwd/reverse arrows - ( this is not a true rate but good enough for lists )
l_fastRate = 2
' Delay between the button presses
l_delay = 200
' These are the constants for the buttons you can use the AA if you wish, probably best to
l_bp_BK = 0
l_bp_UP = 2
l_bp_DN = 3
l_bp_REV = 8
l_bp_FWD = 9
' Button pressed
l_index = 0
' Last button pressed
l_lastKey = -1
l_running = True
l_timer = CreateObject( "roTimeSpan" )
while( l_running )
' Get used to GetMessage, Wait is not really very good for anything but simple interface
l_msg = Port.GetMessage()
if type( l_msg ) = "roUniversalControlEvent"
l_index = l_msg.GetInt()
l_lastKey = l_index
' Based upon the key press, call the functions below
if l_index = l_bp_DN or l_index = l_bp_FWD
ScrollDown( Region, l_textHeight, l_slowRate )
else if l_index = l_bp_UP or l_index = l_bp_REV
ScrollUp( Region, l_textHeight, l_slowRate )
else if l_index = l_bp_BK
l_running = False
else if l_index >= 100 ' All key ups are value + 100
l_lastKey = -1
end if
' reset the timer for the delay
l_timer.Mark()
' User is holding down a button and the delay has been exceeded
else if ( l_lastKey >= 0 and l_timer.TotalMilliseconds() >= l_delay )
if l_lastKey = l_bp_DN
ScrollDown( Region, l_textHeight, l_slowRate )
else if l_lastKey = l_bp_FWD
ScrollDown( Region, l_textHeight, l_fastRate )
else if l_lastKey = l_bp_UP
ScrollUp( Region, l_textHeight, l_slowRate )
else if l_lastKey = l_bp_REV
ScrollUp( Region, l_textHeight, l_fastRate )
end if
end if
end while
' Always remove the sprite or you will have a memory leak, even out of scope it is not released
' must be explicity released at all times
if ( Sprite <> Invalid ) then Sprite.Remove()
End Sub
' This employs region offsetting and a very simple ease. You want to move the regions y pos by textheight each time the function is called
Function ScrollDown( roRegion As Object, height As Integer, frames As Integer ) As Void
' Not sure how optimized the byte code is so I simplify references when in loops
l_compositor = m.Compositor
l_screen = m.Screen
l_prevset = 0
for l_i = 1 to frames
' Offset means to move from the current position by the value
l_offset = int( height * l_i / frames )
l_offdiff = l_offset - l_prevset
l_prevset = l_offset
' Moving forward in Y direction so everything else is 0
roRegion.Offset( 0, l_offdiff, 0, 0 )
l_compositor.DrawAll()
l_screen.SwapBuffers()
end for
End Function
Function ScrollUp( roRegion As Object, height As Integer, frames As Integer ) As Void
l_compositor = m.Compositor
l_screen = m.Screen
l_prevset = 0
for l_i = 1 to frames
l_offset = int( height * l_i / frames )
l_offdiff = l_offset - l_prevset
l_prevset = l_offset
' same as aobve only moving back so the offset is negative
roRegion.Offset( 0, -l_offdiff, 0, 0 )
l_compositor.DrawAll()
l_screen.SwapBuffers()
end for
End Function
