Icon beside each item in popup menu

rmdalisay · May 13, 2016, 5:17am

Hi!
I was wondering if it is possible to add icons on the left side of each item in the popup menu.
And how am I going to do this.

Thank you very much!

pturmel · May 13, 2016, 12:08pm

You can do it by creating your popup menu with the underlying java classes instead of system.gui.createPopupMenu(). If you look at JMenuItem, you’ll see it has a constructor that takes an icon and a string. You can use this code to get you started:

def showPopup(event):
	if not event.popupTrigger:
		return
	from javax.swing import JPopupMenu, JMenuItem
	menu = JPopupMenu()
	x = JMenuItem("Show Tag Tree")
	def showTagTreeAction(event, comp=event.source.parent.getComponent("TagTree")):
		comp.visible = True
	x.addActionListener(showTagTreeAction)
	menu.insert(x, TagTreeIdx)
	menu.show(event.source, event.x, event.y)

Note that the show() method for a manually constructed JPopupMenu is different.

rmdalisay · May 16, 2016, 1:47am

Hi!
Thank you for the reply. I was able to create a sample menu. However, I cannot create the menu with the icon. From the constructor, it says I can use JMenuItem(String text, Icon icon). I don’t know which property or component am I suppose to use for the icon. So I tried the following:

Created an image and use its image path

icon = event.source.parent.getComponent('Image').path x = JMenuItem("test", icon)

Use the image component itself

icon = event.source.parent.getComponent('Image').path x = JMenuItem(test, icon)

The error says the javax.swing.Icon has to be an integer. Sorry, I am new to scripting and I am clueless on how to represent icon into an integer type.

Thank you again!

pturmel · May 16, 2016, 3:40am

The constructor I pointed out links to http://docs.oracle.com/javase/8/docs/api/javax/swing/Icon.html. Which shows the classes that implement Icon, including ImageIcon and various parts of MetalIconFactory. The latter includes many methods to get common UI icons. IIUC, Ignition doesn’t actually use Metal, so if you want them, you’ll have to dig around in Ignition’s chosen look-and-feel classes.
But ImageIcon() should create usable icons for you from local files or raw bytes.

rmdalisay · May 16, 2016, 5:15am

Hi! Thank you! I am able to do it now.
Thanks for your help.

juang · April 26, 2019, 5:16am

@pturmel I Need help with this set up that you recommended a while ago. i literally have no idea on how to do the java part on this jmenu, I opened a new topic also , but got no answers there, maybe you can guide me.

My goal is the following. I have a table with two columns in my db.
Table (Color,Name)

the idea is to create a JMenuItem with that information that will come from a query in my db.
i have use the following code that i found around in the forum (in a topic you also answered) in a Power Table where the menu works already but have not tried to put icon. I know this script won’t work with a JMenuItem, but it is just to show what i’m looking for.

def myScript(event,mybit):
	self.myscript(mybit)

query = "select  Color,  Customername from customers"
result = system.db.runQuery(query)
if len(result)>0:
	names = []
	functions=[]
	for row in result:
		print result
		id = row["Customername"]
		names.append("Customer: "+ str(id))
		functions.append(myScript)
	menu = system.gui.createPopupMenu(names, functions)
	menu.show(event)

but how can use something like that when creating my own JMenuItem? and also how can i add the ImageIcon to it.

I know it might be to much to ask for this explanation. and yes I’m also taking a couple Java Courses to get the hang on this language completely, but it would really help if i can get this code to run correctly with your help faster. the goal is to create a JMenuIItem with a Icon+String. Icon will be a square with background color that will be the one selected in the query.

that would be part 1. to create the menu, then once the user click on a selection of color and name, i will need to then use the selection to (UPDATE DB WITH THE SELECTED COLOR)

so any thought?

I Want something like that below

Ryan_Shaw · February 20, 2023, 8:11pm

I'm trying to use ImageIcon() to reference an icon from the built-in Ignition library, i.e. my script is calling

ImageIcon('Builtin/icons/16/about.png')

I can't seem to get a URL to work or a local system file to work either, the result is the list has an empty space next to the text:

Here's a full reference to my code:

from javax.swing import JPopupMenu, JMenuItem, ImageIcon
from java.awt import Insets

# Create menu
menu = JPopupMenu()
itemMargins = Insets(15, 15, 15, 15) # top, left, bottom, right

# Create first item in menu
item1_text = "Show component"
item1_icon = ImageIcon('C:\TestImage\1078454')
item1 = JMenuItem(item1_text, item1_icon)
item1.setMargin(itemMargins)
def item1_action(event, comp=event.source.parent.getComponent("Tag Browse Tree")):
	comp.visible = True
item1.addActionListener(item1_action)
menu.insert(item1, 0)

# Create second item in menu
item2_text = "Hide component"
item2_icon = ImageIcon('Builtin/icons/16/about.png')
item2 = JMenuItem(item2_text, item2_icon)
item2.setMargin(itemMargins)
def item2_action(event, comp=event.source.parent.getComponent("Tag Browse Tree")):
	comp.visible = False
item2.addActionListener(item2_action)
menu.insert(item2, 1)

# Show menu on left click
menu.show(event.source, event.x, event.y)

Does anyone know why my images aren't loading?

pturmel · February 20, 2023, 8:22pm

Try doubling your backslashes. Be sure such files are on every machine that will be running Vision.

Ryan_Shaw · February 20, 2023, 8:32pm

Hi pturmel.

Thank you for the reply! I tried doubling the backslashes for the local image and the forward slashes for the Ignition library image, and I also created the local image at the path on my local machine and the machine that's running the Ignition gateway, but it still shows blank spaces where the icons should be.

Me using local images was just trying to find a way that would make it work and give me something to start with. My end goal is to use the built-in Ignition library images.

PGriffith · February 20, 2023, 9:25pm

If you want to use an image from image management, use a PathIcon instead of a raw ImageIcon:
https://files.inductiveautomation.com/sdk/javadoc/ignition81/8.1.25/com/inductiveautomation/ignition/client/images/PathIcon.html

Ryan_Shaw · February 20, 2023, 9:40pm

Hi PGriffith!

Your suggestion worked like a charm, thank you! For anyone else trying to do this, here is my code with the built-in Ignition images rendering correctly:

from javax.swing import JPopupMenu, JMenuItem
from com.inductiveautomation.ignition.client.images import PathIcon
from java.awt import Insets

# Create menu
menu = JPopupMenu()
itemMargins = Insets(15, 15, 15, 15) # top, left, bottom, right

# Create first item in menu
item1_text = "Show component"
item1_icon = PathIcon(event.source, 'Builtin/icons/16/about.png', 16, 16)
item1 = JMenuItem(item1_text, item1_icon)
item1.setMargin(itemMargins)
def item1_action(event, comp=event.source.parent.getComponent("Tag Browse Tree")):
	comp.visible = True
item1.addActionListener(item1_action)
menu.insert(item1, 0)

# Create second item in menu
item2_text = "Hide component"
item2_icon = PathIcon(event.source, 'Builtin/icons/16/about.png', 16, 16)
item2 = JMenuItem(item2_text, item2_icon)
item2.setMargin(itemMargins)
def item2_action(event, comp=event.source.parent.getComponent("Tag Browse Tree")):
	comp.visible = False
item2.addActionListener(item2_action)
menu.insert(item2, 1)

# Show menu on left click
menu.show(event.source, event.x, event.y)

john.eichler · July 12, 2023, 11:50pm

Thanks very much to all on this thread. You have saved me hours of work! Cheers