nsis custom page sizes

Question

I am trying to create a page that is showing my website (nsWeb::ShowWebInPage). The problem is, it can't show the whole page.

How can I define new sizes (height x width) to this page?

Answer 1

This is a big task. Here are the steps for making it work, in a somewhat flexible way.

Download Resource Hacker: http://www.angusj.com/resourcehacker/

Then decide if you want to edit the Unicode or the ANSI version of NSIS. You could do both, but why bother. Find your Program Files\NSIS folder first. This will be the BASE folder for the following directories in the next step if you are compiling for ANSI. If you are compiling for unicode, then step into the Program Files\NSIS\Unicode folder, and THIS is now your base folder for the next steps.

Look inside the \Contrib\UIs folder. This folder stores a bunch of executable files. Depending on which configuration of MUI2 you are using you need to edit the respective file AND modern.exe. The version of the file depends on if ou have a header image, if it's adjusted right or not, etc.

For example, in my case, I had these definitions in my installer script

!define MUI_HEADERIMAGE
!define MUI_HEADERIMAGE_RIGHT

Now, when I look in \Contrib\Modern UI 2\Interface.nsh, I can figure out fairly easily which file I need to edit. Here is what I look at:

!insertmacro MUI_DEFAULT MUI_UI "${NSISDIR}\Contrib\UIs\modern.exe"
!insertmacro MUI_DEFAULT MUI_UI_HEADERIMAGE "${NSISDIR}\Contrib\UIs\modern_headerbmp.exe"
!insertmacro MUI_DEFAULT MUI_UI_HEADERIMAGE_RIGHT "${NSISDIR}\Contrib\UIs\modern_headerbmpr.exe"
!insertmacro MUI_DEFAULT MUI_ICON "${NSISDIR}\Contrib\Graphics\Icons\modern-install.ico"
!insertmacro MUI_DEFAULT MUI_UNICON "${NSISDIR}\Contrib\Graphics\Icons\modern-uninstall.ico"
!insertmacro MUI_DEFAULT MUI_BGCOLOR "FFFFFF"

Since I'm using the MUI_HEADERIMAGE_RIGHT, I will be editing the modern_headerbmpr.exe file.

Now, open Resource Hacker and load the file you want to edit. Resource Hacker has a GUI, so as you step through each dialog and each control on the dialog, you can see the GUI change side after you press 'recompile'. This part is pretty straight forward. Step through ALL the dialogs (why not) and edit the controls and sizes, including that of the main installer. In this file, there is only one, so you ALSO need to open up modern.exe, which contains the sub-controls that goes into the installer pages. Again, step through all the dialogs and change all the sizes so each control looks good. Compile, and save the files back in to this folder.

Bonus points: For testing, just overwrite the original files. You did take a backup, right? For deployment, name the new files something like "modern-wide.exe", for each file you edit. Later, we can dynamically switch between these with a little magic.

Recompile your installer, and now you should see a new size installer.

If you don't, check that you are in fact in the right ANSI versus UNICODE folder, or your changes won't work.

SOME of the screens, however, add controls dynamically. As an example, look at \Contrib\Modern UI 2\Pages\Welcome.nsh.

This file adds the title label and welcome text in code, and NOT via the exe files. Argh, I know! So locate the Macro:

!macro MUI_FUNCTION_WELCOMEPAGE PRE LEAVE

And these lines of code:

${NSD_CreateBitmap} 0u 0u 109u 193u ""
...
${NSD_CreateLabel} 120u 10u 195u ${MUI_WELCOMEPAGE_TITLE_HEIGHT}u "${MUI_WELCOMEPAGE_TITLE}"
...
${NSD_CreateLabel} 120u ${MUI_WELCOMEPAGE_TEXT_TOP}u 195u 130u "${MUI_WELCOMEPAGE_TEXT}"

As you can see, the units here are X Y WIDTH HEIGHT, so now you get to modify these controls. Of course, if you don't use the welcome page, don't bother. But you may need to edit the pages that doesn't work for you in this manner.

