Archive for February, 2011

Rotating Video Panel

Posted: February 10, 2011 in Silverlight
Tags: , , ,

Silverlight Sample: Rotating Video Panel

Edit 2011-07-07: A wet floor effect has been added to the app. This includes a two-color background and an upside down reflection of the rotating video. You can check it out at the App Shop .

As an exercise in media handling and animation, I built a rotating video panel. This is not an original work, it is based on the rotating video panel by Sean Christman (CraftyMind), you can find it here (opens a new window or tab). Note that while rotating, texts are mirrored when we look at the rear site of the panel.

To me, it is of some relevance that when migrating someone else’s work to Silverlight, the stone is thrown a bit further. In this particular example the extra distance is small: the rotating panel scales with the size of the window if you change it.

Another nice feature, but that is typically Silverlight, is that you can install this panel on your pc as a small application, and run it offline also. Just right click the rotating panel, choose install from the menu, and follow the instructions. To uninstall it again, run the installed application, click it with your right mouse button, and choose uninstall.

An aspect that presents a nicety for me is that the Silverlight code is much shorter than the 145 lines of Html5 code that were required for the original work. The xaml below is all it takes to realize the rotating video panel, anything above “<Grid.Resources>” is generated code.

<UserControl x:Class="SpinningVideoPanel.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="600" d:DesignWidth="600">

    <Grid x:Name="LayoutRoot" Background="White" Margin="150,0,150,150" MinWidth="100" MinHeight="100">
        <Grid.Resources>
            <Storyboard x:Name="rotationStoryBoard1" RepeatBehavior="Forever"
                        Storyboard.TargetName="rotation1" Storyboard.TargetProperty="RotationY">
                <DoubleAnimation From="0" To="360" Duration="0:0:10"/>
            </Storyboard>
        </Grid.Resources>
        <Grid.CacheMode>
            <BitmapCache RenderAtScale="4" />
        </Grid.CacheMode>
        <Grid.RowDefinitions>
            <RowDefinition Height="50*" />
            <RowDefinition Height="175*" />
            <RowDefinition Height="75*" />
        </Grid.RowDefinitions>
        <Grid.Projection>
            <PlaneProjection RotationY="360" x:Name="rotation1" />
        </Grid.Projection>
        <Border BorderThickness="5" BorderBrush="Salmon" HorizontalAlignment="Center" VerticalAlignment="Center" >
            <TextBlock Name="textBlock1" Text="Watch the Video" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="5" />
        </Border>
        <Border BorderThickness="1" BorderBrush="Black" Grid.Row="1">
            <MediaElement x:Name="mediaElement1" Source="Silverlight_540p20s.mp4" AutoPlay="True" Grid.Row="1"  Stretch="Fill" MediaEnded="mediaElement1_MediaEnded"/>
        </Border>
        <Rectangle Grid.Row="2" Name="rectangle2" Stroke="Black" StrokeThickness="1" VerticalAlignment="Bottom" Height="1" Margin="0,0,0,20">
            <Rectangle.Effect>
                <BlurEffect Radius="3"/>
            </Rectangle.Effect>
        </Rectangle>
    </Grid>
</UserControl>

The C# code below starts and repeats the video.

using System.Windows;
using System.Windows.Controls;

namespace SpinningVideoPanel
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

            Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            this.rotationStoryBoard1.Begin();
        }

        private void mediaElement1_MediaEnded(object sender, RoutedEventArgs e)
        {
            mediaElement1.Stop();
            mediaElement1.Play();
        }
    }
}

Configuration settings promote GPU utilization, in case a suitable graphics card is present in the client computer.

You can see the rotating video panel in action in my App Shop here.

Advertisements

Choose between Plug-Ins and HTML5? No, go for Apps!

Stats show that consumers like plug-ins, but site owners fear they don’t. Developers are caught in the middle. Must we choose the HTML5 technology stack with is meager installed base, or build on plug-ins and restrict our client base? No! Developers can turn to making Apps that hold or require plug-ins. A web site becomes an App feed, a home page becomes an App store.

Introduction

What will people visit your web site with? If you have some interest that they do, you want to know, because you will have to find your optimal position somewhere between a mouth watering user experience and accessibility for all. An ultimate user experience requires “the latest technologies”, accessibility for all requires, alas, the eldest.

Statistics concerning the web are easy to obtain, but vary wildly among sources en change quickly. Let’s first see what web browsers look like (today, according to various sources).

Statistics on web browsers

Market share: diversity – incompatibility

Which web browser has the largest market share (on PC)? Without distinguishing between the various versions, we see that at early February 2011 (source: www.Computeridee.nl <- www.Tomsguide.com <- www.netmarketshare.com )

