First, my website was shut down by Bluehost yesterday because of a  ddos attack. So I need to move to another host and rebuild my whole site. Therefore, I put this post in here, the old blog on ITP server.

For the midterm, I made the basic part of the application Meet! . Including:

• Basic Interface
• Google maps API to show the location of different users
• Google Latitude API to get the current user location
• Get the basic information of  different users

Basic Interface

The UI design on mobile devices is much different with the UI design on laptops or desktops, because the screen is much smaller and it is touchable.

Therefore, I limited the elements shown on the page and using dropdown menus to show the sub-contents. Also, I explored the CSS3 transition animation to make the rotation effect of google maps and the list of people around.

For the popup window on google maps, there is no easy way to customize it. The popup window in Meet! is not the build-in infowindow of google maps. It is another overlay on top of the maps layer. And I bind the popup with the marker on the maps. Therefore, I can have the full control of the style of the popup and deliver a better user experience.

Google Maps API

Google maps api is very easy to use. In this prototype I mainly used the marker function. For the current user location, I pulled the latitude and longitude from Google Latitude API and passed it in to Google Maps API. And for the users nearby, I just hard code them in javascript.

Google Latitude API

The reason why I used the Google Latitude API is I want the application can be hands-free. That means the app will keep track of the users location and all the other users he/she met during the day without log into the app constantly. For now, the Google Latitude API seems to be the only choice.

In this demo, I just use the api to pull the current user’s location. There are two ways to do this.First, also the way I did, is by making my own latitude location public, I call make an api call in my script and referring the user id of myself. Very straight forward. But the problem is everybody can get my location, even if they are not the user of Meet!

Another way is going through a bunch of authentication and authorization process. It will keep the location private. But the problem is, it is not an easy task in PHP. Also, if I want the app to be hans-free, it needs to be a native app instead of a web app, because it need to be ran in background. Therefore, it is a better choice to do this in JAVA and make it a native android app.

The future plan

As I said, eventually Meet! will be a native app and have all the function I listed in the last blog. And also, user can use the camera to capture an image and share it on the go. I will keep exploring the android development.

Mario The Rated Ao from Yang Liu on Vimeo.

Here is the proposal of my Pcom final project.

Because of my endless love with game, in final I will make a multiplayer physical maze game. Here is some rendered images of the Mazy.

It is a four players game. Every player can only directly control one of the four incline direction. The four players must cooperate to help the ball get to the center of the maze before the red LEDs are all turned off. Every time the ball lights up a green LED, players will earn bonus time and the two of the turned off red LEDs will be lighted up again.

Part of the maze is covered by the LED panel which will require players to calm down and feel the ball’s movement. Through this “black box” maze, the game can generate different emotion from players, but not just shouting and exciting.

Here is the mechanical structure.

When players push their handle, the maze will incline towards to themselves.

Last week we finished the Pcom one month project: Kicthen Game the Media controller. Something need to be document here.

The shifting of the idea

First, we intended to continue Bimmer’s Stupid-Pet-Trick project. We came up with the idea of laser pen since then.

We planned to use the laser pen to detect the people in Washington Square.

Then, we decided to use laser to control the sound and use instrument to control the visual. It likes the reverse-control. Using visual to control the sound and using the sound to control the visual.

Because we once thought about to set up the controller in the ITP’s kicthen, that’s where the name “kicthen game” came from.

Finally, we had the idea to actually make a laser sword game, which is persenten in the class.

Technology

The circuit is fairly simple. It has three main parts.

• Arduino No.1 link to the Photocell

We used six photocell to detect the laser, and used processing to generate sound through minim lib.

• Arduino No.2 link to the instrument

We attached viberation sensor on the instrument and connected the sensor with Max/Msp to generate visual element.

• Communication between 2 Arduino

We connected two Arduino through digital pin and used Arduino No.2 to activate the photocell of No.1. There were some trouble with the communication. Finally we found out the problem is the two Arduino must share the ground.

The Game

We tried to keep it simple. So, we didn’t set up very difficult rules. The basic rules are listed below.

• 2 teams fight with each other with the laser pen.
• 3 persons for each team. 1 person(person A) play the music instrument, 2 others(Person B) control the laser pen.
• The 2 people who control the laser pen need to try to hit the foe team’s photocell. And when they success to hit the photocell, sound will be generated and they win 1 score.
• Person A must play hard to activate the foe’s photocell, otherwise person B can not win even they hit the photocell.
• The team win 10 scores will win the game.

