# How to make the circle icon as in image in perspective

**URL:** <https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [April 5, 2023, 9:27am UTC](https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079 "2023-04-05T09:27:32Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chowmya\_C](https://avatars.discourse-cdn.com/v4/letter/c/d78d45/32.png) [@Chowmya\_C](https://forum.inductiveautomation.com/u/Chowmya_C)\
**Post date:** [April 5, 2023, 9:27am UTC](https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079/1 "2023-04-05T09:27:32Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/4/e4d47cf9b0e8092f483b13ec2060d26540ec51fe.png)

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [April 5, 2023, 10:41am UTC](https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079/2 "2023-04-05T10:41:21Z")

</div>

What do you mean as an image?  
You could recreate it using just a label component by setting the border radiuses to 50% and adding a border and background colour

---

<div class="post-metadata">

**Author:** ![Chowmya\_C](https://avatars.discourse-cdn.com/v4/letter/c/d78d45/32.png) [@Chowmya\_C](https://forum.inductiveautomation.com/u/Chowmya_C)\
**Post date:** [April 6, 2023, 6:05am UTC](https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079/3 "2023-04-06T06:05:53Z")

</div>

As I shared an image above , the same double circle and the text fail, should appear in flex container and if I make label there with border radiuses to 50% and then it is like this 👇  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/4/b40c2e9acf1407eaa63ae889f9ee911e2986ac2d.png)

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [April 6, 2023, 6:22am UTC](https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079/4 "2023-04-06T06:22:14Z")

</div>

The bounds need to be square. Easiest way might be to put it in a row flex and set the circle's basis (width) to the row flex's basis (height)

---

<div class="post-metadata">

**Author:** ![andrew.budaiev](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/andrew.budaiev/32/72921_2.png) [@andrew.budaiev](https://forum.inductiveautomation.com/u/andrew.budaiev)\
**Post date:** [April 6, 2023, 6:42am UTC](https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079/5 "2023-04-06T06:42:38Z")

</div>

I've pasted json of 2 labels if it helps.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/f/1fa92a19db0248824cacdb75656e443c3fcf0f81.png)

```auto
[
  {
    "type": "ia.display.label",
    "version": 0,
    "props": {
      "textStyle": {
        "textAlign": "center"
      },
      "style": {
        "border-radius": "50%",
        "background-color": "brown",
        "key": "value"
      }
    },
    "meta": {
      "name": "Label_0"
    },
    "position": {
      "x": 626.04,
      "y": 341.92,
      "height": 75,
      "width": 75
    },
    "custom": {}
  }
]

```

```auto
[
  {
    "type": "ia.display.label",
    "version": 0,
    "props": {
      "text": "Fail",
      "textStyle": {
        "textAlign": "center"
      },
      "style": {
        "border-radius": "50%",
        "background-color": "red",
        "key": "value"
      }
    },
    "meta": {
      "name": "Label"
    },
    "position": {
      "x": 639.04,
      "y": 354.92,
      "height": 50,
      "width": 50
    },
    "custom": {}
  }
]

```

Edit:  
and as Nick said you need to

> [@nminchin](#):
>
> put it in a row flex and set the circle's basis (width) to the row flex's basis (height)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/5/35da9627d122adbe7b73450c0ce21d0594320a44.png)

---

<div class="post-metadata">

**Author:** ![Chowmya\_C](https://avatars.discourse-cdn.com/v4/letter/c/d78d45/32.png) [@Chowmya\_C](https://forum.inductiveautomation.com/u/Chowmya_C)\
**Post date:** [April 11, 2023, 6:44am UTC](https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079/6 "2023-04-11T06:44:07Z")

</div>

How and in which field can I make scripting in perspective for above mentioned circle. @nminchin @andrew.budaiev

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [April 11, 2023, 7:03am UTC](https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079/7 "2023-04-11T07:03:51Z")

</div>

I'm not exactly sure what you mean, but Andrew's JSON can simply be copied and pasted into your Flex container in the Designer to add this into your container. Make sure you have your flex container "deep selected" (right click on it, "deep select")

---

<div class="post-metadata">

**Author:** ![Chowmya\_C](https://avatars.discourse-cdn.com/v4/letter/c/d78d45/32.png) [@Chowmya\_C](https://forum.inductiveautomation.com/u/Chowmya_C)\
**Post date:** [April 11, 2023, 8:14am UTC](https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079/8 "2023-04-11T08:14:26Z")

</div>

Is this possible only with image or can we do scripting? @nminchin @andrew.budaiev

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [April 11, 2023, 8:34am UTC](https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079/9 "2023-04-11T08:34:25Z")

</div>

Can you do what via scripting exactly? Create a label with a circle background and border and place it on the page? You'll have to be more specific as I don't understand what you're trying to do. What is your end goal?

---

<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:** [April 11, 2023, 8:55am UTC](https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079/10 "2023-04-11T08:55:15Z")

</div>

> [@Chowmya\_C](#):
>
> Is this possible only with image or can we do scripting?

The samples show are **not** images. They are **labels**. No scripting is needed.  
The labels are made to look like circles with the style properties below.

```auto
      "style": {
        "border-radius": "50%",

```

---

<div class="post-metadata">

**Author:** ![Chowmya\_C](https://avatars.discourse-cdn.com/v4/letter/c/d78d45/32.png) [@Chowmya\_C](https://forum.inductiveautomation.com/u/Chowmya_C)\
**Post date:** [April 11, 2023, 8:57am UTC](https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079/11 "2023-04-11T08:57:46Z")

</div>

To view in both PC and mobile, I'm trying to align the circle to resize in both views and also to make below background color in red and above in black background color same as in picture below...  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/d/3d6a70800a87c0f524d21a4d0f4b8031775f820d.png)

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [April 11, 2023, 9:12am UTC](https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079/12 "2023-04-11T09:12:26Z")

</div>

Something like this? The only issue is that the red circle itself won't change size...

[Red Circle.zip](https://forum.inductiveautomation.com/uploads/short-url/eMQtZPNq7leKn7o9595n9C9EjGK.zip) (5.7 KB)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/e/4ee1c3765a731e658d18b8871498fb66827c01a9.png)

I'm scratching my head at to how to make it resize and maintain its square (or circle) ratio  
@victordcq or @cmallonee maybe?

---

<div class="post-metadata">

**Author:** ![Chowmya\_C](https://avatars.discourse-cdn.com/v4/letter/c/d78d45/32.png) [@Chowmya\_C](https://forum.inductiveautomation.com/u/Chowmya_C)\
**Post date:** [April 11, 2023, 9:25am UTC](https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079/13 "2023-04-11T09:25:37Z")

</div>

Yeah, like this it should be but how about the background color, how can I change to double color as mentioned earlier.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [April 11, 2023, 9:49am UTC](https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079/14 "2023-04-11T09:49:32Z")

</div>

There's no GUI support for this in the Designer.

Use this website, or similar, to create gradients:

> **[CSS Gradient — Generator, Maker, and Background](https://cssgradient.io/)**
>
> As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.

Set it to the `props.style.background` property value.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/4/8441ee6c765c165ffb67982bfba400a8cca30be8.png)

[Red Circle.zip](https://forum.inductiveautomation.com/uploads/short-url/iUZl9ueD5DcSVO4oZi1vJI9rrpS.zip) (5.5 KB)

---

<div class="post-metadata">

**Author:** ![Chowmya\_C](https://avatars.discourse-cdn.com/v4/letter/c/d78d45/32.png) [@Chowmya\_C](https://forum.inductiveautomation.com/u/Chowmya_C)\
**Post date:** [April 11, 2023, 9:53am UTC](https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079/15 "2023-04-11T09:53:59Z")

</div>

Thanks a lot, Mr.Nick 🙂

---

<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:** [April 11, 2023, 9:55am UTC](https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079/16 "2023-04-11T09:55:17Z")

</div>

set the label basis to auto  
and add style aspect-ratio:1/1

this does not seem to work in the designer but does in the browser

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/1/818cfaed40e17b3cd2b012c4b863d6529fdd1eb8.png)

```auto
[
  {
    "type": "ia.display.label",
    "version": 0,
    "props": {
      "text": "Fail",
      "style": {
        "backgroundColor": "#D14545",
        "borderBottomLeftRadius": "50%",
        "borderBottomRightRadius": "50%",
        "borderColor": "#BB3838",
        "borderStyle": "solid",
        "borderTopLeftRadius": "50%",
        "borderTopRightRadius": "50%",
        "borderWidth": 10,
        "color": "#fff",
        "textAlign": "center",
        "aspect-ratio": "1/1"
      }
    },
    "meta": {
      "name": "Label"
    },
    "position": {
      "shrink": 0
    },
    "custom": {}
  }
]

```

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [April 11, 2023, 9:58am UTC](https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079/17 "2023-04-11T09:58:49Z")

</div>

Wow, I didn't know about aspect-ratio. This makes me both happy and sad at the same time. Thanks!

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [April 11, 2023, 9:59am UTC](https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079/18 "2023-04-11T09:59:41Z")

</div>

Note that you can also use containers instead of labels, which might be more flexible / easiest to work with in some situations:

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/8/081eab56ee05af21eb4398aea4ae1bf56840c34d.png)

Outer circle:

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/2/42b2d10d9e6e36778be87f07e7885a763a9b8e08.png)

The width property is bound to the basis, adjust this to change the overall size.

Inner circle:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/c/9c8cb5888e503aafc4bf64688b3c4b4810882f8c.png)

Adjust the margin to adjust the thickness of the outer circle,  
`justify` and `alignItems` are set to centered so the label is in the middle.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/0/301e6d3a324bc5ffb0d25df16a46120caee123ab.png)

Edit:  
Actually @victordcq is right, using borders is much simpler than having 2 divs...

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/9/29218c3fb74487ad03cc4d35f02b005a4eca3944.png)

Not using the `aspect-ratio` property, as I don't like things that don't work in the designer (it always leads to headaches)

---

<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:** [April 11, 2023, 10:03am UTC](https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079/19 "2023-04-11T10:03:40Z")

</div>

Its not perfect though, depending if its the height or width that is the limiting factor it behaves differently  
If you know which one it will always be you can do some more finetuning in a coordinate containter (`width:100% height:unset` or `width:unset height:100%` together with aspect ratio), but if you dont know, it gets a lot harder.

but always worth a try to see if it helps.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [April 11, 2023, 10:08am UTC](https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079/20 "2023-04-11T10:08:41Z")

</div>

I set the aspect-ratio on both the flex container and the circle label itself, and it seems to work at all resolutions 🙂 very cool!

[Red Circle v2 Aspect Ratio.zip](https://forum.inductiveautomation.com/uploads/short-url/8lucxaDmiMPJpUFWlozBKyvHg79.zip) (5.2 KB)

[Next page](https://forum.inductiveautomation.com/t/how-to-make-the-circle-icon-as-in-image-in-perspective/72079.md?page=2)