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.

Note: A bin can either be a circle, or a rectangle. If your bin is a rectangle, the diameter should be omitted. If your bin is a circle, the width and depth should be omitted.

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

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.

Color of the item, takes precedence over figure.itemColorList.
Options: any css named (extended) color
Example: green

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

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

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

Controls the thickness of the item edges.
Options: Between 0.1 and 10
Default: 2

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

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.

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

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...
volume The total bin volume will be minimized.

Example: /api/circlePack/visualize?responseType=encodedHtml

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.

Tip: Put the example response into an HTML renderer to see the result.

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>