loading

Laser cutting is widely used by industrial designers and mechanical engineers as a rapid modeling tool. However, designing and fabricating laser cut assemblies can be a complex and tedious process, especially for novice designers. Joinery, the system described in the Instructable, was developed to facilitate the generation of customizable joints for laser cut assemblies.

Through Joinery, designers simply define connections between part edges in the assembly, while the system generates the joints. This system offers six different joint profiles for a variety of material and design needs.

Access Joinery here: clementzheng.github.io/joinery. At this moment, the system runs best on Chrome, Firefox, and Microsoft Edge. Safari users have reported numerous bugs during export which I have yet to address.

Since this is a fairly long Instructable, here is a table of contents if you know what you are looking for!

  1. Why use Joinery?
  2. Interface overview
  3. Preparing SVG files
  4. Defining joints
  5. Creating and applying joint profiles
  6. Modifying joints
  7. Modifying joint profiles
  8. Exporting joint profiles
  9. Exporting designs
  10. Joint profiles overview

Step 1: Why Use Joinery?

Joinery tackles the task of joint design and generation for laser cut assemblies. We understand that designers might want to rapidly evaluate their ideas with physical models, especially early on in the design process. However, we discovered that drawing joints for laser cut assemblies can be a tedious, trial-and-error process.

Joinery tackles joint design between different parts of an assembly. It takes a two-dimensional pattern (as a SVG file) and creates joints from connections which you define between edges. This two-dimensional pattern could be a digital drawing from Illustrator or Inkscape; or, it could be deconstructed parts from a 3D model via tools like 123D Make or Pepakura.

Joints generated by Joinery are customizable based on a set of parameters. They can be modified and updated efficiently in response to fabrication or design changes. This aims to mitigate the effort required to manually edit each joint to achieve a better fit, for example.

Step 2: Interface Overview

  1. System Options: menu for uploading and exporting designs, changing units from 'mm' to 'in', as well as toggling the display of drawing dimensions.
  2. Canvas Tools: tools for arranging parts on the canvas, removing parts from the canvas, as well as globally panning the workspace.
  3. Joint Tools: tools for defining joints, reversing paths, flipping paths and swapping male/female edges.
  4. Contextual Menu: right-clicking on a path brings up joint editing options.
  5. Joint Profiles: menu for managing joint profiles.
  6. Joint Parameters: displays a list of joint profile parameters which is used to modify joint profiles.
  7. Joint List: menu for managing user-defined joints.

Step 3: Preparing SVG Files

Designs are transferred in and out of Joinery as SVG files. We recommend using vector editing programs like Illustrator or Inkscape to prepare the SVG for Joinery.

  1. Ensure that connections between two edges are defined by two distinct paths. (Refer to the diagram above) Each edge in a connection should be a distinct, continuous path. You can use the 'cut' tool to separate a path into individual paths; conversely, you can join multiple paths together to form a single path. Color coding the edges of a connection is an optional step that you might find helpful.
  2. Ensure that edges in a connection have similar lengths. Since the edges in a connection will need to physically connect to each other, it is important to ensure that their lengths are similar. You can find the length of a path in Illustrator by selecting the path and viewing the 'document info' tab, with 'objects' checked in the dropdown menu.
  3. Ensure all edges in connections are not grouped. Joinery only works on ungrouped paths. You can use this to manage your document, grouping all details irrelevant to Joinery to ensure that they will not be affected.
  4. Ensure that you are working in 'mm' or 'in'. For dimensional accuracy during laser cutting, it is good practice to work in either 'mm' or 'in'. Joinery will perform an arbitrary conversion if it fails to detect the SVG's units.
  5. Export drawings to SVG, ensure that it is NOT responsive. When prompted by the system during export, make sure that the 'responsive' parameter is not checked.
  6. Use "export as" rather than export selection for Illustrator CC.
  7. Ensure that there is only one art board when using Illustrator CC, and that the files contains only vector objects. Unfortunately, images and other types of object conflicts with how Joinery reads SVG files.

Click on the 'import SVG' button in Joinery's system options to import your designs into Joinery. Multiple SVG files can be loaded into the same Joinery project. An example SVG file (2 inch big cube) has been provided for your reference, as well as an example Joinery file of the same SVG which you can import with "load project".

INKSCAPE USERS

It appears that different versions of Inkscape have different scaling conventions if pixels are used. Please check your file after export to ensure that your designs have not been scaled.

Step 4: Defining Joints

To define a joint connection between two edges ensure that the 'set joints' tool is selected from the joint tools menu on the left. As the cursor hovers over a valid edge, you will see the path highlighted in blue. Clicking on the first path defines the male joint, while clicking on the second path defines the female joint. These roles can be swapped at any time through the 'swap M/F' tool.

