Scroll and Zoom

This chapter shows you how to use the scroll and zoom capabilities of IC Imaging Control.

The source code for the C# version of this sample program can be found under samples\C# *\Scroll And Zoom in your My Documents/IC Imaging Control 3.5 directory.

Setting up the Project

Create a new project and add IC Imaging Control to the form. Before you run the program, select the video device, input and video format as shown in the First Steps Visual Studio .NET 2010 chapter. Alternatively, run the program without selecting a device. In this case, the program shows the device selection dialog that ships with IC Imaging Control. If you close this dialog without making a selection, the program displays an error message and terminates.

Now add 2 buttons to the form and label them Start and Stop. Name the buttons cmdStart and cmdStop respectively.

Add a call to ICImagingControl.LiveStart method. In addition, a red rectangle is drawn around the whole image to visualize its perimeter:

[C#]
private void cmdStart_Click(object sender, EventArgs e)
{
    if( icImagingControl1.DeviceValid )
    {
        icImagingControl1.LiveStart();
        var ovb = icImagingControl1.OverlayBitmapAtPath[TIS.Imaging.PathPositions.Device];
        int width = icImagingControl1.VideoFormatCurrent.Width;
        int height = icImagingControl1.VideoFormatCurrent.Height;
        // Draw a rectangle around the whole image to visualize its perimeter.;
        ovb.Enable = true;
        ovb.DrawLine( Color.FromArgb( 255, 0, 0 ), 0, 0, width - 1, 0 );
        ovb.DrawLine( Color.FromArgb( 255, 0, 0 ), width - 1, 0, width - 1, height - 1 );
        ovb.DrawLine( Color.FromArgb( 255, 0, 0 ), width - 1, height - 1, 0, height - 1 );
        ovb.DrawLine( Color.FromArgb( 255, 0, 0 ), 0, 0, 0, height );
        ovb.DrawText( Color.FromArgb( 255, 0, 0 ), 5, 5, "Scroll and Zoom Sample" );
    }
}

Add a call to ICImagingControl.LiveStop:

[C#]
private void cmdStop_Click(object sender, EventArgs e)
{
    icImagingControl1.LiveStop();
}

Now add two check boxes and name them chkDisplayDefault and chkScrollbarsEnable. Label them Default window size and Scrollbars respectively. They will be used to set the LiveDisplayDefault and the ScrollBarsEnabled properties.

Also add a slider control to the form and name it sldZoom. It will be used to set the LiveDisplayZoomFactor property. In the property window of the slider, set the range of the slider from 1 to 30. The slider's value will be divided by 10, before it is passed to the LiveDisplayZoomFactor property. This allows a zoom from 10% up to 300%.

Now add 2 buttons to the form and label them Device and Settings. Name the buttons cmdDevice and cmdImageSettings respectively. Add the button handler functions:

[C#]
private void cmdImageSettings_Click(object sender, EventArgs e)
{
    icImagingControl1.ShowPropertyDialog();
}

Enhance the cmdDevice_Click procedure to setup the check boxes and the slider control:

[C#]
private void cmdDevice_Click(object sender, EventArgs e)
{
    if (icImagingControl1.DeviceValid)
    {
        if (icImagingControl1.LiveVideoRunning)
        {
            icImagingControl1.LiveStop();
        }
    }
    icImagingControl1.ShowDeviceSettingsDialog();
    if (icImagingControl1.DeviceValid)
    {
        cmdStart.Enabled = true;
        cmdStop.Enabled = true;
        cmdImageSettings.Enabled = true;
        chkDisplayDefault.Enabled = true;
        chkScrollbarsEnable.Enabled = true;
        sldZoom.Enabled = true;
        lblZoom.Enabled = true;
        chkDisplayDefault.Checked = false;
        icImagingControl1.LiveDisplayDefault = false;
        icImagingControl1.LiveDisplaySize = icImagingControl1.VideoFormatCurrent.Size;
        chkScrollbarsEnable.Checked = icImagingControl1.ScrollbarsEnabled;
        // Enable or disable the slider for the zoom factor, depending
        // on the LiveDisplayDefault property.
        sldZoom.Enabled = !icImagingControl1.LiveDisplayDefault;
        sldZoom.Value = (int)(icImagingControl1.LiveDisplayZoomFactor * 10);
        lblZoomPercent.Text = (sldZoom.Value * 10).ToString() + "%";
    }
}

The check box chkDisplayDefault is used to toggle the LiveDisplayDefault property. Add a chkDisplayDefault_Click function to the form's source code. In this function, the current value of the chkDisplayDefault check box is retrieved and LiveDisplayDefault is set. Setting the LiveDisplayDefault property changes the value of the LiveDisplayZoomFactor property. Therefore, the value for the sldZoom slider control is updated to the LiveDisplayZoomFactor property value. Also, the slider control will be disabled, if the LiveDisplayDefault property returns True. If the LiveDisplayDefault property returns False, the slider control will be enabled, because now the zoom factor can be set.

[C#]
private void chkDisplayDefault_CheckedChanged(object sender, EventArgs e)
{
    icImagingControl1.LiveDisplayDefault = chkDisplayDefault.Checked;
    sldZoom.Value = (int)(icImagingControl1.LiveDisplayZoomFactor * 10.0f);
    lblZoomPercent.Text = (sldZoom.Value * 10).ToString() + "%";
    sldZoom.Enabled = !chkDisplayDefault.Checked;
}

The check box chkScrollBarsEnable is used to enable and disable the scrollbars. Add a chkScrollbarsEnable_Click function to the form's source code. In this function, the current value of the chkScrollbarsEnable check box is retrieved and ScrollBarsEnabled is set. This allows you to show or hide the scrollbars in IC Imaging Control's window. Disabling the scrollbars will reset the live displays window position to 0/0.

[C#]
private void chkScrollbarsEnable_CheckedChanged(object sender, EventArgs e)
{
    icImagingControl1.ScrollbarsEnabled = chkScrollbarsEnable.Checked;
}

The Slider sldZoom is used to set the zoom factor of the live video image. Add a sldZoom_Scroll function to the form's source code, to handle the change of the slider control. Because the range of the slider has been set from 1 to 30, the slider's value has to be divided by 10, before it is passed to LiveDisplayZoomFactor.

[C#]
private void sldZoom_Scroll(object sender, EventArgs e)
{
    if (icImagingControl1.LiveDisplayDefault == false)
    {
        icImagingControl1.LiveDisplayZoomFactor = (float)sldZoom.Value / 10.0f;
        lblZoomPercent.Text = (sldZoom.Value * 10).ToString() + "%";
    }
    else
    {
        MessageBox.Show("The zoom factor can only be set" + "\n" + "if LiveDisplayDefault returns False!");
    }
}

Run the program. You can now start and stop the live image by clicking on the respective buttons. You can enable or disable the LiveDisplayDefault property and see, how IC Imaging Control reacts. You can also show and hide the scrollbars and zoom the live video.

If the scrollbar values are changed, the ScrollableControl.Scroll event is raised by Windows Forms.

Add a new label to the form and name it lblScrollPosition. This new label is used to display the current scroll position. Also add the ScrollableControl.Scroll event function to the form's source code. Enhance the function as follows:

[C#]
private void icImagingControl1_Scroll( object sender, ScrollEventArgs e )
{
    Point p = icImagingControl1.AutoScrollPosition;
    lblScrollPosition.Text = string.Format( "{0}/{1}", p.X, p.Y );
}

Now, the current scroll position is displayed in the new label, each time, you scroll the live display with the scroll bars.

<< Programmer's Guide