Bitmap Effects Generic PixelShader Helper Class

Personally I'm into simple code. Code should be as simple as possible todo the job and no more complex then needed. Case in point. Unless there is a strong reason to write my own command structure in Silverlight I'm going to go MVP or pMVP until I can see in Silverlight that MVVM is not just extra work (ie as when they get it to work like it does in WPF). Keeping this in mind I have been playing with pixel shaders. I tried this kind of thing by hand from scratch in Silverlight 2 and using Stegmens editiable bitmap class I could 'kind of' make this work however it was WAY to complicated to be reasonable. However with Silverlight 3 we have PixelShader support so we are gold. I reviewed a number of samples and wrote a few of my own in Shazzam (very cool tool I might add) but the one thing that bugged me was having a zillion pixel shader class's for each '.ps' so I made this simple yet generic class to clean up my source tree.

this is what I want to be able todo:

<Image Source="../Img/kasiadavid.jpg" Grid.Column="1" >
<Image.Effect>
<hsl:Shader x:Name="TargetShader" SetEffect="Ripples" />
</Image.Effect>
</Image>

Here I want to set a dependency property, in this case 'SetEffect' to some key value that will case the control called 'Shader' from my HackingSilverlight library and based on that select some ps file designated.

Here is my class to implement my 'Shader':

public class Shader : ShaderEffect
{
public Shader() { }

public string SetEffect
{
get { return (string)GetValue(SetEffectProperty); }
set { SetValue(SetEffectProperty, value); }
}

public readonly DependencyProperty SetEffectProperty = DependencyProperty.Register("SetEffect", typeof(string), typeof(Shader), new PropertyMetadata(new PropertyChangedCallback(OnSetEffectChanged)));

private static void OnSetEffectChanged(DependencyObject DpObj, DependencyPropertyChangedEventArgs e)
{
ShaderEffect ThisElement = DpObj as ShaderEffect;

if (ThisElement != null)
{
((Shader)(ThisElement)).PixelShader = new PixelShader()
{
UriSource = new Uri("HackingSilverlightLibrary;component/PixelShaders/" + ((Shader)(ThisElement)).SetEffect + ".ps", UriKind.RelativeOrAbsolute)
};
}
}
}

as you can see this could break if there is not ps file with the key name but add a little error handling and your good. :)

Custom Text Runs, Data Binding and cheating...

Faisel sent posted a question:

'Hi,
I have a requirement of showing additional text in a TextBlock. I have a Class in my silverlight application. I want to bind two of the properties in a TextBlock in my main page and show text something like this : "You make me feel - BONFIRE ".
The first part of the text here is a song name and the second part here is artist name. I need to show artist name based on the song name. For example if song is by another artist. It will show song name - "Still loving you - SCORPIONS" .
I tried to bind the Text property of the run to bind the Artist property to show the additional text in the TextBlock. There's some example of WPF which binds the Text property of Run by creating a BindableRun Class which derives from Run. But the problem in Silverlight is Run Class is Sealed in Silverlight.
Is there anyone who can help me to get the desired result. Someone please help me.'

I did the following response that I thought was interesting :) if it might make a few cringe... lol

one easy method would be to loose the binding. I know alot of people would be freaked out and this totally feeds into Dr. WPF's MVpoo design pattern but you could do something like this, so lets say we have this xaml that looks like this:

<stackpanel name="MyPanel" orientation="Vertical">
<button type="submit" content="add" click="Button_Click">
</stackpanel>

so the button doesn't need to be there and we could use a scroll panel or custom control but any element with a children collection would work. but in this case lets say we have this method button_click which contains this code:

TextBlock ThisBlock = new TextBlock();
//ThisBlock.Style = [whatever]...
ThisBlock.Text = Guid.NewGuid().ToString();
Run NewRun = new Run();
//Run.FontStyleProperty = ...
NewRun.Text = " ABC ";

ThisBlock.Inlines.Add(NewRun);
MyPanel.Children.Add(ThisBlock);

so each time you click the button you gets some text with a 'Run' at the end. to translate to the real solution when you load the page or get this data you need to parse it on your own in a loop and depending on some condition change the run context but you could also bind events and do other things at that time. of course you loose the whole data binding but really what it comes down to is does your code do the job?

the thread can be found at:

'http://dotnetslackers.com/Community/forums/showing-additional-text-in-a-textblock/t/3169.aspx '

anyway I know its a hacky way of doing things but hey, that is what 'hackingsilverlight' is all about :)

Silverlight Automated UI Testing