Once a joint has been defined, a new item will be added to the Joint List on the right. Hovering over an item in the joint list will highlight the connection on the uploaded pattern. In addition, paths in a joint are highlighted in green with their normal (a line perpendicular to the path) indicated. Dotted lines connect the pair of edges, indicating the connection between two paths.

Joinery will prompt you if you attempt to connect two paths with significantly different lengths. The joint will not be created in such a case.

Step 5: Creating and Applying Joint Profiles

Joinery offers six joint profiles for a variety of material and design needs. To add a joint profile to your project, select from the list of joint profiles via the drop down menu, and click add to include that profile in your project.

To apply a joint profile to a joint, simply shift+click the joint profile to copy, and shift+click the path to apply the profile. Alternatively, you can apply a joint profile by expanding a joint item, and selecting the joint profile from the drop down menu.

The same joint profile can be applied to multiple joint items; similarly, multiple joint profiles can be added to your project and they can be applied to different joint items.

Step 6: Modifying Joints

Joinery provides tools to help you fix a joint's orientation. These tools can be accessed by right clicking on a path in a joint, or by expanding a joint item in the joint list.

  1. Reverse path: reverses the direction of a path; switching the start of a path with its end.
  2. Flip joints: flips the normal of a path, hence flipping the direction which a joint profile extends from a path.
  3. Swap M/F: swaps the male and female roles in a joint.

Step 7: Modifying Joint Profiles

Each joint profile has a set of parameters which can be modified for customization. More details about the parameters for each joint profile type will be covered in later sections.

Modifications to a joint profile will immediately update all joints using that profile. To modify a joint profile, click on its title to expand and display the list of parameters. New values can be typed into each parameter. Hitting 'enter', or clicking on the 'set values' button, updates the joint profile. Values which have not been updated will be displayed in orange.

Step 8: Exporting Joint Profiles

Joint profiles can be exported by clicking on the 'save profile' button. This saves the parameter values of the particular joint profile. Saved profiles can be imported into other Joinery projects by clicking on the 'load' button in the joint profile menu.

With this feature, you can thus share a joint profile that has been optimized to a particular material and machine with other designers in your maker space. Or, keep it for your own reference.

Step 9: Exporting Designs

Joinery projects can be saved and loaded through the 'save project' and 'load project' buttons on the system menu at the left. Remember to save your work often!

Uploaded designs along with the generated joints can be exported for laser cutting by clicking on the 'export SVG' button on the system menu. Paths in the exported designs are color coded for convenience:

  1. #FF0000 Red = Original Paths: these are the base paths used to generate the joints.
  2. #0000FF Blue = Joints (Cutting): these are the cutting lines for joints generated by Joinery.
  3. #00FFFF Cyan = Joints (Folding): these are the folding lines for joints generated by Joinery.

Exported SVG files are automatically grouped. To continue editing the designs and joints in vector drawing programs like Illustrator, simply ungroup the paths in the drawing program. Programs like Illustrator also provide convenient selection tools to help you select objects by different attributes; e.g. you can select all cutting paths for joints by selecting all the paths with a blue stroke. Most laser cutters will also differentiate paths through stroke color; e.g. you can define different power and speed settings for cutting paths vs. folding paths.

Step 10: Joint Profile Overview

Joinery offers six joint profiles, the subsequent sections will elaborate on the different joint profiles and their parameters.

  1. Hem: to facilitate stitching, especially for thick fabrics.
  2. Interlocking: to connect two edges without adhesives or external fasteners, particularly for curved edges.
  3. Loop insert: to connect two pieces of fabric without stitching.
  4. Flap: to facilitate the connection between two straight edges with adhesives or external fasteners like zip-ties.
  5. Finger: for press-fit joints between thick rigid materials.
  6. Tab insert: to connect two straight edges without adhesives or external fasteners, particularly for paper-like materials.

Step 11: Hem (joint Profile)

The hem profile facilitates hand stitching—especially for thick fabrics like leather or felt which can be difficult to pierce with a needle. This profile consists of two parts, an offset from the original edge, and a series of holes to guide stitching.

Works on: Both curved and straight paths.

Ideal for: Fabrics, especially thick fabrics like leather and felt.

-

Parameters

  1. hem offset: the perpendicular distance between the original edge and the hem's edge.
  2. hole diameter: the diameter of the holes for stitching. A value of zero will simply generate the hem without any holes.
  3. hole spacing: the distance between holes.

Step 12: Interlocking (joint Profile)

