Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Transform the photo into pieces - JavaScript

Posted on 2010-09-09
28
Medium Priority
?
680 Views
Last Modified: 2012-05-10
Hi E's, I want begin a script for made a picture puzzle. The first step was divide pictures to litle pieces.
In practice if I have a picture with resolution 800*600, and if I want divide that pictures to 12 pieces, I get 12 pieces with this resolution: 200*200, like you can see in attach image, width with 4 pieces and length 3 pieces.

JavaScript do this? and how?

Regards, JC
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pieces for a puzzle</title>
</head>

<body>
<img src="formadepieces.jpg" width="800" height="600" />
</body>
</html>

Open in new window

pieces.png
0
Comment
Question by:Pedro Chagas
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 13
  • 8
  • 5
  • +1
28 Comments
 
LVL 10

Expert Comment

by:bugada
ID: 33636953
Check this jquery plugin

http://www.2meter3.de/jqPuzzle/
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33636976
Using css sprites, you can specify from which x and y position (coordinates on horizontal and vertical axis) and upto what extent (width and height) you want the image portion to be displayed.
Using this feature, you can have 16 divs with their background-image having the slices of different portion of the complete image

check for an example
http://www.w3schools.com/css/css_image_sprites.asp
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33636995
@bugada: awesome plugin :)
0
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 
LVL 3

Author Comment

by:Pedro Chagas
ID: 33637082
Hi @bugada, My goal not was get that kind of puzzle (slide puzzles), that a lot of examples in the net about slide puzzles. The puzzle I want to do is a drop-down puzzle.
For I do a drop-down puzzle I will need to get the pieces first.
You know if javascript do this? Do you know any tutorial for drop-down puzzle?

***I call drop-down puzzle, the puzzles that we grasp the piece, and puts them to me in the right place.

Regards, JC
0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 33637108
Hi @gurvinder372, do you thing I can use your example for made a image drop-down puzzle based in javascript?

Regards, JC
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33637121
<<image drop-down puzzle>>
Can you please elaborate this with example?

Thanks
0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 33637146
Hi, like I tell to @bugada, drop-down puzzle was:
"***I call drop-down puzzle, the puzzles that we grasp the piece, and puts them to me in the right place."

Regards, JC
0
 
LVL 40

Assisted Solution

by:Gurvinder Pal Singh
Gurvinder Pal Singh earned 400 total points
ID: 33637185
Yes, you can.

1) Your drop-down values should indicate the x,y,width,height using which the image portion could be displayed to the user, when he selects an option
2) He should be able to drag and drop that image on the place holder (or the place where you want the image piece to be dropped). It is up to you that you want the user action to be click based or drag-drop based.

0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 33637250
Hi, the right is drag-drop puzzle, not a drop-down!
That is not easy for me, my knowledge in Javascript was very poor, I prefer languages like php.
It is possible you give me a example?

Regards, JC
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33637276
I do not have the code written with me right now. It will take me a lot of time/effort to do the same.
Will appreciate if you can make an effort and let me know the specific problems that you face in it.
Thanks
0
 
LVL 10

Expert Comment

by:bugada
ID: 33637470
ah ok! So you want a puzzle, made by square tiles?
0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 33637503
Hi @bugada, yes it is drag and drop, square tiles puzzle, based in javascript.
You can help me?

Regards, JC
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33637553
0
 
LVL 10

Expert Comment

by:bugada
ID: 33637577
gurvinder372 i think that the author needs a mosaic puzzle: avery pieces are stored scrambled in an anrad of the page and the user must recompose the image dragging and dropping tiles on the grid.
0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 33637580
Hi @gurvinder372, I have see that example before I write this question. The problem is, that was a sliding puzzle, and what I want is a drag drop puzzle (square tiles).

Regards, JC
0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 33637595
Hi @bugada, your last post it was what I want.

Regards, JC
0
 
LVL 10

Accepted Solution