Working with alot of larger clients at IdentityMine we frequently work with teams that use automated testing and deployment systems. I did a post last year on deployment with msbuild and build environment deployments etc and today I'd like todo a quick post on wiring up a Silverlight application for automated UI testing. This is a great way to tied into existing test structures but keep in mind there is a Unit test framework off MSDN that is a great place to start.

http://code.msdn.microsoft.com/silverlightut/

and

http://weblogs.asp.net/scottgu/archive/2008/04/02/unit-testing-with-silverlight.aspx

So quick and dirty this method is kind of a hack to expose bits to existing web testing systems that can only talk to the DOM. with that... I'm going to focus on showing you alot of code...

To start with we have this simple application using this xaml keeping in mind I excluded the extrensous stuff...

<grid>
<grid.columndefinitions>
<columndefinition>
<columndefinition>
<columndefinition>
</Grid.ColumnDefinitions>
<textbox name="inputhere" height="30">
<button name="Btn1" content="process input" click="Button_Click" column="1" height="30">
<textbox name="Output" height="30" column="2">
</grid>

and in the code we add the following C#


private string ProcessString = "complete with [{0}]";

private void Button_Click(object sender, RoutedEventArgs e)
{
Output.Text = string.Format(ProcessString, inputhere.Text);
}

this works great but pretend it is much more complicated... So then we add the following code to our code behind...:

[ScriptableMember]
public void SetTextField(String InputValue)
{
inputhere.Text = InputValue;
}

[ScriptableMember]
public void ClickButton()
{
Button_Click(new object(), null);
}

[ScriptableMember]
public string GetValue()
{
return Output.Text;
}

and then we add the following to our page constructor:


HtmlPage.RegisterScriptableObject("MainPage", this);

and we add this #include er I mean 'using' statement:

using System.Windows.Browser;

from here we have exposed the key elements so any testing system that can talk to the Browser DOM can then wire up to what appear at JavaScript objects like this:

//simulates input:
top.document.getElementById('Silverlight1').content.MainPage.SetTextField("test");

// simulates a click
top.document.getElementById('Silverlight1').content.MainPage.ClickButton();


//gets a value.
alert( top.document.getElementById('Silverlight1').content.MainPage.GetValue() );

I know quick and dirty but now our automated UI web app infrastructure can 'test' our Silverlight application easily.

Dictionary Definition of Xaml (verb and noun)

A friend 'Ariel' from www.facingblend.com did a short post about Xaml being a verb. I've heard this a few times and thought this was cool to see it in print for the first time :)


Check the post out here:
Alternative uses for XAML


I also saw another post by a guy at MS Rob Relyea did a quick post references the first one. In Robs Post (http://blogs.windowsclient.net/rob_relyea/archive/2009/04/10/to-xaml-a-verb.aspx) he mentions a need for a definition so I'd like to offer a definition of Xaml including it as a verb and noun:



Xaml \Za - mul\

Etymology: Modern Technical Term English

Noun 1. Extensible Application Markup Language. Developed by Microsoft as a UI application Xml (Schema) based markup language designed to model application user interfaces suing a series or set of 'tags' as defined by the Xaml Schema of which there are a number of schemas depending on environment ie: WPF v.s. Silverlight.



Verb 1. The action or process of converting a visual asset or visualization into a Xaml(noun) based format for consumption in WPF/Silverlight related environements or tools. ex: I'm going to Xaml this image for you.

Indexablity for Search Engines in Silverlight

I saw a question as of late around the indexability of Silverlight for search engines much like an html based web site or web application. I know from my work with Microsoft and the Silverlight team that this has been taken into account and goes well with the toolablity story of microsoft. Compiled Silverlight is in a 'xap' file which is really a zip which is easily opened and any text based files, xml or xaml can be indexed and this was done with intent for this purpose. That being said that doesn't mean that all the of this is working up front as to my knowledge none of the spiders actually search zips yet but we expect that to happen at some point. Assumping that this happens then we want to make sure that our Xaml has logical names related to the content for all our x:name elements and that they are not only included in the application dll but as loose xaml in the xap.

Another thing to consider though is that as mentioned zips(xaps) are not indexed yet so it is a good idea to do the same kinds of things to our host files (actually is a good idea even if the zips are indexed) that you would do to optimized the page for search indexing. ie, meta tags, install experience code etc.

Happy Search indexing optimizationizing...

Silverlight Simon and New HackingSilverlight.net

So this is only for 'testing' certainly don't go check it out unless your doing it to test. It is certainly not ready for public consumption yet... So I'm working on a new version in SL 3 of the hackingsilverlight site that I uploaded today for testing. This includes Silverlight Simon (Ariel did the design for this)

http://www.hackingsilverlight.net/Simon.html

http://www.hackingsilverlight.net/

So check out the new design and I'll be adding the rest of the design over the next few months.

Silverlight 3 Fonts Loading or Not

Ariel (http://www.facingblend.com/) built this cool Simon says UI in Xaml (remember the electronic version that first came out I think in the early 80's) and asked me to add some brains for fun :) the game logic is pretty simple enough by C# standards. Ariel even got this cool electronic LED looking font. So I got it all working and I noticed that once the score got above 2 the cool font started being not so cool. I thought this might be a messed up or incomplete font or something bizarre but Ariel mentioned something about loading only the parts of the font needed on render or only the part of the font need is compiled into the xap... ??? hmmm... I could see a hack coming on.

I put this bit of xaml in the simon control:

<TextBlock Height="56" Width="60"
FontFamily="./Fonts/Fonts.zip#Digital Readout" Text="0 1 2 3 4 5 6 7 8 9"
Visibility="Collapsed" /$gt;

I compiled Simon and played a few turns until it got a bove 2 and poof my score board was working with all the font elements I need and still w/o the characters I'm not using. Its a hack but works great.

Silverlight 3 LOB Apps

I did this email interview about building LOB apps in Silverlight 3. I think its worth a read if your interested in the topic. My main point is/was 'yes' its ready :) so check it out.:

http://www.silverlightshow.net/items/David-Kelley-on-Is-Silverlight-3-ready-for-business.aspx

"Silverlight 3 is on its way with tons of new goodies. But each technology has to be well accepted from the business users in order to be successful. But what can help the business to take such a decision? We, at SilverlightShow.net, think that sharing experience is a good start.

This article is a part of our “Shared Experience” initiative that aims to give a place to every person or company that has experience in a commercial Silverlight product or project to share that knowledge. If you are one of them and you are willing to participate, download and answer our questions. In return, we will publish not only your answers, but a white paper of the Silverlight solution you have.

Let’s take a look at what David Kelley from IdentityMine has shared..."

Image Animations Problems in Silverlight 3

I was working on a new version of hacking silverlight (the sight) at mix using Silverlight 3 and one of the things I wanted todo was have more of a cloud sort of display of hightlights as opposed to a billboard and do this fakem up 3d using Faisels ViewPanel3D he sent me. it was all great but when the images animated to their new positions it was not smooth and no matter what I did I couldn't seem to be them to animation smoothly.

I talked to a few designers about this and some one mentioned pixel slitting or something like that so I did a bit of research (IE. paid attention to all the items in intellisence for images) and found a nifty setting that fix's the problem.

so it turns out there is not really pixel split or whatever it is they were saying or maybe there is under the covers but for pref reason it is turned off. So the magic setting that puts it back is:

UseLayoutRounding="False"

which seems to turn this thing off so what I think happens normally is that Silverlight is moving the image to the next pixel as opposed to pixel splitting and that can make slow moving images look like they are jerking a bit. So the images then look like:

<Image x:Name="CloudImageElement" Cursor="Hand" Stretch="UniformToFill" Opacity=".8" UseLayoutRounding="False"
MouseEnter="CloudImageElement_MouseEnter"
MouseLeave="CloudImageElement_MouseLeave"
MouseLeftButtonDown="CloudImageElement_MouseLeftButtonDown"
MouseLeftButtonUp="CloudImageElement_MouseLeftButtonUp" >
<Image.Effect>
<DropShadowEffect ShadowDepth="5" Opacity=".7"/>
</Image.Effect>
</Image>

and this seemed to work great. :)

Surface Everywhere

check out this TED conference demo doing multitouch sort of on any where. I can totally see this when I walk up to some one and then their shirt will suddending say this guy is an idiot so I know up front whom I am dealing with...

http://www.ted.com/index.php/talks/pattie_maes_demos_the_sixth_sense.html

I totally want a 'six' sense...

Multi-Touch Gesture Engine

One of the cool things about Silverlight 3 is the new multi-touch support. From a UX stand point this is just awesome to provide this kind of functionality. I know this guy Andrew that works at Identitymine that wrote a gesture engine for Surface that is just awesome. He was showing me this on his tablet at MIX at one of the many dinners. Its just amazing in part as he is just a supper genious :) really but also the kind of UX this provides for Windows 7 apps and more is just amazing. anyway check out the press release :

http://cs.identitymine.com/blogs/im_news/archive/2009/03/19/identitymine-introduces-the-identitymine-gesture-engine-to-support-advanced-multi-touch-development.aspx

its pretty slick and hoping he will port this to Silverlight 3 :)

Silverlight Presentation Design Rules...

Anyone that knows me well knows I'm in to rules. I have lots of them and even a little black rule book I like to use for fun (ie, Rule number 4 is Mexican food is good so long as it is not authenticate, this way I have an excuse to not eat food that is the least bit spicey.) . I realize this is a bit OCD and all but I like things that are OCD...

anyway over mix I wrote down a few short rules of thumbs for doing Silverlight Presentations (or any other kind) and much of this comes out of the theme at MIX that it is about the design, on top of the fact I have been reading alot of trending related books pointing to an increase in the need to be about design.

For me that is a hard thing. I have always been good at art, namely drawing and sculpting and much of the work I do in support of my 'hobbies' end of being works of Art. and if truth be told I'm probably better suited to be an artist then a programmer, however I just love the logic of coding. That all being the case I'm trying to send me self down the road of being a UX designer archtect sort of role and it starts with some rules I put to gether to statisfy my OCD.

So here they are:


1. Power point is evil.
2. Designs, UX, Images or even power point slides are never about a message or getting information accross but about emotion.
3. A 'Deck' should never be able to stand along and make since.
4. A Visual 'AID' is not an outline.
5. When a picture is worth a thousand words... is when you use a picture.

Along those lines we will see how far I get down that 'UX' Designer Architect... path.

Quantum Computers...and more

so strickly speacking not silverlight related however both very cool and computer/UX related

this one on quantum computers pushing us one step closer
http://www.physorg.com/news156710301.html

and this one on Next Gen UX
http://singularityhub.com/2009/03/04/the-next-generation-in-human-computer-interfaces-awesome-videos/

Twitter and Social Networking

I went to this exclusive dinner party at MIX tuesday night. at the table was a number of luminaries from Mark Brown (CEO IdentityMine) to John Stockton (Author, Acentium, SD2IG). The conversation evolved around UX and eventually into Twitter... I have stayed away from that digital crack but after falling on the side of the converstation for twitter I have decided that if I believe what I was saying I needed to use twitter...

http://twitter.com/DavidJKelley

So that being said Twitter allows a user to kind of plug into the community. It can be a collaboriation tool and almost a collective intelligence sort of tool, so that when I have a question I can post it and it gets answered quickly. Its like a big instance chat room that is open all the time. The power of the group mind to solve problems is clearly where I want to go and this tool among others allows us to get closer to this nervana of one ness.

Silverlight 3 Bits

http://silverlight.net/getstarted/silverlight3/default.aspx

MIX 09 - the coolest place on earth

its about design stupid. developers that can't get on board right brain thinking will be outsourced.



