The Sandpit

How to use WPF in a web service?

2011-12-15T15:25:00.001-08:00

Using WPF in a web service might seem bizarre, but consider the following scenarios:

You need to burn in a watermark into images requested from web application,
You want to apply a red-eye reduction process to photographs takes from a mobile application, or
You want to apply a Jason Bourne night effect to images in a web mapping application.

We recently implemented something similar to the third scenario (see blog, source, live app). A client web application written in JavaScript, Flex or Silverlight could apply an image rendering effects by parsing an image’s url through a proxy service. The proxy service, using WPF, would apply a bitmap effect and return a modified image. This technique adds the power of WPF to thin client at the cost of minimal network latency.

Below is a detailed description of this proxy web service.

The following class is an ASP.NET generic web handler called “invert”. When published it will be accessible as ../virtualdirectory/invert.ashx. and will perform a color negative effect on parsed images. Because our server is accommodating multiple effects, one effect per handler, the web context is handed to static method to reduce the amount of redundant code.

public class Invert : IHttpHandler {
    public void ProcessRequest(HttpContext context) {
        Shader.Process(context, ShaderType.Invert);
    }
    public bool IsReusable {
        get { return false; }
    }
}

The code below is performing a number of important tasks. Firstly, because this proxy is published on the internet we need to add some restrictions so that it is only used as intended. The proxy will only entertain requests from web applications published on the maps.esri.com domain and it will only process images hosted on the services.arcgisonline.com domain. If the proxy request is legitimate, the remote image is downloaded and passed to a new background thread. The key is the creation of a background thread with a single-threaded apartment which is required to use COM and hence WPF. The proxy (or IIS) process is put only hold as the WPF operation is underway. The background thread returns a new image as an array of bytes which are then passed back to the client.

public class Shader {
    public static void Process(HttpContext context, ShaderType effect) {
        // Only accept request from apps from this domain!
        if (!context.Request.UrlReferrer.ToString().ToLowerInvariant().
                Contains("maps.esri.com")) {
            context.Response.StatusCode = 403;
            context.Response.End();
            return;
        }
            
        // Check for query string
        string query = Uri.UnescapeDataString(context.Request.QueryString.ToString());
        if (string.IsNullOrEmpty(query)) {
            context.Response.StatusCode = 403;
            context.Response.End();
            return;
        }
 
        // Filter requests
        if (!query.ToLowerInvariant().Contains("services.arcgisonline.com")) {
            context.Response.StatusCode = 403;
            context.Response.End();
            return;
        }
 
        // Create web request
        WebRequest webRequest = WebRequest.Create(new Uri(query));
        webRequest.Method = context.Request.HttpMethod;
 
        // Send the request to the server
        WebResponse serverResponse = null;
        try {
            serverResponse = webRequest.GetResponse();
        }
        catch (WebException webException) {
            context.Response.StatusCode = 500;
            context.Response.StatusDescription = webException.Status.ToString();
            context.Response.Write(webException.Response);
            context.Response.End();
            return;
        }
 
        // Exit if invalid response
        if (serverResponse == null) {
            context.Response.End();
            return;
        }
 
        // Configure reponse
        context.Response.ContentType = serverResponse.ContentType;
        Stream stream = serverResponse.GetResponseStream();
 
        // Read response
        byte[] buffer = new byte[32768];
        int size = 0;
        int chunk;
        while ((chunk = stream.Read(buffer, size, buffer.Length - size)) > 0) {
            size += chunk;
            if (size != buffer.Length) { continue; }
            int nextByte = stream.ReadByte();
            if (nextByte == -1) { break; }
 
            // Resize the buffer
            byte[] newBuffer = new byte[buffer.Length * 2];
            Array.Copy(buffer, newBuffer, buffer.Length);
            newBuffer[size] = (byte)nextByte;
            buffer = newBuffer;
            size++;
        }
        serverResponse.Close();
        stream.Close();
 
        // Shrink buffer
        byte[] bytes = new byte[size];
        Array.Copy(buffer, bytes, size);
 
        // If the request is not a JPEG image then return data
        if (!serverResponse.ContentType.ToLowerInvariant().Contains("image/jpg")) {
            context.Response.OutputStream.Write(bytes, 0, bytes.Length);
            context.Response.End();
            return;
        }
 
        // Create class to send to STA backgroung thread
        ShaderWorker work = new ShaderWorker() {
            Source = bytes,
            ShaderEffect = effect
        };
 
        // Execute background thread
        Thread worker = new Thread(new ThreadStart(work.Execute));
        worker.SetApartmentState(ApartmentState.STA);
        worker.Name = "CreateImageWorker";
        worker.Start();
        worker.Join();
 
        // Return processed stream
        context.Response.OutputStream.Write(work.Target, 0, work.Target.Length);
        context.Response.End();
    }
}

This enumerator lists available pixel shaders. These shaders (or “effects”) were downloaded from the Windows Presentation Foundation Pixel Shader Effects Library.

public enum ShaderType {
    Emboss,
    Invert,
    Monochrome,
    Mosaic,
    Pixelate,
    Tint
}

And lastly, this is were the magic happens. This class is executed from the main IIS thread as a single-apartment thread as explained above. The source image is loaded as a generic BitmapImage in an Image, rendered with an effect and then exported to a new byte array.

public class ShaderWorker {
    public ShaderType ShaderEffect { private get; set; }
    public byte[] Source { private get; set; }
    public byte[] Target { get; private set; }
    public void Execute() {
        // Create bitmapimage
        MemoryStream m = new MemoryStream(this.Source);
        BitmapImage b = new BitmapImage();
        b.BeginInit();
        b.DecodePixelWidth = 256;
        b.DecodePixelHeight = 256;
        b.StreamSource = m;
        b.EndInit();
        b.Freeze();
 
        // Create image element
        Image i = new Image() {
            Source = b
        };
 
        // Assign shade effect
        switch (this.ShaderEffect) {
            case ShaderType.Emboss:
                i.Effect = new EmbossedEffect();
                break;
            case ShaderType.Invert:
                i.Effect = new InvertEffect();
                break;
            case ShaderType.Monochrome:
                i.Effect = new MonochromeEffect();
                break;
            case ShaderType.Mosaic:
                i.Effect = new MosaicEffect();
                break;
            case ShaderType.Pixelate:
                i.Effect = new PixelateEffect();
                break;
            case ShaderType.Tint:
                i.Effect = new TintEffect();
                break;
        }
 
        // Assign element size
        i.Arrange(
            new System.Windows.Rect(
                new System.Windows.Size(256, 256)
            )
        );
        i.UpdateLayout();
 
        // Render image element to a new bitmap
        RenderTargetBitmap r = new RenderTargetBitmap(256, 256, 96, 96,
                                                      PixelFormats.Default);
        r.Render(i);
 
        // Create a new memory stream
        MemoryStream memoryStream = new MemoryStream();
 
        // Export bitmap to the stream
        JpegBitmapEncoder encoder = new JpegBitmapEncoder();
        encoder.Frames.Add(BitmapFrame.Create(r));
        encoder.Save(memoryStream);
 
        // Export the stream to a byte array
        byte[] bytes = memoryStream.ToArray();
        memoryStream.Close();
 
        // Shutdown rendering thread (if alive)
        if (r.Dispatcher.Thread.IsAlive) {
            r.Dispatcher.InvokeShutdown();
        }
 
        // Store processed image (as a byte array)
        this.Target = bytes;
    }
}

In summary, this post describes the technique of using WPF in a web service to perform advanced rendering. In theory, this technique is not restricted to image processing but could also be used to generate graphics of charts, diagrams and even three dimensional scenes. During limited testing it is obvious that this technique introduces network latency, particularly when the service has been dormant. And what is still unknown is whether the rendering is performed in hardware (i.e. GPU) or software (i.e. CPU). Please comment below if you know the answer to this or know of a definitive test for GPU vs. CPU.

Applying Custom Effects to Silverlight Maps

2011-11-10T11:49:00.001-08:00

The Larry King effect is many custom map effects available in a newly published sample by the Applications Prototype Lab.

Click here for the live app.
Click here to download the source code.

Background

With the release of Silverlight 3, Microsoft introduced the capability to apply custom effects using pixel shaders.

The ArcGIS API for Silverlight allows developers to assign effects directly to a layer or map. This sample demonstrates the application of custom effects to a map.

Silverlight versions 3 and 4 currently applies effects in software, that is, using the CPU rather than the GPU. On slower computers users may experience a slight delay when navigating or changing effects.

One advantage of this technique is that web developers can extend the utility of standard base maps. For example, a developer could create an effect that would allow the Esri streetmap base map to be more legible at night. Applying effects does not create more content nor impact network bandwidth.

For a technical discussion on pixels shaders for Silverlight we recommend this article.

Below are a few screenshots from the live application linked above.

Inverted

Gray

Saturation/Desaturation

Censored

Embossing

Movie

How to add mouse drag behavior in Silverlight

2011-08-25T16:57:00.001-07:00

Today, end users expect (or demand) intuitive and interactive web applications. One component of this is the ability to manipulate object with a mouse. This blog post provides a three step walk through that describes how to create a draggable picture of Charles Babbage, the inventor of the first computer.

This walkthrough requires:

Microsoft Visual Studio 2010 (link)
Microsoft Visual Studio 2010 Service Pack 1 (link) – Optional
Microsoft Silverlight 4 Tools for Visual Studio 2010 (link)
Microsoft Expression Blend SDK for Silverlight 4 (link)

Step 1 – In VS2010, create a new Silverlight application called SilverlightApplication1

Click ok to create a host ASP.NET web application

Step 2 – Add blend interactivity behavior

Add the following assembly references:

Microsoft.Expression.Interactions
c:\Program Files (x86)\Microsoft SDKs\Expression\Blend\Silverlight\v4.0\Libraries\Microsoft.Expression.Interactions.dll
System.Windows.Interactivity
c:\Program Files (x86)\Microsoft SDKs\Expression\Blend\Silverlight\v4.0\Libraries\System.Windows.Interactivity.dll

Step 3 – Add drag behavior to an image

Copy and paste the following code into MainPage.xaml. This will display an image of Charles Babbage in the center of the screen. The XAML to enable mouse dragging is highlighted in yellow below.

<UserControl
    x:Class="SilverlightApplication1.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"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" 
    mc:Ignorable="d"
    d:DesignHeight="600"
    d:DesignWidth="800"
    >
    <Grid x:Name="LayoutRoot" Background="White">
        <Image
            Width="100"
  Source="http://upload.wikimedia.org/wikipedia/commons/6/6b/Charles_Babbage_-_1860.jpg"
            >
            <i:Interaction.Behaviors>
                <ei:MouseDragElementBehavior/>
            </i:Interaction.Behaviors>
        </Image>
    </Grid>
</UserControl>

You are done! Press F5 to start the project is debug mode. Using your mouse, the picture of Charles Babbage can dragged around the screen.

This works fine but with a little extra work we can make the application a little more intuitive. By adding a frame, drop shadow and associating a hand cursor, the picture now has a visual queue inviting users to interact.

<UserControl
    x:Class="SilverlightApplication1.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"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" 
    mc:Ignorable="d"
    d:DesignHeight="600"
    d:DesignWidth="800"
    >
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid>
            <Grid Background="White" Cursor="Hand" HorizontalAlignment="Center"
                  VerticalAlignment="Center">
                <i:Interaction.Behaviors>
                    <ei:MouseDragElementBehavior/>
                </i:Interaction.Behaviors>
                <Grid Background="Black">
                    <Grid.Effect>
                        <BlurEffect Radius="15"/>
                    </Grid.Effect>
                </Grid>
                <Grid Background="White"/>
                <Image
                    Margin="10"
                    Width="100"
  Source="http://upload.wikimedia.org/wikipedia/commons/6/6b/Charles_Babbage_-_1860.jpg"
                    />
            </Grid>
        </Grid>
    </Grid>
</UserControl>

How to create a simple proxy in ASP.NET

2011-08-24T16:03:00.001-07:00

A common obstruction when developing Silverlight web applications is cross domain access. Silverlight has built-in security that prevents communication to servers that do not explicitly granted access using with either a client access policy or cross domain file. Even though a server has services intended for public use, if the server does not have a cross domain file then Silverlight apps will be denied access.

This post presents a convenient and legitimate way to overcome this restriction with a simple proxy service in three easy steps!

Step 1 – In Visual Studio 2010, create a new ASP.NET Web Application project called WebApplication1

Step 2 – Add a new generic handler called proxy.ashx

Step 3 – Copy and paste this code into proxy.ashx.cs.

using System;
using System.IO;
using System.Net;
using System.Web;
 
namespace WebApplication1 {
    public class proxy : IHttpHandler {
        public void ProcessRequest(HttpContext context) {
            HttpResponse response = context.Response;
 
            // Check for query string
            string uri = Uri.UnescapeDataString(context.Request.QueryString.ToString());
            if (string.IsNullOrWhiteSpace(uri)) {
                response.StatusCode = 403;
                response.End();
                return;
            }
 
            // Filter requests
            if (!uri.ToLowerInvariant().Contains("wikimedia.org")) {
                response.StatusCode = 403;
                response.End();
                return;
            }
 
            // Create web request
            WebRequest webRequest = WebRequest.Create(new Uri(uri));
            webRequest.Method = context.Request.HttpMethod;
 
            // Send the request to the server
            WebResponse serverResponse = null;
            try {
                serverResponse = webRequest.GetResponse();
            }
            catch (WebException webExc) {
                response.StatusCode = 500;
                response.StatusDescription = webExc.Status.ToString();
                response.Write(webExc.Response);
                response.End();
                return;
            }
 
            // Exit if invalid response
            if (serverResponse == null) {
                response.End();
                return;
            }
 
            // Configure reponse
            response.ContentType = serverResponse.ContentType;
            Stream stream = serverResponse.GetResponseStream();
 
            byte[] buffer = new byte[32768];
            int read = 0;
 
            int chunk;
            while ((chunk = stream.Read(buffer, read, buffer.Length - read)) > 0) {
                read += chunk;
                if (read != buffer.Length) { continue; }
                int nextByte = stream.ReadByte();
                if (nextByte == -1) { break; }
 
                // Resize the buffer
                byte[] newBuffer = new byte[buffer.Length * 2];
                Array.Copy(buffer, newBuffer, buffer.Length);
                newBuffer[read] = (byte)nextByte;
                buffer = newBuffer;
                read++;
            }
 
            // Buffer is now too big. Shrink it.
            byte[] ret = new byte[read];
            Array.Copy(buffer, ret, read);
 
            response.OutputStream.Write(ret, 0, ret.Length);
            serverResponse.Close();
            stream.Close();
            response.End();
        }
        public bool IsReusable {
            get { return false; }
        }
    }
}

You are done! To test, press F5 to run the web application in debug mode. Your default web browser will display the Default.aspx page from your project.

Without closing the web browser, append the name of the proxy service and the web resource (highlighted below) that you need access to. For example:
http://localhost:51220/proxy.ashx?http://upload.wikimedia.org /wikipedia/en/f/f0/New-esri-logo.jpg

This is the result.

In summary, this post described how to crate a simple proxy web service. The proxy can be used by Silverlight web application to access resources that are restricted due to a missing cross domain file. To prevent malicious use of the proxy it is advisable to add some sort of access restriction, for example, in this exercise the proxy was configured to only accept requests for content from the wikimedia.org domain.

Moondust – A WPF Theme

2011-08-12T18:04:00.001-07:00

Introducing moondust, a metro inspired WPF theme. The theme is far from complete but does include a button, checkbox, radiobutton, sliders and scrollbars.

Moondust emulates metro’s bold monocrome outlines but includes the addition of subtle drop shadow and white mouse-over halo effect.

The source code to this theme is available via the following link. The download includes the sample application displayed in this post.

How to align Kinect’s depth image with the color image?

2011-08-12T14:58:00.001-07:00

These two good looking gentlemen are demonstrating the blending of kinect's depth and video feeds. Because the depth and video sensors are different resolutions and offset on the device itself there a computation procedure needed to map data one to the other.

Thankfully Microsoft has provided comprehensive documentation such as the Skeletal Viewer Walkthrough and the Programming Guide for the Kinect for Windows SDK. This post is going to provide simple walkthrough to efficiently map depth sensor pixels, for each person, to the video sensor feed.

This exercise requires:

In Microsoft Visual Studio 2010, create a new WPF application and add a reference to the Microsoft.Research.Kinect assembly. In this exercise the name of the project (and default namespace) is KinectSample.

Add the following code to MainWindow.xaml:

<Window x:Class="KinectSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Kinect Sample"
        Height="600"
        Width="800"
        >
    <Grid>
        <Image x:Name="ImageVideo" Stretch="UniformToFill" HorizontalAlignment="Center"
               VerticalAlignment="Center" />
        <Image x:Name="ImageDepth" Stretch="UniformToFill" HorizontalAlignment="Center"
               VerticalAlignment="Center" Opacity="0.5" />
    </Grid>
</Window>

In MainWindows.xaml.cs add the following:

using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using Microsoft.Research.Kinect.Nui;
 
namespace KinectSample {
    public partial class MainWindow : Window {
        private Runtime _runtime = null;

        public MainWindow() {
            InitializeComponent();
 

            this.Loaded += new RoutedEventHandler(this.KinectControl_Loaded);
        }
        private void KinectControl_Loaded(object sender, RoutedEventArgs args) {
            this._runtime = new Runtime();
 
            try {
                this._runtime.Initialize(
                    RuntimeOptions.UseDepthAndPlayerIndex |
                    RuntimeOptions.UseSkeletalTracking |
                    RuntimeOptions.UseColor
                );
            }
            catch (InvalidOperationException) {
                MessageBox.Show("Runtime initialization failed. " +
                                "Please make sure Kinect device is plugged in.");
                return;
            }
 
            try {
                this._runtime.VideoStream.Open(
                    ImageStreamType.Video, 2,
                    ImageResolution.Resolution640x480,
                    ImageType.Color);
                this._runtime.DepthStream.Open(
                    ImageStreamType.Depth, 2,
                    ImageResolution.Resolution320x240,
                    ImageType.DepthAndPlayerIndex);
            }
            catch (InvalidOperationException) {
                MessageBox.Show("Failed to open stream. " +
                  "Please make sure to specify a supported image type and resolution.");
                return;
            }
 
            this._runtime.VideoFrameReady += (s, e) => {
                PlanarImage planarImage = e.ImageFrame.Image;
                this.ImageVideo.Source = BitmapSource.Create(
                    planarImage.Width,
                    planarImage.Height,
                    96d,
                    96d,
                    PixelFormats.Bgr32,
                    null,
                    planarImage.Bits,
                    planarImage.Width * planarImage.BytesPerPixel
                );
            };
            this._runtime.DepthFrameReady += (s, e) => {
                //
                PlanarImage planarImage = e.ImageFrame.Image;
                byte[] depth = planarImage.Bits;
                int width = planarImage.Width;
                int height = planarImage.Height;
                byte[] color = new byte[width * height * 4];
                ImageViewArea viewArea = new ImageViewArea() {
                    CenterX = 0,
                    CenterY = 0,
                    Zoom = ImageDigitalZoom.Zoom1x
                };
                ImageResolution resolution = this._runtime.VideoStream.Resolution;
 
                for (int y = 0; y < height; y++) {
                    for (int x = 0; x < width; x++) {
                        int index = (y * width + x) * 2;
                        int player = depth[index] & 7;
                        if (player == 0) { continue; }
                        short depthValue =
                            (short)(depth[index] | (depth[index + 1] << 8));                        
                        int colorX;
                        int colorY;
                        this._runtime.NuiCamera.GetColorPixelCoordinatesFromDepthPixel(
                            resolution,
                            viewArea,
                            x,
                            y,
                            depthValue,
                            out colorX,
                            out colorY
                        );
                        int adjustedX = colorX / 2;
                        int adjustedY = colorY / 2;
                        if (adjustedX < 0 || adjustedX > 319) { continue; }
                        if (adjustedY < 0 || adjustedY > 239) { continue; }
                        int indexColor = (adjustedY * width + adjustedX) * 4;
                        Color[] colors = new Color[]{
                            Colors.Red, Colors.Green, Colors.Blue, Colors.White,
                            Colors.Gold, Colors.Cyan, Colors.Plum
                        };
                        Color col = colors[player - 1];
                        color[indexColor + 0] = (byte)col.B;
                        color[indexColor + 1] = (byte)col.R;
                        color[indexColor + 2] = (byte)col.G;
                        color[indexColor + 3] = (byte)col.A;
                    }
                }
 
                this.ImageDepth.Source = BitmapSource.Create(
                    width,
                    height,
                    96d,
                    96d,
                    PixelFormats.Bgra32,
                    null,
                    color,
                    width * 4
                );
            };
        }
    }
}

