embedded picture px programming
lazarus / 39-Graphics

----------------------------------------------------------------------
pentilisea · 2023-10-13 09:04

Hi there,
I wonder, if there are methods to define a px area on/in an immage and
assign it to an action.

For example, if a picture shows a colored square and the user ckicks
on it something should hapen - a value would be assigned or raised or
being stored in variables or treated in a procedure ...

Thanks for any hint. I'm adding a picture I'm pondering about ...

Klaus

----------------------------------------------------------------------
Dzandaa · 2023-10-13 09:49

Hi,

First try:
Why don't you create a list of records containing the coordinates of
each zones and a code to define what to do?
Then in the OnMouseUp Event, use the Coordinates X, Y to check if the
mouse click in a particular zone.

B->

----------------------------------------------------------------------
paweld · 2023-10-13 10:06

sample in attachment

----------------------------------------------------------------------
Handoko · 2023-10-13 10:17

There are several solutions for your case, each has its own advantages
and disadvantages.

1. Using array of TRect
The information of a single area (x, y, w, h) can be stored into a
TRect, so you can create an array or dynamic array of TRect for
storing all the rectangles. To detect which TRect is clicked, you do a
loop and test each of TRect, use Exit stament if you want to optimize
the performance.

2. Using array of TShape
TShape has MouseDown event so you can detect which one is being
clicked easily. You can write text inside a TShape by using
TShape.OnPaint event.

3. Write a new class
It is a bit challenging but if you have time, this is the best.

----------------------------------------------------------------------
Dzandaa · 2023-10-13 10:36

Hi,

Just a quick solution with Records.

Just an empty TPicture with 4 Zones defined.

B->

----------------------------------------------------------------------
paweld · 2023-10-13 10:39

A slightly expanded version with additional information and the
ability to assign a procedure

----------------------------------------------------------------------
KodeZwerg · 2023-10-13 14:43

I havent looked on pawelds example yet.
I would open that image in a quality viewer app that show mouse
coordinates.
Create array of box coordinates including dimensions based on above
information.
At that point you do have an original 1:1 system, but what if your app
rescales or user uses different dpi?!
So also take full dimension from original image (width(height) and
store it in your structure.
Assign to that image an onclick handler that first of all check
displayed width/height to know if we need to adjust coordinates in
your stored structure.
That way you can now easy check what the user has clicked by doing
simple math or sieve mechanism.

----------------------------------------------------------------------
pentilisea · 2023-10-13 18:07

Hi Guys,
didn't expect so much attention in that short time.
Thanks so much. Will work with your suggestions and report - may take
some time though.

Klaus