User Tools

Site Tools


k14:k14.2:k14.2.3:start

14.2.3 Mouse Wheel - MouseWheel

Many PC mice have a mouse wheel in addition to the left and right mouse buttons. This mouse wheel can be turned forwards or backwards. It is also possible to press the mouse wheel, so that the mouse wheel acts as (middle) mouse button. The mouse wheel is used in many applications to scroll through the contents of scrollable components or to trigger a zoom function for a specific component.

In Gambas, the 'Control_MouseWheel()' event exists for selected components. This event is triggered when the mouse wheel is moved or pressed while the mouse cursor is over the component. The event returns the value Mouse. delta of type Float. The value is +1 if the mouse wheel was turned forward and -1 if the mouse wheel was turned backward. You can use the Mouse. Middle property to determine whether the middle mouse button - the mouse wheel - was pressed over a component.

14.2.3.1 Project 1 - Zoom function for a function plotter

The presented project realizes a function plotter, in which the displayed section of the graph of a function can be enlarged[+], reduced[-] and reset to the normal resolution[1] by pressing three buttons.

Plotter

Figure 14.2.3.1.1: Function Plotter

In addition, it should be possible to change the zoom factor using the mouse wheel in a given zoom range.

Only the procedure for implementing the zoom function is specified here, because the complete project function plotter is discussed in → chapter 23.4.6:

[1] Public Sub dwgKS1_MouseWheel()
[2]   If Mouse.Delta = 1 Then ' Mouse wheel forward? Enlarge image - defined by the programmer
[3]      If fZoom < 300 Then
[4]         fZoom = fZoom + 5
[5]         KS_RP_G_Zeichnen() ' Drawing coordinate system, raster points and graph of function
[6]      Endif
[7]   Else
[8]      If fZoom > 20 Then
[9]         fZoom = fZoom - 5
[10]         KS_RP_G_Zeichnen()
[11]      Endif
[12]   Endif
[13] End ' dwgKS1_MouseWheel()

Comments:

  • The event MouseWheel() in the first line refers to a DrawingArea.
  • If the mouse wheel has been turned forwards (line 2) - the value of Mouse.Delta is +1 - then the zoom will be increased with a increment of 5 (zoom) units. Then the coordinate system, the grid points and the image of the function (line 5) are redrawn.
  • If the mouse wheel has been rotated back - the value of Mouse.Delta is -1 - then the zoom is reduced to 5 (zoom) units and the image is redrawn.
  • The numbers 300 and 20 in lines 3 and 8 are proven values and indicate the zoom range in which zooming is possible. Note that the zoom factor in Project 1 does not depend on the Mouse.Delta value.

14.2.3.2 Project 2 - Zoom function for a WebBrowser

The presented project implements a WebBrowser for which the WebView component is used. Since this component already uses the mouse wheel to scroll vertically through the web page, the zoom function had to be switched on or off with a switch in order to work with the event MouseWheel(). The control key (Strg, Ctrl) is used as a switch.

  • To implement a zoom function for the content of the WebBrowser component, the value for the WebView. zoom property is changed to values smaller or greater than 1 in a proven interval.
  • With a click on the mouse wheel, the zoom factor is reset to the value 1 - corresponding to 100% or the original display size.

WedbBrowser

Figure 14.2.3.2.1: Demonstration program WebBrowser with zoom function (mouse wheel)

In the following section, the complete source code for the project is specified and then commented on:

[1] ' Gambas class file
[2] 
[3] Public Sub Form_Open()
[4]   FMain.Center
[5]   WebView1.Url = "http://gambasdoc.org/help/comp/gb.qt4.webkit/webview?v3"
[6] End ' Form_Open()
[7] 
[8] Public Sub WebView1_MouseWheel()
[9]   If Mouse.Control Then 
[10]      Select Case Mouse.Delta
[11]      Case -1
[12]         If WebView1.Zoom < 2.26 Then
[13]            WebView1.Zoom = Round(WebView1.Zoom - Mouse.Delta / 4, -2)
[14]         Endif
[15]      Case +1
[16]         If WebView1.Zoom > 0.61
[17]            WebView1.Zoom = Round(WebView1.Zoom - Mouse.Delta / 10, -2)
[18]         Endif
[19]      End Select
[20]   Endif ' Mouse.Control = True?
[21] End ' WebView1_MouseWheel()
[22] 
[23] Public Sub WebView1_MouseDown()
[24]   If Mouse.Middle Then WebView1.Zoom = 1
[25] End ' WebView1_MouseDown()
[26] 
[27] Public Sub btnHelpMe_Click()
[28]   Message.Info("Zoom-Function:\nHold down the 'Control' key and turn the mouse wheel!")
[29] End ' btnHelpMe_Click()
[30] 
[31] Public Sub btnClose_Click()
[32]   FMain.Close
[33] End ' btnClose_Click()
[34] 

