Is there a better way to check if images are the same? I now use imagedata

[williamdesmet]

Hi there,

Is there a better way to check if images are the same?
I now use imagadata.

In my app I have an example drawn image (5x5 matrix with dots, a Geoboard).
These dots are important because by touching them their Loc is used (gStartLoc and gEndLoc)
Two dots will be connected by setting the points of the last grc to gStartLoc & return & gEndLoc.
No problem here.

The idea is that the user copies my example on their matrix/geoboard by connecting the dots.
To check if the example and the user Geoboard are the same I make a snapshot of both and compare the imagadata of these images.
Everything is fine as long as the user connects the same dots as the way (length between dots) it is done in the example.
Then the imagadat is the same.

The geoboards can look the same but the connected dots can be different in length so use imagadata to compare these is not the way to get it right.
Any ideas for a better way?

[andresdt]

Hi @williamdesmet
It occurs to me that you can use something similar to what we use for the "Pattern Lock" widget. In our case we have a 3x3 matrix and it is made in LCB. So it will be easier in LC. Now, you know when the user touches each point. In this way it obtains the position to draw the path. So you can identify and save those interactions.

As it saves

Code: Select all

.. gStartLoc & return & gStartLoc

You can save something like

Code: Select all

put tCurrentPoint & comma after gPointPath

that would look like 5,9,13,17,21 or 21,17,13,9,5. So that's what you would have to compare.

https://github.com/Ferruslogic/lcb_patternLock

[williamdesmet]

@andreasdt The point is that the user doesn't need to touch each point.
I made it so the user can use each dot on its own so you can go at once from the bottom left dot to top right dot by touching just these two dots.
Bottom left is gStartLoc and top right is gEndLoc. The other dots on this line are not touched.
(It should be gStartLoc & return & gEndLoc)

Because each dot can be used you can also draw a line on to the next diagonal one.
In my example from bottom left to top right can thus be one line or 4 separate lines.
And that's why I can't use imagedata.
The user can have it's own way to draw/copy the example.

I looked at your Pattern Lock Widget and that looks great.
Maybe I need another approach for what I want?
Maybe coloring the dots on touch and check on that?

[dunbarx]

Hi.

Cant you check the points of the graphic (each graphic?) to see if they match? Then you do not need to make images at all.

I do not use images much at all, but for the little I know about them, how could the imagData be the same if the line graphic was in a different loc or orientation? I would have thought that a single pixel difference between two images would yield a different imageData. I assume I am wrong about that?

Craig

[jiml]

Suggestion:

Don't make your Geoboard an image. Make it a grid of circular Graphics.
When the user 'draws' their line(s) make the start and end points exactly the same as the circle graphics' locations.
In this way the lines will always be drawn exactly the same, which in turn would make the images of your GeoBoards the same.

For example, user clicks on circle at 2,4. Your gStartLoc is now the LOC OF CIRCLE 2,4.
User then clicks circle 3,2. Your gEndLoc is now the LOC OF CIRCLE 3,2.
You draw a line between those two points.
Repeat if desired.
The end result is that you have lines that are drawn and positioned exactly the same between two points no matter who drew them.
In this way

This stack shows the basic idea.

dots.livecode.zip

(1.97 KiB) Downloaded 160 times

[jiml]

And you can just compare the texts of the images:

Code: Select all

if the text of img 1 = the text of img 2 then
      put "MATCH!" into fld 1
   else
      put "NO MATCH!" into fld 1
end if

[williamdesmet]

@jiml Your example stack is about the same as I did. I also compared two images but used imagedata to do that.
The problem is the way the user put the lines into the Geoboard. The user can draw a line between two dots but can also skip two dots and draw a line which is 4 dots long. in the end it looks the same but the way it is done is different. And then it doesn't match.
In my first attached screenshot I showed just one line but it should be a complete figure which should be copied.
I attached a better screenshot in this post.

[jiml]

in the end it looks the same but the way it is done is different. And then it doesn't match.

I misunderstood your objective.
Your goal apparently is not to compare the appearance of the two drawings, but instead to compare the procedures used to create the drawings.

Well, in that case comparing pixels is useless. You need to log the user's actions as others have suggested.

[williamdesmet]

I think I solved it by first numbering the dots.
Then putting the short names of the dots in a list after mouseup.
And then comparing the two list using:

Code: Select all

on mouseup
 repeat for each line i in tList2
      if  i is not among the lines of tList then put i & return after tList3
   end repeat
   if tList3 is not empty
   then 
      answer "OK"
   else
      answer "Wrong"
      end if
end mouseup

Thanks for helping out!

[FourthWorld]

Well done.

FWIW another option might be to summarize the dot set with a string, and compare the strings.

For example, of the dot graphics were in a group, you could walk through them in order to arrive at a short string, eg:
00101000001010001000

...where 1 is connected and 0 is unconnected.

Then finding a match is as simple as "is":

Code: Select all

if DotSummary(grp 1) is DotSummary(grp 2) then...