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 the Jazzmutant Lemur, you’ll want to get familiar with Argos Interface Builder by Dimitri Diakopoulos using the great c++ framework openFrameworks.

Last summer I took part in Google Summer of Code as a mentor. Dimitri proposed a multitouch music interface builder and I thought it was a fantastic idea. An opensource lemur; who wouldn’t like that??? Dimitri was chosen as a student for GSoC and I was able to mentor him as he developed Argos. It’s come a long way, and with a little help from the opensource community, it has potential to be incredible!

Take a look at the video below to see Argos in use. You can find the source and a binary (for windows users) here: http://code.google.com/p/ofxargos/

Make sure to check out the release notes and official Argos website at http://argos.dimitridiakopoulos.com/ The application is still feature-incomplete, but quickly approaching a usable state! Dimitri can really use community support; so make sure to say ‘hi’ to him and get involved to make argos the next coolest opensource music interface!

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...

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/