Web Browser Market Share (%)
Internet Explorer 56
Firefox 23
Chrome 11
Safari 6
? ?

I myself have IE 9 (beta), Chrome 9 and Safari 5 installed on my PC (Firefox seems a bit behind technologically at this moment. Many more people will be in comparable situation, so what do these figures mean? Most windows PCs (87% according to www.statowl.com) will have at least IE.

Anyway, the trend is down for Internet Explorer, and up for the others. Opera has gone into the category “?”. The four dominant web browsers use three rendering engines, all with different capabilities. Great!

Unifying technologies – plug ins

By providing plug-ins, technology is added to a web browser. Web sites that build on a plug-in can depend on practically all the features built into the plug-in, across the dominant web browsers. But how about the market penetration of the web browser plug-ins? If I build my site on a plug-in, will anybody be able to see / hear it? There are three major plug-ins: Flash, Java and Silverlight. This is what we know about their use (source: www.statowl.com , figures over December 2010):

Web Browser plug-in Market Share (%)
Flash 96
Java 79
Silverlight 60
QuickTime 59

So, all PCs have Flash. Note that market share for web browser plug-ins is like that of web browsers not mutually exclusive. You will have at least two, but probably all of them installed.

The trend is (slightly) down for Java, stable for Flash, and up for the rest.

Unifying technologies – The Html5 technology stack

Slowly but surely, Html5 makes its way to the web browser. The whole technology stack mentioned here consists of Html5, CSS3, JavaScript 1.8.5, and perhaps SVG 1.1. These technologies each have strong capabilities in 3D graphics and media support.

A drawback compared to plug-ins is that these technologies lag behind: they do not provide webcam or microphone support. Ok, Html5 has the ‘device’ tag, but it is not implemented in any (main) web browser. According to the Wikipedia, there are no plans to do so either. You can do so much more with plug-ins.

A problem, I think, with these technologies is that they are / have open standards, directed by boards containing parties that also have other, prevailing, interests. Progress in these boards and standards is slow, and so is their implementation. Nevertheless: support for (many of the features of) these technologies can be relied upon in the near future.

Where do we find support for above technologies? In the latest browser versions (IE9 beta, Chrome 9, Safari 5) you find:

Technology IE9 (beta) Chrome Safari Source
Html 5 96 pts 242 pts 202 pts The HTML5 test (max 300 pts)
CSS 3.0 Slight Partial Partial Wikipedia
JavaScript 1.8.5 Y Y Y Tutsplus
SVG 1.1 Limited (IE8 no support) partial Partial Wikipedia

You can find The Html5 test Here. You can find TutsPlus Here.

Statistics on web sites

Web browsers pull data from web sites; there will have to be some kind of compatibility.

According to www.statowl.com 88% of the internet users has a broadband connection to the web. So, what do, or can, they haul in?

– Only 30-40% of the web pages contain Flash elements.
– Only 3,2% of the web pages contain AJAX elements.

source: http://www.flashmagazine.com/news/detail/how_many_sites_use_flash/ (3,5 million pages tested in 2009).

Opera also did extensive research : http://dev.opera.com/articles/view/mama-key-findings/ (2009) and found that:

– There are about 1 trillion (10^12) web pages.
– CSS (any version) is used in 80% of the pages.
– Scripting (mainly JavaScript) is used in 75% of the pages.

Conclusions

1. The market for web browsers is divided, PC owners are likely to have several.
2. Consumers don’t mind installing some plug-ins to have the ultimate user experience.
3. Site owners don’t trust plug-ins, they rely on HTML, CSS and JavaScript.
4. The new and improved HTML, CSS and JavaScript versions find their way into web browsers only slowly.

So web page consumers and web site owners are on different tracks with regards to the ultimate user experience technology. Web browser builders all go their own way.

Now suppose that you want to create great web sites for many people. What to do?

– Use plug- ins, and only few site owners want to buy your sites.
– Use the Html Stack, and the state of the art in web browsers limits your possibilities.

Caught in the middle? Yes. Really? No!

We now have a new phenomenon: the App. People download software that is specific to some task or domain. Apps run on your device, usually out of browser, and are often connected applications. This provides a way around the web browser, or if you must, to install an App as part of your browser (that’s a plug-in, isn’t it?). Well, if you are downloading and installing an application, you don’t mind installing some supporting software that can also be used by other Apps, right?

So, this provides a way around the whole problem, and new possibilities to make your living on the internet therewith.

Make your website a place that feeds your Apps, Make your home page your App store! That is Web 2.0 also.