We can use custom icons, icons loaded from external files, and not embedded in Blender libraries, for example, to add customization to operator call buttons in UI panels. However, it is not only buttons that may require custom icons. Using the Blender Python API, we can add customization to drop-down list items or switches that are created based on the EnumProperty type.
.blend file on Patreon
First, let’s create a class for the custom panel, on which we will later place a group switch and a drop-down list.
|
1 2 3 4 5 6 7 8 9 |
class TEST_PT_panel(bpy.types.Panel): bl_idname = 'TEST_PT_panel' bl_label = 'TEST' bl_space_type = 'VIEW_3D' bl_region_type = 'UI' bl_category = 'TEST' def draw(self, context): // UI |
Don’t forget to register it in the Blender Python API, so that our custom panel will be displayed in the 3D viewport area, in the N-panel.
|
1 |
bpy.utils.register_class(TEST_PT_panel) |
In the draw() function, we will further define the displaying of our UI elements.
But first, let’s create a list for custom icons and load several icons from external files into it.
Our “icons” list is created using the “previews” module from the bpy.utils package.
|
1 2 3 |
from bpy.utils import previews icons = previews.new() |
The new() method is used to initialize the list.
Next, let’s load three icons from external files into it. We will load each icon using the load() method, specifying the full path to its file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
icons.load( name='crown', path='d:/crown.png', path_type='IMAGE' ) icons.load( name='sword', path='d:/sword.png', path_type='IMAGE' ) icons.load( name='gem', path='d:/gem.png', path_type='IMAGE' ) |
Now, in order to create a switch and a drop-down list, we will use the “EnumProperty” to create the “test_enum” object containing three elements in the “items” tuple.
|
1 2 3 4 5 6 7 8 |
bpy.types.WindowManager.test_enum = bpy.props.EnumProperty( items=( ('CROWN', 'Crown', '', icons['crown'].icon_id, 0), ('GEM', 'Gem', '', icons['gem'].icon_id, 1), ('SWORD', 'Sword', '', icons['sword'].icon_id, 2) ), default='CROWN' ) |
Each element (a separate line in the “items” parameter) is an ordered tuple of properties. In the fourth place, we specify a link to the corresponding icon from the list we created earlier. This way we bind the icons to the list elements.
All that remains for us to do, is to register the displaying of the “test_enum” object in the draw() function of our user panel.
To make it look like a group switch, the “expand” parameter must be set to True.
|
1 2 3 |
def draw(self, context): col = self.layout.column() col.prop(context.window_manager, 'test_enum', expand=True) |
The “col” wrapper is necessary to locate radio-buttons vertically, one under the other.
And, after the separator, place the same object in the form of a drop-down list:
|
1 2 3 4 5 |
def draw(self, context): col = self.layout.column() col.prop(context.window_manager, 'test_enum', expand=True) self.layout.separator() self.layout.prop(context.window_manager, 'test_enum', text='DropDownList') |
Running the code, we will see that each radio button and drop-down list item now has its own icon loaded from an external file.