8000 mouse tracking tutorial for glade and some more changes · matplotlib/matplotlib@6a75615 · GitHub
[go: up one dir, main page]
Skip to content

Commit 6a75615

Browse files
tobias47n9eWeatherGod
tobias47n9e
authored and
WeatherGod
committed
mouse tracking tutorial for glade and some more changes
1 parent 1cc1256 commit 6a75615

File tree

4 files changed

+171
-6
lines changed

4 files changed

+171
-6
lines changed

‎doc/users/index_user_interface.rst

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,5 @@ User interface integration
99
ui_introduction.rst
1010
ui_glade.rst
1111
ui_gtk.rst
12+
ui_wxwidgets.rst
1213

‎doc/users/ui_glade.rst

Lines changed: 147 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ Glade user interface designer
55

66
Glade is a rapid-application-development program (RAD) or graphical user-interface-builder, that allows the easy creation of Gtk-applications. The user interface is stored in an XML-file (file extension: *".glade"*), which is called by the main program. The older version of Glade, 3.8.x, targets Gtk+ 2.x applications, while the newer 3.16.x, targets Gtk+ 3.x.
77

8-
.. _ui_glade_316_python3:
8+
.. _ui_glade_316_python3_basic:
99

10-
Glade 3.16 example using Python 3
11-
---------------------------------
10+
Basic Glade 3.16 example using Python 3
11+
---------------------------------------
1212
This example uses Glade 3.16.x and Python 3.x. In order to understand the code it is recommended to work through the Python-GtK3-Tutorial: http://python-gtk-3-tutorial.readthedocs.org/en/latest/.
1313

14-
The first step is to start Glade and open a new project. Drag a *GtkApplicationWindow* into the work area. In the bottom-right menu you can change the default name from *"applicationwindow1"* to *"window1"*. This is the designation that the window will have in the Python 3 code and in Glade for certain actions. In the *Signals* tab of the same menu open the *GtkWidget* tree and find the *destroy* entry. This is the widget that will allow you to connect the program with the close-button of the window. Enter the action *"on_window1_destroy"* (window1 being the name we gave this window).
14+
The first step is to start Glade and open a new project. This version of Glade will automaticall target GTK+ 3.x. The specific GTK version can be set in *File --> Properties*. To beginn the design phase drag a *GtkApplicationWindow* into the work area. In the bottom-right menu you can change the default name from *"applicationwindow1"* to *"window1"*. This is the designation that the window will have in the Python 3 code and in Glade for certain actions. In the *Signals* tab of the same menu open the *GtkWidget* tree and find the *destroy* entry. This is the widget that will allow you to connect the program with the close-button of the window. Enter the action *"on_window1_destroy"* (window1 being the name we gave this window).
1515

1616
In the next step we need to create a container to place the Matplotlib-widget. This tutorial uses a *GtkScrolledWindow*, which you can drag-and-drop on the *GtkApplicationWindow*. Now we are going to save the Glade file into directory with the name *"mpl_with_glade_316.glade"*. Note that there are many options in Glade you can additionally set like the default size of the window. These options are fairly easy to set.
1717

@@ -224,4 +224,146 @@ The finished second example is shown in **Figure 3**.
224224
:alt: Figure of the Glade interface, showing how to divide the window into 2 scrolled windows.
225225
:align: left
226226