You are done!

This sample will color code the first seven people identified by the kinect device. The most intensive part of this code is the GetColorPixelCoordinatesFromDepthPixel call that maps depth pixels to the video image. To improve performance only pixels identified by the sensor as being a person are mapped. All other depth pixels are ignored.

Kinect Control for WPF

2011-08-11T18:07:00.001-07:00

Yesterday, Esri’s Applications Prototype Lab released a sample for ArcGlobe that allows users to navigate in three dimensions using a Kinect sensor and simple hand gestures.

This post describes a sample utility library developed in conjunction with the ArcGlobe add-in called KinectControl. KinectControl is a WPF user control that can display raw kinect feeds but most importantly provide developers with the orientation, inclination and extension of both arms relative to the sensor. KinectControl was developed a generic library that can used to kinectize any application.

The following few screenshots demonstrate the capabilities of the KinectControl. By default, KinectControl displays the sensor’s video feed and the skeleton of the closest person to the sensor. The orange text at the bottom of the app is debug information from the test application.

Occasionally a limb may appear red, this indicates that one or more of the limb’s joints cannot be “tracked” and its position is “inferred” or approximated by the sensor. This often happens when a joint is obscured from view, for example, if a user is pointing their hand and arm directly towards the sensor, the user’s shoulder cannot be seen by the sensor.

On the upper right hand corner of the KinectControl are three button that allow the user to toggle between three different views. The video and depth views are self explanatory but the third, blend, is a combination of the both.

The blend view color codes each and every person identified by the kinect sensor with a different color as shown below. The kinect sensor can identify up to seven people.

This white stick figure graphic in the upper left hand corner is used to alert the user whenever he or she has moved beyond the kinect’s field of view. For example, in the screenshot below, the user has moved too far to their left.

In the bottom left hand corner are two buttons to control the inclination of the sensor. Each button click will move the sensor one degree up or down.

And lastly, the test app that is included with the sample uses binding to display the left and right arm orientation and inclination on the screen.

Please click the link below to download the KinectControl sample. To use this sample you must have a Kinect connected to Windows 7 computer with Kinect for Windows SDK installed.

Kinect for ArcGlobe

2011-08-10T13:58:00.001-07:00

On June 16, 2011, Microsoft released the Kinect for Windows SDK. This SDK allows windows developers to support motion with an Xbox 360 Kinect device. The Applications Prototype Lab at Esri has just completed a prototype using a Kinect to navigate in ArcGlobe.

To fly forward, the user can raise their right hand. The display will navigate in the direct the right hand is pointing. We call this “superman navigation”. If the left hand is elevated, the display will pivot around a central location on the globe surface. And lastly, if both hands are raised, the screen will zoom in or out as the hands are both together or apart.

To use the add-in you must have the following:

The add-in (with source code) is available here.

This add-in was challenging in sense that translating traditional mouse navigation to motion was not easy. With mouse or touch input devices, users have immediate sensory feedback once they have clicked a mouse button or touched a screen. In a number of Xbox games, this issue has been overcome with a paused hover. That is, a user uses his or her hand to move the screen cursor over a button and waits for a few seconds as an activation animation completes. This is fine for buttons that occupy discrete areas of a screen but not for interaction throughout the screen,

The approach adopted, rightly or wrongly, by this add-in is that of a virtual screen that exists at arm’s length directly in front of the user. This virtual screen only extended +/- 25° from an arm point directly ahead at the real screen. This technique provides an approximate motion to screen mapping with screen contact only at full arm extension and only within a narrow 50°x50° area in front of the user.

Ultimately a better approach could be to rely purely on touch-like gestures such as left swipe, right swipe and pinching. There has been exciting work in this area by Deltakosh on the Kinect Toolbox project but I hope that the final release of the Kinect SDK includes gesture recognition.

How to create a drop target for layers in ArcMap?

2011-07-28T15:12:00.001-07:00

This post as originally published 3/16/2007 on Microsoft Live Spaces.

Drag and drop is a convenient and intuitive method of exchanging data between windows (and applications). ESRI applications like ArcCatalog and ArcMap have drop and drop capabilities, for example, you can drag layer into the Buffer geoprocessing tool window (see above).

Using the sample code below you can add this capability to your .NET application, that is, you can make your window/control a drop target for layers dragged from the ArcMap table of contents. This code can be used in a window hosted by an ESRI application such as an ArcMap dockable window or as a standalone application.

To enable this feature, a utility class called EsriDataObject is provided below to assist with the deserialization of dropped objects from ArcMap.

The first code sample demonstrates how to use EsriDataObject in a .NET Form. The code will display the concatenate list of layer names that were dropped on the form. The code assumes there is Form called form1 and a TextBox called textBox1.

How to use "EsriDataObject" in a .NET Form.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
using ESRI.ArcGIS.Carto;

namespace MyNamespace {
    public partial class Form1 : Form {
        public Form1() {
            InitializeComponent();
            this.textBox1.AllowDrop = true;
            this.textBox1.DragEnter +=
               new DragEventHandler(this.textBox1_DragEnter);
            this.textBox1.DragOver  +=
               new DragEventHandler(this.textBox1_DragOver);
            this.textBox1.DragDrop  +=
               new DragEventHandler(this.textBox1_DragDrop);
        }
        private void textBox1_DragEnter(object sender, DragEventArgs e) {
            e.Effect = EsriDataObject.IsValid(e.Data) ?
                DragDropEffects.All : DragDropEffects.None;
        }
        private void textBox1_DragOver(object sender, DragEventArgs e) {
            e.Effect = EsriDataObject.IsValid(e.Data) ?
                DragDropEffects.All : DragDropEffects.None;
        }
        private void textBox1_DragDrop(object sender, DragEventArgs e) {
            EsriDataObject esriDataObject =
              EsriDataObject.ConvertToEsriDataObject(e.Data);
            foreach (ILayer layer in esriDataObject.LayerCollection) {
                this.textBox1.Text += layer.Name + " ";
            }
        }
    }
}

Sample 2: Source code to "EsriDataObject".

using System;
using System.Collections.Generic;
using System.IO;
using System.Text;
using System.Windows.Forms;
using ESRI.ArcGIS.Carto;
using ESRI.ArcGIS.ArcMapUI;
using ESRI.ArcGIS.esriSystem;

namespace MyNamespace {
    public class EsriDataObject {
        private const string DATAOBJECT_ESRILAYERS = "ESRI Layers";
        private const string INTERFACE_ILAYER =
            "{34C20002-4D3C-11D0-92D8-00805F7C28B0}";
        private const string INTERFACE_ITABLEPROPERTY =
            "{4657D951-5FFB-11D3-9F6C-00C04F6BC886}";
        private readonly List<ILayer> _lc = new List<ILayer>();
        private readonly List<ITableProperty> _tpc = List<ITableProperty>();
        //
        // PROPERTIES
        //
        public List<ILayer> LayerCollection {
            get { return this._lc; }
        }
        public List<ITableProperty> TablePropertyCollection {
            get { return this._tpc; }
        }
        //
        // STATIC METHODS
        //
        public static bool IsValid(IDataObject dataObject) {
            return dataObject.GetDataPresent(DATAOBJECT_ESRILAYERS);
        }
        public static EsriDataObject ConvertToEsriDataObject(
            IDataObject dataObject) {
            //
            EsriDataObject esriDataObject = new EsriDataObject();

            // Exit if dropped object is invalid
            if (EsriDataObject.IsValid(dataObject)) {
                // Get Byte Array from DataObject
               object esriLayers = dataObject.GetData(DATAOBJECT_ESRILAYERS);
                MemoryStream memoryStream = (MemoryStream)esriLayers;
                byte[] bytes = memoryStream.ToArray();

                // Load Byte Array into a Stream (ESRI Wrapper of IStream)
                IMemoryBlobStreamVariant memoryBlobStreamVariant =
                    new MemoryBlobStreamClass();
                memoryBlobStreamVariant.ImportFromVariant(bytes);
                IMemoryBlobStream2 memoryBlobStream =
                    (IMemoryBlobStream2)memoryBlobStreamVariant;
                IStream stream = (IStream)memoryBlobStream;

                // Load Stream into an ESRI ObjectStream
                IObjectStream objectStream = new ObjectStreamClass();
                objectStream.Stream = stream;

                // Get Number of Layers in Dropped Object
                byte pv;
                uint cb = sizeof(int);
                uint pcbRead;
                objectStream.RemoteRead(out pv, cb, out pcbRead);
                int count = Convert.ToInt32(pv);

                // Define Guids
                Guid guidLayer = new Guid(INTERFACE_ILAYER);
                Guid guidTable = new Guid(INTERFACE_ITABLEPROPERTY);

                // Get Dropped Layers
                for (int i = 0; i < count; i++) {
                    object o = objectStream.LoadObject(ref guidLayer, null);
                    ILayer layer = (ILayer)o;
                    esriDataObject.LayerCollection.Add(layer);
                }

                // Get Dropped TableProperties
                for (int i = 0; i < count; i++) {
                    object o = objectStream.LoadObject(ref guidTable, null);
                    if (o == null) { continue; }
                    ITableProperty tableProperty = (ITableProperty)o;
                   esriDataObject.TablePropertyCollection.Add(tableProperty);
                }
            }

            return esriDataObject;
        }
    }
}

