Enabling different actions by clicking on different areas of a picture - Forum
Enabling different actions by clicking on different areas of a picture
Quote from saeid on April 1, 2021, 11:46 amI have a picture in my publication which the user can zoom it in or out. I want to enable different actions by clicking on different areas of the picture.
One idea is to put transparent push buttons on the Intended areas of the picture. Unfortunately, in this way when the user zoom the picture, the push buttons won't zoom along with the picture and their position change.
can anyone suggest me any solution?
I have a picture in my publication which the user can zoom it in or out. I want to enable different actions by clicking on different areas of the picture.
One idea is to put transparent push buttons on the Intended areas of the picture. Unfortunately, in this way when the user zoom the picture, the push buttons won't zoom along with the picture and their position change.
can anyone suggest me any solution?
Quote from Vadim on April 1, 2021, 12:41 pm@saeid
You can make a subroutine that will resize the buttons and call it when the image is resized.
You can make a subroutine that will resize the buttons and call it when the image is resized.
Quote from saeid on April 1, 2021, 2:52 pm@vadim
Since during magnification a scroll bar is appeared, the user can pan the image. So I need and action in subroutine which could fix the buttons on the picture.
Do you have any suggestion?
Since during magnification a scroll bar is appeared, the user can pan the image. So I need and action in subroutine which could fix the buttons on the picture.
Do you have any suggestion?
Quote from Vadim on April 2, 2021, 12:47 pm@saeid
Another option is to prepare in advance several image sizes with buttons on top of them and let the user choose between them. For example, small, medium and large.
Another option is to prepare in advance several image sizes with buttons on top of them and let the user choose between them. For example, small, medium and large.
Quote from Vadim on April 2, 2021, 6:16 pm@saeid
Here's another option. I made an example in which a subroutine determines which part of the image is clicked on. For the example, the subroutine handles 1, 2, 3, 11, 12, 13 cells (parts of the picture with the drawn table). You can use this principle or make up your own.
In the example, the subroutine works both when running without resizing the window and when resizing the window (keep the window borders at the borders of the image when resizing).
You can present smaller cells to be able to identify small objects in the image more accurately. If required.
Here's another option. I made an example in which a subroutine determines which part of the image is clicked on. For the example, the subroutine handles 1, 2, 3, 11, 12, 13 cells (parts of the picture with the drawn table). You can use this principle or make up your own.
In the example, the subroutine works both when running without resizing the window and when resizing the window (keep the window borders at the borders of the image when resizing).
You can present smaller cells to be able to identify small objects in the image more accurately. If required.
Uploaded files:
- You need to login to have access to uploads.
Quote from saeid on April 3, 2021, 9:11 am@vadim
Please take a look at my example. In this example I putted a push button on cell 12. When the user magnify or scroll the picture, the button's location will change.
Please share your idea about this problem?
Please take a look at my example. In this example I putted a push button on cell 12. When the user magnify or scroll the picture, the button's location will change.
Please share your idea about this problem?
Uploaded files:- You need to login to have access to uploads.
Quote from Vadim on April 3, 2021, 1:53 pm@saeid
The method I suggested works correctly to understand what part of the image the user clicked on. Even if the image is stretched (when the window is stretched, in which case the picture is zoomed). The subroutine in my example is called by clicking on the figure. The coordinates are calculated taking into account the coordinates of the mouse at the time of clicking, as well as the height and width of the working area of the application. My method works if the image is shown in its entirety when scaled.
But, as I see it, that's not what you want right now. You don't want to change the size of the picture along with the size of the window. You want to change the position of the picture within the boundaries of the Picture object with sliders.In this case, you can determine the desired part of the figure by invisible buttons. That is, you can bind the calculations not to the change of the application window size, but to the change of scale (you have two buttons for this) and to the position of sliders. But to do it, you should make your own sliders instead of automatic ones (automatic ones should be disabled in the properties of the Picture object). In this case you can take into account the position of the sliders when calculating what part of the image is clicked on. To do this, you will need to put a subroutine to change the position of the "Picture" object to the "Slider" object. You can combine the invisible buttons into a group and also move it synchronously with the Picture object. If you change the scale, you can run the subroutine to change the size and position of the invisible buttons (or just make visible a different set of buttons, pre-prepared for each scale, it's easier). For example, the user zoomed out, and in response a subroutine was executed that hid the old buttons and displayed the smaller ones.
The method I suggested works correctly to understand what part of the image the user clicked on. Even if the image is stretched (when the window is stretched, in which case the picture is zoomed). The subroutine in my example is called by clicking on the figure. The coordinates are calculated taking into account the coordinates of the mouse at the time of clicking, as well as the height and width of the working area of the application. My method works if the image is shown in its entirety when scaled.
But, as I see it, that's not what you want right now. You don't want to change the size of the picture along with the size of the window. You want to change the position of the picture within the boundaries of the Picture object with sliders.
In this case, you can determine the desired part of the figure by invisible buttons. That is, you can bind the calculations not to the change of the application window size, but to the change of scale (you have two buttons for this) and to the position of sliders. But to do it, you should make your own sliders instead of automatic ones (automatic ones should be disabled in the properties of the Picture object). In this case you can take into account the position of the sliders when calculating what part of the image is clicked on. To do this, you will need to put a subroutine to change the position of the "Picture" object to the "Slider" object. You can combine the invisible buttons into a group and also move it synchronously with the Picture object. If you change the scale, you can run the subroutine to change the size and position of the invisible buttons (or just make visible a different set of buttons, pre-prepared for each scale, it's easier). For example, the user zoomed out, and in response a subroutine was executed that hid the old buttons and displayed the smaller ones.
Quote from Vadim on April 4, 2021, 7:10 pm@saeid
In the attached example, I made one invisible button above the first cell with the table image. Moving the slider makes the picture and the invisible button move.
In the attached example, I made one invisible button above the first cell with the table image. Moving the slider makes the picture and the invisible button move.
You can create as many buttons as you want. And for other scales of the image you can prepare and make visible other buttons, other sizes.
In the attached example, I made one invisible button above the first cell with the table image. Moving the slider makes the picture and the invisible button move.
In the attached example, I made one invisible button above the first cell with the table image. Moving the slider makes the picture and the invisible button move.
You can create as many buttons as you want. And for other scales of the image you can prepare and make visible other buttons, other sizes.
Uploaded files:
- You need to login to have access to uploads.