When I was building up a new silverlight project based on existing silverlight 3d template, I met a problem that said ‘error  : Unable to read the project file ‘OverlappingTabs.cspro … C:\Program Files\MSBuild\Microsoft\Silverlight\v4.0\Microsoft.Silverlight.CSharp.targets” was not found. Confirm that the path in the declaration is correct, and that the file exists on disk.’

This problem happened because of the support of silverlight, as the visual studio 2010 did not have the required silverlight supporting files installed. To fix this problem, just setup ‘Microsoft® Silverlight® 5 Tools for Visual Studio® 2010 SP1‘.

This post demonstrates the breaking down of xtion pro into parts. For more pictures reading the whole post.

When I was writing a simple example of OpenCV below, an repeating error happened as ‘VIDIOC_QUERYMENU:Invalid argument’.

Is this because the Qt for drawing the output of openCV?

The code

The code that caused the above error is like this:

The error happened when initialising the webcam, but the webcam was working fine even though the errors were given in the console window.

The fix

From a post from stackoverflow, this problem was

with Qt handling its own event loop and thus the event loop of OpenCV is starved and never get run.

The way to get them to work together is quite simple: Display your OpenCV as a QPixmap (by convert your image to QImage then use QLabel to display it). Then add this QLabel to your QWidget. Your QWidget can either be embedded or become the main widget of your QApplication.

But it may not be so easy to get rid of, as other posts also mentioned that

You can’t mix openCV’s control of the event loop and qt’s app.exec

Either use the Qt flavour of the cvNamedWindow, or simple grab images from openCV and display them in a QLabel. Or better inherit from QWidget and write your own QImage painter

void OpencvWidget::paintEvent(QPaintEvent*)
{
//m_win is the window size
QPainter p(this);
p.drawImage(m_win,m_image,m_image.rect());

}

The best way to fix ‘VIDIOC_QUERYMENU:Invalid argument’

I have faced a similar problem recently (displaying webcam information using OpenCV and Qt as the final GUI). The best way that I find out to play the video (which is basically a set of images) is to use a GLWidget.

This is a brief summary of the work that has been done previously, including the ubuntu 11.04 install, Xtion depth camera setting, openCV 2.3.1 installing, and the final openNI install and configure.

Because this is an overview of the past work, the source codes are not included here.

Ubuntu 11.04 on pandaboard

The installation of Ubuntu 11.04 in the pandaboard did spend me some time. Since there was no hard drive in the pandaboard the SD card was specified to play that role. This means the whole Ubuntu 11.04 system should be written to the SD card. Especially, the becaue the pandaboard was based on ARM cup, it needed a special version of ubuntu – a pre-install ubuntu version for OMAP4. Downloading the system image, then the system install stared.

The hard part I met was not in the downloading, but the image system writing. Since the image was formated in RAW image, normal image burning software e.g. nero was not able to burn such image. Although the official instruction in ubuntu provided the instructions of burning the system image within three different systems windows, linux, and mac.

The instruction of windows system was not working. A disk writer software called ‘disimagewriter’ did not work functionally, at least in my and my coleagues’ computers. And currently, there was no other software that could do the same thing. I had a macbook but unfortunately the official instructions were not lucky to me.

Finally I found a shortcut. I downloaded a software to mount the RAW image as a system drive, and then used another software to copy the whole disk drive to another. In other words, I copied the RAW image -based drive to the SD card drive. It turned out successfully. The details can be reached here.

After an installation the ubuntu now was running on the pandaboard – feels pretty good, but the wifi signal sucked.

Webcams and the Xtion depth camera

Install openCV 2.3.1 in Ubuntu 11.04 with pandaboard

Ubuntu systems have good supports for webcams, but most of these are based on normal x86/x64 systems, not for ARM systems. I was worried about this problem, as the cameras to use with the system were quite special – not only the rgb webcams, but also the depth camera from ASUS Xtion pro camera.

A good way to use the cameras and to get proper drivers is to install some universal drivers, such as v4l, and ffmpeg.

During the install of openCV in the system, these libraries were particularly important.

Install openNI, NITE and depth camera driver for natural interaction app development

Install openNI for ARM-linux was quite easy, as there were three key components ready to download in the openni.org .

Downloading the unstable versions – openNI binary for ARM, sensor openNI for ARM, unzipping the packages and using the sudo ./install.sh’ command to complete the install.

* be aware of that, there is currently no openNI middleware package for ARM -based linux system, which means, some of the advanced features of openNI such like ‘user generators’ and ‘skeleton generators’ could not be used. The middleware for linux x86 was tested, but with no luck. The error’ one or more of the following nodes could not be enumerated‘ was actually caused by that factor.

Anyway, I ve got rgb and depth images to use. Hopefully the middleware for arm-linux comes out sooner.

The summary

It is hard to describe all details in a short post. As posted in the previous articles, the lessens learnt from the whole procedures are valuable, and more important, I wish these would be shared to give guidances to other people’s work.

ERROR – ‘One or more of the following nodes could not be enumerated:’

STATUS: not solved yet – still a big headache

Xn::UserGenerator and OpenNI

Install OpenNI in Linux with Arm is never a easy job – few people work on it – most of the work is based on windows and kinect rather than ubuntu and xtion and the arm board, and little experience is shared over the internet. So when I tried to run the usertracker example from the sample folder, I got this error with no luck or idea.

The thing is that, I installed OpenNI, NITE and driver, that referred to the install work of others – sorry not to mention a few here. The simpleviewer example worked fine, the image and depth maps were successfully captured.

But, the problem happened when – creating usergenerators, like:

Help needed

ImageGenerator and DepthGenerator have been tested with well working. Any other generators do not work, and keep giving the same error.

Any ideas would be very much appreciated!

When I moved the openCV development platform from the home to the office, a wired thing happened – the programme that I debugged smoothly in the home did not work at all in the office – even the simplest openCV camera view example, and the error said that – ‘HIGHGUI ERROR: V4L: index 0 is not correct‘ – but nothing of openCV configurations were changed at all!

So, where was the error from and, how to fix that wired error?

What caused this error?

Firstly I searched google for ‘HIGHGUI ERROR: V4L: index 0 is not correct’. This issue should be relevant with V4L.

Some pages the search results suggested to remove the v4l in Ubuntu, and then reinstall it again cleanly.

Some others suggested that re-configure and compile the openCV 2.3.1 might be solving the problem – as there was a file called ‘cvcap_libv4l.cpp’ in the source compiling folder, and a bug function was called in that file – find a line with ‘mman‘ function, and it supposed to be ‘libv4l_mman‘.

But, reconfiguring and re-compiling the openCV? That would take ages!

The unexpected solution

Before starting the re-compiling thing, be aware of this – the camera, yes, the camera!

Changing another camera may help? Why not bother to have a dead try?!

Oh-my— my camera was not plugged in!!!

Plugged in the camera, bingo~ everything worked fine.

Appendix – reading images from the webcam

This is a simple example of capturing live images from webcams using the new installed OpenCV 2.3.1 in the Ubuntu. The relevant information of OpenCV 2.3.1 install can see my previous posts -

Installing openCV in Ubuntu with pandaboard part 1
Installing openCV in Ubuntu with pandaboard part 2
Installing openCV in Ubuntu with pandaboard part 3 – the network proxy
Installing openCV in Ubuntu with pandaboard part 4 – compiling openCV 2.3.1
Installing openCV in Ubuntu with pandaboard part 5 – running openCV 2.3.1 examples, and
Tutorial: A Comprehensive Guide to Installing and Configuring OpenCV 2.3.1 on Ubuntu

This simple example includes lines of source codes using the new OpenCV API, for your convenience.

The source code

The source file compiling

Save the source file as ‘readwebcam’ for example, go to the directory containing the file.

Open the terminal, and type in the command like:

Then run it:

Here it is! Now let’s start rocking the hand gesture recognition!

