===== 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|{{ :howto:howto-window-blur-ezgif.com-resize.gif }}++ to see the effect.

Click [[https://youtu.be/EKwqQeaavRA|here]] to see the video for the procedure below.

==== Procedure for Blurring behind a Window ====

  - Create a [[howto-window-create_simple#to_access_mainm_enu_and_launcher_options|simple window]] or open a desired window to modify.
    - [0:00-0:28] This demo starts by confirming the ''blur behind'' is //not// activated
      - Navigate to ''Main menu'' > ''Launcher Options'' > ''UI & Animation'' > ''Blur behind''
      - Back out to the page
    - [0:29-1:17] Create the window using ''Resources'' to be used in the Blur demo
      - Navigate to ''Main menu'' > ''Launcher Options'' > ''Resources'' > ''Window''
        - Tap ''Add'' and enter a unique name (for spaces use underscores). Tap OK.
      - The desired window is now in ''Resources:Window''. Back out to the page to now add that window to the page
    - [1:18-1:35] ''Edit On'' should be activate (notice the Page Design menu at the top). Tap "+" to add an object (window)
      - Select ''Graphic'' > ''Image'' > ''Window''
      - Scroll and select the just created window object. It now shows on the page and is selected automatically.
    - [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:ui-icon_edit.webp?direct&25]] icon. Tap it.
      - 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. 
      - The window now shows an "Option" [[:ui:ui-icon_option.webp?direct&25]] icon in the lower right corner. Tap it
      - The Window Option dialog opens. The only adjustment here is to change the ''Background'' from it's default to a more attractive color.
      - Tap ''Background'' > ''Color'' to open the "Color Picker"
      - Select any color, but here was ARGB E4AEEF78.
      - Tap OK to see the new color showing in the ''Background'' image. (Shadow was de-activated, just did not need it.)
      - Back out to page
    - [2:32-2:58] Now to turn on ''Blur behind''
      - Navigate to ''UI & Animation'' > ''Blur behind''. Tap to activate.
      - 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.
      - Back out to the page
    - [2:59-3:03] The window is ready to test.
      - Tap the default window icon
      - The window opens with it's selected color background and the page behind is blurred.
    - [3:04-3:30] Now change the window background so the page itself can be seen
      - Tap the window's option [[:ui:ui-icon_option.webp?direct&25]] icon to re-open the Window Options dialog.
      - Tap ''Background'' > ''Color'' 
      - In ARGB, enter 00000000 for transparent
      - Tap OK to return to the page
      - The window is open with a clear background allowing a viewport to the blurred page behind it.
    - [3:31-4:07] Now set a higher diffusion rate for the ''Blur amount''
      - Navigate to ''UI & Animation'' > ''Blur amount'' and tap it to open the dialog
      - Set the amount at 50. Tap OK
      - Back out to the page
      - 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).
    - [4:08-4:34] The demo just resets the window background to the previously select color.

The demo is completed.

<WRAP noprint>{{page>site:site-footer-comment_feedback_block}}</WRAP>