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

11–20 of 33 posts

Re: Designing furniture using the CSS grid (2023)

#11

Post by alnvdl »

ReleaseCandidat wrote: post #10

The measurements in the default(?) plan look off: cabinet 200cm x 92cm top 3cm bottom 15cm scale 5 50cm * * 20cm * drawer door door drawer * drawer ^ ^ drawer * ^ ^ > drawer * > drawer drawer The program suggests 4 x 18.6cm = 74.4cm, but the actual remaining height is 74cm (92 - 15 - 3). Changing the scale from 5 to 4 or 6 yields the correct value of 18.5cm

The tool doesn't actually calculate the measurements. It just specifies the grid, and then extracts whatever the browser calculated as the width/height, rounding the numbers for displaying them nicely.

The scale is there just to make things look nice in the browser and/or in print format, and it can slightly corrupt the numbers as you noticed, especially when it's a small or odd scale (try setting it to 1 and watch it break horribly). I guess a few ways to get rid of the scale would be to introduce variable font sizes, make text not be counted for sizing the boxes, or automatically finding the "right" scale number with code. But like I said in the post:

> I guess making it more “serious” would have been possible, but in this case I just wanted to get my furniture designed fast, and keeping the code simple and small helped in that.

See: https://github.com/alnvdl/squareplanner/blob/01bdcb050ce58a4...

I also got these designs printed to follow during the construction, so I just picked scale numbers arbitrarily in a way that made them look good in the browser and fit in the paper size. So "portability" and pleasing visuals were more important than accuracy.

And of course, I could cheat like that because in my particular case any imprecisions got flagged by the real 3D CAD used by the furniture company to formalize the project :)

Re: Designing furniture using the CSS grid (2023)

#12

Post by detourdog »

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

All it took was vision and a tool.

Re: Designing furniture using the CSS grid (2023)

#13

Post by peteradio »

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

I used to hide porn deep in the lotus folder cache. We are kindred spirits!

Re: Designing furniture using the CSS grid (2023)

#15

Post by exmadscientist »

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 an hour or two to learn from scratch. It's not as cool as doing this with CSS's constraint solver, but it might add a new tool to your toolbox, and the value of that is difficult to overestimate.

Re: Designing furniture using the CSS grid (2023)

#16

Post by mauvehaus »

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 is at least all but guaranteed to be available to the people building the cabinets.

Since they'll have to do shop drawings anyways, you aren't gaining much even if you can interchange drawings with their CAD software.

Re: Designing furniture using the CSS grid (2023)

#18

Post by TheSisb2 »

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!

Re: Designing furniture using the CSS grid (2023)

#19

Post by alnvdl »

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

Re: Designing furniture using the CSS grid (2023)

#20

Post by exmadscientist »

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 mean, we're talking about making the napkin sketch that you hand to the real draftsman. The format really doesn't matter; they want a PDF (or whatever). They are not going to open your HTML/CSS/JS tool even if it would be trivial to them. They have better things to do with their lives. So what tool you choose is up to you and should be whatever is best for you. It doesn't matter what the shop is using.

Proper constraint-based drafting is indeed quite hard! But I think the whole "lay out this 2D grid-like structure with a few rectangles" problem is probably one of the first things anyone would learn to do with it, and I'd submit that it is indeed probably about a couple of hours' work, for someone already reasonably technical. The moment there's more than a single sketch involved, or complex geometry in that single sketch, I agree with you that it's asking too much.

The real benefit is that you are starting to learn something new. CSS is not going to help you (insane contortions aside? I really don't want to find out) when things like circles appear. And yet, if you know how to do 2D sketches, you can find yourself using them to solve other problems, just because you already know how to do it. And that's pretty cool! (For example, I've had living rooms that were just awful to lay out. It was a real nightmare to figure out how to get a TV into that place. So I sketched it up and messed around until I got something viable. My original plan was just to print out some pieces of paper to scale, then mess around with those, but it was soon clear I could do it all onscreen, so I did.)

Post reply on HN