Ad:

PHP Discussion Thread
Unsolved
Views: 1167

Page 1
2
Next

You are currently viewing page 1 of this multi-page discussion thread

May 27th, 2009

Picture Labeler using PHP/MySQL

Expand Post »

Ok..here's a challenge (maybe not if you're really good I guess) for you PHP/MySQL gurus out there (may need javascript perhaps?)

If you can point me to a solution that exists for this, that would be good. If you can implement one, I'd love to learn from it, tweak it, integrate it...thanks!

SPEC. IN A NUTSHELL
A PHP page which lets a user overlay text labels on a picture. The picture's filename*, text and the X,Y coordinates for the position of the labels are then stored in MySQL.
This information can then be recalled from MySQL to regenerate the labeled picture. This is done by showing the picture file in the browser and overlying it with text at the X,Y coordinates stored.
Would prefer this to work in both IE7+ and FF2+
* please note: I don't want to store the picture file itself in MySQL, just the name for it for later reference for rendering the webpage.

SPEC. IN A STORY
1) User opens labeler.php in their browser.
2) labeler.php pulls up label_me.jpg and renders a "Submit" button underneath this.
3) Whenever user clicks on label_me.jpg, a cursor (or textbox) appears at that position to allow them to type text which overlays label_me.jpg - user can continue to do this until they get bored of putting text over the picture.
4) User clicks on "Submit" button. The page then saves each text entry as well as its X,Y coordinates to a MySQL database (this Database also stores other information aside from what's in this example).
5) User goes to a page which lists all the records in the said MySQL database as a table. Each row in the table also contains a link to each labeled picture associated with a record if that record has one.
6) Clicking on the link sends user to show_me.php which renders label_me.jpg with the overlying text(s) previously entered at their saved X,Y coordinates.

Thanks for reading this far. Looking forward to seeing what elegant solutions people come up with!

Cheers,
Kev

KevT

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

14 posts
since Mar 2009

Permalink

May 27th, 2009

Re: Picture Labeler using PHP/MySQL

this could help you

http://www.codingforums.com/archive/.../t-105506.html

BzzBee

Reputation Points: 16

Solved Threads: 48

Posting Whiz

Offline

327 posts
since Apr 2009

Permalink

May 27th, 2009

Re: Picture Labeler using PHP/MySQL

BzzBee: thanks for the thoughts.
As far as I can tell though..the aim of that page is to simply place a caption at the bottom of a picture.

What I'm trying to do is have a system which places text ON pictures. Not only that, but have a system where users can point-&-click then type in the text onto the picture. This labelled picture can then be stored & recalled later (regenerated by displaying the .jpg with the text at their inputted X,Y positions overlaid over the top).

Aware of anything like that I can learn from?

KevT

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

14 posts
since Mar 2009

Permalink

May 28th, 2009

Re: Picture Labeler using PHP/MySQL

This can be done you just need to do alot of research into php regarding the related topics.
- File Uploading
- MySQL Database

If you get those two underyour belt, then it just leaves the customization of trial and error left.
Let me know how you go.

Last edited by OmniX; May 28th, 2009 at 1:57 am.

OmniX

Reputation Points: 31

Solved Threads: 10

Practically a Master Poster

Offline

652 posts
since Dec 2007

Permalink

May 28th, 2009

Re: Picture Labeler using PHP/MySQL

Thanks for the input..

Click to Expand / Collapse Quote originally posted by OmniX ...

This can be done you just need to do alot of research into php regarding the related topics.
- File Uploading
- MySQL Database

If you get those two underyour belt, then it just leaves the customization of trial and error left.
Let me know how you go.

It's like saying learn all of MySQL

Well..actually...the upload bit isn't too bad. I was thinking about referencing the file directly, no need to store it in the database like a BLOB. The bit I was finding a bit hard to get my head around is the text over picture input.
I've seen how you can locate where the user clicks on a picture to grab X,Y coordinates..but translating that into a response where a text box appears for them to type in text then grabbing that text info. along with the X,Y to park in the database - that's the tricky bit!

KevT

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

14 posts
since Mar 2009

Permalink

May 28th, 2009

Re: Picture Labeler using PHP/MySQL

For any realtime functionality you will require javascript.
Something like a popup window, confirm button. Maybe something like:

PHP Syntax (Toggle Plain Text)

<img onclick="javascript: confirm("Enter Text");" >

Something like that I would gather would work?

OmniX

Reputation Points: 31

Solved Threads: 10

Practically a Master Poster

Offline

652 posts
since Dec 2007

Permalink

May 29th, 2009

Re: Picture Labeler using PHP/MySQL

Thanks again..

Click to Expand / Collapse Quote originally posted by OmniX ...

PHP Syntax (Toggle Plain Text)
<img onclick="javascript: confirm("Enter Text");" >
<img onclick="javascript<b></b>: confirm("Enter Text");" >
Something like that I would gather would work?

Yes, that would deliver a popup stating "Enter Text" upon click on the picture.
That would not however give the user the ability to type text directly over the picture itself. Not to mention, detecting the X,Y coordinates of where that text is supposed to be on that picture & the ability to save that...then later recalling it to put it all together as per 1st post's description.

It would seem there aren't really any examples around for me to learn from. Thanks for the the thoughts though!

KevT

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

14 posts
since Mar 2009

