Enhancement #943

Enhance perimeter selection in SHOP for better User Experience

Added by Blatti Yves over 4 years ago. Updated over 4 years ago.

Status:ClosedStart date:03/20/2015
Priority:HighDue date:
Assignee:-% Done:

100%

Category:SHOP
Target version:4.3.2
Sponsor: Ergonomic impact:
Functional impact:

Description

Target

In easySDI workshop in February 2013, we designed the desired SHOP perimeter definition UX.
Everything has not been implemented yet, this enhancement is proposed to complete the shop behavior as initially designed.

Big lines are:
  • Allow free perimeter modification after drawing
  • Add informations about selected perimeter (WFS)
  • Avoid loosing selected perimeters by re-implementing v2 logic for WFS
  • Have an 'implicit' pan policy and remove pan button

Allow free perimeter modification after drawing

In V2 we had the ability to edit a free perimeter once it has been drawn. But it was implemented as a specific control.
In 2013 workshop, we proposed 'combined tools' that 'onClick' go for new drawing, and once the drawing is done the feature becomes editable (the button returns to normal state/deselected).
To start again and clear the drawn perimeter, user has to select the tool again.

Here is how it should work:

Rectangle / Box tool

See this logic in action HERE (in the mini map, use rectangle for example)

When clicking on the rectangle tool, we enter in 'draw mode'. Then we 'drag and draw the rectangle'.

When the click is released, and the rectangle created, we automatically toggle in 'edit mode'.
(The button is now is normal state, not activated, but the feature is editable)
In edit mode, the rectangle has:
  • 4 edit handles in corners
  • 4 edit handles in sides
  • 1 rotate handle on the bottom right corner. Shifted outside of the rectangle.

The rectangle can also be dragged (moved) by clicking it's inside surface:

Avoid '1 pixel rectangle'

There is a problem with the actual rectangle tool: it is possible to accidentally draw a '1x1 px' by clicking the map without moving the mouse, caused by:
- Human hand failure : clicked accidentally
- Misinterpretation : the user wants to draw a rectangle with 2 clicks (without dragging)

As the rectangle tool will offer edit capabilities, we propose to add the following feature to avoid 'pixel sized' rectangles:
- If the drawn rectangle is smaller than <min_surface_to_be_defined_in_shop_backend> then draw a square.
- The square is centered on the tiny 'failed' rectangle, and it's sides length is defined in backed.
- This DOES NOT force a minimum size ! If the user really wants a small rectangle, he can resize it. This behavior is active in 'draw mode' not in 'edit mode'.

Try it here*

Polygon tool

The polygon tool features the same logic:
On first click we enter in 'draw mode', then draw the polygon point by point (the button is active).
The polygon is closed on double-click. After completion, we pass in edit mode automatically (the polygon button is now back to normal state).

Here is how it goes:

Click on polygon tool, and start adding points (same as in today's v4):

Double click to close:

The polygon now goes into edit mode:

It offers:
  • Handles on every vertice than can be moved:
  • Handle on every line center to add a vertice by dragging:

Note: the polygon cannot be moved (dragged) nor rotated.

Keep the free perimeter editable !

The free perimeter has to be editable (rectangle and polygon) even if:
- The user has saved the perimeter, and the re-opens the popup
- The user has saved the perimeter and left the basket (browse the rest of the site, and come back later to the basket)
- The user has made a copy of the order
- The user has saved the order as draft and reuses it

Thant means that we need to save the tool used for free perimeter (polygon or rectangle) in session (current basket), and database (copy or draft) !

Add informations about selected perimeter (WFS)

In V2 we had instant view on how many WFS items we have selected, and this is important for users ordering tons of parcels.
We propose to add it in a discrete way in the interface: a bootstrap appended counter with a tooltip.

The counter will be visible only when the tool is selected.
When the tool is selected, the counter appears with a 0 value, and the increments with selections.
A tool tip indicates the selected values.

See here: and on hover with tooltip

Avoid loosing selected perimeters by re-implementing v2 logic for WFS

Multiple WFS perimeters selection has been implemented in easySDI V4 with a CTRL+Clic logic.
Problem is: if you miss or forget your CTRL key, you loose your selection. The problem is more likely to happen if you have set a selection and the re-open the popup to select more features.

In V2 the implementation was different: click to add, then click to remove. This logic is less risky, you can lose one selected feature at a time max.
Plus: it's easier to understand by users.
We propose to re-implement it this way in V4.

Same as for free perimeter, a user should be able to edit the perimeter of a saved or copied order (may be working is v4, I have not tested it)

Have an 'implicit' pan policy and remove pan button.

Pan should not be a button, but should be always working if possible.

On first popup opening, there is no tool selected. And pan is active (but not visible as a button).
When the user selects a tool, pan should still be active (except for rectangle/box as it's a drag and draw control).

Here is the "pan availlable" matrix with different tools:
Tool Action
Draw Edit Select
Rectangle no yes (todo) -
Polygon yes(existing) yes (todo) -
WFS - - yes (existing)

wfs_counter.png (35.3 KB) Blatti Yves, 03/20/2015 09:38 AM

wfs_counter_tooltip_hover.png (40.9 KB) Blatti Yves, 03/20/2015 09:39 AM

rectangle_step1_draw.png (351 KB) Blatti Yves, 03/20/2015 09:55 AM

rectangle_step2_edit1.png (18.6 KB) Blatti Yves, 03/20/2015 09:56 AM

rectangle_step2_edit2.png.png (25 KB) Blatti Yves, 03/20/2015 09:56 AM

rectangle_step2_edit3.png (71 KB) Blatti Yves, 03/20/2015 09:56 AM

rectangle_step2_edit4.png (214 KB) Blatti Yves, 03/20/2015 10:12 AM

polygon_step1_draw.png (168 KB) Blatti Yves, 03/20/2015 10:26 AM

polygon_step2_close.png (158 KB) Blatti Yves, 03/20/2015 10:26 AM

polygon_step2_closed.png (158 KB) Blatti Yves, 03/20/2015 10:29 AM

polygon_step3_edit_move_vertice.png (36 KB) Blatti Yves, 03/20/2015 10:29 AM

polygon_step3_edit_add_vertice1.png (31 KB) Blatti Yves, 03/20/2015 10:34 AM

polygon_step3_edit_add_vertice2.png (31.9 KB) Blatti Yves, 03/20/2015 10:35 AM


Related issues

Related to easySDI - Defect #959: SHOP perimeter allows auto-intersecting polygons Closed 03/27/2015

History

#1 Updated by Blatti Yves over 4 years ago

  • File deleted (wfs_counter_tooltip.png)

#2 Updated by Blatti Yves over 4 years ago

files

#3 Updated by Blatti Yves over 4 years ago

Complete description

#4 Updated by Blatti Yves over 4 years ago

  • Description updated (diff)
  • Status changed from New to Request For Comments
  • Assignee set to Technical Committee

#5 Updated by Blatti Yves over 4 years ago

  • File deleted (polygon_step3_edit_add_vertice1.png.png)

#6 Updated by Blatti Yves over 4 years ago

  • File deleted (polygon_step3_edit_add_vertice2.png.png)

#7 Updated by Blatti Yves over 4 years ago

  • Priority changed from Normal to High

#8 Updated by Villemagne Jérôme over 4 years ago

  • Status changed from Request For Comments to Accepted
  • Assignee changed from Technical Committee to Blatti Yves

TC agree this enhancement

#9 Updated by Blatti Yves over 4 years ago

  • Status changed from Accepted to Affected

#10 Updated by Blatti Yves over 4 years ago

  • % Done changed from 0 to 50

#11 Updated by Blatti Yves over 4 years ago

  • % Done changed from 50 to 90

Testing has to be done with Indoor Navigation before merging

#12 Updated by Blatti Yves over 4 years ago

  • Status changed from Affected to Resolved
  • % Done changed from 90 to 100

#13 Updated by Blatti Yves over 4 years ago

  • Status changed from Resolved to To merge
  • Assignee changed from Blatti Yves to Integrators

#14 Updated by Van Hoecke Hélène over 4 years ago

  • Assignee changed from Integrators to Van Hoecke Hélène
  • Target version set to 4.3.2

#15 Updated by Van Hoecke Hélène over 4 years ago

  • Status changed from To merge to Closed

#16 Updated by Van Hoecke Hélène over 4 years ago

  • Assignee deleted (Van Hoecke Hélène )

#17 Updated by Villemagne Jérôme over 4 years ago

  • Related to Defect #959: SHOP perimeter allows auto-intersecting polygons added

Also available in: Atom PDF