Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Designing furniture using the CSS grid (2023)

alnvdl.github.io

Post reply on HN
Print view View original

21–30 of 33 posts

Re: Designing furniture using the CSS grid (2023)

#21

Post by alnvdl »

exmadscientist wrote: post #15

For anyone wondering how a "professional" would do this, you might use a 3D CAD program like SolidWorks, Inventor, or FreeCAD. You'd make a single 2D sketch, draw some lines in box shapes, and put some constraints on those boxes. Free/unbound dimensions would read out the distances that you needed to know. The whole thing would take less than five minutes for someone with beginner-level skills (i.e., me), and maybe a…

Mid-way through development, once I still had to solve the problems of sharing and printing, I almost gave up on continuing the work because I thought: "it surely must be easier to just learn a CAD application".

But as another commenter highlighted: that meant a learning curve not only for me, but for my wife as well. And then there was the challenge of sharing it with everyone else via email, IM, etc. Having it open in the browser means it's easy to share, and fast and easy to load and show to people anywhere (which is handy during construction).

Re: Designing furniture using the CSS grid (2023)

#22

Post by alnvdl »

Cannabat wrote: post #17

Very cool! Did you explore using the gap properties to specify the thickness of your boards? > I wanted full control of the design process. Doing it in vector illustration software was too painful and it was taking too long. Aaaand then 5 evenings later… classic :)

I did not consider the thickness of the boards because I was designing for these "modern" cabinets that have no significant gaps between the parts when viewed from the outside. So board thickness is just an implementation detail :)

But yes, the real designers using the CAD needed to take board thickness into account when designing the internal structure. In other words, this tool is generating a list of my requirements (what I want it to look from the outside + the labels describing what I want each part to be), and then there's the separate work of designing the actual, reality-constrained furniture.

Re: Designing furniture using the CSS grid (2023)

#25

Post by Izkata »

alnvdl wrote: post #19
TheSisb2 wrote: post #18

I was surprised when this layout worked: cabinet 200cm x 92cm top 3cm bottom 15cm scale 5 50cm \* \* 20cm \* drawer door door drawer \* drawer ^ ^ drawer \* ^ ^ drawer drawer So I inspected the odd shaped element and noticed it would overflow. Probably fine for your purposes. Super cool!

Yep, when I was developing this I played with some of these non-intended use cases, even though they wouldn't make sense in reality. Technically, what you did was overlay one module on top of another, with the illusion of there being an L-shaped door. And it would look very weird, but I suspect it may be possible to assemble the cabinets with these odd shaped doors or drawers...

Unfortunately the illusion breaks if you try to make the L go in the other direction:

  cabinet 200cm x 92cm top 3cm bottom 15cm scale 5
       50cm     *        *        20cm
  *   drawer   door     door     drawer
  *   drawer   ^        ^        drawer
  *   ^        >        ^        drawer
  *   >        drawer   drawer
(Also to GP: on here the indentation triggers code blocks where * won't italic, so no need to escape them)

Re: Designing furniture using the CSS grid (2023)

#26

Post by throwaway11460 »

tomgp wrote: post #9
mauvehaus wrote: post #6

Oh man, this is up there with the story I heard of the guy who used Excel to draw a floor plan. He just split and merged cells as needed and used different border lines to delineate the different wall types. Once again proving that Excel can be used for nearly anything whether you should or not. Solid work on this, and I love that it takes advantage of the browser to rejigger things without having to redraw everythin…

When i was a kid i used to use Lotus 123 to make maps for DnD

When I was a kid I made airliner cockpit simulator in Excel. Nothing automated - I had to manually rewrite and set colors of cells as the plane progressed on its way. Hours of fun.

Re: Designing furniture using the CSS grid (2023)

#27

Post by bschwindHN »

mauvehaus wrote: post #16
exmadscientist wrote: post #15

For anyone wondering how a "professional" would do this, you might use a 3D CAD program like SolidWorks, Inventor, or FreeCAD. You'd make a single 2D sketch, draw some lines in box shapes, and put some constraints on those boxes. Free/unbound dimensions would read out the distances that you needed to know. The whole thing would take less than five minutes for someone with beginner-level skills (i.e., me), and maybe a…

Having used AutoCAD, Draftsight, and PTC ProEngineer in the past, and FreeCAD (for actual CAD, generally 2D, as input to a Shopbot) and Sketchup (for design renderings for clients) regularly currently, I would suggest that the learning curve on constraint-based drafting is fairy steep for most folks. I'd also submit that it's of limited value if you aren't using the same package as your shop. The browser-based method…

I would recommend SolveSpace for this - it has a wonderfully simple UI, good taste in key shortcuts, runs quickly with few resources, and is easy to quickly define the kind of 2D constraints you would to use in the types of drawings we're talking about.

It can export to SVG, DXF, PDF, GCODE, and more

Re: Designing furniture using the CSS grid (2023)

#28

Post by necovek »

exmadscientist wrote: post #15

For anyone wondering how a "professional" would do this, you might use a 3D CAD program like SolidWorks, Inventor, or FreeCAD. You'd make a single 2D sketch, draw some lines in box shapes, and put some constraints on those boxes. Free/unbound dimensions would read out the distances that you needed to know. The whole thing would take less than five minutes for someone with beginner-level skills (i.e., me), and maybe a…

I've actually used FreeCAD Python scripts that simply define a lot of defaults for my usual cabinet style (eg. toe kick height, panel thickness, a couple of drawer styles [inset or not]...), and then simply declare cabinets I want to be building.

I get a 3D rendering, a cutting list exported as CSV that I can pass on to a shop, and it's trivial to adjust and play with dimensions.

Re: Designing furniture using the CSS grid (2023)

#29

Post by btbuildem »

A better title would be "designing the front-facing layout of rectangular-only cabinets", and that's generous.

I find this an odd exercise in using something ill suited for a purpose in an extra complicated way, just to solve an already solved problem.

Do you want to quickly throw together a kitchen design idea? IKEA has a full-featured tool just for that. Want something lower-level? Start with Tinkercad, Sketchup, all the way to Inventor or Solid Works.

Re: Designing furniture using the CSS grid (2023)

#30

Post by cuttysnark »

This is very cool. Discovered Ctrl+Option+F produces a florin 'ƒ' [on my machine] and the format function key-combo check is Ctrl+Option + regular ol' 'f'. Forked it and added the || 'f' and am now using this tool to organize lasercut jobs—on MDF, no less :) Thanks for sharing!
Post reply on HN