by:
bugada earned 1000 total points
ID: 33637597
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33637610
0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 33637830
For @gurvinder372. That example you give me is a good idea, but in practice (try play the puzzle you too) I don't like because is very bumbling. But it is a good tutorial to start.

@bugada, I try your example and looks fine. The only problem is the pictures have to be in pieces before I open the script. In other words, the script don't make the pictures in peaces every time we open the page, the pictures in that script have be predefined. So we back to essence of the question, transform the photo into pieces!
For you understand, I have about 5000 pictures and I want to do puzzle game for all that pictures. The last example you give me made one part, but I need the part that make the picture in pieces.
Can you give a example for made the picture in pieces?

Regards, JC
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33637866
<<I don't like because is very bumbling>>
Please explain this to me. I am just trying to understand the requirement, so that i do not post such bumblings :)

0
 
LVL 10

Expert Comment

by:bugada
ID: 33637876
you have to combine my first example with the last one. Not an easy nor immediate job.
0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 33642492
@gurvinder372, my English not was the best, I try to do write the best I can.
When I say 'bumbling', is to tell that your example, not is good for me, not was what I expected, has many faults, especially at the level of drag and drop. As he drag and drop, the other pieces are moving. I want do something with more quality. Sorry about my English.

@bugada, when you say <<Not an easy nor immediate job.>>, maybe you think I want the same pieces of your last example, for me the best pieces is squares or rectangles, I don't need the round effects.

For both:
What I want is simple, I can do that easily with php or imagemagick, but I want see JavaScript made entire work.
Step by step I will say what is the goal.
1) the script identify the picture (tell the resolution), for the example we will use a 800*600 picture.
2) My puzzles have 4*3 tiles, so JavaScript have to do: size of width / 4, and size of length / 3.
3) JavaScript transform picture in pieces (squares or rectangles) and give a name for each one, like 1.jpg, 2 etc.

What do you tell me?

Regards, JC
0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 33642595
Hi, this is a good example for illustrate what I my goal:
http://www.billybear4kids.com/dinosaurs/online-puzzles/drag-drop/e-dino5.html

Regards, JC
0
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 600 total points
ID: 33652015
I created a sample that breaks an image into 12 pieces and allows you to drag and drop the pieces onto a grid like a puzzle to form an image. It uses only html, css and javascript. You can test and download/copy/paste the script files, images and html here: http://www.bsatroop251.com/TestSite/Puzzle.htm

The code I used for the drag and drop functionality I got from here: http://www.dynamicdrive.com/dynamicindex11/domdrag/
0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 33653830
Hi, I like your example @tommyBoy.
I have a good puzzle now, you can check in http://w.e-e.com/n741Sp, is similiar of your example.
I thing if I work your example I can made a better puzzle then my actual.
Your example have the advance that the pieces don't block when you put the piece in the right place, my example do that.
My example is good because when finish the puzzle the advise the customer.
Do you thing experts can assist me with make better in your puzzle?
Do you thing you can help me?

Regards, JC
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 33653928
I tried your puzzle, very nice. I did not get any change when I completed your puzzle, so I don't understand this statement: "when finish the puzzle the advise the customer"

I think your puzzle code is unnecessarily complicated. I have 64 lines on the main page of my puzzle example plus 2 external javascript files. You have 420 lines just on the main page plus 8 external jquery files. Even with all that, your pieces don't lock into place when the user moves them close to the correct position. Instead they have to position them exact. Also, I think having a grid to place the pieces on is helpful to the user. Adding an alert when the puzzle is completed correctly would be easy.

If you want to improve on my example, I would be happy to help. I don't want to work on code that depends on jquery. I see too many posts on this forum from people who are having problems getting their one jquery plug-in to work the way they want. Your puzzle has 8 external jquery files. It would take too much of my time to sort all that out.
0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 33653989
...So, maybe you can help me in this question!

Regards, JC
0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 33653992
I'm sorry, the link is:
http://w.e-e.com/RAKzo0
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

670 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question