

Ask HN: Review my app, LayoutGenerator - okayzedd

Hi everyone -<p>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.<p>App is at: http://gen1.recreclabs.com<p>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?<p>Edit1:<p>Some sample screenshots of websites we have been using are in:<p>http://dontbite.me/~okay/screens/
======
sandipagr
<http://gen1.recreclabs.com>

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

~~~
okayzedd
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...](http://gen1.recreclabs.com/mocks/43?guid=67e5e7082e6a62832969)

------
paulbaumgart
Do you have any sample layout images to try uploading?

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

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

~~~
fahhem
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!

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

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

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

------
joshwa
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

~~~
okayzedd
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?

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

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

~~~
okayzedd
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.

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

~~~
okayzedd
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.

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

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

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

------
jwegener
Love the concept -- will definitely use this!

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

~~~
okayzedd
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.

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

