Deepwire's Blog

Tag: Apps

Joystick.

by on Apr.08, 2014, under App Development, Electronics, Programming

In my new found free time recently, between unsuccessfully searching for a new job and having it made clear that money is more important than I was led to believe, I’ve been taking part in a couple of MOOCs (Massive Online Open Courses) for Android Development. I have previously toyed with Windows Phone development (for Windows Phone 7) but felt that while easy, there wasn’t much point to it. I don’t have any killer app ideas, and there just isn’t the user base. Since switching my own phone to Android, I’ve wanted to look at Android development, but did not really have an idea to develop.

Since getting an m3pi Robot last year, I finally had a complete robot to play with, after still never solving the problem of how to connect the omni-directional wheels to the output shafts of the motors on my Netduino based robot. It made sense to recreate the Windows Phone app I wrote to control the Netduino robot for Android to control the m3pi. But where do I start? Fortunately, the two MOOCs had me covered.

The long-winded “Programming Mobile Applications for Android Handheld Systems” from the University of Maryland was where I started. This was a very dry, rigid course, that went step by step through Android development concepts individually, out of context from a complete app. One week was spent looking at Intents, another on Permissions, another on Fragments etc. It was a good starting point, but didn’t do a very good job at showing how everything fits together into a complete app.

The second MOOC, “Begin Programming: Build Your First Mobile Game” from the University of Reading, has been much more fun. Right from the start this course gives you a working Android game, shows you it working, and lets you explore the code. Week by week it then goes through different programming concepts, such as Variables and For loops, explaining how they are used in the game. It’s a good combination of programming for beginners, and an introduction to Android development. Straight away this gave me the perfect framework to use as a starting point for my m3pi Controller App. From what I’ve learnt on the two courses, and help from Google, I’ve managed to get an app working to send UDP packets over WiFi to the WiFly module on my m3pi. It’s not perfect, it still crashes often, particularly when I try to leave the app, but it does the minimum I need it to.

But that didn’t mean everything was finished. For my Netduino robot, as I planned to use omni-directional wheels, my control method of providing a direction and magnitude (dragging a ball away from the centre of a circle in any direction) worked well. The robot would just move instantaneously in that direction, it’s speed determined by how far away from the centre the ball was. But for a 2 wheel robot with differential drive, this wouldn’t work. I needed different programming on the robot to receive the data sent by the Android app, and move the robot in a sensible manner.

I spent a long time pondering this, looking into robot kinematics and curved path planning, getting myself more and more confused finding ever more complicated potential solutions. Then it hit me. Joysticks. What I had basically made was a virtual touch screen joystick.

I could move the ball around a central point in a constrained circular area in much the same way that a joystick is pushed in any direction about it’s pivot, up to a maximum angle. Realising this, I thought there had to be a simple method for driving a 2 wheel differential drive vehicle by joystick. Another quick Google and I’d got my control technique!

The app essentially outputs 2 values, corresponding to the X and Y coordinatates of the ball, in relation to the centre (origin) of the circle. Both the X and Y are in the range -100 < 0 < 100, but also constrained to stay within a circle of radius 100 about the origin (so coordinates such as 100,100 are never possible). The technique I am using is adapted from Roborealm’s page on Differential Drive. Essentially the Y value is responsible for the speed forwards/backwards, and the X value is responsible for the robot turning.

Each received value is first normalised into the range -1.0 < 0 < 1.0, by dividing by 100, as the m3pi motors require a speed in this range. Following the Roborealm example, each value is then halved. This is still something I am experimenting with, as it does limit the top speed of the robot. But it is is required to allow the robot to turn.

The turn value is calculated from the X value, subtracting it’s value from the left motor’s speed and adding it’s value to the right motor speed. If there is no forward/backward (Y) component, the wheels will spin in exactly opposite directions at the same speed, causing the robot to turn on the spot. If there is any Y component, it creates a speed differential between the two motors, such that one spins faster than the other, even if both are turning in the same direction. This allows the robot to drive in a curved path. My current implementation of this algorithm for the mbed on my m3pi robot is below. Variables rx_x and rx_y are the integer values received from the Android app, in the range -100 < 0 < 100.

speed = ((float)rx_y/100) * 0.5;
turn = ((float)rx_x/100) * 0.5;
//Calculate the left and right motor speeds using the speed and turn values
//By adding the turn value to one motor, and subtracting it from the other,
//it creates a speed differential so the robot will turn
//(if speed = 0, robot turns on the spot)
mleft = speed - turn;
mright = speed + turn;
//Check motor values, and limit within -1.0 < 0 < 1.0
//if they exceed this range
if (mleft < -1.00) {
    mleft = -1.00;
}
if (mleft > 1.00) {
    mleft = 1.00;
}
if (mright < -1.00) {
    mright = -1.00;
}
if (mright > 1.00) {
    mright = 1.00;
}
//Set the motor speeds to move the robot
m3pi.left_motor(mleft);
m3pi.right_motor(mright);