Additional information:

Dragging and dropping objects from ArcCatalog is a lot easier than ArcMap. In ArcMap, a dragged object is packaged as an "ESRI Layer" object in the DataObject. The code above describes how to unpack an "ESRI Layer" object. In ArcCatalog, a dragged object is packaged as an "ESRI Names" object in the DataObject. Fortunately, there are ArcObjects available to pack and unpack this object.

To create an "ESRI Names" object use the following:
INameFactory.PackageNames Method

To unpackage an "ESRI Names" object use:
INameFactory.UnpackageNames Method

Lastly, here is an online example showing how to unpackage an "ESRI Names" object:
esriSystem NameFactory Example

Adding a WPF RichTextBox hyperlink at specific character positions?

2011-07-26T11:14:00.001-07:00

Adding hyperlinks to a WPF RichTextBox can be achieved at design time in XAML or programmatically at run time.

Hyperlinks are created programmatically via the hyperlink constructor by parsing either the start and end TextPointers or InLine objects. These constructors are not particularly developer friendly unless the developer is programmatically populating a RichTextBox’s FlowDocument from Runs (see here).

In a recent project I need to add a hyperlink for text between predefined character index. For example, I needed a hyperlink for the text located between character positions 100 and 110. The following extension method enables this.

RichTextBox extension:

namespace ESRI.PrototypeLab.Sample {
    public static class Extensions {
        public static Hyperlink ToHyperlink(this RichTextBox rtb, int start, int end) {
            TextPointer p1 = rtb.ToTextPointer(start);
            TextPointer p2 = rtb.ToTextPointer(end);
            if (p1 == null || p2 == null) { return null; }
            return new Hyperlink(p1, p2);
        }
        public static TextPointer ToTextPointer(this RichTextBox rtb, int index) {
            int count = 0;
            TextPointer position = rtb.Document.ContentStart;
            while (position != null) {
                if (position.GetPointerContext(LogicalDirection.Forward) ==
                    TextPointerContext.Text) {
                    string textRun = position.GetTextInRun(LogicalDirection.Forward);
                    int length = textRun.Length;
                    if (count + length > index) {
                        return position.GetPositionAtOffset(index - count);
                    }
                    count += length;
                }
                position = position.GetNextContextPosition(LogicalDirection.Forward);
            }
            return null;
        }
    }
}

How to use:

Hyperlink hyperlink = this.RichTextBox.ToHyperlink(100, 110);
hyperlink.Click += (s, e) => {
    MessageBox.Show("Hyperlink Clicked");
};

The App Interoperability Conundrum

2011-07-20T17:54:00.001-07:00

I would argue that mobile computing began the early 20^th century with the popularization of wristwatches. The wristwatch, like its ancestral pocket watch, allowed people to know, at any moment, what time it was. Mobile computers advanced significantly in 2007 when Apple introduced the iPhone. This device was not only a mobile communication device but it allowed people know, at any moment, where they are.

But I don’t want to discuss the historical importance of the iPhone, rather the paradigm shift in application design.

For the past twenty years or so, the personal computer (or PC) has dominated homes and offices throughout the world. The vast majority of PCs used some generation of Microsoft’s Windows operating system. Regardless of the criticism that Microsoft stifled innovation, Windows users have enjoyed one unquestioned privilege, interoperability.

Quite unconsciously, a PC user can perform information exchange between applications using operations like copy and paste or drag and drop. Not only can a user exchange information, like text or imagery, between applications like Internet Explorer, Excel and Word but also with third party applications. This interoperability is available because of two factors:

All Windows applications understand the same data and file types, and
Windows provides a built-in framework that software developers can use to enable the inter-application exchange of information.

It is without question that mobile devices will continue to proliferate in the consumer market with improvements in mobile infrastructure, device affordability and cultural acceptance. However I see an uneasy trend in mobile application, that is, mobile applications are becoming increasingly focused but less interoperability.

To illustrate this point, consider the following hypothetical example. I am in downtown Los Angeles, I’m hungry and need nourishment from a reputable establishment. On my iPhone I can use:

Google Maps to find a nearby restaurant,
MapQuest to get voice guided routing directions,
Built-in camera to record my memorable meal,
FourSquare to “check-in” and recommend this restaurant to my friends, and
Yelp to post a review (and snapshot) of my dining experience.

In this workflow, the only interoperable elements were the street address I copied from (1) to (2) and the photo created in (3) and shared with (5).

Obviously this workflow could be optimized by using one app to perform two or more tasks like using Google Map to a find a restaurant and driving directions. But these five apps, in my hypothetical opinion, were the best in each task.

My criticism is not targeted at the number of app used during my lunch break but the lack of interoperability between them. For example:

From Google Map, why is it not possible to send the restaurant address directly to my favorite routing apps?
From the camera app, why is it not possible to share a photo directly with Yelp.
From MapQuest, can I send the “route” to my friends so that they know where I am driving from?
To rate (or “check-in” at) the restaurant with FourSquare and Yelp why did I have to locate the restaurant in each app? Why not just click the “get current establishment” button in each app?

These comments may seem like iPhone-bashing, but they are not. I am just bringing your attention the unintentional stovepiping caused by increasingly focused mobile apps.

To paraphrase Apple’s advertising slogan, there may be an “app for that” but what is lacking is the “app to app” interoperability. Again this is not a criticism of Apple or other mobile device vendors, just a mere observation of the consumer-driven “app paradigm”.

The "app paradigm” does have its advantages. Smaller focused apps with a handful of capabilities can be deployed quickly, updated frequently, serve niches and most importantly, be profitable. Many software developers have made a health living by serving the “long tail” with $0.99 apps.

But I predict that there may be an equilibrium shift in near future in which, due to the lack of app cohesion, that devices will eventually be ruled by a handful of super-apps. The foremost, without doubt, is Google. Google may (or should?) consolidate their shopping, social networking, mapping, translation, book and search services into a single super-app.

Modeling the Real World with Silverlight 5 3D

2011-06-30T17:36:00.001-07:00

Late last year Esri’s Applications Prototype Lab published a Silverlight-based web application that could render a small area of the Earth’s surface in three dimensions. This app used Einar Ingebrigtsen’s graphics library called Balder and referenced imagery and elevation services from arcgis.com.

This year at MIX11, Microsoft released the beta of the Silverlight 5. Probably the most important improvement is the added support for GPU accelerated 3d graphics. This means Silverlight apps with 3d content will be rendered by a computer’s graphics card rather than dominating the CPU. It is now conceptually possible to develop Google Earth-like applications using Silverlight 5 3d!

Creating a virtual globe is a rather daunting project. However, inspired by Andy Beaulieu’s physics sample and associated blog post I decided to explore the possibility of modeling real world data in a browser.

Nicknamed “project alpha”, the prototype shown in the video above used the following pieces:

Esri Silverlight SDK 2.2 (link)
Mapping
Microsoft Silverlight 5 beta (link)
RIA
Balder 0.8.8.9 (link)
3D graphics engine
JigLibX 0.3.1 (link)
3D physics engine

Displaying a 3d world using streaming imagery and elevation data is not new. What is interesting about this prototype is the inclusion of a physics engine. Objects such as cars, people, tanks, planes can interact with each other and the Earth’s surface. Additionally, this prototypes shows that any location, and at any scale, can be modeled completely within a browser.

Whilst dropping hundred of tennis balls on Mount Ruapehu might seem a little fanciful, there are many practical uses of combining a 3d physics engine with mapping data. For example, an engineer may want to test drive a proposed road to examine it drivability and view. In defense, this technology can be for modeling and simulation of the battlefield.

Unless there is significant interest, the app and source code will be published once Silverlight 5 goes final.

Landsat Touch for Silverlight

2011-05-23T15:45:00.001-07:00

The Lab is proud to release Landsat Touch, a Silverlight based web application for browsing the newly published Landsat imagery.

Try the application here:
http://maps.esri.com/sldemos/landsat/default.html
(click the “need help” button in the lower left hand corner for usage tips)

Download the source code from here:
http://www.arcgis.com/home/item.html?id=04de702976434f4d8c054005ce4603a2

Earlier this year Esri announced the publication of more than 8TB of Landsat imagery as image services on ArcGIS Online. These services can be consumed by any ArcGIS client, the ChangeMatters viewer or by any custom app using the REST API.

Landsat Touch is a custom web application developed using the ArcGIS API for Silverlight. The objective of this project was to create an easy to use application that could browse, compare and contrast Landsat content and provide support for touch devices (if available). The application is fully functional using a mouse on Windows or Mac computer, but the application is optimized for Windows 7 touch devices.

