Simulating Surface Pro 3 in the Simulator

I’m working on a project at the moment that needs to run on a Surface Pro 3. During testing there were some weird redraw issues that only appeared on the Surface 3.   We were unable to reproduce this in our dev environments because  the simulator that comes with Visual Studio doesn’t have a screen size that is compatible with the Surface 3.

For reference, the surface 3 has these specs:

  • Screen Size: 12″
  • Resolution: 2160×1330
  • Scaling Factor: 140%

But fortunately, it turns out you can actually create your own profiles for any device you want in the simulator. Basically you just create an XML file to describe the screen settings and then put into a directory to be picked up by the simulator when it starts.

Step 1: Create a xml configuration file that describes the resolution

It should look like this (the content is pretty self explanatory):

<?xml version="1.0" encoding="UTF-8"?>
<ArrayOfHardwareConfiguration xmlns:xsd="http://www.w3.org/2001/XMLSchema"
                              xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <HardwareConfiguration>
        <Name>12-2160x1440</Name>
        <DisplayName>Surface Pro 3 - 12" 2160 x 1440 (3:2, 140%)</DisplayName>
        <Resolution>
            <Height>1440</Height>
            <Width>2160</Width>
        </Resolution>
        <DeviceSize>12</DeviceSize>
        <DeviceScaleFactor>140</DeviceScaleFactor>
    </HardwareConfiguration>
</ArrayOfHardwareConfiguration>

 Step 2: Put the file in a location for the simulator to use it

The file name needs to start with HardwareConfigurations. For example, HardwareConfigurations-Surface3.xml

Put the file in the directory:

C:\Program Files (x86)\Common Files\Microsoft Shared\Windows Simulator\12.0\HardwareConfigurations\

(You may need to create the HardwareConfigurations directory).

Step 3: Win!

Restart the Simulator, select the new device and you’re good to go!

ScreenSizeMenu

 

First Metro Style Windows 8 App Using Javascript HTML5 and CSS

I just got around to building my first Windows 8 Application using Javascript, HTML and CSS.

It’s a image viewer which queries Flickr for pictures of beards.  It also incorporates live maps to show geolocation information attached to the  photos.  Why beards?  Because these days beards are becoming the “badge of the hipster” and hipsters must be eliminated.  So I figure this would be a useful tool to identify and locate potential hipsters. 🙂 Continue reading…