You had me at "Hello World!" : Source Code

3 Easy Steps to WPF Pixel Shaders. Template Project and Five Shader Samples (Twirl UI, Light, Blobs, Grayscale and Wave reflection)

nikola — Thu, 04 Sep 2008 19:10:00 GMT

In This Tutorial:

· Template project and simple 3-step instructions to kick start WPF pixel shaders

· Introduction to Pixel Shaders in WPF

· Source Code for 3 pixel shaders

· Links to 2 pixel shader sources on the web

Using Shaders in WPF: The Easy Way

Pixel shaders are a great way to enhance your WPF program in many ways. I show just few of the possibilities here and provide a good framework to start developing your own effects.

3 steps to kick start you with WPF pixel shaders:

1. Install DirectX SDK

2. Download and open the Shader template project from Nikola’s site: http://www.nokola.com/sources/ShaderEffectTemplate.zip

3. Start coding your effect in MyEffect.fx

Next: Read the Beginner’s Presentation to WPF Pixel Shaders

Downloads

Prerequisites: DirectX SDK from Microsoft.com

View the Beginner’s Presentation to WPF Pixel Shaders here: http://blogs.msdn.com/nikola/attachment/8924657.ashx

Download the template project here: http://www.nokola.com/sources/ShaderEffectTemplate.zip

Download these Pixel Shader samples: Twirl UI, Blobs and Lights: http://www.nokola.com/sources/ShaderEffects.zip Note that you have to enable each effect by itself for best view J Just comment out the other 2 effects when playing at the sample.

Check out these 2 cool pixel shader tutorials:

Grayscale effect: http://bursjootech.blogspot.com/2008/06/grayscale-effect-pixel-shader-effect-in.html

Wave reflection effect: http://rakeshravuri.blogspot.com/2008/07/wave-reflection-shader-effect-in-wpf.html

Hope you like it!

Cool Silverlight Splash Screen Concept Demo (including Source Code)

nikola — Thu, 14 Aug 2008 10:19:00 GMT

In this tutorial:

Creating a cool (and easy) Vista-like "ray of light" effect in Silverlight
Creating images for splash screens

The demo below shows a "core" that emits rays of light as a hypothetical download progresses.

Download source code

Images used to create this sample:

Bottom:

Top:

Just right-click, save them and they are yours! Since I created them myself from scratch, you are free to use them in your projects!

One requirement if you use them: please send me an e-mail at nokola@nokola.com. I appreciate it a lot! Please also link to this site somewhere in the app credits or from your site.

Structure of the Sample

The sample displays 2 images. The bottom image is the “rays” view and the top image contains the “core”.

Having the rays be more intense in the center and less intense at the end is nice for 2 reasons:

· The image is visually appealing

· If we animate the Opacity of the rays from 0 to 1 it would look as if the rays “shine out” gradually

I use the second fact to make my life easier. The sample initially displays the rays image with Opacity=0 and the core image on top with Opacity=1.

When the user clicks the Opacity of the rays is animated using this simple XAML animation:

<DoubleAnimation Storyboard.TargetName="imgAnim" Storyboard.TargetProperty="Opacity"

To="1" Duration="00:00:03.00" />

</Storyboard>

Creating the Images

Another challenging part when making this sample is creating the actual images from scratch. Fortunately there are a bunch of good tutorials that you can use.

For example, check this tutorial: http://www.gimptalk.com/tutorial/abstract-art-(-good-for-background-)-33124-1.html. Then on the last step separate the rays image from the core image.

Make sure to convert the black (or white) background to transparency (Colors | Color To Aplha in this case).

I hope you like this sample! I enjoy it a lot!

7 Easy Steps to Learn C#: Silverlight C# Compiler and Loading DLLs from a server at runtime in Silverlight

nikola — Sun, 27 Jul 2008 18:35:00 GMT

In This Tutorial:

· C# compiler demo for the web - type code in a web page, compile and execute it on the client

· How to enable dynamic code compilation for a Silverlight application

