mouse over and show image

General Discussion Other

OOLONGT

in General Discussion • Other • 1 year ago

I am working on a program that have to use mouse over or mouse click. I have different buildings(image) on the screen, and when the mouse over one of the blocks, an image(a face or a mouth) will apear in the block, and also appear the text in the array with the same block.

For example, when my mouse over the first block, an image will show in the blocks, and a line of the text array [0] (the fist block in the array) will appear. So I need to get which block I am focus on (the index number of blocks) and show image in that block.

The problem is I don't know how to check the mouse over the block and get the index number of that block.

1. Because the buildings are actually image, and I cannot check the position(x, y) of every blocks, they are not align.

2. I have read this page( https://forum.processing.org/topic/mouse-over-getchild-in-pshape) , and use the library inside, but the problem is when I have to show the image, I have to make those image as path in AI, and one face are make by many paths, so when I have to getChild, I don't know how to get the exactly child. The problem is I am also an idiot in AI and drawing. Is there any easy way to make things as an svg?

3. The library I have seen is basically change the color of one part(the child), but if I want it to be visible or invisible, I cannot do it.

4. I know PShape can make shape become visible or invisible, but PShape have to know the exactly position of every shape(where they should put), so return to the first problem, I don't know the position......

Sorry it is a long question, but i hope someone can help me:(
Thank you for you time. Thanks a lot.

Replies(8)

PhiLho

Re: mouse over and show image

1 year ago

Make a copy of your image. Open it in your favorite image editor, eg. Gimp. Select one building. Choose one unique color, note it down. Fill the selection with this color. Repeat for each building, changing the color each time. Save the image, in PNG format.
Now, load the image in setup(), and each time your mouse is at a given position, use get() at this position in the buffer: the color you get will indicate which building is hovered.

OOLONGT

Re: Re: mouse over and show image

1 year ago

Thanks for your reply!!!It really help me a lot!!
But I still have one question... I have try your suggestion with a simple code. But once the image appeared, it won't disappear anymore. I have call the image(bg, 0, 0); again, and I assumed it will have the same effect when I keep call background(0); again and again, and the background will refresh(?) but it doesn't....

And also how can I make the image(in the code, it call"sm") just stay at that square and do not move follow my mouse? I know I am using the mouse position for the image(sm), so it follow my mouse cursor, is there any way can know the square position, and make the image(sm) do not follow my cursor moving?

here is the code...

PImage bg, sm;

void setup() {

bg = loadImage("forum.png");

sm = loadImage("sm.png");

size(1000, 800);

colorMode(HSB);

}

void draw() {

image(bg, 0, 0);

color now = get(mouseX, mouseY);

fill(now);

rect(20, 20, 20, 20);

println(now);

if (now == -65536) {

getImage();

}

void getImage() {

image(bg, 0, 0);

imageMode(CENTER);

image(sm, mouseX, mouseY);

}

Thank you very much!!

PhiLho

Re: mouse over and show image

1 year ago

Not quite what I tried to describe...
I assume your sm is the flattened version of bg, and that you have an additional image, face.png, you want to display on mouse over.

PImage bg, sm, face;
color buildingColor = color(11, 111, 222); // Random color here...
void setup() {
size(1000, 800); // Always first call!
bg = loadImage("forum.png");
sm = loadImage("sm.png");
face = loadImage("face.png");
colorMode(HSB);
}
void draw() {
image(bg, 0, 0);
color now = sm.get(mouseX, mouseY);
fill(now);
rect(20, 20, 20, 20);
println(now);
if (now == buildingColor) {
showImage();
}
}
void showImage() {
imageMode(CENTER);
image(face, 500, 200); // Change these coordinates!
}

buildingColor is the color you painted over the building.

OOLONGT

Re: Re: mouse over and show image

1 year ago

Now I understand more!!:) And I follow your code, test again, it works:) Thank you so much!

But the last part of the showImage function, I don't know how to get the coordinates. Because of the building are image, and the position of every building in image are not the same and not even align....

PhiLho

Re: mouse over and show image

1 year ago

You need a list of colors, one per building:
color[] buildingColors = { #FF0000, #00FF00, #FFFF00, #0000FF, #00FFFF }; // And so on
You can have a similar list of coordinates:
int[][] faceCoord =
{
{ 500, 200 }, // x in faceCoord[i][0], y in faceCoord[i][1]
{ 300, 100 },
{ 250, 120 },
{ 310, 220 },
{ 150, 150 },
};
So if you find the color returned by get() is the ith of the list, you can get the position of the face by getting the ith pair of coordinates.

OOLONGT

Re: Re: mouse over and show image

1 year ago

I understand the logic of your suggestion, but the problem is I don't know any position of the image. For example I have te building, and they draw in different position in a same png. When I draw the image, I cannot really count like...the right corner of the 1st building is x =10px and y =20px...etc...

And sorry about my bad english, I didin't make it clearly, I am actually checking mouse hover on each square on the building(that is the red arrow pointing in my attached image), so the whole image will have a lot of buildings with a lot of square on them. So I don't know how to get the position of each square when the mouse hoved.

Thanks!!!!

PhiLho

Re: mouse over and show image

1 year ago

Mmm, looks like my explanations are not clear, or I didn't understand your goal.
Here is a quick sketch illustrating my idea:

PImage bg, bgMask, face;
color[] buildingColors = { #FF0000, #FFFF00, #00FF00, #0000FF, #00FFFF, #FFFFFF }; // And so on
int[][] faceCoord =
{
{ 63, 326 }, // x in faceCoord[i][0], y in faceCoord[i][1]
{ 295, 326 },
{ 548, 326 },
{ 129, 573 },
{ 352, 573 },
{ 552, 573 },
};
int[] facePosition;
void setup()
{
size(800, 900); // Always first call!
bg = loadImage("building.png");
bgMask = loadImage("buildingMap.png");
face = loadImage("face.png");
}
void draw()
{
background(250);
image(bg, 0, 0);
if (facePosition != null)
{
image(face, facePosition[0], facePosition[1] - face.height);
}
}
void mousePressed()
{
color now = bgMask.get(mouseX, mouseY);
facePosition = null;
for (int i = 0; i < buildingColors.length; i++)
{
color c = buildingColors[i];
if (c == now)
{
// Found
facePosition = faceCoord[i];
}
}
}

The images I used: I made a smaller building, and didn't define the colors of the last row (forgot them, and they aren't needed for the demonstration).
building.png

buildingMap.png

face.png

I found the coordinates with Gimp, pointing near the lower-left corner of the windows, noting the coordinates.

You can even make an array of PImage for the faces, if you want a different one on each window.

OOLONGT

Re: Re: mouse over and show image

1 year ago

Thank you so much!!!! Gimp is the exactly answers I have to know!

Because I don't know how to get the coordinates of image before and I don't know there have a software(?) call Gimp=P