Image polygon overlay widget - javascript
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

We would like to be able to load a html page, upload an image (client side only), apply a grid on top of the image so we have some grid of 10x10 squares on it, and then drag the mouse around on top of the image to select "tiles" of the grid items. the purpose of the grid is because we dont need pixel level resolution. the output would then be some polygons of what the user selected. that output should be like this

{
"polygons": [
[
[10, 20],
[20, 20],
[20, 10],
[10, 10]
],
[
[100, 350],
[200, 300],
[10, 90]
]
]
}

so the details of what's needed are.

-upload image

-input a height and width of grid rectangles , this could be 10x10 or 10x20 etc.. and this grid is overlaid on the image . one weird note here, is that we want to define these as a percent so 10x10 would be a 10% x 10% grid segment and not 10px x 10px etc..

- the user can then hold the left mouse key down and drag to select the grid segments

- output should just be text area with the polygon in it. would be kinda amazing if it updated in real time as the user dragged

- system should be smart enough to define a single polygon if two polygons touch , for example 2 squares touching should just be a single rectangle and not 2 square polygons.

here are some examples

- base image https://www.dropbox.com/s/v0z9i34mwpese2s/2021-06-07_08-36-08.png?dl=0

- with grid applied over it - https://www.dropbox.com/s/xkzbrdyxv7bm5li/2021-06-07_08-37-43.png?dl=0

- image with grid and then selected segments https://www.dropbox.com/s/j0m2iyi2jk5docq/2021-06-07_08-38-29.png?dl=0

- this would be just 2 polygons

the deliverable should be in repl.it so we can all run it easily and confirm the solution etc.. I dont have requirements around libs or 3rd party code here, just need the final solution.

awarded to kerncy
Tags
javascript

Crowdsource coding tasks.

1 Solution

Winning solution

Hi QDev

This Repl.it links should do the work. There are sometimes a bug that cannot generate your polys, I'll try to fix it ASAP, but I don't know why it occurs. It depends on the order of drawing the polygon (from left to right of, from right to left is bad :( )

It is all made in vanilla JS, so it might not be optimized at all but it does the work.

There are two limitations on the generated polys :

- All poly must be disjoint (don't touch)

- A poly can't have a hole in it

Do not hesitate if you have any question.

Hey this is cool, directionally its right on. I am noticing its poly calc is doing something weird. Here is an example. https://www.dropbox.com/s/01sca6sli40nkxf/2021-06-09_09-45-13.png?dl=0 in its simple state I think it would just have 4 points here ? .... actually I think the requirement objective might not have been really clear (maybe my fault here) but the goal would be that it simplifies itself to a single polygon if the side touch/share points. Is that possible here or would it be a considerable amount of work? Thanks!
Qdev 4 months ago
OK I forgot this kind of issue, to merge points that are on the same line. I will add it, I'll let you know once it's done
kerncy 4 months ago
All has been fixed, the poly is now simplified and you can draw it in the order you want. You might create "holes" in your poly, the hole will be defined as a poly too. The only thing that is not allowed are polygon sharing only one corner.
kerncy 4 months ago
I have added comments so the code will be more understandable
kerncy 4 months ago