This post describes an error and its solution in ffmpeg make for openCV install. It is based on Osman’s comprehensive troubleshooting of openCV 2.3.1 installing and configuring, but adds an additional error – ‘[libavutil/libavutil.so.51] Error 1‘ and the solution.

This error happens when running ‘make’ command after the ffmpeg configuration. It is a fatal error which directly stops the make process and fails the ffmpeg install.

why ‘[libavutil/libavutil.so.51] Error 1′ happens

Osman’s configurations for ffmpeg install are like this:

This was used in my first ffmpeg install, and was added with another line as:

But the result turned out this error – [libavutil/libavutil.so.51] Error 1

The solution

It was suggested over the internet that this problem was caused by the lack of ‘libvpx’ – this was essential to be used with ‘–enable-shared’.

So, clean the previous make using ‘make clean’ or ‘make distclean’, then re-configure the install as:

Then ‘make’ – bingo~ errors gone!

Thanks to the comprehensive troubleshooting guide to opencv installation posted by Osman, some install errors could be referred and fixed. But some errors are not included in that guide, as the chance of the error is various.

The point of this post is to add another minor error that encountered in my v4l making for opencv installing.

‘QMainWindow: No such file or directory’

‘No such file or directory’, this type of error used to be caused by the lack of some libraries not installed yet. The potential ways to fix these are to install the lacked libs, of course. But it may take a little time to check which libs are lacked, as the error message used to tell limited information.

In this example, ‘QMainWindow’ turned out to be relevant with libqt4-dev after a quick search in the internet. So, using the command below could easily solve that problem.

Carrying on the installation until it finishes. Then redo the v4l make, binggo~ the problem’s gone!

The initial outcomes of the OpenNI installation

A previous post has described an overall progress of installing OpenNI in Linux-arm -based pandaboard with Xtion pro. This post is a sequence of the instsallation, which demonstrates the success of OpenNI installation, and the working of Xtion pro with Linux-arm Ubuntu.

Subsequent developments

The first depth image in this post reminds me a potential breakthrough of hand detection – the fingers could be easily extracted from the backgrounds, no matter how complicated these are. Combined with the OpenCV 2.3.1 installed days ago, the hand detection could be developing some interesting applications.

About OpenNI

OpenNI has shown some lights to natural interactions by using depth map images together with RGB images from cameras. Natural human gestures, e.g. hand moving, limbs movements are all being developed fast. Microsoft Kinect is a typical example that demonstrated the huge potential of the OpenNI in terms of game applications. While, more work could be done with OpenNI, with other devices that could capture depth images, e.g. ASUS’s Xtion pro. In the OpenNI community supported by manufacturers e.g. Primesense, Microsoft and Asus more information could be found in openni.org.

About installing OpenNI

Many tutorials can be search out in the internet, there vary from different operation systems to different installation packages and to various installation errors and solutions as well. Mostly, these focus on three popular systems – windows, linux and mac os. In the windows systems, of course, the installation is relatively the easiest as a good population of developers are working on it. In the mac os, it is ok to install the OpenNI as it is intuitive and with good support from the community. In the Linux system the situation is more complicated as different sub systems were involved. Firstly, different versions of Linux and their configurations, secondly, the Linux running on a broad range of devices with diverse system structures.

And here in this post, it is about installing OpenNI in a Linux version – Ubuntu 11.04 Natty in a ARM -based device – the pandaboard.

The Installation steps

Jatin Sharma posted an article talking about how to install OpenNI on Beagleboard with Kinect – just seem this as a similar version of pandaboard and Xtion pro. That post is referable to the installations described in this article. So I would ‘borrow’ some of the procedures to better demonstrate my installations of OpenNI.

1. certain packages are required pior to the installations of OpenNI. Try the commands below to do fetch and install these packages.

* Jatin mentioned an error in ‘libglut3-dev’, as this lib has been replaced by ‘freeglut3-dev’, so you can directly try the later one. But actually I installed the ‘libglut3-dev’ successfully in Synaptic Package Manager, as well as ‘freeglut3-dev’. But never mind, as long as the required package is installed and working properly.

2. fetch the OpenNI package

Making a new directory to hold this package would be a good idea, that gives you much convenience. Let’s say to make it ‘~/Documents/OpenNI’

using the command below to get the package of OpenNI:

*depends on the versions, the contents of the OpenNi folder may be different.But the common thing is to get into the ‘Build’ folder. Mine is under ‘~/Documents/OpenNI/Platform/Linux/Build’.

* Please be aware of Jatin’s information that

Edit the make file in ~/kinect/OpenNI/Platform/Linux-x86/Build
In the latest version of OpenNI, the ARM platform has been included by the name Linux-ARM. However if we go into ~/kinect/OpenNI/Platform/Linux-ARM/Build/ and try to build it you’ll face errors thus better would be to use the old Linux-x86 platform files with some modifications.

Open ~/kinect/OpenNI/Platform/Linux-x86/Build/CommonMakefile and comment out these lines:

CFLAGS += -malign-double
and
ifeq ($(SSE_GENERATION), 2)
CFLAGS += -msse2
else
ifeq ($(SSE_GENERATION), 3)
CFLAGS += -msse3
else
($error “Only SSE2 and SSE3 are supported”)
endif
endif

We need to do this because ‘ -malign-double’ and ‘-msse3’ flags are valid only for x86 platform and will not work for gcc on ARM. Commenting out these statements makes the code usable for ARM.

Make and Make install

Future work

This installation has not yet been validated if the OpenNI samples are working or not. The sample validation and programming part will be published in another post.

The last tutorial about installing opencv in ubuntu with pandaboard 4 – compiling the opencv 2.3.1 did not complete the final compile steps, this post aims to complete that.

Continue the compiling of openCV 2.3.1

I assume you have finished the openCV compiling using cmake ., make, and make install commands in the terminal. Bear in my mind there is one thing I need to remind – be aware of the system date and time, as I left that incorrect and made some unnecessary compiling mistakes.

The system configurations

After the ‘make install’ commands was executed, the system configurations needed to be set up.

1. use the command below to set the opencv’s lib links in opencv.conf file.

adding the following link to the end of the file: /usr/local/lib

2. need to load the configuration file by using

3. open another file and add the configuration file path, adding the highlighted contents as in the below picture.

4. that’s done! Let’s launch an example to have a look if it works.

Running the example

1. make sure the build-essential is installed for opencv programme compiling, if not, using this:

sudo apt-get install build-essential

2. open the terminal, and go to the place holding the sample files, e.g. opencv-2.3.1/samples/c

3. change the target file mod, if you receive permission errors:

4. get the file compiled ready:

this command invokes the GNU C compiler to compile the file contours.c and make it an executable file called ‘contours’.

5. run the executable file contours:

dang-dang….. here it is…

Before the compiling

I was about to write a post about compiling the newest openCV 2.3.1 in Ubuntu with pandaboard, but because of the proxy network problem in Ubuntu software update and the right solution to the proxy network settings, this post was postponed.

So this post will be focusing on compiling openCV 2.3.1 in Ubuntu, with the right proxy networking settings and the synaptic package manager in working states.Sebastian Montabone has made a tutorial about installing openCV in Ubuntu, but that used openCV 2.0 and was not up-to-date. So, this tutorial aims to add an update of the newest version of openCV 2.3.1 installation.

Software updating

The compiling starts from software updating, which aims to prepare all necessary installation packages in the system. To make these packages needed for installations clear, I post these in forms of terminal commands, so you can type these commands one by one to see if they are installed already, or need updates.

Please be aware that, this post assumes the openCV 2.3.1 installation package has been downloaded in the local folder called ‘Download’, and has been unzipped into a folder called ‘OpenCV-2.3.1′.

Compiling steps

1. open the terminal, go to the directory where the openCV folder is located in, in this example, it is ‘/home/cw418/Downloads/OpenCV-2.3.1′.

2. type the cmake command in the terminal. please be aware there is a small ‘.’ after the cmake command.

3. after the cmake command is executed, type new make command.

