Customizing the Windows Phone 8.1 ‘Project my Screen’ app

I find I’m really liking the new Windows Phone 8.1 ‘Project my Screen’ feature. This feature enabled the projection of the handset to a secondary screen via wireless Miracast (newer handsets only, as it requires special hardware) or a wired USB connection. This is great for presentations and demos. It even works in the opposite direction: you can remote control your phone by interacting with the projection using your mouse or your touch screen! Also great is that it has support for displaying multiple touch points, so your audience can actually see where you touch your device. Great stuff!

If you haven’t already, I suggest you give the feature a try yourself. Microsoft’s Cliff Simpkins has done a great writeup on his blog on getting this thing to work.

In order to use the ‘Project my Screen’ feature on your Windows PC, you have to download and install the official ‘Project my Screen’ app. By default the app shows a pretty boring image of a nondescript Windows Phone, much like the Windows Phone SDK emulators do. Fortunately Microsoft included the ability to customize the appearance of the app, so it may suit our own needs. Here’s a short video that shows a quick customization I made using the application:

As you can see I’m using a custom background image featuring the Cortana logo. Also the projected phone’s skin matches my real phone (a yellow Nokia Lumia 920). Let me tell you how I did that:

If you look inside the ProjectMyScreenApp’s installation folder, which by default is located at C:\Program Files (x86)\ProjectMyScreenApp, you’ll notice there’s a file called config.xml. This is a XML configuration file that can be used to alter the appearance of the app. By default it’s not used by the app, though. To use it you need to explicitly launch the application with the configuration file passed in as a parameter. To complicate things a little further: in its original state the configuration file doesn’t work. It refers to images that don’t exist in the installation folder (they do exist, but are embedded as resources inside the application’s executable). So you HAVE to alter the config.xml (or create your own file based on it) to get it to work.

So, how do we configure this thingy? Fortunately the config.xml file itself contains instructions on how to use it. The basic structure of the file looks like this:

<?xml version="1.0" encoding="utf-8"?>

<Config>
  <PhoneConfigurations>

    <PhoneConfiguration>

      <Background />

      <PhoneImage />

      <VideoOutput />

      <!-- <TouchDots /> -->

    </PhoneConfiguration>

    <PhoneConfiguration>
    .
    .
    .
    </PhoneConfiguration>

  </PhoneConfigurations>
</Config>

The supplied config.xml file contains PhoneConfiguration elements for five different resolutions: WXGA (768×1280), HD1080 (1080×1920), HD720 (720×1280), WVGA (480×800) and FWVGA (480×854 with the new on-screen soft buttons). I suppose you can add additional resolutions as devices are released, but I’m currently not able to test this. The application will start up with a default configuration (which you can define; see below). When you connect an actual device and allow screen projection the application will switch to the configuration that matches the connected device’s resolution.

Each PhoneConfiguration element has three attributes. The resolutionX and resolutionY values are used to specify the resolution that this configuration belongs to. The default attribute is used to specify whether this is the default configuration to use when no device is connected.

<PhoneConfiguration
    resolutionX="768"
    resolutionY="1280"
    default="true">

For each phoneConfiguration section we can configure three settings: the background image, the phone’s skin and the size and placement of the projection. Actually, there is a fourth element, touchDots, that’s present in the file, but I couldn’t get it to work. I suspect it should be used for configuring the appearance of the dots that appear when you touch your device, but it didn’t seem to respond to changes I made to it.

Let’s go into detail about each element:

The Background element controls the application’s background. The entire app background will be filled with the specified color. On top of that you can place an image that will also be scaled to fit. Note that using a background image is optional. If you only want to use the solid background color, you still have to add the imageRelPath attribute, but just give it an empty (“”) value.

<Background color="0x00000000" imageRelPath="Cortana.png" />

Using the PhoneImage element you can control the appearance of the on-screen phone (i.e. the skin). The imageRelPath attribute specifies the path to the image to use. For my demo video I used one of the official Nokia Lumia 920 press images that I downloaded from the Nokia Press media library. I cropped the image, so it didn’t have any border, and saved it as a PNG. You need to specify the path to the image relative to the ProjectMyScreenApp’s executable file. The easiest way to do this is by adding your image file to the application’s installation folder, so you only need to supply the filename without any additional path information.

Lumia 920 skin

The scaleFactor attribute specifies the scale factor of the phone image as a fraction of the background image’s width or height, whichever is more constrained. If no background image was specified, the app window’s dimensions are used instead. I used a value of 0.9, so the phone is nice and large, but doesn’t go edge to edge.

Using the centerOffsetX and centerOffsetY values you can position the phone image relative to the background image. I’ve used this to place my phone on the right side of the screen, so it doesn’t obscure the Cortana logo of my background image. Interestingly, if you didn’t supply a background image, these values are ignored and the phone is always displayed in the center of the application’s window.

