Now Hiring Silverlight Developer

Posted on June 9, 2008
Filed Under 1.0 Javascript, 1.1 Alpha, Application, Career Opportunities, XAML | 1 Comment

Due to the great demand that we have received for products developed using Silverlight, we are now looking to expand our team. To be considered for employment at Vectorform, you must have the desire to work in a collaborative environment, but also have the ability to research and develop new applications leveraging Silverlight as the main development technology. Below you will find the specific requirements for the position;

Qualifications

Requirements

To apply for this position, please forward your curriculum vitae to: msheldon@vectorform.com

Silverlight Streaming for video assets only

Posted on February 6, 2008
Filed Under 1.0 Javascript, streaming, video | 1 Comment

The Silverlight Streaming service is great for hosting your applications but what if you just want to host your assets there, particularly your heavy bandwidth assets like videos? Well the process is a bit like uploading an application (covered in the previous post) but with a few differences. You still need to create a manifest.xml file but this time since you have no code files to upload you will just reference a dummy.xaml file. You dont need to include this phantom xaml file in your zip but you do have to reference it in the manifest like so…

<SilverlightApp>  
   <source>dummy.xaml</source>
</SilverlightApp>

So just add the above snippet to your “manifest.xml” file, and include it in your zip with your video(s) file and upload to the Silverlight Streaming service.

Now for the tricky parts. You need to make a modification to your code to reference not your local copy of silverlight.js but the remote version supplied by the service, something like http://agappdom.net/h/silverlight.js

Another important change is in your createSilverlight function:

function createSilverlight() {  

   Silverlight.createHostedObjectEx({  

        source: "interface.xaml",  

        parentElement: document.getElementById("Wrapper_MultipleVideos"),  

        id: "SilverlightControl",  

        properties: {  

            width: "940",  

            height: "600",  

            background:"#bb5619",  

            isWindowless: "false",  

            framerate:"30",  

            version: "1.0"  

        },  

        events: {  

        },  

        initParams:"streaming:/48598/MultipleVideos/"  

    });  

}

Two things to note here: 1) use the Silverlight.createHostedObjectEx function call and 2) the additional initParams property.

The initParams property takes a string as input, and should point to your AccountID and Application’s Name listed on the Silverlight Streaming service site, in this case it’s “MultipleVideos”.

What happens here is that the service will convert the string specified into a proper URL. This URL is NOT permanent and will change so you cant just write it down and hard code it into your functions or xaml. Therefore you need to programmatically set the source of your MediaElement.

So for example you could do something like this in your initial start up function of your app (or in the Loaded event call for your main Canvas)

function mainCanvasLoaded(s) { 
   plugin = s.getHost()
   main=s.findName("mainCanvas")
   vid1=main.findName("videoElement1")
   vid2=main.findName("videoElement2")  

   //dynamic URL assignment happens here
   vid1.source=plugin.initParams+"/my_video1.wmv"
   vid2.source=plugin.initParams+"/my_video2.wmv"
}

If you want to upload and reference multiple videos under different application name’s you would need to tweak the initParams property like so to be a comma separated list:

initParams:"streaming:/48598/MondaysVideo/, streaming:/48598/ThursdaysVideo/"

And then in your video source assignment code you could handle that with a split(”,”) call like this:

   urlArray=plugin.initParams.split(",")
   vid1_url=urlArray[0]
   vid2_url=urlArray[1]

Official info on the subject can be found here at this MSDN article, but I didn’t find it too helpful.

Silverlight Streaming Service

Posted on February 5, 2008
Filed Under 1.0 Javascript, streaming, video | 1 Comment

Another post on some info that I thought was intially hard to find. Using the Silverlight Streaming service provided by Windows Live.

The Silverlight Streaming service is meant to be a convenient place where designers and developers can host Silverlight Applications they build for free.

To use the service to host your application you must sign-in to http://silverlight.live.com/ with a windows Live ID, hotmail, messenger or passport account.

After creating an account you will get an Account ID and an Account Key. The Silverlight Streaming Account ID is public and you will need to use it in your code of your Silverlight Applications. Your Account Key is private and should be treated like a password.

Once signed in, click on Manage Applications on the left. Here you can upload your Silverlight Application. Before jumping right in and selecting the files you want to upload you need to do a few things first. You need to create an xml file called ”manifest.xml” listing all the files your app will be using and the order of the JS files. Here is a sample manifest.xml file:

