Analize the JPEG file???

[CyanBlue]

I don't know if it is possible or not... So, I am asking this... ;)

Let's say that I have a floor plan in JPEG file...
What I want to do is to import that JPEG file into Flash and create a hotspot of each walls...
I sure can do it manually by creating a movieclip that is the same size and height and so on...

But is there any way I coud get this thing abit easier??? Maybe have some mighty routine analyze the JPEG file and spit out the coordinates of the wall or something??? This mighty routine can be any sort of language...

I won't be bugging here if I have just a couple of floor plans to take care of, but I am talking of couple of hundred different floor plans... :(

Any idea???

[littleRichard]

are the areas you want to have buttons consistently a different color from everything else on the image.

if they are i don't see why you couldn't use PHP to do something like you explained without to much trouble.

i'd make a function that loops over every pixel in the image checks it's color and then sets a bool value in a multidimensional array representing the coordinates of each pixel.

so now you have this monster array with values indicating whether a certain pixel should be hot or not. obviously it would be slow as hell to draw that out in flash so you'd probably want write another function that turns the big array into another array with starting and ending points which would be easy to handle once you got it into flash.

[CyanBlue]

Ouch... Sounds painful... :(

Hm... I could go over the pixels and get the color information... Yup... I'll take a look at it... It sounds promising... Of course, it will be slow... :(

Thanks, littleRichard... :)

[senocular]

Yeah Im thinking if you can do it manually, do it that way. Ultmately it would save time and frustration in comparison to devising a way to do that automatically (unless you can find an example where someone else has already gone through the trouble of doing so and just steal it from them ;))

[CyanBlue]

Well... That still is painful... :D

I get to get a floor plan for the house model, and it usually is about 3 story building... and there are variations on that model, and one community got at leat 5 models... roughly 50 floor plans(50 JPEG files)... Arg...

Yes... If I get the contract, and if they agree to pay me the time that I draw all those floorplans in Flash again, to add interactivities, then that is fine, but if they don't like it, then it goes moot... :(

If I can, or somebody did it already, create the clean version that I do not need to retouch the generated data in Flash again, then I don't mind, but... Hm...

Well... I guess I gotta think some more... Thanks guys... ;)

[littleRichard]

well, i was acctually going to try and whip something up for this last night cause i think it sounds neat but an old friend came by and i ended up trashed instead.

anyway...i might give it a go tonight. i've got a script from something i did about a year ago that i think i can adapt to do this.

no promises though.

[CyanBlue]

Thank you, littleRichard, for taking time to try it...

Really appreciate and can't wait to hear back from you... ;)

[CyanBlue]

Um... I guess littleRichard is off for a while...

I was browsing the PHP manual to find the name of the function that will go over the each pixel or series of pixels and get the pixel information on that specific spot, but I couldn't find it...

Does anybody know what function I am looking for???

The JPEG file is basically gray scale, so white being nothing on the floor plan, and 50% gray or darker color tells me there is something... and tell me in the form of something like this
00000011000001100000
00000011000001100000
00000011100011100000
so that I can parse that data back in Flash to generate the movieclips for the hotspots.. ;)

Thank you for your time... ;)

[CyanBlue]

Arg... I think I need to make the screen font bigger... :(

The function called ImageColorAt() was there all the time, but somehow I have missed it...

This is what I have so far, and I do need go on further... But this script gave me the starting point... :D<?php
$imgname = "jpegfilename.jpg";
$image = @imagecreatefromjpeg($imgname); /* Attempt to open */

$imagehw = GetImageSize($imgname);
$imagewidth = $imagehw[0];
$imageheight = $imagehw[1];

print("Width : $imagewidth : Height : $imageheight <BR>");

for ($row = 0 ; $row < $imageheight ; $row++)
{
for ($col = 0 ; $col < $imagewidth ; $col++)
{
$rgb = ImageColorAt($image, $col, $row);
$r = ($rgb >> 16) & 0xFF;
$g = ($rgb >> 8) & 0xFF;
$b = $rgb & 0xFF;
print("$row : $col -- $r : $g : $b <BR>");
}
}
?>And I get to see something like this... 40 : 400 -- 255 : 255 : 255
40 : 401 -- 183 : 183 : 183
40 : 402 -- 123 : 123 : 123
40 : 403 -- 255 : 255 : 255
40 : 404 -- 216 : 216 : 216
40 : 405 -- 67 : 67 : 67
40 : 406 -- 0 : 0 : 0
40 : 407 -- 0 : 0 : 0
40 : 408 -- 0 : 0 : 0
40 : 409 -- 67 : 67 : 67
40 : 410 -- 237 : 237 : 237
40 : 411 -- 255 : 255 : 255
40 : 412 -- 255 : 255 : 255
40 : 413 -- 255 : 255 : 255
40 : 414 -- 255 : 255 : 255
40 : 415 -- 255 : 255 : 255 Long way ahead to go, but it is looking very clear... :)