· How to execute third party DLL from within a Silverlight application

Download source code

View sample

What Is It Good For?

· The compiled code is fast. It runs full speed on the client.

· It enables very flexible programs easily. Here are some example uses:

o Procedural texture generation (Perlin noise, 3-d textures, clouds, landscapes, and other). This is my next demo, btw.

o Fractals. The ability to compile code on-the-fly is very nice for experiments with fractals

o Advanced option that enables huge flexibility of LOB apps. Good for filtering database queries and such

o Simple plugins to extend a program

· As a side effect of using this technique, you’ll learn how to delay load Silverlight code – usable for making huge apps that load themselves part by part only when needed

· It’s good for educational purposes. Inspire more people to try and start coding!

Design

The C# compiler sample does not compile on the client machine. Instead, the C# source is sent to a web service and compiled there.

Then on the client side Silverlight loads the DLL that is returned from the web service and executes it.

Implementation

Perhaps the most interesting part of this sample is loading and assembly at runtime from within the Silverlight client application:

I’ve seen several heavy and not-so-obvious implementations on the web. It’s just a few lines of code, once you know how.

AssemblyPart part = new AssemblyPart();

MemoryStream stream = new MemoryStream(e.Result.AssemblyRawData);

_compiledAssembly = part.Load(stream);

Another interesting part is the web service compilation code:

With small modification, you can change it to target VB or WPF. Look at CompileHelper.cs in the source code.

Microsoft.CSharp.CSharpCodeProvider provider;

CompilerParameters parameters;

CompilerResults results;

parameters = new System.CodeDom.Compiler.CompilerParameters();

parameters.GenerateInMemory = true;

parameters.OutputAssembly = outputAssemblyFileName;

parameters.TreatWarningsAsErrors = false;

parameters.WarningLevel = 4;

parameters.TempFiles.KeepFiles = false;

if (TargetFramework == TargetFramework.Silverlight)

{

// Silverlight only: ignore the rsp file, because we want to replace the

// default desktop .net framework mscorlib and other "default" dlls

// with the Silverlight ones

parameters.CompilerOptions = " /nostdlib ";

}

parameters.ReferencedAssemblies.AddRange(referencedAssemblies);

try

{

provider = new Microsoft.CSharp.CSharpCodeProvider();

results = provider.CompileAssemblyFromSource(parameters, text);

errors = new List<ErrorInfo>(results.Errors.Count);

foreach (CompilerError error in results.Errors)

{

ErrorInfo info = new ErrorInfo();

info.Column = error.Column;

info.ErrorNumber = error.ErrorNumber;

info.ErrorText = error.ErrorText;

info.FileName = error.FileName;

info.IsWarning = error.IsWarning;

info.Line = error.Line;

errors.Add(info);

}

if (results.Errors.Count == 0)

{

return results.CompiledAssembly;

}

return null;

}

catch (Exception e)

{

Debug.WriteLine(e.Message);

errors = new List<ErrorInfo>();

return null;

}

Here are the 7 easy steps to learn C#, in my opinion: http://www.nokola.com/trycsharp/LearnCSharp.aspx

That’s all. Hope you’ll like this sample!

ASP.NET Authentication for Silverlight Applications (Accessing ASP.NET Membership, Profile and Role Services)

nikola — Tue, 08 Jul 2008 18:09:00 GMT

This is very good for web sites that have ASP.NET Authentication (or plan to have) and have Silverlight apps.

Brad Abrams, from his blog:

"Here is what I plan to show:

1. Login\Logout
2. Save personalization settings
3. Enable custom UI based on a user's role (for example, manager or employee)
4. A custom log-in control to make the UI a bit cleaner
"

http://blogs.msdn.com/brada/archive/2008/05/03/accessing-the-asp-net-authentication-profile-and-role-service-in-silverlight.aspx

Source code available on the above post.

Building the Reallistic Water Ripples Sample in Silverlight

nikola — Fri, 04 Jul 2008 20:26:00 GMT

In this tutorial:

- creating and rendering water ripples

- optimized image generation

- JPEG decoding component for Silverlight

Source code for this sample

Algorithm

The algorithm is based on Hugo Elias’ 2D water tutorial.

On each render step we have the state of the water for the current frame and the previous frame.

The state is stored in two 2-dimensional arrays of integers that are as big as the image.

For each pixel position of the image we store the height of the water (or wave) in that position. 0 means “sea level”. Larger than 0 means that we have a raised wave, less than zero means that we have wave below “sea level”. We need information for both raised and low waves in order to be able to combine them.

On each render step we use data from the current frame (Buffer2) and the previous frame (Buffer1) and write the results into Buffer1.

damping = some non-integer between 0 and 1 (I use 0.94)

for every non-edge element:

loop

Buffer2[x, y] = (Buffer1[x-1,y]

Buffer1[x+1,y]

Buffer1[x,y+1]

Buffer1[x,y-1]) / 2 - Buffer2[x,y]

Buffer2[x,y] = Buffer2[x,y] * damping

end loop

Swap the buffers

Display Buffer1

end loop

You can go ahead and look at Hugo’s explanation about why does this work, or continue reading here.

Because the 2 buffers contain consecutive steps for the water, we can get the water velocity at a given location [x, y] by subtracting: Buffer2[x, y] – Buffer1[x, y]

Also we want the waves to spread out, so we smooth the buffers on every frame:

Smoothed[x,y] = (Buffer1[x-1, y] +

Buffer1[x+1, y] +

Buffer1[x, y-1] +

Buffer1[x, y+1]) / 4

In the actual algorithm we multiply the smoothed value by 2 in order to decrease the effect of velocity.

And last, the waves lose energy as they travel:

Buffer2[x,y] = Buffer2[x,y] * damping

Rendering the Water

The render buffer contains heights of the water in each pixel. We’ll render it using shading and refraction.

The shading variable below determines the direction and intensity of the light. For example, if you set shading = xoffset, you’ll get light straight from the left. I decided to set the light at the bottom-right part of the screen.

For every non-edge pixel in the buffer

Xoffset = buffer[x-1, y] – buffer[x+1, y]

Yoffset = buffer[x, y-1] – buffer[x, y+1]

shading = (xoffset - yoffset) / 2

// note: x+xoffset and y+yoffset do not wrap around the texture

t = texture[x+Xoffset, y+Yoffset]

resultColor = t + Shading

// make sure the color is within limits

resultColor = SaturateTo255Max(resultColor)

plot pixel at (x,y) with color resultColor

End loop

Creating Drops/Splashes

I made a simple function to create a circular splash, although you can create different splashes to simulate dropping irregular shapes into the water or other motion effects (e.g. star, line or use the letters of your name).

The function creates a splash given its radius at location (cx, cy). The splash begins below water level and rises above at the end.

Splash(cx, cy, radius):

for each y from (cy - radius) to (cy + radius)

for each x from (cx - radius) to (cx + radius)

dist = distance from point (x,y) to (cx, cy)

if (dist < radius) // if within splash circle

buffer1[x, y] = 255 - (512 * 1 - dist / radius)

end if

end loop

The Silverlight Side

The rendering loop is called every 60ms and does this:

1. Add a random splash (rain drop) on the image

2. Calculate the next frame to render

3. Display the next frame

There are 3 components used to render each frame:

Renderer has the “raw” buffers of integers containing wave height for each pixel in the frame. On each frame the renderer mixes its raw buffer with the background image (decoded using FluxJpeg.Core.Image component) and outputs each it to a dynamic image generation surface (EditableImage).

Links

Original 2D water algorithm (Hugo Elias)

This is the algorithm used as a base for the sample.

Dynamic image generation (Joe Stegman)

Optimized dynamic image generation based on Joe's (Nokola)

I’m using optimized version of Joe’s algorithm to render the effect on screen.

Silverlight JPEG encoder/decoder in C# - FJCore on fluxcapacity.net

