B4J Question draw rectangular windows on image

[canalrun]

Hello,

I'm starting a new B4J application – in the planning stage. I'm using the latest B4J (2.50) and Scene Builder (2.0). I've written a few fairly involved B4J apps, but I'm in no way an expert.

Imagine a bitmap image in an ImageView of several people standing in a room. I first want to draw a rectangle around a single person. Then within that rectangle I want to be able to draw rectangles to identify certain features – face, hands, feet, etc.

• Each rectangle will have to be transparent with a colored border - maybe two pixels wide.
• I would like to be able to draw the rectangle by clicking a mouse button, dragging, release.
• The rectangle needs to be selectable (at which point I'll redraw the border to a different color).
• I would like to be able to resize or reposition the rectangles once drawn by selecting within the rectangle and using the cursor keys. I'm thinking the above two suggest the rectangles need to be Windows rather than drawn Shapes.
• I will maintain a List of the rectangles and their state.

I've been able to find quite a few B4J examples in the forum (from Erel and others) that demonstrate other things I will need to do (tables, tabbed views, second Windows, etc.), but, I haven't found examples of stuff like the above.

I'm not asking for code, but does this look like a good approach? Can someone suggest or point me toward controls, examples, or some things I may want to look at?

Thanks,
Barry.

 

[Erel]

The code I posted here in 2010 draws a selection box: https://www.b4x.com/android/forum/threads/drawing-a-selection-window.7023/#content

There is nothing fancy. It just clears the previous one and draws a new rectangle.

You will need to also store the data of each rectangle (use a class for each one) and then allow the user to move it.

 

[canalrun]

Here's a small B4J test app I wrote that shows drawing rectangles on an image using a Pane rather than a Rectangle Shape.

The advantage is that the rectangle pane responds to mouse clicks and removing the pane is done automatically preserving the background image.

The project source code is attached.

Barry.

Whoops! Sorry, the label should say, "Click and hold left mouse button..."

 

[canalrun]

Here is an updated version of my Draw Rect Test example application for B4J.

• It uses a pane rather than rectangular shapes to draw the rectangle.
• The style property of the pane sets the pane border size and color for the rectangle.
• The border color style is changed to show selection.
• Using a pane preserves the underlying image when resizing and deleting.
• Use the mouse to draw a rectangle – click the left mouse button, drag, and release.
• Clicking with the mouse within a pane selects the pane.

This version adds:

• A really cool graphic
• The ability to select and multi-select pane rectangles (hold down the control key while selecting a rectangle)

It uses agrahm's jReflection library:
https://www.b4x.com/android/forum/threads/jreflection-library.35448/

to handle detection of the control key. You must download and install this library into your B4J libraries folder.

The exported project source code is attached.

Barry.