Keyword : get pixel information jpeg jpg ImageColorAt cbImageColorAt

[CyanBlue]

Everything works so far... ;)

And I am stuck with the different set of problem, as usual... :D

This is what I want to do... This is some portion of the text file that PHP file is generating so that I can use that information in Flash to draw things in there...// The first line added just to get the location... Don't mind it... ;)
//23456789012345678901234567890123456789
0000000000000000000000000000000000000000
0000000000000000000000011110000000000000
0000000000000000000000011110000000000000
0000000000000000000000011110000000000000
0000000000000000000000011110000000000000
0000000000000000000000011110000000000000
0000000000000000000000011110000000000000
0000000000000000000000011110000000000000
0000000000000000000000011110000000000000
0000000000000000000000011110000000000000
0000000000000000000000011110000000000000
0000000000000000000000011110000000000000
0000000000000000000000011110000000000000
0000000000000000000000011110000000000000
0000000000000000000000000000111111110000
0000111111111111111111011110111111110000
0000111111111111111111011110111111110000
0000000000000000000000000000000000000000
0000000000000000000000000000000000000000
0000000000000000000000000000000000000000
0000000000000000000000000000000000000000As you can see, I have four blocks of text representation of the image file displayed by '1'... What I eventually need is to draw a black rectangle and change it to be the movieclip with specific instance name...

What I have in Flash is just merely attaching the 'block' onto the stage to tell me that the script is working... for (k = 0 ; k < floor1_arr.length ; k++)
{
trace(floor1_arr[k].row + " : " + floor1_arr[k].column);
_level0.attachMovie("Block", "Block" + k, theDepth++, {_x:gapX + floor1_arr[k].column * blockWd, _y:gapY + floor1_arr[k].row * blockHt});
}But this won't do any good to me because this won't tell me which 'wall', that's what those '1's are all about, I am rolling over my mouse to trigger some event...

So, I was thinking and thinking, and found no answer on this...

Back to PHP, and there is Ming that can draw stuff and create SWF file with it... I am not sure if this approach will be working or not, but I gotta try whatever I can...

Basically what I need now is how to get the starting point and endoing point from the above text file representation...

The PHP script I have at the moment is...<?php
$imgname = "./Model11.jpg";
$image = @imagecreatefromjpeg($imgname); /* Attempt to open */

$imagehw = GetImageSize($imgname);
$imagewidth = $imagehw[0];
$imageheight = $imagehw[1];

$dataFile = "./Model11.txt";
@unlink($dataFile);
$FilePointer = fopen ($dataFile, "w");

$output = "&imagewidth=" . $imagewidth . "&imageheight=" . $imageheight . "&\n";

for ($row = 0 ; $row < $imageheight ; $row++)
{
$output .= "&line" . $row . "=";
for ($col = 0 ; $col < $imagewidth ; $col++)
{
$rgb = ImageColorAt($image, $col, $row);
$r = ($rgb >> 16) & 0xFF;
$g = ($rgb >> 8) & 0xFF;
$b = $rgb & 0xFF;
$indexColor = $r + $g + $b;

if ($indexColor < 10)
$output .= "1";
else
$output .= "0";
}
$output .= "&\n";
}

