The Connected Home

I’ve been using Microsoft Project Siena (beta) for rapid app development and am really excited about the possibilities this tool holds for the future. Project Siena is a truly visual tool that lets you visually construct apps and bind data in the background so you can design and preview in real time from a single interface. It’s a whole lot easier than coding in Blend or Visual Studio, and a whole lot faster. A week or so ago, I decided to build an app that displayed the real time available Doppler Mosaic animated images from NOAA, with a future goal of adding the individual 155+ individual stations in the USA. I sat down over the past weekend and added the individual stations, by sector. Release 3 of my NOAA Doppler Radar Mosaic Imagery app is now available in the Windows Store.

It was a lot easier to add the individual stations that I thought it would be. I had to massage some data from NOAA, create some Excel tables and set up some galleries. Finding the animated images and creating the Excel workbooks was actually the most time consuming part of the project. Once I had decided on how I wanted to display the data (images), actually building this out took very little time.

So what’s in my major update?

For readability/usability, I changed the background graphic. Should be far easier to read any text in the app.

OK, that isn’t so major. What IS major is that I added all available 155+ local Doppler stations and current animations to each applicable mosaic sector, displayable as a gallery. Below is the Northeast Mosaic Sector display.

So from each individual sector, simply select either the pushpin map on the left or the text below it. The stations in the Northeast sector (or for whichever of the 12 sectors you display) are presented in a scrollable format so that you can visualize the details. City names are also shown, making it easier to understand.

NOAA refreshes the images every 4-10 minutes, so each time you launch the app, you will see a nearly real time animated Doppler radar display.

Living in New England, I’ve always watched storms come across the country or up from the South and visited several sources on the web to see what the Doppler radar looked like. I hadn’t yet found a Windows Store App for Windows 8 that provided all this functionality, so I sat down with Microsoft Project Siena and went to work. I came up with an idea that I liked and the second release is in the store (you can download it here).

NOAA divides the USA into a “mosaic” and produces nearly real time updating animations for 12 mosaic sectors, like 12 tiles.

The entry point for my app is a representation of the mosaic with options to select a tile to view that particular sector or view all of them as a gallery that is swipable/scrollable:

If you view a sector, a larger image displays, showing animated Doppler radar:

Gallery view as you swipe:

Release 2 adds some About/Learn more screens to provide the explanation for the colors and the measurements:

My next plan enhancement for future releases is to drill down from the individual sector to tiles to the stations within it and present animated Doppler loops in a scrollable gallery. This will provide a close up view. (The image below is not animated, but you get the idea.)

While Microsoft Project Siena is still in beta (and I hope that some missing functionality and enhancements will arrive when it reaches GA), I decided to take some time to create an app to publish to the Windows Store. I’ve always followed the latest GOES satellite maps from NOAA, but have not yet found a Windows Store App that displays this information. I realized that using the same functionality I used to build my Barb Bowman Photography App (I’ve submitted that to the store now as well), I could quickly build exactly what I wanted.

So I created my GOES Satellite Imagery App. Basically this app displays the satellite images (that change about every 30 minutes or so) and includes animations when available.

Instructions for converting a Siena app to a Visual Studio Project are available from MSDN. I made a few detours from the supplied instructions and opened the processed app in VS2013 even though the instructions state NOT to do this and specify VS2012. I suspect that this is to prevent people from trying to target Windows 8.1 which Project Siena does not support. (I hope this changes in the future, but for now, targeting 8.0 is fine since the app will run on both versions).

I checked the package.appmanifest and removed all the items from the Capabilities tab except Internet (Client) since my app does not need or use the other items that were checked by default. I designed a different set of visual png files to be used for the Splash Screen, Store logo, Wide Logo etc. and imported them into the images folder inside the project (right click the folder, Add, existing item) and then changed the entries on the Visual Assets tab in the appmanifest accordingly. Because the Project Siena generated app has no support for Portrait mode (I hope this is coming soon), on the Application tab, I checked both landscape items but NOT the portrait items.

I wanted to have both a Privacy flyout  (supplied by Project Siena by default) and an About flyout to be available from the App Settings Charm, I created the about.html page. For both the Privacy and About flyout pages, I wanted to tweak the pages to reflect the color styling of my app and add a logo that represented my app for a professional finish; I added a specific color reference and added an image (30px square) as well and specified it’s position and location. You can see the altered annotated code below:

To enable both flyouts to appear in the Charms, Settings menu structure, I edited default.js in the js folder slightly to enable both flyouts:

My GOES Satellite Imagery app is free and available in the Windows Store for US, CA, UK, and AU. Take a look and tell what you think on Twitter @barbbowman.