If I haven't mentioned it to you before, the Guide system is micro-prompting assistive technology which helps people to complete the tasks of daily living. It allows you to create a flowchart detailing how to talk a user through completing a task. Guide gives prompts and asks questions via speech synthesis. Users answer yes or no as they progress through the problem space. Guide ensures that the user sequences the task correctly. Guide helps users to live independently without the need for human help when completing tasks such as the morning routine, making tea, or using the washing machine.

Anyway, at the moment the Guide system is a cross-platform mobile app which runs on both iOS and Android devices. It downloads the activities from the server, and uses local voice recognition on the device, so that it can work in an offline environment. Users can also schedule the activities on the device, for example the morning routine can kick in at the same time every day.

You can sign up for Guide and download the Android app for your device to try it out (you'll need to get in touch if you're on iOS).

Our original assumption when we built this iteration of Guide was that not all users would have reliable internet connections. That is why we decided to use offline voice recognition. This assumption now seems out of date. With the advent of the new voice-activated devices like the Amazon Echo and Google Home, it seems that voice has truly arrived into people's homes.

This is why we have our eye on the Alexa system for the next iteration of Guide. We could leverage the excellent voice recognition capabilities of the device, which are constantly being improved by Amazon. So as a first step I've created a skill to demonstrate Guide on Alexa so that we can prove it works and see how users like it. It's written completely within the Alexa system, using Node.js, and sitting on AWS Lambda. It's based on a much-simplified tea-making activity, and you can try it out for yourself:

Tea Guide (UK version) (or US version)

We'd love to hear your feedback!

So what did I spend the other 97 hours doing? Here's a list of some of the things:

- The UI for the app. I used the excellent Grialkit Xamarin Forms UI kit which basically gives you a set of layouts that you can use out of the box. Just tweak the colours and away you go.

- Images. Lots and lots of images. Take an image, and make hundreds of versions of it, to satisfy iOS, Android, Google Play and the App Store. Oh, and don't forget the website...

- A responsive website. Go get yourself a cheap skin, then you realise when you add extra text the layout is screwed. Spend hours tweaking css. And don't forget to include screenshots of the app on the site. I didn't create a responsive website for the Bristol Stool Chart app, I just updated the app images, screenshots, and logo for the old site - and believe me, that was enough.

- Marketing. Set up a Twitter account. Create a Facebook page. Find ways to get the word out. If you build it, they will NOT come, at least not unless you market it properly. I used the TweetLiker tool to find twitter accounts to like and follow as a way of getting the word out. It's a very nice tool, but I'm not sure how effective that strategy is - yet. It is a definite improvement on having to Google for relevant sites for the original Bristol Stool Scale app in 2011 that's for sure!

- Testing. This can take a lot of time. Thankfully you can use simulators to test your layouts on different screen sizes, but nothing beats testing on a real device (I haven't used Xamarin Test Cloud). Also the technology moves very quickly, so if you get side-tracked (by paid work, for example) when you come back to your project you may find that there are software updates to be installed, and who knows what effect they might have? Also, when using plugins you never know how buggy they might be, or how quickly your pull requests will be accepted into the project.

- The App Stores. Getting your app accepted can be tricky, especially with Apple, and can be time-consuming. In the past I've waited over a week for the Apple review process for an app update to complete. Thankfully, that is more like a day just now. Remember that just because you can build and run your app in Release mode on your device, doesn't mean that your app will satisfy all criteria for either of the app stores.

So I suppose what I'm saying here is, if you're going to build a mobile app in your spare time or as a side project or even as a business venture, make sure you believe in it. Because when the exciting part (the working app) is over, you're not even close to being finished yet.

But what about the technology?

My experience with Xamarin in the past was using the excellent MVVMCross framework so getting to use Xamarin.Forms was part of my motivation. I wanted to see if it was any good. And it was great! I was especially impressed with the number of plugins already available to use with Xamarin.Forms:

https://github.com/xamarin/XamarinComponents

https://github.com/jamesmontemagno/Xamarin.Plugins

https://blog.xamarin.com/amazing-community-built-plugins-for-xamarin/

I also used Grialkit, because my design skills are non-existent. It really helped me a lot, reducing my design costs substantially, and allowing me to quickly create good looking UIs. Nothing will replace a top-notch designer, but for my purposes Grialkit was excellent. Also, I can't praise their support highly enough. The only thing to note here is that you need to use their kit as a starting point, rather than integrating it with your existing code - something to bear in mind.

In summary

If you're going to build an app, be prepared for all of the "other stuff" that needs to be done alongside getting your app to work. Use Xamarin Forms, use Grialkit, use Tweetliker, they are all great tools. Just don't forget to market your app!

Download the Xamarin Java bindings library for PocketSphinx

(Please note, this works in my particular case, but I am giving you no guarantees that it will work in yours - use at your own risk!)

Unfortunately Themebraco development has been discontinued. You can check out the good stuff from the guys at uSkinned instead though :)

