How to make an interactive image

Ignition
1

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?

2

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.
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.
1 Like
3

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

4

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.

5

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

6

Oh, haha!

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

7

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.

8

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

.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;
}
2 Likes
9

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.

10

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.

11

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.

12

Have a look at
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
Light dark toggle798×482 73 KB

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

1 Like
13

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!

14

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