BackgroundEffects in Noesis Studio
Hey,
I try to blur parts of my background in Noesis Studio. I would like the rectangle shown in the attached picture to blur the background image. I just can't figure out how to get this done in Noesis Studio. How is that to be done?
Thanks for the help.
I try to blur parts of my background in Noesis Studio. I would like the rectangle shown in the attached picture to blur the background image. I just can't figure out how to get this done in Noesis Studio. How is that to be done?
Thanks for the help.
- Attachments
-
- Screenshot 2025-03-31 142124.png (71.19 KiB) Viewed 4034 times
Re: BackgroundEffects in Noesis Studio
Hi Danilo, Dorian here!
So the awesome thing, is that we support exactly what you're looking for within Studio!
This technique of blurring one Element with another can be achieved via a Behavior, and this is how you can do it:
Prep Work
1) Ensure that your background Element is named (either by double-clicking its name in the Navigator, or by selecting it in the Navigator and giving it a name at the top of its Properties panel). (We're doing this because we'll be targeting it by name in later steps.)
Creating a Behavior
2) Next, you're going to navigate to the Interactivity Panel [Ctrl+3], and jump to the 'Behaviors' Tab.
3) Now, we need to pick which Element we're going to use to blur the background Element. So, in the Navigator, select the rectangle that you want to use to do this.
4) With the rectangle Element still selected in the Navigator, press the '+' (Plus) icon at the top-right of the Interactivity/Behavior panel to add a new Behavior to the rectangle.
5) Select 'BackgroundEffectBehavior' from the ContextMenu that's popped out.
(This will add the rectangle to the Behaviors panel, and will populate the Properties for the Behavior on the right of the application window.)
Configuring the Behavior
6) You're then going to hover over the 'Source' field in the Behavior's Properties, and click on the little 3-Dot menu icon that appears, then click "Create Binding".
7) We are now going to select which Element we would like to target to be blurred. To achieve this, whilst remaining within the Binding section of the Behavior's Properties:
8) Select the "Name" tab, and then in the 'Element Name' dropdown list, find what you named your background Element in Step 1).
9) In the 'Path' field where by default it says "Not Set", simply delete that text from the field
Applying the Blur and Finishing Off
10) Still remaining within the Behavior's Properties, pick the BlurEffect from the 'Effect' section and set the strength of it in the 'Radius' field.
11) Save your Page
12) Close and re-open your Page's tab...and that should do it! (This step is normally not required, and we are investigating a fix to this bug at time of writing.)
Let us know if that did the trick, and would love to see the result too!
- Dorian
So the awesome thing, is that we support exactly what you're looking for within Studio!
This technique of blurring one Element with another can be achieved via a Behavior, and this is how you can do it:
Prep Work
1) Ensure that your background Element is named (either by double-clicking its name in the Navigator, or by selecting it in the Navigator and giving it a name at the top of its Properties panel). (We're doing this because we'll be targeting it by name in later steps.)
Creating a Behavior
2) Next, you're going to navigate to the Interactivity Panel [Ctrl+3], and jump to the 'Behaviors' Tab.
3) Now, we need to pick which Element we're going to use to blur the background Element. So, in the Navigator, select the rectangle that you want to use to do this.
4) With the rectangle Element still selected in the Navigator, press the '+' (Plus) icon at the top-right of the Interactivity/Behavior panel to add a new Behavior to the rectangle.
5) Select 'BackgroundEffectBehavior' from the ContextMenu that's popped out.
(This will add the rectangle to the Behaviors panel, and will populate the Properties for the Behavior on the right of the application window.)
Configuring the Behavior
6) You're then going to hover over the 'Source' field in the Behavior's Properties, and click on the little 3-Dot menu icon that appears, then click "Create Binding".
7) We are now going to select which Element we would like to target to be blurred. To achieve this, whilst remaining within the Binding section of the Behavior's Properties:
8) Select the "Name" tab, and then in the 'Element Name' dropdown list, find what you named your background Element in Step 1).
9) In the 'Path' field where by default it says "Not Set", simply delete that text from the field
Applying the Blur and Finishing Off
10) Still remaining within the Behavior's Properties, pick the BlurEffect from the 'Effect' section and set the strength of it in the 'Radius' field.
11) Save your Page
12) Close and re-open your Page's tab...and that should do it! (This step is normally not required, and we are investigating a fix to this bug at time of writing.)
Let us know if that did the trick, and would love to see the result too!
- Dorian
Re: BackgroundEffects in Noesis Studio
Hey Dorian,
This is genius. Thank you for this little Tutorial. I love how easy it is to create the blur effect.
For a quick prototype, I am pretty impressed with the results. I am curious how performant it is when used more often.
The only thing I would like additionally to that would be a more intense blurring, like the dynamic blur in iOS (like here):
I played with the radius but higher than 20 makes no sense it doesn't get more blurry by that just darker. Maybe providing a harder blur algorithm is something for the back burner for you guys (if you want to).
This is genius. Thank you for this little Tutorial. I love how easy it is to create the blur effect.
For a quick prototype, I am pretty impressed with the results. I am curious how performant it is when used more often.
The only thing I would like additionally to that would be a more intense blurring, like the dynamic blur in iOS (like here):
- Screenshot 2025-04-01 150132.png (40.01 KiB) Viewed 3991 times
Re: BackgroundEffects in Noesis Studio
The radius can be quite large, as shown in this example (click on the screen to see the blur), It can even be wider.
Are you sure going higher than 20 is not producing any change?
Are you sure going higher than 20 is not producing any change?
Re: BackgroundEffects in Noesis Studio
Mh, confusing. I see your xaml example goes to 80 and looks really blurry, that is kind of what I hoped for. Mine stops at a radius of 10 to have an effect. It just gets darker.
Here blur radius of 5:
Here blur radius of 20:
Here blur radius of 100:
And here a blur radius of 1000:
It has literally no effect on the big square box at some point. The Box has a Width and Height of 80 px and the background ist slightly transparent. I dunno if that has an effect on it.
Here blur radius of 5:
Here blur radius of 20:
Here blur radius of 100:
And here a blur radius of 1000:
Re: BackgroundEffects in Noesis Studio
Hey Danilo,
Quick favour, and just one last verification before we look at further diagnosis options --- would you be able to please confirm for me that in between each adjustment of the 'Radius' value, you:
1) Saved the file
2) Closed the file
3) Re-Opened the file.
Additionally, could you confirm for us the version number of the Studio app you're using? (the number in top-left corner of the application window)
Thank you!
- Dorian
Quick favour, and just one last verification before we look at further diagnosis options --- would you be able to please confirm for me that in between each adjustment of the 'Radius' value, you:
1) Saved the file
2) Closed the file
3) Re-Opened the file.
Additionally, could you confirm for us the version number of the Studio app you're using? (the number in top-left corner of the application window)
Thank you!
- Dorian
Re: BackgroundEffects in Noesis Studio
Hi,
I am simply trying to do what the OP explained, and I have been following the steps listed in the first reply of this post by dstewart.
However, as you can see below, I have no way of expanding the effect settings to adjust the blur strength - If I click the arrow nothing happens, what am I doing wrong?
I followed the steps where you add the source binding and assign element by name - should the yellow around the source go away - makes it feel like its a warning?
Using Noesis Studio v0.1243-beta
I am simply trying to do what the OP explained, and I have been following the steps listed in the first reply of this post by dstewart.
However, as you can see below, I have no way of expanding the effect settings to adjust the blur strength - If I click the arrow nothing happens, what am I doing wrong?
I followed the steps where you add the source binding and assign element by name - should the yellow around the source go away - makes it feel like its a warning?
Using Noesis Studio v0.1243-beta
Re: BackgroundEffects in Noesis Studio
Hi Gavmacca, Dorian here,
Thanks for writing to us to flag this, I've just looked into your situation, this appears to be a newly-introduced bug that appeared some time after 0.1.238.
I've just created a ticket, and we'll get on this immediately: #4468.
This will be fixed in our very next 0.1.244 release.
Thanks again for bringing this up, we really appreciate it!
- Dorian
Thanks for writing to us to flag this, I've just looked into your situation, this appears to be a newly-introduced bug that appeared some time after 0.1.238.
I've just created a ticket, and we'll get on this immediately: #4468.
This will be fixed in our very next 0.1.244 release.
Thanks again for bringing this up, we really appreciate it!
- Dorian
Re: BackgroundEffects in Noesis Studio
Thanks Dorian! So I wasn't going mad! Happy to have helped, looking forward to the fix!
Re: BackgroundEffects in Noesis Studio
Hi, I've just downloaded the latest release v 0.1.251 - and I still can't seem to follow these steps
Specifically on step 4 + 5 on the quoted post below - when you add the behaviour the whole shape vanishes (it changes to a visual brush that is invisible) - I assume this is a newly introduced bug or am I doing something wrong?
If i change it from a visual brush back to a fill with some transparency, I still cannot see the intended effect.
Thanks! I'm really eager to get my hands on this with it working!
Specifically on step 4 + 5 on the quoted post below - when you add the behaviour the whole shape vanishes (it changes to a visual brush that is invisible) - I assume this is a newly introduced bug or am I doing something wrong?
If i change it from a visual brush back to a fill with some transparency, I still cannot see the intended effect.
Thanks! I'm really eager to get my hands on this with it working!
Hi Danilo, Dorian here!
So the awesome thing, is that we support exactly what you're looking for within Studio!
This technique of blurring one Element with another can be achieved via a Behavior, and this is how you can do it:
Prep Work
1) Ensure that your background Element is named (either by double-clicking its name in the Navigator, or by selecting it in the Navigator and giving it a name at the top of its Properties panel). (We're doing this because we'll be targeting it by name in later steps.)
Creating a Behavior
2) Next, you're going to navigate to the Interactivity Panel [Ctrl+3], and jump to the 'Behaviors' Tab.
3) Now, we need to pick which Element we're going to use to blur the background Element. So, in the Navigator, select the rectangle that you want to use to do this.
4) With the rectangle Element still selected in the Navigator, press the '+' (Plus) icon at the top-right of the Interactivity/Behavior panel to add a new Behavior to the rectangle.
5) Select 'BackgroundEffectBehavior' from the ContextMenu that's popped out.
(This will add the rectangle to the Behaviors panel, and will populate the Properties for the Behavior on the right of the application window.)
Configuring the Behavior
6) You're then going to hover over the 'Source' field in the Behavior's Properties, and click on the little 3-Dot menu icon that appears, then click "Create Binding".
7) We are now going to select which Element we would like to target to be blurred. To achieve this, whilst remaining within the Binding section of the Behavior's Properties:
8) Select the "Name" tab, and then in the 'Element Name' dropdown list, find what you named your background Element in Step 1).
9) In the 'Path' field where by default it says "Not Set", simply delete that text from the field
Applying the Blur and Finishing Off
10) Still remaining within the Behavior's Properties, pick the BlurEffect from the 'Effect' section and set the strength of it in the 'Radius' field.
11) Save your Page
12) Close and re-open your Page's tab...and that should do it! (This step is normally not required, and we are investigating a fix to this bug at time of writing.)
BlurEffect.jpg
Let us know if that did the trick, and would love to see the result too!
- Dorian
Who is online
Users browsing this forum: No registered users and 0 guests