Daniel Nitsikopoulos.

An introduction to HTML5 canvas: part 1

Daniel Nitsikopoulos — Wed, 15 Feb 2012 20:27:16 +0000

THE

Firstly, I’d like to point out that elements drawn in the canvas are not part of the DOM and therefore cannot be bound to events. If you want your elements to respond to events, I would suggest using SVG instead.

Ok so we have that out of the way.

I’ll be using some examples to help illustrate how canvas works during this article.

The first thing to understand about canvas is that you don’t actually draw on the canvas element itself, but rather a canvas “context” which the javascript API provides. The context is basically a drawing stack that holds all of our drawings. So let’s go ahead and define the context.

var canvas2D = document.getElementsById('myCanvas').getContext('2d')

At the moment we’re limited to a 2D context. From now on, when we want to interact with the contents of the canvas, we’re going to be calling methods on ‘canvas2D’, a full list of which can be seen here.

So let’s get started by drawing a rectangle. To do so we’re going to use the fillRect method which is defined in the spec like so.

void fillRect(double x, double y, double w, double h);

which means all we need to do is specify the x and y co-ordinates for the top left corner as well as its dimensions (width and height). Like so:

context2D.fillRect(15,15,100,200)

which will make a rectangle 15px in from the top and left edges and it will be 200px high and 100px across. Simple.

Fig1. Rectangle

By default it looks pretty boring right? right! If you don’t specify any styles, the defaults are black. To define styles we can use fillStyle to pick the fill colour and strokeStyle for the stroke. Let’s give it a go:

context2D.fillStyle = 'pink';
context2D.strokeStyle = 'green';
context2D.fillRect(15,15,100,200);
context2D.strokeRect(15,15,100,200);

Fig2. Coloured Rectangle

Much better!

What if we wanted more rectangles but we wanted to change the colour?

Well thankfully this is just as simple, though takes some getting used to. Remember that stack I mentioned earlier? Well this is where it really comes in to play. To achieve something like Fig3. we have to manipulate the layers of the stack.

So if we want to make a pink rectangle, a green rectangle, then a pink one again, we’d do something like:

Define the style for the pink rectangle
Draw the pink rectangle
Save our state (remember the place in the stack)
Define our green rectangle
Draw the green rectangle
Now rather than redefining that pink rectangle, we’re just going to grab the state from before.
Draw the pink rectangle

Like so:

context2D.fillStyle = 'pink';
context2D.fillRect(15,15,100,200);
context2D.save();

context2D.fillStyle = 'green';
context2D.fillRect(130,15,100,200);

context2D.restore();
context2D.fillRect(245,15,100,200);

Fig3. Using state

Using the save and restore methods, we push and pop the current state onto our canvas stack, so there’s no need to redefine an old state if you have already saved it.

I hope you’ve enjoyed this very brief scratch-on-the-surface look at canvas. In the next few posts I’ll be looking at more advanced methods such as rotation line drawing and curves as well as image/pixel manipulation so stay tuned.

-Dan.

Getting started with AJAX.

Daniel Nitsikopoulos — Thu, 12 Jan 2012 22:30:26 +0000

When it comes to building an interactive web application, creating a seamless interaction between the client-side and the server-side can be very important depending on the experience you want to give your user. The trouble is, however, that most server-side languages can’t access client-side code, and therefore can’t relay that information back to the server to execute or save it and vice versa – without a page refresh anyway, and that’s what we’re aiming to avoid here. For most people, getting started with AJAX can be a daunting thing which is why I’m writing this post as an introduction. I won’t be presenting any code, but rather providing a walkthrough of the steps you will need to take to complete an AJAX request.

So let’s get started!

Trigger and Listen
To start things off we’ll need to tell our browser when to send a request . This can be as simple as adding a listener that listens for a button’s click event.
Collect our data
Most of the time, AJAX is used to submit a form so at this point, it’s a good time to collect each field’s value and prepare something to send to the server. This can take many forms, depending on how your server handles incoming requests. The most common way however is just to build a query string and tack it onto to the end of the URL you want to send your AJAX request to. If your server is set up to accept JSON, you could do that too.
Make the request
Now that we have everything we need, we can send our request! Our request should include the data we just collected as well as a HTTP verb that describes the action we’re taking (GET or POST, if you’re making a change to a the database, it will most likely be POST) that way your server will know how to handle the request. If you sent data using a query string, you will be able to access it with PHP using the global $_POST variable.
Providing feedback
So now the request has been made, that’s all yes? No. We now need tell our user that what they have done has succeeded or failed. Luckily our server responds with a success or failure message that we can listen for and provide the appropriate feedback, such as a success flash message or whatever fits in your UX guidelines.

Not so hard after all! And this is about as complicated as it gets, you can listen for other events such as drag and drop, and send whatever data you want to your server, but this is just a basic illustration of how to get started. I wish you all the best and if you have any questions please ask away!

Super simple panning background

Daniel Nitsikopoulos — Thu, 17 Nov 2011 22:00:01 +0000

A client came into work today and wanted a section of his site to have a full screen background image that pans left or right depending on the side of the screen your mouse was hovering. It was something something I had never done before but was pretty sure I could come up with a technique to get the effect working rather quickly. So a few lines of jQuery later and hey presto a super cool panning background image!

