I’ve been asked to create something like this,
,
where the “bubble” indicator would display the number of active items returned from a query of an eternal application. I am fairly confident that there is not an out of the box component like this in Perspective but if someone knows a of something I’m all eyes and ears!
I know I can create a graphic in Inkscape as I’ve used that for custom graphic components before. But, I’m no Inkscape expert and I’m not sure I can create an “elongating” circle in that, or any tool. If you notice the red bubble is not a circle, but rather it is circular on the ends and flat on the top and bottom to allow for the bubble to stretch to accommodate longer numeric/text values without distorting the circular component. When stretching the width changes but height would stay constant as would the radius of the ends.
Does anyone know how to create this SVG or if maybe there is already something in the Exchange? I did a quick search with no luck, mainly because I don’t even know what to search for! 
Thanks!
You can create the functionality you require with the standard Label component and the Icon component.
- Create a new coordinate view.
- In the Project Browser, select the root of your new view and paste in the code below.
Bubble Counter view
[
{
"type": "ia.container.coord",
"version": 0,
"props": {},
"meta": {
"name": "root"
},
"position": {},
"custom": {},
"children": [
{
"type": "ia.display.icon",
"version": 0,
"props": {
"path": "material/play_arrow"
},
"meta": {
"name": "Icon"
},
"position": {
"x": 24,
"y": 35,
"rotate": {
"anchor": "11% 0%"
},
"height": 30,
"width": 36
},
"custom": {}
},
{
"type": "ia.display.label",
"version": 0,
"props": {
"style": {
"borderStyle": "solid",
"borderWidth": 2,
"borderTopLeftRadius": 5,
"borderTopRightRadius": 5,
"borderBottomLeftRadius": 5,
"borderBottomRightRadius": 5
}
},
"meta": {
"name": "lblIconFrame"
},
"position": {
"x": 17,
"y": 34,
"rotate": {
"anchor": "0% 75%"
},
"height": 32,
"width": 50
},
"custom": {}
},
{
"type": "ia.display.label",
"version": 0,
"props": {
"text": "9+",
"textStyle": {
"paddingLeft": 10,
"paddingRight": 10
},
"style": {
"borderStyle": "none",
"borderTopLeftRadius": 14,
"borderTopRightRadius": 14,
"borderBottomLeftRadius": 14,
"borderBottomRightRadius": 14,
"backgroundColor": "#FC0E0E",
"textAlign": "center",
"color": "#FCFCFC"
}
},
"meta": {
"name": "lblBubbleCount"
},
"position": {
"x": 42,
"y": 9,
"height": 32,
"width": "auto"
},
"custom": {}
}
]
}
]
- The width of the bubble is set to Auto so it will expand to accommodate the text.
- Wherever you need to use this component drag in an Embedded View container, click the down arrow beside
PROPS.pathand select your Bubble Count view.
Study the properties of each of the three components to learn how you can modify the properties (PROPS) of each to do what you want.
Finally, you’ll want to update the count with a value from somewhere else.
- On your Bubble Count view select the view in the Project Browser. In the Property Editor, down at the bottom, hit Add View Parameter of type Value. Call it “count” (or whatever) and give it an initial value.
- Select the bubble and click the margin beside PROPS.text to open the Edit Binding dialog. Select Property, hit the icon over on the right and select view.params.count. Now the bubble will display whatever is passed into the view as a parameter. You can test this by editing the parameter value.
I’ll leave you to figure out how to bind the parameter on the embedded view.
3 Likes
I would construct the SVG in 3 parts:
- Left hand side semi-circle
- Connecting horizontal lines
- Right hand side semi-circle
Then when running:
- Estimate the number of pixels the count has
- Use the estimation to set the right hand x location end point of the horizontal lines
- Use #2 as the x location of the right hand semi-circle
Sweet! That is much easier than I was making it out in my head! 
See the update to my answer.
seems like it has been answered already:)