inno-setuppascalscript

How to add buttons/images with links to the bottom-left of my setup wizard?


My product is very community-reliant and very much ground up, so I'm looking to implement some buttons with links (a donation link and a github link) in the bottom-left corner of my setup wizard.

I've seen a similar question here (How can I add a image banner on the bottom left of the wizard window?) but can't quite get the link clickable like in the wizard for Inno Setup itself and it's just one bitmap image. I'm not sure if I'd need to combine Martin's answer from the previously mentioned question with some other answer to one of the "how to add clickable image" or "how to add hyperlink" questions, but I'd like some help coming up with a solution similar to that of Inno Setup's buttons.

Inno Setup example

Inno Setup example


Solution

  • Using the setup.iss and the isdonateandmail.iss scripts from /issrc on GitHub as examples, I was able to recreate the buttons at different sizes, with slightly altered positions while also adding a third button.

    Just like in the setup.iss script for Inno Setup, I used #include to add my buttons.iss script to my existing main script, keeping my code easy to parse through.

    // How to add the separate script to your existing main script
    #include "Buttons.iss"
    
    [Setup]
    AppName=My Program
    AppVersion=1.5
    
    // ...
    

    Everything else should be fairly easy to understand, but here's a brief explanation:

    If you are struggling with this still, please feel free to leave a comment on this post or on this answer. I can't promise I'll respond quickly, but I'll try.

    [Files]
    Source: "donate.bmp"; Flags: dontcopy noencryption
    Source: "discord.bmp"; Flags: dontcopy noencryption
    Source: "github.bmp"; Flags: dontcopy noencryption
    
    [CustomMessages]
    DonateHint=Donate to support us - Thank you!
    DiscordHint=Community Discord
    GitHubHint=GitHub Repository
    
    [Code]
    procedure DonateImageOnClick(Sender: TObject);
    var
      ErrorCode: Integer;
    begin
      ShellExecAsOriginalUser('open', 'https://www.paypal.com/us/home', '', '', SW_SHOWNORMAL, ewNoWait, ErrorCode);
    end;
    
    procedure DiscordImageOnClick(Sender: TObject);
    var
      ErrorCode: Integer;
    begin
      ShellExecAsOriginalUser('open', 'https://discord.com/', '', '', SW_SHOWNORMAL, ewNoWait, ErrorCode);
    end;
    
    procedure GithubImageOnClick(Sender: TObject);
    var
      ErrorCode: Integer;
    begin
      ShellExecAsOriginalUser('open', 'https://github.com/', '', '', SW_SHOWNORMAL, ewNoWait, ErrorCode);
    end;
    
    <event('InitializeWizard')> // Allows for 'InitializeWizard' to be used in Main Script without raising duplicate error
    procedure CreateButtons;
    var
      ImageFileName: String;
      DonateImage, DiscordImage, GithubImage: TBitmapImage;
      BevelTop: Integer;
    begin
      if WizardSilent then
        Exit;
    
      ImageFileName := ExpandConstant('{tmp}\donate.bmp');
      ExtractTemporaryFile(ExtractFileName(ImageFileName));
    
      DonateImage := TBitmapImage.Create(WizardForm);
      DonateImage.AutoSize := True;
      DonateImage.Bitmap.LoadFromFile(ImageFileName);
      DonateImage.Hint := CustomMessage('DonateHint');
      DonateImage.ShowHint := True;
      DonateImage.Anchors := [akLeft, akBottom];
      BevelTop := WizardForm.Bevel.Top;
      DonateImage.Top := BevelTop + (WizardForm.ClientHeight - BevelTop - DonateImage.Bitmap.Height) div 2 + ScaleY(3);
      DonateImage.Left := DonateImage.Top - BevelTop - ScaleX(5);
      DonateImage.Cursor := crHand;
      DonateImage.OnClick := @DonateImageOnClick;
      DonateImage.Parent := WizardForm;
    
      ImageFileName := ExpandConstant('{tmp}\discord.bmp');
      ExtractTemporaryFile(ExtractFileName(ImageFileName));
    
      DiscordImage := TBitmapImage.Create(WizardForm);
      DiscordImage.AutoSize := True;
      DiscordImage.Bitmap.LoadFromFile(ImageFileName);
      DiscordImage.Hint := CustomMessage('DiscordHint');
      DiscordImage.ShowHint := True;
      DiscordImage.Anchors := [akLeft, akBottom];
      DiscordImage.Top := DonateImage.Top 
      DiscordImage.Left := DonateImage.Left + DonateImage.Width + ScaleX(10);
      DiscordImage.Cursor := crHand;
      DiscordImage.OnClick := @DiscordImageOnClick;
      DiscordImage.Parent := WizardForm;
    
      ImageFileName := ExpandConstant('{tmp}\github.bmp');
      ExtractTemporaryFile(ExtractFileName(ImageFileName));
    
      GithubImage := TBitmapImage.Create(WizardForm);
      GithubImage.AutoSize := True;
      GithubImage.Bitmap.LoadFromFile(ImageFileName);
      GithubImage.Hint := CustomMessage('GitHubHint');
      GithubImage.ShowHint := True;
      GithubImage.Anchors := [akLeft, akBottom];
      GithubImage.Top := DiscordImage.Top
      GithubImage.Left := DiscordImage.Left + DiscordImage.Width + ScaleX(10);
      GithubImage.Cursor := crHand;
      GithubImage.OnClick := @GithubImageOnClick;
      GithubImage.Parent := WizardForm;
    end;
    

    Example of my buttons, no was transparency added, I just color matched the background to the WizardForm.Color (a lot easier, trust me).

    Example