This may take a while, so you can go and have a cup of tea first.
The tutorial continues on the next post – installing openCV 2.3.1 in ubuntu with pandaboard part 5.

The problem of networking proxy in ubuntu for openCV installation

In the last post instsalling openCV in Ubuntu with pandaboard a networking proxy problem was raised. The problem is relevant to software updates and installations in Ubuntu, before and after openCV installation. There were two general suggestions made in the previous post – finding a new network environment, or, properly setting up the proxy parameters.

The solution to ubuntu proxy settings

For the second suggestion, it seems more difficult than the first one, as it needs to be aware of different applications’ networking settings. This is my empirical experiences that took me nearly four days to get the right place.

1. I assume You have successfully got the proxy address, which used to be like this username:password@wwwproxy.domain.com:8080. This would be useful in the later setting.

2. There are two types of network proxy settings – application wide and whole system wide. I made mistakes in this stage so several days were wasted.

3. Click the power button on the top right corner, select the ‘System Settings’ from the popping up menu.

4. Go to ‘Network Proxy’ to start configuring the proxy parameters – if you have automatic scripts for proxy configurations then use that, if not, then fill in the proxy parameters in proper columns. Make sure you are aware of the bottom setting options – Applying system wide… click that button and confirm the passwords popping up for system authorisation.

5. Open firefox and check the network setting to see if it uses system configurations, if yes, see if firefox can open websites.

6. If firefox works, then go to ‘synaptic package manager’, go to ‘settings/preferences/network’, make sure the option is selected as ‘direct connection to the internet’, apply it.

7. Go and check the package manager updates, it should be working now.

Some errors caused by the incorrect proxy settings

Some typical errors caused by incorrect proxy settings include

- ‘failed to fetch’ error when trying to update the packages using apt-get update
- ’404 not found’ errors in reloading synaptic package manager

How to install openCV in Ubuntu without networks

In the last post of installing openCV in Ubuntu with pandaboard, the failure of software update of openCV was discussed. But if there was no alternative to switch to other working networks, then the only way to install openCV in Ubuntu is as the way showed in this post.

- first, downloading the OpenCV-2.3.1a.tar.bz2 from openCV wiki, selecting ‘other announcements’ then going to ‘for mac and linux’, the page will be directed to sourceforge in this page: http://sourceforge.net/projects/opencvlibrary/files/opencv-unix/.

- copying the downloaded file to Ubuntu system, let’s make it in ‘Download’ folder. Then starting the manual installation – this part is rarely mentioned in tutorials over Internet.

How to install openCV in Ubuntu 11.04 manually

Once the openCV installation file has been ready in the folder, firstly it needs to unzip – using the commands in terminal:

- tar -xvjpf OpenCV-2.3.1a.tar.bz2

The untar progress will be running like this for a short while:

Untar openCV 2.3.1a in Downloads

After the openCV installation package is successfully untared in the Download folder, the source files can be seen. This is not the ready-to-use version, as the source files still need compiling.

–
To continue – part 3 – Compiling the openCV 2.3.1 within Ubuntu in pandaboard.
a networking-functional version of installing can be reached in Sebastian Montabone’s post ‘Installing OpenCV 2.2 in Ubuntu 11.04‘.

OpenCV at ubuntu with pandaboard

At the first beginning of post, I would like to remind a tiny, but sometimes may huge, problem in installing openCV at ubuntu with pandaboard – the network proxy setting. This tiny issue could be the fatal problem when it was not aware of. I had tried hundreds of times to ‘apt-get update’ but nothing worked out. After I searched the problem of ‘failed to fetch…’, I was not well informed about how severe that problem was. Until I tied to change the Ubuntu Software Center’s networking settings, I noticed there was an tap used for networking proxy purposes.

How serious is this issue

It is common that computers setting in universities are behind a boss proxy, it means all computers inside the university intranet have to get through the university server – data flows, firewalls and connection routines of course. The problem here is, the ubuntu system seems to recognise such super proxy not very well, to be honest, poorly. And what surprised me was that there was little posts in the internet that provided relevant information about how to set up the network connection before starting software update of installations.

As a result, the plan to install JAVA in ubuntu with pandaboard for openCV project development was non-doubtfully postponed – the reason was for the above.

How to overcome opencv at ubuntu installation

Well, the fastest and simplest way directing at the solution of this issue is to change to another network environments, or, use other network connection ways that does not need proxy settings. A good solution is already there – the wireless network. However, I have to mention that, the wifi signal received by the pandaboard was so poor – in most occasions there was only one signal bar – so tiny that I was always worried about if if would fade out. And the results proved that as well – the connection was unstable and slow.

Ok, no more chatty words, to address the network problem, either a wireless network is needed, or a open network connection that does not hold by a proxy is useful as well.

So, I am going to take the pandabaord home and get new software installed, until then I will be back to post ongoing openCV developments.

Some problematic screenshots

If you feel this post not providing the solution to the problem, please make yourself free to post any comments below.

Useful openCV mailing list

Someone in the comments asked where to get so much information about openCV learning and developing, well, one of my primary source to get openCV related information – as well as most people’s issues they are facing recently is the openCV mailing list – a good way to receive archived threads and discussions from lots groups such as yahoo openCV groups and google openCV groups, and even stackoverflow q&a forum, or maybe the canonical openCV wiki is also a good source.

Benefits to subscribe these sources’ mailing list

Well, it is obvious that if all of these groups and forums are subscribed by one reader, then the overwhelming information will keep him super hyper busy – all together these may generate up to thousands of openCV related items – including all kinds of problems, all levels of issues, and all possibilities of new openCV breakthroughs.

How to subscribe openCV mailing list

The simplest way to subscribe the openCV mailing list is to go to the groups or forum, make a registration, and probably there is a slot called ‘enter email address‘ waiting for your email address to fill in, after confirming the subscription – probably through emails the openCV mailing list will be like a loyal servant collecting and sending everyday or if you wish every week’s openCV discussions to your email, enjoy.

Opencv mailing list’s risks?

Well, if I have to say, the only risk is the too much information I receive everyday, I even have to set the mailing list subscription emails into a special category.

Why using openCV for people counting?

There are alternatives to count people in a public place, for example using microcontrollers and lasers and arduino to design a cool and accurate system to count people in and out a room. But why does it bother to use webcams and, more importantly what the post focuses on, openCV?

1. it is easy to set-up. NOTHING is easier to mount a camera over the door and connected with power and data cables. Setting up a laser system? Think about the DIY work.

2. a lot of developers and programmers are working on that – making openCV more suitable and efficient to count people. A simple example is the blob extracting app.

The state of art of openCV for people counting

Blob extracting using openCV or flash (as3) have been researched by many developers. The accuracy has reached a high level, but limited to single objects – objects should not be overlapped – if people in the camera could be simply seem as objects.

Codeproject.com shows a new post discussing recognising people even though they are overlapped to some extent, as the picture below shows. The post compares different algorithms from simple threshold to image differences and erosion .

A pedestrian detector comes with recent versions of openCV (>=2.2), in modules/objdetect/src/hog.cpp, and samples/cpp/peopledetect.cpp. Unfortunately this new example has not be well documented officially.

If the camera for people counting is mounted statically, a substraction method is suggested by evident’s work. A relevant paper is linked http://portal.acm.org/citation.cfm?id=1561072&preflayout=flat.

Face detection for people counting using openCV is also concerned, as an example is described in opencv wiki – face detection using openCV. But the drawbacks are clear – this method needs faces for people counting. In other words, top-view cameras do not fit.

The rest part of review is published in the second part – a review of people counting using openCV part 2.

What webcams/motion sensing cameras are available for OMAP4 platforms?

As the Ubuntu 11.04 Natty has been successfully installed in the pandaboard, the next step of development work is to plug in webcams and motion sensing cameras (kinect and xtion). About installing necessary software such as openCV and openNI a new post will be dedicated to that. This post, mostly, desperately, is about seeking available supports to install motion sensing camera – especially the ASUS Xtion camera in OMAP4 pandaboard, which currently does not have many documents related to camera use in OMAP4 pandaboard.