There is a point to having the initial values halved. If for example the Y value received was above 50, and the X value was also above 50, then the combined value given to the right motor when normalised would be above 1.0 (e.g 102/100 = 1.02). This is above the maximum speed possible, so the motor would be limited to run at maximum speed, and the motion of the robot would be inconsistent with the input.

Halving the input values ensures the speed values sent to the motors stay within their minimum and maximum limits. Unfortunately this does limit the maximum speed, both directly forwards or backwards and spinning on the spot, to 50% of the maximum. But it does mean the motor speeds change continuously for all X and Y values received from the Android app.

I will continue experimenting with this, seeing if I can improve on the algorithm to allow for maximum speeds in all cases (e.g. both motor speeds at 1.0 for forwards). Having realised my Control App is a touch screen joystick, I may even rewrite it as a general wireless robot remote control, as it doesn’t really need to be specific to the m3pi. That was just what gave me the incentive to get started.

Leave a Comment :, , , , more...

The Forgotten Child(Window): How to Implement Pop-ups on Windows Phone 7.5 Mango Part 2

by on Nov.30, 2011, under App Development, Programming

In my last post, I explain how to get the correct Silverlight assembly referenced in developing a Windows Phone 7.5 application, so you can implement the ChildWindow object. This allows you to add Pop-up dialogue boxes to your application that by default are not possible!

Now, I’m going to show you how to implement the ChildWindow, design your pop-up, and use it in your Windows Phone 7 app. I have tried to keep it simple, and focus on implementing the ChildWindow only. I have not included the other functionality I use in my app. There are many developer resources available that can help you can learn Windows Phone development, such as here at the Windows Phone App Hub, but these resources do not include the ChildWindow class I am explaining here.

First, add a new Windows Phone User Control to your project, and name it, for example ‘Popup.xaml‘. (Right click your project, Click Add -> New Item. Choose Windows Phone User Control from Silverlight for Windows Phone). This will create your control and display the visual and code XAML editors side by side.

XAML Editor

XAML Editor side by side view.

You can design your control whichever way you prefer. You may drag controls from the toolbox onto the visual side, or you may type this in the code editor. As it is a pop-up, you should probably keep it simple. I have used just 2 TextBlocks, 1 TextBox and 2 Buttons.

The next step is very important. You must change the XAML to reference ‘System.Windows.Controls‘ and change it from a UserControl to a ChildWindow. It is also important to set the size and position relevant to the screen size. Remember, Windows Phone 7 handsets currently have a 480 x 800 (in portrait) resolution. I have created the pop-up to be 440 wide, not quite the full width of the screen, and only 200 high. (If you were designing your app to work in landscape, you would need to adjust the width and height to be appropriate.) I have positioned it towards the top of the screen, so that the software touch screen keyboard does not cover it. If you have the pop-up too low, it would be behind the keyboard and difficult to use.

Your Popup.xaml code outline should look like this:

<tk:ChildWindow x:Class="ExampleProject.Popup"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:tk="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
    VerticalAlignment="Top"
    HorizontalAlignment="Center"
    Margin="0,40,0,0"
    HasCloseButton="false" Height="200" Width="440">

    <Grid x:Name="LayoutRoot">
	<!--LayoutRoot is the root grid where all page content is placed-->
    </Grid>

</tk:ChildWindow>

Next, for any Buttons you have used, make sure the Button Click events have been generated. Now go into ‘Popup.xaml.cs‘, and begin by adding reference to ‘System.Windows.Controls‘ at the top with the line ‘using System.Windows.Controls;‘. Change the base class for your pop-up from ‘UserControl‘ to ‘ChildWindow‘.

The outline of Popup.xaml.cs will now look like this:

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace ExampleProject
{
    public partial class Popup : ChildWindow
    {
        public string HostName { get; set; }

        public Popup()
        {
            InitializeComponent();
        }
    }
}

I am using my pop-up to input a network device Host name, which is then used to set the destination server of a UDP socket when broadcasting data. I have defined that as a public variable in Popup.xaml.cs, so it can be set, and then read back in my main app. I store this as a setting in my app, so it can be saved to memory, and loaded in future. I also have two buttons, ‘OK’ to set the Host name, and ‘Cancel’ to close the Pop-up without doing anything.

I use a Connect button in MainPage.xaml.cs to create an instance of the pop-up and display it. The existing value of Host name is loaded from ‘settings’ and passed to the pop-up window. Important: If you are developing a ‘Silverlight and XNA Application‘, as I am here, you may need to turn off the XNA rendering to display the Pop-up. When I first tried this, my pop-up would not display over the XNA graphics I was rendering at the time.

