Wall Pong is an interactive multi-player multitouch pong type game I wrote in AS3 a couple years ago. The aim is to get the ball into the opposing goal. You can see Wong within my Audiotouch OS software. I’ve been meaning to release the source code and game for quite some time and finally I had the chance to clean up the code (it still could use WAY more cleaning and probably re-factoring), but it’s in good enough shape for others to use.

I’m hoping to convert this version to use the new native touch api in flash CS5.

You can download the application on techsparked here!!

If you’re using Drupal, you’re probably using views. If you’re using views, than you’ve probably wanted to build a view that involved combining content and found out it was hard or almost impossible through the views UI.

For example, if you’ve ever tried to build a single view of all content (posts, comments, flags, relationships, etc) into a single list, you’ve probably found that you can’t. However, you can easily build independent post views, comment views, flag views, and relationship views.  Since that’s the case, why can’t we merge all these views into a single view through the views UI? Well you can, and this article hopefully will give the basic information needed to start merging your views into more complex results.

In this article, we’ll be building a basic activity stream to demonstrate the ability to

1. create custom queries for views,
2. merge our results,
3. create our custom query module, and
4. finally output through the views UI.

After some themeing, our results will look something like the following which is a combination of comments, flags (sparks), and posts (various content types):

Live DEMO:

You can see a live example on the bottom of http://techsparked.com/

DOWNLOAD EXAMPLE MODULE:

custom_views module custom_views.zip

Date:	January 1, 1970
MD5 Hash:	580adbe74f69b884e3b6eda6c547db83

1.5 KiB 24 Downloads Details...

Introduction:

Before we begin, we have to know what we’re making. We’re going to be creating a list view (you can choose another type if you please) of posts and comments from our site ordered by date. Later, you can choose to add more activity into your view like flags (likes), relationships (who’s following whom), etc. but for now we’ll keep it simple since the same principle for 2 types of information also applies to 5 types.

Step 1: Making the query

To create our activity stream view, we’re essentially going to combine two individual views into a single query. We’re going to take advantage of the views UI preview in order to get our query (in case we don’t know too much about SQL queries).

1. Create a new temporary view (we’re not actually going to save it) called recent_posts (or similar).
2. Add fields for: user name, user picture, node title, node post date, and node type.
3. Add a sort criteria for Node: poste date.
4. Add a filter for Node: published.



Your view should look like the above

5. In the views ‘live preview’, click the preview button.
6. Scroll down to where the ‘query’ is shown and copy and paste this to a temporary text file on your desktop. We’re going to need this query code in a bit.



7. Create a new temporary view (we’re not actually going to save it) called recent_comments (or similar).
8. Add relationship for: Comment: node and Comment: User.
9. Add fields for: user name, user picture, node title,  comment title, and comment post date (all fields related to their relationships).
10. Add a sort criteria for Comment: poste date.
11. Add a filter for Node: published.



12. Scroll down to where the ‘query’ is shown and copy and paste this to the same file you created in step 6. We’re going to need this query code in a bit.

Step 2: Combine and merge the queries using UNION

We should now have 2 views queries copied to a text file that look something like:

//posts view
SELECT node.nid AS nid,
users.picture AS users_picture,
users.uid AS users_uid,
users.name AS users_name,
users.mail AS users_mail,
node.type AS node_type,
node.title AS node_title,
node.created AS node_created,
history_user.timestamp AS history_user_timestamp,
node.changed AS node_changed,
node_comment_statistics.last_comment_timestamp AS node_comment_statistics_last_comment_timestamp
FROM node node
INNER JOIN users users ON node.uid = users.uid
LEFT JOIN history history_user ON node.nid = history_user.nid AND history_user.uid = ***CURRENT_USER***
INNER JOIN node_comment_statistics node_comment_statistics ON node.nid = node_comment_statistics.nid
WHERE (node.status <> 0)
ORDER BY node_created DESC