echo("output : $output <BR>");
fwrite ($FilePointer, $output);
fclose ($FilePointer);
?>and the actual output looks like this...&imagewidth=343&imageheight=706&
&line0=00000000000000000000001111111110000000000000 00000000000000000000000000000000000000000000000000 00000000000000000000000000000000000000000000000000 00000000000000000000000000000000111111111111111000 00000000000000000000000000000000000000000000000000 00000000000000000000000000000000000000000000000000 0000000000000000000000000000000000000000000000000&
&line1=00000000000000000000001111111110000000000000 00000000000000000000000000000000000000000000000000 00000000000000000000000000000000000000000000000000 00000000000000000000000000000000111111111111111000 00000000000000000000000000000000000000000000000000 00000000000000000000000000000000000000000000000000 0000000000000000000000000000000000000000000000000&
&line2=00000000000000000000001100000000000000000000 00000000000000000000000000000000000000000000000000 00000000000000000000000000000000000000000000000000 00000000000000000000000000000000000000000000011000 00000000000000000000000000000000000000000000000000 00000000000000000000000000000000000000000000000000 0000000000000000000000000000000000000000000000000&
&line3=00000000000000000000001100000000000000000000 00000000000000000000000000000000000000000000000000 00000000000000000000000000000000000000000000000000 00000000000000000000000000000000000000000000011000 00000000000000000000000000000000000000000000000000 00000000000000000000000000000000000000000000000000 0000000000000000000000000000000000000000000000000&
...
...I need to create some sort of array or whatever it is so that I can get the rect out of it... Any good approach you have in your mind??? Thank you... ;)

[annexion]

I'm not a back end whiz or anything, but there is a post in the site check forum that has something to do with this. Perhaps the guy that posted his effect can help you.

[CyanBlue]

Well... This doens't really concern with what language you use... It goes more with the algorithm, I think...

Do you remeber the name of the person who posted the thread by any chance, annexion??? ;)

[CyanBlue]

To put this problem simpler form...
// The first line added just to get the location... Don't mind it...
//2345678901234567890
00000000000000000000
000X11X0000000000000
0001111000000X11X000
00011110000001111000
00011110000001111000
0001111000000X11X000
00011110000000000000
00011110000000000000
000X11X0000000000000
00000000000000000000This is the content of the whole text file imported into the variable in PHP... and I want to get the location of each 'X' characters within it via PHP if possible... Like X11.x = 4, X11.y = 1, X12.x = 7, X12.y = 1, and so on, but the Xs in one box should have the same name like X1 or X2, and the first X in X1 is going to be called X11 and such... What would be the best way of doing it??? Somebody shed some light on my brain??? ;)

[annexion]

Well, it looks like you've already gotten past the part that I think his help would have given.

http://www.actionscript.org/forums/showthread.php3?s=&threadid=27338

Good luck anyhow.

[CyanBlue]

Arg... You should have told me earlier, annexion... You don't read my mind anymore, eh??? :( Yup... I spend some time on his site, and found lots of good stuff... If you haven't, try it... You'll love it... ;)

Yup... I'll be needing all the luck and help I can get to get this thing working... :)

[annexion]

I think I now know what you're trying to accomplish... And I think I might have an idea...

Correct me if I'm wrong, but, what you want to do is:

Use PHP to write a text file that tells the placement off all the walls in a floor plan. Then you'd like to use Flash, with that text file, to redraw the floor plan using the drawing API, right?

[CyanBlue]

Yes... I have a floor plan and that floor plan gets imported into Flash... But all the walls should be hotspots to add interactivity... So, I am here that I now know which one is wall and which one is not... But I need to draw walls again within the movieclip so that I can invoke the event handler...
To draw the wall, I was thinking of using Ming to do it, because it will save some Flash power in parsing the data and such... But drawing API would be a good one as well as long as I get the just right amount of the data from the PHP... Right now, I am generating all the information, and I need to sort it out so that I can get only what I need...
I am attaching the file to show where I am at at the moment... ;)
Thanks...

[littleRichard]

hey CyanBlue, sorry about that, i've just been really busy with work lately. anyway what you've got so far looks pretty cool:)

[CyanBlue]

No, littleRichard... It is a mess... :) I am learning a great deal though... Don't worry about it... I know that you were giving me what you can... I do have learned alot while I am doing this one by one... Of course, it takes more time, but I'm getting there... Just lots of steps to go over... Give me few pointers when you have free time, would you??? I am doing what I can do, but it usually is not the best or optimized way of doing it... ;)

[freddycodes]

