The great garage refresh of 2018

In December I pulled the trigger and ordered a new Tesla Model X. Being more of a computer on wheels than a car with a cool computer and autopilot system, this car speaks to me on a level deeper than I can comprehend. The time from order to delivery was a little over three months, and it became apparent immediately that it would need a worth garage to call it’s home. This blog post is a chronicle of the creation of just such a garage.

Where we Started

The garage had years worth of stuff packed into every corner, and hadn’t seen a car actually parked in it for quite some time. I wouldn’t allow my shiny new car to bake in the driveway, so initially it seemed obvious that a clean-out and maybe some paint on the walls and cabinets was in order.

First Attempt

At first all I really wanted to do was paint the walls and cabinets, and clean up the junk that I had accumulated over the years. As the space cleared out and I went to painting, I started noticing how the cabinets weren’t really in great shape, and were starting to crumble. I went to painting anyway, but realized quickly that there wasn’t going to be much of an improvement. I got through a couple walls, but didn’t even get to painting the cabinets. I knew this was going to become a much bigger project…

Tearing it all Down

The cabinets were garbage. I ripped out all the cabinetry, and then was faced with bare studs that would need some drywall. The garage had previously been a carport, and so the walls it did have were exterior walls or just bare studs. These exterior walls were 1/2″ wood with slats, and I finally broke down and ripped all that out as well. The covering of the uneven wall along the house came out and revealed a door and a window that had been covered over on the other side during a previous remodel. One wall after another, I kept tearing more and more down until I had pulled almost all walls, with the exception of half the wall running along the house, down to the studs.

This slideshow requires JavaScript.

Adding more Power

While the studs were exposed, I added electrical outlets to the outside and back walls, and ran the power line up to the attic. I also added a pair of 8′ LED strip lights which look like fluorescent fixtures to give the room a brilliant white light. This lighting alone was a major improvement both for working in the garage as well as the finished product.

I had an electrician come in to wire up the outlets to a new 20-Amp breaker, as well as wire a new circuit to an 80-Amp Tesla wall charger unit which would live on the back wall of the garage. We had a few surprises – my electrical box is 3-phase, wasn’t grounded, and needed some work to fit some new breakers. We got through it in a few days, but between the Tesla wall charger, parts, and labor the whole endeavor set me back just over $2,000.

This slideshow requires JavaScript.

Building it Back Up

I framed out the half of the previously uneven wall against the house. The garage is notoriously an oven in the summer, so I decided to insulate all the walls and the attic while I had the opportunity. The ceilings are 8′ high, so I initially put in drywall strips vertically (they come 8′ x 4′). About the time I finished I found out that I should be putting a 1/2″ gap between the floor and the drywall, and also using special ‘green board’ drywall which is treated to resist moisture. I ripped all my hard work out and started again with new green board. There were some ceiling gaps that I fixed up along the back wall due to the prior 1/2″ wood boards being thicker than my new 1/4″ drywall.

To mud and tape the drywall together, I hired a professional. That is an art in itself, and I figured for all my work I wouldn’t want to do a bad job here and not get the benefit of clean/smooth walls. Had him mud the entire ceiling while he was in there, to get rid of the prior texture and some other holes and cracks that needed to go. $950 later I had something starting to resemble a legitimate garage again.

This slideshow requires JavaScript.

Finishing the Job

Painting the walls was easy, but painting the ceiling was much more difficult than expected. I stayed up many nights until 2AM just painting, and the excitement as it started to look like a showroom fueled me to push hard. With the walls painted, the floor became an instant eye-sore. It quickly became apparent I was going to need to go all the way and epoxy the floor. The idea of a showroom look had taken hold, so I committed to going with a white color.

The prep work and application of the epoxy floor took as much time as the walls. I ground down the floors with a large grinder rented from the Home Depot. I ground down along the walls by hand using a hand grinder. Then I acid washed the entire garage to prep the concrete. Then I spent hours sealing cracks in the concrete to ensure a smooth surface. This process alone spanned weeks and cost a couple hundred dollars. The actual epoxy (two coats) and associated sealer/hardener (also two coats) cost around $600 and also spanned over a week due to curing time between coats.

The very final step was trim, which I waited several weeks before knocking out. Simple white, pre-primed trim pieces went up in an afternoon, and after a quick bead of silicon caulking I was finally done.

