Stormwater Management (Pond) Repair Project

With mobile web browsing now accounting for 15% of all global internet traffic building web applications targeted at mobile has become more important than ever. Building for mobile is very different to creating web applications targeted at the desktop environment. The way in which we interact with mobile devices is inherently different and therefore requires a different approach when it comes to designing our applications.

In this blog post we are going to be focussing on the how we interact with multi-touch displays. You are going to be learning about the APIs that are available for building multi-touch web applications. After a quick bit of initial theory you’ll build a fully-functional multi-touch drawing app that works great on your phone or tablet.

Lets get started!

A Primer on Touch Events

Before we dive into the demo, lets quickly take a look at the events and objects that you will be using to create multi-touch web applications.

Types of Touch Events

There a six types of touch events:

• touchstart – Triggered when a pointer first touches the screen.
• touchmove – Triggered when a pointer is moved on the screen.
• touchend – Triggered when a pointer leaves the screen.
• touchcancel – Triggered when a pointer is disrupted. This could be for a number of reasons:
  • Another event occurred that disrupted the touch.
  • The pointer left the window and entered another area, such as the browser’s UI.
  • There are more pointers on the screen than the browser supports. If this happens the first touch that is being tracked will be cancelled.
• touchenter – Triggered when the pointer enters the target element.
• touchleave – Triggered when the pointer leaves the target element.

Note: Both touch and mouse events are triggered to make sure that non-touch-specific code still runs correctly on mobile devices. If you don’t want the mouse events to be triggered make sure that you use event.preventDefault() in your event handlers.

Each TouchEvent has a number of properties. For the purpose of this post we’re just interested in one, changedTouches. This property contains a list of all the Touch objects that changed with the event.

There is also a property named touches which contains a full list of all the active touch points.

Touch Objects

Each Touch object includes a number of properties that provide information about the position of the pointer on the screen. For this blog post you are just going to focus on three properties: identifier, pageX, and pageY.

• identifier – A unique ID for the touch object. This allows you to track an individual pointer throughout an interaction with the device.
• pageX – The position of the touch point relative to the left of the screen. This property includes any scroll offset.
• pageY – The position of the touch point relative to the top of the screen, including any scroll offset.

Note: Take a look at the documentation for a full list of properties that are available on Touch objects.

Browser Support

Chrome, Firefox and Opera all include support for touch events on the desktop. Chrome even includes a method of emulating touch events using non-touch devices (i.e. a mouse). This comes in handy when testing your applications. You’ll learn how to enable that feature later in this post.

As you might expect, support for touch events across mobile browsers is very good. All the major mobile browsers support touch events. The outlier is in IE which supports Pointer Events instead.

Source: http://caniuse.com/touch

Building a Multi-Touch Drawing App

For the remainder of this post you’re going to build a multi-touch drawing app using touch events and the Canvas API. The primer on touch events has already covered all of the things that you need to know to handle interactions. Don’t worry if you haven’t worked with the Canvas API before, I’ll walk you through all the code as we go.

See the Demo Download The Code View on CodePen

Note: If you want to learn more about the 2D Canvas API check out my previous article on the subject.

Setting up the HTML and CSS

The first job is to set up the HTML and CSS for your application. Create a new file called index.html and copy in the following code.

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Touch Event Demo</title>
    
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    
        <style>
        body, html {
            margin: 0;
        }
        </style>
    </head>
    <body>
        <canvas id="myCanvas" width="500" height="500"></canvas>
        <script src="app.js"></script>
    </body>
    </html>

Here you’ve set up a simple page that contains a <canvas> element. You don’t need much CSS for this demo so you’ve placed this with the <head>.

A key element in this markup is the meta viewport tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

This tag will disable pinch-zoom on mobile devices; that feature can often get in the way when creating multi-touch applications.

Emulating Touch Events with Chrome Dev Tools

Before we go any further lets quickly take a look at how you can emulate touch events in Google Chrome. This will come in handy when testing your applications.

Emulating touch events using Chrome dev tools.

1. Launch the Chrome Developer Tools.
   • Mac: Command + Option + I
   • Windows: Ctrl + Shift + I
2. Now open the settings page (cog in bottom right corner).
3. Click on the Overrides tab on the left-hand side.
4. Tick Enable.
5. Tick Emulate touch events.

