tag:blogger.com,1999:blog-70244549496723917982024-03-14T14:08:52.787+01:00HCI Research & Tech.Human-Computer Interaction is a very interesting domain. Everyone using a computer is surely facing some of the concepts. Most of times without detecting it.
In this blog I present some technologies and reviews in this area and about my work.
You can follow me on twitter through @boulabiar
(The blog is from 2007, first articles were off-topic)Anonymoushttp://www.blogger.com/profile/05025726494374405899noreply@blogger.comBlogger14125tag:blogger.com,1999:blog-7024454949672391798.post-65835073347053274072013-08-18T19:09:00.003+02:002013-08-18T19:13:19.036+02:00Applications as canvas, rethinking how we design applications on Linux<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div style="text-align: justify;">
In this article, I will try to imagine a new way to build applications on Linux. Starting from questions like: How applications can be easier to tune, to refactor and support the new platforms or input devices? Does Linux applications have problems that should be spotted? Does using a Software Bus improve or make a radical change of the way we currently develop?</div>
<br />
<br />
<h3 style="text-align: left;">
The philosophy of the UNIX system</h3>
<div style="text-align: justify;">
Ken Thomson has taken a lot of decisions while designing UNIX, he wanted to create a powerful system composed by writing small software pieces that "<b>do one thing and do it well" </b>and which can be connected together using pipes in order to accomplish a more complex tasks. </div>
<div style="text-align: justify;">
Building <a href="http://en.wikipedia.org/wiki/Unix_philosophy" target="_blank">short, simple, clear, modular, and extendable code</a> has allowed an easy maintaining and understanding of how the full system work.</div>
<div style="text-align: justify;">
Linux has inherited such powerful philosophy, and this is why it is used everywhere in servers. When something bad happens, you know the cause and can fix the broken component. You can also write scripts that simplify things.</div>
<div style="text-align: justify;">
However, GUI applications in Linux don't apply the UNIX philosophy, each application is an independent island itself.<br />
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPhGz9lw56QuZFoxvLInHxMz3CMl6PKlderOjv4NAoM4bnA4xK8ojEurQ8BOdUoDaf6pSE-asKnq8ua6OtLlwI5vIO-E4cv58F2s3WTqFvjhc3w1hZrJAURpX6Qjnep1mk47dLyroU4Ig/s1600/pipe.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="58" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPhGz9lw56QuZFoxvLInHxMz3CMl6PKlderOjv4NAoM4bnA4xK8ojEurQ8BOdUoDaf6pSE-asKnq8ua6OtLlwI5vIO-E4cv58F2s3WTqFvjhc3w1hZrJAURpX6Qjnep1mk47dLyroU4Ig/s320/pipe.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Two Unix Commands, connected using a pipe</div>
<br />
<br />
<div style="text-align: justify;">
What if have the possibility to extend this concept to existant GUI applications? We will try to present some of the scenarios we have got and we will limit this preliminary study to creative tools for designers.</div>
<br />
<br />
<h3 style="text-align: left;">
<span style="font-size: x-large;">Scenario 1: Scripting GUI Applications</span></h3>
<div style="text-align: justify;">
Graphical applications can only be accessed through their interface proposed by the original main developers. The devices used are mostly the keyboard and the mouse, and if an advanced user wants to do a repetitive or a specific advanced task, he needs to use macro recording tools.</div>
<div style="text-align: justify;">
Macro recording tools are not available inside every application, same external applications can solve this like "snippets" but we still need the GUI interface to be available</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Why we still external tools that depends on the GUI to automate things? Isn't better that we have the possibility to automate applications without relying on the proposed interface?</div>
<div style="text-align: justify;">
<br />
Many advanced tools in Linux, like inkscape and gimp, tried to provide this: a non GUI interface that can be accessed via scripts. But sometimes this interface lacks many of the functions, and we can't see what we are doing in live until we open output files.</div>
<div style="text-align: justify;">
<br />
<span style="font-family: Courier New, Courier, monospace;"><br class="Apple-interchange-newline" />import dbus</span><br />
<span style="font-family: Courier New, Courier, monospace;">bus = dbus.SessionBus()</span><br />
<span style="font-family: Courier New, Courier, monospace;">ro = bus.get_object("org.inkscape",</span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><span style="font-family: 'Courier New', Courier, monospace;">"/org/inkscape/desktop_0")</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">print ro.ellipse(0,0,100,100)</span><br />
<span style="font-family: Courier New, Courier, monospace;">print ro.ellipse(100,100,200,200)</span><br />
<span style="font-family: Courier New, Courier, monospace;">print ro.ellipse(50,50,150,150)</span><br />
<span style="font-family: 'Courier New', Courier, monospace;">print ro.select_all()</span><br />
<div>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
<br />
Using a simple DBus API like above, we have all the benefits united, we can access the application from outside, script it, and we have the possibility to see the result live on the application canvas, we can modify script options, or directly manipulate objects for operations that is easy to perform without a script. <span style="text-align: left;">DBus has many language bindings, so we can use any interface we want.</span></div>
Going in the direction of a DBus solution, is like opening a Pandora Box.<br />
<br />
<br />
<br />
<h3 style="text-align: left;">
<span style="font-size: x-large;">Scenario 2: Interactive programming</span></h3>
<div style="text-align: justify;">
In the previous scenario, we speak about scripting applications, but what if we combine some advanced script, add a GUI interface, and make them configurable ?</div>
<div style="text-align: justify;">
We have then the possibility to create "plugins", but which lay in another process, written maybe in another language, and can do a lot more things.</div>
<div style="text-align: justify;">
We can write a small script, see the result on the canvas, and modify parameters values to eliminate developers blind coding.<br />
<br />
<div class="" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjie2KwpWBuKF9wmLBz0Qavqo0N9vAYycv1bjN38_HAt2rM3o_AKGCNx1GxLPkq8YXZeyDsBbXp3oK382b33WCiBma38YOOJMs1og9xvcs8wnsTA-YEZwz5VLV-9rJPBEpASoiexcSswyg/s1600/interactive.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="129" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjie2KwpWBuKF9wmLBz0Qavqo0N9vAYycv1bjN38_HAt2rM3o_AKGCNx1GxLPkq8YXZeyDsBbXp3oK382b33WCiBma38YOOJMs1og9xvcs8wnsTA-YEZwz5VLV-9rJPBEpASoiexcSswyg/s320/interactive.png" width="320" /></a></div>
<div class="" style="clear: both; text-align: center;">
Interactive Coding applied on Inkscape objects. We can see the result directly when modifying objects properties.</div>
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
More advanced tools can emerge if we add operating system architecture knowledge, like "magic lenses" concept. In this example we know many things about the application including its window, its objects, its functions, we provide semi-transparent window that can modify inkscape internal objects.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/srwjt6qPVIk?feature=player_embedded' frameborder='0'></iframe></div>
If we push more this concept, we can force a simple drawing application to act like a graph plotting app. We can even use it as an animation tool by modifying objects properties like position, color, size etc.<br />
<div class="separator" style="clear: both; text-align: center;">
<object class="BLOGGER-youtube-video" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" data-thumbnail-src="http://i1.ytimg.com/vi/Yr_tqxQfEzY/0.jpg" height="266" width="320"><param name="movie" value="http://www.youtube.com/v/Yr_tqxQfEzY?version=3&f=user_uploads&c=google-webdrive-0&app=youtube_gdata" /><param name="bgcolor" value="#FFFFFF" /><param name="allowFullScreen" value="true" /><embed width="320" height="266" src="http://www.youtube.com/v/Yr_tqxQfEzY?version=3&f=user_uploads&c=google-webdrive-0&app=youtube_gdata" type="application/x-shockwave-flash" allowfullscreen="true"></embed></object></div>
<br />
We can see the animation directly, and we can export a new image each time. The set of image can be combined to create a video or any animation.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCpDpsLqZc7EqCc2UnY3rTnIShFuYf9lSO7CDnPLM3K5NdPwhEIuhexu3goNXA5T6vbApFamB9sbSwiZgz6io5OdcbcT6_OHUqERFuwUeVCi02gju5Vgy9QEFFxpKWXA1YwfaSWIpwir4/s1600/b.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="122" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCpDpsLqZc7EqCc2UnY3rTnIShFuYf9lSO7CDnPLM3K5NdPwhEIuhexu3goNXA5T6vbApFamB9sbSwiZgz6io5OdcbcT6_OHUqERFuwUeVCi02gju5Vgy9QEFFxpKWXA1YwfaSWIpwir4/s320/b.gif" width="320" /></a></div>
<div class="" style="clear: both; text-align: center;">
This animation is created using inkscape by modifying stars properties, exporting each frame, and finally creating a full animation from the set of images.</div>
<div>
<br /></div>
<h3 style="text-align: left;">
<span style="font-size: x-large;">Scenario 3: Factorisation of application programming</span></h3>
<div style="text-align: justify;">
More than creating these advanced plugins for application, we can push the concept to the extreme. What if we eliminate the application default GUI and have the ability to show another interface we want and which is only connected to the core app through dbus calls ?</div>
This may make some of you think about the ubuntu HUD<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.blogcdn.com/www.engadget.com/media/2012/01/2012-01-24ubuntu-hud-menus.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="http://www.blogcdn.com/www.engadget.com/media/2012/01/2012-01-24ubuntu-hud-menus.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
We can use an application using another interface and providing more functionalities, by taking its menu in the case of ubuntu HUD out of it, and communicating through DBus.</div>
<br />
<br />
<h4 style="text-align: left;">
Solving tools inconsistency</h4>
<div style="text-align: justify;">
Why in hell we need such a thing? A first argument is by asking the closest designer you know about the tools he uses. Most of times he will cite a lot of tools, most tools share a common base of functionalities (which is drawing..) but each one add other functions, like sketching templates, exporting a mockup scenario, vector drawing, animation making, ...</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnEA40wxtu-fO9PCrUxlX_YC6a-sLJWzEa0IxsborFSKrfV4fZGRJr5onpmibSF4g6lse2sKIMdmHoY0P6Njcv2RZ0dNVqqKYuXaYEnTlqP8k2JcbvJ8bB7GyaHcYDsEEMHijyGKWW6Gc/s1600/qcad.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnEA40wxtu-fO9PCrUxlX_YC6a-sLJWzEa0IxsborFSKrfV4fZGRJr5onpmibSF4g6lse2sKIMdmHoY0P6Njcv2RZ0dNVqqKYuXaYEnTlqP8k2JcbvJ8bB7GyaHcYDsEEMHijyGKWW6Gc/s200/qcad.png" width="200" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj0HPwpWxnhj17f5KIfjcZOqMnrjVjr_HGu2j6Nmxg8zFvgUgA75-vE_Y7hakx_cGFKDuok8f2Nt9U6mYV8PAnR2G0dkKlytU6mWMSEoA_BvOZKstkfLb6TQ7IbvikO48wO8IXGXMPUSs/s1600/librecad.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj0HPwpWxnhj17f5KIfjcZOqMnrjVjr_HGu2j6Nmxg8zFvgUgA75-vE_Y7hakx_cGFKDuok8f2Nt9U6mYV8PAnR2G0dkKlytU6mWMSEoA_BvOZKstkfLb6TQ7IbvikO48wO8IXGXMPUSs/s200/librecad.png" width="200" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://fc04.deviantart.net/fs71/i/2010/311/3/b/my_work_on_synfig_by_sekaisblog-d32cq9t.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="125" src="http://fc04.deviantart.net/fs71/i/2010/311/3/b/my_work_on_synfig_by_sekaisblog-d32cq9t.png" width="200" /></a><a href="http://cdn.portableapps.com/PencilProjectPortable.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="150" src="http://cdn.portableapps.com/PencilProjectPortable.png" width="200" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
CAD Tools, mockup tools, animation tools, proposes the basic functionalities of drawing, in addition to a more advanced ones depending on the final use.</div>
<br />
What if we can be able to share functionalities in a core-app, but make the interface pluggable depending on the use ? If we want to draw, we show a simple drawing GUI on top of the canvas. If we want sketching we show another one with sketching templates. If we want to animate, we show a timeline of animation.<br />
The benefit here is that a huge amount of code is shared and developers will need to write less code.<br />
<br />
<h4 style="text-align: left;">
Solving one device inconsistency</h4>
<div style="text-align: justify;">
Designer use a lot of tools to do their job, but most of them use a creative suite built by one company. This means that the interaction logic behind the tools is almost the same. The icons are also the same. If someone use one tool, he won't be lost using another.</div>
<div style="text-align: justify;">
In the free/open source world, tools are created by different communities. And so are the icons, the interaction design, the logic etc. If you learn a tool, you really need to invest another big amount of time learning another. So the problem here rely in the interface and the interaction.</div>
<div style="text-align: justify;">
What to do if we want to solve this problem? A company which builds the <b>platform </b>and wants to invest in this, can hire a designer to create GUI for a set of applications, and they will share the same logic. Linking the interfaces with applications should be very easy if they export all their methods on DBus. It will be a functionalities-matching job.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
I want here to cite libdbusmenu by Canonical, they have sorted to grab any application menu, show it where they wants, and they use other rules for matching like searching for the menu name. In recent releases they added "a scope" to provide fuzzy matching. As they have do this only for menus, they can do the same for more internal functionalities.</div>
Getting rid of the main GUI interface and providing new ones by the company is the extreme case of such scenario.<br />
<br />
<br />
<h4 style="text-align: left;">
Adding more input options</h4>
<div style="text-align: justify;">
Some time ago, we wanted to add multitouch functionality to Ubuntu Maverick. At the time, a lot of things needed to be developed, we have some devices supported and emitting events from the Kernel, but applications just ignore all of them.</div>
<div style="text-align: justify;">
We had really a lot of discussions on what's the best way to route events through the layers of X then through libraries until reaching applications. We have to think about the raw multitouch events as well as gesture events. At the time, a quick solution to show to the world what we are doing is to develop Ginn, a gesture injection tool that works without the need of support from libraries, and without the modification of the target application itself.</div>
<br />
The solution was quite simple:<br />
Get gesture event, get the active app, Read the wishes of the user (configuration file), Convert these advanced events into something the application already understand: keyboard taps and mouse clicks.<br />
<br />
That simple solution allowed us to show to the world the beauty of what we are doing. But we were limited to mouse and keyboard shortcuts. Beside the performance issues, just imagine the power of matching such events directly to internal applications functionalities through DBus.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/OvUgLlBhwIY?feature=player_embedded' frameborder='0'></iframe></div>
<div class="separator" style="clear: both; text-align: center;">
Using hand angles detected by the Leapmotion device to move objects inside inkscape.</div>
<br />
<h4 style="text-align: left;">
Solving platform inconsistency</h4>
<div style="text-align: justify;">
Many users have more than one computing device, they can have a computer, a tablet, a phone, a TV. Software in each of the platforms is different. But the tasks we do on each of the platforms share a common basis of tasks.</div>
<div style="text-align: justify;">
Let's get back to creative and drawing applications example, we can use a drawing application on a desktop computer, and use another one on a tablet. The usual computer interface will be unusable on the tablet, as the input modalities and goals are different. What we still have are the application logic which stay the same: drawing, image filters, image operations (crop, resize, ...)</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZR-XO-qPgrIPeHXqLP3TZ3vlBxAURnZym8tofoW2swal7Tl9CQ2Kw0rZn3OptlVKiLMUfHtug_G75TKCmF5nOaRKKVJ7CD02ldqDl7sRkRm8v3QpTa5qsTvSICYO9OvV6baiNJuiOjEE/s1600/multi.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="197" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZR-XO-qPgrIPeHXqLP3TZ3vlBxAURnZym8tofoW2swal7Tl9CQ2Kw0rZn3OptlVKiLMUfHtug_G75TKCmF5nOaRKKVJ7CD02ldqDl7sRkRm8v3QpTa5qsTvSICYO9OvV6baiNJuiOjEE/s320/multi.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Do we need to create a new application for each platform? Or just one and show a new GUI and interaction model for each one? What if we want to start something on a device and complete/view it on another?</div>
<br />
<span style="text-align: justify;"><br /></span>
<span style="text-align: justify;">What will remain is just the canvas which will serve as the feedback for the operations, along with the included algorithms. All of the functionalities will be exposed through the DBus Software Bus.</span><br />
<div style="text-align: justify;">
The GUI interface will be an additional layer displayed on top of the application, it changes depending on the used platform.</div>
<div style="text-align: justify;">
Application developer will not be asked for creating specific interfaces but the platform development team, specially if they are targeting many platforms should think about this factorization of the development. No new application should be coded from scratch, but just interfaces matched to application internal functions published on the bus.</div>
<br />
<br />
<h3 style="text-align: left;">
<span style="font-size: x-large;">Scenario 4: Application composer</span></h3>
<div style="text-align: justify;">
What if we have a platform that have a lot of applications exporting their functions on the bus. In some cases, a user wants to accomplish a task that use functions dispersed in many applications. An application composer is a meta-application that can accomplish this complex tasks. It connects the output of an application to the input of another in a similar way to CLI scripts. But here the "running mode" can be visible.</div>
<div style="text-align: justify;">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVQVMrLptx53zIvU2dk9Z0MqrOqZi94ROwnqCbsZJIx9nGwv4JN7-gp4iCzUshmaS_IkioC0k_AFn5oAxNiEkFEgsa1y34Od8t3DuZQJYTR7fjkV13XLqmJmXME7sbwzcrAEObqncpP2A/s1600/compozer.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVQVMrLptx53zIvU2dk9Z0MqrOqZi94ROwnqCbsZJIx9nGwv4JN7-gp4iCzUshmaS_IkioC0k_AFn5oAxNiEkFEgsa1y34Od8t3DuZQJYTR7fjkV13XLqmJmXME7sbwzcrAEObqncpP2A/s320/compozer.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Concept image showing an application composer using a set of GUI applications in order to accomplish a bigger task.</div>
<br />
<b>Example:</b></div>
<div style="text-align: justify;">
I want to get data from a Calligra Sheets table, draw these data in an application, export to an image, draw a new set of data, export to another image, ... combine images into an animation. <span style="text-align: left;">This pipeline can be abstracted and launched by an application composer which will connect applications themselves to accomplish the bigger task. </span><br />
<span style="text-align: left;"><br /></span></div>
<h3 style="text-align: left;">
<span style="font-size: x-large;">Scenario 5: Interactive Documentation</span></h3>
A new way of building applications needs a new way of building documentation.Now there are two famous ways to create tutorials:<br />
1. Record videos of a users using the software,<br />
or<br />
2. Take screenshots of the steps and write an accompanying article.<br />
<br />
In the two cases user needs to switch back and forth between his software and the tutorial. This can be a problem for novice users as they can lost the step they are in, or fed up by pausing and playing the video each time.<br />
<br />
What if we can create a tutorial which is aware of the current step of the user?<br />
<h4>
</h4>
<h4>
Application aware Documentation</h4>
<div style="text-align: justify;">
In DBus, we don't only have methods export, we can also connect to signals and get more information from the application. We can create a tutorial by showing a small action to be done by the user, and then waiting for the signal of it being done. And moving to the next action.<br />
This frees the user from switching between the application and the tutorial, and avoid being lost in a lot of information.<br />
<br />
<h4 style="text-align: left;">
Generating usual documentation</h4>
<div>
We still can have the old way of documentation but that can be generated by automatically taking screenshot of steps or by my video recording. If the GUI or the icons change, we regenerated the tutorial.<br />
<br /></div>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9UMij3210yHWxr-tHDJTt2GEe5ZeTPp1m2HF-BaX4Q8OKwK1DqHwi0W0CGppFw2HpTdpuvQHqgcccgQNguRFWocc9ox_Gz2VoBOJABQsaJBBwGEwWXxnHNbR9yR1pAjNpoGSFC4OOdU8/s1600/doc.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="187" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9UMij3210yHWxr-tHDJTt2GEe5ZeTPp1m2HF-BaX4Q8OKwK1DqHwi0W0CGppFw2HpTdpuvQHqgcccgQNguRFWocc9ox_Gz2VoBOJABQsaJBBwGEwWXxnHNbR9yR1pAjNpoGSFC4OOdU8/s320/doc.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Concept of recording the steps of a tutorial, using a specific GUI, and generating a video or textual information.</div>
<br />
<br />
<br />
<br />
<br />
(<b>This article is currently a draft that stayed at this state a long time.</b><br />
<b>Please be free to help improving the concept and idea by some brainstorming or/and critics</b><br />
<b>I may add more information that I have in an independent paper with some testing code in the coming days.</b>)<br />
<br />
Things that still need to be discussed:<br />
Standardization, Drawbacks, "microcloud" (per House), ...<br />
<br />
<br /></div>
Anonymoushttp://www.blogger.com/profile/05025726494374405899noreply@blogger.com1tag:blogger.com,1999:blog-7024454949672391798.post-81912033550152861302012-07-05T15:44:00.002+02:002012-10-25T18:05:56.811+02:00Unveiling The Technology Behind Leapmotion<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div style="text-align: center;">
<span style="color: red;"><b>The information written in this article are based on guesses using sources from the Internet, including scientific articles and demonstrations videos. Mirrors seems to be not used but other simpler mechanisms as cited below near Fig.5.</b></span></div>
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: left;">
Introduction</h3>
<div style="text-align: justify;">
<span style="background-color: white;">Last month I have been surprised like everybody else while watching the leapmotion video. Many of the famous people working in the NUI area have doubts that it's a fake.</span></div>
<div style="text-align: justify;">
<span style="background-color: white;">The technology used in leapmotion is 100x more accurate than the kinect and uses only 2% of the CPU, a complete not usual </span><span style="background-color: white;">break</span><span style="background-color: white;"> to today's technologies.</span></div>
<div style="text-align: justify;">
<span style="background-color: white;">Since the launch, I have been searching </span><span style="background-color: white;">in my free time </span><span style="background-color: white;">for the possible technology being used inside Leapmotion. And it appears that I have found how they managed to release such great device.</span></div>
<div style="text-align: justify;">
<span style="background-color: white;"><br /></span></div>
<h3 style="text-align: left;">
<span style="background-color: white;">Search and Elimination</span></h3>
<span style="background-color: white;">I have searched for all possible technologies which can recognize gestures:</span><br />
<br />
<ul style="text-align: left;">
<li><span style="background-color: white;">Ultra-Sound: can be used, but in that level, the precision can't even reach in best cases less than 1cm.</span></li>
<li><span style="background-color: white;">Electric Field Sensors: Are not precise too, can't detect non-conductive objects.</span></li>
<li><span style="background-color: white;">Structured light: Kinect-like ? but kinect is less accurate, and not as responsive as the leap.</span></li>
</ul>
<div>
You can find more guesses <a href="http://goo.gl/zaAbI" target="_blank">here</a> and <a href="http://goo.gl/2QeWu" target="_blank">here</a></div>
<div>
<span style="background-color: white;">If not one of all these, what can the technology be ?</span></div>
<div>
<br /></div>
<h3 style="text-align: left;">
Tracking the tiny details</h3>
<div>
<div style="text-align: justify;">
The leap have released many videos to demonstrate their gadget, after watching them carefully we can guess the limits of the system and from them guess the composition of the system.</div>
</div>
<div>
<br /></div>
<div>
Let's start with this photo:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi5U53JUw1iC7v1k6SHYtlJeUImw5t1KEF4iwWqTS0wZrjEmv5TMNTQlDPkfRdvfpEA-fP2yfeCHgAgvfRfZHqVxrC4jfBHdA4PCtjnB24NXWiNvqnoxr-E1wzRq_foWTNBW9-Etkq1Ro/s1600/shot0167.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi5U53JUw1iC7v1k6SHYtlJeUImw5t1KEF4iwWqTS0wZrjEmv5TMNTQlDPkfRdvfpEA-fP2yfeCHgAgvfRfZHqVxrC4jfBHdA4PCtjnB24NXWiNvqnoxr-E1wzRq_foWTNBW9-Etkq1Ro/s400/shot0167.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Fig.1: David Holz demonstration</div>
<div>
<br /></div>
<div>
<div style="text-align: justify;">
As you can see in Fig.1, the hand of David is a set of dynamic points, but also it doesn't appear to be an exact human hand. Fingers and the palm of the hand are fitted inside some sort of eggs. Which means only something: what we see is just a model of the hand, not the raw input.</div>
</div>
<div>
<br /></div>
<div>
Having a model, means also that there is no such complete information from the input. And this answers one of my first questions :</div>
<blockquote class="tr_bq">
<i>How have they managed to get all the surface of 3D objects ? </i><i style="background-color: white;">Even the one which is not facing the sensor ?</i></blockquote>
<div>
<a href="http://goo.gl/M5KJz" target="_blank">Engadget</a> is the first website to release another useful information detail: the nature of the sensors used.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuWLX_jKSAZrVs2lE9SbvzaJAGoxJNZECoJsmKFXlafJeW1Ykz5K0lOCXzCVGYMa2z0YAaw92qAfE67puDz1yWY0YcTwehkG3HXnBhysiYJVuK1JBAU8fxvEzPvNYU-3DSc-Jly6K2BUY/s1600/cams.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="311" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuWLX_jKSAZrVs2lE9SbvzaJAGoxJNZECoJsmKFXlafJeW1Ykz5K0lOCXzCVGYMa2z0YAaw92qAfE67puDz1yWY0YcTwehkG3HXnBhysiYJVuK1JBAU8fxvEzPvNYU-3DSc-Jly6K2BUY/s400/cams.png" width="400" /></a></div>
<div style="text-align: center;">
<span style="background-color: white;">Fig2. Sensors used in Leapmotion are just bare <a href="http://goo.gl/0E27Y" target="_blank">VGA</a> cameras !</span></div>
<div>
<br /></div>
<div>
Having cameras as sensors confirms the use of a model to show the hand. Because cameras can only see a surface.</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<div style="text-align: justify;">
A precision of 0.01 mm ? This is another important detail. That precision coming from the data provided from bare cameras mean that there is more hidden data to be resolved in usual RGB color space. 0.01 mm = 10 µm which is not very far from the infrared <a href="http://en.wikipedia.org/wiki/Infrared" target="_blank">wavelength</a>.</div>
</div>
<div>
<div style="text-align: justify;">
Here we can no more speak about pixels, but only frequencies, The resolution space where the information will be calculated is the <a href="http://en.wikipedia.org/wiki/Frequency_domain" target="_blank">frequency domain</a> after a <a href="http://en.wikipedia.org/wiki/Fourier_transform" target="_blank">Fourier Transform</a>.</div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-size: x-small;">(And this is how I see it: if you can resolve an equation in a "usual" space, just find another space where it will become easy. Even in imaginary spaces like Complex Space etc. Reminds you about sci-fi movies and parallel space ? If you have a problem difficult to solve in you life, move it to another one and once you've the solutions get them back after a small transformation. ;-)</span></div>
</div>
<h4 style="text-align: left;">
<span style="background-color: white;"><br /></span></h4>
<h4 style="text-align: left;">
<span style="background-color: white;">T</span><span style="background-color: white;">he Missing Link !</span></h4>
<div>
<div style="text-align: justify;">
<span style="background-color: white;">During my M.Sc in Human-Computer Interaction in Telecom Bretagne here in France, I have learned that it takes about 30 years for new invention to go from simple research to mainstream products which called by Bill Buxton the </span><a href="http://goo.gl/oYjiw" style="background-color: white;" target="_blank">long nose of innovation</a><span style="background-color: white;">. So if it's here now then it should have been for so long.</span></div>
</div>
<div>
<div style="text-align: justify;">
Searching inside the cloud of innovations I've seen in the past, I remembered a company which have made a lot of buzz last year, during this same period, it's called <a href="http://goo.gl/w8Rb5" target="_blank">Lytro</a>.</div>
</div>
<div>
<div style="text-align: justify;">
Lytro have made a new product which let's you take pictures then refocus on any object in posteriori. </div>
</div>
<div>
<div style="text-align: justify;">
Here comes the missing link, if we are able to refocus objects, we'll be able to detect 3D depth from unfocused objects, the blur from unfocused objects is a continue function only limited by the light's wavelength and sensors accuracy resolved in the frequency space already mentioned. </div>
</div>
<div>
<div style="text-align: justify;">
<br /></div>
</div>
<div>
<div style="text-align: justify;">
Once I have the right keywords, now I can search inside the research papers base. And it appeared that a lot of papers explained the concept in details.</div>
</div>
<div>
<br /></div>
<h3 style="text-align: left;">
Depth of scene from depth of field</h3>
<div>
The first paper I've found <a href="http://goo.gl/GXebh" target="_blank">is published in 1982</a>, 30 years from now confirming again the Buxton's Law of big Nose.</div>
<div>
<br /></div>
<div>
<div style="text-align: justify;">
To be able to imagine the concept, take your smartphone, open the photo taking app, now touch the screen and you'll be able to focus any object in the scene. The phone has a function that moves the lenses to make an object looks fine, the function just selects where is the region with the minimum fuzz.</div>
</div>
<div>
<div style="text-align: justify;">
Now, image if we have the inverse of this, the lenses are just fixed to a predefined Focus distance and Depth of Field, images looks clear only when they are in that DoF, but if they are farther or nearer, they look fuzzy. Using the inverse function found in any cameras, you can predict the depth from the fuzz.</div>
</div>
<div>
<br />
<blockquote class="tr_bq" style="text-align: justify;">
<i>"Along each geometric ray between the image plane and the lens, the image moves from being in relatively poor focus, to a point of best focus, and then back to being out of focus. Thus if we could trace along the path of each incoming ray to find the point of exact focus then we could recover the shape of the 3D world."</i></blockquote>
</div>
<div>
<br /></div>
<div>
That was the concept, but in real world you'll need to go deeper with mathematics and technical details.</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi98V_ahJ5bFChSmdI456YW0K5q4mgTtwIookCwZs55rHl_f4Of-esRxRNQm0c6J8w_BehGImTtMpfawEgEl_w8f6_hesGkXmO4kuvy03tFlH-yY50u7bFJQQ2M87fng6auzL_PYpRoXjI/s1600/i1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="209" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi98V_ahJ5bFChSmdI456YW0K5q4mgTtwIookCwZs55rHl_f4Of-esRxRNQm0c6J8w_BehGImTtMpfawEgEl_w8f6_hesGkXmO4kuvy03tFlH-yY50u7bFJQQ2M87fng6auzL_PYpRoXjI/s320/i1.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy_qRtf-BLh0W5Osv3GiftKuDY10UJMIStGj_OsAkNRIyELBuy9ztIXVoDnWbHrywsLIUTiheN9P0x3nXCgjdISxzAfC4gjkr4gkoBFEP0fsH57n9btj49VlcvRzf-Zpfnkme5Gh1oqWE/s1600/i2.png" imageanchor="1" style="background-color: white; margin-left: 1em; margin-right: 1em;"><img border="0" height="209" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy_qRtf-BLh0W5Osv3GiftKuDY10UJMIStGj_OsAkNRIyELBuy9ztIXVoDnWbHrywsLIUTiheN9P0x3nXCgjdISxzAfC4gjkr4gkoBFEP0fsH57n9btj49VlcvRzf-Zpfnkme5Gh1oqWE/s320/i2.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: white; text-align: left;"> </span><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9a6ibw5Cn6s0Zbixcm0L4FXy6xJgDBsC-pA2y3VCcYNtWp_xWS5ecvTAZZA2hlkSczeV6twXFIbCI44XFVTh_JrnvWOR50bbWVTE4lGB8IyiRS3m7-oWCqQgWyl68PtkL7UWLD3w3OBU/s1600/i3.png" imageanchor="1" style="background-color: white; margin-left: 1em; margin-right: 1em;"><img border="0" height="208" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9a6ibw5Cn6s0Zbixcm0L4FXy6xJgDBsC-pA2y3VCcYNtWp_xWS5ecvTAZZA2hlkSczeV6twXFIbCI44XFVTh_JrnvWOR50bbWVTE4lGB8IyiRS3m7-oWCqQgWyl68PtkL7UWLD3w3OBU/s320/i3.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Fig.3: Images with different DoF from a single shot [<a href="http://goo.gl/Sr2MR" target="_blank">levin2007</a>] </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
The simple key formula for Distance to an image point used by <b>Alex Paul Pentland</b> is :<br />
<div style="text-align: center;">
<span style="background-color: white;">\( D=\frac{Fv_0}{v_0-F-\sigma f} \)</span></div>
<div style="text-align: left;">
<span style="background-color: white;">where:</span><br />
<span style="background-color: white;">\(v_0\)</span><span style="background-color: white;"><span style="background-color: white;">: distance between the lens and the image plane</span></span></div>
<div style="text-align: left;">
<div style="background-color: white;">
\(f\): f-number of the lens system</div>
<div style="background-color: white;">
\(F\): focal length of the lens system</div>
<div style="background-color: white;">
\(\sigma\)<span style="background-color: white;">: the spatial constant of the point spread function (radius of blur circle) which is the only unknown variable.</span></div>
<div style="background-color: white;">
<br />
<blockquote class="tr_bq" style="text-align: justify;">
<i>Because differing aperture size causes differing focal errors, the same point will be focused differently in the two images. The critical fact is that the magnitude of this difference is a <u>simple function</u> of only one variable: the distance between the viewer and the imaged point. To obtain an estimate of depth, therefore, we need only compare corresponding points in the two images and measure this change in focus.</i></blockquote>
</div>
</div>
<div style="text-align: center;">
<span style="background-color: white;">\( k_1\sigma_2^2 + k_2 ln \sigma_2 + k_3 = ln F_1(\lambda) - ln F_2(\lambda) \)</span></div>
<div style="text-align: left;">
<div style="text-align: justify;">
<span style="background-color: white;"></span><br />
<blockquote class="tr_bq">
<span style="background-color: white;"><i>The difference in localized Fourier power is a monotonic increasing function of the blur in the second image. <span style="background-color: white;">Or by the first equation, the distance to the imaged point is a monotonic decreasing function of the difference in the localized Fourier Power.</span></i></span></blockquote>
<span style="background-color: white;"><br /></span>
<span style="background-color: white;">And as this post is not a formal scientific article, I won't put a lot of math, but instead the reference to them. You only need to retain that with some bricolage you can get depth from focus and defocus and t</span><span style="background-color: white;">o know in details how this can be made, you can start reading [</span><a href="http://goo.gl/F3928" target="_blank">Pentlend87</a><span style="background-color: white;">,</span><a href="http://goo.gl/aKEdL" target="_blank">Pentlend89</a><span style="background-color: white;">] and [</span><a href="http://goo.gl/rtoKW" target="_blank">Xiong93</a><span style="background-color: white;">] then follow all the new work coming out of these papers.</span></div>
</div>
<h4 style="text-align: left;">
</h4>
<h4 style="text-align: left;">
</h4>
<h4 style="text-align: left;">
How is this used in the leapmotion ?</h4>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSoNfU3tWkfKx7DJuLuSR_hMVx5zj1U3kSjRVJ8q1dbJn8jnJmIElPhDMZvv3LfyWTUxtq_8soduYyk2Tv-6P6TgaB-QIhU14G8o2Ijhw8xtTCI-qEXF6JMAHJQZttdvDLdA5FO8UboLQ/s1600/pentland.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="245" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSoNfU3tWkfKx7DJuLuSR_hMVx5zj1U3kSjRVJ8q1dbJn8jnJmIElPhDMZvv3LfyWTUxtq_8soduYyk2Tv-6P6TgaB-QIhU14G8o2Ijhw8xtTCI-qEXF6JMAHJQZttdvDLdA5FO8UboLQ/s320/pentland.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Fig.4: The optical system of multi-focus scene capture as explained by Pentland.</div>
<br />
<br />
The leapmotion uses ~3 cameras, each cam should see the same picture frame to remove the need of calibration as in Fig.4, so a basic system of mirrors and lenses is needed. As you can see here, the scene image enters the half-silvered mirrors system and is divided into 3 areas. Each one has a lens with different focal point. The resulting pictures transmitted by cameras are similar to the ones shown above in Fig.3 but simultaneously and in Real-Time.</div>
<div style="text-align: justify;">
In opposition to stereovision mechanism, this optical system removes any need of massive computations to calibrate the image and construct a disparity map and match objects.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMrNGR3iZW1OLeQZH38ZbOpSm5Ip6xFZy-B15SFWq4pou-SfDIpVgVCKmSkqfds0ILAUbWS0x2Ekvu_EvZ3pljbwIKGERxg6mWU4pqNt_uCN4XhN5pagVIJLIdP8DG4NCviDCA4NdrYZo/s1600/leap.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMrNGR3iZW1OLeQZH38ZbOpSm5Ip6xFZy-B15SFWq4pou-SfDIpVgVCKmSkqfds0ILAUbWS0x2Ekvu_EvZ3pljbwIKGERxg6mWU4pqNt_uCN4XhN5pagVIJLIdP8DG4NCviDCA4NdrYZo/s400/leap.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: white;">Fig.5: The possible system used in leapmotion</span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: white;"><b>Update: The Leapmotion can even not use a mirror system to generate the disparity map. </b></span><b>Other than depth from defocus, there is other mechanisms which can provide ultraprecise depth variation detection.</b></div>
</div>
<div>
<h4 style="text-align: left;">
<br /></h4>
<h4 style="text-align: left;">
Acceleration of the computation</h4>
<div>
<div>
<div style="text-align: justify;">
After all this, we know that he uses many cameras to get the surface, and the resolution space is the frequency domain. But how have he managed to get a CPU use of 2% according to <a href="http://goo.gl/lMcjv" target="_blank">ExtremeTech</a> ?</div>
</div>
<div>
</div>
<div style="text-align: justify;">
The Leapmotion is declared to use about %2 of the processor. This can be made very easily if we precompute all values of the main function and stores them in a cache. Then instead of using the CPU, we only read and use the values directly.</div>
</div>
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: left;">
The post-Leapmotion era</h3>
The introduction of devices with such precision and accuracy and in the same time built on simple mathematical models makes a break at two levels:<br />
<ol style="text-align: left;">
<li><span style="background-color: white;">The way input should be handled in today's computers and operating systems</span></li>
<li><span style="background-color: white;">The events and how to be routed inside apps, widgets, daemons.. (post-events abstraction era ?)</span></li>
</ol>
<div style="text-align: justify;">
<span style="background-color: white;">The first point is mainly a reorganisation of the input subsystem into a more dynamic way, we should not forget that Leapmotion is just 3 cameras + some magic mathematical formulas, I see the math as filter to a bare video input from 3 input devices which brings us with more information than meets the eye. </span><span style="background-color: white;">Any combination of new "filters" which mix input devices can bring more wonderful "sources".</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
The second point indicates that we are now standing on the edges of the old model of standard and prefixed input events. The model where widgets is by default subscribed to a keyboard/mouse events "or similar", taking it on focus then spreading it to upper widgets if they don't consume it.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Future applications or "Toolboxes" need a new model that allow the subscription to new "equivalent sources" with the ability for some either to subscribe or to cede the control of its internal functions access to third party managers eliminating even the need of providing a CLI/GUI/...</div>
<div style="text-align: justify;">
This part is discussed in part in the last post and needs effective working prototypes.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Linux is the only system where it will be possible to try a new concept of input handeling similar to how <a href="http://goo.gl/zmvvG" target="_blank">StreamInput</a> is currently discussed. An input mechanism where the sources are chosen in cascade, optimised then compiled in input pipes and provided for upper level use. <span style="background-color: white; text-align: center;">We may only lack enough bravery and will to change the way everything now works but with some help from mainstream kernel developers, the khronos group and people working on input and drivers factorisation from <a href="http://goo.gl/oqLFm" target="_blank">LII-ENAC</a>, this can one day see the light.</span></div>
<br />
<br />
<br /></div>
</div>
Anonymoushttp://www.blogger.com/profile/05025726494374405899noreply@blogger.com3tag:blogger.com,1999:blog-7024454949672391798.post-75923999256611719942011-12-13T17:38:00.000+01:002011-12-13T21:38:00.966+01:00Input Pipelines and Sensors Flow Soup<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR8UsoDnN9IZLGG6XvCJDGzTzy2IeDi3GTJfbuoUinL_egzHTLFd70zoADF6OXvp0EOXOX3OsgCtm0TXtWZRoctIGGgFwYwyhqiMlXCeE1e8IITK22SjpEUMI2Lm8d2KhftDW8iwmw3DE/s1600/problem.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR8UsoDnN9IZLGG6XvCJDGzTzy2IeDi3GTJfbuoUinL_egzHTLFd70zoADF6OXvp0EOXOX3OsgCtm0TXtWZRoctIGGgFwYwyhqiMlXCeE1e8IITK22SjpEUMI2Lm8d2KhftDW8iwmw3DE/s400/problem.png" width="218" /></a></div>
Fig 1. Input Layer Abstraction</div>
<div>
<br />
<div style="text-align: justify;">
By convention, Input devices are the peripherals which detect a human user input. And sensors are those which detect the environmental variation, related or not to the human.</div>
<div style="text-align: justify;">
Despite the existence of other definitions, both Input devices and sensors are needed to provide rich interaction with the user and allowing him to accomplish the tasks he want in less time.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Input devices can be the keyboard and the mouse and almost every application supports them but the definition also include touch and multitouch screens, touchpad, joysticks, etc.</div>
<div style="text-align: justify;">
From a wider point of view, keyboard and mouse seems to be two constant: K1, K2. They are modeled in operating systems using <a href="http://www.billbuxton.com/3state.html" target="_blank">Finite State Machines</a> and they are routed to the application without too much alteration of their original content. (Except the transformation of raw codes to ascii or unicode ones for example)</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>The "Why"</b></div>
<div style="text-align: justify;">
Operating systems, and I'll take Linux as an example, have abstraction layers to handle the input. Every peripherals generating key clicks is seen as a keyboard. For touchpads, mice, touchscreens, pen, etc they are attached to a virtual pointer device, and are handled as a conventional mouse.</div>
<div style="text-align: justify;">
Device drivers may generate other information (finger blob size, blob orientation, etc.) but they are all eliminated and don't reach the application.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Last years, we have faced the emergence of an 1.<u>unlimited number of input devices and sensors, each of them provide very different information</u>. And in the other side, 2.<u>rich application, exposing a lot of features</u>, or which have more dimensional variables than ones found in a single input device (3d object control in 3d environment).</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
With these 2 poles, the problem becomes obvious:</div>
<blockquote class="tr_bq">
Why is the operating system preventing us from using all devices capabilities inside our rich applications ?</blockquote>
<div style="text-align: center;">
<br /></div>
<div style="text-align: justify;">
Ok, let's fix this and answer the question with another :</div>
<blockquote class="tr_bq">
Do you have another solution for <b>mapping</b> input events to application <b>features</b> ?</blockquote>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><br /></b></div>
<div style="text-align: justify;">
<b>Mapping Input events</b></div>
<div style="text-align: justify;">
Before speaking about mapping, we should study the input itself even taking few examples.</div>
<div style="text-align: justify;">
Touchpads have their input considered as a compatible form<span class="Apple-style-span" style="text-align: center;"> of mouse input. But their brute information comes very noisy. When using direct input your pointer moves in a similar way of a Parkinson disease patient. The developers of X.org have added a "<b>filter" </b>which smooths the movement (named </span>"Response-augmented Exponentially Weighted Moving Average Filter").</div>
<div style="text-align: justify;">
Speaking about mouse input, the X.org add also another "<b>filter"</b> that alter the smoothed input to <a href="http://www.x.org/wiki/Development/Documentation/PointerAcceleration" target="_blank">accelerate its movement</a>, so you a user don't need to slide a lot of times to move the pointer in bigger screens.</div>
<div style="text-align: justify;">
And let's imagine that this flow represented in Fig 2. finishes as an input to control the camera in a 3D scene:</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigtTV9nJ8LOMZWQpvvUkSiZQVxRHrH1m43qzHHt6o7j72vhZnN2bPYXVbkJi7OOY5McrLaxxLCZ7cI5GuAMEIps1NEdxEEcJBixujnmDx7cSGAerYtIeKSGbShx2LxLcW1cbRCwA7P1_I/s1600/flow.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="128" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigtTV9nJ8LOMZWQpvvUkSiZQVxRHrH1m43qzHHt6o7j72vhZnN2bPYXVbkJi7OOY5McrLaxxLCZ7cI5GuAMEIps1NEdxEEcJBixujnmDx7cSGAerYtIeKSGbShx2LxLcW1cbRCwA7P1_I/s640/flow.png" width="640" /></a></div>
<div style="text-align: center;">
Fig 2. Input Flow to control a 3D scene</div>
<br />
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
From the last representation, the input system can be seen as a flow and in each point, the input got transformed before being routed to the application. The 3D scene itself takes that input and maps it internally to control the camera view.</div>
<div style="text-align: justify;">
The problem in this case is that, what if you want that your management meets the standard and won't be considered as a hack? You can't avoid the virtual pointer, and you can't avoid this predefined set of filters. You can't also select the manner of which the input can be mapped inside the application ( mouse(x,y) → scene(x,y) or → scene(y,z) etc.)</div>
<div style="text-align: justify;">
Another problem is that, some filters are inside the input device driver, other are inside the Input layer, and the rest belongs to the application. And all of them are hardly written and can't be changed or remapped without recompilation of the full stack.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Any time we have a new device or new events to support in the system, we keep asking this question:</div>
<blockquote class="tr_bq">
How we will fit the new device input inside this flow with minimum effort and the least loss of information ? </blockquote>
<div style="text-align: justify;">
</div>
<b><br /></b><br />
<b>Rethinking All the Stack</b><br />
In 2009, I have discovered all of this and I have found some efforts to simplify input management. Just having the ability to imagine a possible change is a lot of bravery... For a system developer who only use a keyboard, why he should think about rewriting everything ? That's a lot of work man !<br />
<br />
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
From the last figures, we can imagine that filters should be extracted outside of device drivers, and from any predefined flow in a system, and we can play with them to modify and transform raw input to any useful form.</div>
<div style="text-align: justify;">
The flow becomes a general graph, where a sensor input can control how much a filter transforms a device stream to another. For real-time and other needs we may add also a universal timing to master how much each filter takes time for his computation.<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiohfhrVh1tfY4ZEyVjkIrCTImr4jPJiJlBwrwQYL9EtVKOmYP0e2j7RI7Xl9VcC0SYnV_ie5EFnsyD9ujV_oy0PfuWCAsMI1UhPKtBrkKzckRJ7sepas_y-j9drlk01giswX-hvzqblxY/s320/2011-streaminput.jpg" width="271" /></div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: center;">
Fig 3. Input Flow as represented by <a href="http://www.khronos.org/streaminput/" target="_blank">StreamInput</a> Khronos Model.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
</div>
<b>What about applications ?</b><br />
Legacy applications takes only two sort of input : Keyboard and Mouse. These two inputs still very limited to what is possible to do. But We have already have filters which route information through them including keyboard mapping transformers (possibility to write in Arabic/French/Chinese with the same keyboard), mutlitouch injectors in legacy apps like <a href="https://launchpad.net/ginn" target="_blank">Ginn</a> (included in ubuntu), or whatever else.<br />
<br />
But wait, shouldn't we rethink the application itself ? Why they don't expose their functionalities through a Software Bus, where we have the freedom to connect filters' input to the specific action to be performed?<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuVLiDR9gtctDITQY3XaC6CP-6kWbA5W9I0l76ovrv1EHzhCn0l2PT52rlK4oJRrEf2IHoZooT8kda9i_L7oMeNXuUOWiHjQvIAsuNJJbdO8q4JDb8NV45OR4UhyphenhyphenaD7c1Pqx_O5A3V6Sc/s1600/app.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuVLiDR9gtctDITQY3XaC6CP-6kWbA5W9I0l76ovrv1EHzhCn0l2PT52rlK4oJRrEf2IHoZooT8kda9i_L7oMeNXuUOWiHjQvIAsuNJJbdO8q4JDb8NV45OR4UhyphenhyphenaD7c1Pqx_O5A3V6Sc/s320/app.png" width="320" /></a></div>
<div style="text-align: center;">
Fig 4. Rethinking application input</div>
<br />
<br />
<div style="text-align: justify;">
By doing this the biggest work will become the mapping. And we will need to search best ways to do it to perform user goals in better ways.</div>
<br />
<br />
<br />
<div style="text-align: justify;">
<b>Scientifi</b><b>c background ?</b></div>
<div style="text-align: justify;">
A lot of scientific research have studied these problems. But each of them tried to fix either the input flow, or the best mapping. But not all the cycle from and to the user.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
For the Input configuration you can see the work of Pierre Dragicevic : <a href="http://inputconf.sourceforge.net/" target="_blank">iCon</a>.</div>
<div style="text-align: justify;">
Another interesting thesis is the one by Rami Ajaj (<a href="http://archives.limsi.fr/Individu/ajaj/publications/these.pdf" target="_blank">PhD</a> in French)</div>
<div style="text-align: justify;">
</div>
Theoretical and architectural support for input device adaptation <a href="http://theoretical%20and%20architectural%20support%20for%20input%20device%20adaptatio/" target="_blank">paper</a>.<br />
<br />
<div style="text-align: justify;">
A lot of other notable exist but I can't cite it all. </div>
<div style="text-align: justify;">
<br /></div>
And for a deep study of mapping and to understand the need of filters, it is mandatory to study what is an input device, a sensor, do some <a href="http://www2.parc.com/istl/groups/uir/publications/items/UIR-1991-02-Card-TOIS-Morphological.pdf" style="text-align: center;" target="_blank">morphological analysis of their design space</a>, study actual <a href="http://www.usb.org/developers/devclass_docs/HID1_11.pdf" target="_blank">standards implemented</a> in operating systems and describing a large spectrum of devices and <a href="http://www.usb.org/developers/devclass_docs/Hut1_12v2.pdf" target="_blank">usages</a>. </div>
<div>
<br /></div>
<div style="text-align: center;">
(I have skipped many research areas related to this subject to keep this post clear and simple.)</div>
</div>Anonymoushttp://www.blogger.com/profile/05025726494374405899noreply@blogger.com2Rond-point Pierre Aigrain, 29280 Plouzané, France48.35914343490456 -4.570634365081787148.357824434904558 -4.573101865081787 48.360462434904562 -4.5681668650817873tag:blogger.com,1999:blog-7024454949672391798.post-77217078190130216832011-12-07T17:29:00.001+01:002011-12-13T14:33:29.973+01:00Knowledge Grows When Shared<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><br /></span></div>
<div style="text-align: center;">
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">Long Time !</span></div>
<div style="text-align: center;">
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">Many things happened and I haven't blogged about them !</span><br />
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">Let's see if I can fill the gap...</span></div>
</div>Anonymoushttp://www.blogger.com/profile/05025726494374405899noreply@blogger.com0tag:blogger.com,1999:blog-7024454949672391798.post-57063381440473349462010-01-16T15:16:00.002+01:002011-09-17T15:50:47.081+02:00Reviewing the Google Chrome<div dir="ltr" style="text-align: left;" trbidi="on">
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">Google has invested a huge quantity of money and marketing for its Chrome browser. Sometimes people install it then use it without knowing that they changed their browser, by having only followed the link in the top right.</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw1UEp2x-xr_NKUcY-ZUJHr5MU2jGXHM08PaRZ8XRZUXAh05q1t7XGCr3xKmG_IrgSDCHDMr_oZUqUM1f9t0LEj14WpZnpKsae_gvomfpmRq8r3uZskn8RE3rFmesI2T8zXAS_0ffheBE/s1600/GoogChrome-704135.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw1UEp2x-xr_NKUcY-ZUJHr5MU2jGXHM08PaRZ8XRZUXAh05q1t7XGCr3xKmG_IrgSDCHDMr_oZUqUM1f9t0LEj14WpZnpKsae_gvomfpmRq8r3uZskn8RE3rFmesI2T8zXAS_0ffheBE/s320/GoogChrome-704135.PNG" width="320" /></a></div>
<br />
<div style="text-align: center;">
People install Chrome by clicking the link in Google page.</div>
<div style="text-align: center;">
<br /></div>
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">Many computer engineers know that this navigator has many advantages and technological power as being the fastest browser (for its Javascript interpreter/PseudoCompiler, and also from a usability PoV), the use of the best html/CSS engine (webkit), the SKIA library for showing graphics (few people know about this library now being called/integrated as chromium, firefox itself use cairo for rendering).</span><br />
<br />
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">So, after all of this, is it only a bunch of technology assembled in disorder ?</span><br />
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">From my point of view, and after having some human computer interaction courses, I started to view things in a different ways. And I have detected these points :</span><br />
<br />
<br />
<ul>
<li><b>The application of Fitts Law</b></li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeP6mII3YBBuNJbjh_g4yqHjCuSLPUNQpFhaLabgv-qStHGfQHyBZQX0DgTwY8BSoB4kXEb6XpUma5A1v0wSrpn9JUQlhf6XwpTbNvlxP92rMywYH8rEywMhpfknrRYqoWqXYRNSkkQnw/s1600/fittsTabs-785675.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="61" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeP6mII3YBBuNJbjh_g4yqHjCuSLPUNQpFhaLabgv-qStHGfQHyBZQX0DgTwY8BSoB4kXEb6XpUma5A1v0wSrpn9JUQlhf6XwpTbNvlxP92rMywYH8rEywMhpfknrRYqoWqXYRNSkkQnw/s320/fittsTabs-785675.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: center;">
Tabs are placed in the top of the screen, so the virtual growth of buttons are bigger, and we can switch tabs a lot easier than the traditional way.</div>
<div style="text-align: center;">
(Apple use the same law from ages having always the menu in the top of the screen)</div>
<div style="text-align: center;">
<br /></div>
<ul>
<li><b>Reducing human errors</b></li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXzKLJ4yyKz-eLwsQLkp0PkVcS4CkIn64KfIQpyhZJmrr4sFP10uvD1obw-B-7pfejQGB3Md-C3-prJJrOT8arRPMsqTXP-uCd7Uuq11mTgeAbYiZIdbjn9_-_zwttNhspmeRFdqZEu-I/s1600/closingTabs1-736549.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="17" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXzKLJ4yyKz-eLwsQLkp0PkVcS4CkIn64KfIQpyhZJmrr4sFP10uvD1obw-B-7pfejQGB3Md-C3-prJJrOT8arRPMsqTXP-uCd7Uuq11mTgeAbYiZIdbjn9_-_zwttNhspmeRFdqZEu-I/s320/closingTabs1-736549.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
People can make errors easily when trying to switch from one tab to another, when the width of the tab is too small, the probability of making the mistake of closing the tab rather than switching to it.</div>
<div class="separator" style="clear: both; text-align: center;">
Google removes the close button when the tabs width is too small.</div>
<br />
<ul>
<li><b>Better feedback</b></li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVajD9MspBO6WcklWFRvQp1UCdcPgKLYnQ1-yxnMTg4Y6ffpA17wa7s8YQ4NMqoD3pj_E3lDk8DxPzhw8eiXVMt8n9XDFGFgbfBU5c5sxBGkr4oQyLG0yK_xCd41DXjaa2EARHICYhTxY/s1600/searching-774650.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVajD9MspBO6WcklWFRvQp1UCdcPgKLYnQ1-yxnMTg4Y6ffpA17wa7s8YQ4NMqoD3pj_E3lDk8DxPzhw8eiXVMt8n9XDFGFgbfBU5c5sxBGkr4oQyLG0yK_xCd41DXjaa2EARHICYhTxY/s320/searching-774650.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
I really enjoyed the search function, when I search Google tries to indicate the word positions inside the document but also in the right and exactly in the sliding bar. Every small yellow line indicates the word position.</div>
<br />
<ul>
<li><b>Better use of the screen</b></li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8sRUp_1BD9KujRQ6hdpRqo9MlQLHM_qhi4lvYN3rGgp_aziCFMhLivtH4_MamN6TkN5jgWwSVCxltty-5vHpoU00cGugSAD0S3AinyFgIRNrXEZNB9kgLLY-PR9wxGy42fuhEE0lUURc/s1600/screen-702988.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="102" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8sRUp_1BD9KujRQ6hdpRqo9MlQLHM_qhi4lvYN3rGgp_aziCFMhLivtH4_MamN6TkN5jgWwSVCxltty-5vHpoU00cGugSAD0S3AinyFgIRNrXEZNB9kgLLY-PR9wxGy42fuhEE0lUURc/s320/screen-702988.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
In Chrome, all the screen is used, no status bars, when there is a need to show something, it is shown using the needed place.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<ul>
<li><b>Better interaction :</b></li>
</ul>
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzxIH4KX3QUPz3CGcINJxNtoMTzFsKOLPp3FHoooQ1fskOjvGlscsUGP38blXC8ngXBlRdL0whg3Fz63fIlNRajgDeuZL9nhULySzzcD4XvoajZo1bdXoXXAvcLsftc6Dcj9MJzqhulAE/s1600/closingTabs2-783160.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="17" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzxIH4KX3QUPz3CGcINJxNtoMTzFsKOLPp3FHoooQ1fskOjvGlscsUGP38blXC8ngXBlRdL0whg3Fz63fIlNRajgDeuZL9nhULySzzcD4XvoajZo1bdXoXXAvcLsftc6Dcj9MJzqhulAE/s320/closingTabs2-783160.png" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfTkYg8a6mNyxA3FQEvRJzdJ3aZxo5m3FqXUesQyI0opzYLchxfhQZCkXRZwekCzYUpLxM9BxDf1jPGRCNn9NylfSeRN3hHZCXR9nlA9C1BHTRs-Hi0pH-FQqkHCn4eJKGUxMLl95PFeM/s1600/closingTabs3-798569.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="17" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfTkYg8a6mNyxA3FQEvRJzdJ3aZxo5m3FqXUesQyI0opzYLchxfhQZCkXRZwekCzYUpLxM9BxDf1jPGRCNn9NylfSeRN3hHZCXR9nlA9C1BHTRs-Hi0pH-FQqkHCn4eJKGUxMLl95PFeM/s320/closingTabs3-798569.png" width="320" /></a></div>
<br /></div>
<div style="text-align: center;">
<div style="text-align: auto;">
</div>
</div>
<div style="text-align: center;">
When closing a tab, the next close button comes to the current mouse cursor to facilitate closing others. (closing tab is contagious ?)</div>
<div style="text-align: center;">
The tabs are redrawn only when you move your mouse outside the tabs.</div>
<div class="separator" style="clear: both; text-align: auto;">
<br /></div>
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1IDnsJgIhDN1cya2D2tmgRacNnBIas-0sW7cLzQpTUDcNaunhCDTMcqkyeP4Dm9AHQKcBeV2Tz3QqxwTIEi2UjcvF_4k6_NLXnOVqV1kB4jMd659ShfDcs6MslnVqsIhoIBHfbRqsJYI/s1600/input-714299.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="26" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1IDnsJgIhDN1cya2D2tmgRacNnBIas-0sW7cLzQpTUDcNaunhCDTMcqkyeP4Dm9AHQKcBeV2Tz3QqxwTIEi2UjcvF_4k6_NLXnOVqV1kB4jMd659ShfDcs6MslnVqsIhoIBHfbRqsJYI/s320/input-714299.png" width="320" /></a></div>
<br /></div>
<br />
<div style="text-align: center;">
Being different form Firefox, Chrome have only one place to enter urls, text search and every things.</div>
<div style="text-align: center;">
The browser is intelligent enough to know what the user wants.</div>
<div style="text-align: center;">
<br /></div>
<ul>
<li style="text-align: left;"><b>Better usability :</b></li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0tLtTA0LTQpxx7edfCd1pq5lbUj2s4HzjF-6sVyGdcv2yc-mtmywGgdE6hX2sELJLrnyrAOET5x8h9-NDeyGr3je5kR4oG3ohlwHe_60wRtyKESv7DQjSYsVOSnJR9uv-XP4eTI1TpHw/s1600/inputText-704695.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0tLtTA0LTQpxx7edfCd1pq5lbUj2s4HzjF-6sVyGdcv2yc-mtmywGgdE6hX2sELJLrnyrAOET5x8h9-NDeyGr3je5kR4oG3ohlwHe_60wRtyKESv7DQjSYsVOSnJR9uv-XP4eTI1TpHw/s320/inputText-704695.png" width="304" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: center;">
In Chrome, every text input is resizable. When it is not wide as you need, just make it bigger.</div>
<div>
<br /></div>
<div>
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Many other details exist (I speak about "Chrome only" features) and needs to be cited here, but these are the most important one.</div>
<div style="text-align: left;">
This doesn't mean that Chrome is perfect. It has some problems dealing with RTL texts like Arabic sites that aren't shown correctly.</div>
<div style="text-align: left;">
And the recovering of a crashed/closed browser (it exists but I feel it very bad). Some times I can't see the recovering button but in Firefox it is always present after a crash.</div>
<div style="text-align: left;">
<br /></div>
<br />
<div class="separator" style="clear: both; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: left;">
<br /></div>
</div>
Anonymoushttp://www.blogger.com/profile/05025726494374405899noreply@blogger.com6tag:blogger.com,1999:blog-7024454949672391798.post-19249321855777862762010-01-16T14:02:00.000+01:002011-09-14T00:09:45.923+02:00Visualization of Algorithms, how should it be ?<div dir="ltr" style="text-align: left;" trbidi="on">
Last days, while I was teaching a student some sorting algorithms. I asked myself how can I explain it the easiest way. The evident solution was to use some visualization tips.<br />
OK OK, I say some "InfoViz", but then, the big question would stay the same : HOW ?<br />
<br />
According to the human-computer interaction course I have got, Humans don't react like machine, they should have "Mental Models" to manipulate information and resolve problems. We don't have one Human mental model but we are sure about some reactions.<br />
According to (<a href="http://www.blogger.com/goog_1263642477220">Philip</a><span class="Apple-style-span" style="font-family: sans-serif; font-size: 13px; line-height: 19px;"><b><span class="Apple-style-span" style="font-family: 'Times New Roman'; font-size: medium; font-weight: normal; line-height: normal;"><a href="http://en.wikipedia.org/wiki/Philip_Johnson-Laird"> Johnson-Laird</a>, 1983), humans need examples to how a mathematical functions work (hmmm, we don't speak about math nerds here...), so when we see a formula, we need to play it on some examples in order to construct our mental model.</span></b></span><br />
<span class="Apple-style-span" style="font-family: sans-serif; font-size: 13px; line-height: 19px;"><b><span class="Apple-style-span" style="font-family: 'Times New Roman'; font-size: medium; font-weight: normal; line-height: normal;"><br />
</span></b></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.nihilogic.dk/labs/sorting_visualization/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQtl3hOUJsHf-0WURgDEO9pqcRXU_aiynJW_o9cMr7iIRAAn6vQmwclHYvegEAMUhNDMoKKMRCbdY3WDG0NqXKQ-0vlYvnYjz4dN0Jr1VIwxTcIkQSgaTd6M4nWmwtQChiXdFBjJS3cQw/s1600/BubbleSort-779378.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Visualization of BubbleSort algorithm on a sample data.</div>
<br />
<span class="Apple-style-span" style="font-family: sans-serif; font-size: 13px; line-height: 19px;"><b><span class="Apple-style-span" style="font-family: 'Times New Roman'; font-size: medium; font-weight: normal; line-height: normal;">So, to understand an algorithm, we should see it running on a sample data step by step, and then we should select the best data to not fall in a trivial example and this is another problem...</span></b></span><br />
<br />
<span class="Apple-style-span" style="font-family: sans-serif; font-size: 13px; line-height: 19px;"><b><span class="Apple-style-span" style="font-family: 'Times New Roman'; font-size: medium; font-weight: normal; line-height: normal;">But, why we don't add a step in between ?</span></b></span><br />
We have the algorithm coded in some language in one side, and the algorithm running in the other side.<br />
Maybe adding the visualization of the algorithm itself can help the reader constructing quickly his mental model and reducing the time needed to see the algorithm running on data.<br />
<br />
Some people tried to visualize algorithms by translating loops directly using schematics like these :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.cise.ufl.edu/~mssz/CompOrg/CDA-arith.html"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBOv1BsKvZaSO-kC_BhJUXwBQf-WbhgDCHTsBh4PjlwWi-1bhRWBHINSmcABS0sF3zmQpCj0YGiu4fj3oMMul09H58Q3IrAdsIPxM27g_e_PQw1sbc4ceNkzgqYnB2XMbldZMustNmyfY/s320/PencilPaper-720435.gif" width="285" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Explaining the multiplication µAlgorithm inside the µProcessor and introducing the Booth Algorithm.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqufPz_BNLIbLP9yLE51lWfKOYSizUBjiYRhnQJZe4QF6wdibNCP_a99U1ei7wrB7YY1DPfdpXkEhGxlnNk21urFeQ3-Xm_71_U4VrgYM2dlhKw80K4YtAo11nAQH0KrlGyBANZgVbPhs/s1600/bubble2-705263.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqufPz_BNLIbLP9yLE51lWfKOYSizUBjiYRhnQJZe4QF6wdibNCP_a99U1ei7wrB7YY1DPfdpXkEhGxlnNk21urFeQ3-Xm_71_U4VrgYM2dlhKw80K4YtAo11nAQH0KrlGyBANZgVbPhs/s1600/bubble2-705263.png" /></a></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
Another almost useless technique for visualization I have seen in a site</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
But can we mix the algorithm itself and the data manipulation in the same place ? I have produced this figure from my own thoughts but really, we should think in a new way than everybody is following.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg__VhvDKEKO68MtqxF76qOETxH_MRPjXwt9ymzR9emwJxEyi7YNLI-82_Zw0zRHoTFKWQEeu8cszYLEX18B-a6KTHeAXdqdh4GI6VuNtgOXen84P6mSfP9aJ_EnVpUawvGGprxfolFe-I/s1600/bubbleViz-727386.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg__VhvDKEKO68MtqxF76qOETxH_MRPjXwt9ymzR9emwJxEyi7YNLI-82_Zw0zRHoTFKWQEeu8cszYLEX18B-a6KTHeAXdqdh4GI6VuNtgOXen84P6mSfP9aJ_EnVpUawvGGprxfolFe-I/s1600/bubbleViz-727386.png" /></a></div>
<br /></div>
<div style="text-align: center;">
Searching for a new and better figures to help construct quickly the mental model.</div>
<br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
In the last figure, arrows explain movement, the limits are nicely seen and understood, and it is clear that the second variable start its position from i and not from zero.</div>
<div class="separator" style="clear: both; text-align: left;">
Can we ameliorate this figure and prove this way of representation scientifically ?</div>
<div class="separator" style="clear: both; text-align: left;">
Maybe it can be a good point to start from.</div>
<div class="separator" style="clear: both; text-align: left;">
:)</div>
</div>
Anonymoushttp://www.blogger.com/profile/05025726494374405899noreply@blogger.com1tag:blogger.com,1999:blog-7024454949672391798.post-1899713333665064342009-12-26T09:43:00.001+01:002011-09-14T00:12:21.241+02:00Fitts' Law, a small presentation<div dir="ltr" style="text-align: left;" trbidi="on">
One of the most known and applied laws of Human-Computer Interaction is the Fitts' law. A good interface should optimize and reduce the time presented by this formula :<br />
<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://en.wikipedia.org/wiki/Fitts's_law"><img border="0" src="http://upload.wikimedia.org/math/e/7/e/e7e6cee6e7664d150f8db606c7f6fc02.png" /></a></div>
"a" and "b" are only two constants, defined by the used hardware properties like a mouse. D is the distance from the object and W is the object width.<br />
I want only to say that this is only the first formula, many other derviate ones exist.<br />
<br />
The most important is how to design interfaces to optimize the time to select an object. I want to present the openSUSE menu where the developers have applied this :<br />
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsAxYOqB3OW16bKsX1iC-Ewj-RlfyQy5yw3kAz1XYpoTdYUAZq1TeDxu1HXRWNhROGqQYcqnfjsyjP94fHaH-c5cORsqt9zQZX9e1FWMV5Pc5liNlXq3QVOUix3EnSPytTZvtnKJCL0Cc/s1600/suseMenu-748313.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsAxYOqB3OW16bKsX1iC-Ewj-RlfyQy5yw3kAz1XYpoTdYUAZq1TeDxu1HXRWNhROGqQYcqnfjsyjP94fHaH-c5cORsqt9zQZX9e1FWMV5Pc5liNlXq3QVOUix3EnSPytTZvtnKJCL0Cc/s320/suseMenu-748313.png" width="205" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlJtulbpRKyWiIX86J4XxEybrFllfmrKo-b8Jz7QoGyElSUaBGdiJAf_vhkzN-fjzNbr7nNKo83lAqMXeUBfw-3RC8Z9ejUMySB7ctTgMxQ9tj2zugDGUZl3C1ph7uJPCRVyWaPi1oibM/s1600/suseMenu1-768914.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlJtulbpRKyWiIX86J4XxEybrFllfmrKo-b8Jz7QoGyElSUaBGdiJAf_vhkzN-fjzNbr7nNKo83lAqMXeUBfw-3RC8Z9ejUMySB7ctTgMxQ9tj2zugDGUZl3C1ph7uJPCRVyWaPi1oibM/s320/suseMenu1-768914.png" width="203" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div>
<br /></div>
<div>
When I've clicked in Developpement option, all the menu has changed.</div>
<div>
Being different from a "standard" menu, the user haven't to move his mouse by width, but only up and down and no new menu windows are created. So less mouse movement.</div>
<div>
<br /></div>
<div>
In this precise example, not only the Fitts' law is applied, but also the Steering Law (<span style="font-family: sans-serif; font-size: 13px; line-height: 19px;"><a class="mw-redirect" href="http://en.wikipedia.org/wiki/Accot-Zhai_steering_law" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; background-position: initial initial; background-repeat: initial initial; color: #002bb8; text-decoration: none;" title="Accot-Zhai steering law">Accot-Zhai</a><span style="font-family: 'Times New Roman'; font-size: medium; line-height: normal;">).</span></span></div>
<div>
<span style="font-family: sans-serif; font-size: 13px; line-height: 19px;"><span style="font-family: 'Times New Roman'; font-size: medium; line-height: normal;"><br />
</span></span></div>
<div>
<span style="font-family: sans-serif; font-size: 13px; line-height: 19px;"><span style="font-family: 'Times New Roman'; font-size: medium; line-height: normal;">This is just an introduction, and presentation for a small example, but I will to show interface features in other projects.</span></span></div>
</div>
</div>
Anonymoushttp://www.blogger.com/profile/05025726494374405899noreply@blogger.com3tag:blogger.com,1999:blog-7024454949672391798.post-64404090321007304532009-11-14T04:23:00.001+01:002011-09-14T00:13:27.869+02:00Linux Graphics, Part one<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;">In this small post, I will speak about the Linux Graphic Stack and changes being addressed to it.</span></span><br />
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;"><br />
</span></span><br />
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;">It is very clear, that the most thing that should change in Unix systems are the graphics. Most Unix systems use Xorg to handle all their graphics. I really think that is a very bad and old solution that should be changed.</span></span><br />
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;"><br />
</span></span><br />
<br />
<ul>
<li><span style="font-family: Georgia, 'Times New Roman', serif; font-size: x-large;">The Past</span></li>
</ul>
<br />
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;">To make things looking clear, lets compare the architecture of the current implementations :</span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT0MVFmo_uj2LdEmPQTdVLcYdu0M-ks-ROwmJi7AukBnxEPUptkStVVJaHlzS5XoFMQp4UgHASsFcuxhtKa1pfq-fhHArdmsi0GItcoa70-S8BTzzrFZQmVmfc4h4hOB7_EjA9ZeZQtSA/s1600/current-757957.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT0MVFmo_uj2LdEmPQTdVLcYdu0M-ks-ROwmJi7AukBnxEPUptkStVVJaHlzS5XoFMQp4UgHASsFcuxhtKa1pfq-fhHArdmsi0GItcoa70-S8BTzzrFZQmVmfc4h4hOB7_EjA9ZeZQtSA/s320/current-757957.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;">In almost any Unix-like system, if we use Xorg it will be the layer responsible from low level graphics to some more advanced features. So it is doing a job which <b>only</b> the kernel should be responsible for.</span></span><br />
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;">Even graphics card drivers, they are made for every Xorg release and not for a Linux release.</span></span><br />
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;"><br />
</span></span><br />
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;">If we add to this that X releases are not as frequent as the two other layers, we can conclude that the Linux graphics mechanism is the Achilles' heel of all the system.</span></span><br />
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;"><br />
</span></span><br />
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;"><br />
</span></span><br />
<br />
<ul>
<li><span style="font-size: x-large;"><span style="font-family: Georgia, 'Times New Roman', serif;">Future</span></span></li>
</ul>
<br />
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;">The future may be a lot better. With the include of the Kernel Mode Setting [1] in last Linux kernels (from 2.6.29) and specially in the 2.6.31, the kernel start getting his real role of the only thing accessing low level hardware.</span></span><br />
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;">The KMS allow less flicker, quicker terminal switching (with Ctrl-Alt-F1 to F7) and more.</span></span><br />
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;">Another feature is the ability to run Xserver itself as a normal application without root privileges. And allowing more security.</span></span><br />
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;"><br />
</span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5GCaKY9qkBwEkYqVSynZzyW5R8XCvFuv3s4WFr4XCTVbYZmkWXNJjWg9w8_VKBTnQBVilfIoCnF8xo6Bp16zv-I5W9fkJWM3z3b23G_dNpkWBARaL5AwbNDVnsXLTCKE54x2czcp4Pbc/s1600/next-795306.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5GCaKY9qkBwEkYqVSynZzyW5R8XCvFuv3s4WFr4XCTVbYZmkWXNJjWg9w8_VKBTnQBVilfIoCnF8xo6Bp16zv-I5W9fkJWM3z3b23G_dNpkWBARaL5AwbNDVnsXLTCKE54x2czcp4Pbc/s1600/next-795306.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;"><br />
</span></span><br />
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;">This start to let the Kernel do his job, is only the start. The Linux kernel 2.6.33 will include more work done to provide more low level handling : a KMS page-flipping ioctl [2] to optimize more and more time, and simplify management for other systems.</span></span><br />
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;"><br />
</span></span><br />
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;">The page-flipping is a necessary thing for other projects like the Wayland Server, which is a lightweight replacement of X (and not a rewrite of it).</span></span><br />
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;">Xorg has become very old, new models of graphics and inputs come and its becoming more and more complex to make X supports them all.</span></span><br />
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;">Multi-touch input is a main area where X can't provide a good solution for that. Even Multi-pointer-X still doesn't answer all questions.</span></span><br />
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;"><br />
</span></span><br />
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;">Wayland can become a solution if we design it having all new today problems in mind. It should be lightweight and easy to develop. After that, libraries like Nokia Qt could be easily ported to it.</span></span><br />
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;">The thing that everybody should know is that when a project becomes very old, with code that can't be understood, and huge, then it should be rewritten from scratch.</span></span><br />
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;">KDE developers faced many critics when they started rewriting KDE to release KDE4. But in the end, we now after releasing a "clean" desktop environment, we start seeing differences.</span></span><br />
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;"><br />
</span></span><br />
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;">The design of Wayland, shouldn't be addressed without proposing a model being a skeleton of all manners of view surfaces and abstraction behind that. A recent paper [3] collected most of problems and it need to be applied on a real world implementation like Wayland.</span></span><br />
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;"><br />
</span></span><br />
<div style="text-align: right;">
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;"><br />
</span></span></div>
<div style="text-align: right;">
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;"><b><i>To be continued...</i></b></span></span></div>
<div style="text-align: right;">
<span style="font-family: Arial; font-size: small;"><span class="Apple-style-span" style="font-size: 13px;"><br />
</span></span></div>
<ul>
<li><span style="font-family: Arial; font-size: 13px;"><b>Links :</b></span></li>
</ul>
<div style="text-align: left;">
<span style="font-family: Arial; font-size: 13px;">[1] <a href="http://en.wikipedia.org/wiki/Mode-setting">http://en.wikipedia.org/wiki/Mode-setting</a></span></div>
<div style="text-align: left;">
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;">[2] <a href="http://www.phoronix.com/scan.php?page=news_item&px=NzY5OA">http://www.phoronix.com/scan.php?page=news_item&px=NzY5OA</a></span></span></div>
<div style="text-align: left;">
<span style="font-family: Arial; font-size: small;"><span style="font-size: 13px;">[3] <a href="http://portal.acm.org/citation.cfm?id=1629826.1629828&coll=Portal&dl=GUIDE&CFID=61492784&CFTOKEN=12278186">http://portal.acm.org/citation.cfm?id=1629826.1629828&coll=Portal&dl=GUIDE&CFID=61492784&CFTOKEN=12278186</a></span></span></div>
</div>
Anonymoushttp://www.blogger.com/profile/05025726494374405899noreply@blogger.com0tag:blogger.com,1999:blog-7024454949672391798.post-49995095237484043932009-06-13T23:56:00.000+02:002009-06-14T00:57:27.117+02:00Google, THE monopoleThe main goal of Google is to hold the maximum of viewed adverts on the net, and gain huge amount of money. Till now, ads are only shown as small links with some text. And the context intelligently matches user interests.<br /><br />But, will google in the future, only rely on such type of incoming ?<br />My answer is simply : NO !<br /><br />First step after acquiring Youtube is to play video ads before launching mostly viewed sequences, also put some intelligent context matching text ads somewhere. There is dailymotion and he already doing that.<br /><br />But if we rethink another service that only google holds its sources, the GoogleStreetView !<br />Google Street View is a very helpful service provided by Google for free and for everybody.<br />Google can simply use some algorithms to detect the ad places in a street view, the orientation the deformation, and replace these zones with Google related stuff.<br /><br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTr_KHThg2NWdrHkq2nBwzNKQcDCqcXu5UQ8NmMoyAERE_CSy1wAGk7PXp5NlOehQ0US8PjG6AOorn36B5QNJmiKqIQtk-Xs1BVmLxRSJuZTTsNnODJqi4Goott4utLQ3CjEwmSrG0Gcg/s1600-h/googleAd.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 212px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTr_KHThg2NWdrHkq2nBwzNKQcDCqcXu5UQ8NmMoyAERE_CSy1wAGk7PXp5NlOehQ0US8PjG6AOorn36B5QNJmiKqIQtk-Xs1BVmLxRSJuZTTsNnODJqi4Goott4utLQ3CjEwmSrG0Gcg/s400/googleAd.png" alt="" id="BLOGGER_PHOTO_ID_5346938100455920594" border="0" /></a>Goole StreetView, the next...<br /></div><br />As explained in the photo, it won't be a difficult thing to be coded by the Mountain View team, and it will be a "Google only" stuff difficult to be reproduced in resonable time by other competitors. And of course, it will be a colossal source of money.<br /><br /><div style="text-align: center;">I really wish you "<b>Don't be evil</b>" Google !<br /></div>Anonymoushttp://www.blogger.com/profile/05025726494374405899noreply@blogger.com2tag:blogger.com,1999:blog-7024454949672391798.post-32521440808512631692008-03-16T10:32:00.001+01:002009-10-25T22:45:46.575+01:00Nanotechnologies & Nanostructured Materials workshopFrom yesterday (15 March) and until 21~22 I will be in Hammamet.<br />
<br />
I am proud to be member of the technical staff of a workshop that speaks about nanostructred materials and nanotechnology.<br />
<br />
This is the first time in Tunisia and it is with collaboration with many US universities.<br />
<br />
<br />
I will attach photos later ! Please wait !!! ;-)Anonymoushttp://www.blogger.com/profile/05025726494374405899noreply@blogger.com0tag:blogger.com,1999:blog-7024454949672391798.post-69899074478524738662008-02-13T19:42:00.001+01:002008-02-13T19:52:11.091+01:00Journée Texas Instruments<div style="text-align: center;">J'ai pas raté bien sûr le séminaire organisé par Texas Instruments le 7 Février à la Faculté des Sciences de Tunis<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz4j-2FeilAJxfaLk8J0fgERZYc8GPIeUyOTWWcdxnFpoVSNyUcjMhlvkRETYtYdrOstc4jHMTWeXZkDyfEeY_TLR6ALd_bu_ubnHDvVGmuGk2I-QPpFcVcJJ6X_LR1pmRvz6L-AK7hwE/s1600-h/TiTechDays.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz4j-2FeilAJxfaLk8J0fgERZYc8GPIeUyOTWWcdxnFpoVSNyUcjMhlvkRETYtYdrOstc4jHMTWeXZkDyfEeY_TLR6ALd_bu_ubnHDvVGmuGk2I-QPpFcVcJJ6X_LR1pmRvz6L-AK7hwE/s320/TiTechDays.jpg" alt="" id="BLOGGER_PHOTO_ID_5166537630373344722" border="0" /></a><br /><br />Voici une image du public présent !<br />(A ne pas oublier le grand nombre de la communauté open source qui a été présente)<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyfudQH1EOHXW77wY6aQJKou9KgQt6hOX5DIUY2Kjf1lSG-gxqlHdbA5M9UOyKsCVaVwbTCStGhh4vB96I8c24Lr6rt9kb8aYqEIHzeTQ_TF4syKmNGbCKJ4k6CpArVLMbBQLdeBQQcZw/s1600-h/inActionMathias.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyfudQH1EOHXW77wY6aQJKou9KgQt6hOX5DIUY2Kjf1lSG-gxqlHdbA5M9UOyKsCVaVwbTCStGhh4vB96I8c24Lr6rt9kb8aYqEIHzeTQ_TF4syKmNGbCKJ4k6CpArVLMbBQLdeBQQcZw/s320/inActionMathias.jpg" alt="" id="BLOGGER_PHOTO_ID_5166537565948835218" border="0" /></a><br /><br />Me voici avec mon Classmate Zied<br /></div><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4aa76ZJMjtj1Z3ARIMggAWqPU6i5YhBPjMx3jBxWKKnQjOwXX33dT_b7FcCY3vCfNYNNOtMuqRsyyBvCFgKNyZP01rnD-nOaepNPe6rInJw0K7C7CFFF8gFaVGcAY83laCo2cke9m8IY/s1600-h/MeZied.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4aa76ZJMjtj1Z3ARIMggAWqPU6i5YhBPjMx3jBxWKKnQjOwXX33dT_b7FcCY3vCfNYNNOtMuqRsyyBvCFgKNyZP01rnD-nOaepNPe6rInJw0K7C7CFFF8gFaVGcAY83laCo2cke9m8IY/s320/MeZied.jpg" alt="" id="BLOGGER_PHOTO_ID_5166537621783410098" border="0" /></a>Encore une fois<br /></div><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjALg0KHbzTZUwBxQ2fV9OxNG4-DJf9CMOHi8xFm4tTTJCey6bpWsR_Z52xGwvK478wP8lLh2TxESEMZJNHwji0R5ofscj2DAM_-lBrA8ZlvRunckWhsVAQLVPjLk3jFPYqvp010GSsleY/s1600-h/TiMeZied.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjALg0KHbzTZUwBxQ2fV9OxNG4-DJf9CMOHi8xFm4tTTJCey6bpWsR_Z52xGwvK478wP8lLh2TxESEMZJNHwji0R5ofscj2DAM_-lBrA8ZlvRunckWhsVAQLVPjLk3jFPYqvp010GSsleY/s320/TiMeZied.jpg" alt="" id="BLOGGER_PHOTO_ID_5166537626078377410" border="0" /></a><br /><br /><div style="text-align: center;">Et bien sûr nous n'avons pas oublié de prendre des photos avec Mathias le représentant de TI dans cette journée ainsi que mon ami Nizar !<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeTDAWCUL9Be-MsVcTbeth2IEeA777xg98BXWbSDWDiHUsfU5e64KtN8kR3RdZwGY5cNqDGy_nZnPCN2Lro_u6H-d0zDEVkT70LRiHHLSKnPCnCsXDeqMeKC4lvzfzWkfzIyH_ZV5dcSU/s1600-h/MeMathias.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeTDAWCUL9Be-MsVcTbeth2IEeA777xg98BXWbSDWDiHUsfU5e64KtN8kR3RdZwGY5cNqDGy_nZnPCN2Lro_u6H-d0zDEVkT70LRiHHLSKnPCnCsXDeqMeKC4lvzfzWkfzIyH_ZV5dcSU/s320/MeMathias.jpg" alt="" id="BLOGGER_PHOTO_ID_5166537613193475490" border="0" /></a><br /></div>Anonymoushttp://www.blogger.com/profile/05025726494374405899noreply@blogger.com1tag:blogger.com,1999:blog-7024454949672391798.post-72015527973157468812007-10-30T14:52:00.000+01:002007-12-23T03:17:20.961+01:00SFD 2007 !Software Freedom day 2007 !<br />It was a very exciting event ! I discovered many things and I have met many persons that I had known only by mail.<br /><br />I got many photos and I am proud to show some in my blog !<br />This is a photo with Mr. Hatem Zidi one of the best IT engineers in Tunisia !<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1_flhXu2cKYtBNUqtenD-TVpZz3lu4omCpRbE4jB7_EwTMk50238YJo9hCN-K5NK8Fnq4n6MFYNAxUgLJbxxo67is1kLE17sW351KlWDfUNRcKKYoePScQNbu4c5jEiRfXp7Rpc8Jt80/s1600-h/MeHatem.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1_flhXu2cKYtBNUqtenD-TVpZz3lu4omCpRbE4jB7_EwTMk50238YJo9hCN-K5NK8Fnq4n6MFYNAxUgLJbxxo67is1kLE17sW351KlWDfUNRcKKYoePScQNbu4c5jEiRfXp7Rpc8Jt80/s320/MeHatem.jpg" alt="" id="BLOGGER_PHOTO_ID_5127131474063057634" border="0" /></a><br />Other photos are coming soon ...Anonymoushttp://www.blogger.com/profile/05025726494374405899noreply@blogger.com3tag:blogger.com,1999:blog-7024454949672391798.post-42277332741129124282007-07-20T12:30:00.000+02:002007-07-20T13:00:23.906+02:00Novell Hack WeekJ'ai entendu parler ces jours du Novell Hack week, c'est un événement qui a lancé Novell fin juin pour que ses ingénieurs et développeurs font ce qu'ils veulent faire !<br /><br />Vraiment c'est très magnifique d'être payé pour faire ce qu'on veux ! et pendant toute une semaine ! De ce fait les développeurs ont pris un bon souffle et ont contribué à plusieurs projets.<br /><br />Le résultat était en totalité bon mais il y a quand même des projets qui ont échoués !<br />En tout cas même pour ceux qui rien n'a marché pour eux, ils ont un prix de "Best Failure"<br /><br />je ne pense pas avoir ce genre de chose dans les sociétés tunisiennes !<br /><br /><a href="http://arstechnica.com/articles/culture/novell-hack-week-an-experiment-in-innovation.ars/1">Link</a>Anonymoushttp://www.blogger.com/profile/05025726494374405899noreply@blogger.com0tag:blogger.com,1999:blog-7024454949672391798.post-7190909942935027052007-07-07T16:00:00.000+02:002007-07-07T16:39:38.390+02:00Je google, Tu google, Il goog...<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDJdClZHPZtEWfM4vPZLxxVjGUrOhrvVOsL4c2CqwhrkfGmYPGL9kgr_UYZ91Gee5o7Wn9IMaHEPdXfC7GNQVC4DhtD0VRUB_J5j62UtDmrYMT1PVG-Xiv_J1DKhidZ5JI9hJS1VjvoYE/s1600-h/google.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDJdClZHPZtEWfM4vPZLxxVjGUrOhrvVOsL4c2CqwhrkfGmYPGL9kgr_UYZ91Gee5o7Wn9IMaHEPdXfC7GNQVC4DhtD0VRUB_J5j62UtDmrYMT1PVG-Xiv_J1DKhidZ5JI9hJS1VjvoYE/s320/google.jpg" alt="" id="BLOGGER_PHOTO_ID_5084456880177254050" border="0" /></a><br /><br />Je pose parfois quelques questions sur mon utilisation de l'Internet. Et je trouve parfois des résultats magnifiques !<br /><br /><br /><ol><li>J'utilise dans 99% des cas le moteur de rechercher Google pour trouver quelque chose du Net,</li><li>Mon mail estsur Gmail,</li><li>j'utilise ce blog qui est un service de la société de Google,</li><li>Je suis inscrit à beaucoup de groupes hébergés par GoogleGroups,</li><li>Parfois je lis quelques pages des livres de la base Google Books,</li><li>J'utilise GoogleMaps ou GoogleEarth pour explorer les villes que je voulais les visiter,</li><li>J'utilise GoogleTalk pour le chat,</li><li>J'ai essayé GoogleDesktopSearch et il m'a plus beaucoup contrairement à celui de M$ qui m'a généré une base de donnée des références des fichiers plus grande qu'eux mêmes réunis,</li><li>J'ai utilisé GoogleAgenda pour une fois quand j'ai voulu voir le calendrier et que le PC que j'utilise ne m'a pas permi de faire ça (question de droit sous WinNT),</li><li>j'ai utilisé GoogleDocs pour ouvrir un document .odf dans un PC ne contenant pas OpenOffice,</li><li>j'utilise parfois GoogleTrends pour les statistiques,</li><li>J'utilise beaucoup YouTube ou GoogleVideo pour regarder les vidéos<br /></li><li>Je pense que j'ai utilisé Google pour la traduction d'une page en autre langue<br /></li><li>....</li></ol><br />Je suis donc très relié à Google et très dépondant ! Et je pense que je ne suis pas le seul à être comme ça ! Mais à long terme Google va devenir le seul monopôle au monde, il va avoir tous les documents des utilisateurs entre ses mains que ce soit dans Gmail ou dans les documents des utilisateurs de GoogleDocument (tableur, éditeur de texte...),<br />Il aura aussi tous les statistiques de recherches,<br />Tous les puublicités,<br />Tous les livres numérisés,<br />Des Disques durs en totalité sauvegardés dans ses serveurs (un nouveau services encore Alpha...),<br />En deux mots : il aura Tous ! (ce sont 3 mots ?)<br /><br />Ce jour la Google va il rester tranquille ? Ne va-il pas changer ses objectifs ? Ne va-il devenir méchant ??<br /><br />Hey Google ! Don't be Evil !Anonymoushttp://www.blogger.com/profile/05025726494374405899noreply@blogger.com1