This slideshow requires JavaScript.

Completed Garage Renovation

Overall Thoughts Now that it’s done

At the outset if you told me I would spend over $5,000 to renovate my garage, I likely wouldn’t have started at all. But that’s not how great projects work. This garage is awesome, and makes me happy. Sometimes I go out to my car, stop, and pull out my phone to take a picture or two. It looks walking into a showroom every day. It’s worth it, and I hope for everyone to have something that brings them recurring joy like this. It’s a prefect compliment to the car, which also brings me boundless joy.

For those wondering or hating on the white floor – I mop it once a week and it looks brand new again after three months. The car doesn’t drip random oil or other fluids on the ground, so at worst you end up with some tire tracks after a few days. If you live somewhere rainy, your mileage may vary. In Phoenix Arizona it’s not bad.

Future Stuff

I would very much like to install three of the Tesla PowerWalls and some solar. Beyond the energy benefits, the visual design of those PowerWalls would really look amazing along that red wall in the garage.

I need to build a home for my bike, which is now living in the back yard. It’s covered, but it’s also an expensive machine that shouldn’t be left outside.  I already have some plans for this – look for that in another post soon.

Building a Camera Tally Controller for Spyder

Over this past weekend I set out to create a camera tally device for the Spyder video processor.  Specifically, I wanted to try to use my relatively new Raspberry Pi 2 board running the Windows 10 IoT Core operating system to make something useful.  If you’ve read through my older blog posts, you’ve likely noticed that the Spyder is still my go-to target platform for playing with new technologies.  Let’s face it – when you’re playing with shiny new toys, it helps to mate it up with something you know very well so you don’t feel completely lost.  Before I get into the details, check out this brief video showing a working tally controller in action:

The whole process of building this device was simply fantastic.  The barrier to entry for people making hardware devices has gotten incredibly low over the past couple years, both from a cost and ease of development perspective.  The whole build process was very quick, and I had such a great time with it that I went ahead and put together a full 30 minute hardware and software video walk-thru for the project (more on this below).

Getting Started Making your own

To get started making your own, here are a couple links for the main hardware used on this project, as well as the wiring diagram for your reference.

Raspberry Pi 2 Kit ($70):  Amazon Link
8-Channel Relay Board ($9):  Amazon Link

Tally Wiring Diagram

Hardware Wiring Diagram for our Tally Controller

Links to the full source code, documentation resources, and a full YouTube walk-thru video are below.  This video has a ton of valuable information in there, covering the hardware specifics, Spyder implementation details, and the full process of creating our software application.  This is the first time I’ve gone through and made something this elaborate (and narrated the video), and I’ll be very interested to know what you think of it (so leave me a comment below if you’re so inclined).

GitHub Project (Source Code and Documentation):  Click Here

Next Steps

The tally controller we’ve created is certainly functional. but in it’s initial form the server IP address and tally source lists are hard-coded.  In the next stage of this project, we’re going to build a desktop application that can connect to the device remotely over the network and view/configure these properties.  We’ll also explore creating a user interface to run on the Pi’s HDMI output, which could be useful for monitoring and troubleshooting the device.

Until next time, take a look through those walk-thru video and the resources in the Github repository, and try to make one yourself.  I hope you enjoy going through this content as much as I enjoyed making it.

Garage Door Opener Project: Part 1

So a few weekends ago I decided that I’d like to embark on a fun project of making a network enabled garage door opener.  A few weeks ago I was walking home from a neighbors, and found myself wishing I could open the garage from my phone, or ideally from my Band.  This seemed like enough of a pretense to embark on a new project, and after a few weeks of tinkering I’ve emerged with the following working home accessory:

The Plan

When I started this project, I laid out a few key requirements:

  1. Build an application targeting an existing Wi-Fi enabled Raspberry Pi I had laying around.
  2. Build and debug the application on the Pi, and write it in modern C++.
  3. Setup Git on the Pi, and keep the code up in GitHub.
  4. Breadboard the hardware required to switch the garage light and door.
  5. Integrate a temperature/humidity sensor to allow me to play with garage cooling options over the upcoming summer months.
  6. Add a garage door closure sensor so the device can tell when the door is open or closed, so the app can provide open/closed status back to network clients.
  7. Integrate my X10 Firecracker dongle, to allow me to control my existing X10 outlets/lights