Enabling this feature will cause Chrome to fire touch events as you interact with the app using your mouse. As you build the demo application you will want to have this feature enabled.

Getting Started on the JavaScript

In this section you are going to make a start on the JavaScript that will power your multi-touch application.

Create a new file called app.js and save it in the same folder as your index.html file.

Copy the following code into your app.js file.

(function(){
    
        // Get the canvas.
        var canvas = document.getElementById('myCanvas');
    
        // Set the canvas to fill the screen.
        canvas.width = window.outerWidth;
        canvas.height = window.outerHeight;
    
        // Get a 2d drawing context.
        var ctx = canvas.getContext('2d');
    
        // Used to keep track of active touches.
        var currentTouches = new Array;
    
        // The rest of the code goes here...
    
    }());

This code mainly handles setting up the canvas. You have created a canvas variable and initialized it by fetching the <canvas> element in your HTML markup.

You then set the width and height properties of the canvas so that it fills the entire window.

Next you create a 2D drawing context by calling the getContext('2d') method on your canvas. This is then stored in the ctx variable. If you’re not familiar with the Canvas API think of the drawing context like you would a pen or pencil when drawing on paper. It provides a number of methods that can be used for drawing objects on your canvas.

Finally, you create an array called currentTouches. This will be used to keep track of the touch points that are currently active on the screen.

Now add the following code to your app.js file. This should replace the last comment in your current code.

// Returns a random color from an array.
    var randomColor = function () {
        var colors = ['#3F3F3F', '#929292', '#00A3EE', '#F5D908', '#D80351'];
        return colors[Math.floor(Math.random() * colors.length)];
    };
    
    // Finds the array index of a touch in the currentTouches array.
    var findCurrentTouchIndex = function (id) {
        for (var i=0; i < currentTouches.length; i++) {
            if (currentTouches[i].id === id) {
                return i;
            }
        }
    
        // Touch not found! Return -1.
        return -1;
    };

In this code snippet you have created two helper functions, randomColor and findCurrentTouchIndex. You will be using these later on.

The randomColor function will return a color from the colors array. Every new touch on the screen will be assigned a color using this function.

The findCurrentTouchIndex function will loop through the currentTouches array until it finds an object with the desired id. The position of that object in the array is then returned. We can’t modify a Touch object itself so in order to store the color that is associated with a pointer we have to save this information in a separate array.

Handling New Touches

In this section you’re going to be writing the code that will handle new touch events. Lets start by defining the touchStart function.

Add the following code to your app.js file.

// Creates a new touch in the currentTouches array and draws the starting
    // point on the canvas.
    var touchStarted = function (event) {
        var touches = event.changedTouches;
    
        for (var i=0; i < touches.length; i++) {
            var touch = touches[i];
            var touchColor = randomColor();
    
            currentTouches.push({
                id: touch.identifier,
                pageX: touch.pageX,
                pageY: touch.pageY,
                color: touchColor
            });
    
            ctx.beginPath();
            ctx.arc(touch.pageX, touch.pageY, 2.5, Math.PI*2, false);
            ctx.fillStyle = touchColor;
            ctx.fill();
        }
    };

Here you have started by accessing the changedTouches array that is present on the TouchEvent object. You then loop through this array to access each of the individual Touch objects.

For each touch you first generate a random color using the randomColor function you created earlier. You then push a new object into the currentTouches array. This object contains four properties: id, pageX, pageY, and color. The first three of these are set using the corresponding properties from the Touch object.

The code will then draw the initial touch point on the canvas. The call to beginPathcreates a new path to draw from.

Note: Objects on the canvas are mainly drawn using lines (with a few exceptions), just as you would if you were drawing with a pen and paper.

The call to the arc method draws the outline of a circle. Don’t worry too much about the syntax here. It looks a bit funky because this method is used to draw more than just circles.

You then set the fillStyle property of the drawing context using the color that you generated for this touch. The call to fill will color in the circle and close the path.

Now all that’s left is to add the event listener that will call the touchStarted function when the touchstart event is fired.

Add the following to your app.js file.

// Set up an event listener for new touches.
    canvas.addEventListener('touchstart', function(e) {
        e.preventDefault();
        touchStarted(event);
    });

Drawing on The Move