-

We are very pleased to announce that we have launched Themebraco.com - the home of premium themes, exclusively for the Umbraco platform. Professionally designed, expertly built, responsive site templates which are super-quick to install.

Visit the Themebraco site to sign up to our mailing list to be the first to get a peek at our responsive themes for Umbraco as soon as we launch the full site. At the moment we are keeping the technical details to ourselves, but we think that this is going to be the new way to quickly and economically create new Umbraco sites that are both beautiful to look at and beautiful to use.

We're very excited and looking forward to sharing our beautiful new themes with the Umbraco community!

UPDATE: To see just how easy it is to use a Themebraco theme, have a look at this short screenr which shows you how we built the Themebraco landing page:

How we built the Themebraco landing page

SURVEY: What would you like to see included in a custom theme for Umbraco? What is essential? Contact form? Blog? What would you see as an added extra? Leave your suggestions in the comments! :)

To have something happen automatically in Umbraco, you can hook into an event. For my purposes, I used the Media.AfterSave event. This way any time a pdf document is uploaded or updated in the media section, I create a thumbnail file based on the first page of that document and store it on the file server. If you name it correctly, it will even appear next to your pdf in the Umbraco media section.

To use the GhostscriptSharp tool, just copy the GhostscriptSharp.dll and gsdll32.dll files from the GhostscriptSharp project (which you can download as a zip) into the bin directory of your Umbraco site. Then add references to both of those dlls to your UserControls project. Now add your event handler to your UserControls project, so that it will be compiled into your UserControls.dll file and copied into your Umbraco site. Umbraco is smart enough to find any event handlers that implement the correct interfaces in your compiled code - you don't need to do anything else. The code for my event handler is shown below.

Please note! This has only been tested in Umbraco 4.9.x and 4.11.x.

I also had to do two other things. Firstly, make sure that the application pool for your website is set to enable 32-bit applications (you can find that setting in the Advanced Settings in IIS7). I also had to remove the System.Data.SQLite.dll from the bin folder of my Umbraco site when I made the change to the application pool. I haven't noticed any side-effects.

And so, here is the code for the event handler. Enjoy!

public class CreatePdfThumbnail : IApplicationStartupHandler
    {
        public CreatePdfThumbnail()
        {
            Media.AfterSave += CreateThumbnail;
        }

        private static void CreateThumbnail(Media sender, SaveEventArgs e)
        {
            if (sender.getProperty("umbracoFile") != null && sender.getProperty("umbracoFile").Value != null &&
                !string.IsNullOrEmpty(sender.getProperty("umbracoFile").Value.ToString()))
            {
                try
                {
                    var fullPath = sender.getProperty("umbracoFile").Value.ToString();
                    var fileName = Path.GetFileName(fullPath);
                    var filePath = fullPath.Replace(fileName, "");
                    var fileNameWithoutExtension = Path.GetFileNameWithoutExtension(fullPath);
                    GhostscriptWrapper.GeneratePageThumb(HttpContext.Current.Server.MapPath( sender.getProperty("umbracoFile").Value.ToString()), HttpContext.Current.Server.MapPath(String.Format("{0}{1}_thumb.jpg", filePath, fileNameWithoutExtension)), 1, 7, 8);
                }
                catch (Exception ex)
                {
                    // Log error to Elmah - optional ;)
                    Elmah.ErrorSignal.FromCurrentContext().Raise(ex);
                }
            }
        }
    }

