It lives (again)

Ooops!  I really should have posted that the Silverlight issues have been fixed and TeamLive lives again.  This happened a while back but nobody updated the blog.

Still waiting

Late summer became fall. The rumours of Aug 8th (for the Olympics) came to nothing. Still no Silverlight 2 – and we’re just waiting around with a dead application.

Beta means forever having to you’re sorry.

New Release

Today we’ve released a new version of TeamLive to add extra functionality and to address comments and suggestions made by our users.

Designer improvements

The Color Picker in the designer has been expanded to include a ‘foreground’ and ‘background’ option if the selected control requires it.  Currently the Rectangle and Ellipse drawing controls support this feature and it will be rolled out to other controls very soon.

A further enhancement to the Color Picker is the ability to type in a Hex color code.  This makes matching up those all important corporate brand colors easy.

The right click context menu in the designer has been improved to intelligently enable / disable options.  For example you can no longer ‘Paste’ before a ‘Copy’.  Also added to the right click menu are the ‘Send forward’ and ‘Send back’ options for the fine tuning of a control’s order in your design.

Portfolio improvements

In the portfolio editor you can now add and remove items from the portfolio using the add and remove buttons.  This is in addition to the existing drag and drop functionality.

In the portfolio reviewer, you can now move through the slides easily using the new ‘Next’ and ‘Previous’ buttons.

 

As always we are constantly working to make improvements to TeamLive, so check back soon for further announcements.  In the meantime, head on over to TeamLive to give these new features a try.

New release

New release of TeamLive today.  It’s only been a few days since the last release so only minor changes – bugs found by beta testers, suggestions from partners etc.

See the portfolio of changes to see what’s changed

Silverlight 2 lightbox

TeamLive blends Asp.net, Ajax and Silverlight in a number of places.  E.g. during a multi-file upload we adjust the OBJECT’s styles giving it more screen space for displaying the progress bars.

For the next iteration of TeamLive we may introduce a lightbox to help users navigate their image grids. 

I was interested to see how far I could push the html/Silverlight blend and the lightbox seemed like a good component for my experiment.

I’ve just made a start on the research – so just in case the requirement gets canned this is where I got to.

Some of the requirements for the lightbox:

• Only load the big image if needed (duh!)
• Small xap (the js lightboxes we’ve used in the past have required a lot of js and/or associated images) – this xap is only 8K
• Only one Silverlight lightbox object per page (we didn’t want lots of objects being created)
• Simple to use (drop a xap on a page and call some js)
• Degrade cleanly when Silverlight 2 is not present

 

Demo

If you have Silverlight 2 installed visit http://www.devprocess.com and click one of the images…

Back? 

I hope you saw something like this:

If you just got an ugly window.open then you don’t have Silverlight 2.

 

The code

Firstly, the PageBlanket silverlight class.  A simple class that can be used to disable the page with an overlay.

A similar technique is used by the modal popup overlay (see the ModalPopup on the AjaxControlToolkit: http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ModalPopup/ModalPopup.aspx)

/// <summary>
/// PageBlanket covers a page with a partially transparent div
/// to prevent users interacting with the page - can be used to simulate a modal
/// dialog
/// </summary>
public class PageBlanket
{
    HtmlElement _blanket = null;
    /// <summary>
    /// Lazy initialization on first call
    /// </summary>
    private void Initialize()
    {
        if (_blanket == null)
        {
            //create a div that will take up the whole page and cover the content underneath
            _blanket = HtmlPage.Document.CreateElement("div");

            HtmlPage.Document.Body.AppendChild(_blanket);
            _blanket.SetStyleAttribute("position", "fixed");
            _blanket.SetStyleAttribute("top", "0px");
            _blanket.SetStyleAttribute("left", "0px");
            _blanket.SetStyleAttribute("height", "100%");
            _blanket.SetStyleAttribute("width", "100%");
            _blanket.SetStyleAttribute("backgroundColor", "#808080");
            _blanket.SetStyleAttribute("filter", "alpha(opacity=50)");
            _blanket.SetStyleAttribute("opacity", "0.5");
            _blanket.SetStyleAttribute("z-index", "3");
            _blanket.SetStyleAttribute("display", "none");
        }
    }

    /// <summary>
    /// Show the blanket and cover the page
    /// </summary>
    public void Show()
    {
        //just in case not init'ed
        Initialize();
        //clear display attribute to show the blanket
        _blanket.SetStyleAttribute("display", "");
    }

    /// <summary>
    /// Hide the blanket again
    /// </summary>
    public void Hide()
    {
        //hide the blanket
        _blanket.SetStyleAttribute("display", "none");
    }
}

Page blanket creates a div, sets the style, jams it in the page, and toggles the display style to show/hide the div.  This effectively disables the page while we do the Silverlight stuff.

Dynamically showing/hiding the Silverlight control turned out to be harder. 

Firefox gets upset if you start moving the control around, changing zIndex, altering display style dynamically. 

I was getting working code in IE7 and “Trying to get unsupported property on scriptable plugin object!” errors in Firefox.

