Summer html Image map creator customization

[Harshitha-Dinesh]

I am trying to customize the Summer html image map creator tool.. I have 2 requirements
1.To have a Save button which works like Save As option of file, here I need to save the coordinates of the selected polygon along with image.
2.I have found a bug in the program which shifts the initial coordinates of the image to large number after the html page is saved and refreshed...

Can u please help me resolve these issues.

Thank You.

[summerstyle]

My old code, architecrute and design is not good, and now I refactor this. I hope, I will can to do this before august, and then I will start to create new functions.

I have many ideas, like rulers, grid, multiple selection, layers, touch devices support and other.

About your questions:
[1]. Now button "save" save info of image and areas in json-string in localStorage.
"{"areas":[{"type":"rect","coords":[192,94,407,305],"href":"","alt":"","title":""},{"type":"circle","coords":[510,312,47],"href":"","alt":"","title":""},{"type":"polygon","coords":[31,51,20,142,37,140,42,121,67,121,73,140,96,139,54,51],"href":"","alt":"","title":""},{"type":"polygon","coords":[46,76,63,106,39,105],"href":"","alt":"","title":""}],"img":"https://s3.amazonaws.com/cms-assets.tutsplus.com/uploads/users/30/posts/21068/image/ff.png"}"
(>console.dir(localStorage))

Do you mean someting like this? Saving in text file - maybe, but most likely it is simple to display it in code block? In format like this? Or {"radius" : 50, "x" : 10, "y" : 20} for circle and {"coords" : [[1,2], [3,4], [5,6], [7,8]]} for polygon and {"coords": [1,2], [3,4]} for rectangle?

[2]. Please, say, how do I can to repeat this bug by steps. Do you draw too many areas?

[Harshitha-Dinesh]

Hello Sir,

Thank you for responding for my query.

1.I wanted a save button which creates a html file in clients system along
with images and coordinates plotted.So that next time when the saved
file is opened user can continue plotting the coordinates along with
previously plotted ones too.

Currently with the function localStorage the info of image and areas in
json-string are applied for a single image.. I mean to tell its not
possible to store the information in some place so that it can be used
later.Is it possible to save in text file rather than displaying it in code
block.

2.About the bug, I am not drawing too many areas.But when the index.html
page is saved using 'Save Page As' option it is considering the whole
window as image for the saved file because of which the coordinates are
shifted i guess

Thanks & Regards,
Harshitha

On Tue, Jul 15, 2014 at 4:12 PM, Vera Lobacheva [email protected]
wrote:

My old code, architecrute and design is not good, and now I refactor this.
I hope, I will can to do this before august, and then I will start to
create new functions.

I have many ideas, like rulers, grid, multiple selection, layers, touch
devices support and other.

About your questions:

1. Now button "save" save info of image and areas in json-string in
   localStorage.

"{"areas":[{"type":"rect","coords":[192,94,407,305],"href":"","alt":"","title":""},{"type":"circle","coords":[510,312,47],"href":"","alt":"","title":""},{"type":"polygon","coords":[31,51,20,142,37,140,42,121,67,121,73,140,96,139,54,51],"href":"","alt":"","title":""},{"type":"polygon","coords":[46,76,63,106,39,105],"href":"","alt":"","title":""}],"img":"
https://s3.amazonaws.com/cms-assets.tutsplus.com/uploads/users/30/posts/21068/image/ff.png"}
"
(>console.dir(localStorage))

Do you mean someting like this? Saving in text file - maybe, but most
likely it is simple to display it in code block? In format like this? Or
{"radius" : 50, "x" : 10, "y" : 20} for circle and {"coords" : [[1,2],
[3,4], [5,6], [7,8]]} for polygon and {"coords": [1,2], [3,4]} for
rectangle?

1. Please, say, how do I can to repeat this bug by steps. Do you draw
   too many areas?

—
Reply to this email directly or view it on GitHub
#4 (comment).

[Harshitha-Dinesh]

Hello sir,
Steps that lead to bug
1.Open Summer html image map creator tool.
2.Drag and drop an image and click OK.
3.Click on Polygon button and draw polygons.
4.Save the html page using 'Save As' option in the browser with some name abc.html.
5.When I open that abc.html page and do refresh the previously drawn polygons coordinates are different from the original index.html page coordinates.

Am using your old version tool.

Thanks & regards
Harshitha

[Harshitha-Dinesh]

