FMXInno - Windows Fluent Design Installer UI for Inno

[BLACKFIRE69]

-- Frequent Requests from the FMXInno Community --

* Users frequently ask how to play videos (locally/web) through WebView2.
* it's not a big deal; it can be done using a simple HTML file and/or just HTML content.

- So, i decided to give you some examples. in the attachment, you'll find 6 examples related to this.

- Here, i've used inline-CSS for styles and ease of use. but you don't have to do it this way; you can have a separate CSS file (Style.css) for this purpose.

- As i mentioned before, you can achieve this in two ways: either by generating an HTML file at runtime or by using HTML content instead of a file. however, there're some limitations with HTML content. with this approach, you may not have the auto-run feature, and you need to do folder mapping for resources. so, i personally prefer generating an HTML file at runtime; it's much easier.

- It's possible to control video playback (pause, resume, stop, etc.) through WebView2 by injecting JavaScript into the HTML file loaded in the WebView2 control. you can call these JavaScript functions from FMXInno code using the ExecuteScript method of WebView2.

- Also, you'll find a simple tool (_TxtToDelphiStr.exe) in the attachment that converts an HTML file to a Delphi/Inno string, saving you time.

- The HTML content in the examples is not exactly the same as the output of '_TxtToDelphiStr.exe' because i've made some necessary changes to make everything work. so, don't get things mixed up.

- I've updated the WebView2 to the latest version in the FMXInno DLL.

- These examples are only for Windows 10 and Windows 11 as WebView2 requires the 'WebView2 Runtime' to be installed on the system.

- Alternatively, download the WebView2 Runtime manually for unsupported systems. Download Microsoft WebView2

.

[Fak Eid]

What are the chances that Epic Games updated their UI few days after I created an installer that looks like it. Draining all my efforts

[Tihiy_Don]

Originally Posted by Fak Eid

What are the chances that Epic Games updated their UI few days after I created an installer that looks like it. Draining all my efforts

They specifically looked at your installer to change the design. Gabe told me himself.

[Fak Eid]

Any idea how can I bring this section to the front in case of using WebView? When using FImage, on the click of Downloads button I'm doing DownloadInfo.BringToFront; which doesn't seem to be working in case of FWebView.

As an alternate, I'm hiding the FWebView when the Download Info section is opened, but it looks clumsy and not good. If we can display this over it, would be really good.

[Fak Eid]

Hi @Blackfire,

I personally believe that WebView has too much of unexplored potential just like FNewINI and there are numerous amount of possibility with it.
- Can we have SetBounds and IsVisible parameters on FWebView2Obj?
- Can we make it dependent on FRectangle handles completely instead of FMXForm.Handle?

I might be asking for more features on it.
Including these parameters will help me to add WebView in my Steam Limitless installer.

[Fak Eid]

Real life examples are in Epic Games Installer

Generic WebView Example
You can reuse the attached WebView.html like this:

[Files]
Source: "Files\Web\WebView.html"; DestDir: "{tmp}"; Flags: dontcopy;

procedure LoadHtmlContent(Width, Height: Integer; SrcURL: WideString);
var
  sHtml, VideoId: Widestring;
  sTemplate: AnsiString;
  Sl: TStringList;
begin
  VideoId := Copy(SrcURL, Pos('v=', SrcURL) + 2, 11);
  LoadStringFromFile(ExtractAndLoad('WebView.html'), sTemplate);
  sHtml := Format(sTemplate, [Width, Height, VideoId]);

  Sl := TStringList.Create;
  try
    Sl.Text := sHtml;
    Sl.SaveToFile(ExpandConstant('{tmp}\WebView.html'));
  finally
    Sl.Free;
  end;
end;

LoadHtmlContent(680, 384, 'https://www.youtube.com/ watch?v=hS7ZY7oLCS4&ab_channel=RANDOMGAMERTAGS');

TrailerRect.FCreate(FMXForm.Handle);
TrailerRect.SetBounds(250, 145, 680, 383);
TrailerRect.Opacity(0);
TrailerRect.HitTest(False);

TrailerWebView.FCreate(FMXForm.Handle, TrailerRect.Handle, ExpandConstant('{tmp}\WebView.html'));
TrailerWebView.Start;

Custom Image Slideshow
The need for this was because both type of Image Slideshow were dependent on FMXForm and couldn't be overlayed with a different component. Hence, I had to go with creating my own.