The C++ requirement came partly from a desire to tackle a ‘real’ project with the language using modern language features like smart pointers, and to try out some of the Boost library’s programming constructs for asynchronous networking.  I’ve also been playing around with building basic electronic circuits, and making some necessary hardware for the Pi seemed like a fun time.

The Hardware

It took a while to get the electronics working, and I learned a decent amount along the way (even though there really isn’t much to this).  I started trying to trigger my 3.3v relays directly using the GPIO pins on the Pi, and when that didn’t work I had to go back and figure out that GPIO pins can’t drive the level of current required.  I was also using a shift register initially to reduce the number of pins coming off of the Pi, but it ended up being unnecessary and was eventually removed.

Testing first iteration using shift registers

 

The second iteration two introduced some diodes and transistors, and then I was up and running.  I added a couple momentary contact switches to provide local light and door control, and picked up some DHT11 to do my temperature/humidity sensing.

I put everything together on a breadboard, with a plan to solder everything together and put it into a clean enclosure with my couple of surface mounted switches, but I quickly fell in love with the idea of just putting an acrylic top over it, and mounting the Pi and breadboard together on another sheet of acrylic (spray painted black on the back), as-is.  It has a fun look to it, and that might be what I like about the whole project most.

Second iteration of electronics using transistors, diodes, and opto-couplers

Second iteration of electronics using transistors, diodes, and opto-couplers

The one part that sadly hasn’t made the cut yet is the X10 firecracker.  This is a control device I used to have connected to my PC (back when I had a serial port), which works in conjunction with a wireless receiver to send On/Off power commands to outlets and switches throughout my house.  I found and installed an RS-232 shield on the Pi, but later found out that it doesn’t connect the RTS/CTS lines used to power and signal the Firecracker.  Oh well, I’ll think of something in the future…

The Software

I chose CodeBlocks as my IDE of choice on the Pi, after seeing a few recommendations online for people coding in C++ on the Pi.  I was able to target C++ 11 features, and although it took a while to figure out how to get the Boost libraries to link up to my project, the process wasn’t too bad.  In general, however, I wouldn’t recommend that people try to write code directly on the Gen 1 Raspberry Pi, at least when you’re trying to do it using an IDE on top of x-windows.  It’s really slow, not only when trying to compile (which takes a long time even for trivial programs), but even typing code into the editor is noticeably delayed.  I eventually started writing and testing as much as I could in Visual Studio, and then bringing the code files over to the Pi for final testing and implementation.  For final debugging/testing I eventually ended up editing files using VI over SSH to skip the UI overhead on the PI, and that seemed much more usable.

Running CodeBlocks on the Pi

Running CodeBlocks on the Pi

I have the project checked into GitHub, and you can check it out here.  With any luck I’ll actually come back and check in some schematics for the hardware portion of the application, but for now at least the software is up there in case the Pi dies in the extreme heat of my garage over the summer.

Trying it Out

I was pretty excited the first time I was able to trigger the door and light manually using the new Pi-based controller, and even more so when triggering it from my desk.  The design has two LEDs, one that blinks on/off at roughly a one second interval, and one that lights red when the door is open.

Talking to the garage door using Putty

What’s Next?

In the next post, I’ll cover writing Windows Phone and hopefully a  Microsoft Band apps to talk to our garage door.

Open Source release of C# Spyder control library

The software library used for the Spyder Client for the Windows Store is now available for use as a nuget package (for .Net developers), and the source has been made available up on GitHub.  This library provides an implementation of the documented UDP control protocol, and additionally provides some of the ‘secret sauce’ used by richer control clients.  From the GitHub readme:

Key Features

  • Full implementation of the published Spyder UDP control protocol
  • System Config File parsing – provides full Spyder data object model to clients
  • Drawing Data (live view) data stream deserialization (Supports 2.10.8 – 4.0.4)
  • Spyder quick file transfer procotol (QFT) implementation. List, get, and set files
  • Thumbnail Manager – provides background downloading, multi-resolution scaling, and memory lifetime management of system thumbnail images

Consuming the Nuget Package (.Net Developers)