You can check out the Demo here or keep on reading to pick up “teh codes”.

1. The Setup!

Grab yourself a div, any div and let’s give it some basic properties:


#background-thing{
  background: url(http://www.dnitza.com/experiments/fullscreen-pan/stairway.jpg) no-repeat 0 0 scroll;
  background-size: cover;
  height: auto;
  left: 0;
  min-height: 100%;
  min-width: 1024px;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
}

2. Make some magic of the javascript variety

Don’t forget to include jQuery.


$(document).ready(function(){
$('#background-thing').mousemove(function(e){
  var mousePos = (e.pageX/$(window).width())*100;
  $('#background-thing').css('backgroundPosition', mousePos+'% 0');
});
});

And voila! A nifty panning background image!

Switch design in iOS UI

Daniel Nitsikopoulos — Sun, 13 Nov 2011 05:31:00 +0000

There has been a rather strong interface design trend lately in the form of the on/off switch that has replaced two radio buttons. For example rather than picking a box to alter the state of a particular option, we now have a single switch or button that can be slid left or right, up or down or depressed/raised to select the state of the particular option it represents.

At first I thought this was a great idea, especially because it was executed so well by Apple in their first iPhone OS. The options were clear and the UI design was definite. As of late, however, I have seen a rather large handful of mobile apps that have used this same concept but executed it rather poorly. Call me stupid, but the other day I was checking in with Foursquare and couldn’t figure out which state of their “share on Twitter” button meant “off”.

I get that space is limited, and I love this concept as a solution, however the ambiguous nature of the visual had me thinking (and that’s not a good thing!).

Comparing this to something like Roamz:

We have the same deal, a small space to provide a set of switches except this time it is much more clear, we are told that Twitter, Facebook and Foursquare are all off. While I’ll admit Roamz’s UI isn’t as elegant as Foursquare, Foursquare sacrifices it’s clarity for a more compact design.

I’m probably making it out to be worse than it is, but it’s something we need to nip in the bud now rather than later, especially since a whole bunch of paradigms already stand, such as “pressed means selected”.

By the way, the Foursquare shot above was going to share with twitter, Facebook was disabled even though it was “pressed in”.

Reusable Buttons (CSS included!)

Daniel Nitsikopoulos — Thu, 03 Nov 2011 04:03:34 +0000

Just some reusable buttons and inputs. Built with a whole bunch of custom SCSS mixins so it’s easy to tweak any part of the look and feel. Have a look here!

Avalanche Cliff Jump

Daniel Nitsikopoulos — Sun, 16 Oct 2011 12:24:43 +0000

My stomach sank a little there. You’d have to have nerves of steel to pull that off.

The city of spires.

Daniel Nitsikopoulos — Sun, 18 Sep 2011 01:16:30 +0000

Going through some photos from our travels across Europe and having a play with aperture.

Using a NikonD3100 with the stock 18-55mm lens.

A Sass linear gradient mixin

Daniel Nitsikopoulos — Sat, 10 Sep 2011 09:08:38 +0000

Here’s a nice and simple Sass mixin for a linear gradient including the legacy webkit declaration and some very awkward looking microsoft filters.


@mixin linear-gradient($top, $bottom, $base){
    background-image: -webkit-gradient(linear, center top, center bottom, from($top), to($bottom));
    background-image: -moz-linear-gradient(top, $top, $bottom);
    background-image: -o-linear-gradient(top, $top, $bottom);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#{$top}", endColorstr="#{$bottom}");
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="\"#{$top}\"", endColorstr="\"#{$bottom}\"")";
    background: linear-gradient(right top, $top, $bottom);
    background-color: $base;
}

EDIT 12/1/12: Updated with the new spec

Melbourne Wallpaper

Daniel Nitsikopoulos — Wed, 07 Sep 2011 14:09:51 +0000

A photo of melbourne in the late afternoon from federation square.

Other sizes:

Setting up Rails 3.1 with RVM

Daniel Nitsikopoulos — Thu, 01 Sep 2011 07:12:06 +0000

Just want to do a quick how to post for those out there wanting to setup Rails 3.1 on RVM and not effect their existing rails 3.0.x setup. To do this we take advantage of RVMs gemsets.

First thing to do is make sure you have the latest version of RVM


$ rvm get latest

or rvm update, depending on the version of rvm you have installed.

next thing to do is create a new gemset for Rails 3.1


$ rvm gemset create rails31

then switch to it


$ rvm gemset use rails31

and finally install rails 3.1


$ gem install rails

And there we go! nice and easy!

If you want to switch back to your rails 3.0.x gemset and haven’t setup a gemset for it, it should still be setup in the default ‘global’ gemset which you may need to reinstall rails 3.0.x into and do all your bundle installs.

So now what?

Start a new project and have a look around, you’ll notice that the biggest difference is the assets folder in the app directory which holds all your sass and coffee script files.
Take a look at the Sass and Coffee Script documentation to get started with them
Keep an eye on Railscasts for some more in-depth rails 3.1 focussed episodes