Shai Raiten's Blog : Metro Style

Run Windows Store Apps From Desktop

shair — Thu, 07 Feb 2013 14:09:49 GMT

When customers ask me how they can run Windows Store app from Desktop usually the answer is – You Can’t, but if you really want there is a way to do that.

The reason I usually answer is You Can’t is because – In order to run Windows Store app from Desktop you need to install Windows App Certification Kit, this pack contains “microsoft.windows.softwarelogo.appxlauncher.exe” file that can run a Windows Store app by his application model id.

So if you plan on publishing your app you can’t assume the ACK is installed on the client machine.

Again, if you really want… Let me show you.

Download Demo Project

Step 1: Getting Started

First create a WPF project and add the following reference:

“C:\Program Files (x86)\Windows Kits\8.0\App Certification Kit\microsoft.windows.softwarelogo.shared.dll”

Step 2: Getting Windows App List

The reason you need to add reference to “Microsoft.Windows.Softwarelogo.Shared.dll” so we can receive the program inventory xml file, this file contains the complete list of all installed Windows Store apps.

Under my PC here is the file location - "C:\\Users\\Shai\\AppData\\Local\\Microsoft\\AppCertKit\\programinventory_e25bb752-e7cf-4fb2-8194-874ba9b91c7b.xml"

As I said this file contains all Windows Store app installed on you machine, each Program element under that file will show all the information regarding that specific app.

So, how do you get the file location?

It’s very simple, using GlobaldataAccessor method from softwarelogo.shared.dll you can get the Program Inventory Location string.

string itemValue = GlobalDataAccessor.GetItemValue("ProgramInventoryLocation", "PRE_PROCESS");

Once you got this file all you need is parsing the XML and create a collection on Apps.

I’ve create a ProductInfo class that will represent each Program in the file, as you can see from the code below I simply taking the attributes and elements from the Program element.

public class ProductInfo : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        private void NotifyPropertyChanged(String propertyName = "")
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        private string _Status;
        public string Status
        {
            get { return _Status; }
            set
            {
                if (value != this._Status)
                {
                    this._Status = value;
                    NotifyPropertyChanged("Status");
                }
            }
        }

        public string LogoUrl { get; set; }
        public string ProductName { get; set; }
        public string ProductVendor { get; set; }
        public string ProductLanguage { get; set; }
        public string ProductVersion { get; set; }
        public string RootDirPath { get; set; }
        public string Id { get; set; }
        public string PackageFullName { get; set; }

        public ProductInfo(XmlNode xNode)
        {
            var attrib = xNode.Attributes["Name"];
            if (attrib != null && !string.IsNullOrEmpty(attrib.Value)) ProductName = attrib.Value;

            attrib = xNode.Attributes["Version"];
            if (attrib != null && !string.IsNullOrEmpty(attrib.Value)) ProductVersion = attrib.Value;

            attrib = xNode.Attributes["Language"];
            if (attrib != null && !string.IsNullOrEmpty(attrib.Value)) ProductLanguage = attrib.Value;

            attrib = xNode.Attributes["Publisher"];
            if (attrib != null && !string.IsNullOrEmpty(attrib.Value)) ProductVendor = attrib.Value;

            attrib = xNode.Attributes["RootDirPath"];
            if (attrib != null && !string.IsNullOrEmpty(attrib.Value)) RootDirPath = attrib.Value;

            attrib = xNode.Attributes["Id"];
            if (attrib != null && !string.IsNullOrEmpty(attrib.Value)) Id = attrib.Value;

            var node = xNode.SelectSingleNode("/Log/ProgramList/Program[@Id='" + this.Id + "']/Indicators/PackageManifestIndicator/Properties/Logo");
            if (node != null && !string.IsNullOrEmpty(node.InnerText))
            {
                var imgUrl = System.IO.Path.Combine(RootDirPath, node.InnerText);
                if (File.Exists(imgUrl))
                    LogoUrl = imgUrl;
            }

            node = xNode.SelectSingleNode("/Log/ProgramList/Program[@Id='" + this.Id + "']/Indicators/PackageManifestIndicator/PackageManifest");
            if (node != null && !string.IsNullOrEmpty(node.Attributes["PackageFullName"].InnerText))
            {
                PackageFullName = node.Attributes["PackageFullName"].InnerText;
            }
        }
    }

And now, let’s connect the two part together, the first thing is getting the ProgramInventorylocation and after that just load that Xml file and parse it to objects with the information you want.

private void BuildAppsList()
{
    string itemValue = GlobalDataAccessor.GetItemValue("ProgramInventoryLocation", "PRE_PROCESS");

    XmlNodeList list = null;
    var reportDoc = new XmlDocument();
    reportDoc.Load(itemValue);
    ProductList = new ObservableCollection<ProductInfo>();

    list = reportDoc.GetElementsByTagName("Program");
    if (list.Count < 1)
    {
        throw new XmlException();
    }
    foreach (XmlNode node in list)
    {
        ProductInfo item = new ProductInfo(node);
        ProductList.Add(item);
    }

    dbTable.ItemsSource = ProductList;
}

Step 3: Get App User Model Id

Now after you got all Windows Store app installed on your machine it’s time to run them. In order to run a Windows Store app you’ll need to obtain the AppUserModelId, the reason you need to AppUserModelId is because the appxlauncher.exe needs this value in order to launch the application. (Package Name is not enough).

After completing Step 2 we got the App Package Full Name, we need to use this value to find the AppUserModelId from registry.

HKEY_CURRENT_USER\Software\Classes\ActivatableClasses\Package\**PackageFullName**\Server

So let’s add the following method, this method receive a packageFullName string and perform a search in the registry for the AppUserModelId.

public static string GetAppUserModelId(string packageFullName)
{
    string str = string.Empty;
    using (RegistryKey key = Registry.CurrentUser.CreateSubKey(string.Format(@"SOFTWARE\Classes\ActivatableClasses\Package\{0}\Server\",
                                                                               packageFullName)))
    {
        if (key == null) return str;

        var appKeys = from k in key.GetSubKeyNames()
                        where !k.StartsWith("BackgroundTransferHost")
                        select k;

        foreach (var appKey in appKeys)
        {
            using (RegistryKey serverKey = key.OpenSubKey(appKey))
            {
                if (serverKey.GetValue("AppUserModelId") != null)
                {
                    str = serverKey.GetValue("AppUserModelId").ToString();
                    serverKey.Close();
                    break;
                }
            }
        }
    }

    return str;
}

Step 4: Running Windows Store App

After we have the AppUserModelId string for a specific Windows Store app we can run it.

You can test it by opening command line and write the following:

C:\Program Files (x86)\Windows Kits\8.0\App Certification Kit\Microsoft.Windows.SoftwareLogo.AppxLauncher.exe “AppUserModelId”

Start App Button

private void StartApp_Click(object sender, RoutedEventArgs e)
{
    var product = ((System.Windows.Controls.Button)sender).Tag as ProductInfo;
    var appUserModelId = Helpers.GetAppUserModelId(product.PackageFullName);

    var exec = @"C:\Program Files (x86)\Windows Kits\8.0\App Certification Kit\Microsoft.Windows.SoftwareLogo.AppxLauncher.exe";

    if (!File.Exists(exec))
    {
        System.Windows.MessageBox.Show("Please install Windows App Certification Kit for Windows RT");
    }

    var processInfo = new ProcessStartInfo()
    {
        Arguments = appUserModelId,
        UseShellExecute = false,
        CreateNoWindow = true,
        FileName = exec
    };

    Process.Start(processInfo);
}

Step 5: Get Application Status