Opening the Pop-up from MainPage.xaml.cs:

    private void btnConnect_Click(object sender, RoutedEventArgs e)
    {
        // Set the sharing mode of the graphics device to turn off XNA rendering
        SharedGraphicsDeviceManager.Current.GraphicsDevice.SetSharingMode(false);

        Popup popup = new Popup();
        popup.HostName = settings.HostName;
        popup.Closed += new EventHandler(OnPopupShow);

        popup.Show();
    }

In Popup.xaml.cs, it then takes the current Host name, and puts it into the text box:

protected override void OnOpened()
{
    base.OnOpened();

    this.txtHostName.Text = this.HostName;
    this.txtHostName.SelectAll();
}

Finally the two buttons in Popup.xaml.cs control how it functions in MainPage.xaml.cs:

private void btnOK_Click(object sender, RoutedEventArgs e)
{
    // Value is good so close this childwindow
    this.HostName = this.txtHostName.Text.Trim();
    this.DialogResult = true;
}

private void btnCancel_Click(object sender, RoutedEventArgs e)
{
    this.DialogResult = false;
}

Back in MainPage.xaml.cs I use the OnPopupShow event that occurs when the pop-up is closed, to decide what to do with the Host name. If the ‘OK’ button was pressed, the pop-up will return ‘true’, and so the Host name entered in the TextBox will be used and saved into the app settings. If ‘Cancel’ was pressed, the pop-up returns ‘false’, and so my application ignores any text that was entered, and will continue to use the existing saved Host name. Important: As we turned off XNA rendering to allow us to display the Pop-up correctly, you can now turn it back on as the Pop-up has closed.

Handling the result of the Pop-up with the OnPopupShow event:

private void OnPopupShow(object sender, EventArgs e)
{
    Popup popup = sender as Popup;

    if (popup.DialogResult == true)
    {
        settings.HostName = popup.HostName;
        settings.Save();

        // Set the sharing mode of the graphics device to turn on XNA rendering
        SharedGraphicsDeviceManager.Current.GraphicsDevice.SetSharingMode(true);
    }
}
Example ChildWindow Pop-up

Example ChildWindow Pop-up in the Windows Phone Emulator.

This is a simple implementation of a ChildWindow in a Windows Phone 7 application, used to get the destination Host name for a UDP socket. As I said at the start, I have focussed just on the ChildWindow to display and use a pop-up, and left out the other functionality of my application.

This should now allow you to create your own Pop-up, with whatever controls you need, and use it in your own application. Another application of it could be entering a username and password.

Have fun developing Windows Phone 7 apps – hopefully you will find this useful. If you have any questions, or get stuck, post a comment and I’ll try to help!

Leave a Comment :, , , more...

The Forgotten Child(Window): How to Implement Pop-ups on Windows Phone 7.5 Mango – Part 1

by on Nov.28, 2011, under App Development, Programming

In the comparatively basic Windows Phone 7 app I am currently writing, I wanted to do something I thought would be simple. It should be simple. To have a dialog box pop-up and allow me to input data into a text box. This could be useful to get a username and password, for example, without navigating to a completely different ‘page’ in the app. Or it could just be to pop-up and display information messages in a different place on the screen, rather than across the top using a ‘MessageBox’.

I could not just use a ‘MessageBox’ because I need to add at least a TextBox control on to the pop-up. I’ve done this in other software I have written, and those have only been basic applications at best, written in C# (or even at work, the dreaded, depressing VBA!). But for some reason, for Windows Phone 7, this has been made very difficult!

Silverlight includes exactly the object needed – the ChildWindow. But although Silverlight for Windows Phone includes the System.Windows.Controls namespace, where ChildWindow is found, that particular feature is absent from the phone version.

Instead, to be able to implement a ChildWindow in a Windows Phone 7 application, you must manually reference the full System.Windows.Controls.dll in your project, from the main Silverlight SDK. (Right Click ‘References’, Click ‘Add Reference’, Click ‘Browse’, then locate and select System.Windows.Controls.dll). On my machine it was found here: “C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\Libraries\Client\System.Windows.Controls.dll” (Please check your machine – the Silverlight SDK may be installed in a different location.)

If you do not have the Silverlight SDK installed, pleasedownload it here: http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=18149

This includes the Silverlight 4.0 SDK, and will configure it for use in Visual Studio 2010.

Once you have the correct reference, you are ready to add a Pop-up (ChildWindow) to your Windows Phone 7 application! If you are familiar with using the ChildWindow from other Silverlight development, you’re sorted.

If not, stay tuned for my next post which will explain specifically how to use this and get a Pop-up dialog box in a Windows Phone 7 application!

1 Comment :, , , more...

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!