Multitouch UI demo

MultiTouch UI controls
Click me for an interactive demo!

A few people have asked if they can have a play with the UI I showed in this blogpost/Vine so here it is. They are created solely using Greensock and CSS3, taking full advantage of the Draggable utility and ThrowPropsPlugin.

Please bear in mind this is a very early prototype and most of the components aren’t hooked up to anything yet.

A Bit of Background

As the web matures its abilities are no longer confined to the dark recesses of a tablet or computer screen – we can now code JavaScript to control hardware devices using systems like Arduino and Tessel. As a UI designer I find this software/hardware marriage very exciting – it allows me the chance to design controls and methods of interacting with real things in the way I want rather than the (usually) poorly implemented after-thought UIs that so many hardware devices end up with.

Who hasn’t bought a device, whether it be a washing machine, music player, TV and become utterly frustrated with the way the manufacturer has forced you to interact with it? And let’s face it, it’s usually the manufacturers and hardware designers who have just slapped on the most unintuitive interface to their product at the end of the production cycle – rarely does it seem that the UI and hardware were designed in tandem.

So it got me thinking – what if you could get simple components that are totally customisable to your needs? You might want to control specific actuators or servos on a device or maybe the brightness of a bulb or the rotation of a camera – this set of components would help you do that.

How They Work

Take the Brightness dial as an example (in the image above). The code to create this is as follows:

var brightnessDial = new UIDial().create({
   x:660, 
   y:226,
   size:160, 
   uiColor:'rgba(81,255,69,1)', 
   bgColor:'rgba(3,3,3,1)', 
   container:uiControls,
   label:'Brightness',
   initValue:1,
   onChange:function(val){
     TweenMax.set(uiControls, {css:{
       alpha:val.toFixed(2)
 }}) }
 });

Or a slider’s code would be something like this:

var hSlider1 = new UISlider().hSlider1.create({
   x:15, 
   y:220,
   width:420,
   height:50,
   uiColor:'rgba(255,44,117,1)', 
   container:uiControls,
   type:'horizontal',
   label:'Intensity',
   initValue:0.36,
   onChange:function(val){
      //control something snazzy here with 'val'
      }
 });

That’s it – super simple and the performance is super smooth too.

Here we create an instance of the UIDial, give it an X and Y position, tell it what colour to be and what its background colour is, which element to add it to, what its label is, what its initial value is (in this case 1 is full brightness) and finally what function to call when its value changes (this is where you would hook it into the device you wish to control, like a light or servo).

In this example the dial is simply controlling the alpha of the container in which it and all the other components are placed.

Currently there are 6 or 7 components (UISlider, UIRange, UIDial, UITimeline, UINotch, UIPlane, UIIncrement and SimpleCube all at different stages of development!).

When they change state they return their current value. Most of them return a value between 0 and 1. They are designed to run on desktop and tablets and work great with mouse and touch input. And as the title suggest they are multitouch – try it with 3 fingers on the Red, Green and Blue sliders!

The file size is super small too – with the Greensock library, jQuery and the UI component set (from which you can create as many instances as you like) it’s weighing in at a 235Kb. Because of how I began this project I am currently outputting it as Edge Animate files but you can use them in any jQuery and JS project – EA is not necessary as I abtracted it to plain jQuery/JavaScript.

However I intend to lose the jQuery dependency too (and just leave the almighty Greensock to do the heavy lifting) which will leave it at roughly 155Kb – not bad.

Things To Note

These components use Greensock’s Draggable utility which is free to use – they also use the ThrowPropsPlugin which gives them that lovely kinetic movement and accurate snapping – you will need to become a ‘Shockingly Green‘ member to use this plugin but I thoroughly recommend doing so – you won’t regret it and you get access to a metric shitload of other amazing stuff too. And don’t forget this is pure JS and CSS3!

I have others in development currently which are not shown here – a video timeline UI component and various other 3D things I’m trying out to see if they’re useful. I hope you enjoy fiddling about with it and if you’re interested to discuss them then please do get in touch.

View the MultiTouch UI Controls demo

If you’re interested, this is where I found my inspiration: Star Wars real-time renderer (from 01:20).

CodeCanyon Scripts & Snippets
Buy my favourite Adobe Edge templates on CodeCanyon!
Chris Gannon
Chris Gannon is CEO of FrameSpark Interactive and is an interactive designer, animator and emerging user interface enthusiast. His company creates bespoke, dynamic UIs and animated interfaces.

3 thoughts on “Multitouch UI demo

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s