Your next task is to write the code that will draw a line as the user drags their finger (or other touch pointer) across the screen.

Copy this code into your app.js file.

// Draws a line on the canvas between the previous touch location and
    // the new location.
    var touchMoved = function (event) {
        var touches = event.changedTouches;
    
        for (var i=0; i < touches.length; i++) {
            var touch = touches[i];
            var currentTouchIndex = findCurrentTouchIndex(touch.identifier);
    
            if (currentTouchIndex >= 0) {
                var currentTouch = currentTouches[currentTouchIndex];
    
                ctx.beginPath();
                ctx.moveTo(currentTouch.pageX, currentTouch.pageY);
                ctx.lineTo(touch.pageX, touch.pageY);
                ctx.lineWidth = 4;
                ctx.strokeStyle = currentTouch.color;
                ctx.stroke();
    
                // Update the touch record.
                currentTouch.pageX = touch.pageX;
                currentTouch.pageY = touch.pageY;
    
                // Store the record.
                currentTouches.splice(currentTouchIndex, 1, currentTouch);
            } else {
                console.log('Touch was not found!');
            }
    
        }
    };

The touchMoved function again starts by fetching the changedTouches array and then looping through each of the Touch objects.

For each Touch object we start by using the findCurrentTouchIndex function to find the position of the corresponding object in the currentTouches array. If the object exists, a value larger or equal to zero will be returned. You can then retrieve the stored object from the currentTouches array using this index. This object contains the color that will be used for the line as well as the pageX and pageY coordinates that represent the position of the previous touch point.

You then call beginPath to create a new path to draw from. The call to moveTo sets the start position for this path to the location of the previous touch point (i.e. the current end of the line on the canvas). Using the lineTo method you draw a path from the start point to the new touch position.

For this path to become visible you set the lineWidth and strokeStyle properties of the drawing context and then call the stroke method to color the path.

Now you’re done drawing on the canvas, you update the pageX and pageY properties of the currentTouch object and store this back in the currentTouches array. This is so that you know where to draw the next part of the line from when the pointer moves.

To finish up you just need to add an event listener that will call the touchMoved function when the touchmove event is fired.

// Set up an event listener for when the touch instrument is moved.
    canvas.addEventListener('touchmove', function(e) {
        e.preventDefault();
        touchMoved(e);
    });

Letting Go

When the user removes the pointer from the screen you need to draw the final touch position and then remove the corresponding object from the currentTouches array.

Start by adding the following code to your app.js file.

// Draws a line to the final touch position on the canvas and then
    // removes the touh from the currentTouches array.
    var touchEnded = function (event) {
        var touches = event.changedTouches;
    
        for (var i=0; i < touches.length; i++) {
            var touch = touches[i];
            var currentTouchIndex = findCurrentTouchIndex(touch.identifier);
    
            if (currentTouchIndex >= 0) {
                var currentTouch = currentTouches[currentTouchIndex];
    
                ctx.beginPath();
                ctx.moveTo(currentTouch.pageX, currentTouch.pageY);
                ctx.lineTo(touch.pageX, touch.pageY);
                ctx.lineWidth = 4;
                ctx.strokeStyle = currentTouch.color;
                ctx.stroke();
    
                // Remove the record.
                currentTouches.splice(currentTouchIndex, 1);
            } else {
                console.log('Touch was not found!');
            }
    
        }
    };

The code here is much the same as in touchMoved. However instead of updating and storing the currentTouch object you remove it from the currentTouches array.

The touchEnded function should be called if either the touchend or touchleave event is fired.

Add the following event listeners to your app.js file.

// Set up an event listener for when a touch ends.
    canvas.addEventListener('touchend', function(e) {
        e.preventDefault();
        touchEnded(e);
    });
    
    // Set up an event listener for when a touch leaves the canvas.
    canvas.addEventListener('touchleave', function(e) {
        e.preventDefault();
        touchEnded(e);
    });

Handling Cancelled Touches

The last event you need to deal with is cancelled touches. A touch can be cancelled for a number of reasons. This usually happens if something else takes control of the touch (like the browser UI), or if there are too many touch points on the screen (in which case the first touch point gets cancelled).

If a touch gets cancelled you want to immediately remove the corresponding object from the currentTouches array. There’s no need to draw anything on the canvas.

