2021-12-28 11:03:28 +01:00
|
|
|
---
|
|
|
|
|
title: FreeSewing in the browser
|
|
|
|
|
---
|
|
|
|
|
|
2022-02-19 08:04:25 +01:00
|
|
|
Thanks to the advances in browser standardisation around Javascrip
|
|
|
|
|
ESM modules, not to mention [the new Skypack CDN](https://www.skypack.dev/),
|
2021-12-28 11:03:28 +01:00
|
|
|
you can generate patterns in the browser with a few lines of Javascript.
|
|
|
|
|
|
|
|
|
|
<Tip>
|
|
|
|
|
|
|
|
|
|
##### Use FreeSewing.org if you just want a pattern
|
|
|
|
|
|
|
|
|
|
These instructions are intended for people who want to generate
|
2022-02-20 14:35:50 +01:00
|
|
|
their own patterns. If you _just want a sewing pattern_ you can
|
2021-12-28 11:03:28 +01:00
|
|
|
get all our designs on [FreeSewing.org](https://FreeSewing.org/),
|
|
|
|
|
our website for makers.
|
|
|
|
|
|
|
|
|
|
</Tip>
|
|
|
|
|
|
|
|
|
|
## High level overview
|
|
|
|
|
|
|
|
|
|
To generate a pattern, you will need to:
|
|
|
|
|
|
2022-02-20 14:44:38 +01:00
|
|
|
- Instantiate the pattern (`new ...`)
|
|
|
|
|
- Pass it the settings and measurements you want to use (`{ ... }`)
|
|
|
|
|
- Load the theme plugin (using `use()`)
|
|
|
|
|
- Draft the pattern (using `draft()`)
|
|
|
|
|
- Render it to SVG (using `render()`)
|
2021-12-28 11:03:28 +01:00
|
|
|
|
|
|
|
|
Which can be done as a one-liner since `use()`, `draft()` and
|
|
|
|
|
`render()` are all chainable, as shown below.
|
|
|
|
|
|
|
|
|
|
## Code example
|
|
|
|
|
|
2022-02-19 08:04:25 +01:00
|
|
|
Below is a complete example.
|
2021-12-28 11:03:28 +01:00
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<!-- This entire head tag is optional/cosmetic -->
|
|
|
|
|
<title>FreeSewing browser example</title>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
padding: 1rem;
|
|
|
|
|
}
|
|
|
|
|
svg {
|
|
|
|
|
max-width: calc(100vw - 4rem);
|
|
|
|
|
max-height: calc(100vh - 4rem);
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
}
|
|
|
|
|
#container {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<script type="module">
|
|
|
|
|
import Aaron from 'https://cdn.skypack.dev/@freesewing/aaron';
|
|
|
|
|
import theme from 'https://cdn.skypack.dev/@freesewing/plugin-theme';
|
|
|
|
|
const svg = new Aaron({
|
|
|
|
|
sa: 10, // Seam allowance
|
|
|
|
|
paperless: true, // Enable paperless mode
|
|
|
|
|
// More settings, see: https://FreeSewing.dev/reference/api/settings
|
|
|
|
|
measurements: { // Pass in measurements
|
|
|
|
|
biceps: 387,
|
|
|
|
|
chest: 1105,
|
|
|
|
|
hips: 928,
|
|
|
|
|
hpsToWaistBack: 502,
|
|
|
|
|
neck: 420,
|
|
|
|
|
shoulderSlope: 13,
|
|
|
|
|
shoulderToShoulder: 481,
|
|
|
|
|
waistToHips: 139,
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.use(theme) // Load theme plugin
|
|
|
|
|
.draft() // Draft the pattern
|
|
|
|
|
.render() // Render to SVG
|
|
|
|
|
// Update DOM
|
|
|
|
|
document.getElementById("container").innerHTML = svg
|
|
|
|
|
</script>
|
|
|
|
|
<div id='container'>SVG output will appear here</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Dependencies
|
|
|
|
|
|
2022-02-19 08:04:25 +01:00
|
|
|
If you compare this example with [our NodeJS
|
2021-12-28 11:03:28 +01:00
|
|
|
example](/reference/howtos/nodejs) you'll notice that you do not
|
|
|
|
|
need to worry about loading any dependencies. Not even `@freesewing/core`
|
|
|
|
|
is loaded, because Skypack will pull in all dependencies for you.
|
