[HN Gopher] Designing furniture using the CSS grid (2023)
___________________________________________________________________
Designing furniture using the CSS grid (2023)
At one point during the construction of my house, we needed designs
for the kitchen and bathroom cabinets and a bedroom wardrobe. I
wanted full control of the design process. Doing it in vector
illustration software was too painful and it was taking too long.
But I didn't have the time to learn any complex CAD tool either.
So I developed a small HTML/JS/CSS tool for designing MDF furniture
by writing my own little language that transpiles into a CSS grid
layout. Take a look at the blog post for details:
https://alnvdl.github.io/2023/01/07/designing-furniture-usin... Or
go directly to the tool (works best on desktop or tablet):
https://alnvdl.github.io/squareplanner/
Author : alnvdl
Score : 158 points
Date : 2024-05-05 18:47 UTC (1 days ago)
(HTM) web link (alnvdl.github.io)
(TXT) w3m dump (alnvdl.github.io)
| lovegrenoble wrote:
| > I'm sharing this in the hope that it can be useful for someone
| else in the same situation as I was, or maybe help someone who is
| learning about the CSS grid layout.
|
| I also recommend using this cheat sheet to simplify the process
| of creating responsive layouts: https://flexboxcss.com
| dang wrote:
| It looks like you've been using HN to repeatedly promote your
| links:
|
| https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...
|
| https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...
|
| https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...
|
| That's excessive and starts to run afoul of this site
| guideline: "Please don't use HN primarily for promotion. It's
| ok to post your own stuff part of the time, but the primary use
| of the site should be for curiosity." So if you'd please stop
| doing this, we'd appreciate it.
|
| HN users, btw, are a lot fiercer than the mods about this and
| will use unkind words like 'astroturf' and 'spam' when they
| notice such repeating patterns. It's not in your interest.
| mauvehaus wrote:
| 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 everything
| manually every time.
| tomgp wrote:
| When i was a kid i used to use Lotus 123 to make maps for DnD
| detourdog wrote:
| All it took was vision and a tool.
| peteradio wrote:
| I used to hide porn deep in the lotus folder cache. We are
| kindred spirits!
| throwaway11460 wrote:
| 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.
| rchaud wrote:
| Myst, once the biggest-selling PC game ever, began as a
| prototype built in Hypercard.
| tazu wrote:
| This is really cool, I especially like the syntax you came up
| with.
| ReleaseCandidat wrote:
| 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
| alnvdl wrote:
| 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 :)
| matsemann wrote:
| I saw this in the "Printing music with CSS grid"-discussion and
| played a bit with it then. I really like the idea of using the
| constraint solver part of a layout engine for something else,
| very clever.
| exmadscientist wrote:
| 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.
| mauvehaus wrote:
| 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.
| exmadscientist wrote:
| 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.)
| bschwindHN wrote:
| 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
| alnvdl wrote:
| 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).
| necovek wrote:
| 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.
| Cannabat wrote:
| 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 :)
| alnvdl wrote:
| 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.
| TheSisb2 wrote:
| 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 drawer <
|
| So I inspected the odd shaped element and noticed it would
| overflow. Probably fine for your purposes.
|
| Super cool!
| alnvdl wrote:
| 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...
| Izkata wrote:
| 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)
| nativeit wrote:
| I feel like I somehow recovered a pre-existing desire for this to
| exist.
| system2 wrote:
| I use photoshop for this. Just switch the ruler and measurements
| to Inches and create fixed size boxes as needed. Takes me 3-5
| minutes to create a mockup.
| btbuildem wrote:
| 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.
| cuttysnark wrote:
| This is very cool. Discovered Ctrl+Option+F produces a florin 'f'
| [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!
___________________________________________________________________
(page generated 2024-05-06 23:02 UTC)