Roku Developer Program

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

roImageCanvas TargetRotation issue with Text being cut off

I am having an issue with rotating text -90 degrees so I can have a vertical display. When I rotate text -90 degrees it seems that the text container is not rotating with the text, thus causing the text to be cut off at around the height that the text would be if it was not rotated. I am instantiating an roImageCanvas object and setting a layer via SetLayer(1, Content-Meta) and using TargetTranslation and TargetRotation to achieve this. Note that I have successfully rotated graphics this way with no issue.

Here is a sample of the code to show the standard text and rotated.

canvas = CreateObject("roImageCanvas")
canvas.Show()

' regular text
canvas.SetLayer( 1, { Text: "My Text", TargetRect: { x:0, y:0, w:400, h:50 } } )

' rotated text
canvas.SetLayer( 3, { Text: "My Text", TargetRect: { x:0, y:0, w:400, h:50 }, TargetTranslation: { x:0, y:400 }, TargetRotation: -90.0 } )


Roku 2XS 3100X
0 Kudos
13 Replies
Highlighted
Roku Employee
Roku Employee

Re: roImageCanvas TargetRotation issue with Text being cut o

Thanks, I'll take a look at your code and get back to you.

- Joel
0 Kudos
Highlighted
Level 7

Re: roImageCanvas TargetRotation issue with Text being cut o

Just posting your response for archiving purposes:

"You might want to try using roScreen instead, draw text to a bitmap or region and then drawRotatedObject to the screen."

------------

I did consider using that but I couldn't figure out how to get it to work with Layers in roCanvas. As soon as SetLayer was called it would put it on top of the roScreen object and hide it.

For now I am processing the text on an external server running php and returning it as an image. This isn't ideal but it works for a small title.

Here is the php code for anyone interested.

// Set the content-type
header( 'Content-Type: image/png' );

// the text
$text = 'This is a long title for a poster. Does it look good? I think it does ... wonder if it will wrap?';

// font of your choice
$font = 'myfont.ttf';

// instantiate the image
$im = imagecreatetruecolor( 67, 720 );
imagesavealpha( $im, true );
imagealphablending( $im, true );

// color
$white = imagecolorallocate( $im, 255, 255, 255 );

// transparent color specified by the alpha 127
$black = imagecolorallocatealpha( $im, 0, 0, 0, 127 );

// fill image with transparent color
imagefill( $im, 0, 0, $black );

// create the text
imagettftext( $im, 25, 90, 45, 700, $white, $font, $text );

// output image
imagepng( $im );

// clean up
imagedestroy( $im );
0 Kudos
Highlighted
Roku Employee
Roku Employee

Re: roImageCanvas TargetRotation issue with Text being cut o

"murphesi" wrote:
I did consider using that but I couldn't figure out how to get it to work with Layers in roCanvas.


You wouldn't use roScreen and imageCanvas together, you would use it for all your graphics instead of using roImageCanvas. Although, you could possibly call setlayer on layer 0 of imagecanvas with compositionMode:"SourceOver" and see if that works, though I think the potential for problems is high.

- Joel
0 Kudos
Highlighted
Level 7

Re: roImageCanvas TargetRotation issue with Text being cut o

That is what I figured. Maybe I'll look at switching over to roScreen when I get a chance.

By the time I switch to roScreen the problem will be resolved on roCanvas Smiley Happy

Chris
0 Kudos
Highlighted

Re: roImageCanvas TargetRotation issue with Text being cut o

With roImageCanvas, I too am seeing the text always cut off at 45deg and then disappearing when the rotation > 80deg. I'm not able to figure out where the rotation center is. The text 'box' also appears to shrink, meaning if there are more than one word, the last word will move under the first word.
To experiment (I tried many), I set the TargetRect to 0x,0y,1280w,720h and the positioning H/V to left, top (assuming the rotation point is 0,0). If I try to rotate 45deg, the text is cut off on its left and right side. The rotation pivot point seems like its way out in outer space (far left). I experimented many times with the translation and rect points but no success.
I am concluding that the text rotation feature needs some work on Roku engineering side. My photo credit text will have to stay horizontal (even though my display is vertically oriented). :,(
0 Kudos
Highlighted

Re: roImageCanvas TargetRotation issue with Text being cut o

Hello Roku guys,
Just following up with this issue. I do not see any method to properly rotate text due to this bug. I need to be able to cleanly rotate text for a vertically oriented screen. I use the text for crediting a photo. The only workaround I see is setting up a service where you turn text into a JPG image and then download the image in roImageCanvas or roScreen… which is insane.
I really hope to see this fixed in near firmware update. It has been almost a year since we reported it.
Thanks
AC
0 Kudos
Highlighted
Level 8

Re: roImageCanvas TargetRotation issue with Text being cut o

"crawfishmedia" wrote:
Hello Roku guys,
Just following up with this issue. I do not see any method to properly rotate text due to this bug. I need to be able to cleanly rotate text for a vertically oriented screen. I use the text for crediting a photo. The only workaround I see is setting up a service where you turn text into a JPG image and then download the image in roImageCanvas or roScreen… which is insane.
I really hope to see this fixed in near firmware update. It has been almost a year since we reported it.
Thanks
AC

Instead of rotating the whole text string (which can be hard to read unless you rotate your head or your TV 90 degrees), why not just break the string into its individual characters and arrange them in a vertical column, e.g:


V
e
r
t
i
c
a
l

S
t
r
i
n
g

With a suitable font/color scheme, the resulting effect might not be too bad. It may not be exactly what you're looking for, but it seems like a lot less hassle than turning text into a rotated JPEG image, at least until they get the rotating text issues resolved.

EDIT: And if that doesn't give you what you want, you could always create your own character-set made up of little PNG images corresponding to each character, where the letter images have each been rotated 90 degrees. Lay those images out vertically and it will look like a line of text that has been rotated 90 degrees. And if you're feeling really masochistic, you could vary the image height of each of your tiny PNG's so as to get a proportional font-like layout.
https://github.com/belltown/
0 Kudos
Highlighted

Re: roImageCanvas TargetRotation issue with Text being cut o

@belltown, your idea is an interesting workaround I didn't think of that. However, it would be a lot of extra coding which I don't think I'm up to considering the text rotation is clearly a Roku bug. Using JPGs for each character well, while I appreciate the idea, is way too much work. The next would look un-kerned unless you coded an algorithm to kern the spacing between images. If it was for a client I would consider it though. Until then, text rotation FAIL!!!
0 Kudos
Highlighted
Level 10

Re: roImageCanvas TargetRotation issue with Text being cut o

"crawfishmedia" wrote:
@belltown, your idea is an interesting workaround I didn't think of that. However, it would be a lot of extra coding which I don't think I'm up to considering the text rotation is clearly a Roku bug. Using JPGs for each character well, while I appreciate the idea, is way too much work. The next would look un-kerned unless you coded an algorithm to kern the spacing between images. If it was for a client I would consider it though. Until then, text rotation FAIL!!!


yeah...if the text was a fixed-width font then it'd be a little easier, but then you'd need different vertical spacing for 4:3 and for 16:9... best to just have the rotation fixed in the firmware.
0 Kudos