Custom Widget

Very often you may want to use a widget that is not supported by wxGlade.

For this, just insert a Custom Widget custom as placeholder.
You will be prompted for a class name. In the Design and Preview windows, just a placeholder will be shown.

The Properties window for an example “ImagePanel” could look like this:

Properties -> Common:

Property “Class” is the name of the class that will be instantiated.
In this example: ImagePanel
CustomWidgetPropertiesCommon
Properties -> Widget:

The arguments for instantiation of the class.
Usually you will at least enter $parent here.
CustomWidgetProperties
Properties -> Code:

Enter the import statement here, if required.

For our example, import ImagePanel could be used,
but then the “Class” property must be fully qualified:
ImagePanel.ImagePanel
CustomWidgetPropertiesCode

The generated code for this example will look like this:

Import statement at the head of the file:

# begin wxGlade: extracode
from ImagePanel import ImagePanel
# end wxGlade

Instantiation of the class:

self.panel_image_left = ImagePanel(self.main_panel, wx.ID_ANY)

The Arguments $parent and $id were replaced with the required code. There are two more magic arguments: $width and $height.

Example: matplotlib canvas

The above example was rather simple to implement as the class ImagePanel was implemented such that no extra arguments or code were required. It was just called with the parent window and the default ID as arguments.
Sometimes, the widget to be used needs some things to be set up before it can be created.
E.g. if you want to use the matplotlib FigureCanvas, this needs a Figure instance to be created and supplied as argument.

This code creates a canvas and plots a sine function:

 import matplotlib
 from matplotlib.figure import Figure
 from matplotlib.backends.backend_wxagg import FigureCanvasWxAgg as FigureCanvas

 # create the figure with a single plot and create a canvas with the figure
 figure = self.matplotlib_figure = Figure()
 self.matplotlib_axes = figure.add_subplot(111)  # 1x1 grid, first subplot
 self.matplotlib_canvas = FigureCanvas(self.panel_1, wx.ID_ANY, figure)

# draw a sine function
import numpy
x = numpy.arange(0,10,0.1)
y = numpy.sin(x)
self.matplotlib_axes.plot(x, y)
# show the plot
self.matplotlib_canvas.draw()

This example shows how to use the wxGlade Custom Widget custom to include a matplotlib canvas in your application:

Properties -> Common:

The class FigureCanvas will be instantiated.
Class name
Properties -> Widget:

The class will be instantiated with the arguments $parent, $id and figure.
The argument figure is non-standard. It will be defined in Properties -> Code.
Class instantiation arguments
Properties -> Code:

The import statement will make the required classes and modules available on module level.

Right before class instantiation, a Figure instance with a single subplot will be created.
extra import and setup code
Result:

The Python file has a very basic function plotter in it’s event handler for the “Plot” button.
the running application
The files can be found in the folder wxglade/examples/matplotlib:

To run the example, you need to have numpy and matplotlib installed, of course.

The above approach is OK for a quick & dirty prototype. The advantage is that all code is contained within wxGlade and therefore you may just copy it from one project or window to another.

Once things get more complex, it’s better to implement a custom class which does not require such extra code. The resulting code will be cleaner and also easier to maintain and extend.