• Blog
  • How to create an Image Viewer for a nice image demonstration in Zoom using Delphi

How to create an Image Viewer for a nice image demonstration in Zoom using Delphi

Creating an Image Viewer in Delphi

Publish date:
    DISCOVER MORE OF WHAT MATTERS TO YOU

    How to create an Image Viewer for a nice image demonstration in Zoom using Delphi

    Overview

    Many Zoom users sometimes need to show images while conducting conferences or meetings. Zoom doesn’t have an in-built function for doing that. As a result, users have to show a part of the screen and demonstrate a graphics editor that was used for opening the image.

    This is what the image demonstration in Zoom looks like:

    The image demonstration in Zoom
    The image demonstration in Zoom

    But let’s admit that it doesn’t look very nice as all buttons and tools of the editor are demonstrated as well. Just imagine that it is a serious conference that is being broadcasted on YouTube.

    We can improve it by creating a program in Delphi for demonstrating only an image.

    Creating a new VCL project 

    Let’s create our new VCL project.

    We need to add the TImage component to the form.

    The TImage component
    The TImage component

    In the properties of this component, let’s indicate alClient for the Align property. In such a way, our component will be automatically expanded within the entire form. And even if the size of the window changes, the image will still occupy the whole form.

    alClient for the Align property

    Let’s also change the Stretch property from False to True in order to make it possible for the image to change the sizes automatically in accordance with the window size updates. Just experiment to understand the difference.

    In order to ensure that our image is demonstrated without geometry distortions, in the property Proportional, we should indicate True.

    The property Proportional

    Opening an image in our program

    For opening images in our program, we need to place a special non-visual component TOpenPictureDialog in our form.

    TOpenPictureDialog component

    As we want to make it so that the window will have only our image without any additional elements, we won’t place any buttons there. For opening an image let’s use a double-click in any window area (in other words, double-click on the TImage that occupies the entire window).

    We need to choose a component TImage1, then in Object Inspector open the Events tab and find the OnDblClick event. After making a double-click on it, we will see a code window for writing code for processing double-clicks.

    The Events tab

    We need to write the following code lines:

    12
    if OpenPictureDialog1.Execute then
    Image1.Picture.LoadFromFile(OpenPictureDialog1.FileName);
    The code lines

    This condition can be used in this way if a dialog window for opening images is executed. A file name should be sent to the component Image1 for its demonstration.

    At this stage, it is recommended to run the project to check how it works.

    It should work the following way:  the project starts running -> we make a double-click in a random place on the form -> a dialog window for choosing an image is opened -> we choose a file -> and press the button Open -> we see an opened image that occupies the whole form or practically the whole form

    An opened image

    You’ve probably noticed that we can open only those files that have such formats as .bmp, .gif, etc. But the most popular formats, .jpeg and.png, were not offered on the list of available formats. As by default they are not available, let’s find a solution.

    For making it possible to open these formats, we should include two libraries, JPEG and PNGImage, to Uses (which is placed in the top part of our code).

    The code lines

    Now we can also open such formats as .jpeg and .png

    But our images will still look not very nice in Zoom:

    • First of all, we still can see the program title bar.
    The program title bar
    • Secondly, the proportions of the form do not fit the proportions of the image. On the right of the image or under it, we will still see a part of our gray form.
    A part of the gray form

    In order to avoid such issues, we can create a procedure that will help us to make the form size correspond to the image size. We will call this procedure while opening our image.

    But if the image is big, it will occupy the entire screen and it is not very convenient.That’s why in our new procedure we will check the image size and if it is too big, we will diminish the entire form with the image, so that it won’t occupy more than one-fourth of the screen.

    We need to write the following procedure code:

    12345678910111213141516171819
    procedure CorectSize(Img: TImage);
    var
    QuarterScreenWidth:integer;
    coef:real; //reduction factor
    begin
    // adjusting the size of the from to the picture
    QuarterScreenWidth := Round(Screen.Width / 4);
    coef := QuarterScreenWidth / Img.Picture.Width;
    if Img.Picture.Width > QuarterScreenWidth then
    begin
    Form1.Height := Round(Img.Picture.Height * coef);
    Form1.Width := Round(Img.Picture.Width * coef);
    end
    else
    begin
    Form1.Height := Img.Picture.Height;
    Form1.Width := Img.Picture.Width;
    end;
    end;
    The code lines

    In the double-click processing method, let’s call this procedure for the component Image 1.

    The procedure for the component Image 1

    Let’s delete the window title line and its buttons.

    To do it, we need to open the form properties and use the parameter bsNone in BorderStyle.

    The form properties

    How the program works

    Let’s run the program and check how it works.

    The program just after its opening:

    Zoom Image Viewer

    The program with an opened image:

    The program with an opened image

    This is what the image demonstration in Zoom looks like now:

    The image demonstration in Zoom

    For closing the program we can use the key combination Alt+F4 as we chose the BorderStyle without borders. 

    Check out our step-by-step guide: 

    How to create an Image Viewer for a nice image demonstration in Zoom using Delphi

    Our window will be always located at the top left and we can’t change the position of our window or its size. In this video, we will explain how it is possible to deal with this issue.

    Subscribe to our newsletter and get amazing content right in your inbox.

    This field is required
    This field is required Invalid email address

    Thank you for subscribing!
    See you soon... in your inbox!

    confirm your subscription, make sure to check your promotions/spam folder

    Subscribe to our newsletter and get amazing content right in your inbox.

    You can unsubscribe from the newsletter at any time

    This field is required
    This field is required Invalid email address

    You're almost there...

    A confirmation was sent to your email

    confirm your subscription, make sure to check
    your promotions/spam folder