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.

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.

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_Drawing() ' 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_Drawing()
[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.

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.

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().