circlePackVisualize
Visualize circle packing.
The circlePackVisualize endpoint requires bin dimensions, item dimensions and item position. It is recommended to first call circlePackMetrics to retrieve all the information required for this endpoint. The response of this visualization endpoint contains the HTML to display the 2D packing visualization in your application.Just getting started?
Take a look at our quick start page.
Not sure which endpoint to use?
Take a look at our features for more information.
Establishing Connection
Connectivity
- Base url
https://www.packing-optimizer.com
- Path
/api/circlePack/visualize
- Method
POST
All API requests must be made over HTTPS.
Headers
- Authorization
Basic-Auth
- Content-Type
application/json
Your credentials can be retrieved (and reset) from your account settings.
curl --user username:password -d @input.json -H "Content-Type: application/json" https://www.packing-optimizer.com/api/circlePack/visualize
The Request
The Bin object
Contains the dimensions of the bin that will be plotted.
Mandatory attributes
bin.width numeric
Width of the bin.
Example: 1.2
bin.depth numeric
Depth of the bin.
Example: 0.8
bin.diameter numeric
The diameter of the bin.
Example: 0.2
The Item object
Contains the items that will be plotted inside the bin.
The request takes an array of item objects as input.
Mandatory attributes
items[].id string
Id to identify this individual item.
Example: ITEM001
items[].diameter numeric
The diameter of the item.
Example: 0.20
items[].xCoordinate numeric
X coordinate of the item inside the bin.
Example: 0.10
items[].yCoordinate numeric
Y coordinate of the item inside the bin.
Example: 0.10
Other attributes
items[].userMessage string
Text that will be displayed when hovering over the item.
The following formatting characters can be used:
- <br>
- Line break.
- <b>
- Bold text.
- <i>
- Cursive text.
items[].color string
Color of the item, takes precedence over figure.itemColorList.
Options: any css named (extended) color
Example: green
items[].borderColor string
Color of the item borders, takes precedence over figure.itemBorderColorList.
Options: any css named (extended) color
Example: blue
The Figure object
Additional parameters to style the figure.
Optional attributes
figure.itemColorList string
A comma separated string of CSS named colors. Items will be colored according to the entries in this list.
Options: any css named color.
Default: red,black,blue,green
Example: green,red,black,darkslateblue,sienna
figure.itemBorderColorList string
A comma separated string of CSS named colors. The edges of the items will be colored according to the entries in this list.
Options: any css named color.
Default: red,black,blue,green
Example: green,red,black,darkslateblue,sienna
figure.itemBorderThickness numeric
Controls the thickness of the item edges.
Options: Between 0.1 and 10
Default: 2
figure.highlighted boolean
If true, items with a userMessage will be highlighted. Items with a userMessage will be colored red, items without userMessage will be colored gray.
Default: false
figure.showControls boolean
If true, a small control panel will be added to the figure.
Default: false
Query String Options
Parameters which provide some control over the data being transmitted in the response, such as specifying the quantity or format of the data.
htmlLevel string
Determines if the response will be a full HTML page or a single div element.
Options: div
, fullPage
Default: div
Example: /api/circlePack/visualize?htmlLevel=fullPage
responseType string
Determines in what form the visualization will be shared.
Option | Description |
---|---|
html |
Response will contain HTML tags. |
encodedHtml |
base64 encoded data-URL containing the HTML. Example: data:text/html;base64,PGRpdj... |
json |
Returns a json representation of the figure. This also requires http header Accept:application/json . |
Example:
/api/circlePack/visualize?responseType=encodedHtml
includeDependencies string
Controls the way that software dependencies are included in the response.
Options: cdn
, false
Default: cdn
Example: /api/circlePack/visualize?htmlLevel=fullPage
Example
{
"bin": {
"diameter": 3
},
"items": [
{
"diameter": 0.9,
"id": "circleXL2",
"xCoordinate": 1.5,
"yCoordinate": 0.45
},
{
"diameter": 0.9,
"id": "circleXL1",
"xCoordinate": 2.308915,
"yCoordinate": 0.844534
},
{
"diameter": 0.4,
"id": "circleM4",
"xCoordinate": 1.630236,
"yCoordinate": 1.188606
},
{
"diameter": 0.4,
"id": "circleM3",
"xCoordinate": 1.136393,
"yCoordinate": 1.105965
},
{
"diameter": 0.4,
"id": "circleM2",
"xCoordinate": 0.8046121,
"yCoordinate": 0.7309549
},
{
"diameter": 0.4,
"id": "circleM1",
"xCoordinate": 2.695193,
"yCoordinate": 1.48741
},
{
"diameter": 0.2,
"id": "circleS3",
"xCoordinate": 1.985621,
"yCoordinate": 0.1917906
},
{
"diameter": 0.2,
"id": "circleS2",
"xCoordinate": 0.9583557,
"yCoordinate": 0.3544935
},
{
"diameter": 0.2,
"id": "circleS1",
"xCoordinate": 2.822384,
"yCoordinate": 1.041636
}
]
}
The Response
The response body contains the HTML of the bin and can be embedded into a webpage.
Example
<div>
<script type="text/javascript">
window.PlotlyConfig = {MathJaxConfig: 'local'};
</script>
<script charset="utf-8" src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
<div id="7f471379-8dd8-44cb-8e77-535cb2b7abac" class="plotly-graph-div" style="height:100%; width:100%;"></div>
<script type="text/javascript">
window.PLOTLYENV=window.PLOTLYENV || {}; if (document.getElementById("7f471379-8dd8-44cb-8e77-535cb2b7abac")) { Plotly.newPlot( "7f471379-8dd8-44cb-8e77-535cb2b7abac", [], {"shapes":[{"fillcolor":"white","layer":"below","name":"bin","type":"circle","x0":0,"x1":3,"xref":"x","y0":0,"y1":3,"yref":"y"},{"fillcolor":"grey","layer":"above","name":"item","type":"circle","x0":1.05,"x1":1.95,"xref":"x","y0":0.0,"y1":0.9,"yref":"y"},{"fillcolor":"grey","layer":"above","name":"item","type":"circle","x0":1.8589149999999999,"x1":2.758915,"xref":"x","y0":0.394534,"y1":1.294534,"yref":"y"},{"fillcolor":"grey","layer":"above","name":"item","type":"circle","x0":1.430236,"x1":1.830236,"xref":"x","y0":0.9886060000000001,"y1":1.388606,"yref":"y"},{"fillcolor":"grey","layer":"above","name":"item","type":"circle","x0":0.936393,"x1":1.336393,"xref":"x","y0":0.9059650000000001,"y1":1.305965,"yref":"y"},{"fillcolor":"grey","layer":"above","name":"item","type":"circle","x0":0.6046121,"x1":1.0046121000000001,"xref":"x","y0":0.5309549,"y1":0.9309548999999999,"yref":"y"},{"fillcolor":"grey","layer":"above","name":"item","type":"circle","x0":2.495193,"x1":2.8951930000000003,"xref":"x","y0":1.28741,"y1":1.6874099999999999,"yref":"y"},{"fillcolor":"grey","layer":"above","name":"item","type":"circle","x0":1.885621,"x1":2.085621,"xref":"x","y0":0.0917906,"y1":0.2917906,"yref":"y"},{"fillcolor":"grey","layer":"above","name":"item","type":"circle","x0":0.8583557,"x1":1.0583557000000001,"xref":"x","y0":0.25449350000000004,"y1":0.4544935,"yref":"y"},{"fillcolor":"grey","layer":"above","name":"item","type":"circle","x0":2.722384,"x1":2.922384,"xref":"x","y0":0.941636,"y1":1.141636,"yref":"y"}],"template":{"data":{"bar":[{"error_x":{"color":"#2a3f5f"},"error_y":{"color":"#2a3f5f"},"marker":{"line":{"color":"#E5ECF6","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"bar"}],"barpolar":[{"marker":{"line":{"color":"#E5ECF6","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"barpolar"}],"carpet":[{"aaxis":{"endlinecolor":"#2a3f5f","gridcolor":"white","linecolor":"white","minorgridcolor":"white","startlinecolor":"#2a3f5f"},"baxis":{"endlinecolor":"#2a3f5f","gridcolor":"white","linecolor":"white","minorgridcolor":"white","startlinecolor":"#2a3f5f"},"type":"carpet"}],"choropleth":[{"colorbar":{"outlinewidth":0,"ticks":""},"type":"choropleth"}],"contour":[{"colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"type":"contour"}],"contourcarpet":[{"colorbar":{"outlinewidth":0,"ticks":""},"type":"contourcarpet"}],"heatmap":[{"colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"type":"heatmap"}],"heatmapgl":[{"colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"type":"heatmapgl"}],"histogram":[{"marker":{"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"histogram"}],"histogram2d":[{"colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"type":"histogram2d"}],"histogram2dcontour":[{"colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"type":"histogram2dcontour"}],"mesh3d":[{"colorbar":{"outlinewidth":0,"ticks":""},"type":"mesh3d"}],"parcoords":[{"line":{"colorbar":{"outlinewidth":0,"ticks":""}},"type":"parcoords"}],"pie":[{"automargin":true,"type":"pie"}],"scatter":[{"marker":{"colorbar":{"outlinewidth":0,"ticks":""}},"type":"scatter"}],"scatter3d":[{"line":{"colorbar":{"outlinewidth":0,"ticks":""}},"marker":{"colorbar":{"outlinewidth":0,"ticks":""}},"type":"scatter3d"}],"scattercarpet":[{"marker":{"colorbar":{"outlinewidth":0,"ticks":""}},"type":"scattercarpet"}],"scattergeo":[{"marker":{"colorbar":{"outlinewidth":0,"ticks":""}},"type":"scattergeo"}],"scattergl":[{"marker":{"colorbar":{"outlinewidth":0,"ticks":""}},"type":"scattergl"}],"scattermapbox":[{"marker":{"colorbar":{"outlinewidth":0,"ticks":""}},"type":"scattermapbox"}],"scatterpolar":[{"marker":{"colorbar":{"outlinewidth":0,"ticks":""}},"type":"scatterpolar"}],"scatterpolargl":[{"marker":{"colorbar":{"outlinewidth":0,"ticks":""}},"type":"scatterpolargl"}],"scatterternary":[{"marker":{"colorbar":{"outlinewidth":0,"ticks":""}},"type":"scatterternary"}],"surface":[{"colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"type":"surface"}],"table":[{"cells":{"fill":{"color":"#EBF0F8"},"line":{"color":"white"}},"header":{"fill":{"color":"#C8D4E3"},"line":{"color":"white"}},"type":"table"}]},"layout":{"annotationdefaults":{"arrowcolor":"#2a3f5f","arrowhead":0,"arrowwidth":1},"autotypenumbers":"strict","coloraxis":{"colorbar":{"outlinewidth":0,"ticks":""}},"colorscale":{"diverging":[[0,"#8e0152"],[0.1,"#c51b7d"],[0.2,"#de77ae"],[0.3,"#f1b6da"],[0.4,"#fde0ef"],[0.5,"#f7f7f7"],[0.6,"#e6f5d0"],[0.7,"#b8e186"],[0.8,"#7fbc41"],[0.9,"#4d9221"],[1,"#276419"]],"sequential":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"sequentialminus":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]},"colorway":["#636efa","#EF553B","#00cc96","#ab63fa","#FFA15A","#19d3f3","#FF6692","#B6E880","#FF97FF","#FECB52"],"font":{"color":"#2a3f5f"},"geo":{"bgcolor":"white","lakecolor":"white","landcolor":"#E5ECF6","showlakes":true,"showland":true,"subunitcolor":"white"},"hoverlabel":{"align":"left"},"hovermode":"closest","mapbox":{"style":"light"},"paper_bgcolor":"white","plot_bgcolor":"#E5ECF6","polar":{"angularaxis":{"gridcolor":"white","linecolor":"white","ticks":""},"bgcolor":"#E5ECF6","radialaxis":{"gridcolor":"white","linecolor":"white","ticks":""}},"scene":{"xaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","gridwidth":2,"linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white"},"yaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","gridwidth":2,"linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white"},"zaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","gridwidth":2,"linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white"}},"shapedefaults":{"line":{"color":"#2a3f5f"}},"ternary":{"aaxis":{"gridcolor":"white","linecolor":"white","ticks":""},"baxis":{"gridcolor":"white","linecolor":"white","ticks":""},"bgcolor":"#E5ECF6","caxis":{"gridcolor":"white","linecolor":"white","ticks":""}},"title":{"x":0.05},"xaxis":{"automargin":true,"gridcolor":"white","linecolor":"white","ticks":"","title":{"standoff":15},"zerolinecolor":"white","zerolinewidth":2},"yaxis":{"automargin":true,"gridcolor":"white","linecolor":"white","ticks":"","title":{"standoff":15},"zerolinecolor":"white","zerolinewidth":2}}},"xaxis":{"range":[0,3]},"yaxis":{"range":[0,3],"scaleanchor":"x"}}, {"displaylogo": false, "displayModeBar": false, "responsive": true} ) };
</script>
</div>