Copy the following JavaScript code into your app.js file.

// Removes cancelled touches from the currentTouches array.
    var touchCancelled = function (event) {
        var touches = event.changedTouches;
    
        for (var i=0; i < touches.length; i++) {
            var currentTouchIndex = findCurrentTouchIndex(touches[i].identifier);
    
            if (currentTouchIndex >= 0) {
                // Remove the touch record.
                currentTouches.splice(currentTouchIndex, 1);
            } else {
                console.log('Touch was not found!');
            }
        }
    };

This touchCancelled function will loop through each of the changedTouches and remove the corresponding objects from the currentTouches array.

Now you just need to add an event listener that calls touchCancelled when the touchcancel event is fired.

// Set up an event listener to catch cancelled touches.
    canvas.addEventListener('touchcancel', function(e) {
        touchCancelled(e);
    });

Finishing Up

That completes your multi-touch drawing application. Fire it up on a mobile device and give it a go!

See the Demo Download The Code View on CodePen

For extra credit you could try adding UI elements that allow you to manipulate the width of the lines, or the colors that are available.

Summary

In this blog post you’ve learned about touch events, and have created your very own multi-touch drawing application.

Mobile web usage is growing at a staggering pace. Taking full advantage of this platform shift goes way beyond just responsive design. By using these platform-specific APIs we can make sure that our web applications are delivering a great user experience across multiple devices.

Useful Links

• Touch Events Documentation (MDN)
• Touch Events W3C Specification
• Multi-Touch Web Development (HTML5 Rocks)

The post Building Multi-Touch Web Applications appeared first on Treehouse Blog.

The BDD PHP framework Behat, allows you to test your PHP applications using human-readable sentences to write features and scenarios about how your applications should behave in order to test out its functionality. We can then run these tests to see if our application is behaving as expected. Let’s spend about 15 minutes quickly going over Behat’s installation process and learn how we can test our PHP applications behavior using the basics.

Installation

To begin testing with Behat, we just need to install it on our local development machine. I’ll be using Composer, but you can take a look at a the documentation for additional installation methods.

Within your PHP application (I have a blank PHP app named phpbehat created in advance) create a composer.json file with the following code to load in Behat:

{
    	"require": {
    		"behat/behat": "2.4.*@stable"
    	},
    	"minimum-stability": "dev",
    	"config": {
    		"bin-dir": "bin/"
    	}
    }
    

In your terminal we can install it using the following command:

composer update

We should now be able to run the bin/behat command to work with Behat.

Creating Features

We always begin by creating a new feature. A feature is something that we can use to describe a feature of our application and then implement it to get the test to pass.

A feature, at its simplest, consists of:

• Human-readable, plain text.
• Uses a .feature extension.
• Contains the feature’s benefit, role, and the feature itself.
• May hold a list of scenarios.

Now I can’t show you how to test all possible features for an application, as that would take far too long. But what I can do is show you how to go about writing a basic feature and you can adapt this code to make it work for your specific application.

Testing the Phpadder Class

To avoid complicating the learning process, let’s create a very simple Phpadder.php file which contains a couple methods that we can use to add two numbers together and display their sum.

class Phpadder {
    
    	private $a;
    	private $b;
    	public $sum;
    
    	public function __construct($a, $b) {
    		$this->a = $a;
    		$this->b = $b;
    	}
    
    	public function add() {
    		$this->sum = $this->a + $this->b;
    	}
    
    	public function display() {
    		return $this->sum;
    	}
    }
    

This creates a new class named Phpadder. We have a few properties to hold the first ($a) and second ($b) numbers to be added, as well as a $sum property to hold the values’s sum.

Next, we have our constructor which initializes our properties. Then we have an add method to add the two numbers together and finally a display method to display the sum of the two numbers.

Adder Feature

Let’s now test this Phpadder class. Create a new .feature file along with the following code:

# features/phpadder.feature
    Feature: adder
    	In order to display the sum of two numbers
    	As anybody
    	I need to provide two numbers
    

We start out by giving our feature a name of adder. Then we specify, on three lines, the feature’s benefit, role, and finally the feature itself. It should be fairly self explanatory.

Now that we have our feature, let’s start writing our scenarios.

Creating Scenarios