The Nuget package is the easiest way for .Net developers to consume the Spyder client library, and can be used to target Windows Phone 8.1 or later, Windows RT / Store apps, or .Net 4.5 or later desktop applications.  Get it from Visual Studio using the Nuget package manager (see screenshot below).

Nuget Package Info Page:  http://www.nuget.org/packages/SpyderClientLibrary/

Getting the Spyder Nuget Package

 

Getting the Source

GitHub Project Link:  https://github.com/dsmithson/SpyderClientLibrary

If you want to build the library yourself, peruse the source, or even port it to another platform, head over to GitHub to get access to the source code (link above).  This source uses the Apache 2.0 license, so you can do whatever you want with it.  Please do use the issue tracker or submit pull requests if you have anything you’d like to add or fix, and have fun!

What’s Next?

In future posts, we’ll explore some sample applications that use the library to do common things like control command keys, perform file backup/restore, and possibly even create a display simulator control that works from the Spyder server’s real-time data stream.  I’ll also be working on some general documentation that I’ll post on the GitHub site, so keep an eye on the project’s GitHub page.

Spyder Client for Windows 8.1 – Live Control

One of my favorite areas working on in the Spyder Client for Windows 8.1 was the live view, which not only shows a real-time visualization of the Spyder server’s PixelSpaces, but allows for live interaction and command key creation. While it’s not necessarily new, I thought it would be fun to create a Camtasia video showcasing the live control available from the Spyder Client.  I certainly enjoyed making it, and I hope you enjoy watching it (and using it).

Under the Hood – Leveraging Spyder’s External Control

Internally, the Spyder Client uses the Spyder server’s publicly accessible external control protocol for all control actions performed by the application.  This is for a few reasons, one of the more notable of which is that Windows Store applications do not support .Net Remoting (which is how the Vista Advanced client communicates to Spyder).   If your curious how the Spyder Client is doing something you can simply check out the Spyder server’s logs to see what commands are being executed (see screenshot below).  Just make sure to set the server tracing level to information or success so that the command logs actually appear.  Of course, if you have a specific question, feel free to leave a comment under this blog post.  I’m always happy to help out a fellow coder.

Viewing remote server logs in Vista Advanced

Viewing remote server logs in Vista Advanced

Just in case you don’t already know, the external control protocol documentation is included with the installation of the Vista Advanced client software. If you have Advanced installed, then the external control protocol PDF document is already available from your start menu.

Spyder Client Command Key Visualization

My favorite feature in the Spyder Client for Windows 8.1 is the command key thumbnails it displays.  These thumbnails are smart, in that they combine the live look on screen with the expected execution plan for the command key, resulting in a true thumbnail preview of what the screen(s) can be expected to look like after the command key has executed.  In the video below, I give you a quick overview of this feature in action.

First App in the Windows Store (Yes it’s another Spyder Client)

Historically, when I’m taking a new platform or development tool out for a spin, I end up creating a control client for Spyder.  It’s nice to be able to work against a well-known and well-understood platform, so you can focus on the new and exciting stuff.  In this case, which is no exception, I fired up a Windows Store application targeting the Windows 8.1 platform.  In all truth, I think I started this about 5 months ago, however the project didn’t make real traction until the week of Christmas this year (which I took off from work).  I put forth a hard goal of getting the application into the store by the end of that week, in hopes that I wouldn’t aimlessly squander away my week at home.  At the end of the week, a new application had indeed been introduced to the store, and while it’s pretty ‘fresh’ I’m proud of the results so far.

Check out the app’s official page on this site here

Check out the app and download it from the Windows Store here

Feature Set on Day One (What’s there and what isn’t)

Getting something into the store on a compressed timeline is tricky, and there are always a lot of features that get dropped.  I’ve been reading The Lean Startup, and one of the concepts reiterated regularly is the concept of getting something out there early to collect feedback to iterate against.  Waiting too long for something to be perfect (which isn’t a real thing) means that you can spend an inordinate amount of time working on features that people don’t care about.  This is pure waste, and in a project like this where all development is happening in my free time, there simply isn’t time for waste.  All that being said, here are the features as they exist on day one, and my current view of where they could go in the future.

Note that this is my list, and I’m providing it to you in hopes of hearing some of your feedback.  Tell me what is and isn’t important to you, and together we’ll be able to make this app better.