j: Integer;
GameImage: FImage;
SlideShowTimer: FTimer;

GameImage.FCreate(FMXForm.Handle);
GameImage.SetBounds(250, 145, 680, 383);
GameImage.LoadPicture(ExtractAndLoad('Image0.jpg'), iwStretch);
GameImage.Opacity(1);

SlideShowTimer.FCreate(GameImage.Handle, True);
SlideShowTimer.Interval(100);
SlideShowTimer.OnTimer(@ChangeSlide);

procedure ChangeSlide(Sender: TObject);
var
  Time: Cardinal;
  SlideOpacity: Single;
begin
  if GameImage.GetOpacity = 1 then Slider := False
  else if GameImage.GetOpacity = 0 then begin
    GameImage.LoadPicture(ExtractAndLoad('Image' + IntToStr(j) +'.jpg'), iwStretch);
    j := j+1;
    Slider := True;
  end;

  if (Slider = False) and not (GameImage.GetOpacity = 0) then SlideOpacity := GameImage.GetOpacity - 0.05
  else if (Slider = True) and not(GameImage.GetOpacity = 1) then SlideOpacity := GameImage.GetOpacity + 0.05;
  GameImage.Opacity(SlideOpacity);

  #ifdef NumberOfSlides
  if j = {#NumberOfSlides} then j := 0;
  #endif
end;

What is NumberOfSlides?
Settings.ini has a parameter as Number of Slides where you need to define the number of Image Files from the folder, to be included in the slideshow.

[BLACKFIRE69]

FMXInno - Updates


* Let me know if you would like to have the FCustomMemo in future updates. it's an advanced Memo component i used previously in the Avalon Installer, and it originally comes with FMXInno v1.0.0.3.


Features:

1. Fully customizable overall.

2. Ability to customize individual items/lines.

3. Each item/line can be either text or any object (Rectangle, Image, FMXInno Blueprint, etc.) you prefer.

4. Each line's height and width can be adjusted individually.

5. Supports navigation, scrollbars, and more.

.

[Fak Eid]

I wouldn't mind.. It is always more convenient to customize. I already have some ideas. My new work can wait to have it. Can you also include these in the update too?

[BLACKFIRE69]

Originally Posted by Fak Eid

Can you also include these in the update too?

FireMonkey is a different story.

while working with FireMonkey (FMX), especially when integrating with native components like WebView2, there're certain limitations due to how FMX and the underlying platform handle windows and rendering. FMX is designed to be cross-platform, with a focus on vector-based, hardware-accelerated graphics, while traditional controls like WebView2 rely on native Windows-specific window handles (HWND) to be embedded.

to embed WebView2 within a FireMonkey form, we use 'FMXForm.Handle', which provides the necessary window handle (HWND) for WebView2 to render its content. this works because a form in FMX has an associated native window, and we can retrieve its handle.

however, FMX objects like 'TRectangle', 'TPanel', and other 'TFMXObject' descendants don't have an underlying native window (HWND). they're drawn directly onto the GPU and managed by the FireMonkey rendering engine, which makes them platform-agnostic but without any native window handle. since WebView2 requires an actual window handle to render its content, it isn't possible to use a 'TFMXObject' like 'TRectangle' as the parent window for WebView2.

in essence, FireMonkey objects and native components like WebView2 operate in fundamentally different ways. while you can embed WebView2 inside a FireMonkey form by setting the parent window to the form handle, using a 'TFMXObject' as a parent isn't feasible due to the lack of a native window handle in FireMonkey controls.


not only the ones you mentioned, but i also want to add more. however, it isn’t possible due to compatibility limitations.


.

[BLACKFIRE69]

@BLACKFIRE69
Can you help me with ini? you need to install files directly from the installer and not from the archives

[Components]
Name: "program1"; Description: "Program 1"
Name: "program2"; Description: "Program 2"
Name: "program3"; Description: "Program 3"
Name: "program4"; Description: "Program 4"
Name: "program5"; Description: "Program 5"

[Files]
Source: "program1.exe"; DestDir: "{app}"; Components: program1
Source: "program2.exe"; DestDir: "{app}"; Components: program2
Source: "program3.exe"; DestDir: "{app}"; Components: program3
Source: "program4.exe"; DestDir: "{app}"; Components: program4
Source: "program5.exe"; DestDir: "{app}"; Components: program5

@audiofeel,

i've provided two examples below: one uses regular Checkboxes, and the other uses CheckboxTree. you can use them as a reference.


Note:

i discovered unexpected behavior in MInI. it's a generic issue, not an error on my part. however, i applied a hotfix for it. you can download MInI and FMXInno [June-10] below.


.

[BLACKFIRE69]

[ FMXInno Cumulative Update - 2024/Aug/28 ]


--- Changelog

* Added Custom Blueprints:
  1. 'FAdvancedMemo'
  2. 'FAdvancedShape'
  3. 'FAdvancedNotification'

* Deprecated:
  - 'pWinNotification' has been removed.
  - The example 'Example_WinNotifications.iss' has been removed.

* Enhancements:
  - Auto-Dark Mode: Added support for auto-dark mode in 'FCustomFluentWindow'.
  - Updated Components:
    - Updated all classes and custom blueprints.
    - Updated gradient color settings.
    - Updated 'MInI'.
    - Updated 'xBass' plugin to the latest version.
    - Updated 'WebView2' to the latest version.

  - Error Handling: Improved error handling and messages.
  - FMXInnoShutdown Function: Enhanced for a smoother exit.
  - FMXInnoShutDownUn: Now defined by default in 'FMXInnoHandle.iss'. 
    You need to remove it from your scripts.

* Fixes:
  - Fixed null pointer access errors.
  - Fixed runtime errors reported by users and discovered during debugging.
  - Fixed memory deallocation issues at exit.

* Future Updates:
  - Advanced 3D objects and 3D animations are planned for future releases.

* Miscellaneous:
  - Various other improvements and bug fixes.

Advanced Notification:

* Refer to the attached examples for guidance on creating notifications with items, interacting with them, and updating them in real-time.

* The code snippet is provided below:

procedure CsNotifyOnActivated(Sender: INotification; nArguments: WideString; nUserInput: INotificationUserInput);
begin
  MemLog.Clear;

  if Sender = csNotification1.Handle then
  begin
    case nArguments of
      'send'    : MemLog.AddLine('* Send button clicked!'#13#10);
      'ok'      : MemLog.AddLine('* Ok button clicked!'#13#10);
      'cancel'  : MemLog.AddLine('* Cancel button clicked!'#13#10);
      ''        : MemLog.AddLine('* Clicked on the content!'#13#10);
      else
        MemLog.AddLine('Args:'#9 + nArguments + #13#10);
    end;

    // Textbox input
    if csNotifyBuilder1.IsUserInputValueExist(nUserInput, 'txtbx_id1') then   
      MemLog.AddLine('> Input Text:'#9#9'[' + csNotifyBuilder1.GetUserInputValueStr(nUserInput, 'txtbx_id1') + ']');

    // Selectbox input
    if csNotifyBuilder1.IsUserInputValueExist(nUserInput, 'selbx_id1') then   
      MemLog.AddLine('> Shutdown Timer:'#9'[' + csNotifyBuilder1.GetUserInputValueStr(nUserInput, 'selbx_id1') + ' Minutes]');
  end;
end;

  // Content
  csNotifyContent1.FCreate;
  //csNotifyContent1.Scenario(nsIncomingCall);
  csNotifyContent1.UseButtonStyle(True);                          // For Ok, Cancel button style.
  csNotifyContent1.Duration(ndLong);                              // Duration: [Short == 2 sec | Default == 5 sec | Long == 25 sec]
  csNotifyContent1.AddInputTextBox(csContentTextBox1.Handle);     // Textbox
  csNotifyContent1.AddSelectionBox(csContentSelectBox1.Handle);   // Selectbox
  csNotifyContent1.AddButton(csContentBtnSend.Handle);            // Send Button
  csNotifyContent1.AddButton(csContentBtnCancel.Handle);          // Cancel Button
  csNotifyContent1.AddButton(csContentBtnOk.Handle);              // Ok Button

  csNotifyContent1.AddImage(csContentHeaderImage.Handle);         // Header Image
  csNotifyContent1.AddImage(csContentAppImage.Handle);            // App Image
  csNotifyContent1.AddText(csContentCaption1.Handle);             // Caption
  csNotifyContent1.AddText(csContentDesc1.Handle);                // Description
  
  csNotifyContent1.AddAudio(csContentAudio.Handle);               // Audio

    // Notification
  csNotification1.FCreate(csNotifyContent1.Handle, csNotifyBuilder1.Handle);

  if not csNotification1.ParamIsValueExists('my_desc') then
    csNotification1.ParamSetValue('my_desc', sDesc);

  csNotification1.OnActivated(@CsNotifyOnActivated);  // OnActivate
  csNotification1.OnDismissed(@CsNotifyOnDismissed);  // OnDismissed
  csNotification1.OnFailed(@CsNotifyOnFailed);        // OnFailed

    // Show Notification
  csNotifyBuilder1.ShowNotification(csNotification1.Handle);

Advanced Shapes:

* To create advanced graphic shapes, you'll need the corresponding SVG data for the shapes you wish to design. There're various methods to obtain SVG data, but i won't go into detail on that here.
* Ensure that you adjust and resize the SVG data to match your intended dimensions, as advanced shapes do not automatically handle this for you.
* You can use the simple tool 'TxtToDelphiStr.exe' to easily convert SVG data into Delphi/Inno strings.

* For more information on SVG data, refer to the following links:

1. w3.org/SVG
2. css-tricks.com/SVG-Syntax

* Below is a code snippet:

  { AdvancedShape }
  csShapeData := 'M 249.2615 123.1455' +#13#10+
    'c 18.9705 -33.9615 -4.257 -74.7495 -42.94 -78.602 l -14.116 -1.4065' +#13#10+
    'c -10.295 -1.0265 -19.491 -5.487 -27.1315 -14.064' +#13#10+
    'c -26.5925 -29.8475 -76.1095 -22.477 -92.41 13.382' +#13#10+
    'c -3.97 8.733 -11.149 15.719 -20.214 19.672 l -19.8865 8.67' +#13#10+
    'c -31.6995 13.82 -42.447 52.167 -22.424 79.5915 l 12.618 17.2815' +#13#10+
    'c 2.7405 3.754 4.741 7.9035 5.9465 12.333 l 6.266 23.0365' +#13#10+
    'c 8.5835 31.5575 44.3775 48.61 75.6205 35.3465 l 2.675 -1.1355' +#13#10+
    'c 7.9505 -3.3755 16.996 -4.1935 25.466 -2.308 l 41.024 9.1345' +#13#10+
    'c 39.9665 8.899 75.195 -25.787 66.27 -63.9125 l -5.192 -22.1755' +#13#10+
    'c -2.1015 -8.9765 -0.762 -18.39 3.772 -26.506 l 4.656 -8.3375 z';

  csShape.FCreate(FMXForm.Handle);
  csShape.SetBounds(65, 80, 265, 260);
  csShape.Data_Str(csShapeData);
  csShape.Data_WrapMode(spwmOriginal);
  csShape.FillGradient($FF69EACB, $FF6654F1, gsLinear);

The first post has been updated—check it out!



.

[Fak Eid]

When trying to create an .ini file for setting config of my installer using:
INI_Maker: FNewINI;
INI_Maker.FCreate(ExpandConstant('{src}\Game\Insta ller.ini'));

it is creating the file in UTF-8 with BOM which is messing with Inno Compiler and not producing the desired result. How can I have FNewINI to create the file in UTF-8 format.

In case when the main section say [Execs] doesn't exists and we create the SubSection using FNewINI:

INI_Maker.WriteSubString('Execs', 'AppExe'+IntToStr(j), 'Name', ExeEdit[i].GetText);
INI_Maker.WriteSubString('Execs', 'AppExe'+IntToStr(j), 'Filepath', ExeEdit[i+1].GetText);
INI_Maker.WriteSubString('Execs', 'AppExe'+IntToStr(j), 'Parameters', ExeEdit[i+2].GetText);

It does not create the main section.
Desired output should be:

[Execs]
[Execs\AppExe1]
Name=Horizon Forbidden West
Filepath=HorizonForbiddenWest.exe
Parameters=--fullscreen

It is like this instead:

[Execs\AppExe1]
Name=Horizon Forbidden West
Filepath=HorizonForbiddenWest.exe
Parameters=--fullscreen

FCombineText
No Mouse Actions like: OnMouseEnter, OnMouseLeave, OnClick are working

[Tihiy_Don]

- 'pWinNotification' has been removed.

Very sorry. I've just used Windows-style notifications in my latest releases.

[Tihiy_Don]

Please add methods:
onMouseEnter(Event: TNotifyEvent); procedure onMouseLeave(Event: TNotifyEvent);

For the checkboxtree component (checkbox, radiobutton).

[Qirashi]

There is a problem with the RemoveObject2 method for FCombobox. It does not work properly and does not delete the specified element.