Hello sir,

By using the localStorage function in "save" button, the JSON string of image and the areas are stored for 1 image. when we load a different image and plot points and click on "save" button, then the changes done to the first image is lost. Is there a way to save the image and the coordinates plotted into local system, so that next time when the image is dragged and dropped the saved coordinates for the image can be loaded.

Waiting for your reply.

Regards,
Harshitha

[summerstyle]

Hi.

I probably understand this problem.
You want to save some images with it's areas, but "save" button can save only one image in localStorage, because saving of the second image rewrites the first image and it's coords.

And you found a temporary solution - saving all the page in standard browser menu. But this solution is not right, because browsers can to save html-pages with dynamic generated content, but they dont save the editor state. I mean, inner structures (arrays of drawed areas etc.).

The right solution in this case is import of json-string in short text file (maybe) or, at least, display it in code block (for manually saving). And after this we will can to load this json-string in summer editor.

I will create this save/load functions, but at first, I should to refactor code of summer editor and redesign the editor's menu, and then I will start to realize some new functions, include this save/load.

I hope, I will start to create new functions in august.

But now, you can to use a temporary solution - to manually copy a generated by "to html" button code to text file, and then load the saved areas by "from html" button (at first, you should to load the image in the editor by image dialog).

Thank you for good idea.

[Harshitha-Dinesh]

Thank you for your guidance.

Regards,
Harshitha

[Harshitha-Dinesh]

Hello Sir,

Currently am downloading the coordinates into download folder with name of
the file same as image name and a function to read the file contents which
contains coordinates using FileReader method which takes "input type=file"
to access the file and am using your function 'from html'to plot the
points on to the image.Is there any better solution you would give other
than doing it manually.

Sir I also wanted to ask how to import the json-string into a text
file?That would help me in skipping downloading the coordinates into
download folder.

Waiting for your reply

Regards,
Harshitha

On Sat, Jul 19, 2014 at 12:55 AM, Vera Lobacheva [email protected]
wrote:

Hi.

I probably understand this problem.
You want to save some images with it's areas, but "save" button can save
only one image in localStorage, because saving of the second image rewrites
the first image and it's coords.

And you found a temporary solution - saving all the page in standard
browser menu. But this solution is not right, because browsers can to save
html-pages with dynamic generated content, but they dont save the editor
state. I mean, inner structures (arrays of drawed areas etc.).

The right solution in this case is import of json-string in short text
file (maybe) or, at least, display it in code block (for manually saving).
And after this we will can to load this json-string in summer editor.

I will create this save/load functions, but at first, I should to refactor
code of summer editor and redesign the editor's menu, and then I will start
to realize some new functions, include this save/load.

I hope, I will start to create new functions in august.

But now, you can to use a temporary solution - to manually copy a
generated by "to html" button code to text file, and then load the saved
areas by "from html" button (at first, you should to load the image in the
editor by image dialog).

Thank you for good idea.

—
Reply to this email directly or view it on GitHub
#4 (comment).

[summerstyle]

Hi,

Do you manually create a new textfile and copy html-code from "to html" window?
Ahd then you write a new code(a function, which read this text file and parse it with my function "to html"). Do I understand right?

And you want to create a text-file with json-string coordrs automatically by some function?

I know, the FileWriter api exists. Maybe it can be useful, but I am not try to use it, and I don't know how good it works. You can to read about this api here: https://developer.mozilla.org/en-US/docs/Web/API/FileEntry

I hope, it can be useful.

[Harshitha-Dinesh]

thank you for your assistance

On Wed, Jul 30, 2014 at 12:44 AM, Vera Lobacheva [email protected]
wrote:

Hi,

Do you manually create a new textfile and copy html-code from "to html"
window?
Ahd then you write a new code(a function, which read this text file and
parse it with my function "to html"). Do I understand right?

And you want to create a text-file with json-string coordrs automatically
by some function?

I know, the FileWriter api exists. Maybe it can be useful, but I am not
try to use it, and I don't know how good it works. You can to read about
this api here: https://developer.mozilla.org/en-US/docs/Web/API/FileEntry

I hope, it can be useful.

—
Reply to this email directly or view it on GitHub
#4 (comment).

[BiMineshPatel]

Hi
I need your help.
When I try to load existing cropped area using python then after try to edit give me a error.
Uncaught TypeError: Cannot read property 'select' of undefined