Table Of Contents

I should point out that this article starts out with me thinking it was going to be a blog post, nothing more, and in reality it is not much more than a blog post, but I have a rethink and although it is very small I think it may be useful to some folks, which is why I decided to release it as an article in the end. As I think that there may be some readers that take this the extra step and use it in their own apps.

So enough of the self flagellation, what does the thing attached actually do.

Well ok, here it is, for ages I have marvelled at the Web addin by CoolIris called "PicLens", which I have to say is the best add in I have ever seen. I have even tried to write my own version of this which myself and fellow coder Marlon Grech did for WPF, we did not do as good a job as CoolIris.

Now as CoolIris PicLens is a browser addin, what makes it even more impressive is the fact that it runs in the browser. How the hell is this possible. I decided to have a look at whether it would be possible to host the CoolIris PicLens addin in my own WPF app, and to see if I could manipulate what was shown on the 3d wall, and that is what this small article is all about.

This section will explain how the demo WPF app hosts the CoolIris PicLens browser addin.

Flash (COM)

The very cool thing (at least I think so, there are folks who detest Flash but I love it), is that the CoolIris PicLens browser addin is just a standard Flash SWF file. That is kind of cool, as it means I can embed it in my own page. I know people hate Flash but as I stated I like it, and CoolIris has fully exposed its functionality via JavaScript. You can read more about how to embed the CoolIris PicLens addin using their documentation link, which you can find at http://www.cooliris.com/developer/reference/.

It is quite detailed. But for me, all I wanted to achieve was to be able to host the addin in my own web page which itself was hosted inside my own WPF app. So let's have a look into that, shall we.

Step 1: Creating some XAML to host the HTML page that will in turn host PicLens

This is by far the easiest part, all we have to do is create a WebBrowser (.NET SP1) control, that we can use to host an arbitrary web page. This is the relevant XAML:

The moderately hard part of all of this is setting up the CoolIris PicLens addin. CoolIris actually exposes a express wall creator, but that uses an EMBED object tag, which is bit more rigid and less flexible that creating the CoolIris PicLens addin using JavaScript. I chose to use JavaScript as it offered me greater flexibility.

The entire page to host the CoolIris PicLens addin looks like this (I will explain some of this later):

But for now, all you need to understand is that the CoolIris PicLens addin is a Flash SWF file and we can create an instance of it using JavaScript.

FlashVars

As you can see from the above example HTML file, there are really 2 main parts. One of them is the FlashVars, which is really a dictionary of configuration values, that can be used to configure the CoolIris PicLens addin.

Let me explain what I am setting there for the CoolIris PicLens addin.

feed: Dictates what media stream to use (more on this later)

showEmbed: Toggles the visibility state of the show embed button (I have it turned off)

showSearch: Toggles the visibility state of the show search button (I have it turned off)

For a complete list of available options, you can check out the CoolIris PicLens addin documentation at the following URL:

The next thing that the JavaScript makes use of is the swfobject.embedSWF library. This small but of JavaScript allows the embedding of Flash SWF files. This is a standard library and can be obtained from the following URL:

You can see that it sets various options such as the URL to the SWF and various other bits and pieces such as height/width, etc.

Media Feeds

The more eagle eyed amongst you will notice that I am using the Flickr API, which has a URL similar to this "api://www.flickr.com/?search=Robots". Now according to the CoolIris PicLens addin documentation, you should be able to create your own custom RSS media stream.

This is described at http://www.cooliris.com/developer/reference/media-rss/. To do this, you would need to create an actual web site hosted in IIS, with an HTML file which hosted the CoolIris PicLens addin in it (similar to the example file included), and also create a RSS XML document which is also part of the IIS web site. The documentation suggests that you just also create a crossdomain.xml file which MUST also be located at the root of you IIS installation. I tried this and almost got it working, to the point I knew it was using my own RSS stream, but it still complained about a missing crossdomain.xml. I am not the most patient of people when it comes to the web, it just ain't my bag man, so I leave this as an exercise for the reader.

The demo app simply allows the user to type a keyword, which is then used against the Flickr API. This still obviously requires some interaction between the managed C# code and the browsers JavaScript, more on this in just a minute.

Browser Manipulation

As I just eluded, the attached code makes use of the Flickr media stream API. So all the attached demo code really does, is allow the user to input a new keyword and creates the appropriate Flickr media stream API URL, based on the new keyword, and then passes that to the CoolIris PicLens addin via a JavaScript call. This does mean we need some way of getting stuff from managed code (WPF in this case, though this would be the same in WinForms I would think), into the browser to call some JavaScript.

So let's have a look at that, it is fairly easy to do, we just need to use the System.Windows.Controls.WebBrowser.InvokeScript() method. Here is how the demo app does this:

An Interesting Discovery

Along the way while I was looking for the best way to invoke JavaScript inside the WebBrowser, I came across a rather cool DLL/Namespace, which is as follows:

The Microsoft.mshtml DLL can be referenced to give you access to some rather rich HTML interaction types.

Then you just need to include this namespace using mshtml; and then look what you can do with the WebBrowsers document. You can basically do any of the typical DOM things you would expect like adding child nodes, adding attributes, injecting JavaScript, etc.

This however is not used in the demo app, I just thought it was cool, and could be very useful. You can read more about the Microsoft.mshtml DLL and its exposed types over at:

Mark Of The Web

One interesting thing that nags the crap out of me is when I open a web page up and I get the security bar. You may be interested to know that you can get rid of this, by using some special markup in your web content. I have done just that. This is called "Mark Of The Web", which you can read more about right here: http://msdn.microsoft.com/en-us/library/ms537628(VS.85).aspx.

This is what MSDN has to say about it:

"The Mark of the Web (MOTW) is a feature of Windows Internet Explorer that enhances security by enabling Internet Explorer to force Web pages to run in the security zone of the location the page was saved from—as long as that security zone is more restrictive than the Local Machine zone—instead of the Local Machine zone. The role of the MOTW is more prominent with Microsoft Internet Explorer 6 for Windows XP Service Pack 2 (SP2) because of increased security restrictions in the Local Machine zone. When you are developing Web content, the MOTW enables you to test your active HTML documents in the security zone where you intend the pages to run. Adding the MOTW to your Web pages also enables you to fully test their compatibility with users' security settings."

The Finished Thing

Anyways folks, that is all I have to say for now. I know this is a very small article (and would have made a nice blog posting), but I just felt that some of you may find it useful, and I would rather a wider audience receive something useful.

So apologies that this article is so small and not my normal mammoth of an article (remember mammoths died out).

I couldn't figure out why this wasn't working for me when page displayed fine in Firefox, Chrome and IE 8. Finally hit me that I had to change the Target Platform to x86 to work right on my x64 machine.

Hey Sacha,
another really interesting article. Good to see you doing so well. I still remember how good your flash apps were when we were working @ Hickstead.

gets a 5 from me.

Programming today is a race between software engineers stirring to build bigger and better idiot-proof programs,
and the universe trying to produce bigger and better idiots. So far the universe is winning !

Hey hey Chris, how are you man, that's a blast from the past. It is largely down to you that I have gone on to get into programming actually. How are things these days, you are not at MCS I take it. I now work up in London doing finance apps using WPF/WCF/WF and LINQ. Its a nice job.

Obviously things have gone ok for me, as I am now an MVP which is very nice. But how about you, crazy robots interfaces was the last thing you were working on I think.

Anyway drop me a reply to this to let me know how you are getting on, would be good to hear what you are now doing.

Stay cool man

PS : you can see all my articles right here : http://www.codeproject.com/script/Articles/MemberArticles.aspx?amid=569009

there are some cool WPF ones in there I feel.

Sacha Barber

Microsoft Visual C# MVP 2008-2010

Codeproject MVP 2008-2010

Your best friend is you.
I'm my best friend too. We share the same views, and hardly ever argue

It is largely down to you that I have gone on to get into programming actually.

Really, wow now I'm going to worry about what kind of monster I have created !!!

Things are going pretty good for me too. I was still @ Gemba (was MCS) until about 2 1/2 years ago when I eventually got made redundant ( not a bad thing as it turns out), we were still doing the same old VB6 stuff for production line monitoring etc. Although just befopre I left we had started work on an online SaaS version. I think Darren and Carl are still there.

Any way I really landed on my feet and I have ended up working for an independant school in Eastbourne (I now live in Hailsham), I look after their website (share point 2007) and I do a few funky things with webparts and I finally learned a proper language (c#). I am alos involved in lopoking after thrie MIS system but that is just in house support. Its very relaxed and quiet during the holidays (I don't get to work school hours unfortunately)

Luckily I am in a department of one so I have a farily free technical reign and I keep trying to find ways to slip new tech into what I do here.

Sacha Barber wrote:

PS : you can see all my articles right here : http://www.codeproject.com/script/Articles/MemberArticles.aspx?amid=569009

To be honest I have been following your articles for sometime but have been too shy to post a reply

I am totally blown away by the stuff that you do, top class ( I am so jealous ).

I'll be watching for your next big article and you never know I might even understand some of it !!

Do you have idea, why it is Not working in IE6? I checked all sites listed as sample in http://www.cooliris.com/[^], but all of them gives some message boxes (same message 3 times) before starting slide show.