Anytime we create a feature we can define scenarios that describe how that feature behaves given certain conditions. Scenario’s follow the same basic layout consisting of the scenario’s description, a context, an event, and an outcome.

Let’s create a scenario to test out our Phpadder application:

Scenario: Display the sum of two provided numbers
    	Given I have the number 50 and the number 25
    	When I add them together
    	Then I should get 75
    

We begin with our scenario description, we then list out that we start with the two numbers of 50 and 25 and when they are added together it should display the sum of 75.

You can also have multiple contexts, events, and outcomes as well using the following keywords: And and But. Here’s a modified example of the previous scenario where we’ll use And:

Scenario: Display the sum of two provided numbers
    	Given I have the number 50 and the number 25
    	And I have a third number of 25
    	When I add them together
    	Then I should get 100
    

Creating Step Definitions

A step is nothing more than a PHP function which is made up of a keyword, a regular expression, and a callback function. Each statement within your scenario will be matched to a step. These steps define what should happen given one of your statements are called within a scenario. You store all of your steps within the features/bootstrap/FeatureContext.php file.

The “Given” Step

In our FeatureContext.php file (you may need to create this), we need to write a step for each of our statements, using its name as the function name. We’ll start with the "Given I have the number" statement:

# features/bootstrap/FeaturesContext.php
    
    require("Phpadder.php");
    
    use Behat\Behat\Context\BehatContext, 
    	Behat\Behat\Exception\PendingException;
    
    use Behat\Gherkin\Node\PyStringNode,
    	Behat\Gherkin\Node\TableNode;
    	
    class FeatureContext extends BehatContext {
    
    	private $Adder;
    	
    	/**
    	 * @Given /^I have the number (\d+) and the number (\d+)$/
    	 */
    	public function iHaveTheNumberAndTheNumber($a, $b) {
    		$this->Adder = new Phpadder($a, $b);
    	}
    

First, we create a new PHP file, require in our Phpadder.php file (the file that we’re testing), and then we use a few Behat classes with use statements, right after.

Next, we create our FeatureContext class and have it extend the BehatContext class.

Our class has only one property, $Adder, which will hold a Phpadder object.

Finally, we create a method for our first step using the same name as the statement. Our step has a regular expression, found within the method’s comment. This regular expression is used to match the step to a scenario statement. Within this method we simply assign a new Phpadder object to our $this->Adder property so that the rest of our methods have access to the same Phpadder object.

Now, you’ve probably noticed the @Given keyword within your function’s comment, this is actually an annotation so that the different types of steps can be identified. You can use @Given, @When, and @Then.

Now we just need to write the last two steps.

The “When” Step

/**
     * @When /^I add them together$/
     */
    public function iAddThemTogether() {
    	$this->Adder->add();
    }
    

This step simply uses our $this->Adder object’s add method to add the two numbers together.

The “Then” Step

/** 
     * @Then /^I should get (\d+)$/ 
     */
    public function iShouldGet($sum) {
    	if ($this->Adder->sum != $sum) {
    		throw new Exception("Actual sum: ".$this->Adder->sum);
    	}
    	$this->Adder->display();
    }
    

This step starts off by checking if the actual sum (retrieved using our $this->Adder object and its sum property) is not equal to the expected sum. If this evaluates to true that means we need to have Behat show a failure. To do so, we’ll just throw a new exception displaying the actual sum so we can compare. Otherwise, we call our display method.

Time to run the tests.

Running the Tests

Now that we have our features, scenarios, and steps laid out, let’s run our tests using the following command:

bin/behat
    

You should see the following success messages inside of your terminal:

You can ensure that your tests are running correctly, by simply breaking something in your Phpadder.php file so that it doesn’t run quite the same way your test expects it to. For example, if we change the add method to instead use subtraction, like so:

public function add() {
    	$this->sum = $this->a - $this->b;
    }
    

And then we rerun our tests: bin/behat. You can see in our terminal, we now have a failing test, because it’s no longer adding our numbers but subtracting them:

Conclusion

In conclusion, you can follow a small four step process for testing your PHP apps using Behat:

1. Define a Feature
2. Define a Scenario
3. Define Step Definitions
4. Run the tests using bin/behat

So, with just that small amount of code, we should now have a basic understanding of how to work with Behat to test our PHP applications. For more information about working with Behat please checkout their documentation.