[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 : 59 points
Date : 2024-05-05 18:47 UTC (4 hours 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!
| 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.
___________________________________________________________________
(page generated 2024-05-05 23:00 UTC)