<SilverlightApp>   
   <source>name of the initial XAML file</source>    

   <version>[empty | 1.0 | 1.1]</version>    

   <width>[value in browser units or percentage]</width>    

   <height>[value in browser units or percentage]</height>    

   <jsOrder>    

      <js>[js file to load first]</js>    

      <js>[js file to load second]</js>    

      <js>...</js>    

   </jsOrder>    

</SilverlightApp>

Check out this MSDN Article for more info on the manifest file.

Once you have created this file, name it “manifest.xml” and place it in the root folder of your application. Zip up the entire contents of your application (including the manifest file) and now you’re ready to upload to the Silverlight Streaming service site.

After you’ve successfully uploaded your zip file containing your application, you’ll be directed to a page where you can upload an updated version, launch a test page containing your app, or delete your app. You’ll also be given 3 steps necessary to embed your app on a web site. Embed the scripts given to you on your site and test it out. If all goes well you should see your Silverlight app on your page but hosted through the Streaming service.

In the next post I’ll show how you can host assets only (particularly video) using this service. One would think you could just upload your assets and be given a reference to them but this is not the case and there’s a little more to it…

Compressing XAML to save on file size

Posted on February 1, 2008
Filed Under 1.0 Javascript, Design | Leave a Comment

Silverlight is great at being able to use vector art work so that you maintain quality at any viewing size. The problem is sometimes vector artwork can actually get larger in file size than raster images. To save on bandwidth, a good strategy for optimizing Silverlight is to create a skeleton XAML file with a basic loader, you would then have all of your layout XAML, images, fonts within a ZIP file. This would then provide a dual benefit.

  1. It gives you a way to have a preloader for an entire Silverlight application that would show up almost instantly upon loading the page.
  2. It also has the potential of compresses XAML code into 1/3 the file size.

[view example] [download source]

Controlling Silverlight outside of the plugin - the .Content property

Posted on January 31, 2008
Filed Under 1.0 Javascript, Uncategorized | Leave a Comment

This one is pretty basic but it is useful and the info doesn’t seem to be easily accessible so I decided to post a quick example. You can use the content property of the plugin to gain access to elements in your XAML.

So say you want to have a link or button on your page control some aspect of your Silverlight App, like load a new Video into a MediaElement, you could do something like this:

function loadVideo(wmv_file) {    

   var videoRef
   var controlRef
   controlRef=document.getElementById("SilverlightControl")
   videoRef=controlRef.content.findName("videoElement")
   videoRef.source=wmv_file 

}

and then in you could just call the loadVideo function within an onclick, onmousdown, or in the href like so:

a href="javascript:loadVideo('my_video.wmv')" mce_href="javascript:loadVideo('my_video.wmv')"

Image Carousel

Posted on October 23, 2007
Filed Under 1.0 Javascript | 2 Comments


Inspired by Nikhil Kothari  and Lee Brimelow, I decided to make my own image carousel. Clicking/dragging left or right controls the rotation speed…

View Example, Source

Combo Box Component

Posted on October 19, 2007
Filed Under 1.0 Javascript, Components | 2 Comments


Here is a basic Combo Box component that is easy to implement and customize. It supports automatic scrolling when the number of items exceed the specified height and is fed by an array.

Example, Source

Twitter

Posted on October 11, 2007
Filed Under 1.0 Javascript, Web Service | Leave a Comment


This user interface example access the twitter.com API, parses the loaded XML and displays the latest Tweets. It also incoporates a custom skinned scrollbar.

Example, Source

Browser Scaling Video Player

Posted on October 9, 2007
Filed Under 1.0 Javascript | Leave a Comment


This video player scales with the browser to be any size the user wishes. Also features auto hiding controls.

Scaling Version: Example, Source

Fixed Size Version: Example, Source

Silverlight scrollbar component: Updated for easy implementation

Posted on October 2, 2007
Filed Under 1.0 Javascript, Components | Leave a Comment


Another update to the scrollbar component. Just made some tweaks to make it easier to implement/instantiate. It’s getting closer to more of an OOP style but it’s not all the way there yet. Now all you have to do is call/instantiate the scroller like this:

myScrollPanel=new createScrollablePanel(”sp1″, 10, 10, 100, 160, “V”, the_text, “#FFF”, 9, null, “#0000FF”)

with the following parameters…

unique name, xpos, ypos, width, height, direction, text, [text_color, text_size, text_font, bg_color]

bracketed items are optional, I haven’t converted the horizontal portion yet so only “V” (vertical) is available ;-)

This makes it way easier when you have multiple scrollers on the page. The mouse wheel support also got carried over and works when the mouse is over the particular textfield you want to wheel thru. There are now properties in the constructor to control other options like color, spacing, etc.