The last thing you might want is to know the App execution state, in order to do that you need to use IPackageDebugSettings - Enables debugger developers control over the lifecycle of a Windows Store app, such as when it is suspended or resumed. (http://msdn.microsoft.com/en-us/library/hh438393(v=vs.85).aspx)

for that create a PackageStatushelper class with the following code:

public class PackageStatusHelper
{
    [ComImport, Guid("B1AEC16F-2383-4852-B0E9-8F0B1DC66B4D")]
    public class PackageDebugSettings
    {
    }

    public enum PACKAGE_EXECUTION_STATE
    {
        PES_UNKNOWN,
        PES_RUNNING,
        PES_SUSPENDING,
        PES_SUSPENDED,
        PES_TERMINATED
    }

    [ComImport, Guid("F27C3930-8029-4AD1-94E3-3DBA417810C1"), InterfaceType(ComInterfaceType.InterfaceIsIUnknown)]
    public interface IPackageDebugSettings
    {
        int EnableDebugging([MarshalAs(UnmanagedType.LPWStr)] string packageFullName, [MarshalAs(UnmanagedType.LPWStr)]
                                                              string debuggerCommandLine, IntPtr environment);
        int DisableDebugging([MarshalAs(UnmanagedType.LPWStr)] string packageFullName);
        int Suspend([MarshalAs(UnmanagedType.LPWStr)] string packageFullName);
        int Resume([MarshalAs(UnmanagedType.LPWStr)] string packageFullName);
        int TerminateAllProcesses([MarshalAs(UnmanagedType.LPWStr)] string packageFullName);
        int SetTargetSessionId(int sessionId);
        int EnumerageBackgroundTasks([MarshalAs(UnmanagedType.LPWStr)] string packageFullName, 
                                                      out uint taskCount, out int intPtr, [Out] string[] array);
        int ActivateBackgroundTask(IntPtr something);
        int StartServicing([MarshalAs(UnmanagedType.LPWStr)] string packageFullName);
        int StopServicing([MarshalAs(UnmanagedType.LPWStr)] string packageFullName);
        int StartSessionRedirection([MarshalAs(UnmanagedType.LPWStr)] string packageFullName, uint sessionId);
        int StopSessionRedirection([MarshalAs(UnmanagedType.LPWStr)] string packageFullName);
        int GetPackageExecutionState([MarshalAs(UnmanagedType.LPWStr)] string packageFullName,
                                            out PACKAGE_EXECUTION_STATE packageExecutionState);
        int RegisterForPackageStateChanges([MarshalAs(UnmanagedType.LPWStr)] string packageFullName, 
                               IntPtr pPackageExecutionStateChangeNotification, out uint pdwCookie);
        int UnregisterForPackageStateChanges(uint dwCookie);
    }

    public static PACKAGE_EXECUTION_STATE GetPackageExecutionState(string packageFullName)
    {
        PACKAGE_EXECUTION_STATE packageExecutionState = PACKAGE_EXECUTION_STATE.PES_UNKNOWN;
        PackageDebugSettings settings = new PackageDebugSettings();
        IPackageDebugSettings settings2 = (IPackageDebugSettings)settings;
        try
        {
            if (settings2.GetPackageExecutionState(packageFullName, out packageExecutionState) != 0)
            {
                System.Windows.MessageBox.Show("Failed to get package execution state.", "GetPackageExecutionState");
            }
        }
        catch (Exception ex)
        {
            System.Windows.MessageBox.Show(ex.Message, "GetPackageExecutionState");
        }
        return packageExecutionState;
    }
}

And from the application you can just call the GetPackageExecutionState passing the Package Full Name

private void GetAppStatus_Click(object sender, RoutedEventArgs e)
{
    var btn = (System.Windows.Controls.Button)sender;
    var product = btn.Tag as ProductInfo;
    var status = PackageStatusHelper.GetPackageExecutionState(product.PackageFullName);

    switch (status)
    {
        case PackageStatusHelper.PACKAGE_EXECUTION_STATE.PES_RUNNING:
            btn.Foreground = new SolidColorBrush(Colors.Green);
            btn.Content = "Running";
            break;
        case PackageStatusHelper.PACKAGE_EXECUTION_STATE.PES_SUSPENDED:
            btn.Foreground = new SolidColorBrush(Colors.Orange);
            btn.Content = "Suspended";
            break;
        case PackageStatusHelper.PACKAGE_EXECUTION_STATE.PES_TERMINATED:
            btn.Foreground = new SolidColorBrush(Colors.Red);
            btn.Content = "Terminated";
            break;
        default:
            btn.Foreground = new SolidColorBrush(Colors.Gray);
            btn.Content = "Unkown";
            break;
    }
}

Download Demo Project

Enjoy

WinRT Toast Notification From Desktop Application

shair — Wed, 30 Jan 2013 18:33:04 GMT

The post title maintained Toast Notification but after reading this post we'll be able to perform API calls to WinRT from your Desktop application.

As you know WinRT exposing API’s for three developer languages: C#, C++ and JavaScript, this means that from each language you’ll be able to perform WinRT calls. The idea is based on Windows Metadata File (winmd) that expose those APIs that can be consumed across a variety of technologies and languages.

Download Demo Project

So why not using those calls from a desktop application? for example one of the great features of Windows 8 is Toast Notifications, Toast is a super cool replacement for Message box dialog that block your screen and can be very enjoying…

A toast notification is a transient message to the user that contains relevant, time-sensitive information and provides quick access to related content in an app. It can appear whether you are in another app, the Start screen, the lock screen, or on the desktop. Toasts should be viewed as an invitation to return to your app to follow up on something of interest. Toast notifications are an optional part of the app experience and are intended to be raised only when your app is not the active foreground app.

let’s say that we want to send Toast from your Desktop application instead of displaying annoying message boxes, let’s see how you can do it.

Step 1: Getting Started With Windows.winmd

Let’s start with empty WPF application, let’s try to load Windows.winmd file located here:

C:\Program Files (x86)\Windows Kits\8.0\References\CommonConfiguration\Neutral\Windows.winmd

You’ll receive below error message saying this file isn't compatible with your current project.

You need to edit your csproj file and add TargetPlatformVersion element.

Locate the PropertyGroup and add additional element : <TargetPlatformVersion>8.0</TargetPlatformVersion>

<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
  <PropertyGroup>
    <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
    <Platform Condition=" '$(Platform)' == '' ">AnyCPU</Platform>
    <ProjectGuid>{20DAA4E0-DE45-4FB6-8650-44FFDBA78F25}</ProjectGuid>
    <OutputType>WinExe</OutputType>
    <AppDesignerFolder>Properties</AppDesignerFolder>
    <RootNamespace>DesktopAppNotificationDemo</RootNamespace>
    <AssemblyName>DesktopAppNotificationDemo</AssemblyName>
    <TargetFrameworkVersion>v4.5</TargetFrameworkVersion>
    <TargetPlatformVersion>8.0</TargetPlatformVersion>
    <FileAlignment>512</FileAlignment>
    <ProjectTypeGuids>{60dc8134-eba5-43b8-bcc9-bb4bc16c2548};{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}</ProjectTypeGuids>
    <WarningLevel>4</WarningLevel>
    <PublishUrl>publish\</PublishUrl>

Now if you try to load Windows.winmd you’ll success, using the Object Browser you can explore the different API’s available in WinRT.

Step 2: API Code Pack

In order to display toasts, a desktop application must have a shortcut on the Start menu. Also, an AppUserModelID must be set on that shortcut.
The shortcut should be created as part of the installer. The following code shows how to create a shortcut and assign an AppUserModelID using Windows APIs.
You must download and include the Windows® API Code Pack for Microsoft® .NET Framework to allow Toast Notification from desktop application.

Windows® API Code Pack for Microsoft® .NET Framework provides a source code library that can be used to access some features of Windows 7 and Windows Vista from managed code. These Windows features are not available to developers today in the .NET Framework.

First thing after the application is loaded you need to make sure the application has a shortcut under Start menu referring to your desktop AppUserModelID.

private const String APP_ID = "Shai Raiten - DesktopAppNotificationDemo";
private bool IsAppLinkExists()
{
    string defaultPath = string.Format(@"{0}\Microsoft\Windows\Start Menu\Programs\{1}.lnk",
        Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData),
        APP_ID);

    return File.Exists(defaultPath) == false ? CreateApplicationShortcut(defaultPath) : true;
}

In case there is no shortcut you’ll need to create one:

private bool CreateApplicationShortcut(string defaultPath)
{
    string exePath = Process.GetCurrentProcess().MainModule.FileName;
    var newShortcut = (IShellLinkW)new CShellLink();

    // Create a shortcut to the exe
    ShellHelpers.ErrorHelper.VerifySucceeded(newShortcut.SetPath(exePath));
    ShellHelpers.ErrorHelper.VerifySucceeded(newShortcut.SetArguments(""));

    // Open the shortcut property store, set the AppUserModelId property
    var newShortcutProperties = (IPropertyStore)newShortcut;

    using (PropVariant appId = new PropVariant(APP_ID))
    {
        ShellHelpers.ErrorHelper.VerifySucceeded(newShortcutProperties.SetValue(SystemProperties.System.AppUserModel.ID, appId));
        ShellHelpers.ErrorHelper.VerifySucceeded(newShortcutProperties.Commit());
    }

    // Commit the shortcut to disk
    var newShortcutSave = (IPersistFile)newShortcut;

    ShellHelpers.ErrorHelper.VerifySucceeded(newShortcutSave.Save(defaultPath, true));
    return true;
}

Step 3: Toast

If you not familiar with Toast under Windows 8 I’ll recommend you to read about the methods and events of ToastNotification class (Windows).

After completing all previous steps creating Toast is a simple task, all you need to do is create new Toast template using ToastNotificationManager and modify the Toast template xml with your data.

private void btnSend_Click(object sender, RoutedEventArgs e)
{
    var toastXml = ToastNotificationManager.GetTemplateContent(ToastTemplateType.ToastImageAndText02);

    var textFields = toastXml.GetElementsByTagName("text");
    textFields[0].AppendChild(toastXml.CreateTextNode(txtTitle.Text));
    textFields[1].AppendChild(toastXml.CreateTextNode(txtDescription.Text));

    String imagePath = "file:///" + System.IO.Path.GetFullPath("me.png");
    XmlNodeList imageElements = toastXml.GetElementsByTagName("image");
    imageElements[0].Attributes.GetNamedItem("src").NodeValue = imagePath;

    ToastNotification toast = new ToastNotification(toastXml);

    if (cal.SelectedDate != null)
        toast.ExpirationTime = cal.SelectedDate;

    // You must specifiy AppUserModelId == APP_ID to send toast notification.
    ToastNotificationManager.CreateToastNotifier(APP_ID).Show(toast);

    lblStatus.Text = "Toast Sent!";
}

Step 4: Toast Events

Toast as we already understand is more than just a MessageBox, you’ll be able to send information to your users and get their response, for example in this demo if the user click on the Toast I’ll like to open the browser to that specific Uri.

All you need to do is register to the Toast events before sending the toast.

toast.Activated += toast_Activated;
toast.Dismissed += toast_Dismissed;
toast.Failed += toast_Failed;

void toast_Failed(ToastNotification sender, ToastFailedEventArgs args)
{
    Dispatcher.Invoke(() =>
    {
        lblStatus.Text = string.Format("Toast Failed - Error Code: {0}", args.ErrorCode.Message);
    });
}

void toast_Dismissed(ToastNotification sender, ToastDismissedEventArgs args)
{
    Dispatcher.Invoke(() =>
    {
        lblStatus.Text = args.Reason.ToString();
    });
}

void toast_Activated(ToastNotification sender, object args)
{
    Dispatcher.Invoke(() =>
    {
        Activate();
        lblStatus.Text = "Toast Activated";
        Process.Start("http://tinyurl.com/shai-rai");
    });
}

Take Notice – You can use more WinRT API’s by adding Windows.winmd to your desktop application.

Download Demo Project

Enjoy

Windows Store App - Resize Image (JavaScript)

shair — Wed, 31 Oct 2012 19:05:21 GMT

In this post I’ll demonstrate how to change picture size using JavaScript while constraining the image proportions.

Resize image functionality can be used in several scenarios in Windows Store app, for example: if your app allow the user to download images from the web you might want to resize the image to reduce space usage. Also if you whish to share this image using Roaming Storage you need to make sure the image size is small enough so the Roaming sync will not failed.

The first steps for this demo is using FileOpenPicker to allow the user to choose what picture he want to resize.

Download Demo Project

Create new JavaScript Navigation app.
Open package.appxmanifest and add “Pictures Library” capability. (We’ll use this later)

Open home.html file located under pages->home and add the following code:

     <div class="preview">

        <div class="btnBrowse">

            <button id="btnBrowse">Pick a Image</button>

        </div>

        <div class="previewImage">

            <img id="previewImage" style="max-height: 400px" src="#" />

        </div>

        <div id="imageDetails"></div>

    </div>

The above code added a button, img and div elements to home.html page, the button will invoke the FileOpenPicker, img element will display the selected image and the imageDetails div will display the image properties.

Open home.js and add the following code jus under the “use strict” statement:

      function $(query) {

          return document.querySelector(query);

      }

      function toDateTime(date) {

          var dateTime = new Date(Date.parse(date));

          if (dateTime.getDate()) {

              var month = dateTime.getMonth() + 1;

              var day = dateTime.getDate();

              var year = dateTime.getFullYear();

              var hours = dateTime.getHours();

              var minutes = dateTime.getMinutes();

              var ampm = hours < 12 ? "am" : "pm";

              return "{0}/{1}/{2} {3}:{4} {5}".format(month, day, year, hours < 10 ? "0" + hours : hours, minutes < 10 ? "0" + minutes : minutes, ampm);

          }

          else

              return date;

      }

      String.prototype.format = function () {

          var str = this;

          for (var i = 0; i < arguments.length; i++) {

              var reg = new RegExp("\\{" + i + "\\}", "gm");

              str = str.replace(reg, arguments[i]);

          }

          return str;

      };

Those functions are helpers for our project.

Under ready function add the following code:

    $("#btnBrowse").addEventListener("click", this.openFilePicker.bind(this), false);

