FileForums - FMXInno - Windows Fluent Design Installer UI for Inno

FileForums (https://fileforums.com/index.php)

- Conversion Tutorials (https://fileforums.com/forumdisplay.php?f=55)

- - FMXInno - Windows Fluent Design Installer UI for Inno (https://fileforums.com/showthread.php?t=104852)

FMXInno Community

-- Frequent Requests from the FMXInno Community --

Quote:

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

Quote:

- 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

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 :(

Quote:

Originally Posted by Fak Eid (Post 505147)

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.

Help with WebView

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.

Add parameters to WebView

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.

Custom Slideshow and Generic WebView Example

Real life examples are in Epic Games Installer

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

Code:

[Files]

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

Code:

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;

Code:

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.

Code:

j: Integer;

GameImage: FImage;

SlideShowTimer: FTimer;

Code:

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);

Code:

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.

FMXInno - Updates

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:

Quote:

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.

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?

Quote:

Originally Posted by Fak Eid (Post 505320)

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.

.

Quote:

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

Code:

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

.

FMXInno - Updates

[ FMXInno Cumulative Update - 2024/Aug/28 ]

--- Changelog

Code:

* 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:

Quote:

* 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:

Code:

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;

Code:

  // 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:

Quote:

* 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:

Code:

  { 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!

.

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:

Code:

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:

Code:

[Execs]

[Execs\AppExe1]

Name=Horizon Forbidden West

Filepath=HorizonForbiddenWest.exe

Parameters=--fullscreen

It is like this instead:

Code:

[Execs\AppExe1]

Name=Horizon Forbidden West

Filepath=HorizonForbiddenWest.exe

Parameters=--fullscreen

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

Quote:

- 'pWinNotification' has been removed.

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

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

For the checkboxtree component (checkbox, radiobutton).

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

Hi everyone
hi BLACKFIRE69, I want to remove all the button mods and leave them original anthem, browse, back, next, cancel and pause, can we do that?

FMXInno - Update

FMXInno Quality Update - [October 27, 2024]

Code:

1. Updated `FNewINI` class and `MINI.exe`  

   - Now reads and saves INI files in UTF-8 without BOM.



2. Updated `FCheckboxTree` class  

   - Added new properties; you may need to adjust your current scripts.



3. Compatibility with the Latest Windows Version  

   - Optimized for Windows 11 24H2.

   - Compiled in RadStudio 12.2 (latest update).



4. Font Functions for Windows 11 24H2  

   * The following functions are incompatible with 24H2:

     - `InstallFMXFont`

     - `InvalidateFMXFont`

     - `DeleteFMXFont`



   * Use these alternative functions:

     - `AddFontResource2`

     - `RemoveFontResource2`



5. New Color Picker App Added



6. General Improvements and Bug Fixes.

- For Members -

Code:

1. Source Code Reorganization  

  - Now uses unit scope names.

  - Various units have been renamed for clarity.

  

2. The latest source code will be available in the coming days for members.

https://cdn.discordapp.com/attachmen...872c08508db81&

I had a question and a suggestion on "FCheckboxTree". I hope the difficulties of translation allow me to get my point across.

When using FCheckboxTree, the logic of the Checkbox is slightly different than in the original inno setup. In the original, when selecting 1 of the components in the Checkbox tree, all those that are somehow related to the selected one are selected. I hope you understand me. In FMX, this is implemented a little differently. They are not always marked, which looks strange from the 1st side. It would be cool to see similar logic to the original inno setup.

Even in FCheckboxTree, you cannot select and remove Radiobutton, they are in FCheckboxTree, but it is problematic to combine them with regular Checkboxes.

In Inno Setup version 6.4.0, there are issues with FMX, specifically with the procedure:
pTaskbarPreviewEx(FMXForm.HandleHWND, True);

After launching the main form, the following message appears:
"Taskbar cannot find window handles"

And shortly after that:
"Failed to initialize the taskbar. TaskbarPreviewEx failed"

https://imgur.com/IL2I8fR

Can you help me? What compressor is supported with this setup, I've searched but couldn't find it.

Hi BLACKFIRE69,

It seems that installers built with FMXInno do not load correctly when running under Linux. I understand asking to support Linux is a huge ask, so I was wondering if you could add some form of bypass to FMXInno so that if the installer is detected to be running under Wine, it only loads the absolute bare minimum to result in no crashes?

Thanks!

Gods please teach a problem: when the background is gif files, why encounter older hard drives, such as ssd's hard drive to release the file is very slow and slow, innosetup code: TopLayer.FCreate(FMXForm.Handle);
TopLayer.SetBounds(FMXForm.GetLeft, FMXForm.GetTop, FMXForm.GetWidth, (50));

GifImg.FCreate(TopLayer.Handle, ExtractAndLoad('9.gif'), True);
//GifImg.Opacity(0.1);
GifImg.SetBounds(0, 0, {#BaseWidth}, {#BaseHeight});

Quote:

Originally Posted by audiofeel (Post 508112)

My guess is that there are too many frames in your gif animation file or its size is large. my example uses a gif animation with a minimum framerate and a size of 1.35 MB. Yes, there is a delay, but it is minimal.

I'll test it. Thanks.

Thank you very much for this very complete and high-quality package.

https://s12.gifyu.com/images/bhv3s.png
1. How to fix: Selecting Drive other than C drive does'nt update free space
2. How to add command-line parameters to desktop shortcut

Quote:

Originally Posted by audiofeel (Post 509149)

Code:

[Execs]

; AppExe1=Tile Caption|Exec Directory|Exec File|Shortcut Name|Parameters|IconFilename|IconIndex

AppExe1=Red Dead Redemption 2||Launcher.exe|Red Dead Redemption 2 v1.0.1436|-fullscreen -skipintro|{app}\RDR2_icon.ico|0



[Icons]

#ifdef AppExe1

Name: {group}\{#E1[62]}; Filename: {app}\{#E1[60]}\{#E1[61]}; Parameters: {#E1[63]}; IconFilename: {#E1[64]}; IconIndex: {#E1[65]}; WorkingDir: {app}\{#E1[60]}; Check: CreateShortcuts1;

Name: {commondesktop}\{#E1[62]}; Filename: {app}\{#E1[60]}\{#E1[61]}; Parameters: {#E1[63]}; IconFilename: {#E1[64]}; IconIndex: {#E1[65]}; WorkingDir: {app}\{#E1[60]}; Check: CreateShortcuts1;

#endif

Thank you!

It took long to respond

I’m really sorry it took me a long time to come up with something new for the FMXInno project.
There were several personal matters I had to go through,
and I didn’t have enough time to focus on the project I started.

Long story short,
I am a Full Stack Engineer, and my younger sister is a Software Engineer.
We both received new career opportunities far away from our hometown.
We decided to take those opportunities and moved away.

It took much longer than expected to settle down, and I am currently doing a few remote jobs,
so it hasn’t been easy to find free time.

I couldn’t finish the FMXInno December 2024 update (more than a year ago).
I will come back with an update, but please give me some time.

Thanks.

Hi dear BLACKFIRE69

thank you for ur GREAT FMXInno project. NICE AND WONDERFUL, BRO

i have created a setup which plays a music and have a font,

the problems are:

1. the font wont load at all!!! Win10 and Win11 x64 tested

2. on some users' systems for no reason only the music will play and no setup screen will show and i can not find the problem.

- and is there any way to make the setup window rounded?

here is my setup script:

EXPIRED

any help is really appreciated,

awaiting ur respond, bro
kind regards

Quote:

Originally Posted by Cuttlas (Post 510394)

Hi dear BLACKFIRE69

thank you for ur GREAT FMXInno project. NICE AND WONDERFUL, BRO

i have created a setup which plays a music and have a font,

the problems are:

1. the font wont load at all!!! Win10 and Win11 x64 tested

2. on some users' systems for no reason only the music will play and no setup screen will show and i can not find the problem.

- and is there any way to make the setup window rounded?

here is my setup script:

https://limewire.com/d/Kabbd#upBW4OpSGu

any help is really appreciated,

awaiting ur respond, bro
kind regards

Fixed....