tomorrow's connected future is here today

Project Siena

GOES Satellite Imagery Project Siena App now in Windows Store

 

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.

 

goes1

goes2

goes3

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:

 

aboutpage

 

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:

 

flyouts default js

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.

Using MS Project Siena for Rapid App Development

 

The first truly visual tool for developing Windows 8 apps has emerged from Microsoft. Project Siena (beta) is a Windows 8/8.1 Windows Store App that enables you to create a Windows 8 Store App for Windows 8/8.1 users from a Windows 8.1 or 8.1 RT device. Because it’s a Windows Store app, this means you can indeed use your Surface RT or Lumia 2520, etc. to create functioning apps. It’s a very cool tool and has a very short learning curve. You can read about see how an app is created start to finish and access the complete reference list of supported commands and functions online.

I have been interested for quite some time in creating an app for my photos displayed on my web site, but never found the time to do so in Visual Studio. I decided to see what Project Siena could do for me. I’d been thinking that Project Siena would be a neat way for photographers to deliver customized wedding albums, or even sell their services. Make a few templates, then use them for specific jobs or contracts. Provide them as part of a wedding/photography package etc. to current or possible future clients.

I sat down to try a proof of concept using Project Siena one morning and found it was very intuitive.

The first step was to decide what to display in the app. Since I already had the photos on line, I wanted the app to display the photos from the Internet and not store them locally. I created an Excel sheet for each category and saved each sheet to my SkyDrive storage. Using the photos already available online provides a way to minimize the size of the app and also (after thinking about this for a bit) a way to change out content on the fly. I’ll get to that in a minute. I knew I might need both a list of thumbnails (already on my website) and full size photos (already on the site), so I created a basic template that I could search and replace or paste in the real data.

siena excel

While currently the template uses numbers, my real image names on the site don’t, but the next time I add or change photos on the site, I’m going to rename the images in each category numerically. If I do this, every time I change out a photo on the web site, the change will be reflected in the app. I’ll have to keep the number of photos the same in each category as on the spreadsheet for this to work but it’s an interesting concept. I used this template to create s separate Excel sheet for each category and created a table in each sheet.

The first step in building the app was to import my data sources, and I quickly imported all five Excel sheets.

I wanted the app to look something like my photography website, so I re-used graphics I already had saved. And I selected a color scheme similar to what I use on the web.

siena photo app

I created a screen for each of the five categories and an About screen that is accessed when the name of the app is touched/clicked. On the screen for each gallery, I added navigation (a back button), and specified that OnSelect, it should navigate to the Home screen. Then, I added an image gallery, which I styled the way I thought it should look and specified the corresponding data source which would auto fill the gallery.

build siena

Since I could copy and paste elements between screens, I really only had to style the image gallery on each individual page. So for rapid visual development, this was way cool. And really fast.

A few quick steps to create and style Windows Store icons and Tiles from a single 245×245 px PNG image and I was ready to “publish”. For now, I’ve created an appx file which can be installed from an included PowerShell script, but there are options to run a cmdlet that you can download from Microsoft to turn into a full blown Visual Studio project for publication to the Windows Store (you will need a developer account to do this).

You can download the app from the Windows Store if you’d like to check it out!

Read this blog with my Windows 8 App

Get the App

Categories
Archives