FMXInno - Windows Fluent Design Installer UI for Inno

[Tihiy_Don]

Originally Posted by BLACKFIRE69

@Tihiy_Don,

- Updated FToggleCheckBox.FontColor method.

Thanks, everything is working as it should now.

[BLACKFIRE69]

The FMXInno Dev is getting new features daily. guys, i need your thoughts on the following specific features, as some of them are extra features and may not be necessary for every user in our FMXInno community. if you want these features in the final release, let me know.

1. Desktop Widgets:

* Similar to MacOS Sonoma, these widgets will be positioned on the active desktop,
  not on the installer interface.

-- Includes CPU / RAM / DISK / Network / Battery usage.
-- Temperature.

-- (The weather widget is currently in the development stage, not fully finished)

-- Clock (available in both Digital and Analog).
-- Image gallery slideshow.
-- Installation status: Remaining / Elapsed time, Installing speed, etc.
-- Users can create custom widgets as desired.
-- Fully customizable.

2. Co-Pilot sidebar Panel:

* Similar to Windows Co-pilot, Co-pilot sidebar will be shown in an extended space of 
  the installer on the left or right. meaning, the installer will automatically be 
  resized (expanded/collapsed) when the Co-pilot side-bar is activated/deactivated.

-- Powered by GPT-3.5 Turbo (paid users can use GPT-4 +).
-- DALL-E is not yet available (even for paid users).

-- Ability to define custom error codes or grammar queries for the corresponding
   installer. so, the Co-pilot will describe these errors or specific statuses and 
   recommend suggestions when the user asks about them.

-- By default, an animated image/button (like Apple's Siri) will indicate the 
   Co-pilot on the installer until the user changes it.

-- Fully customizable.

.

[Behnam2018]

Hi audiofeel Thank you very much for your 👌

[BLACKFIRE69]

FMXInno - Installer template

-- A common question that the FMXInno community always asks is whether there's a tutorial or guidance to create their own installer from scratch using FMXInno. however, there's currently no such tutorial because there're many areas to cover for beginners, making it a challenging task.

-- A possible and effective solution, i believe, is to provide a common template. this way, people can use it as a base and make changes on top of it until they gain enough experience to build their own installer.

-- Take the following provided script as the template; i've tried to keep everything simple and included average features to match modern styles. also, study the examples included in the attachment to the first post for more information.

-- If you've any questions or if anything is unclear, feel free to ask me or the FMXInno community. we'd be happy to help you.

Features:

* Splash: Static png
* Music: Equalizer
* Taskbar: Preview / Progress
* Buttons: Botva2-Like
* ProgressBar: DotGauge / Botva2-Like / ThinProgressBar

* Installer: Background image
* Browse Dir: Fluent UI
* Uninstaller: Background image

* Shortcut: Desktop / StartMenu
* ISArcEx: Srep+lolz

.

[BLACKFIRE69]

i've added two new functions to retrieve the build date of the FMXInno library. i hope they'll be helpful in some cases.

function wGetFMXInnoBuildDate: Integer;
procedure wGetFMXInnoBuildDateEx(var YearW, MonthW, DayW: Word);

1. Method - 01

function FMXInnoBuildDate_1: String;
var
  YearW, MonthW, DayW: Word;
begin
  wGetFMXInnoBuildDateEx(YearW, MonthW, DayW);

  Result := Format('Build Date:  %d-%d-%d', [YearW, MonthW, DayW]);
end;

2. Method - 02

function FMXInnoBuildDate_2: String;
var
  YearW, MonthW, DayW: Word;
  EncodedDate: Integer;
begin
  EncodedDate := wGetFMXInnoBuildDate;

  YearW   :=  EncodedDate shr 9;
  MonthW  := (EncodedDate shr 5) and $0F;
  DayW    :=  EncodedDate and $1F;

  Result := Format('Build Date:  %d-%d-%d', [YearW, MonthW, DayW]);
end;

.

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



.