Roku Developer Program

Join our online forum to talk to Roku developers and fellow channel creators. Ask questions, share tips with the community, and find helpful resources.
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
sonnykr
Visitor

Text/image on roImagecanvas

Hey All,

Got couple of questions regarding drawing text/image on top of roImagecanvas.

1. How to adjust the line height of a text element?
For example, my text wraps when it exceeds the targetRect width, but seems like the lines are too close to each other. Couldn't find a lineHeight attribute on TextAttrs on Content-Metadata

2. How to set the width and height of an image dynamically based on its actual dimension?
When I hard code those values, some images stretch to fill the specified area. Im trying to maintain the width:height ratio.

Thanks!
0 Kudos
5 REPLIES 5
belltown
Roku Guru

Re: Text/image on roImagecanvas

I'm not sure about the first question.

This should handle the second question:

Sub Main ()

imageDimensions = getImageDimensions ("pkg:/images/image.jpg")
Print imageDimensions

scaledDimensions = getScaledDimensions (200, 300, imageDimensions.w, imageDimensions.h)
Print scaledDimensions

End Sub

' Image must be a local file
Function getImageDimensions (imageUrl As String) As Object
dimensions = {w: 0, h: 0}
bitmap = CreateObject ("roBitmap", imageUrl)
If Type (bitmap) = "roBitmap"
dimensions.w = bitmap.GetWidth ()
dimensions.h = bitmap.GetHeight ()
EndIf
Return dimensions
End Function

' Fit within destination area, preserving source image aspect ratio
Function getScaledDimensions (destW As Integer, destH As Integer, srcW As Integer, srcH As Integer) As Object
w = destW
h = destH
If srcW > 0 And srcH > 0 And destW > 0 And destH > 0
' Get the original image's aspect ratio
aspectRatio = srcW / srcH
' Scale width first
w = Int (destH * aspectRatio)
' If scaled width exceeds destination width then scale height
If w > destW
w = destW
h = Int (w / aspectRatio)
Else
h = destH
EndIf
EndIf
Return {w: w, h: h}
End Function
0 Kudos
sonnykr
Visitor

Re: Text/image on roImagecanvas

One thing I noticed is that roImageCanvas will download the images automatically with a remote url. In this solution you provided, we need to manually download the images and create a bitmap out of it, and then get the width and height.

May be, this is the only solution to this?
0 Kudos
TheEndless
Channel Surfer

Re: Text/image on roImagecanvas

"sonnykr" wrote:
One thing I noticed is that roImageCanvas will download the images automatically with a remote url. In this solution you provided, we need to manually download the images and create a bitmap out of it, and then get the width and height.

May be, this is the only solution to this?

If you need to check the dimensions of the image, you'll have to download it first. There's no way around that, unless you specify the exact dimensions in whatever feed/API that's providing the URLs. You could use the roTextureManager to download and create the bitmap without needing to use roUrlTransfer, if you didn't want to manage the download yourself, but I don't think that'll save you much in this instance. There is no built-in "maintain aspect ratio" function of the image canvas, though it would be a handy feature to have.

To answer your first question, there's also no (documented?) way to adjust the line height on the image canvas. I think your only option there would be to programmatically wrap the text yourself.
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
sonnykr
Visitor

Re: Text/image on roImagecanvas

Gotcha! Thanks Belltown and TheEndless
0 Kudos
belltown
Roku Guru

Re: Text/image on roImagecanvas

If your text lines are too close together when they wrap, make sure the TargetRect that contains them is big enough or use a smaller font size. You could also try experimenting with the VAlign TextAttrs property, e.g. VAlign: "Top". I was able to get my text lines to wrap and space effectively without manually wrapping the lines in the TV grid listings in the What's On Channel. It's been a long while since I wrote the code, but I do remember running into a similar problem and fixing it with VAlign.
0 Kudos