iOS Question Zoom canvas

[Graeme Mitchell]

I have the following code

picCanvas.Initialize(pnlField)

and I add some rectangles to it and some lines, basically creating a soccer field on my iPhone. When I click the field it places a circle (where the shot was from). I then want a zoomed image of the goal where I can click where the shot ended up in the goal placing a circle there. The program will then draw a line between the 2 circles.

Erel suggested creating a new Zoomed image which I did but the issue is drawing the line between the 2 circles because they are different Zoomed images.

Is there a way when I click a button that it can zoom in on the goal area only and then zoom out to the original view?

 

[Erel]

You can resize a bitmap using ImageView or B4XImageView. You can also use B4XBitmap.Crop to get the relevant area.

 

[Graeme Mitchell]

Yes that does work, however, I am not sure it does in this application. The first image the location of where the football is struck from and the 2nd image is the location on the goal. After the second circle is draw an line is drawn between the 2 circles. Using ImageView or B4XImageView and the zoom function is this possible?

 

[Erel]

It is impossible to understand with such large images.

 

[Graeme Mitchell]

I edited the post, sorry I did the original from my iPhone

 

[klaus]

If I understand well, the goal is a front view and the field is a top view, and the goal has a different scale than the field.
And the first circle is always on the field and the second one always in the goal.

 

[Graeme Mitchell]

Klaus, when I click the screen the first time is places a circle for the shots location, after I do that I want it to zoom in towards the goal so I can get a more specific location to where the shot "hits" the goal (see attachment) then zoom back to the normal view and draw the line between the 2 circles

 

[klaus]

As an answer to your first question, almost everything is possible, but without knowing what exactly you want to do it is impossible to give a concrete advice.
Some more questions:
1. What is the final purpose ?
2. Do you want to show more than one shot ?
3. Do you want to show only shots in the goal ?
4. Do you want to show also the entire field, or only a partial field with one goal ?
5. Which goal do you want to show, the upper or the lower one ?
6. In the unzoomed image, do you also want the circles ? It will become overcrowded in the goal with real proportional dimensions.

Well, you see that, at least for me, it is impossible to give a concrete advice for the optimal solution without knowing the final purpose.
Before answering a question, I need to understand the problem.

 

[Graeme Mitchell]

Klaus, you are very thorough. I coach goalkeepers and there isnt anything available out there that does tracking of shots on goal, goalkicks, drop kicks etc. The app currently works fine except the issue I am having with the zoom on the location for the shot on goal. I will try to answer your questions;
1) Its a goalkeeping app to track location of shots (where we need to defend better) and where the shot is saved on the net.
2) It does show more than 1 shot and can get "busy", its why I draw a line between the 2 circles, it allows better tracking. I also "clear" the field at half and save the first half screen shot to be emailed later
3) I have a button that is either a shot (blue circles and lines) or goal (red circles and lines), both use the same code, just changes the colour.
4) I only need to show the partial field because its just for goalkeepers
5) Usually its the full image that I want to show, however, when it comes to the location on the goal where the ball is, that's where i want to use the zoom so I can be more specific where the shot was saved or the shot was scored.
6) Yes, I do need the circles, I do "clean" the field if it gets too busy and as I said earlier it saves the screenshot

Great questions

 

[klaus]

Attached a small demonstrator program.
It is a B4XPages project, tested with B4J, B4A and B4i.
The field is scaled and the cursor positions are displayed at the bottom of the screen.
The field dimensions are taken from HERE, in meters.
The goal is zoomed by a factor of 4, hard coded.
When the cursor is in the goal field, the position values are those of the goal.
The x positions are referenced to the middle of the field.

When you touch the screen, a cursor as a cross is displayed.
Be aware that the cursor is above the touch point of the finger to make the cursor visible, this displacement is defined with the variable DeltaFinger.

When you press the Shot button, and touch the screen, the cursor is a circle. You can move the cursor.
The cursor appears only in the field.

When you release the finger the last position is memorized and this first point remains displayed
Then, when you touch the screen again, the cursor appears only in the goal area, you must move the finger to be sure that the cursor is in the goal area.

When you release the finger, the shot is displayed in blue and the shot is added to a list.

Then, you can repeat the operation again.

Press the Clear button, the display it cleared.
Press the Draw button, the shots are displayed again.
Press the Clear shots button to clear the shots list.

You need to adapt it to your needs.
It is a demonstrator project, not optimized, with probably some bugs and some debug and testing code.

 

[Graeme Mitchell]

Klaus, this is fantastic! I really like the DeltaFinger which allows much more specific placement of the shot because you can see it. After you click the first location and get the first circle is there anyway that you can zoom 2 or 3 times centering on the goal and then after you select the location of the shot on the goal (2nd click) Zoom back to the original field?

 

[klaus]

Attached you find an improved version.
I am not convinced that changing the zoom between the first click and the second one is really a good solution.
For me, in my mind, it is more disturbing for the user than an advantage, just my opinion.
In the attached project you can define the goal zoom factor as a parameter.
It could be possible to change the current goal zoom factor to another one when you click on the 'Shot' button. Not implemented.
The current project has already a default goal zoom facto of 4 and you can change it.
But, it depends on what you want to show your goalkeepers, only the shots on a small goal or on a more zoomed one. This can be done with the goal zoom factor.
I have added another feature, detect an existing shot when you click on a shot and or move over one in the field.
When a shot is detected it is displayed in red and its data are displayed.
Now, you got a tool, up to you to implement it in your project, adapt it to your needs and improve it.

 

[Graeme Mitchell]

That's simply awesome and very much appreciated