Main Screen

 

Home Screen

The main screen is the landing page for the application when opened, and displays all servers available on the network, each with a thumbnail sized live view and launch buttons to command keys, function keys, and still image pages.  The functionality is pretty straight forward, so I won’t list out what is there in more detail here, but there are a few things that I would really like to see go into a near future version of the application:

Planned Main Screen / General App Features

  • View of system health / user diagnostics (with launch button to a health screen)
  • Ability to select any of the buttons and open their associated pages in a new window, allowing multiple views to be displayed simultaneously.  This could be a big deal for multi-monitor users, and opens up more complex control and monitoring scenarios for even single monitor users.
  • Sources view / list, showing thumbnails and tally status.  Used in combination with the previous feature bullet, this could allow for drag-drop support onto the live view

Live View

Spyder Client - Live View

This is effectively a display simulator view, designed to give a real-time view of the system’s PixelSpaces and layers using thumbnails pre-configured in Spyder.  Creating a full-featured simulator brings a number of complexities, and this control is very primitive by the standards of the simulator in Vista Advanced.  The live view control will undoubtedly be the benefactor or the majority of near future development work as a result, and to get the most bang for the buck I’ve re-used this same control to provide thumbnail visualizations for command keys and the thumbnail view on the main page.

Live View Features on Day One

  • Preview / Program PixelSpaces
  • Solid Color Borders with bezel luminance offsets
  • Thumbnails for PixelSpaces and Layers
  • Smooth motion views of layers and background transitions

Planned Live View Features

  • Full bitmap borders and shadows
  • PixelSpace Stackups (different view configurations for PixelSpaces)
  • Layer number indicators
  • Interactive control (layer pinch resize, reposition support)
  • Drag/Drop support for sources / stills

Command Keys View

Command Keys

The live thumbnail view within the command keys page is (in my humble opinion) the most interesting feature within the application.  This works extremely well at showing what-if scenarios for recalling relative command keys, but is very limited today by the general render capabilities of the live view control used to generate thumbnails.  I don’t think I can understate this; the renderer is pretty feature light and falls down quickly when showing more than the most basic of looks.  As stated previously though, this will gain all the development benefit of work applied to the live view, and so I think it’s only a matter of time for this to get flushed out.

Command Key Features on Day One

  • Displays user defined register colors for command keys
  • Groups buttons by existing user defined pages
  • Live generated preview of ‘Program’ (Cue 1) look for command key
  • Absolute / Relative Indicator
  • Preview / Program tally indicators

Planned Command Keys Features

  • PixelSpace stackup switching
  • Ability to turn off live view integration with thumbnail previews.  Not sure if anyone would actually want this feature – seems to me like once you have a feature like this you would never want to turn it off (would love your feedback)
  • Option for different button sizes to condense more command keys onto the screen
  • Pinch zoom support to jump between pages quickly
  • 320 pixel wide snap view support
  • Link to a full script grid view showing all command key cues with individual thumbnail previews.  I have a lot of thought into this, and will probably need a blog post all it’s own to describe further.

Stills View

Stills Viewer

The stills view came about early on as a side effect of needing to validate the image file processor / transport software, but was handy enough to keep around.  The Advanced client has the ability to obtain thumbnails from the server in a round about way (once you’ve seen them in the simulator they are cached locally in the ‘C:\Spyder\Images’ folder on your PC).

Stills View Features on Day One

  • View all Still images defined in the Still registers list on the Spyder server in thumbnail form
  • View a full screen view of all images by clicking a thumbnail
  • Ability to save image files locally via the app bar
  • Ability to share one or more selected images using the ‘Share’ charm in windows

Planned Stills View Features

  • Native shape file viewer (custom bitmap border shapes)
  • Native shape file creator, with the ability to simply draw a shape on screen and have it saved onto the Spyder server as a shape file.  This would have the ability to load an image into the background to be used as a stencil, and additionally preview the resulting shape at a number of different source aspect ratios.
  • Different thumbnail sizes to show more thumbnails on the screen at once

Function Keys View

Function Keys