Permalink

Jun 3rd, 2009

Re: Picture Labeler using PHP/MySQL

There is alot of coding involved but this is the logic behind it.
- Javascript to obtain x/y value
- Javasript confirm button or whatever button to enter text
- PHP to store text and save into the mysqldatabase along with x/y position

Now there are various other things you can do from this point.
- Write the text to the file and resave the file
- Store Information and load image with text (not sure about this one)

Let me know with something you want and well try whip up some logic together.

PS: Why flag of previous post as a bad post, meant to be a good one?

Last edited by OmniX; Jun 3rd, 2009 at 8:30 am.

OmniX

Reputation Points: 31

Solved Threads: 10

Practically a Master Poster

Offline

652 posts
since Dec 2007

Permalink

Jun 3rd, 2009

Re: Picture Labeler using PHP/MySQL

Hey OmniX - thanks for reply..didn't think I'd get any more

Click to Expand / Collapse Quote originally posted by OmniX ...

There is alot of coding involved but this is the logic behind it.
- Javascript to obtain x/y value
- Javasript confirm button or whatever button to enter text
- PHP to store text and save into the mysqldatabase along with x/y position

There's of course more than one way to skin this problem but I was intrigued by what's implemented on this page - http://www.plus2net.com/php_tutorial...oordinates.php
..it doesn't seem to use Javascript? If course..it may well be more efficient to use Javascript..
Anyhow, I haven't fully comprehended the code behind that one yet (I'm working on it but not as fast as I would like since I'm also working on a few other problems at the moment) but it does demonstrate PHP picking up X,Y coordinates from mouse input?

Logic left to solve this:
1) Allow the user to type text into the X,Y position where the click was made.
2) Have a submission process where the X,Y position, VARCHAR string of the text in that X,Y position and the associated filename of the .jpg file under it all is saved.
3) A process whereby the associated .jpg is called up and overlaid with the saved VARCHAR string at the saved X,Y position.

Reason why I don't want to render a whole new .jpg file with the text saved into the image itself to recall later is that this strikes me as being rather wasteful from a disk storage point of view?
Also, that implementation doesn't allow for later edits.

Click to Expand / Collapse Quote originally posted by OmniX ...

PS: Why flag of previous post as a bad post, meant to be a good one?

I'm not sure what you mean by the above. Did I click some button flagging the your last post as a bad one? If so, I didn't mean to! Let me know how to fix it (if there's something to be fixed). No badness here..I've been grateful for your input into this thus far!
I believe solving this problem will be very useful for everyone as it is something that can be used for all sorts of situations eg: labelling maps/diagrams, general labelling of uploaded pictures people want to share etc...

KevT

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

14 posts
since Mar 2009

Permalink

Jun 4th, 2009

Re: Picture Labeler using PHP/MySQL

Click to Expand / Collapse Quote originally posted by KevT ...

Hey OmniX - thanks for reply..didn't think I'd get any more
http://www.plus2net.com/php_tutorial...oordinates.php

Logic left to solve this:
1) Allow the user to type text into the X,Y position where the click was made.
2) Have a submission process where the X,Y position, VARCHAR string of the text in that X,Y position and the associated filename of the .jpg file under it all is saved.
3) A process whereby the associated .jpg is called up and overlaid with the saved VARCHAR string at the saved X,Y position.

Reason why I don't want to render a whole new .jpg file with the text saved into the image itself to recall later is that this strikes me as being rather wasteful from a disk storage point of view?
Also, that implementation doesn't allow for later edits.

No problem KevT glad to help.
What they have done at the url is easy assuming my logic is correct and assuming so can easily do steps 1, 2 for you. 3 would require more research. I understand why you wouldnt render a new jpeg and personally if I did have to I wouldnt either I have done something similar rendering new jpegs but this idea of reconstructing one would be useful down the track so well try solve it and yes also to save disk space

Ok what I gather they have done is :
- Created an input with type image so when the user clicks on the image the page reloads it self and using the previous $_POST variables to gather the x/y attributes (I guess this is a possibility of using input type image).
- Now you said you wanted to input your own x/y and text that is even easier. Just make three text boxes x, y, and text and use $_POST to gather those 3 variables and store them in a variable in a database or whatever.
- Now the last step I think you could accomplish with CSS and PHP as I have used something similar with using z coordinate so you can overlay the with CSS. YOu will have to do some research my hands are pretty tied at the moment but if I get a chance I will try to do some research.

Click to Expand / Collapse Quote originally posted by KevT ...

I'm not sure what you mean by the above. Did I click some button flagging the your last post as a bad one? If so, I didn't mean to! Let me know how to fix it (if there's something to be fixed). No badness here..I've been grateful for your input into this thus far!
I believe solving this problem will be very useful for everyone as it is something that can be used for all sorts of situations eg: labelling maps/diagrams, general labelling of uploaded pictures people want to share etc...

Maybe because I didnt see you put a comment I thought it was a negative and that you dont have much rep but dosent matter as long as its all good

OmniX

Reputation Points: 31

Solved Threads: 10

Practically a Master Poster

Offline

652 posts
since Dec 2007

Page 1
2
Next

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in PHP Forum Timeline: Retrieving changing remote content?

Next Thread in PHP Forum Timeline: Need OOP Help

DaniWeb Message

Cancel Changes

User Name
Password