Multi-touch behavior is provided using the Multi-Touch Manipulation library from CodePlex which is partially derived from Microsoft’s Manipulation and Inertial sample.

The ability for this application to compare two layers of content is conceptually similar to ArcMap’s swipe layer tool. An important distinction with Landsat Touch is that users can explicitly define the “swiped” area by manipulating the size, orientation and location of windows. However the most exciting features demonstrated by this application is its ability to be multi-touch and multi-user. On large touch devices, say 40”+ diagonally, it is conceivable that two or more users can simultaneously add and manipulate Landsat windows.

Geochat for Silverlight

2011-04-27T16:58:00.001-07:00

Geochat for Silverlight is a browser-to-browser geo-collaboration sample. Graphics drawn in browser’s map can be immediately pushed to all other browsers on the internet. The web application uses Microsoft’s implementation of Comet, a model using long lived HTTP requests to simulate server to client communication without the overhead of polling.

Geochat is implemented in two parts.

Server-side
A Windows Communication Foundation (WCF) duplex service is created to maintain a connection to Silverlight clients. The geochat implementation acts as broker between Silverlight clients by forwarding messages to individual (or all) clients.
http://msdn.microsoft.com/en-us/library/cc645027(VS.95).aspx
Client-side
The Silverlight client is using PollingDuplexHttpBinding to maintain a connection with the server using AJAX polling. The polling occurs every five seconds.
http://msdn.microsoft.com/en-us/library/cc645028(VS.95).aspx

Click here to experiment with a live sample. Complete source code for this app is available here.

How to be culturally sensitive with numbers!

2011-03-28T15:09:00.001-07:00

Earnest Rutherford from Wikipedia. Image credits.

As a developer, it is important to be culturally conscientious, specifically when it comes to the formatting and parsing of dates and numbers. A fact which I obviously overlooked recently when a user noticed some map coordinates that were displayed many orders of magnitude larger than they should have been. In this post I would like to present the issue encountered and how to resolve it.

Here is the scenario. A third party service returns a map coordinate in decimal degrees as a string. For clarity, this is represented by the following constant.

const string COORDINATE = "-117.182";

And the goal is to convert this string representation to number and assigned it to the following variable.

double longitude;

This number’s format and my computer’s locale are both set to English (United States) or “en-US”. This means that “-117.182” is easily converted to a double as shown below.

double.TryParse(
    COORDINATE,
    out longitude);
MessageBox.Show(longitude.ToString());

Under-the-hood, the .NET framework is using the computer’s current locale to guide the number conversion and subsequent display. So, the TryParse above is actually identical to the following:

double.TryParse(
    COORDINATE,
    NumberStyles.Float | NumberStyles.AllowThousands,
    new CultureInfo("en-US"),
    out longitude);
MessageBox.Show(longitude.ToString(new CultureInfo("en-US")));

Now, problems occur when a number formatted using “en-US” is parsed on a computer set to a different locale such as Spanish (or “es-ES”).

double.TryParse(
    COORDINATE,
    NumberStyles.Float | NumberStyles.AllowThousands,
    new CultureInfo("es-ES"),
    out longitude);
MessageBox.Show(longitude.ToString(new CultureInfo("es-ES")));

In Spain, the convention is to use a “.” as a thousand delimiter rather than a decimal marker as in the US. This results in the number being one thousand times larger than it should be (or originally intended to be).

We cannot change the third party service but the solution is to explicitly convert the string to a number using the “en-US” or the more generic invariant culture formatter.

double.TryParse(
    COORDINATE,
    NumberStyles.Float | NumberStyles.AllowThousands,
    CultureInfo.InvariantCulture,
    out longitude);
MessageBox.Show(longitude.ToString(new CultureInfo("es-ES")));

Now that the string is correctly parsed as a double it can be re-displayed using the current (or any other) locale.

In summary:

Whenever possible serialize dates and numbers to strings using the invariant culture, and
Never assume that dates and numbers are serialized with the current locale.

How to sort List using an Anonymous Method

2011-03-21T18:06:00.001-07:00

Gottfried Wilhem Leibniz (from wikipedia)

This post illustrates how to use an anonymous method to perform “in line” sorting of a generic list. Let’s start with the definition of a “person” object.