The interlocking profile provides an inherent connection between two edges without the use of adhesives or fasteners. It is particularly useful for connecting curved surfaces—especially ruled surfaces.

Works on: Both curved and straight paths.

Ideal for: Thick, stiffer fabrics like felt and leather. Flexible paper and plastics, such as mylar drafting film and yupo paper.

-

Parameters:

  1. material thickness (M): thickness of the material for male joint. Depending on material compression, changing this parameter will affect the tightness of the joint's fit.
  2. material thickness (F): thickness of the material for female joint. Depending on material compression, changing this parameter will affect the tightness of the joint's fit.
  3. interlocking width: the width of each tab. This affects the density of joints and resolution of the edge after assembly.
  4. interlocking height: the height of each tab.
  5. flap angle: the slope angle of the tab's side.
  6. offset start: the distance from the start of the path before joints are generated.
  7. offset end: the distance from the end of the path where joints stop.
  8. grip: the width of the overlapping portion between each tab.
  9. tolerance: the gap between the stem of each tab. A negative value will overlap the tabs' stems, resulting in a tighter fit.

Step 13: Loop Insert (joint Profile)

The loop insert profile provides an inherent stitch-less connection between two fabric edges. This joint profile is useful if you do not have access to a sewing machine or are not experienced with hand stitching. Or, if you are looking to interface soft fabrics with hard materials. Furthermore, this joint profile can be disassembled, thus allowing you to recycle or switch out different parts of an assembly.

Works on: Both curved and straight paths.

Ideal for: Synthetic fabrics like nylon and polyester, as the laser will fuse the fabric's edge and prevent it from fraying. Fabric male inserts can connect to rigid female edges, e.g. acrylic or basswood.

-

Loop insert (overlap): Loop insert (overlap) is ideal for fabric-fabric connections. The overlapping hem covers the seam after assembly.

Loop insert: Loop insert is ideal for fabric-hard material connections. Unlike the loop insert (overlap), there is no offset from the original female edge.

Loop insert (surface): Rather than a pair of edges, loop insert (surface) connects a pair of surfaces. See the straps on the tote bag in the image above for an example.

-

Parameters

  1. material thickness (M): thickness of the material for male joint. Depending on material compression, changing this parameter will affect the tightness of the joint's fit.
  2. material thickness (F): thickness of the material for female joint. Depending on material compression, changing this parameter will affect the tightness of the joint's fit.
  3. hem offset: the perpendicular distance between the original edge and the slots for the inserts.
  4. insert width: the width of the insert's stem.
  5. hook width: the width of the insert's hook. A larger value will result in a more robust joint, but it will also make it more difficult to assemble.
  6. hook count: the number of hooks. A larger value will result in a more robust joint, but it will also make it more tedious to assemble.
  7. joint spacing: the distance between each insert.
  8. slack: the amount of slack between the two edges. A negative value might crumple the female edge.
  9. offset start: the distance from the start of the path before joints are generated.
  10. offset end: the distance from the end of the path where joints stop.

Step 14: Flap (joint Profile)

The flap profile is commonly used in flat-pack carton boxes and paper craft. Edges can be connected through the use of adhesives or external fasteners; e.g. zip-ties can make use of the registration holes to secure two edges together.

Works on: Straight paths only.

Ideal for: Foldable materials like corrugated cardboard or card stock.

-

Parameters

  1. height (M): height of the male flap. A value of zero will keep the original edge and not generate the flap on the male edge.
  2. height (F): height of the female flap. A value of zero will keep the original edge and not generate the flap on the female edge.
  3. flap angle: the slope angle for the sides of the flaps.
  4. hole diameter: the diameter of the registration holes. A value of zero will simply generate the flaps without any holes.
  5. hole spacing: the distance between registration holes.

Step 15: Finger (joint Profile)

The finger profile is typically used for press-fit, right-angle connections between rigid materials like basswood and acrylic sheets. Joinery extends this common profile by accommodating finger joints between two surfaces at angles other than 90 degrees (see image above).

Works on: Straight paths only.

Ideal for: Thick (>2mm / >0.1in), rigid materials like basswood and acrylic.

-

Finger joint (90deg): for right angle connections between two parts.

Parameters

  1. material thickness (M): thickness of the material for the male joint.
  2. material thickness (F): thickness of the material for the female joint.
  3. finger width: width of each 'finger'.
  4. finger radius: radius of the exterior corners of each 'finger'. Rounding the exterior corners may make it easier to press the edges together during assembly.
  5. offset start: the distance from the start of the path before joints are generated.
  6. offset end: the distance from the end of the path where joints stop.
  7. tolerance: the gap between each 'finger'. A negative value may result in an interference fit depending on the laser cutting kerf. This parameter is critical for achieving an optimal press-fit.