The solution I found (works on IE7, Firefox2 and Safari (not tested on anything else yet)) was to set a small Width and Height (yeah, yeah – I know).    I make sure I set the style of the object at the start (changing position and zIndex dynamically in the C# screwed up the scriptableobject):

The lightbox code

Note it positions the lightbox in the center of the screen.  Originally the code positioned the lightbox over the item that launched it – but it never looked quite right so I tried centering the lightbox.  I’m not sure it’s much better in the center – so I’m waiting for inspiration.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;
using System.Windows.Media.Imaging;

namespace dpLightbox
{
    [ScriptableType]
    public partial class Page : UserControl
    {

        public Page()
        {
            InitializeComponent();
            Loaded += new RoutedEventHandler(Page_Loaded);
            //keep the lightbox in the center if page is resized
            HtmlPage.Window.AttachEvent("onresize", new EventHandler(Window_Resize));
        }

        void Window_Resize(object sender, EventArgs e)
        {
            PositionToCenter();
        }

        void Page_Loaded(object sender, RoutedEventArgs e)
        {
            //register for javascript control
            HtmlPage.RegisterScriptableObject("LightboxController", this);

            //the close button
            bClose.MouseEnter += new MouseEventHandler(bClose_MouseEnter);
            bClose.MouseLeave += new MouseEventHandler(bClose_MouseLeave);
            bClose.MouseLeftButtonUp += new MouseButtonEventHandler(bClose_MouseLeftButtonUp);
        }

        bool closing = false;
        /// <summary>
        /// Close the lightbox
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        void bClose_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            closing = true;
            rCloseGlow.Opacity = 0.0;
            sbLightbox.Completed += new EventHandler(sbLightbox_Completed);
            sbLightbox.AutoReverse = true;
            sbLightbox.Stop();
            sbLightbox.Begin();
            sbLightbox.Seek(new TimeSpan(0, 0, 0, 0, 500));

        }

        void sbLightbox_Completed(object sender, EventArgs e)
        {
            if (closing)
            {
                _blanket.Hide();

                Width = 0;
                Height = 0;
                HtmlPage.Plugin.SetStyleAttribute("width", "1px");
                HtmlPage.Plugin.SetStyleAttribute("height", "1px");
            }

            closing = false;
        }

        void bClose_MouseLeave(object sender, MouseEventArgs e)
        {
            rCloseGlow.Opacity = 0.0;

        }

        void bClose_MouseEnter(object sender, MouseEventArgs e)
        {
            rCloseGlow.Opacity = 1.0;
        }

        double paddingTop = 55;
        double padding = 25;
        PageBlanket _blanket = new PageBlanket();
        [ScriptableMember]
        public void showLightbox(string imgTitle, string imgSrc, double imgWidth, double imgHeight)
        {
            _blanket.Show();

            txtTitle.Text = imgTitle;
            imgMain.Source = new BitmapImage(new Uri(imgSrc, UriKind.RelativeOrAbsolute));
            imgMain.ImageFailed += new ExceptionRoutedEventHandler(imgMain_ImageFailed);

            //setup the lightbox size
            double dWidth = imgWidth + (padding * 2);
            double dHeight = imgHeight + (padding + paddingTop);

            Width = dWidth;
            Height = dHeight;

            kfWidth.Value = dWidth;
            kfHeight.Value = dHeight;

            HtmlPage.Plugin.SetStyleAttribute("height", Height.ToString() + "px");
            HtmlPage.Plugin.SetStyleAttribute("width", Width.ToString() + "px");

            sbLightbox.Stop();
            sbLightbox.Seek(new TimeSpan(0));
            sbLightbox.AutoReverse = false;
            sbLightbox.Begin();

            HtmlPage.Plugin.SetStyleAttribute("display", "");

            PositionToCenter();
        }

        void imgMain_ImageFailed(object sender, ExceptionRoutedEventArgs e)
        {
            //the developer needs to decide what should happen here
            //empty lightbox?  don't show the lightbox?

        }

        private void PositionToCenter()
        {
            Size clientBounds = BrowserHelper.GetClientBounds();
            Point ptScrollPos = BrowserHelper.GetScrollPosition();

            double dTop = ptScrollPos.Y + ((clientBounds.Height - Height) / 2);
            double dLeft = ptScrollPos.X + ((clientBounds.Width - Width) / 2);

            HtmlPage.Plugin.SetStyleAttribute("top", dTop.ToString() + "px");
            HtmlPage.Plugin.SetStyleAttribute("left", dLeft.ToString() + "px");
        }

    }

}

Using the lightbox

In your aspx.

            <asp:Silverlight ID="slLb" runat="server" Source="~/ClientBin/dpLightbox.xap" Version="2.0" 

Width="1px" Height="1px" PluginBackground="Transparent" Windowless="true" 

style="position:absolute;z-index:4;">
            <PluginNotInstalledTemplate></PluginNotInstalledTemplate>
           </asp:Silverlight>

The PluginNotInstalledTemplate gets rid of the install Silverlight 2 prompt when Silverlight 2 isn’t installed – which is nice as the Lightbox isn’t essential functionality.