public class Person  {
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

And in our project we have created a generic list of “person” objects called “people”. The following code create the people variable and populates it with well known physicists.

// Create a list of people
List<Person> people = new List<Person>();
people.Add(new Person() { FirstName = "Gottfried", LastName = "Leibniz" });
people.Add(new Person() { FirstName = "Marie", LastName = "Curry" });
people.Add(new Person() { FirstName = "Albert", LastName = "Einsten" });
people.Add(new Person() { FirstName = "Isaac", LastName = "Newton" });
people.Add(new Person() { FirstName = "Niels", LastName = "Bohr" });

Next, let’s display the “before” list in a popup. This code uses a lambda expression in a LINQ expression to concatenate the names of our favorite physicists.

// Display "before" list of people
string before = string.Empty;
people.ForEach(
    new Action<Person>(
        p => before += string.Format(
            "{0} {1} {2}",
            p.FirstName,
            p.LastName,
            Environment.NewLine
        )
    )
);
MessageBox.Show(before);

Now, let’s sort the list of physicists based on their first name. This code block associates an anonymous method to the List’s Sort method.

// Sort on *FirstName*
people.Sort(
    delegate(Person x, Person y) {
        if (x == null) {
            if (y == null) { return 0; }
            return -1;
        }
        if (y == null) { return 0; }
        return x.FirstName.CompareTo(y.FirstName);
    }
);

To verify that the code worked…

// Display "after" list of people
string after = string.Empty;
people.ForEach(
    new Action<Person>(
        p => after += string.Format(
            "{0} {1} {2}",
            p.FirstName,
            p.LastName,
            Environment.NewLine
        )
    )
);
MessageBox.Show(after);

This technique offers a number of advantages, namely:

No need to create a separate static method,
Source types (eg “person”) do not need to support IComparable,
It binds sorting logic tightly with the sorting method.

One possible disadvantage is that it may result is code duplication. For example, if “sort by first name” is frequently used it may be prudent to add this code as a static method as shown below.

public class Person  {
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public static int SortByFirstName(Person x, Person y){
        if (x == null) {
            if (y == null) { return 0; }
            return -1;
        }
        if (y == null) { return 0; }
        return x.FirstName.CompareTo(y.FirstName);
    }
}

This static method would then be referenced as shown below.

// Sort on *FirstName*
people.Sort(Person.SortFirstName);

Bing Web Search in C#

2011-03-18T16:23:00.001-07:00

This blog post contains a C# wrapper of the Bing API (Microsoft’s internet search engine). In my previous post I presented a similar wrapper for Google’s Custom Search API, successor to the Web Search API. I was frankly less than impressed with Google custom search API as it appears to be engineered to favor specific themes and/or domains.

To use use this code below you must first create a Live ID and request an App ID. This page provided more details.

How to use:

If you have a .NET 4.0 WPF application, like this:

<Window x:Class="WpfApplication6.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <DataGrid x:Name="myDataGrid" />
    </Grid>
</Window>

Then all you need to do to populate the window with internet search results about Albert Einstein is to called the asynchronous search method on BingSearch .

public partial class MainWindow : Window {
    public MainWindow() {
        InitializeComponent();
 
        this.Loaded += (s, e) => {
            BingSearch search = new BingSearch() {
                AppId = "<Your App ID>"
            };
            search.SearchCompleted += (a, b) => {
                this.myDataGrid.ItemsSource = b.Response.Web.Results;
            };
            search.SearchAsync("Albert Einstein");                
        };
    }
}

Below is the source code to BingSearch, a class that provides both a synchronous and an asynchronous method to search the internet using Bing.

public class BingSearch {
    public BingSearch() {
        this.Count = 50;
        this.Offset = 0;
        this.Sources = "Web";
        this.Adult = BingSafeLevel.Moderate;
        this.Options = "DisableLocationDetection";
        this.WebOptions = "DisableHostCollapsing+DisableQueryAlterations";
    }
    //
    // PROPERTIES
    //
    public string AppId { get; set; }
    public string Sources { get; set; }
    public int Count { get; set; }
    public int Offset { get; set; }
    public BingSafeLevel Adult { get; set; }
    public string Options { get; set; }
    public string WebOptions { get; set; }
    //
    // EVENTS
    //
    public event EventHandler<BingSearchEventArgs> SearchCompleted;
    //
    // METHODs
    //
    protected void OnSearchCompleted(BingSearchEventArgs e) {
        if (this.SearchCompleted != null) {
            this.SearchCompleted(this, e);
        }
    }
    public BingSearchResponse Search(string search) {
        //
        UriBuilder builder = this.BuilderQuery(search);
 
        // Submit Request
        WebClient w = new WebClient();
        string result = w.DownloadString(builder.Uri);
        if (string.IsNullOrWhiteSpace(result)) { return null; }
 
        // Desearealize from JSON to .NET objects
        Byte[] bytes = Encoding.Unicode.GetBytes(result);
        MemoryStream memoryStream = new MemoryStream(bytes);
        DataContractJsonSerializer dataContractJsonSerializer =
            new DataContractJsonSerializer(typeof(BingWebResponse));
        BingWebResponse bingWebResponse =
            dataContractJsonSerializer.ReadObject(memoryStream) as BingWebResponse;
        memoryStream.Close();
 
        return bingWebResponse.SearchResponse;
    }
    public void SearchAsync(string search) {
        // Get URL
        UriBuilder builder = this.BuilderQuery(search);
 
        // Submit Request
        WebClient w = new WebClient();
        w.DownloadStringCompleted += (a, b) => {
            // Check for errors
            if (b == null) { return; }
            if (b.Error != null) { return; }
            if (string.IsNullOrWhiteSpace(b.Result)) { return; }
 
            // Desearealize from JSON to .NET objects
            Byte[] bytes = Encoding.Unicode.GetBytes(b.Result);
            MemoryStream memoryStream = new MemoryStream(bytes);
            DataContractJsonSerializer dataContractJsonSerializer =
                new DataContractJsonSerializer(typeof(BingWebResponse));
            BingWebResponse bingWebResponse =
                dataContractJsonSerializer.ReadObject(memoryStream) as BingWebResponse;
            memoryStream.Close();
 
            // Raise Event
            this.OnSearchCompleted(
                new BingSearchEventArgs() {
                    Response = bingWebResponse.SearchResponse
                }
            );
        };
        w.DownloadStringAsync(builder.Uri);
    }
    private UriBuilder BuilderQuery(string search) {
        // Build Query
        string query = string.Empty;
        query += string.Format("AppId={0}", this.AppId);
        query += string.Format("&Query={0}", search);
        query += string.Format("&Sources={0}", this.Sources);
        query += string.Format("&Adult={0}", this.Adult);
        query += string.Format("&Options={0}", this.Options);
        query += string.Format("&Web.Count={0}", this.Count);
        query += string.Format("&Web.Offset={0}", this.Offset);
        query += string.Format("&Web.Options={0}", this.WebOptions);
        query += string.Format("&JsonType={0}", "raw");
 
        // Construct URL
        UriBuilder builder = new UriBuilder() {
            Scheme = Uri.UriSchemeHttp,
            Host = "api.bing.net",
            Path = "json.aspx",
            Query = query
        };
 
        // Return URL
        return builder;
    }
}
 
public enum BingSafeLevel {
    Off, Moderate, Strict
}
 
public class BingSearchEventArgs : EventArgs {
    public BingSearchResponse Response { get; set; }
}
 
[DataContract]
public class BingWebResponse {
    [DataMember(Name = "SearchResponse")]
    public BingSearchResponse SearchResponse { get; set; }
}
 
[DataContract]
public class BingSearchResponse {
    [DataMember(Name = "Version")]
    public string Version { get; set; }
    [DataMember(Name = "Query")]
    public BingQuery Query { get; set; }
    [DataMember(Name = "Web")]
    public BingWeb Web { get; set; }
}
 
[DataContract]
public class BingQuery {
    [DataMember(Name = "SearchTerms")]
    public string SearchTerms { get; set; }
}
 
[DataContract]
public class BingWeb {
    [DataMember(Name = "Total")]
    public int Total { get; set; }
    [DataMember(Name = "Offset")]
    public int Offset { get; set; }
    [DataMember(Name = "Results")]
    public List<BingResult> Results { get; set; }
}
 
[DataContract]
public class BingResult {
    [DataMember(Name = "Title")]
    public string Title { get; set; }
    [DataMember(Name = "Description")]
    public string Description { get; set; }
    [DataMember(Name = "Url")]
    public string Url { get; set; }
    [DataMember(Name = "DisplayUrl")]
    public string DisplayUrl { get; set; }
    [DataMember(Name = "DateTime")]
    public string DateTimeOriginal { get; set; }
    // Convert Date
    public DateTime? DateTimeConverted {
        get {
            if (string.IsNullOrWhiteSpace(this.DateTimeOriginal)) { return null; }
            DateTime d;
            if (!DateTime.TryParse(this.DateTimeOriginal, out d)) { return null; }
            return d;
        }
    }
}

Google Custom Search in C#

2011-03-04T18:36:00.001-08:00

This post contains a C# class to search the internet using Google’s custom search API. Before using this class you must first create a Google account (link) and generate an API key (link).

Unfortunately, this code cannot be used directly from a Silverlight application because of security limitations (see cross domain policy). If you need this capability in a Silverlight web application I would suggest performing the search via an ASP.NET proxy (license permitting).

In this sample, I called the Google search API from a WPF application, but it would also work in a WinForms or ASP.NET application as suggested above.

Here is the XAML of the Window that displays the results of the Google search.

<Window x:Class="ESRI.PrototypeLab.MapServiceHarvester.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Height="600"
        Width="800"
        >
    <Grid>
        <DataGrid x:Name="DataGridResults" AutoGenerateColumns="True" />
    </Grid>
</Window>

Here is the code behind that makes that performs the internet search and displays the results in the datagrid defined above.

public partial class MainWindow : Window {
    public MainWindow() {
        InitializeComponent();
 
        this.Loaded += (s, e) => {
            GoogleSearch search = new GoogleSearch() {
                Key = "<enter your key here>",
                CX = "013036536707430787589:_pqjad5hr1a"
            };
            search.SearchCompleted += (a, b) => {
                this.DataGridResults.ItemsSource = b.Response.Items;
            };
            search.Search("gis");
        };
    }
}

And here is the class that calls Google’s custom search API, desterilizes the JSON response and returns the result as single .NET objects.

public class GoogleSearch {
    public GoogleSearch() {
        this.Num = 10;
        this.Start = 1;
        this.SafeLevel = SafeLevel.off;
    }
    //
    // PROPERTIES
    //
    public string Key { get; set; }
    public string CX { get; set; }
    public int Num { get; set; }
    public int Start { get; set; }
    public SafeLevel SafeLevel { get; set; }
    //
    // EVENTS
    //
    public event EventHandler<SearchEventArgs> SearchCompleted;
    //
    // METHODs
    //
    protected void OnSearchCompleted(SearchEventArgs e) {
        if (this.SearchCompleted != null) {
            this.SearchCompleted(this, e);
        }
    }
    public void Search(string search) {
        // Check Parameters
        if (string.IsNullOrWhiteSpace(this.Key)) {
            throw new Exception("Google Search 'Key' cannot be null");
        }
        if (string.IsNullOrWhiteSpace(this.CX)) {
            throw new Exception("Google Search 'CX' cannot be null");
        }
        if (string.IsNullOrWhiteSpace(search)) {
            throw new ArgumentNullException("search");
        }
        if (this.Num < 0 || this.Num > 10) {
            throw new ArgumentNullException("Num must be between 1 and 10");
        }
        if (this.Start < 1 || this.Start > 100) {
            throw new ArgumentNullException("Start must be between 1 and 100");
        }
                             
        // Build Query
        string query = string.Empty;
        query += string.Format("q={0}", search);
        query += string.Format("&key={0}", this.Key);
        query += string.Format("&cx={0}", this.CX);
        query += string.Format("&safe={0}", this.SafeLevel.ToString());
        query += string.Format("&alt={0}", "json");
        query += string.Format("&num={0}", this.Num);
        query += string.Format("&start={0}", this.Start);
            
        // Construct URL
        UriBuilder builder = new UriBuilder() {
            Scheme = Uri.UriSchemeHttps,
            Host = "www.googleapis.com",
            Path = "customsearch/v1",
            Query = query
        };
 
        // Submit Request
        WebClient w = new WebClient();
        w.DownloadStringCompleted += (a, b) => {
            // Check for errors
            if (b == null) { return; }
            if (b.Error != null) { return; }
            if (string.IsNullOrWhiteSpace(b.Result)) { return; }
 
            // Desearealize from JSON to .NET objects
            Byte[] bytes = Encoding.Unicode.GetBytes(b.Result);
            MemoryStream memoryStream = new MemoryStream(bytes);
            DataContractJsonSerializer dataContractJsonSerializer =
                new DataContractJsonSerializer(typeof(GoogleSearchResponse));
            GoogleSearchResponse googleSearchResponse =
           dataContractJsonSerializer.ReadObject(memoryStream) as GoogleSearchResponse;
            memoryStream.Close();
 
            // Raise Event
            this.OnSearchCompleted(
                new SearchEventArgs() {
                    Response = googleSearchResponse
                }
            );
        };
        w.DownloadStringAsync(builder.Uri);
 
    }
}
 
public enum SafeLevel { off, medium, high }
 
public class SearchEventArgs : EventArgs {
    public GoogleSearchResponse Response { get; set; }
}
 
[DataContract]
public class GoogleSearchResponse {
    [DataMember(Name = "kind")]
    public string Kind { get; set; }
    [DataMember(Name = "url")]
    public Url Url { get; set; }
    [DataMember(Name = "queries")]
    public Queries Queries { get; set; }
    [DataMember(Name = "context")]
    public Context Context { get; set; }
    [DataMember(Name = "items")]
    public List<Item> Items { get; set; }
}
 
[DataContract]
public class Url {
    [DataMember(Name = "type")]
    public string Type { get; set; }
    [DataMember(Name = "template")]
    public string Template { get; set; }
}
 
[DataContract]
public class Queries {
    [DataMember(Name = "nextPage")]
    public List<Page> NextPage { get; set; }
    [DataMember(Name = "request")]
    public List<Page> Request { get; set; }
}
 
[DataContract]
public class Page {
    [DataMember(Name = "title")]
    public string Title { get; set; }
    [DataMember(Name = "totalResults")]
    public int Request { get; set; }
    [DataMember(Name = "searchTerms")]
    public string SearchTerms { get; set; }
    [DataMember(Name = "count")]
    public int Count { get; set; }
    [DataMember(Name = "startIndex")]
    public int StartIndex { get; set; }
    [DataMember(Name = "inputEncoding")]
    public string InputEncoding { get; set; }
    [DataMember(Name = "outputEncoding")]
    public string OutputEncoding { get; set; }
    [DataMember(Name = "safe")]
    public string Safe { get; set; }
    [DataMember(Name = "cx")]
    public string CX { get; set; }
}
 
[DataContract]
public class Context {
    [DataMember(Name = "title")]
    public string Title { get; set; }
    [DataMember(Name = "facets")]
    public List<List<Facet>> Facets { get; set; }
}
 
[DataContract]
public class Facet {
    [DataMember(Name = "label")]
    public string Label { get; set; }
    [DataMember(Name = "anchor")]
    public string Anchor { get; set; }
}
 
[DataContract]
public class Item {
    [DataMember(Name = "kind")]
    public string Kind { get; set; }
    [DataMember(Name = "title")]
    public string Title { get; set; }
    [DataMember(Name = "htmlTitle")]
    public string HtmlTitle { get; set; }
    [DataMember(Name = "link")]
    public string Link { get; set; }
    [DataMember(Name = "displayLink")]
    public string DisplayLink { get; set; }
    [DataMember(Name = "snippet")]
    public string Snippet { get; set; }
    [DataMember(Name = "htmlSnippet")]
    public string HtmlSnippet { get; set; }
    [DataMember(Name = "cacheId")]
    public string CacheId { get; set; }
    //[DataMember(Name = "pagemap")]        *** Cannot deserialize JSON to .NET! ***
    //public Pagemap Pagemap { get; set; }
}
 
[DataContract]
public class Pagemap {
    [DataMember(Name = "metatags")]
    public List<Dictionary<string, string>> Metatags { get; set; }
}
 
[DataContract]
public class Metatag {
    [DataMember(Name = "creationdate")]
    public string Creationdate { get; set; }
    [DataMember(Name = "moddate")]
    public string Moddate { get; set; }
}

And lastly, here is the result.

The only issue I had with this sample was trying to deserialize the JSON associated with the “pagemap” property (see commented out code above). Any tips would be appreciated.

P2P Collaboration in ArcMap

2011-03-02T11:34:00.001-08:00

Most collaboration technologies require a central server to manager communication. Email, web browsing and instant messaging all require a server to handle communication between clients. This post re-introduces a sample originally published in May of 2008 that facilitates server-less map collaboration or “peer-to-peer geo-collaboration”.

The new add-in for ArcGIS 10 can be downloaded (with source code) from here.

How to Install:

Download the contribution from the code gallery (link), unzip the file and double click on file with the esriAddIn extension. This will launch the Esri add-in installer, click Install Add-In

How to Uninstall:

The add-in can be removed by clicking Customize > Add-In Manager, selecting P2P Collaboration from the list of installed add-ins and clicking Delete this Add-In.

How to Use:

First, display the collaboration toolbar by clicking Customize > Toolbars > P2P Collaboration. Clicking on the only button on the toolbar will display the p2p collaboration dockable window as shown below.

Before you can collaborate with other peers you must first connect to a mesh (or peer cloud). A mesh is virtual network comprising of two or more peers. When the Connect button is clicked the following dialog is displayed.

The Username is a friendly name that you want to be identified on the mesh as. By default, a password is not used. If you specify a password then you will ONLY be able to "see" other peers that used the same password. Using a password is a good method of excluding unwanted peers.

Most P2P applications are considered to be examples of hybrid P2P technology. This is because most rely on some sort of server interaction, such as a DNS server. In the case of this add-in, a centralized resource is required for peers to find other peers. This central resource is called a peer resolver.

The p2p collaboration add-in supports two resolver types:

PNRP
Peer Name Resolution Protocol (or PNRP) is a proprietary technology by Microsoft. The add-in supports PNRP 2.0 which is installed by default on computers running Microsoft Windows Vista and an optional install for Microsoft Windows XP SP2. Unfortunately PNRP is not supported on Microsoft Windows 2003/2008.
Custom
This is the address of a custom peer resolver running on your network. Details on how to configure and start a custom peer resolver are detailed below. The purpose of the resolver is to exchange IP addresses (and ports) of other peers. All subsequent communication is done on a peer-to-peer basis.

Within a few seconds on connecting you should see the names of other peers appearing in the list. The user in bold is you.

There are five ways you can collaborate with other peers:

Chatting
To chat click the Chat tab and start typing. It is important to note that chatting is communal, that is, all peers see all text messages.
Publishing geo-referenced screenshots
Returning to the Users tab, if you right click on another peer's name you will see the following context menu appear. Clicking on Publish Map will send your current map display to the selected user. The selected user (i.e. Jim) will automatically receive a new raster layer in his map document.
Requesting geo-referenced screenshots
In the example above, Jim sent a screenshot to Bob. This would have required Bob to make an explicit request to Jim. The p2p collaboration add-in has the capability of requesting a screenshots from other peers without them knowing! To covertly request a screenshot, select Request Map in the context menu. To stop other peers from harvesting screenshots (or "maps") from your computer, unchecked the Map > Share option from the main menu.
Add, removing, editing shared graphics and ink
Shared graphics is probably the most useful feature of the add-in. All peers can add, remove, edit graphics collectively. A line or box added by one peer can be moved or deleted by another peer. Any graphic from the Drawing toolbar or ink from the Tablet toolbar is supported.

By default, all graphics/ink that is added to the map are shared with all other peers. If you want to add graphics/ink to your map without it being shared then you can disable sharing by clicking Graphics > Share.
Share navigation
From a screenshot above you may have noticed a entry in the peer context menu called Zoom to Map. This will change your map extent to be same as the peer you selected. Essentially you can see what areas other people are looking at. However there is a significantly more advanced feature called shared navigation that allows one peer to control the map display of other peers. The controlling peer (aka the master) must first enable extent sharing from the main menu (Extents > Share).

Other peers (aka slaves) must then subscribe to the master peer’s map extent. To subscribe to another peers extents click Follow in the peer context menu as shown below.

If you choose to use PNRP as your organization’s peer resolver then please remember that this is only supported on Microsoft Window XP SP2, Microsoft Windows Vista and Microsoft Windows 7. Another disadvantage of PNRP is that it requires partial support for IPv6. If your network and routes do not support this protocol then PNRP may not function correctly. On Vista, PNRP 2.0 is already installed and running. However, PNRP, by default is not installed on Microsoft Windows XP. To install PNRP on Microsoft Windows XP follow these steps:

In the Control Panel, double-click Add or Remove Programs.
In the Add or Remove Programs dialog box, click Add/Remove Windows Components.
In the Windows Components Wizard, select the "Networking Services" check box and click "Details".
Check the "Peer-to-Peer" check box and click "OK".
Click "Next" in the Windows Components Wizard.
When the installation completes, click "Finish".
From a command shell prompt, start the PNRP service with the following command: net start pnrpsvc.

After installing PNRP on Microsoft Windows XP, there is one more step. The version of PNRP that is included with Microsoft Windows XP is not compatible with Microsoft Windows Vista. To upgrade PNRP 1.0 to the Vista compatible PNRP 2.0 you need to install KB920342 from here.

For greater compatibility, your organization may choose to run a custom peer resolver on your network. The downloadable contribution includes a sample custom peer resolver that is specifically designed for the ArcMap add-in. The customer peer resolver is named ESRI.PrototypeLab.P2P.PeerResolver.exe and is located in the following subdirectory of the download.
ESRI.PrototypeLab.P2P\ESRI.PrototypeLab.P2P.PeerResolver\bin\Release

The for best results, leave the Server name as localhost and the Protocol set to Tcp. If there is an obvious port conflict then change it to something else. For example, port 80 might be used by a web server. To start the peer resolver service click Start. If you close the application by clicking the "X" button then the application will continue running in the windows system tray as shown below.

When the peer resolver is minimized to the system tray, use the right click menu (or “context menu”) to start, stop, open or close the resolver.

Lastly, to assist with configuring and testing your setup, the download includes a simple test app. This file is called ESRI.PrototypeLab.P2P.Test.exe and is located here:
ESRI.PrototypeLab.P2P\ESRI.PrototypeLab.P2P.Test\bin\Release

Custom Magnifier for Esri’s Silverlight SDK

2011-02-09T14:34:00.001-08:00

Map magnifiers are very intuitive and compelling for end users. They allow a user to examine a map in more detail without having to to change the map scale (or “zoom in”). Magnifiers can also be used to like an “x-ray” to reveal alternative content. For example, if a base map shows a street map information for a city, a magnifier could reveal satellite imagery at the same scale.

The ArcGIS Silverlight Toolkit extends ESRI’s ArcGIS API for Microsoft Silverlight with useful widgets like a navigation control, toolbar and two types of magnifiers.

The toolkit’s Magnifier is a control that allows the user to temporarily swipe a stylized magnifying glass over the map. Developers can specify any magnification and any map content for the magnifier.

The toolkit’s MagnifyingGlass is an alternative magnifier with a simpler design. Developers can specify any magnification but are limited to single tiled map service layer for the contents. Unlike the Magnifier described above, this control can resided in the web application permanently. As the base map updates, the extent in the MagnifyingGlass will also update.

These two controls are very useful but did not satisfy my requirement to have permanent magnifier that supported dynamic layers such as an image service layer. The code below is a blend of both toolkit magnifiers.

Here is the XAML:

<UserControl
    x:Class="TestMagnify.Magnify"
    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"
    xmlns:esri="http://schemas.esri.com/arcgis/client/2009"
    mc:Ignorable="d"
    d:DesignHeight="225"
    d:DesignWidth="225"
    Width="225"
    Height="225"
    >
    <Grid x:Name="LayoutRoot">
        <Grid.RenderTransform>
            <TranslateTransform x:Name="Translate" />
        </Grid.RenderTransform>
        <Ellipse x:Name="MagShadow" Margin="-2" Fill="Black">
            <Ellipse.Effect>
                <BlurEffect Radius="25"/>
            </Ellipse.Effect>
        </Ellipse>
        <Ellipse x:Name="MagFrameBack" Margin="0">
            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF000000" Offset="1"/>
                    <GradientStop Color="#FFFFFFFF" Offset="0"/>
                    <GradientStop Color="#FF353535" Offset="0.875"/>
                    <GradientStop Color="#FF515151" Offset="0.21"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        <Ellipse x:Name="MagFrameFront" Margin="5">
            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF000000"/>
                    <GradientStop Color="#FFFFFFFF" Offset="1"/>
                    <GradientStop Color="#FF505050" Offset="0.134"/>
                    <GradientStop Color="#FE787878" Offset="0.728"/>
                    <GradientStop Color="#FE9D9D9D" Offset="0.915"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        <Grid Margin="10">
            <Grid.OpacityMask>
                <RadialGradientBrush GradientOrigin="0.5,0.5"
                                     Center="0.5,0.5">
                    <GradientStop Color="White" Offset="0.9999"/>
                    <GradientStop Offset="1"/>
                </RadialGradientBrush>
            </Grid.OpacityMask>
            <esri:Map x:Name="MagMap"
                      IsLogoVisible="False"
                      IsHitTestVisible="False"
                      PanDuration="00:00:00"
                      ZoomDuration="00:00:00"/>
        </Grid>
        <Ellipse x:Name="MagGlass" Stroke="#FF000000" Margin="10">
            <Ellipse.Fill>
                <RadialGradientBrush GradientOrigin="1, 1" Center="0.5,0.5">
                    <GradientStop Color="#48FFFFFF" Offset="0.009"/>
                    <GradientStop Color="#22FFFFFF" Offset="0.107"/>
                    <GradientStop Color="#00BBBBBB" Offset="0.567"/>
                    <GradientStop Color="#00BCBCBC" Offset="0.585"/>
                    <GradientStop Color="#00BBBBBB" Offset="0.625"/>
                    <GradientStop Color="#04C4C4C4" Offset="0.696"/>
                    <GradientStop Color="#1AC4C4C4" Offset="0.888"/>
                    <GradientStop Color="#2FFFFFFF" Offset="1"/>
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
    </Grid>
</UserControl>

Here is the code behind:

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using ESRI.ArcGIS.Client;
using ESRI.ArcGIS.Client.Geometry;
 
namespace TestMagnify {
    public partial class Magnify : UserControl {
        private Point _begin;
        private Point _current;
        private Cursor _cursor = null;
        private bool _isdrag = false;
        //
        public Magnify() {
            InitializeComponent();
            this.MouseLeftButtonDown += this.MagnifyBox_MouseLeftButtonDown;
            this.MouseLeftButtonUp += this.MagnifyBox_MouseLeftButtonUp;
            this.MouseMove += this.MagnifyBox_MouseMove;
        }
        public static readonly DependencyProperty MapProperty = 
            DependencyProperty.Register(
                "Map", 
                typeof(Map),
                typeof(Magnify),
                new PropertyMetadata(Magnify.OnMapPropertyChanged));
        public static readonly DependencyProperty LayersProperty = 
            DependencyProperty.RegisterAttached(
                "Layers",
                typeof(LayerCollection),
                typeof(Magnify),
                new PropertyMetadata(Magnify.OnLayersPropertyChanged));
        public static readonly DependencyProperty ZoomFactorProperty = 
            DependencyProperty.Register(
                "ZoomFactor", 
                typeof(double), 
                typeof(Magnify),
                new PropertyMetadata(2d,
                                     Magnify.OnZoomFactorPropertyChanged));
        public Map Map {
            get { return (Map)this.GetValue(MapProperty); }
            set { this.SetValue(MapProperty, value); }
        }
        public LayerCollection Layers {
            get { return (LayerCollection)GetValue(LayersProperty); }
            set { SetValue(LayersProperty, value); }
        }
        public double ZoomFactor {
            get { return (double)this.GetValue(ZoomFactorProperty); }
            set { this.SetValue(ZoomFactorProperty, value); }
        }
        private static void OnLayersPropertyChanged(DependencyObject d,
                                     DependencyPropertyChangedEventArgs e) {
            Magnify magnify = d as Magnify;
            if (magnify.MagMap != null) {
                magnify.MagMap.Layers = e.NewValue as LayerCollection;
            }
        }
        private static void OnMapPropertyChanged(DependencyObject d,
                                     DependencyPropertyChangedEventArgs e) {
            Magnify glass = d as Magnify;
            Map mapOld = e.OldValue as Map;
            if (mapOld != null) {
                mapOld.ExtentChanged -= glass.Map_ExtentChanged;
            }
            Map mapNew = e.NewValue as Map;
            if (mapNew != null) {
                mapNew.ExtentChanged += glass.Map_ExtentChanged;
            }
        }
        private static void OnZoomFactorPropertyChanged(DependencyObject d,
                                     DependencyPropertyChangedEventArgs e) {
            (d as Magnify).UpdateMagnifier();
        }
        private void Map_ExtentChanged(object sender, ExtentEventArgs e) {
            this.UpdateMagnifier();
        }
        private void MagnifyBox_MouseLeftButtonDown(object sender,
                                                   MouseButtonEventArgs e) {
            this._isdrag = true;
            this._cursor = this.Cursor;
            this._begin = e.GetPosition(null);
            this.Cursor = Cursors.None;
            this.CaptureMouse();
        }
        private void MagnifyBox_MouseLeftButtonUp(object sender,
                                                   MouseButtonEventArgs e) {
            if (this._isdrag) {
                this._isdrag = false;
                this.ReleaseMouseCapture();
                this.UpdateMagnifier();
            }
            this.Cursor = this._cursor;
        }
        private void MagnifyBox_MouseMove(object sender, MouseEventArgs e) {
            if (this._isdrag) {
                this._current = e.GetPosition(null);
                double x = this._current.X - this._begin.X;
                double y = this._current.Y - this._begin.Y;
                if (this.FlowDirection == FlowDirection.RightToLeft) {
                    x *= -1d;
                }
                this.Translate.X += x;
                this.Translate.Y += y;
                this._begin = this._current;
            }
        }
        private void UpdateMagnifier() {
            if (this.Visibility == Visibility.Collapsed) { return; }
            if (this.Map == null) { return; }
            Point point = this.TransformToVisual(this.Map).Transform(
                new Point(
                    this.RenderSize.Width * 0.5d + this.Translate.X,
                    this.RenderSize.Height * 0.5d + this.Translate.Y
                )
            );
            MapPoint center = this.Map.ScreenToMap(point);
            double resolution = this.Map.Resolution;
            double zoomResolution = resolution / this.ZoomFactor;
            double width = 0.5d * this.MagMap.ActualWidth * zoomResolution;
            Envelope envelope = new Envelope() {
                XMin = center.X - width,
                YMin = center.Y - width,
                XMax = center.X + width,
                YMax = center.Y + width,
                SpatialReference = this.MagMap.SpatialReference
            };
            this.MagMap.Extent = envelope;
        }
    }
}

Here is how to use it:

<UserControl
    x:Class="TestMagnify.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"
    xmlns:esri="http://schemas.esri.com/arcgis/client/2009"
    xmlns:local="clr-namespace:TestMagnify"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <Grid x:Name="LayoutRoot" Background="White">
        <esri:Map x:Name="Map">
            <esri:ArcGISImageServiceLayer
                Url="http://sampleserver3.arcgisonline.com ~
                     /ArcGIS/rest/services/Portland/Aerial/ImageServer"
                ImageFormat="JPGPNG" />
        </esri:Map>
        <local:Magnify x:Name="Magnify"
                       Map="{Binding ElementName=Map}"
                       ZoomFactor="5">
            <local:Magnify.Layers>
                <esri:LayerCollection>
                    <esri:ArcGISImageServiceLayer
                        Url="http://sampleserver3.arcgisonline.com ~
                        /ArcGIS/rest/services/Portland/Aerial/ImageServer"
                        ImageFormat="JPGPNG" />
                </esri:LayerCollection>
            </local:Magnify.Layers>
        </local:Magnify>
    </Grid>
</UserControl>

Note: “~” denotes an editorial line continuation.

In conclusion, based on source code extracted from Esri’s ArcGIS Silverlight toolkit project page on codeplex, I was able to create a new magnifier that could support any layer or layers regardless of type. In order to support dynamic layers such an image service layers the new magnifier had to reserve updates until after a drag operation is completed. This is not ideal but unavoidable.

Using this code I hope you can explore some innovative variants like “x-ray” controls. Fun and productive controls like these are being increasingly important as web apps are becoming more tactile with touch support in new hardware like this.

How to preserve the map center as the browser resizes

2011-02-02T15:10:00.001-08:00

By default, when a Silverlight map (or its parent) is resized the map scale (or resolution) is preserved but not the map center. Instead, the map is “pinned” to the upper left hand corner.

In most situations this is desirable but occasionally it is not. The following code snippet will ensure that the current map center (and scale) is preserved as the browser is resized.

using System;
using System.Windows;
using System.Windows.Controls;
using ESRI.ArcGIS.Client.Geometry;
 
namespace SilverlightApplication2 {
    public partial class MainPage : UserControl {
        public MainPage() {
            InitializeComponent();
 
            this.SizeChanged += (s, e) => {
                if (e.PreviousSize.Height == 0 ||
                    e.PreviousSize.Width == 0) { return; }
                Point p = new Point() {
                    X = (this.MyMap.ActualWidth / 2d) - 
                        (e.NewSize.Width - e.PreviousSize.Width),
                    Y = (this.MyMap.ActualHeight / 2d) -
                        (e.NewSize.Height - e.PreviousSize.Height)
                };
                MapPoint m = this.MyMap.ScreenToMap(p);
                TimeSpan t = this.MyMap.PanDuration;
                this.MyMap.PanDuration = TimeSpan.Zero;
                this.MyMap.PanTo(m);
                this.MyMap.PanDuration = t;
            };
        }
    }
}