Cargo-Planner Docs
Cargo-Planner in your Application
While our web application should get most use cases covered, it might sometimes be of interest to add load planning functionality to an existing WMS or ERP system - or perhaps your own custom built web portal. You can utilize most of the functionality by using our Rest API and JavaScript SDK.
Server side
While you do not actually need to use a server, it is a good way to use as an intermediary between Cargo-Planner and the client. If you have a way to securely publish the API token to the client (remember that storing keys in localStorage or in the code is not good practice) - you can call our API straight from the client.
# /calculate endpoint at your server located at https://api.acme.com
import requests
import json
CARGO_PLANNER_TOKEN = 'Token your-token'
def calculate(request):
response = requests.post(
url="https://api.cargo-planner.com/api/2/calculate/",
data=json.dumps(request.data),
headers={
'Content-type': 'application/json',
'Authorization': CARGO_PLANNER_TOKEN
})
if response.status_code == 200:
return response.json()
#...Client
Fetch our SDK here. The example below will call above endpoint which in turn will call our API and return a load plan / solution for your calculation data, and then show a 3D image of each container.
<meta charset="utf-8">
<title>My customer portal</title>
<script src="./cargoPlannerSDK.umd.min.js"></script>
<body>
<h1>Load plan</h1>
</body>
<script>
calculate();
async function calculate() {
// Initialize 3D engine
await cargoPlannerSDK.SceneManager.init();
// Refer to the API documentation for more options
let calculationData = {
length_dim: "M",
weight_dim: "KG",
"items": [
{
"label": "Cargo 1",
"l": 1.2,
"w": 0.8,
"h": 0.5,
"wt": 300,
"qty": 20,
"layers": 2,
"color":"#48c9b0"
},
{
"label": "Cargo 2",
"l": 1.2,
"w": 1.0,
"h": 0.9,
"wt": 300,
"qty": 20,
"layers": 2,
"color":"#ec7063"
},
],
"settings": {
"group_items": true
},
"container_types": [
{
"name": "40ft DV",
"L": 12,
"W": 2.33,
"H": 2.38,
"payload": 22000,
"door": {
H: 2.33,
W: 2.28
}
}
]
}
fetch('/calculate/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(calculationData),
})
.then(response => response.json())
.then(data => {
// If we received any solutions
if(data.solutions) {
// At the moment each calculation gives one solution (in the future we might provide more)
data.solutions.forEach((solution) => {
// Go through each container
solution.containers.forEach((container, index) => {
// Render the canvas
cargoPlannerSDK.SceneManager.createScene(
container, // container data
null, // Interactive mode (set to null when showing multiple containers)
400, // Width in pixels
200 // Height in pixels
).then((canvas) => {
const containerDiv = document.createElement("div");
const label = document.createTextNode(`Container ${index+1}: ${container.name}`)
containerDiv.appendChild(label);
containerDiv.appendChild(canvas);
document.body.appendChild(containerDiv);
});
});
});
}
});
}
</script>
The above example will generate load plan below:
