Just code - Tamir Khason : Silverlight, SVG

New year – new blog or how to migrate Community Server to any other engine, supports XML-RPC

Tamir Khason — Fri, 02 Jan 2009 02:33:04 GMT

Please update your bookmarks, because the new url of this blog is http://khason.net/ (you have not update RSS feeds, it will be done automatically). Why I did it? Why I decided to go to “stand-alone”… Well. there are some reasons. Generally, I do not want to explain all those here, but trust me, there are some. The main reason is, that there is no responsible person in charge for this blog platform in Microsoft Israel. This why, if your blog is popular and you have a respect to your blog visitors, you cannot host it here… Take a look into new comments notifications in my inbox. Would you answer your readers with such “small amount” of SPAM and capcha, that cannot be fixed already for three years in this platform? This how my inbox looks like for last three years. So now, you should not ask me, why I not answered your email or comments. Aren’t you? :)

Currently, all comments in this blog are disabled, so if you want to comment, please use new url of posts (this will appear shortly in the beginning of each post). Also, this post will not be syndicated in RSS.

So, this post is the last. I loved this platform, and loved people started it. But, unfortunately, it seemed, that bloggers community is not important enough for new platform managers.

Also, If you want to learn how to use C# and XML-RCP to migrate from CS2007, used in this platform, visit my new home :)

Have a great year and, as always, be good people. This post marked with all possible tags automatically. Sorry.

How to make Silverlight be AiR?

Tamir Khason — Mon, 28 Apr 2008 00:29:02 GMT

[This blog was migrated. You will not be able to comment here.
The new URL of this post is http://khason.net/blog/how-to-make-silverlight-be-air/]

Today we’ll speak about three issues

How to make Silverlight application to run as stand alone application and how to insert this application inside your application?
How to escape Silverlight from it’s sand box (how to make it run in full trust mode)
When first two items done, how to make Silverlight to access anyfile in your file system?

Looks scary? Let’s see first reasons for those “hackery” targets. The main reason is to make Silverlight Air (you, probably understand what I’m speaking about :)). Why? When I want to build Silverlight Image Upload control. The one similar to those Yahoo, Facebook and many others have. With live preview, editing (before uploading), drag and drop, etc. Yes, I do not want ugly File Open dialog from Silverlight. I want it sexy, yet functional! To do this, we have to make Silverlight be able to access filesystem. Of cause I want to ask user to authorize me first, then I can get an access.

The other reason is to incorporate Silverlight control inside WinForms application. Why? There are some reasons - “light weigh stuff”, maybe :). Maybe banner ads inside desktop application. It’s just cool :). Well, there are some other more serious reasons. So let’s start.

First task – to make it run as stand alone application.

Well, this one is easy. All you have to do is to have WebBrowser control with Silverlight content inside it in your application. So,

WebBrowser wb = new WebBrowser();
wb.Parent = panel1;
wb.Dock = DockStyle.Fill;
wb.Url = new Uri("http://0x15.net/play/SLFindResource/SLFindResource.html");

We done. But we’re in desktop, thus I want it full trust… This is most interesting part of today’s post.

Second task – to make it run in User Full Trust mode.

First try – to incorporate Silverlight’s OCX (ActiveX) control. Add npctrl.dll from [Program Files]\Microsoft Silverlight\[Version] – this is ActiveX and Visual Studio will create wrapper with AxHost. This one is cool, but it wont work. why? As you, probably, know Silverlight connected to it’s web page host DOM when we’re using it as stand alone player it cannot find it’s document, thus initialization failed. So what to do? What can provide me DOM from one side and run in full trust from the other side. Someone remember what HTA is (it is not mobile device, it’s very beginning of RIA era). HTML applications were run by very special host, named mshta.exe it’s in [Windows]\System32 folder and it’s still there. Everything running inside MSHTA will run by default in full trust mode. From one hand it’s regular IE, (do we have DOM), from other hand it’s make us able to run full trust internet application. Let’s use it (from code)

ProcessStartInfo mshta = new ProcessStartInfo("mshta", "http://0x15.net/play/SLFindResource/SLFindResource.html");
Process p = Process.Start(mshta);

Now we have strange window, running our Silverlight application. What’s next? Incorporate it inside our application. What’s the problem p (my process).MainWindowHandle and then SetParent for to the control I want. Well, it does not work. MSHTA has no (publicly) main window. So, we’ll find it and then change it’s parent. His class named “HTML Application Host Window Class”.