this I think is a critical trend that we in the tec field need to get that in the modern world it will be about design. I read a book 'A Whole New Mind' and if you take that with the book 'Age of Spiritual Machines' I think you can get a clear picture of what is coming and for us in the tec field it is about the design (just like Bill say's on stage just now at MIX) 'its a good time for design'



So instead of code its about the design or the user experience (UX)



Getting back to MIX and the keynote and any annoucements...

Expression Web (really I have a hard time not having Front Page flash backs) but the super preview is really cool... kind of like an uber frontpage...

There is the new version of ASP.NET, VS 2010, Windows Webapp Gallery, and Bizspark...

Expression Blend 3 is really got some cool new features, including:

* my favororiate is Sketchflow and the sketch flow player... very very cool.
* photoshop and illustrator imports
* behavior stuff is cool and designing with data is much better
* Source Control integration
* XMAL, C# and VB intellisense in blend...

As to Silverlight 3...

* 3d
* better data binding
* running on the desktop support even on the mac...
* GPU Hardware level support
* bitmap and pixel API's Pixel Shader effexcts
* new deepzoom stuff
* deeplinking navigation
* multi-touch support
* New Codecx built in (H.264, AAC, MPEG-4
* Raw Bitstream Audio/Video API for doing things like custom codex support
* and my personal favorate this second is the we have more features now in SL3 and the download is 40k smaller including all the SL2 features for the plug in.

Next Generation UX

Normally I'm not a big fan of alot of the koolaid you might see coming form big corporations including ms. But I am about cool UX even if I'm just a dev and not even that great of one to begin with but I got this link from Jobi about cool UX applications coming out of MS labs that is a must see for next gen user experiences which I hope to be a smaller part of creating using Silverlight. Check it out:

http://www.officelabs.com/projects/futurevisionmontage/Pages/default.aspx

MIX 2009

MIX is coming up. If Microsoft does the normal thing I'm sure we will get a good look at what is next for Silverlight. Hope to see you all there?

http://2009.visitmix.com/

The Ultimate Design Pattern

So I'm building out all these different variations on Command Pattern for Silverlight and writting articles on MVP or pMVP or MVVM or M-WTF and some times the entire discussion gets so esoteric that I want to screen. I mean really how the heck to you entirely seperate presenter from the model and view for example? in Silverlight its NEVER entirely seperate, not really. Anyway so as always Dr. WPF is the man and has a solution... W-V-poo which I think applies to Silverlight as much as WPF. Check out the article:

http://www.drwpf.com/blog/Home/tabid/36/EntryID/27/Default.aspx

Cool Silverlight 'Patterns'

My friend Nathan sent me this link to this cool Silverlight UX Pattern tool. From Infragistics in Silverlight lets you explore UX patterns visually and by tags and more. Check it out:

http://quince.infragistics.com

Xaml Fest, SD2IG and Coolaid

The Seattle Developer Designer UX Group meet wed night. Ableit we had to meet in the Lincon Square accross from where we normally meet but it was alot of fun. Charles was good enough to take a picture and prove that yes we do indeed drinking Coolaid, in this case 'Silverlight' Coolaid.

http://www.facebook.com/album.php?aid=17817&id=721326429&saved#/photo.php?pid=1757210&id=721326429

Here is some cool training you might be interested in the Seattle Area that Brain sent me on Mithun's blog:

Mithun's Blog with XamlFest announcement.
http://blogs.msdn.com/MithunD/
http://blogs.msdn.com/mithund/archive/2009/01/22/xaml-fest-coming-to-redmond.aspx

& event details & schedule is at:

XamlFest Redmond event on Feb 16 & 17.
http://blogs.msdn.com/usisvde/archive/2009/01/21/you-re-invited-to-xamlfest-redmond-february-16-17.aspx

The SD2IG meeting we talked about Smart Device UX. Our goal was to look at the designer developer work flow on mobile devices but clearly on the iphone it kind of sucks right now...

Devin and Matt, I must say the iUI kit that Matt used does give a good story for designers building HTML apps. But really apps on the iphone Devin showed us that this is very very difficult.

Microsoft Tag

Here is an interesting if only vaguely connected to Silverlight bit from Microsoft...

Microsoft 'Tag'

Personally I could do without the colors but is an interesting idea that allows these computer read tags for embedding information on a page, or email etc. Something like an ubber UPC. In silverlight I can see some uses such as on crossfader I could have a tag for each artist on the back of media tiles. but maybe only if the tags work with gray scales...

http://tag.microsoft.com/

DotNetShoutOut and Super Secret Silverlight 3

Check out the latest edition of Channel 9 with Dan Fernandez and some other guy. They mentioned a number of cool stuff including a project my friend Faisal's helped put together called 'DotNetShoutOut' and a few notes about the Super Secret Silverlight 3.

http://channel9.msdn.com/shows/This+Week+On+Channel+9/This-Week-on-C9-Live-Mesh-wins-a-Crunchie-Win-7-tips-and-a-VPC-and-Codeproject-apps/

Rounded Corners MediaElement

so I was working on a new media player for Crossfader and wanted the media element in the new wizbang super tile to be able to form fit as in have roundy corners... I swear I spent hours trying to make this work and I guess had a brain block on this and thanks to Jobi pointing out the obvious the solution looks like this:

<mediaelement width="0" name="ThisMediaElement" height="0" stretch="Uniform" source="http://localhost:36825/Seiryu.wmv" balance="5" volume="0" autoplay="True" downloadprogresschanged="ThisMediaElement_DownloadProgressChanged">
<rectangle width="Auto" name="ControlBack" fill="Black" radiusy="30" radiusx="30" height="Auto">
<rectangle width="Auto" radiusy="30" radiusx="30" height="Auto">
<rectangle.fill>
<videobrush stretch="Uniform" sourcename="ThisMediaElement">
</rectangle.fill>
<rectangle.stroke>
<lineargradientbrush endpoint="0.972438,1.14352" startpoint="0.972438,0.000225328">
<gradientstop offset="0" color="#FF848484">
<gradientstop offset="1" color="#FF000000">
</lineargradientbrush>
</rectangle.stroke>
</rectangle>

seemed like the obvious solution but some how missed it...

FacingBlend and the New Year

I have been off line for the Holidays, more a function of my wifes surgury in Decemeber. Over the holidays I noticed a designer friend of mine started blogging alot alot more. I was reviewing the material she posted and I think its great stuff. Check it out at:

http://www.facingblend.com/blog/