//comments view
SELECT comments.cid AS cid,
users_comments.picture AS users_comments_picture,
users_comments.uid AS users_comments_uid,
users_comments.name AS users_comments_name,
users_comments.mail AS users_comments_mail,
comments.subject AS comments_subject,
comments.nid AS comments_nid,
node_comments.title AS node_comments_title,
node_comments.nid AS node_comments_nid,
comments.timestamp AS comments_timestamp
FROM comments comments
LEFT JOIN node node_comments ON comments.nid = node_comments.nid
LEFT JOIN users users_comments ON comments.uid = users_comments.uid
WHERE (node_comments.status <> 0)
ORDER BY comments_timestamp DESC

1. Views adds a few things that we really won’t need. So we can remove all the bold parts above to clean up our queries. The results should look like:

//posts view
SELECT node.nid AS nid, //node id
users.picture AS users_picture, //picture
users.uid AS users_uid, //user id
users.name AS users_name, //user name
node.type AS node_type, // node type
node.title AS node_title, // node title
node.created AS node_created //post date
FROM node node
INNER JOIN users users ON node.uid = users.uid
WHERE (node.status <> 0)
ORDER BY node_created DESC

//comments view
SELECT comments.cid AS cid, //comment id
users_comments.picture AS users_comments_picture, // picture
users_comments.uid AS users_comments_uid, //user id
users_comments.name AS users_comments_name, //user name
node_comments.type AS node_type, //node type
comments.subject AS comments_subject, // comment title
comments.timestamp AS comments_timestamp //post date
FROM comments comments
LEFT JOIN node node_comments ON comments.nid = node_comments.nid
LEFT JOIN users users_comments ON comments.uid = users_comments.uid
WHERE (node_comments.status <> 0)
ORDER BY comments_timestamp DESC

2. The result above are much cleaner. We’re going to merge these two queries by using UNION. UNION combines the results of multiple SELECTs. If you’re not familiar with UNION, i’d recommend reading this. In order to to create a union you have to have the same amount of SELECT fields. Luckily, when we cleaned up our view we were left with 7 SELECT fields (id, picture, user name, node type, title, post date). If you don’t have the same amount of fields in each query, you’ll need to create the same amount by modifying your queries or adding a ‘NULL’ select in the query that has less fields. To make a UNION query of the above is simple. Copy and cut the ORDER BY node_created DESC from the end of the first query and replace the ORDER BY comments_timestamp DESC from the end of the second query with it.  Then, add ‘UNION‘ bewteen the two queries and you’re done! Results below:

//posts view
SELECT node.nid AS nid, //node id
users.picture AS users_picture, //picture
users.uid AS users_uid, //user id
users.name AS users_name, //user name
node.type AS node_type, // node type
node.title AS node_title, // node title
node.created AS node_created //post date
FROM node node
INNER JOIN users users ON node.uid = users.uid
WHERE (node.status <> 0)

UNION

//comments view
SELECT comments.cid AS cid, //comment id
users_comments.picture AS users_comments_picture, // picture
users_comments.uid AS users_comments_uid, //user id
users_comments.name AS users_comments_name, //user name
node_comments.type AS node_type, //node type
comments.subject AS comments_subject, // comment title
comments.timestamp AS comments_timestamp //post date
FROM comments comments
LEFT JOIN node node_comments ON comments.nid = node_comments.nid
LEFT JOIN users users_comments ON comments.uid = users_comments.uid
WHERE (node_comments.status <> 0)
ORDER BY node_created DESC

3. This is going to merge our two views (posts and comments) and sort them by post date. Meaning, intstead of having 2 seperate views (one after the other), we now have a single view query that sorts both views (together) by node_created/comments_timestamp.  We just created our custom query! Now it’s time to prepare it to be fed into views

Step 3: Creating the custom query module

Now that we have our custom query ready to feed into views, we have to create a module to feed it into the views UI.  Sound scary? It’s not – I’ll be giving you all the pieces below.

1. Create a folder on your desktop called custom_views
2. Create a text file on your desktop called custom_views.info
3. Inside the file, paste:

; $Id$
name = Custom Views
description = Custom views query for this site.
core = 6.x

4. Save this file.
5. Create a text file on your desktop called custom_views.install
6. Inside this file, paste:

<?php // $Id: custom_views.install

/**
* Implementation of hook_install()
*/
function custom_views_install() {
// Set the module weight so it can override other modules.
db_query(“UPDATE {system} SET weight = 99 WHERE name = ‘custom_views’”);
}

/**
* Implementation of hook_uninstall()
*/
function custom_views_uninstall() {
// Remove the module from the system table
db_query(“DELETE FROM {system} WHERE name = ‘custom_views’”);
}

7. Save this file.
8. Create a text file on your desktop called custom_views.module
9. Inside this file, paste:

<?php // $Id: custom_views.module,v 1.272.2.1 20010/05/07 12:25:24 goba Exp $

function custom_views_views_pre_execute(&$view) {

if($view->name==”SiteActivity”) {//if we don’t do this it’ll alter ALL our view queries with this one!

$view->build_info['query']=”//custom query goes here“;

$view->build_info['count_query']=$view->build_info['query'];  // count_query determines the pager.  Do this so the right item count is returned.

}

}

/**
* This module is Views 2.0 enabled.
* Implementation of hook_views_api().
*/
function custom_views_views_api() {
return array(‘api’ => 2.0);
}

10. Inside the custom_views_views_pre_execute function where it says ‘custom query goes here‘, paste the custom query we made in step 2 . Result below:

<?php // $Id: custom_views.module,v 1.272.2.1 20010/05/07 12:25:24 goba Exp $

function custom_views_views_pre_execute(&$view) {

if($view->name==”SiteActivity”) //if we don’t do this it’ll alter ALL our site’s view queries with this one!
{
$view->build_info['query']=
”
SELECT node.nid AS nid, //node id
users.picture AS users_picture, //picture
users.uid AS users_uid, //user id
users.name AS users_name, //user name
node.type AS node_type, // node type
node.title AS node_title, // node title
node.created AS node_created //post date
FROM node node
INNER JOIN users users ON node.uid = users.uid
WHERE (node.status <> 0)

UNION

SELECT comments.cid AS cid, //comment id
users_comments.picture AS users_comments_picture, // picture
users_comments.uid AS users_comments_uid, //user id
users_comments.name AS users_comments_name, //user name
node_comments.type AS node_type, //node type
comments.subject AS comments_subject, // comment title
comments.timestamp AS comments_timestamp //post date
FROM comments comments
LEFT JOIN node node_comments ON comments.nid = node_comments.nid
LEFT JOIN users users_comments ON comments.uid = users_comments.uid
WHERE (node_comments.status <> 0)
ORDER BY node_created DESC”;

$view->build_info['count_query']=$view->build_info['query'];  // count_query determines the pager.  Do this so the right item count is returned.}
}

/**
* This module is Views 2.0 enabled.
* Implementation of hook_views_api().
*/
function custom_views_views_api() {
return array(‘api’ => 2.0);
}

11. Save this file. We just created our custom views module.
12. Now upload your custom_views module to your website and enable it like normal.

Step 4: Output our activity stream through the views UI

Now that we have our new module, with our custom query added to our site, it’s time to create our final view.

1. Create a new node view and call it ‘SiteActivity‘. We’re picking this name because that’s what we put in our module “if($view->name==”SiteActivity“)”. If you want to call it something else, you’ll need to change the name in the custom_views module too.
2. Since the query we made had user picture, user name, node type, title, and post date, we’ll add fields for all of those.



3. You can arrange these how you want. Preview your new view and see what it looks like! Hopefully it should be a combination of other views you created before, but now they’re combined into a single list!
4. The original example in the beginning of this post goes a bit further (probably covered later in a part 2 of this tutorial). It uses views custom fields in order to take all the results and images based upon the content type and activity type (project, flag, comment). With a little creativity you can do the same.

Final Thoughts:

Most of the themeing parts of this tutorial will be saved for another time (part 2) since they deserve a separate part. In this example we covered how to combine multiple views queries and sorting based on a common part (post date). The method of creating a custom query and module to input in views should work with any custom query and not just UNIONs. So there is a lot of room for creativity. I hope you enjoyed this tutorial. I don’t claim to be an expert by any means and so please let me know if there are problems or insights that could improve upon this process. If there are any steps missing or clarification needed – let me know so I can make the necessary changes/additions.

DOWNLOAD EXAMPLE MODULE:

custom_views module custom_views.zip

Date:	January 1, 1970
MD5 Hash:	580adbe74f69b884e3b6eda6c547db83

1.5 KiB 24 Downloads Details...

If you’re familiar with multitouch, you’re probably familiar with Jeff Han’s TED demo. In it, there’s an example of a lava application that shows an interesting use of multitouch.

A few months ago, I was trying to work on something similar.

The following is what I came up with. I never had the chance to finish and was only able to add mouse support at the time. So, here’s a preview of what might come to a multitouch screen near you at some point in the future.

It’s pretty slow since it uses bitmapdata and filters and the code is a bit of a Frankenstein of information I found online about ‘metaballs’. If I get a chance, i’ll see if I can get the code out.

Meanwhile, have some fun! Click around and push/move the lava!

What do you think? Lava enough for you?

On my last project I had to use a gesture to initiate an event. Due to this, I recently started experimenting in creating a simple multitouch version of some gesture engines that are available. I’ve come across three that are already available in AS3 and chose to start with the $1 gesture algorithm http://depts.washington.edu/aimgroup/proj/dollar/. It only seems fitting to start with this one since Andy Wilson of microsoft research (and many multitouch devices) had a hand in it’s development.

Like most algorithms, this one matches points drawn with a template that’s already stored. After the gesture is finished, it is matched up against templates in the database and given a percentage of how much it matched it’s closest template (from 0-1). One of the coolest things about this engine is that it’s orientation-less. This means, no matter how you’re orientated on the surface it’ll still recognize the gesture.

The main thing I contributed to the already created $1 gesture port was the ability to have multiple simultaneous gestures occurring at once. This means a single user can perform more than one gesture at a time or multiple users can perform their own gestures while someone else is using the device. However, there are flaws with this algorithm that I’m not fond of  that are performance (speed) related. I’ve only tested with up to 4 touches though so if someone can test with more, please let me know how it runs.

Currently, the demo isn’t fully segregated form the core gesture classes and therefore there’s still some work to be done so that the gesture classes can be used without the demo itself. In the meantime, go ahead and test this out and make sure to give some feedback; it also works with the mouse. The demo allows you to draw a gesture and if it matches on in the database, that gesture will ‘light up.’

The tolerance is set at 80% and therefore if a gesture doesn’t match 80% of a template, it’s not recognized. Both the source and swf file are included. To test the demo, just load up the TouchGestureDemo.swf in flashplayer or a web browser.

Stay tuned for more on this as i’ll show the basics for using this in your own projects in case you need help.

Thanks to Tito (Mathieu Vibrel) and the pyMT crew for pointing me in the right direction.

Gesture Demo gesture.zip Version: 1.0

Multitouch Gesture Engine Demo

Author:	Seth Sandler
Date:	October 13, 2009
MD5 Hash:	f59b34d4779b6959bfd2a62d0dcf00df

102.8 KiB 4950 Downloads Details...

For a while I’ve been interested in emergent behavior where simple rules can create complex behavior. One of the most known examples of such behavior is Craig Reynolds ‘boids’ where a few simple rules can recreate the flocking behavior of birds.

I recently came across a great and clean example of some boids code by soulwire (make sure to check out his whole site; it’s great). Since we’ve seen various examples of this behavior on multitouch tables (like on the iBar), I decided to add some basic touch support to soulwire’s example. So, now we have it…multitouchable boids!

Right now, the demo only supports multitouch (TUIO), but mouse interaction can be easily added back in. I’ve purposely left this demo application fairly open and non-spectacular so that others can looks at the code and easily make simple changes that’ll drastically affect the results and interaction. I only spent about an hour adding in multitouch support and playing with various values, so there’s plenty more to experiment and add.

Currently there’s 3 buttons to change the behavior.

1. The boids chasce eachother and move towards objects (fingers) close to them
2. The boids wonder around randomly and move towards objects (fingers) close to them
3. The boids chase eachother and flee objects (fingers) close to them

Documentation is included and provided by soulwire. Make sure to check out the original website by soulwire so you know the possibilities and can see a few more examples.

Please let me know what you think, any questions you have, and ideas that could help expand this example.

Download:

Flocking Demo boids_src.zip Version: 1

Author:	Seth Sandler, soulwire
Date:	November 18, 2009
MD5 Hash:	4b9a5dfea4413f460d4ab4b0a4048a9b

124.0 KiB 436 Downloads Details...

The long awaited Multitouch Technologies book authored by members of NUI Group (http://www.nuigroup.com) has officially found it’s first release! As one of the co-authors of the book, I am proud to see a final initial version come to fruition. The book, which consolidates articles from the NUI Group Wiki, includes sections on how to build Multi-touch devices, multitouch software resources, a glossary of terms and more. I  believe, as the book develops further, this will be the best resource for multitouch information on both the web and in print.

If you’re unfamiliar with NUI Group, I suggest reading the about page http://nuigroup.com/log/about/. NUI Group is currently the single best resource for multitouch technology and hopefully will become the largest database for Natural User Interfaces and emerging technology. If you’re interested in do-it-yourself hardware/software, HCI, or multitouch interaction, NUI Group is the place to be.

If you like the book, leave some feedback below! If you’d like to contribute to future sections of the book, you can get involved here: http://nuicode.com/projects/wiki-book

Download the Book |  Submit Feedback |  Join the Discussion

Eugene has just ported Memo’s fluid solver work to AS3 http://blog.inspirit.ru/?p=248. With the source now out, I was able to quickly add multitouch support and it works great! Thanks to cyandesign and simpleex for keeping me on my toes.

A couple notes, the touchlib AS3 classes had to be corrected since they currently don’t send dX and dY values which the fluid solver needs to calculate directional velocity. Other than that, things went fairly smoothly and took little time to make touch sensitive.

Click the above image to play

Download:

Multitouch Fluid Solver FluidSolver.zip Version: 1

Multitouch Fluid Solver

Author:	Seth Sandler, Mehmet Atken, Eugene
Date:	November 18, 2009
MD5 Hash:	1c6974ecb841b09e6fdfbbe3539ca52e

260.9 KiB 3274 Downloads Details...

If you try this out, leave a comment here and let me know how things go. Video responses are welcome also!

Well, it’s about time I released another application right? If anyone has ever played Bloom on the iphone, I’m sure you’ll recognize my port from iphone to table.

If you’re not familiar with bloom, it’s a very simple music creation application. Press anywhere on the screen to create circles that grow and ‘bloom.’ As they fade out and re-appear, they play a note. The note is based on the x-axis. As you move right, the notes go higher.

Click the above image to play

How to use:

-Press on screen (mouse, touch, multi-touch)
-Rollover/touch/click already created circles to remove them and their sound
-Press the upper left ‘clear’ button to clear all circles and sounds on screen.

Downloads:

Source Code: 

Bloom Source Code bloom_src.zip Version: 1

Author:	Seth Sandler
Date:	November 18, 2009
MD5 Hash:	37030ba99feb9663b98f0c755061bcca

1.2 MiB 21861 Downloads Details...

Binary Application:

Bloom Application bloom.zip Version: 1

Author:	Seth Sandler
Date:	November 18, 2009
MD5 Hash:	d4302be06f674dd3f68b7d38c52256d6

1.9 MiB 21021 Downloads Details...

The source folder should include everything you need to run the application. You don’t need to copy anything into your current AS3 directory. I’ve commented the Main.as file very well and it should give a good look into making simple applications with the AS3 Touch API.

Thanks to Christian for the background color tweening effect.

Check out my Bloom thread I started here: http://nuigroup.com/forums/viewthread/3867/

Check out olo:idea video below that shows the Bloom running on a large multitouch display.

Check out bassmang5 video below that shows the Bloom and my other applications running on his MTmini! You can see his post on NUIGroup here: http://nuigroup.com/forums/viewthread/3911/

Here’s some pictures from the second event where AudioTouch was on display.

New video of the new system that loads and unloads applications. Also, the desktop is now sending out OSC message to PureData to create some sounds based on finger number and position on screen.