In pandaboard’s website a compatible webcam Logitech webcam Pro 9000 is listed as one of accessories recommended for purchases. However this webcam is exclusively used in Android systems in pandaboard, in other words, there is no source found about Ubuntu based cameras.

Why cameras are not universally compatible?

My guess, to the incompatibility of cameras in pandaboard may be caused by the CPU – OMAP and normal Intel CPUs may have different structures and command sets. So they need different drivers to make cameras work. The problem is – where, and how.

Can you help?
There are some forum discusses seeking supports to camera drivers in OMAP4 platforms, pandaboard@googlegroups.com has quite many threads about this, but provides no canonical answers.

So this post is not about solving problems, instead, it calls for supports from anyone who may have useful information or experiences, to find a way to using universal cameras in OMAP4 pandaboard.

Intalling ubuntu in pandaboard for opencv development

Last post Doing openCV in Pandaboard described a odd mistake happened during the first boot of ubuntu system after the RAW image burning. The screen was frozen on the first booting, did not provide detailed information about any reasons.

I searched the internet and found two tools suitable to do the job – mounting the RAW image as a virtual disk in my windows xp pc, then burning the virtual disk image to the SD card. Two respective free-software was download – mount image pro for RAW image mounting as a virtual disk, and, minitool partition wizard for disk image copying/burning. These tools have been zipped, and can be reached via the link provided on the bottom of the post

At this time I installed these two tools, and successfully mounted the RAW image as a virtual disk 2, turned out it had three partitions indeed, the last one was not allocated/formatted yet, the first one was nearly 70 M and the second one was the main partition which had over 2 G contents. But the installation instruction in ubuntu official webpage said the disk space would be resized automatically. So I inserted the SD card and found it was recognised as disk 3. Here came the key operation – copying the disk 2 to disk 3, and leave the rest space as not resized.

Wait and wait and wait……

The copying was finally over, as the sd adapter did not flash any more. Then copying the MOL and u-boot.bin files to the first partition to guide the system boot.

Taking out the sd card from the host pc, and inserted it in the pandaboard. Exciting moment was finally coming…

Screenshots of ubuntu intallation on pandaboard

It was successful! Now the openCV development could start from here

The image mounting tool and disk copying tools can be reached via the link below, note the copyrights belonging to original publishers.

tools – mounting RAW image of ubuntu and burning disk copies

The source codes are referred from http://www.hackchina.com/r/59225/main.cpp__html

Days ago i saw a post talking about ‘paging wordpress posts without using plug-ins‘ like pagenav. The way to integrate such codes into themes is easy, but with a little bug. 
First put this paging function in the theme’s functions.php

function kriesi_pagination($query_string){
global $posts_per_page, $paged;
$my_query = new WP_Query($query_string .”&posts_per_page=-1″);
$total_posts = $my_query->post_count;
if(empty($paged))$paged = 1;
$prev = $paged – 1;
$next = $paged + 1;
$range = 2; // only edit this if you want to show more page-links
$showitems = ($range * 2)+1;

$pages = ceil($total_posts/$posts_per_page);
if(1 != $pages){
echo “<div class=’pagination’>”;
echo ($paged > 2 && $paged+$range+1 > $pages && $showitems < $pages)? “<a href=’”.get_pagenum_link(1).”‘>最前</a>”:”";
echo ($paged > 1 && $showitems < $pages)? “<a href=’”.get_pagenum_link($prev).”‘>上一页</a>”:”";

for ($i=1; $i <= $pages; $i++){
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )){
echo ($paged == $i)? “<span class=’current’>”.$i.”</span>”:”<a href=’”.get_pagenum_link($i).”‘ class=’inactive’ >”.$i.”</a>”;
}
}

echo ($paged < $pages && $showitems < $pages) ? “<a href=’”.get_pagenum_link($next).”‘>下一页</a>” :”";
echo ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) ? “<a href=’”.get_pagenum_link($pages).”‘>最后</a>”:”";
echo “</div>n”;
}
}

Then put this reference code in the place where page navigation is needed to show.

<?php kriesi_pagination($query_string); ?>

And finally add some styles in the theme’s style.css file.

.pagination{
line-height:23px;
}
.pagination span, .pagination a{
font-size:12px;
margin: 2px 6px 2px 0;
background:#fff;
border:1px solid #e5e5e5;
color:#787878;
padding:2px 5px 2px 5px;
text-decoration:none;
}
.pagination a:hover{
background: #8391A7;
border:1px solid #fff;
color:#fff;
}
.pagination .current{
background: #fff;
border:1px solid #8d8d8d;
color:#393939;
font-size:12px;
padding:2px 5px 2px 5px;
}

Here comes a problem. When that is put in a new page to navigate posts, it does not work. And after carefully checking, the problem gets located in the function calling where the  ’query_string’ is used. If it is going to be used in a page with its ID equals 99, then the ‘query_string’ should be like this:

kriesi_pagination(“cat=99″);

or else, the page navigation would not show up due to the post number is zero.

The reason of that shortage is due to the lacking of appropriate algorithms. In AS3 objects can not be respectively recognized through colors or shapes before. Fortunately through combination of some kinds of image processing functions, we could still be able to find out the exact way of representing objects under webcam, just as processed images shown below.

This progress provides AS3 more potential to build up interactive prototypes through webcam and normal surfaces with kind of semantic objects laid on. Thus the AS3′s abilities of building up flexible interfaces may be well used in afterward works.

One very interesting aspect of human-computer interaction is methodologies and their effectiveness. There is a view bore in my mind that until interaction became invisibly natural, then interaction did its job. Comparing to thousand years’ history of human lives, computer interaction faces its challenge to integrate itself into natural lives.

We use object recognition to simulate original daily domestic interaction like reading mails and leaving notes. Once computers can recognize specific objects as different meanings relating to its huge stored information, we believe that would be a further step towards natural and efficient interaction.

This is a screenshot of demonstration hands detection using the code hsv.cpp. Comparing with the old version within black background and green contours lines, this version actually is based on that. Besides, two functions are added in this new version: using rectangle to locate the hands location, and using eslipe to illustrate the angle of hands motion.

hsv.cpp source code

Related post may interest you

Hand gesture detection and recognition using openCV

Some posts with prototype codes are occasionally requested to share the relevant codes. Due to this, i make a code collection in this post which could be convenient for all the readers. But please note that some codes still need additional image files or haar files that you should pay attention to.

haarFaceDetect
If you can not download the source code file, please refer to below
http://www.andol.info/download/haarFaceDetect.cpp

This is a prototype designed to test face detection using haar training algrithms. Needs image with faces and relevant haar trained xml file.

hsv
If you can not download the sourse code file, please refer to here below
http://www.andol.info/download/hsv.cpp
This is a prototype designed to detect hands ( not hands gesture ) in the dynamic motion images from web-cam. It uses color in a specific range to detect the hands, and then filters all the noises out to get the biggest contours of hands. Several backgrounds are tested by this codes.

HoughCircle
If you can not download the source code file, please refer to here below:
http://www.andol.info/download/HoughCircle.cpp
Static circle objects in the image are quite simple to grab. However, when it comes to combining recognition containing squares and circles, i have to admit that squares are easier to detect.

ARToolKit is a software library for building Augmented Reality (AR) applications. These are applications that involve the overlay of virtual imagery on the real world. For example, in the image to the right a three-dimensional virtual character appears standing on a real card. It can be seen by the user in the head set display they are wearing. When the user moves the card, the virtual character moves with it and appears attached to the real object.

— artoolkit programe

And the video show blow, is an extension of artoolkit, worth having a look.

This is the 2nd part of usability evaluation for go.taobao.com. According to the 1st part evaluation, we found some of unfluent to browse the pictures which is probably due to the networking speed. So, in this review, networking was test 5 times destributed in different times in the day and night.

One random search word was selected on the page which looks quite hot. And, onece the first page was ready, regular click started at the rate of 1 click one second. Looks quite smooth at the first beginning~