Put this bit of Javascript in the head to simplify usage.  This gets the Silverlight xap to show the lightbox or (shudder) a window.open if Silverlight 2 isn’t there.

  <script type=”text/javascript”>
    function lightbox(imgTitle,imgSrc,imgWidth,imgHeight)
    {
        var lbContent=document.getElementById(“slLb”).Content;
        if(lbContent!=null)
        {
            lbContent.LightboxController.showLightbox(imgTitle,imgSrc,imgWidth,imgHeight);
        }
        else
        {
            window.open(imgSrc,“noSilverlight”,“menubar=no,toolbar=no,height=”+imgHeight+“,width=”+imgWidth);
        }
    }   
  
    </script>

Showing a lightbox – to show a lightbox call the function above.

e.g.

<a href=”javascript:lightbox(‘TeamLive designer’,'http://www.devprocess.com/App_Themes/Default/lb_designer.jpg’,600,296);”>

<img src=”App_Themes/default/designer.jpg” class=”photosmall” width=”264″ height=”130″ alt=”Screenshot from devProcess TeamLive” />

</a>

 

Where next?

The requirement may be scheduled for implementation, in which case this code will be refined, tested and included in the build.  If the code doesn’t end up with too many other dependencies (which needs to be avoided if we’re to keep the size of the xap down) then I’ll try and post the finished lightbox source here later.  I’ll also try and post instructions for users that don’t want to learn Silverlight but just want to drop a lightbox on their page.

The source

If you want to play further then download the source – if you just want the component download the xap.

Deep Zooming

Quick intro; I’m Dave and I am one of the developers for TeamLive.com. 

You’ve only heard from Adam so far so it’s about time someone else had a crack as well.

One of the technologies we are interested in integrating into TeamLive in some way is DeepZoom.  What DeepZoom allows you to do is present a very high resolution picture to the user but in a way that they are only downloading enough data for what they can see.  It can be compared to the way Google Maps downloads higher and higher res satellite images as you zoom in.  The difference with DeepZoom is that the transition between the different resolution is handled pretty smoothly (obviously depending on the speed of your internet connection).  Anyway, if you’ve found this post you already know what DeepZoom is, so enough rambling.

Here are a few posts I published on my own blog about DeepZoom before I was brave enough to post on this one.  I promise I’ll post some TeamLive blog exclusive content very soon.

Deep Zoom – Doing more than the demos

Silverlight 2 Deep Zoom SubImages

More on Deep Zoom

I hope you find those posts interesting, and don’t forget to register at TeamLive.com.

TeamLive review portfolio

The TeamLive designer is the most “Silverlighty” bit of TeamLive, but you need to register to use that (registration is easy and free – but even so…).

But if that’s too much like work then checkout the Review portfolio.

 

No registration is needed to view a portfolio (unless you want to comment or rate the pages) and you’ll get an idea of how we’re using Silverlight 2.

TeamLive public registration activated

We’ve finally added the TeamLive public registration page.

For the past few months registration has been by invitation only, but now anyone can play.

To register go to: http://www.teamlive.com/SignUp.aspx

TeamLive is an online design collaboration application written using ASP.Net, AJAX and lots of Silverlight.

If you’re interested in how we’ve used Silverlight then you might want to land on the technology page.

TFS Build and Silverlight 2

Well, Silverlight 2 is finally out.

I’ve had so little sleep that my bloodshot eyes are applying a red filter to everything (is the Silverlight logo supposed to be purple?)

• Thursday and Friday were spent just getting code to compile again.
• The weekend was sacrificed to changing web references into service references and squashing bugs.
• ..and today we finally got TFS to start building again.

For us, as with many development teams, we entirely rely on automated builds.  But I can never find a way of getting automated builds and beta software to play nicely. 

 

So I’ve just spent five and a half frustrating hours:

• reading .targets files
• writing custom build steps
• trying to stop the Silverlight build process from copying system.xml.dll into the release directory (when it then gets picked up as a reference to non-Silverlight projects)

Anyway, it’s there now and we can finally start building servers and releasing software.

Although it’d be nice if this:

didn’t look like this

to my tired eyes.

 

..but before you feel any pangs of sympathy – yes, I did know it was Alpha software – and yes, I do realize that we’re less than a week into the first beta – so, yes, it is all our own fault.

Drunk or pixelated?

This is my first post using Live Writer… which is relevant – as you’ll see…

We had a bug logged that pixelated should be spelt pixilated.

The button applied this effect to hide sensitive data.

Personally I don’t think that pixelated is a rare word.  It gets 1,830,000 hits in Google against pixilated’s 282,000.

The QA team had checked using MSWord and pixelated wasn’t shown as a word – it (and they) suggested pixilate instead.

..and (I told you this was relevant) Live Writer wants to do the same.

 

I don’t want to complain too much about the MS spell checker when Microsoft have finally worked out (in Word 2007) that organization (with a z) IS valid British English!

According to the Oxford English Dictionary and Dictionary.com – Pixilated means eccentric or drunk, whereas pixelated means – well – you know what it means.

But it does explains why, when I’m drunk, everything goes blurry – it’s been pixilated!