Michael Wolf
{Binding ME}
Thursday July 02, 2009
Smooth streaming source
this is a short one.
A couple days ago I needed to create an adaptive streaming player. If you don't know what adaptive streaming is, its what Microsoft is marketing as smooth streaming, its a method by which a single movie is encoded into multiple bit rates, and is chunked into 2 second chunks, such that individual chunks can be pushed down the wire and reassembled. This is the technique used during the 2008 Olympics, and has only improved from there. One of the most interesting parts of this technique is how it scales, by simply using established http caching mechanisms ( see alex's blog for more great details). The thing about smooth streaming in silverlight is that it’s not "native" support, it takes some plumbing to make it work. However as much as smooth streaming has been publicized when I went looking for example code there was little direction to be had. Most references point to either the open video player initiative, which is great but lacks the adaptive source, or simply says "encode with expression encoder, and you get a silverlight player with smooth streaming built in". Yet I wanted source to make my own not a prebuilt one. Doesn’t every dev want to look at the plumbing after all. Then I remembered that Encoder comes with the source for the templates.
So long and short of it, is if you look in "C:\Program Files\Microsoft Expression\Encoder 2\Templates\en\" theres your adaptive streaming source.
Also for the other folks who just go googleing/binging(doesn’t sound as good) for the source, here you go.
Monday June 01, 2009
RIA in the city
I will be in NYC this week for Internet Week. It's just like fashion week, only.... minus the fashion and plus the web. In preparation for Internet week we decided to take Cynergy.Cruises to the next logical level, windows 7.
Rick B worked on this by utilizing some of the new managed apis. The cool part is that very little had to change to port the experiences app from the surface app to windows 7. The majority of the work was on stripping out element menus, and replacing the Surface gestures with the new windows 7 gesture engine.
If you want to see it first hand, and are at Internet Week, stop by the 2 sessions we are holding at the Microsoft Gallery.
Smearing the Monitor: From Microsoft Surface Tables to Your Home PC, Reach Out and Touch The Cloud (6/4/09 12:00 pm)
Imagine a world without mice. Not the furry ones, but the ones invented over a quarter of a century ago. From your phone, to your home PC and all the way to cutting edge table top computers like the Microsoft Surface, Natural User Interfaces are changing the way we all experience and interact with software and the web today. It’s no longer about right clicks and dragging the mouse, it’s about touching, feeling and truly interacting with the your pc and the internet. It’s also no longer about web servers and databases. Cloud services are letting you have your information available all the time… Now literally right at your finger tips. Come take a trip on Cynergy.Cruises, a focused rich, engaging and interactive experience designed and built for the hospitality space, where you can truly feel how incredible user experiences, mixed with amazing devices are touching our lives. If you haven’t had your hands on a Microsoft Surface Table, or an HP Touchsmart, this is your chance.Why Do All Web 2.0 Websites Look Alike? How to Create Sticky Eyeballs & Break Out of the Shiny Box (6/5/09 12:00 pm)
You have the next great idea. You’ve imagined it, you’ve planned it, and you’re ready. Now Time to build it, get it out there, explode across a market, and own it. But great ideas don’t sell themselves. How will you get that message out? How will you find new users and keep them? Who will be your champions?Passionate Users. Passionate users that tell their friends and families. Passionate users that create social epidemic faster than any marketing budget could ever envision. How do you create passionate users? With rich, interactive and sticky User Experiences that engage your users and keep them—experiences that make it fundamentally easier to attract more users, keep them with you longer, and even get them to spend more money.
Join us for a tour of incredible User Experiences designed and built for both startups and market leaders, and learn how incredible experiences have won markets.
Come on by and say hi, and get your hands on some sweet RIA!
848 Washington St,
New York, NY 10014-1308
Thursday May 21, 2009
Cynergy.Cruises at TechEd 09
Last week we I had the honor or presenting with the Surface team during Tech.Ed about the announcement of Microsoft Surface SP1. For the session at Tech.Ed 09 myself Rick Barazza and Jon Bradley developed one of the first public surface sp1 applications, were calling Cynergy.Cruises . Take a look at the screencast below.
From a technology stand point theres some pretty interesting stuff in here.
The WPF / Silverlight Continuum
For the silverlight readers you might notice the card drop animation looks similar to a blog post a couple weeks ago. That's because it is, the animation was generated from after effects during the same session, and pulled into the surface application using the exact same code as seen on the silverlight post. This code is actually part of our internal tools which is compiled for WPF (aka surface) and Silverlight. With xaml in the browser / surface / desktop (+windows 7) maturing we will see more and more of these scenarios.
Element Menus (would be awesome in Windows 7)
My wife recently "upgraded" from a mac book to an HP touchsmart tx2. I really like it , and the touch experience is really great and even better with windows 7. Yet one of the items that feels odd is context menus, as that our fingers don’t have right click buttons. What the surface team did to enable these type of interactions to allow for a more natural navigation/feature paradigm is element menus. Element menus can be developed much like any other menu or context style system, and is very easily done with xaml.
Object routing
One of the things I like most in the surface pack is something called object routing. Object routing is nice new feature which allows you to connect applications directly with an object even when the application isn't running. This acts as a way to launch applications from the launcher and the attract screen. Its pretty simple to set up using a combination of registry keys and xml. At first this doesn’t seem like a big deal, but it adds a new development plan to surface development. For example imagine Cynergy.Cruise started with just our 3 apps, but a month later we decide to add a new application to allow visitors to make restaurant reservations. Instead of deploying an updated application which might introduce bugs etc, we can simply deploy a whole new application which acts as a single integrated experience using object routing. Generally making it much easier to build surface experiences that scale larger and larger as time and development allows.
Faster each day
All and all I was very happy with the level of integration we were able to achieve and speed we were able to develop this up (2 weeks) using the sp1 features. Its often easy for us as technologists to gripe about a feature here or there, but if your living in the XAML trenches like we do, you have to admit WPF/SL is really moving at a pretty rapid pace. Bring in windows 7 rc , Silverlight 3 beta, WPF 4 beta (coming soon), and Surface SP1 and were moving forward a little bit each day.
Sunday April 26, 2009
Using Blend 3 for Silverlight 2
Outside of Sketchflow one of the coolest features in Blend 3 is the ability to easily turn visuals like paths into standard controls. This combined with the introduction of photoshop and illustrator makes for some nice additions to the workflow options we already have. Joanna Mason (who I also pestered about a fireworks import like Grants ) did a great presentation at mix showing off the complete flow from Adobe CS to full blown silverlight controls, but it left me wanting this for current projects not projects in the future. Luckily one of the best things about XAML is that you can't spell XAML without XML. Thus its very easy to generate a control template in Blend 3 and copy it directly over to Blend 2 for use in a Silverlight 2 application. Once you get the concepts of the blend parts list and the steps down its easy as ctr+C ctr+V to move it from blend 3 to Silverlight 2.
Check out the following screen cast showing how simple it is to do.
Heres a couple things to keep in mind when trying this out.
- The illustrator and photoshop import are not perfect yet. There is no support yet for effects and often it seems the import can not deal with very complicated files.
- When working with blend 3 if you want to also work with Silverlight 3 I suggest you look at Shawn and Amy's bat file utility allowing you to switch frameworks easily.
- Remember beta is after all beta, although most templates seems transportable, your mileage will vary.
Sunday April 19, 2009
from the surface to the web
We have recently been doing quite a bit of Microsoft Surface work, and its made me rethink things around the importance of motion graphics in ria (Silverlight / WPF / Flex etc). This came up while working on the surface in the same room as Andy Trice, we were discussing how some of the motion graphic tricks we use on the surface are just as valid in WPF and Silverlight yet rarely used. When working with the surface you think allot more in the motion graphics mindset, as that part of your goal is for user to walk up and feel drawn in to touch the table. Below is an example of some of these approaches in a Silverlight 2 application. The demo utilizes png sequences and a video background which were generated by one of our great Designers John Bradley using AfterEffects.
The video background was generated with AfterEffects and encoded to a low rate windows media file using Expression Encoder. The video is then displayed in Silverlight using the mediaelement, that on the end event simply restarts. The compass animation was also developed in after effects, and exported as a sequence of pngs. The benefit of this approach is that it allows you to take advantage of the alpha channel in the pngs to layer the 2 different animations on top of one another (which is not possible in video alone). Unlike the video there is a bit more development entailed, which is very similar to Andys weather demo and was documented here back in 2007 for wpf. In our case we developed a custom control which sequences the images to stitch them together. At its heart it simply contains a dispatcher timer that does the following:
Blend is a great tool, but as with any great tool half the battle with mastering it is knowing when to use it and when not to use it. In this case although you could attempt to do these same effects using blend with storyboards or using programmatic animation, it simply isn’t worth the effort when you could get a much richer experience faster using something like AfterEffects. That being said this isn't the solution for everything, it can often be heavy handed and definitely entails a much larger xap or click once size than standard xaml and storyboards. Yet if you’re looking for an engaging experience with truly stunning cinematic motion graphics, don’t forget these tools available to you.
Saturday April 04, 2009
Silverlight 3 Navigation framework and data
One of the great features in Silverlight 3 is the navigation framework. This will allow you to build very large Silverlight applications which require true browser navigation support without having to build your own browser ineropability to handle back / forward navigation. This has always been the ajax/player based application problem when it comes to usability, and with Silverlight 3 you will get this functionality out of the box. You can even use the navigation framework to perform deeplinking tasks by rerouting http requests to different navigation points within your application using the new UriMapper. Thus allowing you to advertise custom urls such as
http://www.companyname/tv/maryland
And using the new UriMapper you could map this to a specific view as well as arguments to that view
<navigationCore:UriMapper x:Key="UriMapper">
<navigationCore:UriMapping Uri="tv/{state}" MappedUri="/Views/Campaign.xaml?state={state}" / >
</navigationCore:UriMapper>
There have been some great write ups on the framework and features from the Silverlight show and Tim Heuer I highly recommend.
However this framework seems to have added some confusion in the developer community by introducing web application paradigms to the desktop style application patterns of Silverlight. Many developers have voiced questions as to how this relates to data binding, and if data now needs to be posted from view to view. Although the navigation framework includes a frame and page concept, all navigation continues to be within the context of the Silverlight application. Thus there is no concept of a post back or having to worry about the application data state. Luckily the mvc / m v vm patterns we have developed really come to the rescue here. Ideally none of your data should be connected with the code behind in your individual views, and instead should be living in your viewmodel. Thus even though you are navigating to an about page in the following manor :
<StackPanel Style="{StaticResource NavigationPanelStyle}">
<Button Click="NavButton_Click" Tag="/Views/AboutPage.xaml" Content="about" /%gt;
</StackPanel>
<navigation:Frame x:Name="Frame" Source="/Views/HomePage.xaml"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Padding="15,10,15,10"
Background="White">
</navigation:Frame>
You’re data would be persisted to the next page because it would have its datacontext bound to your viewmodel.
DataContext="{Binding PersonManager, Source={StaticResource ModelLocator}}"
This functionality and databinding acts and behaves exactly as it would in any wpf or silverlight application, but the navigation syntax and control names beacon back to a time of postbacks and nasty persitance hacks. See the screencast below for a running example of the navigation framework and use of a Model View ViewModel pattern in silverlight 3.
Monday March 23, 2009
breaking the sandbox in silverlight 3
One of the most exciting announcements at MIX 09 was the inclusion of "Out Of Browser" functionality in Silverlight 3. While WPF is an amazing tool, we previously had no good solution for leveraging xaml based applications onto the mac (And eventually linux) desktop. With “Out Of Browser” Silverlight we will be able to not only bring the somewhat connected desktop experience that we have with Adobe AIR to Silverlight, but finally also a rich desktop solution for OS X. Still the moment you start building a desktop application in Silverlight you will start to notice the somewhat stringent sandbox of Silverlight. As with in browser experiences you are restricted to web sandbox, which Microsoft did for good security reasons. While this helps ensure all users who consume an “Out Of Browser” Silverlight application are “safer” from malicious code, it’s also often the most frustrating part of developing hybrid desktop/web applications. If you’re writing a desktop application regardless of technologies you expect to get more control than you would in a client based web technology. Yet, where there’s a will there’s a way, and this way comes to us through our experience with adobe air.
The basic solution is similar to that shown by Andy at max 2008. In his solution he showed using a java socket service as middleware to a USB GPS device. Similarly I used a .net socket service to bridge the gap to the full trust environment. The socket service is deployed on the localhost (along with a policy service) where the Silverlight application can communicate with it via XML and leveraging socket communication available since Silverlight 2. As that "Out of Browser" Silverlight is at the end of the day, Silverlight, this solution works flawlessly.
As you can see in this demo, with a little work, you have a Silverlight application living on the desktop and gaining the full power of the desktop. This does involve a more detailed installation than simply right clicking. Yet using some of the out of browser hooks Microsoft has added to know when running in and out of browser, and the use of isolated storage an experience could be crafted to aide in the secondary install. In addition there would need to be a higher level of security to ensure your middleware can only be accessed by your Silverlight application (of course you wouldn’t leave an open command line method open either : ) ).
This could be used to do something as simple as talk to native applications. You could possibly use Microsoft Office and the .net interop assemblies to perform office automation. It could also act as a bridge to hardware devices such as cameras, phones, or even robotics for limitless possibilities.
All in all “Out Of Browser” Silverlight has tons of possibilities, and were excited to see where it takes us.
Sunday February 08, 2009
Very first voip + silverlight demo
Recently I have seen several blog posts about Silverlight + voip. These reminded me, I should have blogged about some of the solutions used in last years Phizzpop competition. Better late than never.
When we were working on Phizzpop a year ago, we had an Idea that we wanted to connect a voter directly with their representatives using Silverlight. I wanted to connect voters the way my grandmother was, by phone. Yet we were building a solution using Silverlight 1.1 at the time. The problem is that Silverlight has no microphone support, making native voip solutions impossible . While discussing the problem with some colleagues we started up an internal discussion about Javascript being the Babel Fish between modern client web technologies. The idea was that if we couldn’t make a phone call using Silverlight, why not leverage another technology via the Javascript bridge, and access it like a library. The original version used the skype com objects, which worked great, in fact skype bogged about the idea here.
Then after talking to Andrew Trice about the idea, he suggested we try Ribbit. Andy had used their api to add phone support to an existing flex application ( see interview here). With this suggestion in hand we then used the ribbit api/sdk and built a basic flex phone application that exposed a few external interfaces, namely call and hang up.
Then from Silverlight, using the html bridge, all we needed to do was call the methods using "HtmlPage.Window.Invoke". Then through the wonders of javascript translation a phone call was made.
The implementation here is dead simple, but it does open the developers mind to other options. Just because one platform doesn’t have feature A, you don’t have to drop it entirely. By using the interoperability features built into Silverlight your open to use any Javascript / flash / com solutions that are available to you.
While your at it check out the rest of the solution here
Tuesday February 03, 2009
See you at MIX
Silverlight is really growing into its own. To think not but 2 years ago at mix 07 we stopped calling it wpf/e. This year should be pretty exciting with Live Mesh and Silverlight 3, and even more exciting.... Us.
Come out early and See Rick, Jose, and I talking about real world Silverlight and wpf development and designer developer workflow. We will be presenting a workshop the day before mix as part of the Mix 09 workshop series.
Description:
When it should be all about the user and creating sticky experiences, it’s often the people problems in design and development that leads to sticky situations. With collaboration of the 3 roles (Designer / Devsigner / Developer) paramount, you’ll learn how to use a ‘look first’ and experience-focused approach to solve issues across multiple platforms and form factors - web, desktop, mobile - without letting the technology drive the experience. Through workshops and samples we will show designer tricks from the developer toolbox, and developer tricks from the designer toolbox using the Expression suite and .net. Not just working together, but learning from one another. This session is ideal for both the in-the-trenches designers and developers, as well as managers who want to keep their designers and developers focused on developing truly engaging, sticky experiences.
See you at Mix 09
Monday December 15, 2008
Silverlight ConfigurationManager
A problem I hear rumble up from a lot of .Net developers when picking up Silverlight is, “where is
In the example above, the text is being loaded using the following config file living on the web server
<?xml version="1.0" encoding="utf-8" ?>
<Configuation>
<AppSettings>
<Add Key="title" Value="Hello World from configuration manager"></Add>
</AppSettings>
</Configuation>
This allows us to edit the config on the fly, outside of the compiled xap, just as you would do with a WPF app.config. Using Linq we can load this data into our configuration object by extracting the key and value pairs.
public static void LoadConfig()
{
WebClient client = new WebClient();
client.DownloadStringCompleted += new DownloadStringCompletedEventHandler(client_DownloadStringCompleted);
client.DownloadStringAsync(new Uri("app.xml", UriKind.Relative));
}
public static void client_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
if (e.Error!=null)
{
throw e.Error;
}
// load the data
XDocument config = XDocument.Parse(e.Result);
var appsettings = from x in config.Descendants("AppSettings").Descendants("Add")
select new AppSettings { Key = (string)x.Attribute("Key"), Value = x.Attribute("Value").Value };
_appSettings = new Dictionary
Then we can access our configuration values in Silverlight just as we would with the .Net CLR-supplied ConfigurationManager.
void Page_Loaded(object sender, RoutedEventArgs e)
{
lblHelloWorld.Text = ConfigurationManager.AppSettings["title"];
}
One difference with this approach is that every request with in Silverlight must be asynchronous. So there is a little more startup work to get this wired up nicely. In the demo we show a loading screen first while the app.xml file is loaded, and publish back events letting the Silverlight application know when it’s ready to be used.
private void Application_Startup(object sender, StartupEventArgs e)
{
ConfigurationManager.LoadConfig();
this.RootVisual = new Masterpage();
}
void Masterpage_Loaded(object sender, RoutedEventArgs e)
{
ConfigurationManager.ConfigurationAvailable += new EventHandler(ConfigurationManager_ConfigurationAvailable);
LayoutRoot.Children.Add(new Loading());
}
Another difference is that, since we are using a file with a .xml extension rather than .config, this file is now publicly available (http://dotnet.cynergysystems.com/silverlight/config/clientbin/app.xml), and thus shouldn’t contain sensitive data. This is more similar to a desktop app.config than a web.config scenario. Yet if you are really concerned about exposing somewhat sensitive data, but you must have the flexibility of the config file, you can always encrypt the xml file using the System.Security.Cryptography libs on both server and client (see last weeks post).
Thursday December 04, 2008
Silverlight and Encryption
One possible use for this would be to encrypt communication between xaps using the html bridge. A perfect example of this might be a portal type app, where the Silverlight apps exist in islands which may need to share data real time. Imagine an HR application builting using a content management system, which has been updated with small silverlight applications dropped in. By encrypting the data in one xap, you can then pass it through the bridge to then be decrypted by another xap sharing the same encryption code. This adds a level of security by ensuring that the data is not harvested by a malicious application on the client’s machine.
In this example you can click on the transfer button which serializes the complex object and encrypts the data. The data is then sent through the html bridge encrypted, and then passed back to the second xap to then be decrypted and deserialized.
Another possible use for this would be encrypting data from point to point message-level "like" security. With Silverlight 2, we now have the ability to call web services via over, but sadly not ws-security where the entire soap message is encrypted using message-level security. One possible stop gap for this would be to encrypt the data coming from Silverlight, pass it over https, and then decrypted on the server. With the ability to have shared source between the Silverlight client and the WCF Web Service, this encryption code can be the exact same code and, in fact, the exact same file (using a linked file in visual studio).
Silverlight Class Library | Web Application with linked source |
Data encrypted from the Silverlight application decrypted on the service tier
|
|
I think this shows the real power of Silverlight, not only do you get the power of .net in the browser, but you also get the interoperability of the same CODE on browser / WCF Service / desktop client etc.
(DISCLAIMER: this strategy is provided as a proof of concept, and not a direct assertion of best practices)
Saturday October 25, 2008
Bending the Surface
I wanted to take the opportunity to show off some work we have been doing with the surface. Rick has posted a great video of some of his work.
What’s interesting here is how the surface is a natural platform for the use of pixel shaders. These new WPF effects look great on a static screen, but really show off their power when you can “reach out“ , and physically effect them. The other interesting part were looking at is the physical form factor of the device. By design the surface is a social device, with people sitting and not standing around the interface. As you see Rick dropping the tagged business card you start to imagine how this could start to work in a meeting scenario. I drop my card, you drop yours, and by “trading cards” we can start trading files/data etc. Congrats Rick! on the video,and a belated congrats to Jose on his MVP status.
Thursday September 18, 2008
DC Alt.Net meeting
On 9/24/08 I will be helping to host the DC Alt.Net user group here in our dc office. Come out and learn about open source .net and grab some pizza with me. This month’s talk will be on asp.net MVC presented by Troy Goode. I'll be the one handing out pizza and eager to talk about wpf + silverlight + open source.
See you there!
7pm - 9pm
Cynergy Systems Inc.
1600 K St NW
Suite 300
Washington, DC 20006
Monday June 02, 2008
Cynergy @ Microsoft Tech Fest Reston VA
We have been crazy busy here at the Cynergy Silverlight/WPF desk, but not too busy to share our knowledge with the community.
Come join us next friday in reston as we sponsor and present at the Microsoft Tech Fest.
Location: Microsoft Reston MTC
Event Date: June 13thth, 2008
REGISTRATION: http://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032379255&Culture=en-US
Heres quick abstracts on the sessions
Microsoft Web Technologies: What’s the Latest?
In this session, we will share with you the latest of Silverlight 2.0 and Expression 2.0 and Microsoft web technology roadmap. We will talk about the new features, the developer and designer productivity synergies and workflows. We will also talk about how Microsoft Silverlight compares with competing technologies.
Designing a Rich Interactive Silverlight Application with Expression
First impressions can make or kill any relationship, and nowhere is this more true than in software. In this session we will show how to use the “Look First” design pattern together with the Expression suite to develop a rich and engaging interactive Silverlight media player. Using the Expression suite we will show how to skin controls and design animations to best meet the user experience, and optimize the designer developer workflow.
Building a Rich Interactive Application with Silverlight and WCF
Now that the user interface has been created, the user experience fleshed out, it's time to transition from design to development and wire up logic and services. We'll provide the logic that makes the application tick, and the services that connect it to the larger infrastructure. We'll discuss the communications options available in Silverlight and delve into WCF service support, building out the application along the way.
Panel Discussion
At the panel discussion, you will be given a unique opportunity to ask questions and share comments on questions that have been raised by other attendees. The panel consists of speakers from the event and optionally guest speaker(s).
Come on out and make sure to come say Hi!!
Thursday February 14, 2008
User group slides and Silverlight Example
Last weeks talk at cmap was great. We had some awesome discussions about what’s happening with silverlight and how to integrate RIA concepts into all layers. Was also great to see the community building up around us, ria + enterprise dev + alt.net ... its a powerful combination.
I promised I would post up the ppt and examples so get it while 1.1 is still hot.
Power Point:
For the silverlight player shy, here’s a quick screen cast of the example
Screen Cast of Example
Running mdi Example:
- Basic Example
- Same example using data pulled from skydrive
- Example using Asp.Net AJAX controls with Silverlight. (data from live expo)
