Loading Resources

Introduction

Loading resources such as images is asynchronous, proceeding in the background, so you need to be careful not to use one that has not yet been loaded. This demonstration is based on Primož Gabrijelčič's splash screen on his Smart Programmer website, with added code to load and display a single image as an example.

Following the clear instructions, we added a panel and a label to SplashForm. We added a PaintBox control and two buttons (btnPart and btnWhole) to Form1 then created the Image control in code. We added to Resources the image sms_ide.png:

SMS IDE

SMS IDE

You can see the code assigned to btnPart.OnClick to display part of an image. Parameters 2 to 5 of DrawImageF define the rectangle to be copied from the image; the x and y coordinates of the top left corner then its width and height. The remaining four parameters are the x and y coordinated of the destination rectangle followed by its width and height. To display the whole image at its original size DrawImageF takes as parameters the image handle followed by the x and y coordinates of the destination rectangle.

Code of Form1

unit Form1;

interface

uses 
  w3system, w3graphics, w3components, w3forms, w3fonts, w3borders, w3application,
  W3PaintBox, W3Image, W3Button;

type
  TForm1=class(TW3form)
  private
    {$I 'Form1:intf'}
    FFirst: boolean;
    FImage : TW3Image;
  public
    procedure FormActivated; override;
  protected
    procedure InitializeObject; override;
    procedure FinalizeObject; override;
  end;

implementation

procedure TForm1.FormActivated;
begin
  inherited;
  if FFirst then
    begin
      FFirst := False;
      Application.ShowModal('SplashForm', 'SplashPanel', '');
    end;
end;

procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
  FImage := TW3Image.Create(nil);
  FImage.LoadFromURL('res/sms_ide.png');
  FFirst := true;
  btnPart.OnClick := procedure(Sender : TObject)
  begin
    pb.Canvas.FillStyle := 'rgb(0, 0, 0)'; //Clear
    pb.Canvas.FillRectF(0, 0, pb.Width, pb.Height);
    pb.Canvas.DrawImageF(FImage.Handle, 5, 150, 250, 310, 20, 0, 250, 310);
  end;

  btnWhole.OnClick := procedure(Sender : TObject)
    begin
      pb.Canvas.DrawImageF(FImage.Handle, 0, 0);
    end;
end;
 
procedure TForm1.FinalizeObject;
begin
  inherited;
  FImage.Free;
end;

end.

XML Code of Form1 Design

<?xml version="1.0" encoding="utf-16"?>
<SFM>
  <W3Form clsid="TW3Form">
    <name>Form1</name>
    <left>0</left>
    <top>0</top>
    <width>1000</width>
    <height>600</height>
    <enabled>1</enabled>
    <visible>1</visible>
    <angle>0</angle>
    <border.radius>0</border.radius>
    <alpha.blend>0</alpha.blend>
    <opacity>255</opacity>
    <zoom>1</zoom>
    <style.name>TW3Form</style.name>
    <tag.value>0</tag.value>
    <color>clNone</color>
    <transparent>0</transparent>
    <children>
      <W3PaintBox clsid="TW3PaintBox">
        <name>pb</name>
        <left>0</left>
        <top>48</top>
        <width>1000</width>
        <height>552</height>
        <enabled>1</enabled>
        <visible>1</visible>
        <angle>0</angle>
        <border.radius>0</border.radius>
        <alpha.blend>0</alpha.blend>
        <opacity>255</opacity>
        <zoom>1</zoom>
        <style.name>TW3PaintBox</style.name>
        <tag.value>0</tag.value>
        <color>clNone</color>
        <transparent>1</transparent>
      </W3PaintBox>
      <W3Button clsid="TW3Button">
        <name>btnPart</name>
        <left>21</left>
        <top>8</top>
        <width>200</width>
        <height>24</height>
        <enabled>1</enabled>
        <visible>1</visible>
        <angle>0</angle>
        <border.radius>0</border.radius>
        <alpha.blend>0</alpha.blend>
        <opacity>255</opacity>
        <zoom>1</zoom>
        <style.name>TW3Button</style.name>
        <tag.value>0</tag.value>
        <color>clNone</color>
        <transparent>0</transparent>
        <caption>Part of Image</caption>
      </W3Button>
      <W3Button clsid="TW3Button">
        <name>btnWhole</name>
        <left>240</left>
        <top>8</top>
        <width>200</width>
        <height>24</height>
        <enabled>1</enabled>
        <visible>1</visible>
        <angle>0</angle>
        <border.radius>0</border.radius>
        <alpha.blend>0</alpha.blend>
        <opacity>255</opacity>
        <zoom>1</zoom>
        <style.name>TW3Button</style.name>
        <tag.value>0</tag.value>
        <color>clNone</color>
        <transparent>0</transparent>
        <caption>Whole Image</caption>
      </W3Button>
    </children>
  </W3Form>
</SFM>

Code of SplashForm

unit SplashForm;

interface

uses 
  w3system, w3graphics, w3components, w3forms, w3fonts, w3borders, w3application,
  W3Panel, W3Time, W3Label, W3Image;

type
  TSplashForm=class(TW3form)
  private
    {$I 'SplashForm:intf'}
  public
    procedure FormActivated; override;
  protected
    procedure InitializeObject; override;
    procedure Resize; override;
  end;

implementation

{ TSplashForm}
procedure TSplashForm.FormActivated;
begin
  TW3EventRepeater.After(3000, lambda Application.HideModal(mrOK); end);
end;

procedure TSplashForm.InitializeObject;
begin
  inherited;
  {$I 'SplashForm:impl'}
  W3Label1.Font.Size := 24;
end;

procedure TSplashForm.Resize;
begin
  inherited;
  SplashPanel.Height := Height;
  SplashPanel.Width := Width;
end;
 
end.

Code of Splash program unit

unit Splash;

interface

uses 
  w3system, w3components, w3forms, w3application, form1, SplashForm;

type
  TApplication = class(TW3CustomApplication)
  private
    FForm1: TForm1;
    FSplashForm: TSplashForm;
  public
    procedure ApplicationStarting; override;
  end;

implementation

procedure TApplication.ApplicationStarting;
begin
  FForm1 := TForm1.Create(Display.View);
  FForm1.Name := 'Form1';
  RegisterFormInstance(FForm1, True);
  FSplashForm := TSplashForm.Create(Display.View);
  FSplashForm.Name := 'SplashForm';
  RegisterFormInstance(FSplashForm, False); //False because not main form
  inherited;
end;

end.
Programming - a skill for life!

Useful for games, with drawing routines (including transforms and text fonts), images, sprites and WebGL 3D graphics. Now includes Box2D physics and rendering by Pixi.js.