The fix is simple. Just add a web.config to your User Controls project (or update your existing one, if you have one), with the following content:

<?xml version="1.0"?>
<configuration>
    <system.web>
      <pages>
        <controls>
          <add tagPrefix="umbraco" namespace="umbraco.presentation.templateControls" assembly="umbraco" />
        </controls>
      </pages>
    </system.web>
</configuration>

Now you should have full intellisense for your Umbraco tags in your User Controls. Check it out - much better I think you'll agree:

Thanks to @StephenWRogers for his input on this one.

Assumptions

I'm assuming that you are using Visual Studio 2010 (I know - old school) and that you have nuget installed. Find out how to install nuget if you don't already have it. It's great!

Update: MVC is a dependency that is automatically "bin-deployed" so you don't have to worry about that part (Thanks for the info Sebastiaan!)

Instructions

• Open up VS2010.
• Choose File -> New Project... -> ASP.NET MVC 4 Web Application or ASP.NET Web Application (thanks again Seb!)
• Enter a name for your application and a location.
• Click OK.
• Choose the Empty project template, and accept the default view engine (i.e. Razor).
• Click OK.
• Open up nuget package manager by going to Tools -> Library Package Manager -> Package Manager Console.
• Type the command at the prompt: install-package umbracocms
• When nuget has done its thing, hit F5 to enjoy your brand spanking new Umbraco website! (you may get a popup message about your web.config and debugging, just accept it and continue).

UPDATE April 4th, 2013: If you are using VS2012 with this method, double-check the web.config in the Views folder. See my post on the forum for more information.

The next meeting of GLUUG will be on December 6th. If you're anywhere near Glasgow, come along for a drink and a chat and meet some of the Glasgow Umbraco folk face to face!

Okay so you've read my previous blog post about page orientation in your PhoneGap application (of course) but you realise, like I did, that although you've managed to prevent the device from going into landscape mode on certain pages in your app, it's still not a flawless solution. Users can still go to, for example, the graph page, flip their phone into landscape, then browse back to your home page et voila - it's being displayed in landscape! So how to prevent this?

Please note that I'm assuming you're using PhoneGap (Cordova) v2.0.0 here.

This part is a bit trickier and I had to hack the existing PhoneGap Orientation plugin to get this to work. I've simplified it slightly. You just need to add the Orientation class (see below for the code) to your project, then call it from javascript to force the rotation of the screen when your page changes in your PhoneGap application. So in my case, for every screen except the graph screen, I would call to the plugin to rotate to portrait orientation. This way if a user was in landscape orientation when viewing the graph screen, and was holding the phone in landscape orientation, and clicked the home link, the orientation would switch back to portrait (because of my javascript call).

I've included my code below.

1. I added Orientation.h and Orientation.m into the Plugins folder in my PhoneGap 2.0 project.

2. I updated the Cordova.plist file and added a new entry in the Plugins section, key "orientation" and value "Orientation".

3. Then in my javascript I did this when loading a page, to force all pages except my graph page into portrait orientation:

// If we're on the graph page, then ensure content rotates to current physical device orientation
        if (viewname == "graph") {
            switch(window.orientation) 
            {  
                case -90:
                    options = [{landscapeleft:true}];
                    break;
                case 90:
                    options = [{landscaperight:true}];
                    break;
                case 180:
                    options = [{portraitdown:true}];
                    break;
                default:
                    options = [{portrait:true}];
                    break;
            }   
        }
        else {
            // Not on graph page, so flip to portrait regardless of physical device orientation
            options = [{portrait:true}];
        }
        
        cordova.exec(null, null, "Orientation", "setOrientation", options);

Orientation.h

#import <Cordova/CDVPlugin.h>

@interface Orientation : CDVPlugin {
    
}

//Instance Method  
- (void) setOrientation:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options;

@end

Orientation.m

//
//  SetOrientation.m
//  
#import "Orientation.h" 
#import <Cordova/CDVPluginResult.h>

@implementation Orientation 