-

Finger joint (angle): for angled connections between two parts. Both edges should have the same material thickness.

Parameters

  1. material thickness: thickness of the material.
  2. finger width: width of each 'finger'.
  3. finger radius: radius of the exterior corners of each 'finger'. Rounding the exterior corners may make it easier to press the edges together during assembly.
  4. interior angle: the interior angle between two surfaces where the edges meet. In the case of an enclosure for electronics, this interior angle should be measured from the cavity for electronics.
  5. tolerance: the gap between each 'finger'. A negative value may result in an interference fit depending on the laser cutting kerf. This parameter is critical for achieving an optimal press-fit.

Step 16: Tab Insert (joint Profile)

The tab insert profile provides an inherent joint between two straight edges without the need for adhesives or external fasteners. Tab inserts can be entirely assembled from one side; closed forms are thus easily modeled with this profile (see image above).

Works on: Straight paths only.

Ideal for: Foldable paper and plastics like mylar drafting film or polyethylene sheets.

-

Parameters

  1. material thickness (M): thickness of the material for the male joint. This affects the size of the slots along the female edge.
  2. material thickness (F): thickness of the material for the female joint.
  3. insert width: width of the insert's stem and slots.
  4. insert height: height of the insert.
  5. flap height: height of the flap.
  6. flap angle: the slope angle for the sides of the flap.
  7. joint spacing: the distance between inserts.
  8. offset start: the distance from the start of the path before joints are generated.
  9. offset end: the distance from the end of the path where joints stop.
  10. grip: the interference between the insert and the slots. A larger value will result in a tighter connection, but it will also be harder to assemble.
