Table of Contents

Window or Folder: Blur Behind

The desired objective is to have the window open over a portion of the page (screen). The screen contents behind the window will be dimmed and blurred through the window (window background is semi-transparent). This feature can also be applied to folders.

Click here to see the effect.

Click here to see the video for the procedure below.

Procedure for Blurring behind a Window

  1. Create a simple window or open a desired window to modify.
    1. [0:00-0:28] This demo starts by confirming the blur behind is not activated
      1. Navigate to Main menu > Launcher Options > UI & Animation > Blur behind
      2. Back out to the page
    2. [0:29-1:17] Create the window using Resources to be used in the Blur demo
      1. Navigate to Main menu > Launcher Options > Resources > Window
        1. Tap Add and enter a unique name (for spaces use underscores). Tap OK.
      2. The desired window is now in Resources:Window. Back out to the page to now add that window to the page
    3. [1:18-1:35] Edit On should be activate (notice the Page Design menu at the top). Tap “+” to add an object (window)
      1. Select Graphic > Image > Window
      2. Scroll and select the just created window object. It now shows on the page and is selected automatically.
    4. [1:36-2:31] The window must be de-selected, then tapped to open. It opens full page. Notice the Page Design menu at the top now has an Edit ui-icon_edit.webp icon. Tap it.
      1. With the window now in it's Edit mode re-size it (since this demo is to show “Blur behind”) by dragging the “knobs” on each side.
      2. The window now shows an “Option” ui-icon_option.webp icon in the lower right corner. Tap it
      3. The Window Option dialog opens. The only adjustment here is to change the Background from it's default to a more attractive color.
      4. Tap Background > Color to open the “Color Picker”
      5. Select any color, but here was ARGB E4AEEF78.
      6. Tap OK to see the new color showing in the Background image. (Shadow was de-activated, just did not need it.)
      7. Back out to page
    5. [2:32-2:58] Now to turn on Blur behind
      1. Navigate to UI & Animation > Blur behind. Tap to activate.
      2. The Blur amount is tap to open it's dialog which shows a range of 10 - 100, with 100 being fully opaque (nothing shows). Leave the setting at 10 which is the slightest blur available.
      3. Back out to the page
    6. [2:59-3:03] The window is ready to test.
      1. Tap the default window icon
      2. The window opens with it's selected color background and the page behind is blurred.
    7. [3:04-3:30] Now change the window background so the page itself can be seen
      1. Tap the window's option ui-icon_option.webp icon to re-open the Window Options dialog.
      2. Tap Background > Color
      3. In ARGB, enter 00000000 for transparent
      4. Tap OK to return to the page
      5. The window is open with a clear background allowing a viewport to the blurred page behind it.
    8. [3:31-4:07] Now set a higher diffusion rate for the Blur amount
      1. Navigate to UI & Animation > Blur amount and tap it to open the dialog
      2. Set the amount at 50. Tap OK
      3. Back out to the page
      4. Tap the window to open it to see a noticeably blurred page (if any objects were in the window, the objects would be clearly visible).
    9. [4:08-4:34] The demo just resets the window background to the previously select color.

The demo is completed.