DrawText one word at a time with equal spaces between words

38 views
Skip to first unread message

Megan Garrison

unread,
Jan 28, 2016, 6:40:35 PM1/28/16
to MIT App Inventor Forum
Hi There - i have searched but not found an answer to this question

I have a list containing single words (each item on the list is a single word)
The words are different lengths (some have 3 letters, some have 5 letters etc)

I want to loop through the list and draw each word on the canvas in a line horizontally with approximately the same amount of space between each word.

I can loop through and draw the text but I can't seem to get fairly equal spacing between the words

attached is a screen cap of what i am trying but I am not good at math
can anyone see what I am doing wrong??

thanks! :)

PS: I have a reason for needing to loop through and draw the words one at a time rather than just drawing the whole sentence at once.
drawtextcapture.png

Scott Ferguson

unread,
Jan 28, 2016, 8:16:18 PM1/28/16
to MIT App Inventor Forum
Your job is made more difficult by the fact that the font used with DrawText is not monospaced ('w' is wider than 'i', for example).
If it were monospaced your formula would work better.
Your method of spacing is probably about as good as any.
The only thing that might improve it is to use percentages of the width of the device screen as the multipliers.
That would at least make the spacing more consistent between devices.
Spacing lines of text vertically is much easier as using the canvas FontSize to offset the y values for each line works well.
---
sf


Megan Garrison

unread,
Jan 29, 2016, 1:24:20 PM1/29/16
to MIT App Inventor Forum
That's what I was afraid of - so now I am thinking I need to go about solving my problem in a different way.

What I wanted to do is print a sentence and then have text2speech highlight each word as it is said aloud.
I can't make buttons because every sentence would have a different number of words in the sentence
and I don't want to have different screens for each sentence because that would make two many screens

if anyone can think of a different way to achieve my aim I would love to hear your suggestions

thank you so much, Megan

Italo

unread,
Jan 29, 2016, 1:49:32 PM1/29/16
to MIT App Inventor Forum
Megan, I'm 100% sure that you will be more successful and avoid a lot of frustration by using labels for your text, which can be dynamically and equally spaced, placing empty labels or layouts between them, making them visible or invisible at will and changed the text and/or background color without any problems.
What do you think Scott?

Scott Ferguson

unread,
Jan 29, 2016, 3:13:48 PM1/29/16
to MIT App Inventor Forum
I agree, Italo.
I am working on an example for Megan now and will post it soon.
Have to step out for a bit...
---
sf

Italo

unread,
Jan 29, 2016, 4:57:05 PM1/29/16
to MIT App Inventor Forum
The problem here might come up when trying to highlight the word that's being spoken. If you send word by word to text2speech it will sound like individual words instead of a sentence.
On the other hand, if you send the sentence, the highlight will be out of sync with the text2speech sound.

Megan Garrison

unread,
Jan 29, 2016, 6:03:35 PM1/29/16
to MIT App Inventor Forum
OK Italo - Thanks - just ruling out drawtext and thinking of labels has given me a couple ideas :-)

Megan Garrison

unread,
Jan 29, 2016, 6:05:03 PM1/29/16
to MIT App Inventor Forum
Thank you Scott! I haven't been working with AI2 long but have to say I am loving it :-)

Scott Ferguson

unread,
Jan 29, 2016, 6:40:37 PM1/29/16
to mitappinv...@googlegroups.com
I'm baaack...
This was fun :-)
For this test project you type in whatever sentence text you want up to ten words.
Then tap the 'Say it' button.
The words will be inserted in each label left to right.
if there are less than ten words, the remaining labels will be set to empty text.
Each time a word is spoken, the background color of the label is set to a light green. (you can change that to setting text color if you prefer)
Try it out and make any changes needed and let us know if you have any further questions.
If you are not familiar with the 'Any' advanced blocks you may want to study how they work further.
---
Happy Inventing!
sf

SayWords.aia
blocks.png
Capture.PNG
Screenshot_2016-01-29-17-40-56.png

Megan Garrison

unread,
Jan 30, 2016, 8:42:41 AM1/30/16
to mitappinv...@googlegroups.com
Oh WOW! This is Totally Awesome!!! Thank you so very much :D (how many exclamation marks can I add before it gets to too many? LOL)  Just know that I really appreciate this ~ Megan PS: I am looking at the the 'Any' advanced blocks tutorial right now :D
Reply all
Reply to author
Forward
0 new messages