FMXInno - Windows Fluent Design Installer UI for Inno

[Fak Eid]

I have a CustomForm: FCustomFluentWindow on which I have a 'browse' button for Directory change. When I click on it, I have DirBrowseDlg: FFLuentDirBrowse, which keeps flickering. The reason it is flickering is because the CustomForm is still open. If I close that CustomForm, the flickering stop.

@Blackfire, please acknowledge this issue to either fix it, or as a workaround I'm closing the CustomForm when 'Browse' button is clicked, but want Custom.Show after the user clicks on 'Ok'/'Cancel' on DirBrowseDlg. Can anybody help me with code snippet?

I might need
procedure ButtonOnMouseClick(ButtonIndex: Integer; Event: TNotifyEvent);

[audiofeel]

Originally Posted by Fak Eid

Something like this would be helpful and doesn't exist in current version of FMXInno. @Blackfire, can you please add this method to FFluentDirBrowse?

    function GetNewFolderBtnClickEvent: LongInt;
    function GetOkBtnClickEvent: LongInt;
    function GetCancelBtnClickEvent: LongInt;

    TObject(BrowseNewFolderButton.GetObject):
      CallNotifyEvents(DirBrowseForm.GetNewFolderBtnClickEvent, Longint(Sender));

    TObject(BrowseOkButton.GetObject):
      CallNotifyEvents(DirBrowseForm.GetOkBtnClickEvent, Longint(Sender));

    TObject(BrowseCancelButton.GetObject):
      CallNotifyEvents(DirBrowseForm.GetCancelBtnClickEvent, Longint(Sender));

[Fak Eid]

Even with this solution, we would still require an event listener like:
procedure ButtonOnMouseClick(ButtonIndex: Integer; Event: TNotifyEvent);

or else how will it enter @CommonOnClick code block, without creating custom buttons for ok and cancel.

[BLACKFIRE69]

FMXInno Custom Shapes:

Is it boring to use regular shapes every time? if so, you can start creating your own shapes to use in FMXInno.

.

[BLACKFIRE69]

hmm...
cool

.

[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.

[audiofeel]

Originally Posted by 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.

I don't see any potential in this idea. It works like an application within another application, and it requires additional resources. It will always be at the top of all the interfaces. In that regard, the "HTML Component Library" seems like a good option. It has excellent performance.

[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.


.