You can overwrite the original, or again, save the file with "-wide" appended to the filename.

Now, your basically done !

Now, to make this MUCH easier to switch, I will assume you saved:

welcome.nsh as welcome-wide.nsh
modern.exe as modern-wide.exe 
and let's say modern_headerbmpr.exe as modern_headerbmpr-wide.exe

Now, in your installer, add this !define BEFORE including MUI2.nsh:

!define MUI_ALTERNATE_SIZE_EXT "-wide" 

in interface.nsh, change the code to this:

!ifdef MUI_ALTERNATE_SIZE_EXT
    !insertmacro MUI_DEFAULT MUI_UI "${NSISDIR}\Contrib\UIs\modern${MUI_ALTERNATE_SIZE_EXT}.exe"
    !insertmacro MUI_DEFAULT MUI_UI_HEADERIMAGE "${NSISDIR}\Contrib\UIs\modern_headerbmp.exe"
    !insertmacro MUI_DEFAULT MUI_UI_HEADERIMAGE_RIGHT "${NSISDIR}\Contrib\UIs\modern_headerbmpr${MUI_ALTERNATE_SIZE_EXT}.exe"
    !insertmacro MUI_DEFAULT MUI_ICON "${NSISDIR}\Contrib\Graphics\Icons\modern-install.ico"
    !insertmacro MUI_DEFAULT MUI_UNICON "${NSISDIR}\Contrib\Graphics\Icons\modern-uninstall.ico"
    !insertmacro MUI_DEFAULT MUI_BGCOLOR "FFFFFF"
!else
    !insertmacro MUI_DEFAULT MUI_UI "${NSISDIR}\Contrib\UIs\modern.exe"
    !insertmacro MUI_DEFAULT MUI_UI_HEADERIMAGE "${NSISDIR}\Contrib\UIs\modern_headerbmp.exe"
    !insertmacro MUI_DEFAULT MUI_UI_HEADERIMAGE_RIGHT "${NSISDIR}\Contrib\UIs\modern_headerbmpr.exe"
    !insertmacro MUI_DEFAULT MUI_ICON "${NSISDIR}\Contrib\Graphics\Icons\modern-install.ico"
    !insertmacro MUI_DEFAULT MUI_UNICON "${NSISDIR}\Contrib\Graphics\Icons\modern-uninstall.ico"
    !insertmacro MUI_DEFAULT MUI_BGCOLOR "FFFFFF"
!endif

This essentially switches your installer from regular to "-wide" when you define MUI_ALTERNATE_SIZE_EXT as "-wide". Note how I added the ${MUI_ALTERNATE_SIZE_EXT} directly to the file name include of the files I changed, and you should of course do this for the files YOU ended up changing when you started.

Now, you will also need to do this in the MUI2.NSH file, like so:

!ifdef MUI_ALTERNATE_SIZE_EXT
    !include "Pages\Components.nsh"
    !include "Pages\Directory.nsh"
    !include "Pages\Finish.nsh"
    !include "Pages\InstallFiles.nsh"
    !include "Pages\License.nsh"
    !include "Pages\StartMenu.nsh"
    !include "Pages\UninstallConfirm.nsh"
    !include "Pages\Welcome${MUI_ALTERNATE_SIZE_EXT}.nsh"
!else
    !include "Pages\Components.nsh"
    !include "Pages\Directory.nsh"
    !include "Pages\Finish.nsh"
    !include "Pages\InstallFiles.nsh"
    !include "Pages\License.nsh"
    !include "Pages\StartMenu.nsh"
    !include "Pages\UninstallConfirm.nsh"
    !include "Pages\Welcome.nsh"
!endif

As you edit more files, you simply keep a version of each new UI you create in separate filenames, and now you can switch the UI style of your installer with just the one definition. You can name files as you wish, and expand this scheme to other areas where you may run into trouble.

Not an easy task to do this, but it can be done.