Comments:

  • Project 2 focuses on implementing a zoom function for the content of the WebView component. Therefore, the browser is very sparse and shows only one web page (row 5) with a fixed URL.
  • The event MouseWheel () in the eighth row refers to the WebView component.
  • The zoom factor is only changed, however, if the control key is held down at the same time when the mouse wheel is turned → line 9, because otherwise the scroll function for the content of the web page is active.
  • The numbers 2,26 and 0.61 in lines 12 and 16 are proven values and indicate the zoom range.
  • Note that the zoom factor for zooming in and out depends on the Mouse. delta value in rows 13 and 17!
  • If the mouse wheel has been rotated back, the value of Mouse. delta is -1, then the zoom of the web page will be increased with a step1 of Mouse. delta/4.
  • The zoom of the web page is reduced by another step size2 of Mouse. delta/10 when the mouse wheel is turned forward.
  • In contrast to project 1, the control structure used in the event handling routine is not a nested IF structure but a select case structure.
  • In contrast to Project 1, Project 2 zooms in when the mouse wheel has been turned back, but you can change this.
  • The WebView zoom is reset to 100 percent (zoom factor = 1) when you press the mouse wheel. In lines 27 to 29 this is realized in the procedure WebView1_MouseDown().

14.2.3.3 Download

14.2.3 Mausrad – MouseWheel

Viele PC-Mäuse verfügen neben der linken und rechten Maustaste auch über ein Mausrad. Dieses Mausrad lässt sich nach vorn oder zurück drehen. Außerdem kann man auch auf das Mausrad drücken, so dass das Mausrad als (mittlere) Maustaste fungiert. Das Mausrad wird bei vielen Programmen zum Scrollen durch die Inhalte von scrollbaren Komponenten oder für das Auslösen einer Zoom-Funktion für eine bestimmte Komponente benutzt.

In Gambas existiert für ausgewählte Komponenten das Ereignis 'Control_MouseWheel()'. Dieses Ereignis wird ausgelöst, wenn das Mausrad bewegt wird oder das Mausrad gedrückt wird, solange sich der Maus-Cursor über der Komponente befindet. Das Ereignis gibt den Wert Mouse.Delta vom Typ Float zurück. Der Wert ist +1, wenn das Mausrad vorwärts gedreht wurde und -1, wenn das Mausrad rückwärts gedreht wurde. Über die Eigenschaft Mouse.Middle können Sie feststellen, ob die mittlere Maustaste – das Mausrad – über einer Komponente gedrückt worden war.

14.2.3.1 Projekt 1 – Zoom-Funktion für einen Funktionsplotter

Das vorgestellte Projekt realisiert einen Funktionsplotter, bei dem man den angezeigten Ausschnitt des Graphen einer Funktion über drei Button vergrößern [+], verkleinern [-] und wieder auf die Normalauflösung [1] zurückstellen kann.

Plotter

Abbildung 14.2.3.1.1: Funktionsplotter

Zusätzlich sollte die Möglichkeit geschaffen werden, den Zoom-Faktor über das Mausrad in einem vorgegebenen Zoom-Bereich zu ändern.

Es wird hier nur die benutze Prozedur zur Realisierung der Zoom-Funktion angegeben, weil das vollständige Projekt Funktions-Plotter im Kapitel 23.4.6 besprochen wird:

[1] Public Sub dwgKS1_MouseWheel()
[2]   If Mouse.Delta = 1 Then ' Mausrad nach vorn → Bild vergrößern – vom Programmierer festgelegt
[3]      If fZoom < 300 Then
[4]         fZoom = fZoom + 5
[5]         KS_RP_G_Zeichnen() ' Zeichnen von Koordinatensystem, Rasterpunkten und Graph der Funktion
[6]      Endif
[7]   Else
[8]      If fZoom > 20 Then
[9]         fZoom = fZoom - 5
[10]         KS_RP_G_Zeichnen()
[11]      Endif
[12]   Endif
[13] End ' dwgKS1_MouseWheel()

Kommentare:

  • Das Ereignis MouseWheel() in der ersten Zeile bezieht sich auf eine DrawingArea.
  • Wenn das Mausrad nach vorn (Zeile 2) gedreht wurde – der Wert von Mouse.Delta ist +1 – dann wird der Zoom mit einer Schrittweite von 5 (Zoom-)Einheiten erhöht. Danach werden das Koordinatensystem, die Rasterpunkte und das Bild der Funktion (Zeile 5) neu gezeichnet.
  • Wenn das Mausrad zurück gedreht wurde – der Wert von Mouse.Delta ist -1 – dann wird der Zoom mit einer Schrittweite von 5 (Zoom-)Einheiten verkleinert und das Bild neu gezeichnet.
  • Die Zahlen 300 und 20 in den Zeilen 3 und 8 sind erprobte Werte und geben den Zoom-Bereich an, in dem gezoomt werden kann. Beachten Sie, dass der Zoom-Faktor im Projekt 1 nicht vom Wert Mouse.Delta abhängt.

14.2.3.2 Projekt 2 – Zoom-Funktion für einen WebBrowser