The binary is used to decode the JPEG image in Silverlight.

Optimized Joe Stegman's Dynamic Image Generation (Twice the Speed)

nikola — Fri, 04 Jul 2008 20:19:00 GMT

I needed a good and relatively fast dynamic image generation code for Silverlight (for the next sample, you’ll see).

Joe Stegman has an excellent post including source code for generating images in Silverlight: http://blogs.msdn.com/jstegman/archive/2008/04/21/dynamic-image-generation-in-silverlight.aspx

Joe’s code is simple and easy to understand, but can be optimized for speed quite a bit.

After doing some profiling (looking in Task Manager) and optimizations, I managed to speed up the code more than twice. To find out the slowest functions, I just ran and image generation in a loop and looked at the CPU usage in Task Manager when disabling each of the functions.

These are the things I updated:

· All the image data is not copied anymore in the WriteChunk() function

· One big array was initialized on every frame in Encode()

· Changed SetPixel() to remove some checks in Release mode

· The Adler32 algorithm was amazingly slow (it’s doing two prime number divisions for each pixel)…after looking at Wikipedia I found a trick that makes the adler use 5550 times less divisions J

The optimized source is here: http://blogs.msdn.com/nikola/attachment/8690157.ashx

Further optimizations

There can be more optimizations, for example the PngEncoder always works with the same image width/height, so it may avoid some calls to write to a memory stream and bulk several calls into one.

The second memory stream in Encode() can be removed.

Maybe the image can be stored png-encoded and just updated by SetPixel. This way the stream creation will be very fast. This will be good if for example only 10% of the pixels are changed each frame.

I hope someone else will pick up the source finish what we started J (or I’ll finish it later)

Note: this is a remake of a post that was accidentally deleted.

EasyHyperbar Navigation Control - A hyperbar, only easier (in Silverlight)

nikola — Fri, 04 Jul 2008 06:17:00 GMT

In this Tutorial

· Analysis of the usability of the typical Hyperbar Control

· Silverlight sample with source code for a better control (in my opinion)

There are two important traits of a navigation control: usability and looks.

Usability of the control can determine if a person will be using your application in the long term or even short term.

Looks determine if the users will even try using the control or not. Good looking control may be the difference between someone clicking on your web page or closing it.

An easy to use control:

· Is unobtrusive

· Is self-explainable

· Does not need special knowledge or skills to operate (e.g. “pixel hunting” skills)

Why the EasyHyperbar control?

The usual Hyperbars look cool, but generally lack the above 3 usability features:

· Unobtrusive – the typical Hyperbar control expands on both sides, which shifts the attention to those sides, even when people hover in the middle of the control (may be OK after long use, but can be irritating at first)

· Self-explainability – the typical Hyperbar control contains only icons. Although it looks better, icons don’t always clearly identify the item they are associated with and they may not be universally recognizable (while text in general is). Consider the icons for Blog and Source Code pages of a website: without text can you be sure that everyone will understand where the icons point to?

· Special knowledge/skills – The positions of the icons in a typical Hyperbar control shift as the mouse hovers over them. This is counter-intuitive for people that used to click on icons that never move.

The EasyHyperbar control addresses the above 3 issues (arguably compromising a little on “cools”):

· Does not expand on the sides, while still keeping “hyperbarish” look by enlarging controls next to the mouse

· Contains text below the icons and description above the icons

· The icons don’t shift on mouse over, making it easier to click on

Try it out:

See how it is built

Download source code

Ray Tracing in Silverlight

nikola — Tue, 10 Jun 2008 10:16:00 GMT

I had some free time today and did this:

I'd like to note that LukeH made the core raytracing engine in C#. He built it using linq and the code looks very elegant .

I did the "Silverlight" part of it. There are some things to think about with ray tracing in Silvelright - see the links at the bottom for more info.

Source Code

How to Build?

Official Silverlight Raytracing Page

Silverlight: How to Make Your WCF Web Service Work for All Users

nikola — Mon, 09 Jun 2008 00:26:00 GMT