Example, Source.

Silverlight scrollbar component: Updated with MouseWheel Support

Posted on September 26, 2007
Filed Under 1.0 Javascript, Components | Leave a Comment


Here is an updated version of the scrollbar component I released earlier but this new version has Mouse Wheel Support:

Example, Source.

Thanks to Adomas Paltanavičius for the Javascript that handles the Mouse Wheel events!

Silverlight with some Flickr

Posted on September 25, 2007
Filed Under 1.0 Javascript, Web Service | Leave a Comment


Here’s a quick example of how to call a method from the Flickr API and display some goodies in Silverlight. This grabs the 100 most interesting photos…

flickr1 - thumbnails: Example, Source

Next uses a larger canvas, 1400×1000, so beware puny monitors/weak video cards!

flick2 - medium size images :  Example, Source

Reposition/Resize Content on Browser resize

Posted on September 24, 2007
Filed Under 1.0 Javascript | Leave a Comment


Resize the browser and the content gets repositioned accordingly.

Example, Source

Resize the browser and the content gets scaled accordingly.

Example, Source

Silverlight Media Viewer

Posted on September 21, 2007
Filed Under 1.0 Javascript, Application | Leave a Comment


This sample application incorporates some of the previous examples (scrollbars, image viewers, etc) into a working Silverlight app. The Media Viewer includes a video player, an image viewer and an RSS reader pulling stories from Yahoo News.

Media Viewer - Example, Source

We’ve also developed a nice looking portal for these examples at http://www.vectorform.com/silverlight/

Silverlight Flyout Navigation

Posted on September 18, 2007
Filed Under 1.0 Javascript, User Interface | Leave a Comment


This example leans a little more towards traditional web site navigation with the tried and true flyout menu. I didn’t really have a need to make one of these but I thought it might come in handy in the future. I’ll also have to write an N-level version but I’ll put that off til later as the need for that rarley seems come up any more. 3 versions including source.

Flyout nav, hide/show - Example, Source

Flyout nav, fade in/out - Example, Source

Flyout nav, animate up/down - Example, Source

Silverlight Tile Navigation

Posted on September 17, 2007
Filed Under 1.0 Javascript, User Interface | Leave a Comment


Im gonna try to do the next couple of examples relating to navagtion elements. Ill start off with this one which uses image tiles for buttons. On rollover they animate and scale to give the illusion of depth. Reflections thrown in of course.

The tiles are generated and placed by code so the xaml file will be relatively empty.

Horizontal Tile Nav - Example, Source

Horizontal Tile Nav with stagered depths - Example, Source

Silverlight Image Viewer

Posted on September 13, 2007
Filed Under 1.0 Javascript, Application | Leave a Comment


This one was a little tricky because I have the images lined up horizontally. Since the images are different sizes and ratios, to place them correctly you need to know the width of the image, but Silverlight doesn’t know the width and height of the loaded image until slightly after the image fires its Loaded event. At first I was just setting a timeout of 150ms and that seemed to work, until I moved the files to an actual remote server, then it worked sometimes. So then I ended up doing a setInterval to check whether each image has a width and height>0. That did the trick. I could then position each one accordingly. Here are two versions. 1st one loads images individually, 2nd one pulls images from a zip file and has animation for both enlarging and shrinking images. Drag left and right (or throw) to scroll through the images. Click (or drag and drop) to enlarge.

Load Individual Files - Example, Source

Load From Zip - Example, Source

Also, here is a Mac type slideshow that auto plays with a Ken Burns effect (click for fullscreen). Although this seems to only run nicely on faster machines. I used images at 800×600 to reduce the choppiness but it still seems to lag on my P4 2.8Ghz PC with 2Gb Ram. But it does run nice and silky though on my MacBook Pro 2Ghz with 2Gb ram. I guess the Core 2 Duo proc helps move those big images around.

Mac type slideshow - Example, Source

Silverlight 1.0 Slideshow

Posted on September 12, 2007
Filed Under 1.0 Javascript, Application | Leave a Comment


This is a simple slideshow for viewing a single image at a time. And since reflections are all the rage, I threw those in there just for some style. Here are 3 examples showing some variation in functionality:

Slideshow with a fixed size: Example, Source

Slideshow that scales with the browser window: Example, Source

Slideshow that has autoplay and Fullscreen mode: Example, Source

Click Screen title to launch Fullscreen and autoplay (new image every 3 seconds). Click an arrow to stop autoplay. Click Screen title again to exit Fullscreen or just hit Esc.

Next up: Image viewers and nav bars.

Recently


Categories


Archives