Things need to improve

• There should be some LEDs to indicate whether the photocell is activated or not.
• We should make the whole thing looks polished.

HERE is the Pages document of this post.

Why

There are plenty of SNS website these days, such as Facebook, Myspace, etc. They improve the communication on the internet. However, there are some drawbacks in the website. The most important three are listed below:

• Too many buttons
• Too much refreshing
• Too much waiting

So, I intend to improve these in my iScroll website. And build a “facebook” for small groups.

What

iScroll is an All-in-One web Page without buttons!
Link HERE to try iScroll yourself !!!!!
To be more specific, iScroll has these features as listed below.

Small-scale

It is designed for small group, like the ICM class and a football team, to provide a graphic interface for the members to communication with each other online.

All-In-One

The web site only have one page, users can view all members’ information in this one page, without going to any other pages, which shorten the waiting time.

Without buttons

There is almost no buttons in iScroll. Most of the interaction is completed by the mouse wheel. Therefore, users do not have to wait for the refreshing.

Next generation of web design

In iScroll, users can change the web site and arrange the element on the website by some simple drag-and-drop action, and make the website exclusive for themselves.

Make it real !

Here I will talk about what I actually did in this midterm assignment, and explain some technology key-point.

So far , so good

Link HERE to try iScroll yourself !!!!!
For this midterm assignment, I realize features as below.

• Interaction by mousewheel
• All the interaction happen in one page
• Simple visual effect
• Leaving message to different people
• Basic Drag and drop function
• Compatibility for different browsers

Technology Key Point

Mousewheel interaction

The approach for the mouse wheel event is different in IE/Safari and in Firefox. This is the main point for the compatibility for different browsers.
In IE/Safari, they use “onmousewheel” property  to respond to the mouse wheel event. In Firefox, they use “DOMMouseScroll”.

All-in-One

Because I do not want users to go to other pages, the information and comment panels are pop-up panel in the home page in iScroll. Therefore, I need to arrange the visibility to different panels. Through this, I understanding more deeply about the different between the CSS property “visibility: hidden” and “display: none”.

Zoom In and fade in effect

I did some thing similar in my former assignment. In that assignment I use the “SetTimeOut” to do the animation, but it was not smooth, and will cause many trouble with the key word “this”.
So, this time I realize the zoom in effect just like the fisheye effect in jQuery. Instead of include the jQuery lib, I wrote the code by myself this time. It detect the distance between the mouse cursor and the picture, and then calculate the size of the picture as well as the opacity of the picture. Besides, I need to do some math to move the zoom in center to the center of the picture instead of the left-up corner of the picture.

Comment system

This part is harder than I thought. In the last assignment, I built a comment system for one webpage. That is not hard. But this time, users can leave comment to different people and different people should only display the comment which are left for them.
For now, I use different “<form>” for different people, and submit the form to different files to save the comment. Then, different people read from different files to display their comments.

Drag and drop

To me, getting information form website one direction is the last generation of web design. In this generation of web design, users can create and share their own information under the constraint of specific website. And in the next generation of web design, users can change and recreate the site by themselves, easily.
I decide  to explore some way to do this. What I did for now is users can rearrange there picture by simply drag and drop. Very simple but there are endless possibility from this.
In the coding level, it is basically the “onmousedown” and “onmouseup” event. The key point is the program need to detect which picture and the pop-up panel should follow wherever the pictures are dragged.
This is basically what I did in this assignment. Not perfect but almost realize what I planned before and I really learn a lot through develop this small SNS website.

Something not that good

There are some problem in this website, some of them are really serious.

Very hard to manage the data in this site

In this web site, there are tons of information and data, such as the basic information for different people and the comments. For now, I store the whole data in html and the array in javascript. I am sure there must be some easy way to do this. Maybe something about the XML and database. I hope I can fix this after I learn those.

Save the arrangement

Although users can rearrange the site, but they can not save their change for now. I need to find out an approach for this. For example, every time user close or refresh the page, the page send the position data to the server to save the information.

Bugs!! Bugs!! Bugs!!

