 |  |  |  |  |  |  |  |
Picture Labeler using PHP/MySQL
Please support our PHP advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
 |
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
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
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?
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?
•
•
Join Date: Dec 2007
Posts: 609
Reputation: 
Solved Threads: 8
Practically a Master Poster
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.
- 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.
"You never stop learning." - OmniX
Thanks for the input..
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!
•
•
•
•
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.
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!
•
•
Join Date: Dec 2007
Posts: 609
Reputation:
Solved Threads: 8
Practically a Master Poster
For any realtime functionality you will require javascript.
Something like a popup window, confirm button. Maybe something like:
Something like that I would gather would work?
Something like a popup window, confirm button. Maybe something like:
PHP Syntax (Toggle Plain Text)
"You never stop learning." - OmniX
Thanks again..
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!
•
•
•
•
Originally Posted by OmniX
Something like that I would gather would work?PHP Syntax (Toggle Plain Text)
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!
•
•
Join Date: Dec 2007
Posts: 609
Reputation:
Solved Threads: 8
Practically a Master Poster
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?
- 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.
"You never stop learning." - OmniX
Hey OmniX - thanks for reply..didn't think I'd get any more
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.
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...
•
•
•
•
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
..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.
•
•
•
•
Originally Posted by OmniX
PS: Why flag of previous post as a bad post, meant to be a good one?
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...
•
•
Join Date: Dec 2007
Posts: 609
Reputation:
Solved Threads: 8
Practically a Master Poster
•
•
•
•
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.
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.
•
•
•
•
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...
"You never stop learning." - OmniX
|
Similar Threads
- Looking for PHP / MySQL Developer (Web Development Job Offers)
- Looking for a PHP/MYSQL Programmer (Web Development Job Offers)
- Need Highly Experienced PHP/MySQL Programmer $15-$25/hour (Web Development Job Offers)
- PHP/MySQL Programmer Position (Web Development Job Offers)
Other Threads in the PHP Forum
- Previous Thread: How to resize images
- Next Thread: Need OOP Help
| Thread Tools | Search this Thread |
You need to join our community in order to build your list of favorite forums. You can visit the forum index for a listing of all forums.
Latest PHP Posts
- Today's Posts
- Unanswered Threads
Related Forum Features
access ajax alexa apache api array beginner binary broken cakephp checkbox class cms code cron curl database date directory display dropdown dynamic echo email encode error fairness file files folder form forms function functions google href htaccess html image include indentedsubcategory insert integration ip java javascript joomla limit link login loop mail mail() menu mlm multiple multipletables mysql newsletters oop passwords paypal pdf php problem provider query radio random recursion regex remote script search secure server sessions simple sms soap source space sql syntax system table tutorial update upload url user validation validator variable variables video voteup web xml youtube