For devices that have physical buttons we can configure the location of the Back, Windows and Search buttons. For each button you need to supply the coordinates of its bounding box. This way the application can determine which button to press when you click on the skin image with your mouse/touch screen. The backButton, windowsButton and searchButton attributes accept a value that consists of four numbers that represent the left, top, right and bottom coordinates of the hardware back, Windows and search buttons.

Here’s my complete phoneImage section:

<PhoneImage
    imageRelPath="Lumia920-2.png"
    scaleFactor="0.9"
    centerOffsetX="350"
    centerOffsetY="0"
    backButton="128,2357,400,2600"
    windowsButton="610,2357,900,2600"
    searchButton="1160,2357,1370,2600"
          />

Next up we need to specify the location of the video output using the videoOutput element. Using the topLeftOffsetX and topLeftOffsetY you specify the top left coordinates of the video image. Unfortunately you cannot specify the width of the video window. Instead you have to do some math and calculate the weight value, which is defined as being ‘the width of the video output as a fraction of the phone image’s width’. So we need determine the width (in pixels) of the phone’s image display as it appears in the skin image (i.e. the bounding box where you want to projection to appear) and divide that by the total width of the skin image. For my Lumia image that results in the following formula: 1273 / 1535 = 0.8293159609120521.

Here it is:

<VideoOutput
     weight="0.8293159609120521"
     topLeftOffsetX="125"
     topLeftOffsetY="233"
          />

So the complete phoneConfiguration section for my Lumia 920 skin looks like this:

<PhoneConfiguration
    resolutionX="768"
    resolutionY="1280"
    default="true">

  <Background color="0x00000000" imageRelPath="Cortana.png" />

  <PhoneImage
      imageRelPath="Lumia920-2.png"
      scaleFactor="0.9"
      centerOffsetX="350"
      centerOffsetY="0"
      backButton="128,2357,400,2600"
      windowsButton="610,2357,900,2600"
      searchButton="1160,2357,1370,2600"
        />

  <VideoOutput
      weight="0.8293159609120521"
      topLeftOffsetX="125"
      topLeftOffsetY="233"
        />

</PhoneConfiguration>

Now launch the ProjectMyScreenApp using the config.xml file as an input parameter. One way to do this is starting it from a Command Prompt window like this:

C:\Program Files (x86)\ProjectMyScreenApp>ProjectMyScreenApp.exe Config.xml

You can also create a Shortcut with the parameter passed in. The ProjectMyScreenApp should start in full-screen mode. You can press the [ESC] key to switch to windowed mode.

ProjectMyScreenLumia

You can download my sample Lumia 920 files here. Just unzip the files into the ProjectMyPhoneApp’s installation folder (consider making a backup of the original config.xml file, just in case). As a bonus I’ve extracted the default phone images that are contained within the ProjectMyPhoneApp executable and added them too.

Please note that if you connect using a device that has a different resolution than my Lumia 920, you won’t get to see the custom stuff I mentioned above. Instead the ProjectMyScreenApp will use one of the other phone configurations and I didn’t bother changing those.

Maybe someday someone will create a nice tool that assists in creating the config.xml and/or the image files, just like Geert vd Cruijsen has done in the past with his Windows Phone 7 Emulator Skin Switcher application. Or maybe we can build a repository of compatible skin images. I’m even willing to host/link to them from here.

In any case: have fun! You know I am 😉