Oops, looks something happened accidently, the picture displaying was sucked although the small thumbnails were still working.

Ok, waiting would be the only thing to do…

Getting into the picture detail entry, new window, detailed page and … oops, a small thumb’s missing.

Finally, the pictures caught up with my brouwsing. Wait… what is this, motel ? i found it when i was searching skirt ? Cool~

Again, similar lagging behind things happened, fortunately, i have understood it now.

So, the review conclusions:

1)  Precise picture matching, need be improved ( at least dont mistook motel to women’s dress, ;] ).

2) It is better to improve the rapidly picture browsing, don’t show sucking status in the front of users.

3) Small thumbnails are much faster to be loaded than big ones, why not fill the page with numrous of small pictures ( clear enough ) which would indicate bloody number of pictures.

4) The most important one, fliping from right to left seems not the perfectly effecient way to display information like those thousands of handreds pictures. If it flips fast, it looks blur and the users can not see the contents.

There is a comment plugin for wordpress which is called ‘WordPress Thread Comment‘  which was develped by ‘Author: 偶爱偶家’.

This Plugin is an enhancement for WordPress’s comment function. It enables users to reply on a exist comment, and the discussion will be displayed threaded or nested.

But, i found a new way to get ‘reply comments’ function working without plugins, it is very simple:

First, check the wordpress version, i hope it would be 2.7.

Second, download ‘comments.php’ from wordpress 2.7′s default thems folder.

Last, replace the new ‘comments.php’ file as the older one and check the wordpress admin’s settings/discuss to enable multi thread comment.

Well, get some CSS style to control the display and start to enjoy it !

This showcase will focus mostly on the layout and organization schemes. Below are about 40 different typographic layouts used in different fields of print such as brochure design, editorial design, and poster design.

Effektive CV/Poster Mailer

Spit Kingdom

Sheridan & Co.

Avant Garde Gothic Typeface Booklet

Akimoto Typeface

NTU Art & Design Prospectus

BABE

Rizzo + Gobart

Mise au point

UsineSonore

Bionic Systems

National Geographic

Colorcubic

Kiosk 37

ALPHA_TXT

Posters by Official Classic

Poster

Stel Christian Cambas Poster

Typography Poster

Beck 8-Bit Variations

Children of the idiom

Commune

Aesthetic Mathematics

What’s the World…

Oscar_Wilde_Retrospective

Play With Colors

Posters by Pablo Alfieri

More Posters by Pablo Alfieri

99 Dingbats

No Lemon Daydream Magazine

Lazydog

Real Dutch Design Books

Macro Micro

Marius Martinussen

DADA Design

Berlin Cafe Posters

[From smashingmagazine.com, all rights reserved by original authors.]

It is a strange thing that,  when i was a tutor, i taught students web design but they all interested in making flashing things like blink texts and cool flash effects. As they thought, flashing things attracted people’s attention, what a pity, they didn’t notice that flashing also took away the attention belonging to some other important contents. Going further, how long could people’s attention be, the answer is 1 to 3 minutes at most. Shocking, isn’t it ?There are several pitfalls of using flash things as important components:

1) SEO issues: google cann’t index the flash as good as normal ones, that is truth, at least until now it is that.

2) Flash player is another issue: nobody could say that every brower is campatible with the flash? The answer is NO.

 3) Some flash effects are not compatible. Like the effect showed in the picture above, it is some kind simulation of Mac’s Dock. What is it used for? Just show that it’s cool, funny or efficient? Neither, i think. 

In my opinion, just like the picture demonstrated below, clear, simple and accessable navigator plus inspirative design would be useful and helpful to all browsers. 

Now let me tell you my recent ebay experiences:

1) payment & registration & login

It is nearly the common sense that before starting deserving the services of a website, signing up is mandatory, absolutely no other choices. Suppose, all users have the choice to purchase some stuffs in eBay, probably the results would be that nobody like the petty registration stuffs. The important thing, if the account is not created for communication, then, it is useless for users. That only benifets the company. 

2) items search

No dout, that search is so important that if we lost it we would spend couple of times to find what exactly we want among numrous goods. However, search results’ items’ order is a problem. By price, the seller can publish low goods price plus expensive postage; by date, new stuffs maybe not the best ones; by place, how about a place like NewYork, millions of goods online; or, by combination of these search, do you think that will work out? My answer is NOT POSSIBLE.

Take Bill Gates for example, it is said that, one time, he visited microsoft.com to download a software, ironically, he was not able to find the software in the site although he knew it must be some where. The same thing, The CEO of eBay, maybe, couldnt find the right stuffs neither. 

3) design for goods’ display

With this problem, just open the eBay site, and you will find its massiveness. People come here only for watching the colorful page? Dont be stupid. When i go to apple.com, eigher i would buy some devices or get some related information of hardware or software. 

So, i think that is the first thing, display the propriate things what the users want, and display should be designed to cater the customers’ request.

From the birth of mouse and keyboard, people have been using these kinds of input devices for decades years, and now, it is the time to change. More nature interaction methods are booming, like multiTouch, camera detection and gesture cognizing technologies. By these new technologies, people in the future could be able to interact with computers naturely as parts of own body. The nature hand gesture congnizing is a demonstration of that trendancy. 

We indeed need new interaction ways to communicate with the physical world with higher effeciency.

April 26th, 2007

Multitouch Audio Exploration

---

Jens Wunderling has been working on an interesting project for over a year now, he started with a single touch ELO display and now he has implemented it with multitouch.

loopArena is an AMAZING interactive audio tool, similar to a sequencer, however much more dynamic. Jen’s calls it an “agent based generative music interface”, which allows for multiple users to generate live music.  No typography, rasters and tools are needed because interaction is limited to dragging objects with the fingertips. I would imagine that this gives the artists a lot more freedom and allows one’s creativity to flourish.

He has been working with Ulrich v. Zadow of the MTC team. And as you can see from the video above the results are stunning. As for the technical details, the User Interface, Timing and MIDI Out are all made in Processing, Touch data is received from the libavg framework via OSC, and Processing sends Out MIDI data to Propellerheads Reason. You can read about how it all started as his Intermediate Diploma project.

It was about a year ago at a Silicon Valley tech conference when domestic doyenne Martha Stewart voiced the frustration felt by everyone who’s ever been confounded by a preponderance of electronic device charge cords.

Stewart, founder of Martha Stewart Omnimedia (MSO), pointedly asked Sony (SNE) Chief Executive Howard Stringer why the power-charging cord for one device couldn’t be swapped for the cord of a different, comparable gadget. “Why can’t that thing be this thing?” she asked Stringer, brandishing an array of chargers, cords, and components.

[ From http://www.businessweek.com/]

The layout of iAndol.com has been slightly changed. The new design looks more clean and more easier to find the topic.

Original template of iAndol.com is called Tree2 which was designed by   Headsetoptions, after adopted, the theme has beem redesigned several times, and we will continue to improve it if necessary.

These are two pictures from object recognition in AS3. The first one is original picture captured from webcam and the second one is recognized picture which comes form the former picture.

Actually, the problem lays here: the objects which are recognized are unibody but not in parts, under this situation, when new objects being added, there would still be one whole part but not different parts which are fatal important to the respective object recognition.

I have tried to use different color to identify different objects, however, there still blocked by a problem: once the same color objects get more and more, the red frame (object zone) will also expand which directly declines the recognition accurate.

So, to solve the seperating objects problem, i need some experienced people’s help.

The first picture is original image  captured from webcam, it is little blur and grey which is not easy to identify. The second picture is the one processed by flash:as3, obviously, it can recognize the text and part of background which have high contrast to light color.

What i want to continue to do is to develop the color recognization and shape recognization, as well as adding more intellegent application in it. I have to admit that this is just the start of this interesting interaction way, once the further version was completed, i hope perhaps it would shock you.

Windows(R) 7 preview version was released for evaluation. Some new features are added and some minused. However, the apperances looks still the same as Vista(R), transparency, little blur, colorful—looks nothing greatly changed. Although many creative features being added in this new future version, the interaction is still poor as the reasons below:

1) The interface of Windows(R) 7 is still colorfull and attention attractive, admittedly. It is good thing to some aesthetic extend, but not for great effectiveness—as you know, the interface distracts too much attentions from work to system expplore.