We’re adding event listener for click event on “btnBrowse” button, now let implement the FileOpenPicker.

Add the following code under the close statement of ready function:

    selectedImage:null,

    openFilePicker: function () {

        var that = this;

        // Create the picker object and set options

        var fp = Windows.Storage.Pickers.FileOpenPicker();

        // Users expect to have a filtered view of their folders depending on the scenario.

        // For example, when choosing a documents folder, restrict the filetypes to documents for your application.

        fp.fileTypeFilter.replaceAll([".png", ".bmp", ".jpg", ".jpeg"]);

        fp.suggestedStartLocation = Windows.Storage.KnownFolders.picturesLibrary;

        fp.commitButtonText = "Select";

        fp.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;

        // Open the picker for the user to pick a file

        fp.pickSingleFileAsync().done(function (file) {

            if (file != null) {

                that.selectedImage = file;

                $("#previewImage").src = URL.createObjectURL(file, { oneTimeOnly: true });

                file.properties.getImagePropertiesAsync().then(function (imgProp) {

                    $("#imageDetails").innerHTML = "Width: {0}<br/>Height: {1}<br/>Date Taken: " +

                        "{2}<br/>Camera Model: {3}".format(

                        imgProp.width, imgProp.height, toDateTime(imgProp.dateTaken), imgProp.cameraModel);

                    $("#width").value = imgProp.width;

                    $("#height").value = imgProp.height;

                    $("#btnResize").disabled = false;

                });

            }

            else {

                $("#width").textContent = 0;

                $("#height").textContent = 0;

                $("#btnResize").disabled = true;

            }

        });

    },

Once you click on the “Pick a Image” button the file picker dialog will appear allowing you to select a single image. As pickSingleFileAsync return a promise, after the FileOpenPicker dialog is closed we received the file you pick.
First we assign the file to selectedImage object, using URL.createObjectURL we transform the file into blob and assign to the image.src property and finally we call – getImagePropertiesAsync function to retrieve image properties so we can display them on the html page.

When if you run the application you can pick and image using the “Pick a Image” button and the result should be like that:

Open home.html page and add the following code under the preview div element:

    <div class="resizeOptions">

        <div>Max Width:

            <input type="number" id="width" />

        </div>

        <div>Max Height:

            <input type="number" id="height" />

        </div>

        <div>

            <button id="btnResize" disabled="disabled">Resize Image</button>

        </div>

    </div>

We add two input elements allowing you to define the desire size of the image and a button element to invoke the resize function.

Open home.js and add the following code under the $("#btnBrowse").addEventListener statement.

    $("#btnResize").addEventListener("click", this.resizeImage.bind(this), false);

We’re adding event listener for click event on “btnResize” button, now let implement the resizeImage function.

We don’t want to change the original image in our case so the resizeImage will open the FileSavePicker allowing the user to choose where he want to save the resized image.

    resizeImage: function () {

        var that = this;

        var width = $("#width").value != "" ? parseInt($("#width").value) : 0;

        var height = $("#height").value != "" ? parseInt($("#height").value) : 0;

        if (width === 0 || height === 0) {

            var msg = new Windows.UI.Popups.MessageDialog("Please enter width and height values");

            msg.showAsync().done("");

            return;

        }

        var fs = new Windows.Storage.Pickers.FileSavePicker();

        fs.suggestedStartLocation = Windows.Storage.KnownFolders.picturesLibrary;

        fs.defaultFileExtension = this.selectedImage.fileType;

        fs.fileTypeChoices.insert(this.selectedImage.fileType, [this.selectedImage.fileType]);

        fs.suggestedFileName = "Resize Demo-" + this.selectedImage.name;

        fs.pickSaveFileAsync().done(function (targetFile) {

            //copy selected image to new file

            that.selectedImage.copyAndReplaceAsync(targetFile).then(function () {

                //call resize function on the new file.

                that._resize(width, height, targetFile).done(function () {

                    var msg = new Windows.UI.Popups.MessageDialog("File Resize Completed!");

                    msg.showAsync().done("");

                });

            });

        });

    },

The above code check is the input elements for width and height are not empty and then open the FileSavePicker, once the user choose a target file we’ll use the copyAndReplaceAsync function to copy the selected image to the target file the user has selected, finally we call the _resize function passing the width, height and the copied image object.

Now to the final part, let’s implement the resize function, add the following code after resizeImage close statement:

    _resize: function (maxWidth, maxHeight, imgFile) {

        var originalWidth;

        var originalHeight;

        var encoder;

        var fileStream;

        var count = 0;

        var that = this;

        return new WinJS.Promise(function (complete) {

            var memStream = new Windows.Storage.Streams.InMemoryRandomAccessStream();

            imgFile.openAsync(Windows.Storage.FileAccessMode.readWrite).then(function (stream) {

                fileStream = stream;

                return Windows.Graphics.Imaging.BitmapDecoder.createAsync(fileStream);

            }).then(function (decoder) {

                that._scale(decoder, memStream, maxWidth, maxHeight).then(function () {

                    // Overwrite the contents of the file with the updated image stream.

                    memStream.seek(0);

                    fileStream.seek(0);

                    fileStream.size = 0;

                    return Windows.Storage.Streams.RandomAccessStream.copyAsync(memStream, fileStream);

                })

                .done(function () {

                    // Finally, close each stream to release any locks.

                    memStream && memStream.close();

                    fileStream && fileStream.close();

                });

            }

            );

        });

    }

the _resize function calling the openAsync function on the target file to obtaint he file stream then creating stream decoder using Windows.Graphics.Imaging.BitmapDecoder. Once we have the image decoder we can scale the image (I’ll talk about that in the next code example), after the scale function has completed we copy the memoryStream (where we did the scale changes) into the fileStream (target file) after the copy is complete we close both streams. it’s important to close the streams otherwise those streams are locked for other processes. (unless you open the stream only for read).

The last part and the most important one is _scale function, this function will change the image size based on use max-height and max-width while keeping the image proportion.

    _scale: function (decoder, memStream, maxWidth, maxHeight) {

        return new WinJS.Promise(function (complete, error) {

            var originalHeight = decoder.pixelHeight;

            var originalWidth = decoder.pixelWidth;

            if (originalHeight <= maxHeight || originalWidth <= maxWidth)

                complete();

            else {

                Windows.Graphics.Imaging.BitmapEncoder.createForTranscodingAsync(memStream, decoder).then(function (_encoder) {

                    var encoder = _encoder;

                    var nPercent = 0;

                    var nPercentW = 0;

                    var nPercentH = 0;

                    nPercentW = (maxWidth / originalWidth);

                    nPercentH = (maxHeight / originalHeight);

                    if (nPercentH < nPercentW)

                        nPercent = nPercentH;

                    else

                        nPercent = nPercentW;

                    var destWidth = (originalWidth * nPercent);

                    var destHeight = (originalHeight * nPercent);

                    encoder.bitmapTransform.scaledWidth = destWidth;

                    encoder.bitmapTransform.scaledHeight = destHeight;

                    // Attempt to generate a new thumbnail to reflect any rotation operation.

                    encoder.isThumbnailGenerated = true;

                    encoder.flushAsync().done(function () {

                        complete();

                    });

                })

            }

        })

    },

First we need to check the max-height or max-width are not smaller or equal to the original size.Before changing the image size we’ll use “createForTranscodingAsync” function - creates a new BitmapEncoder and initializes it using data from an existing BitmapDecoder. We do some math to calculate the new image size and to set the new size we need to call the encoder and change the scaleWidth and scaleHeight properties located under bitmapTransform object.

Full Code:

(

&#

&#

&#

&#

&#

&#

&#

&#

&#

&#

&#

&#

&#

&#

ng-right:4px;max-height:200px;width:97.5%;background-color:#f4f4f4;"> 4;"> style="color:#0000ff;">function () { "use strict"; 160; function $(query) { return document.querySelector(query); } 160; function toDateTime(date) { var dateTime = new Date(Date.parse(date)); if (dateTime.getDate()) { var month = dateTime.getMonth() + 1; var day = dateTime.getDate(); var year = dateTime.getFullYear(); var hours = dateTime.getHours(); var minutes = dateTime.getMinutes(); var ampm = hours < 12 ? "am" : "pm"; return "{0}/{1}/{2} {3}:{4} {5}".format(month, day, year, hours < 10 ? "0" + hours : hours, minutes < 10 ? "0" + minutes : minutes, ampm); } else return date; } 160; String.prototype.format = function () { var str = this; for (var i = 0; i < arguments.length; i++) { var reg = new RegExp("\\{" + i + "\\}", "gm"); str = str.replace(reg, arguments[i]); } return str; }; 160; var ERR_OPERATION_UNSUPPORTED = -2003292287; // The operation is unsupported 160; WinJS.UI.Pages.define("/pages/home/home.html", { // This function is called whenever a user navigates to this page. It // populates the page elements with the app's data. ready: function (element, options) { $("#btnBrowse").addEventListener("click", this.openFilePicker.bind(this), false); $("#btnResize").addEventListener("click", this.resizeImage.bind(this), false); }, selectedImage: null, openFilePicker: function () { var that = this; // Create the picker object and set options var fp = Windows.Storage.Pickers.FileOpenPicker(); // Users expect to have a filtered view of their folders depending on the scenario. // For example, when choosing a documents folder, restrict the filetypes to documents for your application. fp.fileTypeFilter.replaceAll([".png", ".bmp", ".jpg", ".jpeg"]); fp.suggestedStartLocation = Windows.Storage.KnownFolders.picturesLibrary; fp.commitButtonText = "Select"; fp.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail; // Open the picker for the user to pick a file fp.pickSingleFileAsync().done(function (file) { if (file != null) { that.selectedImage = file; $("#previewImage").src = URL.createObjectURL(file, { oneTimeOnly: true }); file.properties.getImagePropertiesAsync().then(function (imgProp) { $("#imageDetails").innerHTML = "Width: {0}<br/>Height: {1}<br/>Date Taken: {2}<br/>Camera Model: {3}".format( imgProp.width, imgProp.height, toDateTime(imgProp.dateTaken), imgProp.cameraModel); 160; $("#width").value = imgProp.width; $("#height").value = imgProp.height; $("#btnResize").disabled = false; }); } else { $("#width").value = 0; $("#height").value = 0; $("#btnResize").disabled = true; } }); }, resizeImage: function () { var that = this; var width = $("#width").value != "" ? parseInt($("#width").value) : 0; var height = $("#height").value != "" ? parseInt($("#height").value) : 0; 160; if (width === 0 || height === 0) { var msg = new Windows.UI.Popups.MessageDialog("Please enter width and height values"); msg.showAsync().done(""); return; } 160; var fs = new Windows.Storage.Pickers.FileSavePicker(); fs.suggestedStartLocation = Windows.Storage.KnownFolders.picturesLibrary; fs.defaultFileExtension = this.selectedImage.fileType; fs.fileTypeChoices.insert(this.selectedImage.fileType, [this.selectedImage.fileType]); fs.suggestedFileName = "Resize Demo-" + this.selectedImage.name; fs.pickSaveFileAsync().done(function (targetFile) { //copy selected image to new file that.selectedImage.copyAndReplaceAsync(targetFile).then(function () { //call resize function on the new file. that._resize(width, height, targetFile).done(function () { var msg = new Windows.UI.Popups.MessageDialog("File Resize Completed!"); msg.showAsync().done(""); }); 160; }); }); }, 160; _scale: function (decoder, memStream, maxWidth, maxHeight) { return new WinJS.Promise(function (complete, error) { var originalHeight = decoder.pixelHeight; var originalWidth = decoder.pixelWidth; if (originalHeight <= maxHeight || originalWidth <= maxWidth) complete(); else { Windows.Graphics.Imaging.BitmapEncoder.createForTranscodingAsync(memStream, decoder).then(function (_encoder) { var encoder = _encoder; 160; var nPercent = 0; var nPercentW = 0; var nPercentH = 0; 160; nPercentW = (maxWidth / originalWidth); nPercentH = (maxHeight / originalHeight); if (nPercentH < nPercentW) nPercent = nPercentH; else nPercent = nPercentW; 160; var destWidth = (originalWidth * nPercent); var destHeight = (originalHeight * nPercent); encoder.bitmapTransform.scaledWidth = destWidth; encoder.bitmapTransform.scaledHeight = destHeight; 160; // Attempt to generate a new thumbnail to reflect any rotation operation. encoder.isThumbnailGenerated = true; encoder.flushAsync().done(function () { complete(); }); }) } }) }, _resize: function (maxWidth, maxHeight, imgFile) { var originalWidth; var originalHeight; var encoder; var fileStream; var count = 0; var that = this; return new WinJS.Promise(function (complete) { var memStream = new Windows.Storage.Streams.InMemoryRandomAccessStream(); imgFile.openAsync(Windows.Storage.FileAccessMode.readWrite).then(function (stream) { fileStream = stream; return Windows.Graphics.Imaging.BitmapDecoder.createAsync(fileStream); }).then(function (decoder) { that._scale(decoder, memStream, maxWidth, maxHeight).then(function () { // Overwrite the contents of the file with the updated image stream. memStream.seek(0); fileStream.seek(0); fileStream.size = 0; return Windows.Storage.Streams.RandomAccessStream.copyAsync(memStream, fileStream); }) .done(function () { // Finally, close each stream to release any locks. memStream && memStream.close(); fileStream && fileStream.close(); }); } ); }); } }); })();

Download Demo Project

Windows 8 Metro – Code Behind

shair — Tue, 09 Oct 2012 23:28:16 GMT

When I develop Windows 8 Metro App I usually use Windows Store app samples to see code examples features but sometimes you want more…

For example I really want to know how “Mail” metro app works: How getting access to other email account, sending email and more.

So in order to to that I had to gain access to “Mail” metro app…

Let’s start the Hack:

Problem: WindowsApps folder is blocked and by default you can’t open this folder.

Solution: First open Windows Explorer and navigate into “C:\Program Files\”, locate “WindowsApps” folder. (If you can’t see this folder make sure your you can see Hidden Files and Folders - How to Find Hidden Files and Folders in Windows).

Right click on “WindowsApps” and select “Properties”

Move to “Security” tab and click on the “Advanced” button.

Click on the “Change” button.

Add your user and click “OK”.

Now when we try to open “WindowsApps” folder we can get inside and browse the folder inside it.

To get “Mail” metro app code let’s get inside “microsoft.windowscommunicationsapps” folder and open “ModernMail” folder, there you can find the entire Code.

Enjoy

Windows 8 RTM JavaScript–Change Lock Screen Image

shair — Sun, 23 Sep 2012 12:38:00 GMT

In the past couple of months I’ve worked a lot with Windows 8 JavaScript and C#, I’ve also wrote plenty of posts on that subject and there is much more stuff to talk about.

In this post I’ll show two things:

Using File Picker using JavaScript
Change Windows 8 Lock Screen Image Programmatically

Download Demo Project

Step 1: Create Blank JavaScript Project

In the app.onactivated function we add the following code to listen the Choose Picture button and calling the displayCurrentImg function.
When you click the Choose Picture button we call the openFilePicker function.

app.onactivated = function (eventObject) {

if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {

$("#btnBrowse").addEventListener("click", function () {

openFilePicker();

}, false);

displayCurrentLockImg();

WinJS.UI.processAll();

}

};

Step 2: Find The Current Lock Screen Image

You might notice that in the previous step I used $ char to find the button element, no I’m not using JQuery, I’ve just create a function that return the querySelector return value based on the value we pass. I said it before and I’ll say it again there is not need to add JQuery to Windows 8 Application everything you need is there!

Now for getting the current Lock Screen Image we’ll use the WinRT UserProfile.
Windows.System.UserProfile.LockScreen has couple of interesting function you can use:

getImgeStream – will return the current Lock Screen Image as Stream.
originalImageFile – the current Image file object.
setImageFileAsync – Set a new Image from File
setImageStreamAsync – Set a new Image from Stream

For now we just want to display the file path of the Lock Screen image.

function $(elementId) {

return document.querySelector(elementId);

}

function displayCurrentLockImg() {

var lockScreenFile = $("#lockScreenFile");

lockScreenFile.innerHTML = Windows.System.UserProfile.LockScreen.originalImageFile.path;

}

Step 3: Using File Picker

File Picker is also a part of WinRT, the file picker allow us to brose through the user files.
First we need to create a new instance of FileOpenPicker from Windows.Storage.Pickers.

After we have the picker object we can define the view mode – how we’ll see the files on the picker screen:

List
Thumbnail

picker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;

Now we can define the suggestedStartLocation object that will open our picker at a specific location.

picker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary;

Enum Windows.Storage.Pickers.PickerLocationId:

computerFolder
desktop
documentsLibrary
downloads
homeGroup
musicLibrary
picturesLibrary
videosLibrary

We define the file filter to allow Images selection only by replacing all existing filters and adding new once.

picker.fileTypeFilter.replaceAll([".jpg", ".jpeg", ".png", ".bmp"]);

Finally we call the pickSingleFileAsync to open the File Picker screen, you can also use pickMultipleFilesAsync for multiple file selection.

Full Code:

function openFilePicker() {

var picker = new Windows.Storage.Pickers.FileOpenPicker();

picker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;

picker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary;

picker.fileTypeFilter.replaceAll([".jpg", ".jpeg", ".png", ".bmp"]);

picker.pickSingleFileAsync().then(function (file) {

Step 4: Set New Lock Screen Image

After we use the file picker to pick a new image the Lock Screen we just need to call setImageFileAsync function passing the file object from the picker and we’re Done!

picker.pickSingleFileAsync().then(function (file) {

if (file) {

// Application now has read/write access to the picked file, setting image to lockscreen.

Windows.System.UserProfile.LockScreen.setImageFileAsync(file).then(function (imageSet) {

$("#lockImg").src = URL.createObjectURL(file, false);

$("#lockImg").style.display = "block";

displayCurrentLockImg();

function (imageSet) {

// Set Image promise failed. Display failure message.

showErr("Setting the lock screen image failed. Make sure your copy of Windows is activated.");

});

}

function (file) {

showErr("File was not returned");

});

Download Demo Project

Enjoy.

Windows 8 RTM C# – Capture Media

shair — Sun, 23 Sep 2012 12:18:00 GMT

I left JavaScript and started to work on Windows 8 Metro using C# and XAML, in this post I’ll demonstrate how to use WinRT for Camera, File Picker and Audio Recording.

Download Demo Project

Step 1: Create Blank Metro Project and Initialize MediaCapture

Taking pictures using Camera or File Picker is pretty easy using WinRT, we going to use the MediaCapture class for Audio Recording, CameraCaptureUI for taking Picture from the built in Camera and FileOpenPicker for choosing pictures from local directories.

The MediaCapture class will allow us to capture:

Video
Media
Audio

But first we need to create our project resources and define the Application Capabilities to allow us using those features.

Open Package.appmanifest file located under the project and select the following:
Each of the below selections gives the application the needed permissions to work with those features.

MediaCapture mediaCaptureMgr;

StorageFile recordStorageFile;

bool recording;

DeviceInformationCollection devInfoCollection;

public BlankPage()

{

this.InitializeComponent();

mediaCaptureMgr = new MediaCapture();

}

/// <summary>

/// Invoked when this page is about to be displayed in a Frame.

/// </summary>

/// <param name="e">Event data that describes how this page was reached. The Parameter

/// property is typically used to configure the page.</param>

protected async override void OnNavigatedTo(NavigationEventArgs e)

{

EnumerateWebcamsAsync();

var settings = new MediaCaptureInitializationSettings();

settings.StreamingCaptureMode = StreamingCaptureMode.Audio;

await mediaCaptureMgr.InitializeAsync(settings);

}

Step 2: EnumerateWebcamsAsync

The code below using DeviceInformation.FindAllAsync method to get all media devices on your machine, you can also use this to get specific devices such as AudioCapture, AudioRender, PortableStorageDevice or VideoCapture.

Then we just add the name of each device found to a listbox.

async void EnumerateWebcamsAsync()

{

try

{

devInfoCollection = null;

EnumedDeviceList.Items.Clear();

devInfoCollection = await DeviceInformation.FindAllAsync(DeviceClass.All);

if (devInfoCollection == null || devInfoCollection.Count == 0)

{

await new Windows.UI.Popups.MessageDialog("No WebCams found.").ShowAsync();

}

else

{

for (int i = 0; i < devInfoCollection.Count; i++)

{

var devInfo = devInfoCollection.ElementAt(i);

EnumedDeviceList.Items.Add(devInfo.Name);

}

EnumedDeviceList.SelectedIndex = 0;

}

catch (Exception e)

{

new Windows.UI.Popups.MessageDialog(e.Message).ShowAsync();

}

Step 3: File Picker

File Picker is part of WinRT, allowing the user to choose files from local directories.

In the code below we define new class of FileOpenPicker and set several options:

ViewMode - Thumbnail or List
SuggestedStartLocation – Start Location
FileTypeFilter – Supported file types

Finally we call the PickMultipleFilesAsync to open the file picker and allowing the user to select multiple images. (You can also use PickSingleFileAsync for single image selection)

When the user click select the desire images and click the OK button we get a IReadOnlyList of StorageFile, in order to show them on the screen we can get the stream from each item our we can copy those file to our local storage and then use the “ms-appdata:///Local/FileName” path to display those images from our local storage folder.

private async void btnFilePicker_Click(object sender, RoutedEventArgs e)

{

FileOpenPicker openPicker = new FileOpenPicker();

openPicker.ViewMode = PickerViewMode.Thumbnail;

openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;

openPicker.FileTypeFilter.Add(".jpg");

openPicker.FileTypeFilter.Add(".jpeg");

openPicker.FileTypeFilter.Add(".png");

IReadOnlyList<StorageFile> files = await openPicker.PickMultipleFilesAsync(); //PickSingleFileAsync

if (files.Count == 0)

{

await new Windows.UI.Popups.MessageDialog("No files were seleced!").ShowAsync();

return;

}

var storage = Windows.Storage.ApplicationData.Current.LocalFolder;

foreach (var file in files)

{

var copiedFile = await file.CopyAsync(storage, file.Name, NameCollisionOption.GenerateUniqueName);

listImages.Items.Add(string.Format("ms-appdata:///Local/{0}", copiedFile.Name));

}

Step 4: Camera Capture

Now it’s time to capture a image from the built in Camera, to do so we’ll use the CameraCaptureUI, simply define what type of image you want to receive by defining the Format, size etc..

After the user close the Camera dialog we check if the return file isn’t null and if it doesn't we use OpenAsyc method to get the file stream and then using that stream we’ll create a new BitmapImage from that stream and assign it to the ImgCamera.

private async void btnCamera_Click(object sender, RoutedEventArgs e)

{

try

{

CameraCaptureUI dialog = new CameraCaptureUI();

Size aspectRatio = new Size(16, 9);

dialog.PhotoSettings.CroppedAspectRatio = aspectRatio;

dialog.PhotoSettings.Format = CameraCaptureUIPhotoFormat.Png;

StorageFile file = await dialog.CaptureFileAsync(CameraCaptureUIMode.Photo);

if (file != null)

{

var stream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);

var bmpimg = new BitmapImage();

bmpimg.SetSource(stream);

ImgCamera.Source = bmpimg;

stream.Dispose();

}

catch (Exception ex)

{

new Windows.UI.Popups.MessageDialog(ex.Message).ShowAsync();

}

Step 5: Audio Recording

No for the last part of application, Recording Audio, first we’ll create a StorageFile inside the Music Library, we’ll set the recording profile to create an M4a file type and just calling the StartRecordToStorageFileAsync method of the MediaCapture class passing the storageFile and the recording profile.

After the user click the stop button we call the StopRecordAsync method, this will stop the recording and same as we did for the Camera, we open the file stream and assign the stream to the MediaPlayer source.

private async void btnAudio_Click(object sender, RoutedEventArgs e)

{

try

{

String fileName = "AudioRecording.m4a";

if (!recording)

{

recordStorageFile = await Windows.Storage.KnownFolders.MusicLibrary.CreateFileAsync(fileName);

Windows.Media.MediaProperties.MediaEncodingProfile recordProfile = null;

recordProfile = Windows.Media.MediaProperties.MediaEncodingProfile.CreateM4a(Windows.Media.MediaProperties.AudioEncodingQuality.Auto);

recording = true;

btnAudio.Content = "Stop Recording";

await mediaCaptureMgr.StartRecordToStorageFileAsync(recordProfile, recordStorageFile);

}

else

{

await mediaCaptureMgr.StopRecordAsync();

btnAudio.Content = "Start Recording";

var stream = await recordStorageFile.OpenAsync(Windows.Storage.FileAccessMode.Read);

playbackElement.AutoPlay = true;

playbackElement.SetSource(stream, recordStorageFile.FileType);

playbackElement.Play();

recording = false;

}

catch (Exception ex)

{

recording = false;

new Windows.UI.Popups.MessageDialog(ex.Message).ShowAsync();

}

Download Demo Project

How To: Bing Maps Custom Tile Overlay - Google Maps

shair — Sun, 24 Jun 2012 20:39:00 GMT

I got a question from a friend who wanted to replace Bing Maps Tiles with Google Maps Tiles.
You might ask yourself why? If you want Google Tiles just replace Bing Control and work with Google Maps….. In this case I want to work with Bing Map Control because the benefits I get in Metro Applications in Windows 8 for C#, C++, VB.NET and JavaScript.
And I also want Google Maps language support.

Download Demo Project

Currently Bing Maps doesn't support any language except English, and I want to display the map with the user natural language.

Google \ Bing Preview

Google - Hebrew	Google - English	Bing – Only English

Before we jump to the solution let’s talk about the common ground between Bing and Google Maps.

Each tile consists of 256 x 256 pixels
Each succeeding zoom level divides the map into 4 N tiles, where N refers to the zoom level. For example:

at zoom level 1,each map divides the world up into a 2x2 grid for a total of 4 tiles;
at zoom level 2, each map divides up the world into a 4x4 grid for a total of 16 tiles, etc
(From “Tile Coordinates” Google API) – Zoom Level 2 (4x4)
(From “Tile Coordinates and Quadkeys” MSDN) – Zoom Level 3 (8x8)

I order to replace the tile we need to have Google map url that will return the specific tile based on the X, Y, and Zoom level – and we have it here:

Google Maps –> calling "https://mts0.google.com/vt/hl=he&src=api&x=2&s=&y=1&z=3” will return: (X = 2 , Y = 1 , Zoom = 3)

So what is the problem? The problem is that in order to replace Tiles in Bing Maps you need to pass the “QuadKey” value. - MapTileLayer Class

As you can see from the code example below the TileSource gets the url of the custom tile with a parameter called - {quadkey}

C#

MapTileLayer tileLayer = new MapTileLayer();
tileLayer.TileSource = "http://www.microsoft.com/maps/isdk/ajax/layers/lidar/{quadkey}.png";
map.TileLayers.Add(tileLayer);

JavaScript

function addTileOverlay() {
    var options = { uriConstructor: "http://www.microsoft.com/maps/isdk/ajax/layers/lidar/{quadkey}.png"};
    var tileSource = new Microsoft.Maps.TileSource(options);
    var tilelayer = new Microsoft.Maps.TileLayer({ mercator: tileSource });
    map.entities.push(tilelayer);
}

What is QuadKey? - A quadkey uniquely identifies single tiles at particular levels of detail

To optimize the indexing and storage of tiles, the two-dimensional tile XY coordinates are combined into one-dimensional strings called quadtree keys, or “quadkeys” for short. Each quadkey uniquely identifies a single tile at a particular level of detail, and it can be used as an key in common database B-tree indexes. To convert tile coordinates into a quadkey, the bits of the Y and X coordinates are interleaved, and the result is interpreted as a base-4 number (with leading zeros maintained) and converted into a string. For instance, given tile XY coordinates of (3, 5) at level 3, the quadkey is determined as follows:

tileX = 3 = 011 2
tileY = 5 = 101 2
quadkey = 100111 2 = 213 4 = “213”

Quadkeys have several interesting properties. First, the length of a quadkey (the number of digits) equals the level of detail of the corresponding tile. Second, the quadkey of any tile starts with the quadkey of its parent tile (the containing tile at the previous level). As shown in the example below, tile 2 is the parent of tiles 20 through 23, and tile 13 is the parent of tiles 130 through 133:

So now that we understand what is QuadKey we understand that we need to translate this value into Google Map X,Y and Zoom, we can use the following method to convert the QuadKey into x,y and level values.

public static void QuadKeyToTileXY(string quadKey, out int tileX, out int tileY, out int levelOfDetail)
{
    tileX = tileY = 0;
    levelOfDetail = quadKey.Length;
    for (int i = levelOfDetail; i > 0; i--)
    {
        int mask = 1 << (i - 1);
        switch (quadKey[levelOfDetail - i])
        {
            case '0':
                break;
            case '1':
                tileX |= mask;
                break;
            case '2':
                tileY |= mask;
                break;
            case '3':
                tileX |= mask;
                tileY |= mask;
                break;
            default:
                throw new ArgumentException("Invalid QuadKey digit sequence.");
        }
    }
}

But you don’t need to do that because the quadkey is automatically translated into those values, so instead of setting a static url for TileOverlay we will set a function called convert that received the quadkey object.

Solution:

function convert(quadkey) {
    return "https://mts0.google.com/vt/hl=he&src=api&x=" + quadkey.x + "&s=&y=" + quadkey.y + "&z=" + quadkey.levelOfDetail;
}

function addTileOverlay() {
      var options = { uriConstructor: convert };
    var tileSource = new Microsoft.Maps.TileSource(options);
    var tilelayer = new Microsoft.Maps.TileLayer({ mercator: tileSource });
    map.entities.push(tilelayer);
}

Bing Map without Google Tiles:

Bing Maps with Google Tiles:

Download Demo Project

How To: Bing Maps For Windows 8 Metro Apps - JavaScript

shair — Fri, 22 Jun 2012 14:16:16 GMT

In my last post I talked about Bing Map for C#, but you can also do the same of JavaScript projects using Bing Maps SDK.

Download Demo Project

Step 1: Maps Developer Account

Before you can use Bing Sdk from Windows 8 Metro App you need Maps Developer Account, open http://www.bingmapsportal.com/, create or enter with existing Windows Live account. Choose “Create or view keys” and create new Key for your application.

Step 2: Create Bing Maps Metro Application

Download the latest bits - Bing Maps SDK for Metro style apps
Open Visual Studio 2012 RC, and create JavaScript Blank Project.
“Add Reference” –> select “Bing Maps for JavaScript (Beta)….” and click OK.

Step 3: Add Map Control

Inside default.html we add a div element under the body, this will be the map holder.

<body>
     <div id="mapdiv"></div>
</body>

Now we need to load the map into that control, be just before we need to load the map module, in order to 
do that we’ll call Maps.loadMoudle and set a callback to another method called – initMap.

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
        } else {
        }
        args.setPromise(WinJS.UI.processAll().then(function () {
            Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: initMap });
        }));
    }
};

After the Maps module is loaded the initMap function will place the Map into the mapdiv element, the function 
below defines several default values such as:

```
Bing Map credentials
```
```
Center location
```
```
Map type
```
```
Zoom
```

Finally we obtain the mapdiv element and define a new object called map defined from new Map that receive the 
div and the options.

function initMap() {
    try {
        var mapOptions =
        {
            credentials: "AvOW5Fz4QTsubTTdmaVnseeZnAQ0JYwbx_6zdMdgHk6iF-pnoTE7vojUFJ1kXFTP",
            center: new Microsoft.Maps.Location(50, 50),
            mapTypeId: Microsoft.Maps.MapTypeId.road,
            zoom: 5
        };

        var mapDiv = document.querySelector("#mapdiv");
        map = new Microsoft.Maps.Map(mapDiv, mapOptions);
    }
    catch (e) {
        var md = new Windows.UI.Popups.MessageDialog(e.message);
        md.showAsync();
    }
}

Step 4: Basics

I’ve added couple of buttons on the right side to help us controlling the map view.

Zoom – The JS map control has built in Zoom in and Zoom out but you can still change the zoom from code:

var zoomValue = map.getZoom();
map.setView({ zoom: zoomValue + 2 });

Map Type - there are 3 types of maps : Aerial, Road and Birdseye.

function changeMapType() {
    var type = map.getMapTypeId();
    switch (type) {
        case Microsoft.Maps.MapTypeId.aerial:
            type = Microsoft.Maps.MapTypeId.road;
            break;
        case Microsoft.Maps.MapTypeId.road:
            type = Microsoft.Maps.MapTypeId.birdseye;
            break;
        default:
            type = Microsoft.Maps.MapTypeId.aerial;
            break;
    }
    map.setView({ center: map.getCenter(), mapTypeId: type });
}

Set Current Location – Using Geolocator to find current location, then using map SetView to center map based on the new location (Make sure you enable “Location” as application capability.)

function centerPosition() {
    var geolocator = new Windows.Devices.Geolocation.Geolocator();
    geolocator.getGeopositionAsync().then(function (loc) {
        var mapCenter = map.getCenter();
        mapCenter.latitude = loc.coordinate.latitude;
        mapCenter.longitude = loc.coordinate.longitude;

        map.setView({ center: mapCenter, zoom: 18 });
    });
}

Step 5: Push Pin

In step 4 we used “Geolocator” to find our current position, then we center the map based on the new position.

Instead of just centering the map we’ll like to add a PushPin directly on our location.

function addPushPin(location) {
    map.entities.clear();       
    var pushpin = new Microsoft.Maps.Pushpin(location, null);
    map.entities.push(pushpin);
}

function centerPosition() {
    var geolocator = new Windows.Devices.Geolocation.Geolocator();
    geolocator.getGeopositionAsync().then(function (loc) {
        var mapCenter = map.getCenter();
        mapCenter.latitude = loc.coordinate.latitude;
        mapCenter.longitude = loc.coordinate.longitude;

        map.setView({ center: mapCenter, zoom: 15 });

        addPushPin(mapCenter);
    });
}

Step 6: Tap and Pin

One more functionality I’ll would like to add is “Tap”, this mean the user click tap on the map (or mouse click) and this will place a Push Pin where the user clicked.

Instead of using the standard PushPin image I want to load my own image as pin, so I add a
“star.png” file to images folder.

Also I add new event listener for click on the mapDiv element calling new function called – “tapped”

var mapDiv = document.querySelector("#mapdiv");
mapDiv.addEventListener('click', tapped, false);
map = new Microsoft.Maps.Map(mapDiv, mapOptions);

When tapped event is fired we can use the tapped event arguments to get the relative position of the tap position by calling the tryPixelToLocation method from the map control, then after we received the location where the user clicked we can add a push pin and center the map based on the the new location.

function tapped(location) {
    var mapCenter = map.getCenter();
    var pos = map.tryPixelToLocation(new Microsoft.Maps.Point(location.clientX, location.clientY),
                                      Microsoft.Maps.PixelReference.control);
    mapCenter.latitude = pos.latitude;
    mapCenter.longitude = pos.longitude;
    map.setView({ center: mapCenter });

    var pin = new Microsoft.Maps.Pushpin({ latitude: pos.latitude, longitude: pos.longitude }, {
        icon: '/images/star.png',
        anchor: new Microsoft.Maps.Point(8, 8)
    });

    map.entities.clear();
    map.entities.push(pin);
}

Download Demo Project

Upgrade Metro App From Beta To RC

shair — Sun, 03 Jun 2012 17:25:52 GMT

In my previous post Convert VS 11 Beta Metro Projects To VS 2012 RC I talked about upgrading the Project file from Beta to RC, in this post I’ll try to talk about all changes made from Beta to RC.

I don’t know all the breaking changes in JavaScript and C# but I collect all the breaking changes from the application and games I develop and I’ll show them here.

JavaScript + HTML

Type	Old Value	New Value	Comment
Event	MSGestureTap	onclick
Event	MSGestureHold	oncontextmenu
Method	getPointerList	Removed	use getIntermediatePoints with the element you want to get the points from.
Event	MSGestureDoubleTap	double-click
Method		WinJS.strictProcessing(); function Test() { //ToDo } test.supportedForProcessing = true;	Now, any function resolved for data-win-control or as a right-hand-side in data-win-options, or used as a binding initializer in data-win-bind, will require a property on the function definition.
Event	viewstatechanged	resize	function onResize() myViewState = Windows.UI.ViewManagement.ApplicationView.value;

C# + XAML

My first suggestion is – Start a new Project, don’t try to fix all the errors because there are tons of changes, class such as “LayoutAwarePage.cs” has completely changed so just create a new project and start copying files.

But after you copy your code you will still have changes to do, starting from simple class changes to Style changes.

Below you can find a list of things that changed, just perform Find and Replace, I think 90% of the styles has changed just with “Theme” word before Brush, but some styles names also changed.

Type	Old Value	New Value	Comment
Class	PointerEventArgs	PointerRoutedEventArgs
Style	FocusVisualBlackStrokeBrush	FocusVisualBlackStrokeThemeBrush
Style	FocusVisualWhiteStrokeBrush	FocusVisualWhiteStrokeThemeBrush
Style	ApplicationHoverTextBrush	ApplicationPointerOverForegroundThemeBrush
Style	ApplicationPressedTextBrush	ApplicationPressedForegroundThemeBrush
Style	ControlDisabledTextBrush	ButtonDisabledForegroundThemeBrush
Style	ApplicationSecondaryTextBrush	ApplicationSecondaryForegroundThemeBrush
Style	AppBarItemForegroundBrush	AppBarItemForegroundThemeBrush
Style	AppBarItemBackgroundBrush	AppBarItemBackgroundThemeBrush
Style	AppBarItemHoverBackgroundBrush	AppBarItemPointerOverBackgroundThemeBrush
Style	AppBarItemHoverForegroundBrush	AppBarItemPointerOverForegroundThemeBrush
Style	AppBarItemForegroundBrush	AppBarItemForegroundThemeBrush
Style	AppBarItemPressedForegroundBrush	AppBarItemPressedForegroundThemeBrush
Style	AppBarItemDisabledForegroundBrush	AppBarItemDisabledForegroundThemeBrush
Style	BackButtonBackgroundBrush	BackButtonBackgroundThemeBrush
Style	BackButtonGlyphBrush	BackButtonForegroundThemeBrush
Style	BackButtonPressedGlyphBrush	BackButtonPressedForegroundThemeBrush
Style	BackButtonHoverBackgroundBrush	BackButtonPointerOverBackgroundThemeBrush
Style	BackButtonHoverGlyphBrush	BackButtonPointerOverForegroundThemeBrush
Style	BackButtonGlyphBrush	BackButtonForegroundThemeBrush
Style	ListViewItemPlaceholderRectBrush	ListViewItemPlaceholderBackgroundThemeBrush
Style	ListViewItemOverlayBackgroundBrush	ListViewItemOverlayBackgroundThemeBrush
Style	ListViewItemOverlayTextBrush	ListViewItemOverlayForegroundThemeBrush
Style	ListViewItemOverlaySecondaryTextBrush	ListViewItemOverlaySecondaryForegroundThemeBrush
Method	this.Dispatcher.InvokeAsync(	this.Dispatcher.RunAsync	can use the returned IAsyncAction object to set a completion routine to get the completion status.
Event	ApplicationView.GetForCurrentView().ViewStateChanged += ViewStateChanged	Window.Current.SizeChanged += WindowSizeChanged;

Convert VS 11 Beta Metro Projects To VS 2012 RC

shair — Sun, 03 Jun 2012 16:16:55 GMT

Over the last months I’ve worked a lot with Windows 8 Metro applications, from Consumer Preview to Preview 2 and now to RC.

When working on Beta versions you know that you have to upgrade your app when RC or RTM versions will published, and sometime those upgrades can take a while…

So this is the first part of upgrading your Project from Visual Studio 11 Beta to Visual Studio 2012 RC, in my next post I’ll talk about code Changes from Beta to RC both for C# and JavaScript.

JavaScript

For JavaScript project this is pretty easy, just open the solution and change the WinRT version from 0.6 to 1.0.RC

But if you have several projects you created in Consumer Preview you might want to go this way:

I’ve download a “Find & Replace” tool (DivlocSoft - File Find and Replace Software) allowing me to Search inside file content and replace – so you need to search for:

<SDKReference Include="Microsoft.WinJS, Version=0.6" />

and Replace with:

<SDKReference Include="Microsoft.WinJS.1.0.RC, Version=1.0" />

same goes here, both Html and JavaScript files that have reference you should search for:

//Microsoft.WinJS.0.6/

and Replace with:

//Microsoft.WinJS.1.0.RC/

C#

Nothing hard to do for converting the project to RC, this is because in C# projects a reference to the entire .Net Framework and Windows SDK are automatically included.

This is just for upgrading the Project, for C# there is no chance your project will run, there is too many changes and I’ll talk about them in my next post.

Window 8 JavaScript–Asynchronous Programming & App Storage

shair — Wed, 07 Mar 2012 12:33:00 GMT

In this post I’m going to talk about WinJS.xhr that makes an XMLHttpRequest as a Promise, and how to save and load images and from your local storage.

What is a Promise?

Promise is a way for Asynchronous Programming in JavaScript, Avoiding synchronous execution in single-threaded languages like JavaScript is necessary in order to create apps that are responsive and high performing. Windows Library for JavaScript provides a consistent and predictable mechanism called a Promise that simplifies asynchronous programming.

A promise implements a method for registering callbacks for state change notifications, named then.

Instead of writing a single get action that force your code to wait for response.

var result = myWebService.get(http://www.contoso.com);

Or if you think about writing more code like this:

myWebService.addEventListener('completed', function(result) 
                                              { /* do something */});
myWebService.get(http://www.contoso.com);

You should use WinJS Promise to create Asynchronous action using then method.

myWebService.get("http://www.contoso.com")
    .then(
       function (result) { /* do something */ },
       function (error) { /* handle error */ },
       function (progress) { /* report progress */ }
     );

For this post I wrote a simple JavaScript Metro App that downloads web images and saves them to local storage and a gallery that display all images under App local storage.

Download Demo Project

Step 1: Create a new Windows 8 JavaScript Metro App

First create empty JavaScript project and add new js file called - imgDownloader

We will use this file to download and locate the local images.

Step 2: Asynchronous Image Download

We need to download the image asynchronously, then save the stream we get to a local file.

The first thing is the folder location, Each application has three available folders under - Windows.Storage.ApplicationData.current - to save user data:

Local
Temp
Roaming

Now using WinJS.xhr we enter the image url and define the response type as “Blob”, again this is an Asynchronous method and we can use THEN in order to register a callback that will called when the request is finished.

Once we get the result from Xhr we use the folder object to create new file with the name the user passed, again once the new file was created we open this file for editing and get the stream.

Code Flow:

Using Ajax get the image = WinJS.xhr({ url: imgUrl, responseType: "blob" }).then
After we received the image we create a new file = folder.createFileAsync(imgName,..).then
Open our file for edit = file.openAsync(Windows.Storage.FileAccessMode.readWrite).then
Copy the image content = copyAsync(blob.msDetachStream(), stream).then
Close stream = stream.flushAsync().then

function download(imgUrl, imgName) {
return WinJS.xhr({ url: imgUrl, responseType: "blob" }).then(function 
                                                            (result) {
    var blob = result.response;
    return folder.createFileAsync(imgName, Windows.Storage.
           CreationCollisionOption.replaceExisting).then(function (file){
        // Open the returned file in order to copy the data
        return file.openAsync(Windows.Storage.FileAccessMode.readWrite).
                                              then(function (stream) {
            return Windows.Storage.Streams.RandomAccessStream.copyAsync
                   (blob.msDetachStream(), stream).then(function () {
                // Copy the stream from the blob to the File stream
                return stream.flushAsync().then(function () {
                    stream.close();
                });
            });
        });
    });
}, function (e) {
    var msg = new Windows.UI.Popups.MessageDialog(e.message);
    msg.showAsync();
});
}

Step 3: Locate Local File

After the download has completed we want to locate the local file we just saved and return the file object, using the file object we can get the file type ,creation date and more.

Using Windows.Storage.ApplicationData.current.local.getFileAsync (or Temp, Roaming") , we can search for a specific file under that folder, if the file is found in the local folder we return the file, else return null. (File Not Found)

function fileExists(fileName) {
    return folder.getFileAsync(fileName).then(function (file) {
        return file;
    }, function (err) {
        return null;
    });
}

Step 4: Add imgDownloader Namespace

In order to call these methods from Default.js we need to add the namespace using the following methods:

WinJS.Namespace.define('imgDownloader', {
    download: download,
    fileExists: fileExists
});

Step 5: Add page functionality

Now, when the user writes the image Uri and clicks the “Get Image” button we’ll call the getImage function.

app.onactivated = function (eventObject) {
    if (eventObject.detail.kind === Windows.ApplicationModel.Activation.
                                                ActivationKind.launch) {
        // TODO: Initialize your application here.
        WinJS.UI.processAll();
 
        document.querySelector("#btnDownloadImg").addEventListener("click"
      , function () {
            getImage();
        });
    };

using querySelector we’ll take the Uri and File Name values, using the imgDownloader namespace and call Download function using the user supplied values. Because the download function has a callback value we can use the then method.

After the download operation has completed we call the fileExists function to get the local file object.

After getting the Image we demonstrate two options for displaying the image:

ms-appdata:// protocol – Path To Local Folder
URL.createObjectURL – Converting the file to blob, you can choose to create permanent blob so you can use it again.

function getImage() {
    var imgUrl = document.querySelector("#txtUrl").value;
    var fileName = document.querySelector("#txtFileName").value;
 
    imgDownloader.download(imgUrl,
    fileName).then(function () {
        imgDownloader.fileExists(fileName).then(function (file) {
            document.querySelector("#mainImg").src = 
                                     URL.createObjectURL(file, false);
            // using the ms-appdata:// protocol.
            document.querySelector("#mainImg2").src = 
                                    "ms-appdata:///Local/" + fileName;
 
 
            document.querySelector("#filePath").textContent = 
                                     "Path: " + file.path;
            document.querySelector("#fileType").textContent = 
                                     "Display Type: " + file.displayType;
            document.querySelector("#dateCreated").textContent = 
                                     "Date Created: " + file.dateCreated;
 
            drawGallery();
        }, function (err) {
            var msg = new Windows.UI.Popups.MessageDialog
                                                  ("Picture Not Found");
            msg.showAsync();
        });
    });
}

The last thing I want to do is locate all files under my local folder and display all image files.

Again we’ll use Windows.Storage.ApplicationData.current.localFolder but now let’s call “getItemsAsync” to get all files, then forEach over these items and make sure to handle only images, convert each file to a blob using createObjectURL and add the image to our gallery div.

function drawGallery() {
    Windows.Storage.ApplicationData.current.localFolder.getItemsAsync().
       then(function (items) {
        var div = document.querySelector("#existingFiles");
        div.textContent =  "";
        items.forEach(function (storageItem) {
            if (storageItem.fileType === ".png" || 
                storageItem.fileType === ".jpg" || 
                storageItem.fileType === ".jpeg") {
 
                var image = document.createElement("img");
                image.style.width = "100px";
                image.style.height = "100px";
                image.src = URL.createObjectURL(storageItem);
                image.alt = image.src;
 
                div.appendChild(image);
 
            }
        }, function (e) {
            var msg = new Windows.UI.Popups.MessageDialog(e);
            msg.showAsync();
        });
    });
}

Download Demo Project

Windows 8 JavaScript – Pinch

shair — Mon, 05 Mar 2012 15:55:00 GMT

The feature I’m going to show you now isn’t part of JavaScript Metro app and you need to write some code and use Metro Touch Event called – MSPointerMove.

The feature I’m going to simulate is Pinch -

Download Demo Project

In this post I’ve created a Pinch functionality to increase and decrease zoom on specific item.

Step 1: Create JavaScript Metro Project

In the default.html page I’ve added a image (for our demo) and div element called output to display the touch output.

<body>
    <div id="output"></div>
    <div style="text-align: center; vertical-align: middle">
        <img id="image" src="images/SelaLogo.png" style="zoom: 1; 
                        width: 10%; height: 10%" />
    </div>
</body>

Step 2: Register to Pointer Move Event

In the application activated event we get the image object from the UI and register to MSPointerMove event, this event will allow to receive Multi-touch pointers for more than one finger on the screen.

var img;
 
app.onactivated = function (eventObject) {
    if (eventObject.detail.kind === Windows.ApplicationModel.Activation.
        ActivationKind.launch) {
        WinJS.UI.processAll();
 
        img = document.querySelector("#image");
        document.addEventListener("MSPointerMove", pointerMoveListener, 
                                                   false);
    }
};

Step 3: Distance Calculation Helpers

Now, before start handling the touch event I created a point class to obtain x, y, and the point id.

beside that a simple math calculation to get the distance between two points.

Distance Formula: Given the two points (x₁, y₁) and (x₂, y₂), the distance between these points is given by the formula:

function point(x, y, id) {
    this.id = id;
    this.x = x;
    this.y = y;
}
 
var distance;
var basePoint1, basePoint2;
var outID;
 
function calcDistance(point1, point2) {
    var x = Math.pow((point2.x - point1.x), 2);
    var y = Math.pow((point2.y - point1.y), 2);
    return Math.ceil(Math.sqrt(x + y));
}

Step 4: Calculate Distance Between Points

Now we ready to talk about the pointerMoveListener that gets the output from the MSPointerMove event, first we’ll use the getPointerList function to receive all recognize points on the screen, in my demo I want to handle only two points no less and no more.

If basePoint1,2 are undefined we define those objects for the current output and calculate the current distance between those points.

Once the event will raise again we call the cangeRatio method that will calculate the new distance between the points.

function pointerMoveListener(event) {
    var pointerList = event.getPointerList(event.pointerId);
    if (pointerList.length !== 2) return;
 
    clearTimeout(outID);
    outID = setTimeout(function () {
        basePoint1 = basePoint2 = distance = undefined;
    }, 100);
 
    var currentPoint1 = new point(pointerList[0].clientX, 
        pointerList[0].clientY, pointerList[0].pointerId);
    var currentPoint2 = new point(pointerList[1].clientX, 
        pointerList[1].clientY, pointerList[1].pointerId);
 
    if (basePoint1 === undefined || basePoint2 === undefined || 
        distance === undefined) {
        basePoint1 = currentPoint1;
        basePoint2 = currentPoint2;
        distance = calcDistance(basePoint1, basePoint2);
    }
    else if (basePoint1.id === currentPoint1.id && basePoint2.id
                           === currentPoint2.id ||
        basePoint1.id === currentPoint2.id && basePoint2.id 
                      === currentPoint1.id) {
        changeRatio(currentPoint1, currentPoint2);
    }
}

Step 5: Change Ratio

Finally we have two distances, we just need to subtract both to find the delta between the first and the seconds, using this value I’ll increase or decrease the zoom attribute of the picture.

function changeRatio(p1, p2) {
    var delta = 0;
 
    var Seconddistance = calcDistance(p1, p2);
    delta = (Seconddistance - distance) / 10;
 
    document.querySelector("#output").textContent = "Point 1 - x: " + p1.x
        + " y: " + p1.y + " - " + "Point 2 - x: " + p2.x + " y: " 
        + p2.y + " Delta: " + delta;
 
    if (delta < 0) return;
    if (delta > 10)
        document.querySelector("#image").style.zoom = 10;
    else
        document.querySelector("#image").style.zoom = delta;
}

Download Demo Project

Windows 8 JavaScript–Splash Screen

shair — Sun, 04 Mar 2012 16:09:00 GMT

When creating an Win 8 Metro App you define splash screen with a single image, what if you want to do more… For example show some animations, load your resources before the application loads and more.

In this post I’ll show you how to create custom Splash Screen and control the load event so you know when the loading is over and your user can start using the application.

In my demo I’ll display some canvas animation and a timer (from 10s) until going to the main page.

Download Demo Project

Step 1: Create Navigation Metro App (JavaScript)

Add the following files:

css\splash.css
html\splash.html
js\splash.js
js\shadebob.js

Step 2: Define Startup Page

When you start your application the first thing the user will see is this:

There are two ways to remove it before we can set our custom splash screen:

Because you can’t remove the splash image (it’s required), you can replace the image with your own empty image.
The second option is to define the background color to white – this will show an white page with not clock.

After we remove the default splash image we want to define our Splash.html page as startup page as follow:

Step 3: Splash.html

Our splash page will contain a screen div and holder div.

The Screen div will contain a canvas that will display the animations.

The holder will contain the timer div that will display the remaining seconds from the timer.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Splash</title>
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
    <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
    <link href="/css/default.css" rel="stylesheet">
    <link href="/css/splash.css" rel="stylesheet">
    <script src="/js/splash.js"></script>
    <script src="/js/shadebob.js"></script>
</head>
<body onload="resize()">
    <div id="screen" style="display: none">
        <canvas id="shadebob"></canvas>
    </div>
    <div id="holder">
        This is my Custom Splash...
        <h1 id="timer"></h1>
    </div>
</body>
</html>

Step 4: Splash.css

The first thing we want is to place our custom splash in the center of the screen, so I’ve defined our holder div to absolute position, I’ve also centered the timer div.

#body {
    position: absolute;
    top: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
}
 
#holder {
    position: absolute;
}
h1 {
    
    font-size: 180px;
    font-weight: 600;
}
#timer {
    text-align: center;
}

Step 5: Splash.js

Because we changed the startup page we now need to set the splash.js to start the application, this allows us to hook the onactivated event from he application.

You can see the onactivated is fired you get the eventObject that has the splashScreen object inside detail.

From the splash object we take the imageLocation to get the x,y width and height of the original splash screen, the reason for doing that is to set our canvas and timer display in the center exactly where the splash should be, you don’t have to do that you can also calculate based on the document width and height.

After we obtain those values we set our holder div at the same position and size as the original splash screen, and we start the timer by calling setInterval to call countDown function.

The countDown function reduce 1 from the waitFor object until is reached to 0 and then he will redirect the page to homePage.

Now to the important part the dismissed event, as you can see I’ve register to the dismissed event from the splash screen so I can know when the splash has dismissed, in my demo this event is not relevant because my splash is dismissed the second I place the image on the screen but for you it can be loading event are something else.

(function () {
"use strict";
 

var waitFor = 10;
var app = WinJS.Application;
 
// This function responds to all application activations.
app.onactivated = function (eventObject) {
    if (eventObject.detail.kind === Windows.ApplicationModel.Activation.
                                    ActivationKind.launch) {
 
        // Retrieve splash screen object
        var splash = eventObject.detail.splashScreen;
 
        // Retrieve the window coordinates of the splash screen image.
        var coordinates = splash.imageLocation;
 
        // Position the extended splash screen image in the same location 
        // as the splash screen image.
        var holder = document.querySelector("#holder");
 
        holder.style.left = coordinates.x + "px";
        holder.style.top = coordinates.y + "px";
        holder.style.height = coordinates.height + "px";
        holder.style.width = coordinates.width + "px";
 
        countDown();
        setInterval(countDown, 1000);
 
        // Register an event handler to be executed when the splash screen
        // has been dismissed.
        splash.addEventListener("dismissed", onSplashScreenDismissed, 
                                                                   false);
 
        WinJS.UI.processAll();
    }
};
 
app.start();
 
function countDown() {
    waitFor = waitFor - 1;
    if (waitFor <= 0) {
        location.href = "/html/homePage.html";
    }
    else
        document.querySelector("#timer").innerHTML = waitFor;
}
 
function onSplashScreenDismissed() {
    // Include code to be executed when the system has transitioned
    // from the splash screen to the application's first view.
}
})();

Download Demo Project

Windows 8 JavaScript – Settings

shair — Thu, 01 Mar 2012 13:13:00 GMT

In my previous post I talked about Windows 8 JavaScript Metro App Basics, and some getting started with the new Metro Apps.

In order to help you get inside Windows 8 Metro Apps I’ll start writing on specific features in Metro Apps, starting from Settings.

As you build your Metro App you probably need to let the user to change some settings in the application, you don’t need to write any things special for that because Win8 comes with integrated Settings Pane allow you to add your own settings.

Download Demo Project

This is a very simple task, just define your settings as Pages, for example:

Help Page
About
Dummy 1
etc…

(Remember – Each page should have it’s own CSS and JS file, don’t be lazy!)

before we can get started you need to build new JavaScript application, the second part is getting inside the default.js file and register to onsettings event:

app.onactivated = function (eventObject) {
    if (eventObject.detail.kind === Windows.ApplicationModel.
                             Activation.ActivationKind.launch) {
      WinJS.UI.processAll();
      // app.addEventListener("settings", function (e) { Load Settings });
      // OR       
      app.onsettings = loadSettings;
    }
};

I’ve created a new folder in my project called – “Settings”, inside I’ve create 2 pages – Help and About.

Now, you need to register those pages to the application onsettings event, and make sure to use the flyout control to populate those setting.

function loadSettings(e) {
    e.detail.applicationcommands =
    {
        "Help":
            {
                title: "Help",
                href: "/Settings/Help.html"
            },
        "About":
            {
                title: "About Me",
                href: "/Settings/About.html"
            }
    };
    WinJS.UI.SettingsFlyout.populateSettings(e);
}

Now, how can I see my settings? There are three ways to see them:

User perform a proper gesture to open the setting page.
Call the Setting Pane using SettingsPane
Windows.UI.ApplicationSettings.SettingsPane.show();
Call specific page using SettingsFlyout (using id and path)
WinJS.UI.SettingsFlyout.showSettings("Help", "/Settings/Help.html");

document.querySelector("#btnShowSettings").addEventListener
("click", function (e) {
    Windows.UI.ApplicationSettings.SettingsPane.show();
});
 
document.querySelector("#btnHelp").addEventListener("click", function () {
    WinJS.UI.SettingsFlyout.showSettings("Help", "/Settings/Help.html");
});
 
document.querySelector("#btnAbout").addEventListener("click", function () {
    WinJS.UI.SettingsFlyout.showSettings("About", "/Settings/About.html");
});

Download Demo Project

My First Metro Application – Metro Puzzle

shair — Sat, 01 Oct 2011 07:23:00 GMT

Last week me and other 20 guys from Sela Group were in the Build Conference where we first saw the new Windows 8 operation system and many cool things coming from Microsoft in the new release.

I have much to say about new things regarding ALM, Metro but as always I prefer to start with building something with the new technology instead of talking about it….

So now I’ll talk about my first Metro Application for Windows 8 called – Metro Puzzle based on Puzzle 15 also called the N-Puzzle.

Step 1: Prepare your environment

To Get started with Metro Applications you need Windows 8 Developer Preview installed with Developer Tools – Download Here

Windows Developer Preview works great on the same hardware that powers Windows Vista and Windows 7:

1 gigahertz (GHz) or faster 32-bit (x86) or 64-bit (x64) processor
1 gigabyte (GB) RAM (32-bit) or 2 GB RAM (64-bit)
16 GB available hard disk space (32-bit) or 20 GB (64-bit)
DirectX 9 graphics device with WDDM 1.0 or higher driver
Taking advantage of touch input requires a screen that supports multi-touch
To run Metro style Apps, you need a screen resolution of 1024 X 768 or greater

Step 2: Create Project

With the new Developer Tools you’ll be able to create Windows Metro Style applications in C#, Visual Basic, C++ and JavaScript.

There are very cool templates for getting started with Metro application, Grid and Split but from my puzzle I’ve created new Application Project.

Step 3: Add Metro Application Bar

Because Windows 8 should support Touch systems Microsoft create the ApplicationBar object to allow users without Mouse to perform Right Click operation just by sliding the finger from the bottom of the screen up.

Of course if you do working with Mouse you can just right click and the application bar will appear.

So How?

Just add the ApplicationBar control just before the end of the XAML file and make sure the ApplicationBar height is 88 (Metro Standard).

<ApplicationBar Grid.ColumnSpan="9" Height="88" Grid.Row="9" 
                VerticalAlignment="Bottom">
    <StackPanel Orientation="Horizontal">
        <Button Content="Exit" Style="{StaticResource BackButtonStyle}"
                x:Name="btnBack" Click="btnBack_Click" />
        <Button Content="New Game" 
                Style="{StaticResource RefreshButtonStyle}" 
                x:Name="btnnewGame" Click="btnnewGame_Click"/>
    </StackPanel>
</ApplicationBar>

Step 4: Add Toast

Toast is the way to notify your user about something, instead of using the annoying Message Box you now Toast the user.

The toast will appear on the right bottom and will not prevent from the user to continue working, the toast will disappear after couple of seconds.

Toast API have couple of default templates as you can see from the enum below.

public enum ToastTemplateType
{
    ToastImageAndText01 = 0,
    ToastImageAndText02 = 1,
    ToastImageAndText03 = 2,
    ToastImageAndText04 = 3,
    ToastSmallImageAndText01 = 4,
    ToastSmallImageAndText02 = 5,
    ToastSmallImageAndText03 = 6,
    ToastSmallImageAndText04 = 7,
    ToastText01 = 8,
    ToastText02 = 9,
    ToastText03 = 10,
    ToastText04 = 11,
}

Before you can call the Toast from your code you need to make sure the “Toast Capable” is set to Yes in your “Package.appxmanifest” file.

The below code define a Toast template with Image and Text.

void DisplayToastWithImage()
{
    // GetTemplateContent returns a Windows.Data.Xml.Dom.XmlDocument 
    // object containing the toast XML
    XmlDocument toastXml = ToastNotificationManager.
           GetTemplateContent(ToastTemplateType.ToastImageAndText01);
 
    // You can use the methods from the XML document to specify all of the
    // required parameters for the toast
    XmlNodeList imageElements = toastXml.GetElementsByTagName("image");
    XmlElement imageElement = (XmlElement)imageElements.Item(0);
    imageElement.SetAttribute("src", "package://images\\Winner.png");
    imageElement.SetAttribute("alt", "Placeholder image");
 
    XmlNodeList textElements = toastXml.GetElementsByTagName("text");
    for (uint i = 0; i < textElements.Length; i++)
    {
        textElements.Item(i).AppendChild
             (toastXml.CreateTextNode("Congratulations You Won"));
    }
 
    // Create a toast from the Xml, then create a ToastNotifier object 
    // to show the toast
    ToastNotification toast = new ToastNotification(toastXml);
 
    // If you have other applications in your package, you can specify 
    // the AppId of the app to create a ToastNotifier for that application
    ToastNotificationManager.CreateToastNotifier().Show(toast);
}

Step 5: Add Share Support

One of the coolest things in Metro Application is the Contracts API, the Contracts allow you to work with the shell and with other apps using the WinRT.

For Example: if you want to select a local file, or Tweet something you just need to use the Contracts to send the other program the object you want to share.

So first, create an instance of DataTransferManager and implement the DataRequested event.

private DataTransferManager _dataTransferManager;
 
public MainPage()
{
    _dataTransferManager = DataTransferManager.GetForCurrentView();
    _dataTransferManager.DataRequested +=
        new TypedEventHandler<DataTransferManager, DataRequestedEventArgs>
        (_dataTransferManager_DataRequested);
}

In the DataRequested just define what you want to send to the Share Application, you can also send Bitmap and other stuff depends on your application.

In the below example if the user want to share and is still playing I’ll send the application download link, but if the user won the game I’ll send his score.

void _dataTransferManager_DataRequested(DataTransferManager sender, 
    DataRequestedEventArgs args)
{
    args.Request.Data.Properties.Title = "Metro Puzzle";
    if (_timer.IsEnabled) // If the user didn't finish the game 
    {
     args.Request.Data.Properties.Description = "Share Metro Application";
     args.Request.Data.SetText("Got Windows 8? You Should Download" +
                               " Metro Puzzle – " + Const.DownloadLink);
    }
    else
    {
     args.Request.Data.Properties.Description = "Share Win";
     args.Request.Data.SetText(string.Format("I've just finish Metro "+
           "Puzzle in {0} moves in {1}, think you can beat me? {2}", 
            txtMoves.Text, txtTime.Text, Const.DownloadLink));
    }
}

You can also force the Share UI to appear on demand using the following method:

DataTransferManager.ShowShareUI();

Download Metro Puzzle

How To Deploy It:

Open the solution in Visual Studio and Compile it, or click the Deploy.bat file.

Enjoy