// Called from javascript, set the orientation to Portrait when going from graph screen (in Landscape) back
// to other screens - doesn't happen automatically because the physical orientation of the devicehasn't changed
- (void)setOrientation:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options  
{
    //self.viewController.supportedOrientations = arguments;
    NSLog(@"Rotating device in code");

    // Wrap it all in an animation so it looks nicer
    [UIView beginAnimations:@"rotate" context:NULL];
    [UIView setAnimationDelegate:self];
    
    //will rotate status bar
    if ([[options objectForKey:@"portrait"] intValue] == 1) {
        NSLog(@"Portrait");
        [[UIApplication sharedApplication] setStatusBarOrientation:UIInterfaceOrientationPortrait];
    }
    else if ([[options objectForKey:@"portraitdown"] intValue] == 1) {
        NSLog(@"Portrait UpsideDown");
        [[UIApplication sharedApplication] setStatusBarOrientation:UIInterfaceOrientationPortraitUpsideDown];
    }
    else if ([[options objectForKey:@"landscapeleft"] intValue] == 1) {
        NSLog(@"Landscape Left");
        [[UIApplication sharedApplication] setStatusBarOrientation:UIInterfaceOrientationLandscapeLeft];
    }
    else if ([[options objectForKey:@"landscaperight"] intValue] == 1) {
        NSLog(@"Landscape Right");
        [[UIApplication sharedApplication] setStatusBarOrientation:UIInterfaceOrientationLandscapeRight];
    }
    else {
        NSLog(@"Not defined");
    }
    
    //will re-rotate view according to statusbar
    UIViewController *c = [[UIViewController alloc]init];
    [self.viewController presentModalViewController:c animated:NO];
    [self.viewController dismissModalViewControllerAnimated:NO];
    [c release];
    
    [UIView commitAnimations];
}

@end

So hopefully you find that helpful. It's strange that there is no easy way to achieve this, I would have thought that this was a feature many developers would want for their PhoneGap applications but I found it surprisingly difficult to work this one out.

I looked into a number of solutions including css and javascript, but nothing seemed to work properly. The css and javascript solution worked, but I felt that the result was a bit shoddy to say the least. The only proper way would be to do it natively.

The key to this solution is the function

- (BOOL) shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation

in MainViewController.m. Here is where you specify which orientations are allowed for your view. My first thought was that I could check the current URL of the UIWebView (which typically just points at your www/index.html file) for any anchors, e.g. www/index.html#myPage, which would let me know which page I'm on. Unfortunately,

self.webView.request.URL.fragment

always returns null. It turns out that the UIWebView helpfully ignores the fragment, i.e. the hash tags, so I was out of luck. Then I started investigating the

stringByEvaluatingJavaScriptFromString

function provided by UIWebView. You can use this function to call a javascript function in your view, and then have the return value available in your native code. So the solution is to ask javascript in the UIWebView what page we're on, and if it's the graph page (in my case) then allow landscape orientation. Otherwise, don't.

This is a reasonably simple solution in the end but it took hours of Googling and trial and error to get it right. Here's hoping you find it useful!

Here is my javascript function, which is included on the page being displayed in the UIWebView (typically www/index.html);

function isGraphPage() {
return (window.location.href.indexOf("#graph") > -1);
}

And here is my function in MainViewController.m:

- (BOOL) shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
NSString *isGraphPage = [self.webView stringByEvaluatingJavaScriptFromString: @"isGraphPage();"];
NSString *truth = @"true";
if ([isGraphPage isEqualToString:truth]) {
// Allow all orientations allowed globally for the app if we're on the graph page
return [super shouldAutorotateToInterfaceOrientation:interfaceOrientation];
}
else {
// Only allow portrait orientation for all other pages
return interfaceOrientation==UIInterfaceOrientationPortrait;
}
}

UPDATE:I realised that this was only half the battle. Now your user can't enter landscape orientation when viewing any page other than the graph page. But what they can do is enter landscape orientation on the graph page, then browse to another page in your app, and hey! they've managed to view it in landscape mode. Read part 2 of the solution to this problem and fully control the page orientation in your PhoneGap application.