Circle with button hover animation

Ignition
1

Hello,

I have a template representing a motor.
Basically, it's a circle with a "M" inside.
The fill colour of the circle is animated using styles.
On click of the circle, it opens a popup windows with motor details.
All this is working correctly.
Now, I would like to add a hover effect on the circle as if it was a button so the user now it is clickable.
I have no idea how to do it properly. I have tried playing with the mouseEntered/Exited events but without result.

I have also tried to use a button and change the back colour but a button cannot be made round.

This is purely cosmetic but I really would like to have that.

Somebody can help me?

Best regards.

2

edit: Missed the vision tag... Below is answer for perspective.

Use an Element State style class:
https://docs.inductiveautomation.com/display/DOC81/Style+Classes#StyleClasses-ElementStatesonStyleClasses

3

You should be able to set the cursor for the circle shape to the hand/finger pointer. Translate the following to jython:

Those are for Perspective. This is a Vision topic.

1 Like
4

I have a tutorial on how to do this sort of thing in Vision here:

5

To just change the pointer to cue the user that the object is clickable, the linked solution is way overkill.

1 Like
6

I guess I misunderstood the question.

7

Perhaps something like this then?

from java.awt import Cursor
event.source.setCursorCode(Cursor.HAND_CURSOR)

#pick your cursor code
Parsed out of this also way overkill solution. lol

8

I wasn't clear enough with my demand:
What I would like ideally is to have the circle animate as if it was a button (colour darker on mouse hover).
The mouse cursor change is indeed a solution to signal the user that there is a button here but it's not in line with the behaviour of the standard button.

9

Why didn't the mouseEntered and mouseExited event handlers work?

In those events use code similar to this to change the color:

from java.awt import Color
event.source.setFillPaint(Color.DARK_GRAY)

or to specify an exact color in the RGBA space

from java.awt import Color
event.source.setFillPaint(Color(250,200,185,255))

You can also use the Color.darker() and Color.brighter() functions in conjunction with the .getFillPaint() method.

Here is the documentation for PathBasedVisionShapes
https://files.inductiveautomation.com/sdk/javadoc/ignition81/8.1.27/com/inductiveautomation/vision/api/client/components/shapes/PathBasedVisionShape.html

5 Likes
10

This solution works. I wasn't able to do it properly myself previously. But it does work.

This is obviously not exactly the same render as a regular button, but it's enough!

Thanks!

11

UPDATE: I slightly changed the solution. Now, I use another circle, default invisible, no border, backcolor set to 240,240,240,84 and I display it on mouse enter and hide in on mouse exit. This feel more similar to a regular button.

1 Like