Das vorgestellte Projekt realisiert einen WebBrowser, für den die Komponente WebView eingesetzt wird. Da diese Komponente bereits das Mausrad nutzt, um durch die Webseite vertikal zu scrollen, musste die Zoom-Funktion mit einem Schalter zu- oder abgeschaltet werden, um mit dem Ereignis MouseWheel() arbeiten zu können. Als Schalter wird als eine Möglichkeit hier die Steuerungstaste (Strg, Ctrl) benutzt.

  • Für die Realisierung einer Zoom-Funktion für den Inhalt der Komponente WebBrowser wird der Wert für die Eigenschaft WebView.Zoom in einem erprobten Intervall auf Werte kleiner respektive größer als 1 geändert.
  • Mit einem Klick auf das Mausrad wird der Zoom-Faktor auf den Wert 1 – entspricht 100% oder Original-Darstellungsgröße – zurückgesetzt.

WedbBrowser

Abbildung 14.2.3.2.1: Demonstrationsprogramm WebBrowser mit Zoom-Funktion (Mausrad)

Im folgenden Abschnitt wird der vollständige Quelltext für das Projekt angegeben und anschließend kommentiert:

[1] ' Gambas class file
[2] 
[3] Public Sub Form_Open()
[4]   FMain.Center
[5]   WebView1.Url = "http://gambasdoc.org/help/comp/gb.qt4.webkit/webview?v3"
[6] End ' Form_Open()
[7] 
[8] Public Sub WebView1_MouseWheel()
[9]   If Mouse.Control Then 
[10]      Select Case Mouse.Delta
[11]      Case -1
[12]         If WebView1.Zoom < 2.26 Then
[13]            WebView1.Zoom = Round(WebView1.Zoom - Mouse.Delta / 4, -2)
[14]         Endif
[15]      Case +1
[16]         If WebView1.Zoom > 0.61
[17]            WebView1.Zoom = Round(WebView1.Zoom - Mouse.Delta / 10, -2)
[18]         Endif
[19]      End Select
[20]   Endif ' Mouse.Control = True?
[21] End ' WebView1_MouseWheel()
[22] 
[23] Public Sub WebView1_MouseDown()
[24]   If Mouse.Middle Then WebView1.Zoom = 1
[25] End ' WebView1_MouseDown()
[26] 
[27] Public Sub btnHelpMe_Click()
[28]   Message.Info("Zoom-Funktion:\nTaste 'Steuerung' gedrückt halten und Mausrad drehen!")
[29] End ' btnHelpMe_Click()
[30] 
[31] Public Sub btnClose_Click()
[32]   FMain.Close
[33] End ' btnClose_Click()
[34] 

Kommentare:

  • Für das Projekt 2 steht die Realisierung einer Zoom-Funktion für den Inhalt der Komponente WebView im Vordergrund. Daher fällt der Browser sehr spartanisch aus und zeigt nur eine Webseite (Zeile 5) mit fester URL an.
  • Das Ereignis MouseWheel() in der achten Zeile bezieht sich auf die WebView-Komponente.
  • Der Zoom-Faktor wird aber nur dann geändert, wenn gleichzeitig beim Drehen des Mausrades die Steuerungstaste gedrückt gehalten wird → Zeile 9, weil sonst die Scroll-Funktion für den Inhalt der Webseite aktiv ist.
  • Die Zahlen 2,26 und 0,61 in den Zeilen 12 und 16 sind erprobte Werte und geben den Zoom-Bereich an.
  • Beachten Sie, dass der Zoom-Faktor für das Vergrößern und das Verkleinern vom Wert Mouse.Delta in den Zeilen 13 und 17 abhängt!
  • Wenn das Mausrad zurück gedreht wurde, der Wert von Mouse.Delta ist -1, dann wird der Zoom der Webseite mit einer Schrittweite1 von Mouse.Delta/4 vergrößert.
  • Der Zoom der Webseite wird mit einer anderen Schrittweite2 von Mouse.Delta/10 verkleinert, wenn das Mausrad nach vorn gedreht wurde.
  • Als Kontrollstruktur wurde in der Ereignisbehandlungsroutine – im Gegensatz zum Projekt 1 – keine verschachtelte IF-Struktur verwendet sondern eine Select-Case-Struktur.
  • Anders als im Projekt 1 wird im Projekt 2 der Zoom vergrößert, wenn das Mausrad zurück gedreht wurde, was Sie aber ändern können.
  • Der WebView-Zoom wird auf 100 Prozent (Zoom-Faktor = 1) (zurück-)gesetzt, wenn man auf das Mausrad drückt. In den Zeilen 27 bis 29 wird das in der Prozedur WebView1_MouseDown() realisiert.

14.2.3.3 Download

The website uses a temporary session cookie. This technically necessary cookie is deleted when the browser is closed. You can find information on cookies in our privacy policy.
k14/k14.2/k14.2.3/start.txt · Last modified: 02.07.2018 (external edit)

Page Tools