Save the following as index.html and upload it to your webserver.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Shed Designer</title>
<meta property="og:locale" content="en_AU"/>
<meta property="og:title" content="Shed Designer"/>
<style type="text/css">
body,
html,
#shed-root {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="shed-root"></div>
<!-- Keep the id, required for IE -->
<script id="webshed-loader" src="https://webshed.unda.com.au/loader.js"></script>
<script>
var app = new unda.App("shed-root", {
customer: "unda" // Change this to your customer name
});
// Use submitted form data here or trigger conversion.
app.addEventListener("form:submit", function(data) {
console.info(data);
});
</script>
</body>
</html>
The application will automatically clamp sizes based on their maxiumum / minimum values. Sometimes this is only done in the UI (warning displayed), to ensure the previous saved sheds are loaded correctly.
If customBaySize is true, then baySizes is used to determine the length of the shed.
If customBaySize is false, then shed length is used, in this mode the app will automatically determine the bay sizes depending on the targetBaySize (default is 4).
It is recommended to use the baySizes and set customBaySize to false when using the API, so that the bay sizes are deterministic.
<script id="webshed-loader" src="https://webshed.unda.com.au/loader.js"></script>
<script>
var app = new unda.App("shed-root", {
customer: "unda"
});
const shedToLoad = {
"version": "0.0.18",
"roofPitch": 11,
"colourMode": "advanced",
"doorColour": "deep-ocean",
"flashingColour": "cottage-green",
"roofColour": "woodland-grey",
"wallColour": "pale-eucalypt",
"wainscotColour": "paperbark",
"bargeColour": "classic-cream",
"cornerFlashingColour": "basal",
"ridgeColour": "cove",
"gutterColour": "evening-haze",
"downpipeColour": "surf-mist",
"windowColour": "deep-ocean",
"glassSlidingDoorColour": "dune",
"rollerDoorColour": "windspray",
"paDoorColour": "gully",
"metalSlidingDoorColour": "mangrove",
"openingFlashingColour": "wallaby",
"metalSlidingDoorFlashingColour": "jasper",
"rollerDoorFlashingColour": "terrain",
"whirlybirdColour": "monument",
"customBaySize": true,
"baySizes": [
3,
4,
3,
6,
7
],
"width": 6,
"height": 5,
"awningRight": {
"visible": true,
"length": 3,
"heightOffset": 0.5,
"gutter": [
{},
{},
{},
{},
{
"visible": true,
"models": [
{
"type": "Roller Door",
"alignmentX": "Right",
"height": 1.2,
"width": 1.2
},
{
"type": "Roller Door",
"alignmentX": "Left",
"height": 1.5,
"width": 1.5
}
]
}
],
"gable": [
{},
{},
{},
{},
{
"visible": true
},
{
"visible": true
}
],
"roof": [
null, {
models: [
{
type: "Skylight",
"alignmentX": "Right",
},
{
type: "Skylight",
"alignmentX": "Left",
},
{
type: "Skylight",
"alignmentX": "Center",
}
]
},
{
visible: false
},
{
visible: false
},
{
models: [
{
type: "Skylight",
"alignmentX": "Right",
},
{
type: "Skylight",
"alignmentX": "Left",
},
{
type: "Whirlybird",
"alignmentX": "Center",
}
]
}
]
},
"awningLeft": {
"visible": true,
"length": 4,
"heightOffset": 0,
"gutter": [
{},
{},
{},
{},
{
"visible": true,
"models": [
{
"type": "PADoor",
"alignmentX": "Left",
"doorWidth": 870,
"doorHeight": 2030
},
{
"type": "PADoor",
"alignmentX": "Right",
"doorWidth": 870,
"doorHeight": 2030
}
]
}
],
"gable": [
{},
{},
{},
{},
{
"visible": true,
"models": [
{
"type": "Window",
"alignmentX": "Right",
"windowWidth": 816,
"windowHeight": 790
},
{
"type": "Window",
"alignmentX": "Left",
"windowWidth": 1505,
"windowHeight": 790
}
]
},
{
"visible": true,
"models": [
{
"type": "Window",
"alignmentX": "Left",
"windowWidth": 589,
"windowHeight": 790
},
{
"type": "Window",
"alignmentX": "Right",
"windowWidth": 1731,
"windowHeight": 790
}
]
}
],
"roof": [null, {
visible: false,
"alignmentX": "Center"
}, {
models: [
{
type: "Skylight",
"alignmentX": "Right",
},
{
type: "Whirlybird",
"alignmentX": "Left",
},
]
},
null,
{
models: [
{
type: "Skylight",
"alignmentX": "Center",
},
{
type: "Skylight",
"alignmentX": "Left",
},
{
type: "Skylight",
"alignmentX": "Right",
}
]
}
]
},
"main": {
"mezzanineFloors": [
{
visible: true
}
],
"gable": [
{
"visible": true,
"models": [
{
"type": "Glass Sliding Door",
"alignmentX": "Left",
"doorWidth": 2100,
"doorHeight": 2100
},
{
"type": "Roller Door",
"alignmentX": "Right",
"height": 2.3,
"width": 2.6
}
]
},
{},
{},
{
visible: true
},
{
"visible": true,
"models": [
{
"type": "Roller Door",
"alignmentX": "Right",
"height": 2.6,
"width": 2.6
}
]
},
{
"visible": true,
"models": [
{
"type": "Glass Sliding Door",
"alignmentX": "Center",
"doorWidth": 2100,
"doorHeight": 2100
}
]
}
],
"gutterRight": [
{
"visible": true
},
{
"visible": true,
"models": [
{
"type": "Roller Door",
"alignmentX": "Right",
"height": 2.6,
"width": 2.6
}
]
},
{
"visible": true,
"models": [
{
"type": "Roller Door",
"alignmentX": "Center",
"height": 2.6,
"width": 2.6
}
]
},
{
"visible": false,
"models": [
{
"type": "PADoor",
"alignmentX": "Left",
"doorWidth": 870,
"doorHeight": 2030
}
]
}
],
"gutterLeft": [
{
"visible": true,
"models": [
{
"type": "PADoor",
"alignmentX": "Left",
"doorWidth": 870,
"doorHeight": 2030
}
]
},
{
"visible": true,
"models": [
{
"type": "Roller Door",
"alignmentX": "Center",
"height": 1.5,
"width": 1.5
}
]
},
{
"visible": true,
"models": [
{
"type": "Window",
"alignmentX": "Right",
"windowWidth": 1731,
"windowHeight": 790
},
{
"type": "Window",
"alignmentX": "Left",
"windowWidth": 816,
"windowHeight": 790
}
]
},
{
"visible": false
}
],
"roofRight": [
null, {
models: [
{
type: "Skylight",
"alignmentX": "Center",
}
]
},
null,
null,
{
models: [
{
type: "Skylight",
"alignmentX": "Right",
},
{
type: "Whirlybird",
"alignmentX": "Left",
},
{
type: "Whirlybird",
"alignmentX": "Center",
}
]
}
],
"roofLeft": [
null, {
models: [
{
type: "Whirlybird",
"alignmentX": "Center",
}
]
},
null,
null,
{
models: [
{
type: "Skylight",
"alignmentX": "Right",
},
{
type: "Whirlybird",
"alignmentX": "Left",
},
{
type: "Skylight",
"alignmentX": "Center",
}
]
}
]
}
};
app.on("loaded", async function () {
console.info("Ready");
// Load a shed from a JSON file
await app.fromJson(shedToLoad);
// Read a shed from a JSON file
const data = await app.toJson();
console.info(data);
});
// Use submitted form data here or trigger conversion or intergrate with a CRM
app.on("form:submit", function (data) {
console.info("Form submitted", data);
});
// Listen to a change event.
app.on("shed:change", function (data) {
console.info("Shed updated", data);
console.info("Width: ", data.width);
console.info("Height: ", data.height);
console.info("Length: ", data.length);
});
</script>