There are many bugs I need to fix in the future. For instance, when users drag one of the picture in the page, If they come through others picture, the two picture will either follow the cursor or the second one replace the original one or not.

The future of iScroll

I really like the iScroll, and if I do not find other idea I will continue this project in the final project. And there are so much improvement I can do in the future. I will list some of my idea below.

Make it pretty

For now, iScroll has no interface, no background image, no logo, no everything. I should indefinitely improve this, though I am not good at 2D graphic design.

More drag and drop element

In the future, there will be more element in the webpage can be dragged, maybe the interface of the page. The whole site is like the Lego. Users can make the site exclusive for themselves!

More intuitive interaction

iScorll is more like the listserver than the facebook. The benefit of the iScroll is that it has a graphic interface. Therefor, some interaction can be more graphical and intuitive. For example, there is group function in almost every IM software. But you need to press button on the interface to build the group. In iScroll, users can draw a circle to include the people who should be in the same group and double click to group them in one picture. Every time users want to add a member to a group, they only need to drag and drop the picture to the group picture to add members..

Make it fun

I can design a game based on the drag and drop function. Make the site more fun and be the playground for the users.

Make it used

This is the ultimate goal of this website. If it can eventually used by ITP student or some other people. I will be much happier.

Understanding Media

In my opinion, the disscusion of hot media and cool meida is a little out of date. The author wrote in the book that,

A hot medium is one that extends one single sense in “high definition.”

Hot media are, therefor, low in participation, and cool media are high in participation or completion by the audience.

The first sentence suggests that the hot medium has more information. And the second sentence acclaims that, the hot medium lacks of participation. Because the first edition of this book was written in 1960s, there are two kind of new media the author can not see in that period. They are internet and video game.

Today’s internet and video game have way too much information, that can be defined as “high definition”, which is the characteristic of hot medium. However, they, meanwhile, supply a high degree of particapation for the users. So, I think the classification of the hot medium and cool medium is not appropriate for today’s new media.

Other readings disscus some copyright issues and re-creation. As a student, I have not think about copyright too much. But inappropriate using of other meida, like photo, painting, can cause serious problems. But, the copyright cases mentioned in the reading materials are the reusing of others’ contnets. As in the 1 chapter in Underatanding Media, what if we reusing others’ “message”?

Taking the video game as an example, there are so many games, especially mobile games, copy each other’s “core gameplay” or “concept”and recreate the image design. All the games have different apperance, but the players can feel they are the same game! Therefore, I think, some of the “ideas” should be protected by the copyright law, too.

Finally, we are able to make arduino talk to computer. I tried the javascript method first, and it works well.

But the processing way is not that smooth. There is an error in processing says:

java.lang.UnsatisfiedLinkError: /Library/Java/Extensions/librxtxSerial.jnilib: no suitable image found. Did find: /Library/Java/Extensions/librxtxSerial.jnilib: no matching architecture in universal wrapper thrown while loading gnu.io.RXTXCommDriver

Exception in thread “main” java.lang.UnsatisfiedLinkError: /Library/Java/Extensions/librxtxSerial.jnilib: no suitable image found. Did find: /Library/Java/Extensions/librxtxSerial.jnilib: no matching architecture in universal wrapper

   at java.lang.ClassLoader$NativeLibrary.load(Native Method)

   at java.lang.ClassLoader.loadLibrary0(ClassLoader.java:1878)

   at java.lang.ClassLoader.loadLibrary(ClassLoader.java:1771)

   at java.lang.Runtime.loadLibrary0(Runtime.java:823)

   at java.lang.System.loadLibrary(System.java:1045)

   at gnu.io.CommPortIdentifier.<clinit>(CommPortIdentifier.java:83)

   at SRV1Console.getSerialPorts(SRV1Console.java:907)

   at SRV1Console.getConfigPanel(SRV1Console.java:341)

   at SRV1Console.init(SRV1Console.java:302)

   at SRV1Console.main(SRV1Console.java:143)

I google the error and finally find the solution:

go to the Java Preferences application in Applications / Utilities, and drag Java SE 6 32-bit to have preference over Java SE 6 64-bit.

I have no idea what this mean, but it did fix the problem! Nice! Serial keep going.

Pacman_final from Yang Liu on Vimeo.

This is the comlab assignment. Shoot and edit by Yang and Mike.