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: 
btpoole
Channel Surfer

Text Placement on roImageCanvas

Running into a situation with displaying text on a canvas. I am looping thru an array, parsing information out, and displaying up to 4 pairs of information on the screen. The information on the screen thru code:

dTxt=50
tTxt=75
displaylist.Push({
Text:datetime 'DATE/TIME
TextAttrs: {color: m.guidecolor, font: "medium"}
TargetRect: {x:315, y:dTxt, w: 300, h: 30}
})
displaylist.Push({
Text:title 'TITLE
TextAttrs: {color: m.guidecolor, font: "medium"}
TargetRect: {x:315, y:tTxt, w: 300, h: 30}
})

dTxt=dTxt + 35
tTxt=tTxt + 35


The loop runs fine and all is displayed but the location never works out exactly right. The first set is perfect, the location and spacing is correct. Starting with the second set which has the y set by increasing the previous location by 35 starts to get off. By the time all of the pairs are displayed, the second line of text "TITLE" is overlapping the previous line "Date/Time". I have tried numerous combinations of changing "h" and the initial starting of the "y" but nothing seems to keep the spacing. I either end up with a growing gap between "Date/Time" and "Title" or they overlap. Since the only thing changing is the y value should not the spacing remain the same? Is there a missing element?
Thanks
0 Kudos
9 REPLIES 9
Komag
Roku Guru

Re: Text Placement on roImageCanvas

I think you may need to rearrange your loop logic, but it's hard to say without see all the code. You may be incrementing both the title and date each time you do either one, when perhaps you only want to increment one of them each time. Or something like that.
0 Kudos
btpoole
Channel Surfer

Re: Text Placement on roImageCanvas

Thanks Komag, that's what I am doing. Each loop increase the y location of each, moving each down the screen:


dTxt=50
tTxt=75
for i= 0 to 4

displaylist.Push({
Text:datetime 'DATE/TIME
TextAttrs: {color: m.guidecolor, font: "medium"}
TargetRect: {x:315, y:dTxt, w: 300, h: 30}
})
displaylist.Push({
Text:title 'TITLE
TextAttrs: {color: m.guidecolor, font: "medium"}
TargetRect: {x:315, y:tTxt, w: 300, h: 30}
})

dTxt=dTxt + 35
tTxt=tTxt + 35
end for


EXPECTED OUT OR SOMETHING CLOSE TO IT:

DATE/TIME
TITLE

DATE/TIME
TITLE

DATE/TIME
TITLE

But instead of keeping the set distance between each, the TITLE wants to move up in this case, or way down if I increase the increment on just the TITLE. I have tried to say increase the y on just the TITLE, but as it moves down the screen the gap gets bigger and bigger.
Thanks again
0 Kudos
Komag
Roku Guru

Re: Text Placement on roImageCanvas

I would add a couple console prints to diagnose more
? "i" i ", dTxt" dTxt ", tTxt" tTxt
put them at the start and end of the loop and see if they say what you would expect.
0 Kudos
btpoole
Channel Surfer

Re: Text Placement on roImageCanvas

Thanks again, will try that to see what comes out.

EDIT:
I printed result to console and everything is adding right. The date/time and the title value is increasing as expected by the value of 35. Nothing else is changing yet he spacing always gets off.
0 Kudos
belltown
Roku Guru

Re: Text Placement on roImageCanvas

Your math is wrong.

You need to replace:


dTxt=dTxt + 35
tTxt=tTxt + 35

with:


dTxt=dTxt + 55
tTxt=tTxt + 55
0 Kudos
btpoole
Channel Surfer

Re: Text Placement on roImageCanvas

Why? The only thing I see you changed was the 35 to 55. It should not matter or should it. It still should keep the same spacing if the only thing changing is the y or vertical location on screen. What am I missing that this would make a difference?
0 Kudos
Komag
Roku Guru

Re: Text Placement on roImageCanvas

How is the text drawn, what is your drawing/writing function?
0 Kudos
belltown
Roku Guru

Re: Text Placement on roImageCanvas

"btpoole" wrote:
Why? The only thing I see you changed was the 35 to 55. It should not matter or should it. It still should keep the same spacing if the only thing changing is the y or vertical location on screen. What am I missing that this would make a difference?

In each loop iteration you are displaying 2 lines, one below the other: a date/time and a title. Each line has a height of 30 pixels.

The first date/time line has a y-coord of 50 (and height 30), so it spans y:[50,80).

The first title line has a y-coord of 75 (and height 30), so it spans y:[75:105).

Note, you already have a 5 pixel overlap (80 vs. 75) between the two lines, although that should still display reasonably well since the text letters don't necessarily take up the whole height of the text box, but you may want to consider initializing tTxt to 80 just to be safe.

However, when you add 35 pixels to your next date/time y-coord, it will span y:[85,115). This gives an additional 20 pixel overlap with your first title line, the overlap occurring at y:[85:105). The same applies when you only add 35 pixels to the next title line.

To avoid the additional 20 pixel overlap, you'd need to add 35 + 20 = 55 pixels to each y coordinate each time through the loop.

Or, to make the math easier, initialize dTxt and tTxt to 50 and 80, respectively (to guarantee no overlap between the date/time and its respective title), then increment dTxt and tTxt by 60 each time through the loop (30 pixels to skip over the date/time line and 30 pixels to skip over the title line), and maybe another 5 px to add space between each set of date/time and title pairs.
0 Kudos
btpoole
Channel Surfer

Re: Text Placement on roImageCanvas

ah, thank you greatly, totally forgot about the heights overlapping when moving down. Thanks again
0 Kudos
Need Assistance?
Welcome to the Roku Community! Feel free to search our Community for answers or post your question to get help.

Become a Roku Streaming Expert!

Share your expertise, help fellow streamers, and unlock exclusive rewards as part of the Roku Community. Learn more.