Information gathering by large corporations has been a big issue lately. Google gets sued for harvesting WiFi locations, telecom companies that use Deep Packet Inspection (DPI) to track what kind of applications smart phone users are using, LinkedIn links users to advertisements and of course Facebook that has faced some issues regarding their users privacy.
Often it is heard that privacy no longer exists on the web. “With the arrival of social networks, users gave up their privacy” and “If you don’t want to be tracked, don’t share any information about yourself” are arguments I come across quite often. And although I can partly agree with the latter, I sure as hell reject the thought that privacy is from the past. Doing so not only clears the way completely to let a Orwellian scenario become reality, but increase the risk of identity theft significantly. No, privacy is something worth fighting for —so yes, I am a proud donator of Bits of Freedom.
However, the other argument —”Don’t share anything you don’t want to be public”— has some points to it. If you don’t want to lead thieves to your house, don’t post your holiday plans online. Or your address at all for that matter. But you still want to get in touch with your friends on Facebook. Yes you can say: “if you don’t agree with their privacy policy, don’t sign up”. But that does not change the fact that they are lying to their users. They present themselves as social network, however, they are a advertise company, just as Google is. And although that is as clear as day, it is just wrong non the less. But they are getting away with it.
There aren’t laws for these kind of things. I don’t know if and how there should be laws to protect the users. But in other fields there are regulations which companies must comply to. If I buy a iPod for example, the European Union has laws that forces warranty for a minimum of two years. So even if Apple gives only one year warranty. Maybe users of social networks should be protected like this as well. As said, in what form, I do not know yet.
But the fact remains that if I don’t want to give Facebook some information about myself, I won’t share it. Like my phone number. My phone number is precious to me, it is one of the few things that have a ‘direct connection’ to me. By that I mean that if my phone rings, I take the call. Because I know to who I gave my number, I know who to make time for if my phone rings. Call it naive, but I consider my phone number private. The thing I want to avoid the most is being contacted for commercial purposes by phone.
In the last few days I saw quite a few posts on Facebook warning users that their phone contacts are harvested.
Users of Facebook app on a smart phone can sync their address book to Facebook. They get a warning that their contacts information is being put online and that they should ask their contacts for permission to post it.
Wait…, What?!
I can put my phone contacts online, but I have to ask permission to my contacts first? And if I tap “sync”, whether I asked my 191 contacts or not, all contact information is being uploaded to Facebook. This includes names, phone numbers and email addresses.
First, who is reading those warnings? And second, who is going to ask their complete contact list for permission (without the option to not upload the ones that responded negatively)?
Ok, so it is your own fault if you don’t read the warning. Agreed. But lets view it from another perspective.
Here is a friend of mine, he has just bought this new smart phone and is super stoked about it. He downloads the Facebook app and syncs his complete contact list. “Thats cool! I still have my contacts even if I lose my phone!”. He did see some kind of warning “but hey, there was a “Next” button, so why bother reading?”.
Alright, his full contact list is being uploaded to Facebook. But now, my precious phone number is somewhere stored on the servers to. Complete with my profile connected to it.
The thing I wanted to prevented the most, has happened without my permission, or even knowing it for that matter. It all happened because a friend of mine decided it was all right.
My number is only visible to the one that uploaded my number. True, it is not publicly linked to my account (publicly is a keyword here). So other Facebook members won’t see it. But that is not what I am scared of. My number now falls under the privacy policy of Facebook. And they are still a company trying to make a profit. They don’t explicitly state that they WON’T sell my number to advertising agencies. To me, that sounds that they WILL sell my number to advertising agencies, together with my profile data.
And this is what bugs me the most, I take good care in what I post online and what not. But more and more, others are making the decision to post things of me online, without my knowledge or permission. And to me that is just wrong, even if I don’t have a Facebook profile, things about me are stored there. Things I consider to be private.
I know it is naive of me to think that big corporations are going to change, but I still see this as a problem. How should we address this? Educate our friends? Teach them about the web and how it works? Are there even more people that share my thoughts? Let me know in the comments!
One of the main problems in working with a touch device is the lack of tactile feedback. The screen you press touch is a flat surface. Without structure that can give you any reference of ‘where you are’. This problem is being addressed differently by different devices.
I took the iPad, iPod Touch and an Android phone to find out what the differences are between the devices. Besides that, I want to find out how the size of the device influence the experience.
The feedback to the user is handled by the software running on the device, as opposed to the hardware which is all the same (a piece of glass). Although each app can create it’s own way of handling feedback, most of the app’s created on Android and (especially) iOS are using pre made components from the SDK’s to handle common tasks such as sliders, data collections, buttons and such. I have divided this post by operating system, but it has not been my intention to give an opinion about the operating system itself. Nor is this an Android vs. iOS post. I just write down what I experience by using it.
iOS
iPad (iOS 4.3.2)
I don’t own one, so I had not worked whith it intensively before. Because I knew my way around an iPod Touch I am comfortable with iOS. I had high expectations of the iPad’s interaction model. Partly because of the size of the device, but also because I thought that Apple had put extra effort in it. This turned out to be a mistake.
The iPod Application
The height of a track is approximately the height of a finger tip, so pressing it is not an difficult task. That sounds obvious but the playhead on the scrub bar is much smaller. That actually is more difficult to press. When you drag the playhead across the line, your finger covers it completely. And because a finger is way bigger than the playhead, this leads to inaccuracy. The time is being updated, but I miss some actual feedback around my finger. iOS uses a magnifying glass when searching through text just above your finger, they should have implemented some kind of feedback while sliding over sliders. Kind of what YouTube does in it’s video’s. The volume bar on the other hand is a little bigger. This feels much more comfortable. But then again, I miss some represented data as my finger still covers the slider knob. In the Album and Genre sections, the albums and genres are represented by tiles. When these tiles are pressed they grow and flip around to show the content of the tile ‘on it’s back’.
This all works pretty good and everything is easily accessible. But the feedback that something is actually pressed, is by performing the desired action. So when I press a tile, I know that I did the right thing the moment the tile begins to grow and flips. But there is a slight delay between the two. And that delay is noticeable. When I press a song to play, it’s color changes to blue and then fades back to it’s original state. But it does that at the same time the song is starting to play. So if the song needs to be loaded, it takes some time before the visual feedback is applied. I talk about fractions of a second here, but still. It is notable. However, switching from view (Number/Artist/Album etc.) is instant.
The Photo View Application
In the overview, a single tab on a photo opens that photo. A long press gives the option to copy the photo. The thumbnails of the photo’s are bigger than a finger, so pressing it is not an difficult task.
When a photo is opened, it covers the entire screen. When you pinch it to zoom in, you go into zoom mode. To close the photo and go back you pinch it, but when you are in zoom mode, you have to return to default size before you can close it. Below the photo is a strip of very small thumbnails of all the other photo’s. This strip is very small. When you drag across these thumbnails, the corresponding photo opens immediately full screen. Again, no little popup by my finger, but immediately loading of the photo.
iPod Touch (iOS 4.2.1)
iOS runs exactly the same on an iPod Touch (or iPhone for that matter). But because the device is smaller, it feels all a bit more in proportion. I think it shows that iOS originally was intended for a device you could hold in one hand, and they applied it to the iPad as well. The feeling I’ve got with the scrub bar in the iPad is due to it’s context. Because the scrub bar on the iPod Touch is the exact same thing. But because the device is larger, the iPad one feels smaller.
The general ui of iOS
The buttons have a very subtile feedback, they slightly change color. The ui react to very subtile gestures. On the iPod that is not an issue because the device is small, so you expect to make small movements. But the iPad being a lot bigger, I expected I had to make bigger movements. This works two ways, on the one hand, because you can make small movements, the feeling of control is a bit bigger. But because it reacts to small movements, there is more room for accidental gestures.
Android
I am using a HTC Desire phone that runs Android version 2.3.3 with custom rom CyanogenMod 7.0.3. I think CyanogenMod comes almost as close to the core Android as possible.
The Contacts Application
Like the iOS lists, the contacts in the list of Android are around as big as a fingertip. Slightly bigger than the iOS ones. What stands out is that every interactable object is big. Even the scrollbar is big.
The Music player
The scrub bar is fairly big in the music player. Still, even if the playhead is big, a finger covers it easily. So while scrubbing, I miss an precise indicator around my finger on Android as well.
The general ui
Every thing you touch on Android immediately reacts. As soon as the device registers a touch on something interactive, that element is responding by changing color. The task to be performed can still be loading, but the feedback is already given. Every thing (that is interactible) in Android is big. That results in easy access to everything.
Conclusion
I have been a bit of a hairsplitter on these things. In general both of the OS’s work fine and they all have their pro’s and con’s. It’s clear that Apple goes for aesthetics where Google goes for functionality, that is not new. But what bug’s me on iOS, is that is trusts on it’s speed. So that once I tab on something, it doesn’t give me confirmation that I did the right thing. I have to wait until the actual action is performed before I know that I succeeded in what I had in mind. When the device is a little slow, this shows immediately. I am not talking seconds here, far from it. But just enough to be a little bugging. Android on the other hand gives you instant feedback.
Because iOS goes for aesthetics, the content is better layed out. It’s better proportioned than on Android. So Android can feel a little clumsy sometimes, but I think for sure that this results in fewer fails when pressing things.
What is become clear to me is that instant feedback helps so much. This can be further enhanced by vibrating the device (although an iPad does not vibrate to my knowledge). I still have to try out an Android tablet with Honeycomb (Android 3) because that OS is written with a tablet in mind, instead of a phone.
Finally! After two long weeks of frustration I took the second step. Detecting a gesture! I blogged earlier about being able to detect the individual fingers and keeping track of them. Since then I found the app KinectCoreVision. An app based on the famous CommunityCoreVision. But KCV was made to work with the Kinect and has finger detection support!!
The reason I want to go for the KCV app is because that it acts like a server that broadcasts Tuio data. I knew that there are several Tuio libraries to handle gesture detection. Since my project is all about the actual gestures themselves—and performing them by the user—and not about the technical side behind it, I want to use open source libraries to handle the technical details for me. The only problem was, I could not find a fitting/working one.
I knew they where out there—I have tried a lot—but I could not get it to work. I decided to switch from OpenFrameworks to ActionScript 3. I am a little more comfortable around AS3 so I thought that would speed up the process a little. After a long three days of flex/air sdk’s and FDT problems I finally got a tuio-as3 example working! It’s working with the KCV app and now I can successfully move a square around the screen by just pointing at it! It is very buggy and I that is because the finger detection in the KCV app is not very stable yet. But the example is looking promising!
Once I figure out how to stabilize the detected fingers, I can make a first prototype. When I do, I will post some footage.
I have my research question heading in the right direction –it’s not definitive yet– and I have defined some sub questions, I had a chat with my teacher last Monday. All went pretty well, but he thinks I need to shift my focus more towards the practical research. I do agree with him to some extend, but I still want to have a solid understanding of what I am working with. I just need to find the right balance.
Since I am doing two things at the same time –building the system and writing the supportive narrative– I have decided that I work for a week on the same subject. So this week it was researching for the supportive narrative, and next week it is building / coding the system.
What I first want to do is get myself some gestures to work with for the rest of the project. I am planning on using four gestures and work them out in depth.
GUI and WIMP
Before I can talk about in what context multi touch operates, I need to explain the current way of computing. Although a GUI and WIMP are by far the most common ways of computing, there are still a lot of systems that uses command line or other methods like all kinds of servers for instance. It’s however out of the scope of this article to talk about those. The term WIMP is often incorrectly used as a synonym for GUI.
GUI stands for Graphical User Interface. It is an interface based on graphics rather than a command line.
WIMP stands for Window, Icons, Menu, Pointer. Different sources have different interpretations of the meaning, but the general concept stays the same. It’s an interface where applications run independently of each other, at the same time in their own window’s, objects like files are represented by icons, menu’s gives access to tasks and a pointing device to perform certain tasks in certain circumstances. Note however that the pointer is most of the time a mouse, but does not have to be. It can be a pen tablet just as easily. And –generally speaking– there is only one pointer.
The difference in GUI and WIMP is that because a WIMP interface relies on Icons and a Pointer –which are graphical by there nature– WIMP is considered a GUI. But not all GUI have to rely on all the –if any– WIMP elements.
The context of multi touch
A system based on multi touch is always a GUI and uses a lot of the WIMP elements but not all. There is no pointer for instance. On mobile phones –most of the time– the applications run one at the time and don’t have their own window. Applications can –if the os supports it– run in the background, but they don’t have a window.
Because the commonly used OSes we use today (Windows, OS X and Linux) are GUI’s based on WIMP, the multi touch we experience today on desktop and laptop’s –mobile touch devices have there own OS which actually is developed around touch input– takes over some of the pointer tasks.
Windows 7 gestures
Windows 7 supports natively multi touch gestures. The gestures make actions that where before difficult or not well known, more easily to do.
Zoom – the zoom gesture is performed by placing two fingers on the surface and moving them away or towards each other, away to zoom out, towards to zoom in. This is useful on viewing photo’s for instance. So although on any self-respecting photo view software there are zoom buttons available.
Single finger and two finger pan – Panning over an object larger than the viewport. This as well can be a great extension for viewing photo’s, but for any kind of object with large amount of data like a map for instance. Again, one could use scrollbars to do so, but it’s impossible to scroll diagonally with scrollbars. And while there was a mouse action to click and drag with certain buttons, that is not a well known/often used action.
Rotate – Rotating objects –again like photo’s– was only doable with a button. The limitation of that button is that it only rotates the object only as far as the developer decided it to. While with two fingers one could –with the sensitivity of the device in mind– rotate the object to any degree possible.
Two finger tab – Because the concept of only one pointer is out of the window, a two finger tab is different than a one finger tab. And as such, can be treated differently.
Press and tab – Just like the two finger tab, a press and tab is possible because of the multiple registration points. While one finger presses on the surface, a second finger can tab next to it.
These are not the only multi touch gestures that Windows 7 registers, but it gives an idea of how Windows 7 is using multi touch as an addition to it’s pointer concept. It takes actions that are less known or hard to to, and makes it better accessible.
OS X gestures
OS X is treating multi touch differently than Windows 7. Where the focus of Windows 7 lies on bringing ‘new’ or not well known actions to the attention, OS X uses multi touch to map gestures to existing actions, to new actions as well –like the photo manipulation in windows 7– but the focus lies on the existing ones. I give a few examples.
Scrolling, drag two fingers down/up – a substitute to the scrollbars.
Pinching, two fingers away or towards each other – same as the Windows 7 one.
Rotating, two fingers rotating around each other – same as the Windows 7 one.
Two finger panning – Basically the same as scrolling but in every direction. This one can only be used if the program is fit for it.
Three finger swipe, move three fingers across the surface – to go to the next previous tab/window, depending on the direction of the swipe.
Four finger swipe up/down – to enter or close expose
Four finger swipe left/right – to switch application, like the cmd+tab keystroke
The difference between Windows 7 and OS X
OS X is really trying to interact with the OS actions in a different way, there where Windows 7 seems to want to push new functionality. So they both have a different approach, although they share some similarities as well. What they still do is keeping the original OS in tact. Which is not surprising because multi touch is not broad supported yet. But when you compare that to mobile operating systems, they are taking full advantage of touch interaction. That is not a fair comparison, because a mobile OS does not have the performance of a PC, Nor does it need it. And the intentions of a mobile system is different. But it illustrates the contrast between the two.
When I think of an OS for a PC or laptop, I think that it can borrow some of the WIMP principles, but it really needs to be different in a lot of things. Naturally the single pointer concept needs to go out of the window. And in it’s place should come gestures that feels natural. And maybe the whole concept of on screen menu’s can go as well, and we summon menu’s by performing a gesture. That leaves room for the actual content in the application. Which way it will go, I don’t know yet, but I think that the single pointer concept has had it’s time.
The graduation consist out of two parts. The project –in my case the installation– and a ‘supportive narrative’ or thesis. The supportive narrative is supporting the project and the project supports the supportive narrative.
For the project, I knew what I wanted to do. But I was not quite sure how I should approach the supportive narrative. I knew I wanted to focus my research on the gestures used to perform certain tasks. So I decided to look at the gestures made in a multi touch interaction. I did this for a few reasons. First, there is already a lot research done into multi touch, so I can find a lot material where I can base mine on. Second, the multi touch gestures look a lot like the gestures I have in mind, so if I can base the ones in my project on common multi touch gestures I don’t have to reinvent the wheel. Third, I am confident I can find some software that is used to detect multi touch gestures. So the less time I need to build the actual system. The more time remains to do the actually research.
For now, I have defined my research question as follow:
Are the principles of multi-touch interaction applicable to a system based on touchless interaction?
Since I do not know a term to define an interaction form without physical touch, I have called it a ‘touchless ’ interaction.
To get the answer to this question I came up with subquestions. First of all I want to find out the definition of a gesture. When is a gesture a gestures, and what is it that makes it a gesture.
Second, I want to know which gestures I am going to use/try out on my project. I want to stay as close to actual computer tasks as possible so the project can be of actual use. So I want to know ‘What are common tasks on a multi touch device?’. To answer this I first need to know what common computer tasks are in general. When I know that, I want to know, how these tasks are performed on multi touch devices. The gestures that come out of that questions are going to be my project gestures. To gain more knowledge about them I take a little detour and want to find out, if these gestures has any advantages over the way the task is handled with a mouse and keyboard.
Third, I want to see if the gestures rely on physical touch. Because my system is all about the removal of physical connection. If the gestures I am going to use, do rely on physical touch, then I want to see why they are doing so. And I want to see if I can come up with a way to have the physical element removed from the gesture. With physical touch, I mean for instance pressure sensitivity. I don’t know about any gestures that do rely on this out the top of my head. But I can imagine that I come around some. In Photoshop –and this is not a multi touch gesture, but it illustrates the point–, when you use a drawing tablet with a pen, the thickness of the brush is handled by the pressure you apply to it. I can imagine the depth value that is calculated by the Kinect to substitute for the pressure value. However, I don’t think that this gives the same level of precision, and thus the same ease of use.
The first part will end with a discussion part in which I reflect on the results and give my own interpretations of them. I will use this section to give my personal opinions and put them in to context.
When these subquestions are answered, I have a set of gestures to work with and I know how they work. At the same time I am planning to have the first prototype of my system ready.
So the second part of my supportive narrative will be the research of how people react on using the gestures. With the knowledge gained from the first part, I come up with a hypothesis for a gesture on each task to be performed. Then I do some user testing on each of the gestures and evaluate the results.
With those results I reform the hypothesis, and start the user test process all over. After 5 of these iterations I want to have the final gestures. The second part of the supportive narrative will end with a discussion section as well. This time I reflect on the practical research.
With the second part done it is time to draw the final conclusions. This will be a summery of the results and an explanation of the final gestures and how they can be implemented. In the conclusions part I will put a section ‘Limitations and open issues’. Here I describe the limitations of the project and research and what the open issues –if any– are.
When all this is done, and the project is running, I think I have a solid graduation project. I am still not sure what the form of the supportive narrative will be. The most logical form is on paper I guess, but I am playing with the thought of putting it online together with this blog, but as two separate things. That idea came from the web version Richard Rutter made of the book “The Elements of Typographic Style”. His “The Elements of Typographic Style Applied to the Web” is basically a book in website form and I do like this concept. But that is food for some thought some other time.
For now, if you have any comments on how I am planning my supportive narrative, please share them in the comments.
So, today I made some progress. I had some trouble getting started with ofTheo’sofxKinect addon at first. I could not find documentation for ofxKinect and I got a little confused by all the differend addons and techniques that people use. So I kind of reversed engeneerd the example that comes with ofxKinect. By stripping out allmost every line of code and add them one by one again, I figured out how it works.
It turns out that the ofxKinect acts as a normal video grabber. You have to initialise, open and close it. You can check if a frame is new and get the pixels of a frame. Just like a normal video grabber. There are just some new methods for checking distance for a perticular point, and instead of only the colored pixels. You can get the depth pixels for instance.
The most handy features –of what I’ve found so far– are the far- and neartreshold members. Almost like a focal point of a normal camera, exept with hard edges. Whatever is out of those boundries, just does not get registered. So the result of that image –a black background for that what is not ‘in focus’, and a greyscaled image for what that is– can easely be put in some sort of blobdetection. Like OpenCV. Ofcourse, that is wat happens in the example. The image that came out of the Kinect is put in an OpenCV image so it can be analyzed. From here on, ofxOpenCV takes over.
Once I understood that, it all made some sense and I was able to put the finger detection of daniquilez in. That just analyses an OpenCV image and mine happened to came out of a Kinect.
There are still some bumbs in the road though. The greyscale image that comes out of the Kinect is kind of jagged. I still need to find a way to smooth that out so that the fingerDetection can do a better job. All in all this was the first try to make some sense of it all just by hacking together some examples I found online.
I did found an blogpost of Patricio González Vivo as well. He made a hack to the famous NUIGroups CCV app. His app takes the Kinect as source and uses the same nice interface CCV has. I did not dive into the source code of Particio’s app –which he so kindly shares– yet to see if the blob’s that come out of it have a z (or depth) member. But when I do, I will try to fit in daniquilez’s finger detection as well.
I do not have a demo yet because it really is the first try, and things are a bit buggy at best. But I want to post some soon.
This post will be a collection easy accessible links to projects related to mine. Until I’ve setup the WordPress links correctly I will update this post. So if you are interested, bookmark this page or something.
This morning I had a chat with my teacher. It cleared a lot of the questions I was struggling with. I was a little scared about choosing a technology to use before I had my research question pinned down. But I came to realize that in order to be able to define a specific research question, I needed some boundaries and a technological boundary is one of them.
So once that issue was out of the window, I could focus on what exactly it was I wanted to research. I wanted to figure out a new way of interacting with a computer, as I described earlier. Because ‘a computer’ is a very broad subject —a smartphone can be considered a computer— I had to narrow this down as well. My interests lie not only in computers, but in art as well, and especially interactive art, so I decided to look more into this direction. The thing what bug’s me the most is when I see an installation, or a new kind of technology for that matter, people are afraid to use it at first. Probably because the are afraid to break it, or to make a fool out of themselves because of not knowing how to handle it.
A perfect example is the introduction of the Public Transport Chip card here in the Netherlands. A new electronic card to travel with in Public Transport. When you enter a transport vehicle, you need to check in, and when you leave you need to check out. I won’t go into the details of the card, and it’s many many user experience / user interaction flaws, that is enough for a whole new study. But the check in / check out process is an example of how hard it is to get feedback right.
Above you see the device to check in and out with. You hold your card in front of the big pink ellipse and you hear a sound. On top of the device a green light flashes and on the display you see a welcome message. When your credit is to low, the sound is different, and the light flashes red. And when you leave, same process. That’s not to hard.
It was interesting to see how people handled it the first few times they came in contact with. Scary/skeptical face expressions and a surprised look when the thing beeps. The interesting part is that people are forced to use the device. They can’t walk away from it. That and the fact that when you enter a bus, more often than not, you do this together with some other people. And everybody wants to get home, as fast as possible. So holding up the line is not something you want to do. Ok, maybe I am exaggerating a little bit here, but I think you get the picture.
The point is that new technology is, except for nerd’s and geeks of course, somewhat scary.
So in order to make it accessible to a big audience, you need some really good feedback to let the user know exactly what is expected from him/her. This will be the focus of my research.
What I am going to do.
I am going to build a system that can track hand movement. This will consist out of a screen and a Microsoft Kinect Sensor. This is the only part of the system that the user will see. The more the Kinect Sensor is hidden the better. These will be linked to a computer that runs the software.
I am going to write the software with OpenFrameworks together with the ofxKinect addon. OpenFrameworks is a powerful c++ library designed for creative coding. It’s often used in art installations.
I focus my research on a few gestures that perform common tasks to handle content on the screen like selecting, browsing, scaling and such (I don’t know the exact tasks yet). I formulate a hypothesis about what I think is the best gesture to perform a certain task. With the system I’ve build, I will perform some user tests to see if my hypothesis is right. If not, formulate a new one. I will iterate a few times over each gesture to find the best one for a certain task.
Besides that I will do some literature study on the subject of feedback to support my hypothesis.
If you have found some cool examples of interaction without an interface, please share them in the comments!
Finally, after seven and a half year, I am starting my graduation project. And I am exited to do it!
In the first four years of my ‘school career’, I did a study ‘Media Design’ at the Media Collage in Amsterdam. Here I got to know how to use Photoshop, Illustrator and Flash. But I got really interested in web design. So I learned html, css, php and a little ActionScript.
When I finished that study, I started the study ‘Digital Media Design’ here at the HKU (School of the Arts, Utrecht). I got interested in a lot of different things. The art history classes (which I did not had before) really started something in me. The same goes for typography and visual design in general. But it soon turned out that creating graphics is not one of my stronger skills.
What really got me going was interactive art. Pieces of art that react to their environment, here I am using the term art in a very broad way though. And that was something I loved to do. “Making things work”. Instead of having something that just sits, stands or hangs there, making it ‘work’ is what I love to do. Coding is something I love to do. I have a passion for digital media so to speak.
With the end user always in mind when I do my work, I find myself being critical on the products I use daily. Technology should ease the way of living, and —whenever possible— it should just be damn cool. And when I look around, I see some damn cool things. I think of my wireless keyboard and trackpad that connect to my MacBook instantly. My Android phone that I use to browse the web when I am in a train on my way home. Things we use daily and gotten used to but which, when you think of it, are just damn cool! You can imagine the excitement I felt when I got to take part on a project for the Surface table. It turned out great!
The cool thing about the Surface table, a tablet computer or a touch phone is a new way of interacting with the device.
In the time when computers where for geeks, and geeks only, the computer consist out of a command line. When the GUI (Graphical User Interface) appeared, that command line was replaced by windows, other visual elements and a mouse to interact with. That was a big thing. A whole new way of interacting. But since then (I am talking about around 1981), things have been, well, the same. Until the touch devises showed up.
With the old point and click computer, the input (keyboard and mouse) is completely separated from the feedback (the screen). But with touch, the input and the feedback are in exactly the same spot. Right under you finger. More and more there is not just one click point, but my hand has five fingers! Endless possibilities.
All well and good, but my computer still suffers from the one-point-syndrom. Time for a change. What would happen if my computer recognised my fingers? How should I browse my files when I have two hands with ten fingers on them?
That is what I will find out in this graduation project. I must say, I am at the start of my project here. So anything more concrete then this I can not be at this time.
For most, I struggle with the question, will the future of computing be with a device you have to touch and hold or does it lie in the spacial movement like the Wii tries to do?
In this blog I will keep track of my findings and use it as a documentation for myself. But since we live in a digital age, I am more than happy to share it and hear what you think about it!
I am building a website in witch I have an element that always needs to be visible to the user. So I could use css property position:fixed; to do just that. While this works fine for headers and footers, making an element somewhere in the middle of the page fixed, that just doesn’t look nice.
What I wanted was a solution that when the page is scrolled down and the important element is reaching the top of the page, that it —instead of keep on scrolling and thus hiding— stayed on top.
Word’s explain this only so far. So here you can see a demo of what I am talking about. To cut a long story short, Google did help me out, but what I could find was a lot of messy code. I tend to use jQuery a lot so I thought, why not make a plugin out of this?
It’s not a big thing or anything like that, but I thought that if it could be useful to me, maybe it is useful to others as well.
So let me explain what is going on here.
Say we have an div element with the id of ‘my-menu’. In your JavaScript or jQuery code you just use the following code: $('#my-menu').scrollelement();
How to set it up:
First of all, since this is a jQuery plugin, you need to have jQuery loaded. You can host it on your own web server and reach it like this: <script src=”/path/to/jquery.js”></script>
or grab it from the Google code server: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
(please note that this plugin works with jQuery 1.3.x and above)
once you downloaded the code, you have basicly two options. Load the plugin from it’s own file. The same way as with jQuery on you own server, but point it to the plugin file (jquery.scrollelement.js). Pro: you don’t have to deal with the code. Con: A extra http request.
Or you can copy past the code in your own script. Gives you a little messy script, but does not need the extra http request.
Now you are ready to put it in to action, by using the $('#my-menu').scrollelement(); code.
Parameters
There are two options to use the .scrollelement();. It can just push it down. No fancy animations whatsoever. This requires no extra parameters.
Or you can have it animated. When the element scrolls out of the page, it ‘swings’ back in to view. Like so: .scrollelement( {'animate': true} );
When you use the animation, the plugin actually uses .animate(), and thus you can use the parameters for .animate(); ‘duration’, ‘easing’ and ‘complete’ as well. That will look like this: .scrollelement( {'animate': true, 'duration': 'slow', 'easing': 'swing'} );
All of the parameters are not required. Except for the animation parameter if you want to see any animation at all.
The last parameter is ‘offset’. This puts some space between the edge of the browser and the top of the element. Note that this is NOT to be used to position the element on the page. But only to gives some space while scrolling.
Keep in mind
You have to keep in mind the following things:
I’ve tested this plugin on my Mac, so it works in Safari, Chrome, FireFox and Opera (although in FireFox the non-animated version not that smoothly, I guess it’s due to the JavaScript speed of FireFox, but I’m not sure). I have not tested it in Internet Explorer… yet. But I will soon.
It is highly recommended that the element you want to be scrollable is set on position: absolute; in css. Because if this is not the case, the content below the scrolling element will be pushed down as well. And likely to mess up your design. It’s due to the fact that once the element does NOT have position: absolute;, it still exists in the document flow and thus effects it’s surrounding elements.
And that is it. I hope you can use this for your own project. And please be kind, if you use this, leave the comment above the plugin intact. If you have questions or requests please post them in the comments so I can look in to them! The demo The code
