Solution to a challenging problem needed please.

[Peon]

First off, im not a programmer or coder. However ive found this guys lair to be very informative, on a range of programming topics.

Ive been asked/tasked with making a simple letter generator. Ive successfully pulled it off with html and javascripts. A few changes here and there but its done.

There is however one thing I am unable to get my head around. The client is in the medical world and as such there is a need on one of the forms to display an image. Lets a head with face. What is required is that the Dr when filling in the letter generator needs to be able to click on an area of the face, lets say the nose and leave a mark or an X. So when the letter is generated, the image is saved with the X mark on the nose the Dr placed.

I have absolutely no idea how to do this as my best googling skills takes me to code examples with coordinates etc,etc but ultimately doesnt do what I described above.

Any guru have a solution or direction I can go off into for the answer?

 

[Raithlin]

On clicking on an image you can pull the co-ordinates of the cursor. That could help if you know how to use it.. Can't remember how though, just Google it.

 

[noob_saibot]

I agree with what Raithlin is saying. As long as the size of the image doesn't change, the coordinates on the place where "X" is marked on the image shouldn't change (you could also fix resizing issues, by using a scale-calculator to pinpoint the location after the resize).

Also, I'm not exactly sure the use-case for the letter generator is. Are you trying to use the letter as some type of location identifier (eg. Enter letter "a" to see location "x"?). A little more detail concerning that might help.

Where are you currently sourcing your answers from?

 

[jem]

Lots of ways, but this is what I would do:

- get relative mouse co-ordinates within a wrapper div around the image with JS on click
- placing the marker in a div absolute child, positioned with the co-ords above (and storing the 2 values to hidden form fields for simple submission)

Then using something like php's GD library you can re-create the image with the marker on the backend of the form submit

 

[Peon]

@noob_saibot: Answers are from asking the patient verbally. The Dr makes the click.

@jem: Googling the PHP GD library looks like an answer. But on your first point, that would be when the Dr makes the click. The Dr would need the visual feedback immediately to know they have clicked on the right place. Im starting to think the Dr could print out the completed letter and just pen in on the image the points of interest.

 

[semaphore]

Overlay the image with a svg generated image for immediate feedback.

 

[jem]

@noob_saibot: Answers are from asking the patient verbally. The Dr makes the click.

@jem: Googling the PHP GD library looks like an answer. But on your first point, that would be when the Dr makes the click. The Dr would need the visual feedback immediately to know they have clicked on the right place. Im starting to think the Dr could print out the completed letter and just pen in on the image the points of interest.

Yeah, on-click you can just unhide a div with a marker in it and position it according to x/y (css top and left according to img wrapper div, ideally less 1/2 height and 1/2 width of the marker image)

W.r.t. SVG and HMTL5, I deal with medical profession a lot and they are usually not super up to date on browsers and SVG support is sometimes a bit too sketchy to make it worth it for something thats a quick thing with minor interactivity.

 

[battletoad]

Use the canvas element. Embed picture, add x's with mousedown listeners and save as png/jpg/etc. Ie9 and up supports it according to caniuse.

 

[shauntir]

Try this: http://pastebin.com/p3vAXUA0

I wrote a quick example of setting an image and then drawing a cross on the screen. You can implement the server side method to accept an ajax post - send the canvas data and save the stream as a png on the server.

Edit: modify your code to suit how large you want the cross to be. This was a fun little piece of code

Google'd references:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images
http://www.kirupa.com/html5/getting_mouse_click_position.htm
http://stackoverflow.com/questions/766137/javascript-canvas-serialization-deserialization

 

[moe46664]

Try this: http://pastebin.com/p3vAXUA0

I wrote a quick example of setting an image and then drawing a cross on the screen. You can implement the server side method to accept an ajax post - send the canvas data and save the stream as a png on the server.

Edit: modify your code to suit how large you want the cross to be. This was a fun little piece of code

Google'd references:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images
http://www.kirupa.com/html5/getting_mouse_click_position.htm
http://stackoverflow.com/questions/766137/javascript-canvas-serialization-deserialization

Great work dude!

 

[BobsLawnService]

Try this: http://pastebin.com/p3vAXUA0

I wrote a quick example of setting an image and then drawing a cross on the screen. You can implement the server side method to accept an ajax post - send the canvas data and save the stream as a png on the server.

Edit: modify your code to suit how large you want the cross to be. This was a fun little piece of code

Google'd references:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images
http://www.kirupa.com/html5/getting_mouse_click_position.htm
http://stackoverflow.com/questions/766137/javascript-canvas-serialization-deserialization

That is a neat bit of code.

 

[shauntir]

Thanks. Though it doesn't seem as if Peon has tried it...

 

[envo]

Thanks. Though it doesn't seem as if Peon has tried it...

as with anyone, if you do their work (that they get paid for) for them for free, and it worked, they won't come back and thank you.

I see the same on stackoverflow, a bunch of people post with "problems" and not real questions, and people take the time out of their day to answer and effectively make them look good to their boss and they can keep pretending they can do this... lol

 

[Peon]

as with anyone, if you do their work (that they get paid for) for them for free, and it worked, they won't come back and thank you.

I see the same on stackoverflow, a bunch of people post with "problems" and not real questions, and people take the time out of their day to answer and effectively make them look good to their boss and they can keep pretending they can do this... lol

You way off the mark. You an idiot for thinking all these things upfront with no substantiation.

I havent had forum reply emails and havent been checking regularly. Ive been recovering a 2TB NAS that was mission critical for another client. Shauntir, tomorrow being sunday I will have a look at what you've posted. Thank you for posting and helping.

 

[Peon]

Shauntir solved my image headache.

Thanks Shaun.