# How to make an interactive image

**URL:** <https://forum.inductiveautomation.com/t/how-to-make-an-interactive-image/80498>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [October 15, 2023, 2:36am UTC](https://forum.inductiveautomation.com/t/how-to-make-an-interactive-image/80498 "2023-10-15T02:36:37Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![mdemaris](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mdemaris/32/54639_2.png) [@mdemaris](https://forum.inductiveautomation.com/u/mdemaris)\
**Post date:** [October 15, 2023, 2:36am UTC](https://forum.inductiveautomation.com/t/how-to-make-an-interactive-image/80498/1 "2023-10-15T02:36:37Z")

</div>

Is it possible, to take an image and create areas within the image that a user can hover or click on to view a machine, or conveyor?

What tools would I use to accomplish this with?

---

<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:** [October 15, 2023, 7:30am UTC](https://forum.inductiveautomation.com/t/how-to-make-an-interactive-image/80498/2 "2023-10-15T07:30:02Z")

</div>

The simplest way would be to place transparent buttons over the image.

You can stack components on the coordinate view or coordinate container component (if you want to use that in a flex view) so they're the easiest to work with. Alteratively you can use a view container component but it's a bit more work as you need to create views for each of the components to be embedded. I'll assume you're going with coordinate view.

- Drop an image component onto the view.  
Tools | Image Management and upload your background image.  
Right-click on it and Copy Path.
- On the image set `props.source : /system/images/<paste path here>`.
- Place a button component on the image.  
Resize to suit.  
Set the following properties.

```auto
text : <-- no text 
style.backgroundColor : #ffffff00 <-- transparent white (or any other color).
style.borderStyle : none
style.outlineStyle : none <-- eliminates on-focus border
style.box-shadow : none <-- eliminates the hover shadow

```

- Right-click on the button (if you can find it anymore!) and select Configure Events. Use the onActionPerformed ...

It may be helpful in debugging to have a toggle to make the buttons visible.

- In Project Browser select root of the view.
- In Perpsective Property Editor create `custom.buttonVisibility : true`.
- On the first button create an expression binding on the `style.borderStyle` property. Use expression,  
`if({parent.custom.buttonVisibility}, "solid", "none")`
- Use right-click, Copy Binding to copy this to all the other buttons.
- Remember to set `custom.buttonVisibility : false` before putting your project into production.

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [October 15, 2023, 2:16pm UTC](https://forum.inductiveautomation.com/t/how-to-make-an-interactive-image/80498/3 "2023-10-15T14:16:19Z")

</div>

I would use SVGs as they scale the best and allow animation. But, they still don't allow you to click on specific areas. @victordcq does have a module that allows for this and when Perspective drawing tools are released (whenever that is) they are reportedly going to support this. Or, do as suggested above and stack components.

When you use an SVG, embed vs save and link (Image Management).

---

<div class="post-metadata">

**Author:** ![mdemaris](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mdemaris/32/54639_2.png) [@mdemaris](https://forum.inductiveautomation.com/u/mdemaris)\
**Post date:** [October 16, 2023, 10:03pm UTC](https://forum.inductiveautomation.com/t/how-to-make-an-interactive-image/80498/4 "2023-10-16T22:03:44Z")

</div>

I don't think this will work. When the buttons are not visible, they are not clickable, neither in browser nor the designer preview.

However, using the transparent background with a small border makes it obvious enough to the user that it is clickable but does not interfere with the image.

---

<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:** [October 16, 2023, 10:11pm UTC](https://forum.inductiveautomation.com/t/how-to-make-an-interactive-image/80498/5 "2023-10-16T22:11:31Z")

</div>

> [@mdemaris](#):
>
> When the buttons are not visible, they are not clickable

My proposal doesn't touch the `meta.visible` property. It's left as `meta.visible : true`.  
The buttons should still be clickable.

---

<div class="post-metadata">

**Author:** ![mdemaris](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mdemaris/32/54639_2.png) [@mdemaris](https://forum.inductiveautomation.com/u/mdemaris)\
**Post date:** [October 16, 2023, 10:15pm UTC](https://forum.inductiveautomation.com/t/how-to-make-an-interactive-image/80498/6 "2023-10-16T22:15:13Z")

</div>

Oh, haha!

My brain interpreted "visibility" as connected to the `meta.visible`. Oops

---

<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:** [October 16, 2023, 10:19pm UTC](https://forum.inductiveautomation.com/t/how-to-make-an-interactive-image/80498/7 "2023-10-16T22:19:05Z")

</div>

That's OK.  
I'm wondering if you can use a hover style to reveal the shadow? It might be good visual feedback.

Create a style class, hit the + button and add an Element State rule of type `hover`. I don't see how you can set the shadow there but you should be able to find something suitable. Apply the class to the buttons.

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [October 16, 2023, 10:21pm UTC](https://forum.inductiveautomation.com/t/how-to-make-an-interactive-image/80498/8 "2023-10-16T22:21:41Z")

</div>

Here's a device hover example you can add to the stylesheet and use.

```auto
.psc-device-hover:hover {
	background-image: ; z-index:1 ;;
	color: var(--neutral-100);
	background-color: var(--neutral-30);
	opacity: 0.5;
	border-color: var(--neutral-100);
	border-style: solid;
	border-width: 2px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

```

---

<div class="post-metadata">

**Author:** ![mdemaris](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mdemaris/32/54639_2.png) [@mdemaris](https://forum.inductiveautomation.com/u/mdemaris)\
**Post date:** [October 16, 2023, 11:00pm UTC](https://forum.inductiveautomation.com/t/how-to-make-an-interactive-image/80498/9 "2023-10-16T23:00:20Z")

</div>

> [@jlandwerlen](#):
>
> ```auto
> {
> background-image: ; z-index:1 ;;
> color: var(--neutral-100);
> background-color: var(--neutral-30);
> opacity: 0.5;
> border-color: var(--neutral-100);
> border-style: solid;
> border-width: 2px;
> border-top-left-radius: 5px;
> border-top-right-radius: 5px;
> border-bottom-left-radius: 5px;
> border-bottom-right-radius: 5px;
> }
> 
> ```

Is it possible to copy and paste the JSON or edit the JSON of the style class after it's been created?

I'm not finding the `color` attribute in the dialog box, and am not sure what it applies to (Edit: I'm _assuming_ text color.) As well as the separators in the `background-image` attribute.

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [October 16, 2023, 11:05pm UTC](https://forum.inductiveautomation.com/t/how-to-make-an-interactive-image/80498/10 "2023-10-16T23:05:55Z")

</div>

This is CSS and you would paste directly into the stylesheet, so unsure what dialog box you are referring to.

Now that you mention it, I'm not sure why I have `'color', that's usually for text. I'll need to revisit and update or add comments so I remember. The z index was to help for components that may overlap and this would make the hover always on top.

> [@New Stylesheet resource](https://forum.inductiveautomation.com/t/new-stylesheet-resource/64787):
>
> Starting with the 10/4/2022 Nightly (8.1.22) build, users will be able to modify a new styling resource: stylesheet.css This new resource is considered an advanced feature and will not be in place by default. To place the resource, expand the Perspective node of the Project Browser, right-click the Styles node, and select "Enable Advanced Stylesheet". [EnableStylesheet] Once in place, the stylesheet allows for inserting CSS just as you would in any normal CSS file. The rules defined in this r…

---

<div class="post-metadata">

**Author:** ![mdemaris](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mdemaris/32/54639_2.png) [@mdemaris](https://forum.inductiveautomation.com/u/mdemaris)\
**Post date:** [October 17, 2023, 12:02am UTC](https://forum.inductiveautomation.com/t/how-to-make-an-interactive-image/80498/11 "2023-10-17T00:02:05Z")

</div>

Well, now, ain't that something! CSS stylesheet directly in Ignition! So, next question to you both:  
Style classes or stylesheet: performance and inheritance?

Edit: ahem, after reading the post... I should learn a bit of CSS. But, do I reference the CSS class the same way as a style class?

OK, I got it! Had to read down a little to find the implementation.

---

<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:** [October 17, 2023, 6:19am UTC](https://forum.inductiveautomation.com/t/how-to-make-an-interactive-image/80498/12 "2023-10-17T06:19:00Z")

</div>

Have a look at  
[https://docs.inductiveautomation.com/display/DOC81/Perspective+Built-In+Themes](https://docs.inductiveautomation.com/display/DOC81/Perspective+Built-In+Themes)

If you can stick to the built-in themes initially you can very easily allow your users to toggle between light and dark mode with, for example, a radio group.

 ![Light dark toggle](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/2/123adbdb6ff7fef3ff7b4c0f8d493875f521c83e.png)

Try to use styles to ensure consistent look and feel throughout your applications.

---

<div class="post-metadata">

**Author:** ![mdemaris](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mdemaris/32/54639_2.png) [@mdemaris](https://forum.inductiveautomation.com/u/mdemaris)\
**Post date:** [October 17, 2023, 5:26pm UTC](https://forum.inductiveautomation.com/t/how-to-make-an-interactive-image/80498/13 "2023-10-17T17:26:07Z")

</div>

Yeah, I'm proving out the container layouts and functionality before attempting to style too much yet. So far, I've kept a basic default style for the most part.

As we integrate more features into our application, I am thinking of keeping the style the same throughout, with a couple of simple indicators that make it obvious which group of screens a user is in. Still mulling it over tbh. I'm learning everything from SQL Server/DB config to Ignition to webpage design all at the same time!

---

<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:** [October 17, 2023, 5:45pm UTC](https://forum.inductiveautomation.com/t/how-to-make-an-interactive-image/80498/14 "2023-10-17T17:45:48Z")

</div>

Have a look at this question and my answers regarding high-performance HMIs:

> [@Changing the Color of a TabStrip Selected Tab Based on the State of a Tag/Multi-state Indicator](https://forum.inductiveautomation.com/t/changing-the-color-of-a-tabstrip-selected-tab-based-on-the-state-of-a-tag-multi-state-indicator/80235/):
>
> I have a tab strip that I am using to navigate between containers on a page: Is there a way to change the background of a selected tab depending on an indicator? For example, the component labeled "Servo Status" has that indicator on it that says "Servo OK". I want to be able to do something to where if that tag, or the state of the indicator, isn't equal to one, the background color of the Servos tab on the tabStrip will change to red. How can I do this?