Checking clicked word

Programming Questions

Alexandre..

in Programming Questions • 1 year ago

Hi guys,

I'm making a dictionary like applet for ancient greek poetry.
I need to check what word the user clicked (or is mousing over) per line. Each line has aorund five words, with a font that is not monospaced.
I'm thinking about a solution that has the pixel size and position of each word hard coded. Any better ideas?

Here's how I'm displaying the text:

PFont fontGreek;
void setup() {
size(800,600);
fontGreek = createFont("Athens", 16, true);
} // end setup
void draw() {
background (255);
textFont(fontGreek); fill(0);
text("Ζεὺς μὲν ἀφίκτωρ ἐπίδοι προφρόνως\n"+
"στόλον ἡμέτερον νάιον ἀρθέντ᾽\n" ,20, 60);
} // end draw

Thanks.

Replies(5)

amnon.owed

Re: Checking clicked word

1 year ago

I can think of two options:

Make each word a separate object and use functions like textWidth() to determine the mouseover.
Use a buffer where you write each word in a different color (so later the color corresponds to the word).

Comparing the first and the second option, I think the second is more accurate at checking the real mouseover. Since the first basically checks the rectangle the word is in, while the second actually checks against the accurate shape of the letters.

Below is an illustrative code example. Note that if you wanted to implement this idea with more words, you would have to do it a bit differently (one canvas and buffer where all the words are written to, storing the colors and corresponding words in an array, arraylist or hashmap etc.). But this will give an idea how the technique works...

Code Example

FindText ft;
void setup() {
size(800, 600);
ft = new FindText("TEST");
}
void draw() {
ft.display();
ft.check();
}
class FindText {
PGraphics canvas;
PGraphics buffer;
color txtColor;
String txt;
FindText(String txt) {
canvas = createGraphics(width, height, JAVA2D);
buffer = createGraphics(width, height, JAVA2D);
txtColor = color(255, 0, 0);
this.txt = txt;
canvas.beginDraw();
canvas.background(255);
canvas.textSize(140);
canvas.fill(0);
canvas.noStroke();
canvas.text(txt, 200, 300);
canvas.endDraw();
buffer.beginDraw();
buffer.textSize(140);
buffer.fill(txtColor);
buffer.noStroke();
buffer.text(txt, 200, 300);
buffer.endDraw();
}
void display() {
image(canvas, 0, 0);
}
void check() {
color c = buffer.get(mouseX, mouseY);
fill(0, 0, 255);
textSize(30);
if (c == txtColor) {
text(txt, mouseX+10, mouseY+10);
} else {
text("nothing", mouseX+10, mouseY+10);
}
}
}

Chrisir

Re: Checking clicked word

1 year ago

Hello,

I don't whether this has been done but you could use split and have an array of your words.

you could then put it out word by word: Code1

text (word, cursorPos, LineNumber );
cursorPos += textWidth (word) + constSpaceWidth;

determine with your lineend and go to next line.

if cursorPos >= constMaxPixelPerLine {
cursorPos = 0;
LineNumber += textHeight (word)
}

You could use the tab "Buttons" from [EDITED]
http://www.openprocessing.org/visuals/?visualID=49173

There you remove the color of the buttons and store your word in it (using SetupButtons() - modify Code1 & Code2 here). You even have a tool tip there.

Then modify the routine to evaluate mouse click on a word.

Greetings, Chrisir

Chrisir

Re: Checking clicked word

1 year ago

sorry, amnon.owed, we wrote at the same time.

Alexandre..

Re: Checking clicked word

1 year ago

Thank you very much, amnon.owed and Chrisir. I'll try to implement one of these solutions.

Chrisir, I didn't find this http://www.openprocessing.org/visuals/?visualID=49158

Chrisir

Re: Checking clicked word

1 year ago

I am sorry

http://www.openprocessing.org/visuals/?visualID=49173

I am referring to the red buttons with the < and the > in the lower left corner.

You could instead of < write your greek word and remove the colors.

Greetings

Top Reply