Jason, so basically the 1s in the text file are the dark pixels, meaning part of a wall. And you basically analzyed every line from the binary code of the jpeg and decided which should be colored and which shouldn't. I think the next step would be to conver this to some kind of grid, where by you move across and then down to the next line changing each piece to either a line or nothing. Let me try a little something something

[freddycodes]

Jason,

Yes, I think you are onto something with regards to the using ming. I wrote some code up in AS to render the text file with the drawing tools, but we are talking 706 rows of 390 some odd numbers. So parsing in realtime is gonna suck. But as a rough sketch, check out this code.


xCnt = 0;
yCnt = 0;
_root.createEmptyMovieClip( "mapHolder", 1 );
mapHolder._x = mapHolder._y = 20;
mapHolder.lineStyle( 1, 0x000000, 100 );
mapHolder.moveTo(0,0);

mv = new LoadVars();
mv.load("Maybeck3.txt");
mv.onLoad = function() {
arrLines = this.lineData.split("|");
myInterval = setInterval(drawFloorPlan, 1);
}

function drawFloorPlan() {
if(yCnt == mv.imageheight) {
trace ("Function over clearing interval, enjoy your floor plan");
clearInterval(myInterval);
return;
}
if((xCnt + 1) == mv.imagewidth) {
trace ("Row over, moving to next row");
yCnt++;
xCnt = 20;
}
if(arrLines[yCnt].charAt(xCnt) == 1) {
trace ("Gonna draw one");
mapHolder.lineTo(xCnt+1,yCnt);
xCnt++;
}
else {
trace ("Gonna skip one");
mapHolder.moveTo(xCnt+1,yCnt);
xCnt++;
}

}



NOw I also removed the \n from the line that prints the pipe character in PHP.


How often will these floorplans change, could you some how process them offline into individual swfs using say ming?

[freddycodes]

Incidentally here is what the above code rendered for the text file you included in your zip. However it took almost 10 minutes to complete on a 2 GHz with 512 mb or RAM.

[CyanBlue]

Thank you for your time, freddycodes... Appreciate it... ;)

I think it is way too slow to draw a floor plan like that... I know that drawing API in Flash is slow, and I don't think this can be an option...

The problem is that I have to put some interactivity in this floor plan, and to do that, I have to figure out which wall is which one...

To do that, I'll have to find some reasonable way to find the regioni for each wall... To do that, I have editied the JPEG file and erased the last lines of each walls so that I can run the PHP code to get the edge for each walls... Yet, I couldn't find a reasonable way of finding a rect of each walls... I'll have to go over it with some more thoughts...

I am enclosing two files to show you how things should be...
The Flash movie file that reads low-res version of the JPEG file parse data into Flash, Maybeck1.txt... This text file has been created via the BG_ASCII program that creates ASCII file from the image file... This is just to show you how the program is going to work, but I don't have any region finding routine in it yet...

The other files that starts with Maybeck5 are the same file that I have uploaded previously... I have used PHP script to generate 0s and 1s for each pixel... Well... I was about to go over the same approach, attaching Block movieclip for all the places where 1 is found... The problem is that the text file is way too huge and Flash cannot handle it... This is the script, which is basically identical to Maybeck1.fla file... I am keep getting the abort ths script warning because of the big array size...floor1._alpha = 50;
floor1_arr = new Array();
gapX = 5;
gapY = 5;
blockWd = 3.81;
blockHt = 6.72;
theDepth = 1000;