2) Too many tiny but smart functions are hidden and hard to find and use, before use it, not like the Windows XP(R) which is easy and simple to use and explore.

3) The icons in Windows(R) 7 is numberous and confusing, not uniform and same stylized.

Get more news of Windows(R) 7 from Windows(R) 7 official blog >>

This example is driven by mouse-click, and i am trying to design a new version which can be driven by voice. If that is done, we can blow the microphone to spin the windmill.

For weather report module.

This afternoon in informatic research group office, while i was reading Marker Weiser’s paper of ‘computers in the 21th century’, an idea suddenlly flashed into my head-the pitfall of VISTA’s interaction design. I believe that I found the reason why VISTA attracting so much attention of users from work task to interface.
I cite Marker Weiser’s explaination below:

The idea of integrating computers seamlessly into the world at large runs counter to a number of
present-day trends. “Ubiquitous computing” in this context does not just mean computers that can be
carried to the beach, jungle or airport. Even the most powerful notebook computer, with access to a
worldwide information network, still focuses attention on a single box. By analogy to writing, carrying a
super-laptop is like owning just one very important book. Customizing this book, even writing millions of
other books, does not begin to capture the real power of literacy.

Furthermore, although ubiquitous computers may employ sound and video in addition to text and
graphics, that does not make them “multimedia computers.” Today’s multimedia machine makes thecomputer screen into a demanding focus of attention rather than allowing it to fade into the background.

So, as it indicats, VISTA is making a big mistake.

These beautiful shelves from the Tank Collection are designed by Peter Petersen.

The world we live in has become suffused with computer technologies. They have
created change and continue to create change. It is not only on our desktops
and in our hands that this is manifest; it is in virtually all aspects of our lives, in our
communities, and in the wider society of which we are a part.
What will our world be like in 2020? Digital technologies will continue to proliferate,
enabling ever more ways of changing how we live. But will such developments
improve the quality of life, empower us, and make us feel safer, happier and more
connected? Or will living with technology make it more tiresome, frustrating, angst-
ridden, and security-driven? What will it mean to be human when everything we do
is supported or augmented by technology? What role can researchers, designers and
computer scientists have in helping to shape the future?

Download: Being Human:HCI in 2020-Microsoft Research Report

Gmail has added many new and nice theme for Gmail users.When i open one of my Gmails,i found that i can change Gmail themes,there are many nice theme in it,very very nice.But not all all Gmail users can change your Gmail themes now,because there are only a few lucky Gmail users get the themes change feature.I am very glad that i am the one of them.Thanks,Google!

I don’t often use Gmail,because it doesn’t allow users change themes,i don’t like Gmail’s default theme very much!So maybe this is the main reason for me that i don’t often use Gmail.But i think i will start to use my Gmail again,for i like those beautiful themes.

Introduction

In this tutorial I will show you how to build a simple 3D photo album in AS3. We will build an application similar to this one.

I will use two AS3 libraries: FIVe3D and TweenLite, both open source. Five3D is a lightweight 3D library written by Mathieu Badimon. TweenLite is one of the many libraries available for script based animation in AS3. It was created by Jack Doyle from Greensock. It’s principal characteristic is that it’s small (hence it’s name) and simple to use. FIVe3D and TweenLite work very well together!

Please visit the homepages of both these libraries - FIve3D, TweenLite - to learn more. You do not have to download them however – they are already included in the tutorial files. I used FIVe3D v2.1 and TweenLite v6.31 (both latest ones at the time I was writing this).

The pictures of Stockholm used in this tutorial are from my private collection.

 

1. Setting up the workspace

Start by downloading the tutorial files - here. Unpack the ZIP file into a folder on your disk. Inside the package you will find a folder called ‘work’. This folder contains a FLA file and all the classes you need to build the album. Open the ‘album.fla’ file you will find in there.

You do not have to modify anything in the ‘album.fla’, but let’s just take a look what’s in there. The document class should be set to ‘Main’, the AS3 classpath in the ‘Publish settings’ – to ‘./src’. Finally, the export path in the should point to ‘../album.swf’.

Now open the ’src/Main.as’ with your favourite AS3 editor. This is our document class. It doesn’t do anything for the moment, but you can notice that is extends the ‘Sprite’ class, sets the scaling and alignment properties of the ’stage’ object and traces a short message. Test ‘album.fla’ using Ctrl+Enter in the Flash IDE. You should see a black screen and a message in the output window saying ‘Ready to go!’. If you see this message, then in fact we ARE ready to go!

Quick note: The folder ‘full’ contains complete source files of the finished application. Use it for reference, if you have problems or bugs. The folder ‘pictures’ contains the pictures used in this example.

2. Loading pictures

Now that you have both files open – all the work will consist of editing the ‘Main.as’ file and testing it by exporting the ‘album.fla’ file.

The first step is to load all the pictures we will be using in our album. They are located in the ‘photos’ folder, and since the ’swf’ file is exported to the root folder, the path to the pictures in our application will look like this: ‘photos/photoName.jpg’.

Let’s start by adding some import statements that we will need at this stage:

import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Loader;
import flash.events.Event;
import flash.net.URLRequest;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFieldAutoSize;

Now, let’s declare some objects we will be using. Variables should always be declared just below the class declaration line, and in that case it should look like that:

public class Main extends Sprite {

 private var numPicture:int = 9;
 private var picturePath:String = "photos/photo0";
 private var pictureExtensiton:String = ".jpg";
 private var loadingIndex:int = 1;
 private var loadingInfo:TextField;
 private var pictures:Array;
 private var pictureLoader:Loader;

The variable ‘numPictures’ holds the total number of pictures, and ‘picturePath’ and ‘pictureExtensiton’ will be used to construct a correct path to each picture.

In a real world solution you would probably load an XML file containing all the paths to all the pictures, the total number and maybe even a title and a description for each one. Loading and parsing XML files goes beyond the scope of this tutorial however, so for the sake of simplicity all those values are hard coded. If you want, after you complete the tutorial, you can modify the code so that it uses an XML file. This would be a great exercise!

The ‘loadingIndex’ property will helps us keep track of how many pictures are already loaded. We will display this information to the user – this is what the ‘loadingInfo’ text field is for. All the loaded pictures will be put into the ‘pictures’ array. Finally, to load the pictures, we will use a Loader object, that I called the ‘pictureLoader’ (obvious name, isn’t it?).

At this moment, we can add some actual code. In the constructor function you can remove the line with the ‘trace’ command and replace it with this:

loadingInfo = new TextField();
loadingInfo.defaultTextFormat = new TextFormat("Verdana", 10, 0xffffff);
loadingInfo.autoSize = TextFieldAutoSize.LEFT;
loadingInfo.text = "Loading picture " + loadingIndex + " of " + numPicture;
loadingInfo.x = stage.stageWidth/2 - loadingInfo.textWidth/2;
loadingInfo.y = stage.stageHeight/2 - loadingInfo.textHeight/2;
addChild(loadingInfo);
pictures = new Array();
loadPicture();

The first 7 (out of 9!) lines are needed to create and position a text field that we will use to display a preloading information. I heard people complaining that in AS3 you have to write lots of code to do a simple thing. Sometimes it’s true 

Apart from adding the text field, we also initialize the ‘pictures’ array and we call the ‘loadPicture’ function. If you try to export your fla at this point, you will get an error, since this function is not yet there. Let’s add it after right after the constructor:

private function loadPicture() {
  pictureLoader = new Loader();
  pictureLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onPicture);
  pictureLoader.load(new URLRequest(picturePath + loadingIndex + pictureExtensiton));
  loadingIndex++;
}

