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...
json Returns a json representation of the figure. This also requires http header Accept:application/json.

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>