LockWindowUpdate(GetDesktopWindow());
ProcessStartInfo mshta = new ProcessStartInfo("mshta", "http://0x15.net/play/SLFindResource/SLFindResource.html");
Process p = Process.Start(mshta);
p.WaitForInputIdle();
ptr = FindWindow("HTML Application Host Window Class", null);

SetParent(ptr, panel1.Handle);
SendMessage(ptr, WM_SYSCOMMAND, SC_MAXIMIZE, 0);

LockWindowUpdate(IntPtr.Zero);

Yu-hoo. We hosted Silverlight page inside our application. It’s full trust so, we can access file system. But wait… Silverlight is not designed to have an access to the file system. The only space it can see is isolated storage, thus it has no classes for listing files anywhere. what to do?

Third task – to make it access user’s file system

We need another ActiveX to run from Javascript (or C# code) that knows to access to file system. Our hosting document can initialize it and then expose relevant methods to Silverlight. What’s such class? Let’s back to gold era of unsafe computing – we have Scripting.FileSystemObject there. This class is very dangerous it can do anything in local file system. Many system administrators using this class to script their evil login scripts (those black quick command line promps, that doing something bad to your system each time you’re logging in in your domain). It know everything about your disks and can be run from full trust environment. So, it’s just exactly what we need. Get all drives in your machine

drivetypes = [ 'Unknown', 'Removable', 'Fixed', 'Network', 'CD-ROM', 'RAM Disk' ],
driveprops = [ 'DriveLetter', 'DriveType', 'ShareName', 'IsReady', 'Path', 'RootFolder', 'FileSystem', 'SerialNumber', 'VolumeName', 'TotalSize', 'AvailableSpace', 'FreeSpace' ];

function getdrives() {
var fso = new ActiveXObject( 'Scripting.FileSystemObject' ),
e = new Enumerator(fso.Drives),
add = function(i) {
   i = driveprops[i];
   var prop = f[i];
   if( ( prop || prop===0 || prop===false ) && ( i!=='AvailableSpace' || prop!==free ) ) {
    if( /(Type)$/.test( i ) ) { prop = drivetypes[ prop ]; }
    if( /(Size|Space)$/.test( i ) ) { prop = bykb( prop, true ); }
    s.push( i.toCamelCase() + ':\t' + ( i.length < 8 ? '\t' : '' ) + prop );
   }
},

Then folders

function getfolder( s ) { s = trim( s ) || 'C:';
var fso = new ActiveXObject( 'Scripting.FileSystemObject' ),
e, f, i, r = [];
if( fso.FolderExists( s ) ) {
f = fso.GetFolder( s );
e = new Enumerator(f.SubFolders);
for( ; !e.atEnd(); e.moveNext() ) {
if( ( i = e.item() ) ) { r.push( ' ' + i ); }
}
e = new Enumerator(f.files);
for( ; !e.atEnd(); e.moveNext() ) {
if( ( i = e.item() ) ) { r.push( '' + i ); }
}
}
return r;
}

And files at the end

function getfile( form ) {
var fso = new ActiveXObject( 'Scripting.FileSystemObject' ),
forReading = 1, forWriting = 2, forAppending = 8,
dd = function( o, s ) {
   try {
    s = f[s] + '';
    o.value = s.replace( /^(\w{3}) (\w+) (\d\d?) ([\d:]+) ([\w+]+) (\d+)$/, '$3 $2 $6 $4' );
   } catch(e) {
    o.value = e.message;
   }
},

Very cool we have files by using f = fso.GetFile( name ); method, now we can do anything with it. For example get or set attributes f.attributes, or rename f.Name = s, or, even delete it f.Delete(); Isn’t it really evil?

We done. Now you can run Silverlight as full trust desktop application and, even host it wherever you want. Even inside calculator…

ProcessStartInfo calc = new ProcessStartInfo("calc");
using (Process p = Process.Start(calc))
{
    p.WaitForInputIdle();
    SetParent(ptr, p.MainWindowHandle);
    SendMessage(ptr, WM_SYSCOMMAND, SC_MAXIMIZE, 0);
    p.WaitForExit();
}

Happy programming and be good people.

SilverForms.zip [53.7 Kb]

SVG vs. Silverlight head-to-head fight

Tamir Khason — Thu, 24 Jan 2008 23:47:07 GMT

[This blog was migrated. You will not be able to comment here.
The new URL of this post is http://khason.net/blog/svg-vs-silverlight-head-to-head-fight/]

Adobe stops supporting SVG next year, thus there are some SVG consumers are looking for the replacement of this technology, by other, that will be supported. The only technology, can actually replace SVG is Silverlight. Yes, Flex, too, but it's too complicated to perform transitions. Today, we'll look into those two technologies and try to understand how to perform migration easily. Let's start from SVG (Adobe SVG 3.x) vs SL (Silverlight 1.0) syntax

SVG

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg width="200" height="100">
</svg>

<Canvas xmlns="http://schemas.microsoft.com/client/2007"
Width="200" Height="100">
</Canvas>

Looks pretty the same, no? At least, very similar. Let's see what's going with text.

SVG

<text x="10" y="15" font-size="12">
Hello World!
<tspan x="10" dy="1.6em" font-size="8">This is</tspan>
<tspan x="10" dy="1.6em" font-size="20">SVG text</tspan>
</text>

<TextBlock Canvas.Left="10" Canvas.Top="15" >
<Run Text="Hello World!" FontSize="12"/>
<LineBreak/>
<Run Text="This is" FontSize="8"/>
<LineBreak/>
<Run Text="Silverlight text" FontSize="20"/>
</TextBlock>

Similar too, but what's about rendering? From now and on, you'll need Silverlight 1.0 and SVG 3.x plugins in order to see working samples.

Let's look closer

And even more closer

Silverlight renders small and large text much better, then SVG do.

Our next station is splines and simple geometry.

SVG

<rect width="100" height="50" fill="blue" stroke="black" stroke-width="3" x="0" y="0"/>

<Rectangle Width="100" Height="50" Fill="Blue" Stroke="Black" StrokeThickness="3" Canvas.Left="0" Canvas.Top="150" />

That's look very similar. What's about lines?

SVG

<path fill="white" stroke="black" stroke-width="2" d="M20,140 Q100,20 100,140 Q100,220 180,140" />

<Path Fill="White" Stretch="Fill" Stroke="Black" StrokeThickness="2" Data="M20,140 Q100,20 100,140 Q100,220 180,140"/>

That's the same. Even coordinates and tangents are equal. So, how it renders?

Well. There are some differences here.

Never mind, let's go on into animations

SVG

<circle cx="200" cy="150" r="40" fill="red">
<animate attributeName="cy" dur="5s" repeatCount="indefinite" keySplines="0.5 0.1 0.9 0.5;0.1 0.5 0.5 0.9" calcMode="spline" keyTimes="0;2.5;5" values="150;350;150"/>
</circle>

<Ellipse Width="80" Height="80" Fill="Red" Canvas.Left="160" Canvas.Top="-91" x:Name="ellipse">
    <Ellipse.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)" RepeatBehavior="Forever">
                        <SplineDoubleKeyFrame KeyTime="00:00:02.5" Value="200" KeySpline="0.5 0.1 0.9 0.5"/>
                        <SplineDoubleKeyFrame KeyTime="00:00:05" Value="0" KeySpline="0.1 0.5 0.5 0.9"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Ellipse.Triggers>
    <Ellipse.RenderTransform>
        <TransformGroup>
            <TranslateTransform/>
        </TransformGroup>
    </Ellipse.RenderTransform>
</Ellipse>

Here, it looks like a lot of differences, however, if you'll look into code, you'll see, that there are no difference between the methods. Even key splines are the same. Let's look deeper into code.

SVG	SL
circle	Ellipse
animate	DoubleAnimationUsingKeyFrames
cx,cy	Width, Height
attributeName	TargetName+TargetProperty
dur	KeyTime
repeatCount	RepeatBehavior
keySplines	KeySpline+KeySpline
calcMode	SplineDoubleKeyFrame
keyTimes	KeyTime+KeyTime
values (absolute)	Value (relative)

That's all. After all, there are very similar methods and objects are in use. The only difference, that Silverlight is much more flexible, then SVG in animation. Let's see the result (if the ball is breaking on the edge, just reload internal page - this is load time issue)

So, after all if you know SVG, you can start developing Silverlight (don't go back :) ).

All this nice, but what's the problems? Well, there are some. In Silverlight 1.0, there is no Tile or Visual brushes, thus you can not create following effect (this is checker board)

SVG

<defs>
<pattern id="P01" width="10" height="10" patternUnits="userSpaceOnUse">
<rect width="10" height="10" fill="#FFFFFF" stroke="#000000" stroke-width="0.1"/>
</pattern>
</defs>
<rect x="0" y="0" width="400" height="400" fill="url(#P01)"/>

But no worry, you probably, will have all you need and much more in Silverlight 2.0 :)

Have a nice day.