private function onPicture(e:Event):void {
  var picture:BitmapData = (e.target.content as Bitmap).bitmapData;
  pictures.push(picture);
  if (loadingIndex <= numPicture) {
    loadingInfo.text = "Loading picture " + loadingIndex + " of " + numPicture;
    loadPicture();
  } else {
    removeChild(loadingInfo);
    buildAlbum();
  }
}

private function buildAlbum():void {
  trace("Pictures loaded!");
}

I know, it is 3 function instead of just one! They are all needed for to complete the loading operation, that’s why they are here.

The function ‘loadPicture’ load a single picture and increments the ‘loadingIndex’ variable by 1.

Since I add an event listener to the loader, when the picture is loaded the ‘onPicture’ function is invoked. At this point I check if the ‘loadingIndex’ is still less then the total number of pictures. If this is true – I call loadPicture again to load the next one. If not, it means that all the pictures are there. In that case I can remove the loading information text field and call a function to build the album. Export your fla and you should see the text ‘Pictures loaded!’ in the output window after a short while.

Take a look a the first line of code in the ‘onPicture’ method. When external images are loaded, whether it is a jpg, gif or a png, Flash will wrap it into a object of type ‘Bitmap’. A Bitmap is a DisplayObject, so it can be added to the display list and thus be display on the screen. However, in our case we do not want to display the pictures directly. We will use them as 3D textures instead, so we do not need the Bitmap object, but a BitmapData objects instead. Fortunately they are easily accessible from Bitmap.bitmapData, and this is what the first line in that function does. In the next line I store the BitmapData in the ‘pictures’ array for later use.

3. Building 3D album

If you tested the application so far, you should get the ‘Pictures loaded!’ message in the output window. Now let’s display them!

First, we will need to import some more classes. Add this in the import section at the top of the class:

import five3D.display.Scene3D;
import five3D.display.Bitmap3D;
import five3D.display.Sprite3D;
import flash.geom.ColorTransform;

These are the all the 3D classes from the FIVe3D library we will be need (yes, only 3!). The ColorTransform class will be used for rollover/rollout effects.

Next, we need to declare some more variables. Right after the previous declarations, enter the following code lines:

private var scene:Scene3D;
private var album:Sprite3D;
private var padding:Number = 60;
private var fullViewZ:Number = 2400;
private var darker:ColorTransform = new ColorTransform(.8, .8, .8, 1, 0, 0, 0, 0);
private var lighter:ColorTransform = new ColorTransform(1, 1, 1, 1, 0, 0, 0, 0);

All 3D content in FIVe3Dmust be put inside a Scene3D. We’ll use the scene variable to store a reference to this object. Our album will be a Sprite3D, and this is what we declare next. The ‘padding’ is the distance between pictures in the album, so that they do not stick one to another. The ‘fullViewZ’ property is the z-distance of the album from the screen. The bigger the z value the further in depth the object appears. 2400 is a value big enough to allow us to see all the pictures in the same time, not cropped.

The ‘darker’ an ‘lighter’ ColorTransform object will be used for rollover effects. When applied to a Sprite, the ‘darker’ makes it slightly… darker. The ‘lighter’ restores the sprites original colors. One of the coolest things in FIVe3D is that a Sprite3D actually extends a regular Sprite and most of the operations that can be done on a Sprite can also be done on a Sprite3D. That includes the changing transform.colorTransform property that we are going to use here.

The real fun begins now! We will start to build a 3D view of the album. Replace the trace command in the ‘buildAlbum’ function with this:

scene = new Scene3D();
scene.x = Math.round(stage.stageWidth/2);
scene.y = Math.round(stage.stageHeight / 2);
addChild(scene);

This code will create the indispensable Scene3D, position it in the middle of the screen and add it to the display list. And that’s it, the 3D stage is ready! Now, we can create the album. Continue by adding this:

album = new Sprite3D();

for (var i:int = 0;  i < pictures.length; i++) {
  var bitmap3d:Bitmap3D = new Bitmap3D(pictures[i] as BitmapData);
  var picture3d:Sprite3D = new Sprite3D();

  bitmap3d.x = bitmap3d.bitmapData.width / -2;
  bitmap3d.y = bitmap3d.bitmapData.height / -2;
  picture3d.addChild(bitmap3d);

  var row:Number = Math.floor(i / 3) - 1;
  var col:Number = i % 3 - 1;
  var pw:Number = bitmap3d.bitmapData.width + padding;
  var ph:Number = bitmap3d.bitmapData.height + padding;
  picture3d.x = row * pw;
  picture3d.y = col * ph;

  picture3d.transform.colorTransform = darker;
  picture3d.buttonMode = true;
  album.addChild(picture3d);
}

album.z = fullViewZ;
scene.addChild(album);

This code is a bit more complicated, but still very simple to understand. First, we create the album Sprite3D. This one will be a holder for all the pictures.

Next, in a for loop, we traverse the pictures array (remember that one?) It holds a collection of objects of type BitmapData, each one representing a picture. To display the picture in 3D we must wrap it into a Bitmap3D object, and this is what we do first.

Each picture must be clickable. Unfortunately a Bitmap3D does not extend Sprite3D so it doesn’t support interactivity – this is the same situation as with Sprite vs. Bitmap in regular AS3. To make the pictures interactive we need to wrap each Bitmap3D into a Sprite3D.

When a child is added its top-left corner is always positioned a 0,0 coordinates of its parent. It works so in AS3, and FIVe3D correctly follows this behavior. What we need here is to position the Bitmap3D inside the Sprite3D in a way that its center is at 0,0 coordinates not its top-left corner. That is why offset the x and y coordinates of the bitma3d by half its width and half its height respectively.

Next, using some simple math we distribute the Sprite3Ds in a 3×3 pattern.

Finally we apply a dark color transform to each Sprite3D, we set their ‘buttonMode’ property to true and we add it as a child to the ‘album’ Sprite3D. The final code after the loop positions the album on a correct z distance (while x and y are set 0 by default). And, once the album is ready, we add it to the scene object as a child.

You can test the application now. You should see all 9 pictures as small thumbnails laid out in a 3×3 pattern in the middle of the screen. Not very interesting, huh? Yep! And it won’t get any better until we add some interactivity!

4. Adding interactivity

Interactivity in the album will consist of handling some mouse events and using TweenLite to animate objects. Before we move on let’s add a final set of imports:

import gs.TweenLite;
import fl.motion.easing.Sine;
import flash.events.MouseEvent;

TweenLite is just one class. To define the easing of animations is uses the classes from the standard fl.motion.easing package – we will use the Sine. At the end, we need the MouseEvent to handle mouse interaction of course.

We also need to declare two more variables:

private var zoomMode:Boolean = false;
private var zoomedPicture:Sprite3D;

The boolean value ‘zoomMode’ will inform us whether the album is in full view or if one of the pictures is zoomed. ‘zoomedPicture’ will be use to hold a reference to the currently zoomed picture. This behavior will be added in the last step of the tutorial, but we need these variable already now.

Now let’s get back to the ‘buildAlbum’. Right after the last line, where the album is added to the scene, let’s enter some listeners:

album.addEventListener(MouseEvent.ROLL_OVER, onOver, true);
album.addEventListener(MouseEvent.ROLL_OUT, onOut, true);
stage.addEventListener(Event.RESIZE, onResize);
stage.addEventListener(MouseEvent.MOUSE_MOVE, moveAlbum);

The first two lines need special attention. What I do here is add a rollover and a rollout listeners to the container that holds the pictures. Now, of course, I do not want to listen to the rollover/out event on the container, but I’d rather do that on each picture. That is what the third argument does. This argument is called ‘useCapture’ and if it is set to ‘true’ it will notify the parent display object – the album in this case – of any event of that type dispatched by any of is children (or any of its descendants to be exact). So whenever a Sprite3D containing a single picture is rolled over or out, the album, its parent, is notified. It is a very powerful technique of the AS3 event system!