testLVs = new LoadVars();
testLVs.onLoad = function (success)
{
if (success)
{
line_arr = new Array();
line_arr = testLVs.lineData.split("\n");
for (i = 0 ; i < line_arr.length ; i++)
{
this["line" + i] = line_arr[i].split("");
for (j = 0 ; j < this["line" + i].length ; j++)
{
if (this["line" + i][j] == "1")
{
floor1_arr.push({row:i, column:j});
}
}
}
for (k = 0 ; k < floor1_arr.length ; k++)
{
_level0.attachMovie("Block", "Block" + k, theDepth++, {_x:gapX + floor1_arr[k].column * blockWd, _y:gapY + floor1_arr[k].row * blockHt});
_level0["Block" + k].onRollOver = function ()
{
_level0.theMC.text = this._name;
}
_level0["Block" + k].onRollOut = function ()
{
_level0.theMC.text = "";
}
}
}
else
{
trace("Fail to load the image data.");
}
}
testLVs.load("Maybeck3.txt");This is the place where I got stuck... So, I thought that maybe I could just send out the starting and ending coordinates of each wall so that I could get the lighter data that Flash can handle... Or, create movieclips directly from PHP using Ming... Whatever way I choose, I gotta find a way to get the region of each walls first... and that's when I needed to know about that dynamic variable names in PHP so that I can parse the data and write lighter text file out of it...How often will these floorplans change, could you some how process them offline into individual swfs using say ming?Well... Creating a prototype application is one thing and adding additional floor plans are another... Let's just say that one house builder opens up a new community, and there are at least 5 house models in that community, and one house model can have something like 5 variations depending on the user options such as adding sun deck or adding porch and such, and one house have at least three floors... 5 * 5 * 3 = 75... 75 drawings to import when this can go online and I am just checking the possibility to put those floor plans automatically into Flash...

[littleRichard]

i'm not so sure this will help or not. especially if you need to tell one wall from the other. i can't really see a way of doing that without some manual editing. anyway here's what i've got. i wrote it right after MX came out and everyone was making those mosaic looking things over at we're here using the ascii art generators. basically it looks at each 10 x 10 area of a grayscale image and assigns a value 1 - 10 representing how dark it is.


<?php
$image = ImageCreateFromPNG("render.png");

$width = 200;
$height = 300;

$area = 10;
$possible = 255 * ($area * $area);

$xCount = $width / $area;
$yCount = $height / $area;

$pCount = 0;
$varCount = 0;

$string = "";

for($yOut=0; $yOut < $yCount; ++$yOut)
{
for($xOut=0; $xOut < $xCount; ++$xOut)
{
$total = 0;
for($y = ($yOut * $area); $y < ($yOut * $area + $area); ++$y)
{
for($x = ($xOut * $area); $x < ($xOut * $area + $area); ++$x)
{
$colors[$pCount] = ImageColorsForIndex($image, imageColorAt($image, $x, $y));
$total += $colors[$pCount]["red"];
++$pCount;
}
}
$string .= "&s".$varCount++."=".round($total * $area / $possible);
}
}
$string .= "&";

echo $string;

imageDestroy($image);
?>

[CyanBlue]

Thank you for the reply, littleRichard... ;)

Ah... I see that you are using imageColorAt() function in there... Do you know how long it took for me to find that specific function??? I've been browsing PHP manual for two days and I couldn't find it... Yet, it was there... I must be blind... :)

Yup... Manual editing would be the way of doing it cuz I don't know how to get the reigin of the walls... I might find some other way of doing it... I am not sure yet...

Anyways, thanks for the script... I learned something new from there as well... ;)

[EsChEr]

wow, you really have been banging your head into walls, I don't quite get what you need, any way you could help me out with a little make believe picture?

[CyanBlue]

banging your head into wallsPuhahaha... That's exactly what I am facing against, and how I am feeling... It's funny to hear it that way though... ;)a little make believe pictureUm... I thought that you came here to rescue me... Didn't you??? :D Yeah... What is it??? I am not sure if I can help you out with my limited and retarded ability, but I can at least try... Please make another thread and let me know... and I'll see if I can do any good... ;)

[EsChEr]

haha, it's just that I don't get the idea post one of the jpgs an a decription or image of what the result should be

[CyanBlue]

Oh... The file, maybeck11.zip, contains FLA file that I have which is working from the low resolution picture, and another text file that has been generated via PHP script and this won't work in the same algorithm of that low resolution version because of the data complexity... I think you might be able to see what I am trying to do when you see the Flash movie file in that ZIP file...

What about your project??? ;)

[EsChEr]

and where can I find this file?
It wasn't a proyect, someone asked for assistance and I came up with that, it was kinda cool so I posted it

[CyanBlue]

The file is right up there... Go four more of my replies up... and that reply contains attachment in it with its file name of 'maybeck11.zip'... ;)

Yup... The transition was cool... But I didn't really get the relevance between the transition and the each pixel values... Maybe I was paying too much attention on the imageColorAt() function at the moment... :D