227-
**Figure 3:** The finished program (shown here in Ubuntu 14.04).
227+
**Figure 3:** The finished program (shown here in Ubuntu 14.04).
228+
229+
230+
.. _ui_glade_316_mouse_tracking:
231+
232+
Mouse tracking using Glade 3.16
233+
-------------------------------
234+
Although the *Matplotlib-NavigationToolbar* displays the mouse position within the plot, we might wan't to display this separatly in a different part of the window. This is often done in the toolbar of a window. Adding this functionality just requires a few lines of code and some changes to the user interface in Glade.
235+
236+
In Glade we will need to change the number of rows in the *GtkBox* to 3. Then drag a *GtkStatusbar* into the bottom-most cell. By default this statusbar will have the name statusbar1, which we can keep. The finished glade-file will look like this:
237+
238+
::
239+
240+
<?xml version="1.0" encoding="UTF-8"?>
241+
<!-- Generated with glade 3.16.1 -->
242+
<interface>
243+
<requires lib="gtk+" version="3.10"/>
244+
<object class="GtkApplicationWindow" id="window1">
245+
<property name="can_focus">False</property>
246+
<property name="title" translatable="yes">Matplotlib</property>
247+
<property name="default_width">300</property>
248+
<property name="default_height">200</property>
249+
<signal name="destroy" handler="on_window1_destroy" swapped="no"/>
250+
<child>
251+
<object class="GtkBox" id="box2">
252+
<property name="visible">True</property>
253+
<property name="can_focus">False</property>
254+
<property name="orientation">vertical</property>
255+
<child>
256+
<object class="GtkScrolledWindow" id="scrolledwindow1">
257+
<property name="width_request">700</property>
258+
<property name="height_request">600</property>
259+
<property name="visible">True</property>
260+
<property name="can_focus">True</property>
261+
<property name="border_width">10</property>
262+
<property name="shadow_type">in</property>
263+
<child>
264+
<placeholder/>
265+
</child>
266+
</object>
267+
<packing>
268+
<property name="expand">False</property>
269+
<property name="fill">True</property>
270+
<property name="position">0</property>
271+
</packing>
272+
</child>
273+
<child>
274+
<object class="GtkScrolledWindow" id="scrolledwindow2">
275+
<property name="visible">True</property>
276+
<property name="can_focus">True</property>
277+
<property name="border_width">10</property>
278+
<property name="shadow_type">in</property>
279+
<child>
280+
<placeholder/>
281+
</child>
282+
</object>
283+
<packing>
284+
<property name="expand">False</property>
285+
<property name="fill">True</property>
286+
<property name="position">1</property>
287+
</packing>
288+
</child>
289+
<child>
290+
<object class="GtkStatusbar" id="statusbar1">
291+
<property name="visible">True</property>
292+
<property name="can_focus">False</property>
293+
<property name="margin_left">10</property>
294+
<property name="margin_right">10</property>
295+
<property name="margin_top">6</property>
296+
<property name="margin_bottom">6</property>
297+
<property name="orientation">vertical</property>
298+
<property name="spacing">2</property>
299+
</object>
300+
<packing>
301+
<property name="expand">False</property>
302+
<property name="fill">True</property>
303+
<property name="position">2</property>
304+
</packing>
305+
</child>
306+
</object>
307+
</child>
308+
</object>
309+
</interface>
310+
311+
In the Python-3-code we need add a line that initializes the statusbar, a function that calculates and displays the mouse position, and a line that calls that function in the main loop:
312+
313+
::
314+
315+
#!/usr/bin/env python3
316+
317+
from gi.repository import Gtk, Gio
318+
319+
from matplotlib.figure import Figure
320+
from matplotlib.axes import Subplot
321+
from numpy import arange, sin, pi
322+
from matplotlib.backends.backend_gtk3agg import FigureCanvasGTK3Agg as FigureCanvas
323+
from matplotlib.backends.backend_gtk3 import NavigationToolbar2GTK3 as NavigationToolbar
324+
325+
import sys
326+
327+
class Window1Signals:
328+
def on_window1_destroy(self, widget):
329+
Gtk.main_quit()
330+
331+
def main():
332+
builder = Gtk.Builder()
333+
builder.add_objects_from_file("mpl_with_glade_316_ntb_ct.glade", ("window1", "") )
334+
builder.connect_signals(Window1Signals())
335+
336+
window = builder.get_object("window1")
337+
338+
sw1 = builder.get_object("scrolledwindow1")
339+
sw2 = builder.get_object("scrolledwindow2")
340+
st1 = builder.get_object("statusbar1")
341+
342+
def updatecursorposition(event):
343+
if event.inaxes:
344+
x = event.xdata
345+
y = event.ydata
346+
st1.push(2, ("Coordinates: " + "x= " + str(x) + " y= " + str(y)))
347+
348+
figure = Figure(figsize=(4,3), dpi=71)
349+
axis = figure.add_subplot(111)
350+
t = arange(0.0, 3.0, 0.01)
351+
s = sin(2*pi*t)
352+
axis.plot(t,s)
353+
354+
axis.set_xlabel('time [s]')
355+
axis.set_ylabel('voltage [V]')
356+
357+
canvas = FigureCanvas(figure)
358+
sw1.add_with_viewport(canvas)
359+
360+
toolbar = NavigationToolbar(canvas, window)
361+
sw2.add_with_viewport(toolbar)
362+
363+
canvas.mpl_connect('motion_notify_event', updatecursorposition)
364+
365+
window.show_all()
366+
Gtk.main()
367+
368+
if __name__ == "__main__":
369+
main()

‎doc/users/ui_introduction.rst

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,11 @@ The following user-interface frameworks are supported (graphical builders in bra
2626
- Qt4
2727
- Qt5
2828
- Tk
29-
- Wx
29+
30+
- Wx (wxFormbuilder)
31+
32+
- Wx 2.x
33+
- Wx 3.x
3034

3135
The different frameworks offer different features and programming-language bindings. The appearance of the user interface will be, by default, similar to the style of the operating system, but can be customized.
3236

‎doc/users/ui_wxwidgets.rst

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.. _ui_wxwidgets:
2+
3+
wxWidgets
4+
=========
5+
wxWidgets is a user-interface toolkit that supports all common operating systems.
6+
7+
.. _ui_wx_mouse_tracking:
8+
9+
Mouse tracking and changing
10+
---------------------------
11+
12+
13+
14+
15+
16+
17+
18+

0 commit comments

Comments
 (0)
0