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

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

  • Joel

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 );

“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

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 :slightly_smiling_face:

Chris

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). :,(

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

“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.

@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!!!

“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.

I’m sure they have enough to do but is there any way I can get this escalated within Roku engineering? :sunglasses: If they tell us they don’t want to fix it thats another story. I guess not enough people have complained… considering Roku is meant to be played on a TV - not a trade show display or for digital signage. I’m pushing the limits. :slightly_smiling_face:

I haven’t looked at any of the updated Roku code to see if this issue still exists, but I guess from your experiments @crawfishmedia that it still exists. Roku devs…anything? I’ve been using an external server to general an image that has the text rotated for me for the past year. It would be nice to have this working!

The easiest and quickest fix would probably be to switch to using the 2D API instead. Using it, you could create the text on a bitmap, then rotate it before drawing it to the roScreen. I don’t know how complex your screen layout is, but figuring that out would almost certainly be a lot faster than waiting on Roku to release a firmware update to fix text rotation on the roImageCanvas. Just my opinion…

Boner achieved!

screen = CreateObject(“roScreen”)
port = CreateObject(“roMessagePort”)
screen.SetMessagePort(port)

fontRegistry = CreateObject(“roFontRegistry”)
font = fontRegistry.GetDefaultFont()

bitmap = CreateObject(“roBitmap”, {width:1280, height:720, AlphaEnable: true})
bitmap.Clear(&h000000FF)
bitmap.DrawText(“Credit: Full Name (username)”,0,0,&hCBCBCBFF,font)
screen.DrawRotatedObject(128,70,270,bitmap)
screen.Finish()

Now I have to completely code my own slideshow handler instead of roCanvas or roSlideshow. Happy we resolved this but angry about the workarounds that have to be done.
Thanks!!!