<p>Hi, Awsome stuff. </p><p>However I have a scaling issue. When importing a SVG with mm set in the document properties - the imported SVG gets about 3,54 times larger. </p><p>If I import a SVG with px set in the document properties - the imported SVG gets almost the scale. (I gett warning about SVG units not found, converting to standard mm). The imported SVG gets about 1,25 times larger.</p><p>Any Ideas what I'm doing wrong?</p><p>I'm using Inkscape and like to work in mm. Also, I'm using Google Chrome.</p>
<p>Hi! Thanks for using joinery.</p><p>Could you send me the svg file so I can have a look?</p>
<p>I found that Inkscape uses different scaling px-&gt;inch depending on version. v0.4x uses 90 px per inch, and v0.9x uses 96 px per inch.</p><p>Illustrator uses 72 px per inch.</p><p>Which could explain the 1.25 times scaling issue (90/72 = 1.25).</p><p>Regarding the issue of SVG with mm set, I could not repeat it. It seems to be okay now.</p>
<p>Thanks for the heads up. I did not know that different inkscape versions had different scales. I will include that in the Instructable for future reference.</p>
<p>Is there a limit on the size of a path? I'm working on large sculpture that needs to be jointed. For small boxes the program works, but when I load a large object it doesn't want to set joints. I can hand off a SVG file. </p>
Sure, send it to me and I can check. There shouldn't be a limit, I'm guessing it's some other bug that I have not addressed.
<p>Sent you a message!</p>
I recreated my project using chrome. Everything works now. Might want to tell people not to use safari.
I am using Safari. When I export svg I am taken to a new safari page showing my project I tried to save as pdf but it doesn't capture my entire project only the side of mine square. When I try to save project i get the page of gibberish. I am never able to change type of file to svg or joinery. Its a pain but will try using chrome.
<p>I also have issues having software recognize the edge of my square I created a rectangle in Inkscape, saved as SVG, imported 2 into joinery. I select 'set joints' and hover over all/any sides of square , nothing happens. Help</p>
I suspect you were using the rectangle tool, which creates a svg object. Joinery unfortunately only recognize paths (). Try using the pen tool to draw the rectangle.
<p>you are absolutely right will try the pen!</p><p>thanks!</p>
<p>thanks for all your help - now I am trying to save the project and export.If I try to save it I receive a page of this </p><p>{&quot;SVGString&quot;:[&quot;\n\n\n \n \n \n \n \n \n \n image/svg+xml\n \n \n \n \n \n </p>
<p>Are you using safari? I encountered a bug where safari will not begin a download, displaying the file as a string of text on the page instead. I suggest using a browser like Firefox or Chrome.</p><p>To fix the issue with Safari, the workaround right now is to copy the string of text and paste it is a text editor. If you are exporting a project, change the file extension to &quot;.joinery&quot;. If you are exporting an svg, change the file extension to &quot;.svg&quot;.</p><p>Hope that helps.</p>
<p>Please send me a link to your svg file (or, paste the svg code here) so I can understand what might be the issue. </p><p>Thanks for trying it out!</p>
<p>Looks great. Have to give it a shot. Pepakura lacks that control of joinery.</p>
Top tip for anyone else slightly baffled:<br>Download the zip file from Github to your desktop, then extract it, then open &quot;index.html&quot; inside the extracted folder. <br>This software runs in your browser as javascript.
Thanks! Alternatively you can just run it from the link included in the introduction, without downloading the whole package. clementzheng.github.io/joinery
<p>Wow! Just amazing work! Thanks you so much!<br>I will vote for you!</p>
<p>I'm going to a Fablab thursday to try their laser cutter, so this is awesome timing.</p><p>But could you provide a working SVG-file for your cube example? I'm using Inkscape, converting objects to paths, breaking paths and breaking them apart, but Joinery does not recognize the units nor the paths to make joins.</p><p>A working SVG-file might give me some clues to figure it out.</p><p>Best regards and thanks<br>Stefan</p>
<p>Step 3 now has sample files for both SVG and a joinery project.</p>
Most awesome, good Sir :-)<br>I will take a look as soon as I get home from work. Thank you.
<p>I just rolled out an update for Joinery which I think should address the problem you are facing. But in any case, Step 3 now has sample files for you to use.</p>
<p>Hi, love the software but experiencing problems setting joints. For some reason when I try to mouse over the path the software does not recognize it as a valid path.</p><p><br>Attached is a link to the joinery file, as well as the svg files and the dxf files all zipped into 1 file.</p><p>https://drive.google.com/open?id=0B5MY5sAS4es_TWxzYzg3VXY0U1U</p><p>Below is a description of the process that got me to this point.</p><p>I created the dxf files in Fusion 360. Then used an online convertor (http://www.dxfconverter.org/) to convert the dxf into svg. Then loaded 3 svg files into Joinery (Carry Plate.svg, Vertical Plate.svg and Horizontal Plate.svg). Lastly I tried to set joints, which is where the error is coming from.</p>
<p>Hello! Thanks for trying it out. I had a look at your SVG files and noticed a few issues:</p><p>1) The paths in the SVG document are all in a group. See the picture attached. For joints to be set in Joinery, you need to make sure that those lines are ungrouped.</p><p>2) I noticed that the different edges of your design were not separated. Try using Adobe Illustrator if you have access to it and follow the guidelines in step 3.</p><p>I am working on an update to Joinery right now to address the problems that you are facing. I'll let you know when an update has been rolled out!</p>
<p>An excellent resource. I use the finger joint box to &quot;teach tolerance&quot; in my high school lab. This will take us to a whole new level. I am looking forward to mastering the process.</p>
<p>Tolerances and fittings are a complicate concept to teach. I think students learn best by actually making (and failing). Hope this tool will come in handy at your lab!</p>
<p>Had aquick look but haven't really used it yet (long day, time for bed...), but I had to write and say this looks simply awesome, I think I'm going to have some fun with it!</p><p>I'm going to add a link in my Instructable, which I hope will become a master reference of (free) laser cutter design tools:</p><p><a href="https://www.instructables.com/id/The-Ultimate-Guide-to-Laser-cut-Box-Generators/">https://www.instructables.com/id/The-Ultimate-Guide...</a></p><p>If there are other free tools that you are aware of that might be useful to share, I'd love to hear about them.</p>
<p>The link you posted is an awesome resource! Thanks!</p>
<p>Extremely nice. I'll be trying this out on my Silhouette and Cameo cutters. Thanks for creating this.</p>
Thanks! I'm curious to see how they turn out with a knife plotter. I do not have access to one so it has only been laser cutting for me thus far.
<p>Amazing! Can't wait to try it out. Thanks for making this available.</p>
<p>This is very valuable information, thank you very much!</p>
<p>Looks great. I will definitely be taking a further look into this &amp; figuring it out. Thanks for sharing.</p>
Thanks, I'll gladly take any feedback to improve this!
I've shared this Instructable (along with your software) over on a few Google+ laser related communities who will hopefully bring you plenty of users to provide more feedback.<br><br>See: K40 Laser Cutting Engraving Machine (https://plus.google.com/u/0/communities/118113483589382049502)<br><br>See: LaserWeb/CNCWeb, open source Laser Software Community (https://plus.google.com/u/0/communities/115879488566665599508)
<p>Nice, thanks a lot!</p>

About This Instructable

21,748views

292favorites

License:

More by clementzheng:Joinery: Joints for Laser Cut Assemblies Shirt Circuit: DIY Wearable Breadboard Circuits 
Add instructable to: