Customised button as an SVG file

Hi guys,
I’ve designed a button in inkscape to use in vision client. And I want this to have the same properties as a momentary button. How do I go about assigning this?
Or will this only be possible if I overlap my design with a transparent momentary button and link the properties to certain components of the designed button?

Thank you

Obligatory don't use momentary buttons for control warning. See here for why.

Not exactly sure what your trying to accomplish but perhaps one of these options will work:

  • Import the SVG into ignition, and then set the Image path of a momentary push button to the path for the image you want to use.

  • You could use an image component directly, and affect a similar behavior by using the MousePressed and MouseReleased events.

What a misfortune. Definitely will put your advice into practice moving forward

In terms of what I’m trying to achieve, I got given instructions to play around with the design of the buttons of the HMI created in Ignition. Personally I like the way the current design of the default buttons look, however a task is a task.
I’ll overlap the whole design with a transparent button then connect the SVG design to the components of that button through scripting - bit of a rough way but this is quite useful, thank you for the reminder to use scripting instead of directly tagging to properties

Can you show your SVG? What is it exactly that is not liked about the default buttons?

There might be a way to play around with the L&F in swing and get close. But, it will not be a trivial amount of work or scripting.

To be honest the ‘new design’ looks exactly the same but with more rounded edges.
Theres a lot to like with the current buttons, i think they’re really easy on the eyes. But different people, different taste I guess.

Thank you for the help guys, the scripting is the way to go. however unnecessary, a task is a task!

Rounded Edges aren’t too difficult, though I’m not sure it’s really worth the effort, depending on the size of your project.

For posterities sake:

In the internalFrameActivated event of a window you can place this code (I put mine in a momentary button for ease of use, so this will not work as is in an internalFrame event, the code for getting a reference to the button will need to change.

from java.awt import Insets
from javax.swing.border import CompoundBorder


class RoundedBorder(CompoundBorder):
	def __init__(self,r):
		self.radius = r

	def getBorderInsets(self,c,i = None):
		return Insets(self.radius + 1, self.radius + 1,self.radius + 2, self.radius)	
			
	def getInsideBorder(self,c = None):
		return self
	
	def getOutsideBorder(self,c = None):
		return self
		
	def isBorderOpaque(self):
		return True

	def paintBorder(self,c,g,x,y,width,height):
		g.drawRoundRect(x,y,width-1,height-1,self.radius,self.radius)

#grab a reference to the button
btn = event.source.parent.getComponent('Momentary Button 1')

btn.setBorder(RoundedBorder(20))

Result:
image

Note, this is just an example, for effecting this change across multiple components you will undoubtedly want to loop through the components list of the root container and modify all of the buttons. You will probably also want a memory tag which holds the corner radius as opposed to hard coding it.

You should probably also move the code to a project script and execute it there as opposed to copying this code over and over.

Example For Loop:

comps = system.gui.getParentWindow(event).getRootContainer().getComponents()

for comp in comps:
	if isinstance(comp, JButton):
		comp.setBorder(RoundedBorder(20))

Finally, this does not take into account the background of the button, so if the background color is not transparent and the border radius gets too big, then you will see the still square corners of the background. You can of course write your own JButton class that handled all of this but again a whole lot of work for such a small thing.

This was written and tested in 8.1.7

3 Likes

Thank you for this!
This is perfect actually !

1 Like