Hmm. That's kind of neat. How about using edge detection to suggest boxes? E.g. I swipe the mouse along one linear feature, and if it's an edge, you create some kind of guide-line there. Do that again for another perpendicular guide-line and there's a corner, etc.

We are doing the processing server side, so that might be slightly difficult, but we are intending to make the process automatic, including auto-finding the divs.

here's an example of our auto-detection algorithms:

http://gen1.recreclabs.com/mocks/43?guid=67e5e7082e6a6283296...

Do you have any sample layout images to try uploading?

Perhaps you could add some more feedback after selecting the image? It's great that it starts automatically, but it took me a few seconds to notice the progress indicator.

Make your HTML output lowercase. It's the predominant style these days.

Also agreed that drawing divs from scratch (no image upload) could be useful.

We've fixed the uppercase html, if you modify your mock and preview the code, you'll see the update.

Thank you for the feedback!

Hey, cool idea in theory. But I'm not a huge fan. The markup it generates isn't really that clean, and the overall process isn't very fluid. I personally believe that we will not get to a point where this can be done by a machine for at least a few years.

But best of luck with it...!

Neat demo, but the markup this produces isn't all that clean, and certainly not intuitive.

Strangely, I was writing some CSS the other day and thought 'why doesn't something like this exist'.

Glad to see you've produced a working version.

Perhaps the business model should be, free for simple use, but chargeable for more complex sites / designs.

I'm not quite sure why I had to upload an image. I took a screenshot of this page and uploaded it, but it seems as though if I was given a blank page I could have designed the same layout.

Overall, the idea is to automatically turn a mockup of a page into HTML. This is predicated on the user having a picture of the page they want, whether it be a photoshop drawn file or by hand.

In this version, we are outputting floating CSS (with padding, margins, etc) & intelligently named divs, which is intended to save web devs time on getting all that together by hand.

I see the goal, but why is an image required to use the app?

Oh, I see what you are getting at. You are right - an image is unnecessary currently, but we have features implemented that do image analysis that will be available in our next release.

I think that even with image related features, an option to just draw divs on a blank page would be welcome and popular.

Just a note on your image file extension. It doesn't accept .tif (only .tiff). Some programs will save it as *.tif by default.

Might want to check other possible formats too.

Thanks PureSin, we'll definitely look into that :)

Ideas:

-- Slice up the background images for me, and include them as css background images

-- Hierarchical nesting of divs? (this div is inside this div)

-- Integration with some grid framework, e.g. 960gs

IMHO you can't integrate 960gs here. This generator generates quasi-absolute positioned elements. There is no ltr flow of the elements.

EDIT: There is a nice 960.gs layout generator available for some time now. http://960ls.atomidata.com/

thanks! 960gs sounds interesting, looking at it now.

the tool right now automatically does hierarchical nesting if a div is inside another one.

the download zip contains the sliced images and the html to display them in the layout specified, is that what you are refering to for image slicing?

Ah I didn't see that-- just saw the generated code. Nice. You might want to add that to step 3 on the homepage, and have the button say "download code and images".

I guess I should probably assume that the answer is no, but does this work with Internet Explorer 7?

Either it doesn't, or I can't figure out how to proceed.

We've been testing against IE8 on Win7, which we've managed to get working.

We've gotten a few exceptions earlier (which we assume were from you :-D) We'll take a look at the logs and try to figure out what went wrong, sorry about that.

No worries. I was at the office is all. I don't voluntarily use IE7 for the fun of it. ;-)

Love the concept -- will definitely use this!