Specification of the Problem

A WCF web service works when a user types site in his browser with www in the name:

· http://www.nokola.com/SampleService/ServiceClientAppTestPage.aspx Works OK!,

but it stops working if the same site is typed without www:

· http://nokola.com/SampleService/ServiceClientAppTestPage.aspx Fails with error message:

“The remote server returned an unexpected response: 404 Not Found”

Note: the samples in this article are using Silverlight 2 Beta 2.

Why is This Happening?

WCF Web services work currently with one base Uri only. Some website hosts (if not most) pass 2, 3 or more base Uri-s to a web service when they activate it.

For example for the above web service the based addresses passed during activation may look like this:

http://www.nokola.com/SampleService/ServiceClientAppTestPage.aspx

http://nokola.com/SampleService/ServiceClientAppTestPage.aspx

http://something.something.nokola.com/SampleService/ServiceClientAppTestPage.aspx

If we don’t do anything special to filter the base addresses, our web service creation will fail. If I remember correctly, the error message looks like this:

This collection already contains an address with scheme http. There can be at most one address per scheme in this collection.

Parameter name: item

To work around this issue, I create a custom ServiceHostFactory and return only one base address:

public class MyServiceHostFactory : ServiceHostFactory {

protected override ServiceHost CreateServiceHost(Type serviceType, Uri[] baseAddresses) {

return new CustomServiceHost(serviceType, new Uri("http://www.nokola.com/SampleService/ServiceClientAppTestPage.aspx "));

}

public class CustomServiceHost : ServiceHost {

public CustomServiceHost(Type serviceType, params Uri[] baseAddresses)

: base(serviceType, baseAddresses) { }

protected override void ApplyConfiguration() {

base.ApplyConfiguration();

}

Because we can return only one address, our service is usable only from this address. That’s why when I type http://nokola.com/SampleService/ServiceClientAppTestPage.aspx I got the above error message.

One Way to Fix It

I’ve posted the not working code of the WCF Service here: http://www.nokola.com/sources/ServiceClientApp.zip

Let’s fix it!

The fix that I will apply is to create a second .svc file and create a custom factory for the non-www address in it. Then I’ll programmatically call one service or the other from within the Silverlight Client App, based on what address the user typed in their browser.

Step 1: Create ServiceNoWww.svc

Copy-paste in Solution Explorer Service.svc and rename it to ServiceNoWww.svc

Change its factory specification to:

Factory="MyServiceHostFactoryNoWww"

Step 2: Create custom factory for the ServiceNoWww.svc in code behind

Open App_Code/Service.cs and add (don’t change the existing one) this text:

public class MyServiceHostFactoryNoWww : ServiceHostFactory {

protected override ServiceHost CreateServiceHost(Type serviceType, Uri[] baseAddresses) {

return new CustomServiceHost(serviceType, new Uri("http://nokola.com/SampleService/Service.svc"));

}

Note that I removed the www. before nokola.com and named the class same using the same name specified in ServiceNoWww.svc

Step 3: Change the client app to switch between the two services transparently

Replace the service instantiation code in Page.xaml.cs.

Original:

client = new ServiceClientApp.ServiceReference1.ServiceClient();

Changed:

Binding defaultBinding = new System.ServiceModel.BasicHttpBinding();

EndpointAddress defaultAddress;

if (HtmlPage.Document.DocumentUri.AbsoluteUri.ToLower().Contains("www."))

{

defaultAddress = new System.ServiceModel.EndpointAddress("http://www.nokola.com/SampleService/Service.svc");

}

else

{

defaultAddress = new System.ServiceModel.EndpointAddress("http://nokola.com/SampleService/Service.svc");

}

client = new ServiceClientApp.ServiceReference1.ServiceClient(defaultBinding, defaultAddress);

}

client = new ServiceClientApp.ServiceReference1.ServiceClient(defaultBinding, defaultAddress);

Note: you don’t have to add reference to the second service in your app, only change the default address using the above code.