Documentation

Last update: June 16, 2024

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.

Connectivity

URL	https://www.packing-optimizer.com/api/circlePack/visualize
Method	POST

Headers

Authorization	Basic-Auth API credentials as found on your Account Settings page.
Content-Type	application/json

Query string options

Optional

htmlLevel

Determines if the response will be a full HTML page or a single div element.
Default: div
Options: fullPage or div
Example: api/circlePack/visualize?htmlLevel=fullPage

responseType

Determines in what form the visualization will be shared.
Default: html
Options:

html	Response will contain HTML tags.
encodedHtml	base64 encoded data-URL containing the HTML. Example: data:text/html;base64,PGRpdj...

Example: api/circlePack/visualize?responseType=encodedHtml

includeDependencies

Controls the way that software dependencies are included in the response.
If cdn, the dependencies are included as a script tag.
If false, any relevant dependencies are not included`.
Default: cdn
Options: cdn or false
Example: api/circlePack/visualize?includeDependencies=false

Request body

Bin

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.

Field	Type	Description
bin.width	numeric	Width of the bin. Example: 1.2
bin.depth	numeric	Depth of the bin. Example: 0.80
bin.diameter	numeric	The diameter of the bin. Example: 1.5

Items

Contains the items that will be plotted inside the bin.

Field	Type	Description
items[].id	string	id to identify individual items. 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
items[].userMessage	string	Optional 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	Optional Color of the item, takes precedence over figure.itemColorList. Options: any css named (extended) color. Example: green
items[].borderColor	string	Optional Color of the item borders, takes precedence over figure.itemBorderColorList. Options: any css named (extended) color. Example: blue

Figure

Optional

Contains information about the styling of the figure.

Field	Type	Description
figure.itemColorList	string	A comma separated string of CSS named colors. Items will be colored according to the entries in this list. Default: red,black,blue,green Options: any css named color. 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. Default: red,black,blue,green Options: any css named color. Example: green,red,black,darkslateblue,sienna
figure.itemBorderThickness	numeric	Controls the thickness of the item edges. Default: 2 Options: between 0.1 and 10
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 Options: true or false
figure.showControls	boolean	If true, a small control panel will be added to the figure. Default: false Options: true or false


{
    "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
        }
    ]
}

Response body

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.


<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>