I think the Function Keys view is off to a good start; it works (which helps), and it’s approach of showing a very brief text description of it’s execution action makes it easy to see what the button will do before you actually press it.  An interesting note about function keys:  the Spyder data model actually has support for custom register colors for function keys, but this is not brought forward into the Vista Advanced interface.  The Spyder client has support for displaying custom register colors as it does in the command keys view, and so this will auto-magically start working if this becomes implemented in Advanced in the future.

Function Key View Features on Day One

  • Display of Function key names
  • Display of the type of command key
  • Short text describing the action which will be performed when the key is executed (limited to one line of text, may be clipped depending on things like the number of layers affected)

Planned Function Key View Features

  • A pseudo-tally feature which would evaluate the state of the system and show a red tally indicator if the function key appeared to be in it’s executed state.  An assign source function key, for example, would show a program tally indicator if it’s associated source was already assigned to it’s target layer(s)
  • Relative layer recall support.  Function keys with relative layer/device assignments require the layer/device IDs to be specified at the time of recall, and currently there is no way to provide these when executing a relative function key from the Spyder client.
  • Option for a more compact view of buttons to display more function keys on the screen at once
  • Pinch zoom to quickly navigate between pages

Again, the planned features are on my wish list based on what I think would be great additions.  It’s entirely possible that I’m missing the boat on functionality that I’m just not thinking about, and if you think that’s the case then I’d like to hear from you.  Please leave your comments on this post, and in general let me know what you think of the app.

In a future post I’ll talk about the back-end development, project management, and source control technologies, and possible future directions for the platform.

 

The Useless Box

You know, I’d argue that a box that makes you smile hardly qualifies as useless.  Nevertheless, today I finished assembly on the self named ‘Useless Box’ by solarbotics.com.  This black acrylic box has a single switch on it’s top, which when flipped, turns on a motor connected to a ‘finger’ which pops up and flips the switch back to the off position.  I’ve found myself flipping it on at my desk almost instinctively throughout the day, and it makes me smile every single time.  It’s just simply great.  Take a look at the video to get a better idea of what we’re talking about here.

 Assembly

Assembling the useless box is not hard, but it is a little time consuming, and does require you to solder a small amount of stuff together.  Honestly I think I spent half as much time peeling the protective brown paper off all the parts as I did doing the rest of the assembly.  Here is how your useless box arrives:

Raw materials for a Useless Box

Raw materials for a Useless Box

The assembly breaks into four or five steps, each taking about an equal amount of time.  The instructions estimated 1.5 hours for the full build, but it took me more like 2.5 hours (yes I’m slow).

Build Steps:

  1. Remove all the damn brown protective paper from the acrylic parts.
  2. Solder together the electronics.
  3. Assemble the main box.
  4. Disassemble and then re-assemble the box after you figure out that the piece holding the motor needs to be mounted as the rest of the box is being put together.
  5. Mount the electronics in the box, adjust for fit, and then test!

The electronics harness would have been much easier if I still had a vice to hold the parts in place while trying to solder, but a little scotch tape did the trick in a pinch.  Below is the finished electronic harness and the box parts all laid out:

Assembled electronics harness and box parts

Assembled electronics harness and box parts

And here is the finished product:

Useless box assembled product

Useless box assembled product

Call to Action: Go Buy One

This thing is fun, and is worth plunking down some cash for.  I’m sure you can get it at a number of places, but mine came from ThinkGeek, which is a site I believe you should be giving your money to anyway.  Below is the link; you’ve seen it in all it’s glory, now take one home for yourself.  It’s great for your desk at work and your home, so maybe get two…

Go buy the Useless Box at ThinkGeek

 

Making a great desktop PC from your Surface PRO

Microsoft’s Surface PRO is a great tablet / laptop device, but for me a problem has always been transitioning away from my home desktop during travel onto a mobile device.  Compounded with the sheer number of PC/Tablet/Laptop/Ultrabook devices I have going, it’s a recipe for pain.  Well friends, there is good news; I found a  Targus USB 3.0 docking station on Amazon which allows you to connect up to 3 additional monitors to your Surface PRO (or other USB 3.0 capable ultrabook / laptop), and it works great!

Targus USB 3.0 Docking Station (ACP70USZ)
http://www.amazon.com/Targus-Docking-Station-Ultrabooks-ACP70USZ/dp/B005YR1PV2

Surface PRO Desktop