Now we can add the functions to handle the rollover/rollout events. Notice how I get a reference to the object that dispatched the event using the ‘target’ property of the event object:

private function onOver(me:MouseEvent):void {
  if (me.target is Sprite3D && !zoomMode) {
    (me.target as Sprite3D).transform.colorTransform = lighter;
  }
}

private function onOut(me:MouseEvent):void {
  if (me.target is Sprite3D && !zoomMode) {
    (me.target as Sprite3D).transform.colorTransform = darker;
  }
}

The next listener will be called whenever the stage is resized. That happens, for example, when the user resizes his browser window. If that happens we will center the Scene3D on the screen. Such feature is always nice to have, and the code is simple:

private function onResize(e:Event):void {
  scene.x = Math.round(stage.stageWidth/2);
  scene.y = Math.round(stage.stageHeight / 2);
}

Of course, I left the best for the end. Here’s the function that handles the 3D movement of the album based on the mouse pointer position:

private function moveAlbum(me:MouseEvent):void {
  if (zoomMode) return; 

  var mouseXPos:Number = (me.stageX - stage.stageWidth/2) / (stage.stageWidth / 2);
  var mouseYPos:Number = (me.stageY - stage.stageHeight/2) / (stage.stageHeight / 2);

  TweenLite.killTweensOf(album);
  var props:Object = new Object();
  props.rotationY = 45 * mouseXPos;
  props.rotationX = -15 * mouseYPos;
  props.x = 400 * mouseXPos;
  props.y = 300 * mouseYPos;
  props.ease = Sine.easeOut;
  TweenLite.to(album, .3, props);
}

I introduced the zoomMode flag here, because all the mouse interaction, as well as rollover/out interaction will be disabled when one picture is zoomed. We will add this functionality in the next part of the tutorial.

After this basic check, I divide the mouse position by the stage width in a way to get a value between -1 and 1, where -1 means the mouse is on the left edge of the screen, and 1 means it is on the right.

Next, I call the ‘killTweensOf’ method to make sure any animation that might be going on now will be terminated. Now I can setup and start a new animation.

I assemble the properties of the new animation in the props object. They are all based on the mouse position and have some maximal values. For example, rotationY can have a minimum value of -45 and a maximum value of 45 degrees. Once the animation properties are ready, I must add a last one, called ‘ease’ which specifies the type of movement and easing to use. In the last line I call TweenLite and pass the object to be animated – the album, a time for the animation expressed in seconds – 0.3 seconds in this case, and the target properties for the animation.

Try the application now. The 3×3 album should be responding to the mouse movement by rotating and moving sideways. Each picture should become slightly lighter on rollover and darker again on rollout. Finally, if you resize the window, the album will always be centered vertically and horizontally.

You’d better start enjoying 3D flash applications by now. Because you’re in one!

5. Zooming pictures

Before we finish we need to add one more important feature: the ability to zoom pictures. We do not need any new import statements, nor do we need to declare any more variables. What we need to do is to add another listener. In ‘buildAlbum’ function add a last line:

stage.addEventListener(MouseEvent.CLICK, onClick);

And here is the ‘onClick’ function.

private function onClick(me:MouseEvent):void {
  var props:Object;

  if (me.target is Sprite3D && !zoomMode) {
    TweenLite.killTweensOf(album);
    props = new Object();
    props.z = 0;
    props.rotationX = 0;
    props.rotationY = 0;
    props.x = 0 - me.target.x;
    props.y = 0 - me.target.y;
    props.ease = Sine.easeInOut;
    TweenLite.to(album, .6, props);

    zoomedPicture = me.target as Sprite3D;
    zoomMode = true;
  } else if (zoomMode) {
    zoomedPicture.transform.colorTransform = darker;

    TweenLite.killTweensOf(album);
    props = new Object();
    props.z = fullViewZ;
    props.x = 0;
    props.y = 0;
    props.ease = Sine.easeOut;
    props.onComplete = onBackToFull;
    TweenLite.to(album, .3, props);
  }
}

In that case we are listening to a mouse click event on the stage object. That means that any click anywhere on the stage will result in calling this function. That is why what we need to know what was clicked and what is the state of the application, before we can take any action. We will use the ‘target’ property of the event object and the ‘zoomMode’ flag to figure this out.

First possibility: a picture was clicked. That means the target is a Sprite3D and the zoomMode is off. This is the situation handled by the first part of the ‘if’ statement. In that case we start a tween with all the rotation properties set to 0 – we want the picture to face the screen. For the x and y, we also set them to 0 and we subtract the position of the picture inside the album – this way the zoomed picture will always be positioned in the middle of the screen.

The z property for the album is also set to 0, but in that case 0 has a special meaning. In FIVe3D, if you keep the default settings for the Scene3D object (as I do here) and set an objects ‘z’ property to 0 it will be scaled 1:1 to it’s original size. This way we make sure the pictures will have the best possible quality when zoomed in.

Finally we keep a reference to the clicked picture in the ‘zoomedPicture’ variable and set the ‘zoomMode’ flag to true.

The next possibility is that a click event occurred when ‘zoomMode’ in on. In this situation we ‘un-zoom’ the album no matter what was clicked.

The second part of the ‘if’ statement does pretty much the opposite of the first one as long as the animation is concerned. What is worth noting is that the ‘zoomMode’ is not being reset. Instead I create a new property for the TweenLite called ‘onComplete’. It takes a function as argument. That function will be called when the animation is over. Here’s the code:

private function onBackToFull():void {
  zoomMode = false;
}

I reset the ‘zoomMode’ property after the animation is over, because if it was reset before, the animation caused by the movement of the mouse pointer could interfere with the zoom out, possibly causing an unpredictable behavior.

Conclusion

If you take a look at the swf you will notice that it is around 16KB in total. The Main class consists of less then 200 lines of code. It means that you just made yourself a 3D photo album application that loads in less then a second and with virtually no coding at all (200 lines, come on!). Isn’t it awesome?

Now it is your turn to take this application to the next level:

• Load the album information from an XML file
• Add a title and a description for each picture
• Use 3D to dislpay them – FIVe3D is particularly good at handling 3D text
• Make it work with any number of pictures of different size and aspect ratios
• Load the pictures from your flickr account using the Flickr API
• A nice tweak would be to add reflections for the pictures in the bottom row
• In the zoom mode, the other pictures could be accessible without having to zoom out first
• or… anything else you want 

Hope you enjoyed the tutorial. Have fun!

Beached from Keith Loutit on Vimeo.

Tilt-shift photography is really different from other nornal camera photographies, look the camera angle of this video, amazing.

More videoes and pictures

Bathtub III from Keith Loutit on Vimeo.

Bathtub II from Keith Loutit on Vimeo.

Tilt-shift effect (test 2) from Julien Vignali on Vimeo.

[From smashingmagzine.com, All rights reserved by the original author.]

Motion Tracking from vanderlin on Vimeo.

[More photography click here]

Big news!

Totally surprise when i got the supervisor’s call that the Red-dot Concept design hit the great award. This summer holiday our team designed five concept works for the competition, just trying at that time. Fortunately, one of these works got the award which means top product design admitted.

We designed soft stretcher/drug bottle/secure keyboard/show disk/nail assistant all five concept product, the drug bottle was the lucky design which was designed to measure the liquid drug precisely with itself. This bottle’s secret is its cap which can be marked as drug took or not, besides, the cap could also be able to take the same dose each time easily without spoon any more.

Back to the summer holiday we designed the concept product, each of the teammate paid alot. But now, all we paid comes back!

Cheering for the great award~

the first design:

the second design:

I designed those two logo plus another modified pattern. It came from the shape of letter “X” and what’s more, looking around, it also looked like a five-angle star which mean the flying start. However, the program manager denied this design thought for this complicated pattern for him and not easy to be recognized by users.

Oh God!!!!!!!!!!!!!!!!

It is really amazing design pattern, right? Simplicity and meanness.

Look the other designer’s work for this:
another work from page designer:

Well, if you were the manager, which one do you prefer, the former or the last?