Ask HN: Review my app, LayoutGenerator | Hacker News Reader

Ask HN: Review my app, LayoutGenerator

50 pointsokayzedd25 comments

Hi everyone -

I'm part of a start up working on creating a tool to simplify web development. Our first app makes it easy for developers to position elements of their site. People can draw in divs directly on top of an image/mockup using our editor (written in Cappuccino!) and we output cross browser compatible, table-free code. We'd love any feedback on this product and any tips on how we can improve it.

App is at: http://gen1.recreclabs.com

We eventually hope to make this a completely automated process (we have algorithms that detect various elements of a website) and have the editor be used only for minor fixes. Is this something you guys would find useful?

Edit1:

Some sample screenshots of websites we have been using are in:

http://dontbite.me/~okay/screens/

View on HN

http://gen1.recreclabs.com

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...!

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.

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

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

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".

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/

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 :)

Love the concept -- will definitely use this!

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. ;-)

Reply on news.ycombinator.com