Posted on April 25, 2014, in windows phone and tagged , , . Bookmark the permalink. 15 Comments.

  1. I just found your site and am loving it! Do you know if you can do a full screen projection where there are no skins showing at all? I want to see if I can do a full screen landscape mode w/ no skin and use a skin for portrait. Also, I was unable to control the phone with the pc mouse or touchcreen – any ideas? Thanks!

    • As I’ve written in this post, you don’t need to use a phone image. You can just use an empty (“”) value. Or even use a phone image that’s filled with one color, preferably matching the background color you use. From tests I did it looks like the application currently doesn’t support PNG’s with transparency. You can use the scaleFactor to scale the phone to your screen.

      As for not being able to control your phone from the app: I don’t know. It worked for me.

  2. Please make a tutorial how to make the shortcut please, i cant make it run the config.xml file please helpp

  3. Hi Leon. I could understand whole process, but still I do not know where you get the values for the Back, Windows and Search buttons.

    For your Lumia 920 you placed this:

    backButton=”128,2357,400,2600″
    windowsButton=”610,2357,900,2600″
    searchButton=”1160,2357,1370,2600″

    Could you please tell me how did you get those values?

    There’s a part where you say: “For my Lumia image that results in the following formula: 1273 / 1535 = 0.8293159609120521.”

    Where did the value 1273? The image png from your lumia is 1535×2816 pixels. What does 1273?

    I have a Lumia 520 and understood many of the things that explain here, and I want to customize ProjectMyScreen, but as I said before, not know yet where you got the values for buttons. Please I ask your help to customize the app.

    Thank you for your tutorial 🙂

    • Thank you, Diego!

      The values for the buttons are their respective bounding boxes, defined by a top-left and a bottom-right XY-coordinate. So for the Back button I defined a bounding box that has its top-left corner at (128,2356) and its bottom-right corner at (400,2600). You can determine these coordinates by opening the image in an image editor. Often when you hover your mouse over the image, the status bar will display the current mouse pointer coordinate, relative to the image.

      The 1273 value is the width of the phone’s display as it appears on my phone image. As you can see my phone image has a large transparent/white box where the display should be. 1273 is the width of this box.

      I hope this helps you create your own config.xml!

      • Hi Leon. I think I’m understanding what you just explained me. Thanks, but still there are three things I want to know:

        1- Where did you get these values to the video output?
        topLeftOffsetX=”125″
        topLeftOffsetY=”233″

        2- What image editor you used to find the coordinates (x, y) buttons and cut the image of your Lumia 920? I do not trust Paint

        3- I have an image (in PNG format) from my Lumia 520 and its size is 576×1088 pixels. Do you think the size is right or I have to enlarge the image?

        Thank you very much for your help 🙂

  4. Hello again Leon, forget what I said. What I want to know is:

    What image editor you use? and,

    You had to create a .bat file to run the application with changes made in the XML file?

    That’s all. I hope your answer, thank you for your help.

    • Hello Diego,

      I mostly use Adobe Photoshop for my image editing work. If you want a good free alternative, I’d point you to Paint.Net (http://www.getpaint.net/) or GIMP (http://www.gimp.org/).

      You don’t need a .BAT file to run the application with the XML file. You can open a Command Prompt and execute it from there. I think you could even drag/drop the XML file onto the ProjectMyScreen app’s icon. In any case, you need to specify the XML file as a parameter to the executable at launch. There are multiple ways to do this. Just choose one.

      • Hi Leon. I was able to customize the app Project My Screen with your post, thank you very much friend. 🙂 Hey, you say: ” you need to specify the XML file as a parameter to the executable at launch” Well, I’m not a advanced user, I made only a .bat file to run the app, but I do not know how to specify the xml file as a parameter. :/

        You can teach me how you did? Please

        Thank you very much for your post 🙂

      • I literally explained this in my post. You pass the filename of the XML file as a parameter to the Project My Screen EXE. So open a Command Prompt, navigate to the Project My Screen app folder and type:

        C:\Program Files (x86)\ProjectMyScreenApp>ProjectMyScreenApp.exe Config.xml

        In the above statement “Config.xml” is passed as a parameter. What don’t you understand about that?

  5. Hi Leon.

    In the article there is a part where you say: “Now launch the ProjectMyScreenApp using the config.xml file as an input parameter. One way to do this is starting it from a Command Prompt window like this: C:\Program Files (x86)\ProjectMyScreenApp>ProjectMyScreenApp.exe Config.xml” Well, by doing that it appears that you can see here (even running it as administrator) http://i.imgur.com/i5917To.png The image says: “C:\ Program” is not recognized as an internal or external command, program or executable batch file.

    On June 2, you say: “I think you could even drag/drop the XML file onto the ProjectMyScreen app’s icon” Well, by doing that it appears that you can see here: http://i.imgur.com/tfgsHsi.png When I put this C:\Program Files (x86)\ProjectMyScreenApp>ProjectMyScreenApp.exe Config.xml in the address bar inside the folder of the app, appears that you can see here: http://i.imgur.com/D3t8yuS.png
    The warning says: Windows does not find “C:\Program Files (x86)\ProjectMyScreenApp>ProjectMyScreenApp.exe Config.xml”, Check the spelling and try again. I’ve done everything that you said, as you could see in the pictures, but I only get warning messages. As I told you before, I do not know how to specify the xml file as a parameter. :/ What is it that do I need? what is it that am I doing wrong?
    Please, I await your reply soon.

    Thank you very much for your post 🙂 I’m really grateful to you.

    • Diego, it seems you are missing some basic Windows command-line skills 🙂 If a path contains space characters, you need to put quotes around it. So the full command-line would be:

      “C:\Program Files (x86)\ProjectMyScreenApp>ProjectMyScreenApp.exe” Config.xml

      Notice the quotes around the exe’s path, but not around the parameter. It might even be necessary to suppy the full path to the config.xml file. If that path also contains space characters, you need an additional set of quotes around the parameter, like this:

      “C:\Program Files (x86)\ProjectMyScreenApp>ProjectMyScreenApp.exe” “C:\Path with spaces\Config.xml”

  6. I downloaded your files and tried it because editing the values is way over my head without an example to go by, but your file won’t load, it keeps giving me parser error messages. My website link is to an image of the error message. Top message is when I run with xml, and the bottom is when I drag and drop the xml to the exe file. Please help 😦

  1. Pingback: Кастомизация приложения Project my Screen для Windows Phone 8.1 | Программизм

  2. Pingback: Customizing the Windows Phone 8.1 ‘Project my Screen’ app

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: