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: 
sonnykr
Level 7

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
belltown
Level 7

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
https://github.com/belltown/
0 Kudos
sonnykr
Level 7

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
Level 7

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
Level 7

Re: Text/image on roImagecanvas

Gotcha! Thanks Belltown and TheEndless
0 Kudos
belltown
Level 7

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.
https://github.com/belltown/
0 Kudos