I’ve already torn down my old home PC, and moved to using this as my main home desktop PC.  It’s slick – runs faster than the AMD based desktop it replaced, adds a third touch-enabled screen to my traditional dual-monitor setup (nice development plus), and when it’s time to take it with me I just disconnect power and a single USB cable.

Some Windows 8.1 Specific Nice-ities

Natrually since it’s shiny and says Microsoft, I’m running the preview of Windows 8.1 that came out a week or two ago.  This adds some really nice benefits for this Surface desktop of scenario over previous versions of windows that I thought I’d take a minute to mention.

Note:  If your running Windows 8.1 with the Targus docking station, you’ll need to visit the displaylink.com website to download new drivers for the external displays.  Luckily they had drivers for 8.1 within a week of the preview being announced – kudos to them!

First off, it supports independent scaling ratios for each of the monitors, which is a big deal when you have a high DPI device like the Surface PRO connected with some standard 96 DPI monitors.  With all previous versions of windows, stuff would either look really small on the surface PRO or really big on the other monitors, depending on which scaling option you set for Windows.  This is nice addition to Windows, and it works really well in practice.

Secondly, and in my opinion more importantly, it expands support for more Windows store / metro style  / modern apps running concurrently on your desktop, at user definable sizes.  No more single store app with maybe one more snapped to the left or right of that app.  Now you can have multiple store apps running side by side and resize them as you like, and you can even have store apps on each of the different monitors.  Apps can even open other apps in new ‘windows’ or add additional window instances of their own app (think new windows for tabs in IE).  This is another great addition, and I think that with this the Windows Store style applications will become naturally interwoven in people’s daily desktop usage.

Overall I’m super excited about this setup, and I recommend it to everyone.  Be aware that Windows 8.1 is in preview and does have some quirks, so if your not into the pre-release scene (don’t feel bad just because I think your weird) then wait until the August RTM.

Vista Advanced broken (and fixed) when running high DPI displays

I recently became the proud owner of a Microsoft Surface PRO device, and was shocked to see that our main software application Vista Advanced looked absolutely horrible!  It felt like half of the UI was tiny, and the other half was massive in size.  The Splash screen graphic was even bad, having been drawn in a tiled display.  Take a look at this first-run / out-of-box experience on the surface running the latest release (4.0.1 at the time of this writing):

Splash screen background image wrapping

Splash screen background image wrapping

Oversized controls and UI elements make the app usability pretty rough

Oversized controls and UI elements make the app usability pretty rough

The Problem

The problem, it turns out, has to do with the application’s UI frameworks detecting the selected resize mode for the OS (set to 150% scale by default on high DPI devices like the Surface PRO), and scales up the bitmaps and fonts accordingly.  The really annoying part is that only some of the UI elements are affected by this, and this is due to a combination of different technologies and control libraries being used together to put Advanced together.

The Workaround (read: Hack)

There is a work-around to allow existing versions of Vista Advanced software to look normal on your high DPI device, and the way to do this is to open display resolution in control panel and look for the link that says ‘Make text and other items larger or smaller’.  That link will bring you to the dialog below, and from this dialog set the size of all items to 100% (Smaller).  This affects the entire OS, and has the additional requirement of needing you to log out and back in before the setting will take effect.   This is certainly far from ideal, but in a pinch it’ll at least get you by.

Use display settings to change the default size of items to 100%

Use display settings to change the default size of items to 100%

The Real Fix

Modification to AssemblyInfo.cs to disable DPI awareness

Modification to AssemblyInfo.cs to disable DPI awareness

Luckily there is a simple software fix for this problem that we were able to put in place. Inserting the DisableDpiAwareness attribute at the main application’s assembly level will disable the DPI scaling that happens on these high DPI devices, causing our application to render the same size on all computers.  Setting this attribute immediately brings the application back into it’s normal look and feel:

Normal looking splash screen after setting DisableDpiAwareness

Normal looking splash screen after setting DisableDpiAwareness

Normal Advanced application look after setting DisableDpiAwareness attribute

Normal Advanced application look after setting DisableDpiAwareness attribute

Now with this fix, you can see Advanced looks as one might expect it to look again, and without the user having to make any screen resolution hacks to do it.  You’ll see this fix in the next beta version of software (0.55.8), which will roll into version 4.0.2 for those of you who wait for release builds only.