# Wondering the best way forward with this request

**URL:** <https://forum.inductiveautomation.com/t/wondering-the-best-way-forward-with-this-request/59810>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [May 19, 2022, 8:57pm UTC](https://forum.inductiveautomation.com/t/wondering-the-best-way-forward-with-this-request/59810 "2022-05-19T20:57:12Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![MikeAllgood](https://avatars.discourse-cdn.com/v4/letter/m/a183cd/32.png) [@MikeAllgood](https://forum.inductiveautomation.com/u/MikeAllgood)\
**Post date:** [May 19, 2022, 8:57pm UTC](https://forum.inductiveautomation.com/t/wondering-the-best-way-forward-with-this-request/59810/1 "2022-05-19T20:57:12Z")

</div>

I’ve been asked to create something like this,  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/0/10df6be869351030e58e5d76396a81a7c19fd2eb.png),  
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!

---

<div class="post-metadata">

**Author:** ![andrews](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@andrews](https://forum.inductiveautomation.com/u/andrews)\
**Post date:** [May 19, 2022, 9:04pm UTC](https://forum.inductiveautomation.com/t/wondering-the-best-way-forward-with-this-request/59810/2 "2022-05-19T21:04:45Z")

</div>

@victordcq is your man for this question tagging him in.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [May 19, 2022, 9:19pm UTC](https://forum.inductiveautomation.com/t/wondering-the-best-way-forward-with-this-request/59810/3 "2022-05-19T21:19:34Z")

</div>

You can create the functionality you require with the standard _Label_ component and the _Icon_ component.

![9 plus](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/b/4beac1ce15c17d9107b1fe973f73e4251686bfc4.png)

- 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**
>
> ```auto
> [
> {
> "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.path` and 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.

---

<div class="post-metadata">

**Author:** ![peter](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@peter](https://forum.inductiveautomation.com/u/peter)\
**Post date:** [May 19, 2022, 9:20pm UTC](https://forum.inductiveautomation.com/t/wondering-the-best-way-forward-with-this-request/59810/4 "2022-05-19T21:20:15Z")

</div>

I would construct the SVG in 3 parts:

1. Left hand side semi-circle
2. Connecting horizontal lines
3. Right hand side semi-circle

Then when running:

1. Estimate the number of pixels the count has
2. Use the estimation to set the right hand x location end point of the horizontal lines
3. Use #2 as the x location of the right hand semi-circle

---

<div class="post-metadata">

**Author:** ![MikeAllgood](https://avatars.discourse-cdn.com/v4/letter/m/a183cd/32.png) [@MikeAllgood](https://forum.inductiveautomation.com/u/MikeAllgood)\
**Post date:** [May 19, 2022, 9:25pm UTC](https://forum.inductiveautomation.com/t/wondering-the-best-way-forward-with-this-request/59810/5 "2022-05-19T21:25:50Z")

</div>

Sweet! That is much easier than I was making it out in my head! 🤪

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [May 19, 2022, 9:27pm UTC](https://forum.inductiveautomation.com/t/wondering-the-best-way-forward-with-this-request/59810/6 "2022-05-19T21:27:56Z")

</div>

See the update to my answer.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [May 20, 2022, 6:41am UTC](https://forum.inductiveautomation.com/t/wondering-the-best-way-forward-with-this-request/59810/7 "2022-05-20T06:41:58Z")

</div>

seems like it has been answered already:)