What is Tresalica?

Because we love silly apps (try out 1kdaysontwitter.com or Here Be Twitterers), we decided to pack his experiment in a smoothly designed, atomic shaker for Android, called Tresalica.

The application is quite simple, with a hopefully intuitive and simple user interface. All the user has to do is tap the Shake it! button, select the theme to shake and start shaking. Advanced users might use their own content by adding custom shakable motives.

To add a little twist to the shaking story, we decided to enable the application with goals that will change over time. Each time you use Tresalica you can submit your score, which gets added to a global shaking score and contributes to reach the goal. Our first goal is quite ambitious, but fun nevertheless. We want you to help us shake it to the moon.

Why do you even bother with Silly Apps?

We believe in learning and discovering by doing. That is why, from time to time, we endeavor on unexplored paths and try to create something silly, just to learn a trick or two. While at it we tried to make the most of it as part of the learning process of packaging software products, with all the small things required on the side – a website, twitter account and so on.

Get it now!

You can get the app straight from here by scanning the QR code below:

Depending on your feedback we will keep working on Tresalica, by adding new fun features, competitive goals and scores.

So what would you like to see in the next release?

p.s.: we will be sharing some more technical insights in the near future

We just love Futurama. Since the new season episodes are airing on Thursday, we decided that we are going to dedicate our Friday lunch breaks to collective watching of new Futurama episodes and use them as an intro to end of the week meetings, where we will review the work done during the week.

Do you like Futurama as well? Launch your own Futurama Fridays ;)

Plug-ins

The old school approach of visualizing data on web is by using browser plug-ins, which add specific capabilities to a larger software application, in our case browser. Let’s take a quick look at some of them.

Java applets were introduced in the first version of the Java language back in mid-1990s. They are slow, because the JVM will need to restart each time the browser starts. When Microsoft shipped its own modified JVM with Internet Explorer, applets that relied on these changes worked only within Microsoft’s Java system, causing compatibility related headaches. And oh – 99% of them look ridiculously ugly.

Much more common pick today is Adobe Flash, which allows developers to create fascinating visualizations. But on the other hand, it is proprietary software, uses a lot of system resources and is responsible for a huge stake of browser crashes. Silverlight is Microsoft’s response to Flash, with similar advantages and disadvantages, but with much smaller usage share.

Native support

All these plug-ins are binary components with closed source. That means they cannot be hacked and used in a new innovative fashion, which is one of the principles of ensuring that the Internet is developed in a way that benefits everyone. So let’s take a look at what standardized technologies can offer us when visualizing data on web.

There are two standards: SVG specifications for describing two-dimensional vector graphics and the canvas element for rendering of 2D shapes and bitmap images. All major modern web browsers support and render SVG, except Internet Explorer. The good news is however, Internet Explorer 9 will support SVG. The canvas element is part of HTML5 and is only supported by the latest versions of Firefox, Chrome, Safari, and Opera. It is not clear yet if Internet Explorer 9 will support it.

In SVG, each shape is remembered as objects in DOM, so if attributes of the object are changed, the SVG can automatically re-render the scene. But in canvas, if position was to be changed, the entire scene would need to be redrawn. SVG also enables events to be associated with objects. In canvas we must manually match the coordinates of the mouse click with the coordinates of the drawn rectangle to determine whether it was clicked.

SVG

First let’s take a look at three JavaScript libraries that simplify the use of SVG graphics: jQuery SVG, SVG Web and Raphaël.

As the name says, jQuery SVG is a jQuery plug-in that lets you manipulate SVG from JavaScript. Since SVG is XML-based, it can easily use jQuery syntax to work with SVG. It also offers graphing extension to make it easier to create SVG graphs. Due to lack of SVG implementation, jQuery SVG doesn’t work with Internet Explorer, which makes this library pretty useless. Oh, and if you’re looking for some pretty examples, don’t even go to their home page. They are fugly.

SVG Web is being developed by Google. It’s a JavaScript library which provides SVG support on many browsers, including Internet Explorer, so it should target ~95% of the existing installed web base (at least that’s what the home page says). Flash is used for the actual rendering, so it’s very easy to use and incorporate into an existing web site.

The last and the most promising of the three libraries is Raphaël. It uses SVG and VML as a base for creating graphics. VML is a standards-based XML language used to produce vector graphics, but development of the format ceased in 1998. However Microsoft continues to document VML. It’s supported in all Internet Explorer versions since 5.0, which means Raphaël can target huge user base. The development momentum of the library seems to be going strong and another big plus is API documentation with beautiful examples and demos. There’s also charting plug-in available, called gRaphaël, which looks pretty slick, but lacks API documentation.

Canvas

After covering SVG, let’s take a look at canvas libraries. First of the two is Flot, a plotting library for jQuery, which focuses on “simple usage, attractive looks and interactive features”. It’s supported in all browsers that support canvas element and the excanvas JavaScript emulation helper is used for Internet Explorer 6.0+. It’s not as sweet as gRaphaël, but it’s easy to use, supports interaction and… oh, why don’t you take a look at some examples.

Processing.js is a Processing programing language implementation, written in JavaScript by John Resig. Processing is written in Java and used by people who want to program images, animation, and interactions. Processing.js draws shapes and manipulates images on the HTML5 Canvas element, but sadly it doesn’t work with excanvas emulator mentioned above. Since it won’t work in Internet Explorer at all, its use is pretty much limited to show off cutting edge technologies. Of course, it will also come in handy in environments like WebOS.

We are always willing to help introduce other to fresh technology and applications since we believe it can make a difference in producing better campaigns that appeal to users.

btw: the deck was selected among Slideshare.net’s featured presentations.

Now, it is important to note that tcp connections should be closed properly in order to avoid this sort of problems, but this is not always possible (unexpected server shutdown, bug which makes server unresponsive, etc.). Brief discussion about proper tcp handling is here. I know from experience that other servers (for example Tomcat) don’t have this problem with socket binding (at least not in the last ~5 years) and I was curious why Red5 developers haven’t solved this. The thing to do to avoid this is to set SO_REUSEADDR flag on the socket. This means that other processes can bind to this socket if it is in TIME_WAIT state. Fortunately, Red5 is open source, so I browsed a bit and found this in RTMPMinaTransport class :

acceptor = new NioSocketAcceptor(ioThreads);
acceptor.setHandler(ioHandler);
acceptor.setBacklog(100);

SocketSessionConfig sessionConf = (SocketSessionConfig) acceptor.getSessionConfig();
sessionConf.setReuseAddress(true);
sessionConf.setTcpNoDelay(tcpNoDelay);
sessionConf.setReceiveBufferSize(receiveBufferSize);
sessionConf.setSendBufferSize(sendBufferSize);


Interesting enough, they do set this flag as I’ve shown with the bolded line. So I’ve tried debugging the code and after some time I’ve found out, that SocketSessionConfig is never read, never used. I will repeat this : SocketSessionConfig is never accessed. That part of the code could as well be removed. The solution is simple, flag must be set directly on NioSocketAcceptor and then the socket can be bound on restart without a problem:

acceptor = new NioSocketAcceptor(ioThreads);
acceptor.setHandler(ioHandler);
acceptor.setBacklog(100);
acceptor.setReuseAddress(true);


I’ve added the bolded line and compiled the source. With new red5.jar, restarting works like a charm.

HTML5 is being developed as the next major revision of HTML (HyperText Markup Language), the core markup language of the World Wide Web. It aims to reduce the need for proprietary plug-in-based rich internet application (RIA) technologies such as Adobe Flash, Microsoft Silverlight, and Sun JavaFX.

Source: Wikipedia

As part of this initiative the HTML video tag is being introduced as well in order to unify the way video is distributed on the web. Currently most online video is distributed via Adobe’s Flash platform, on the contrary of what Apple and Steve Jobs would like you to believe, but we will not go deeper into that debate.

The HTML5 video tag is already supported in several browsers, the latest versions of Firefox, Safari (on all iDevices), Chrome and Opera. It would be great if you had the chance to serve video to all those browsers with the same code, same codecs, but guess what – you can’t, these are standards after all :)

Embedding media in HTML5

Embedding media in HTML5 is fairly simple and straightforward. You just need to use the <video> tag along with the <source> tag to define the path to your media content.

<video controls>
<source src="foo.ogg">
The text written here will be displayed if your browser does not support the <code>video</code> element.
</video>

So far everything looks great, but if I tell you that there is also an option to add many sources in order to assure playback in different browsers the thing starts to smell fishy right.

<video controls>
<source src="foo.ogg" type="video/ogg">
<source src="foo.mp4">
The text written here will be displayed if your browser does not support the <code>video</code> element.
</video>


By adding another source, you can specify the fallback file for browsers that do not chew up videos contained in the ogg () container (usually encoded with the Theora codec).

For more info on how to include HTML5 video and 1001 detail you should read Mozilla’s guide (where I borrowed these examples).

Fragmentation

This is how HTML5 video is supported at the moment of writing (source):

• Mozilla Firefox (3.5 and later) supports Theora video and Vorbis audio in an Ogg container.
• Opera (10.5 and later) supports Theora video and Vorbis audio in an Ogg container.
• Google Chrome (3.0 and later) supports Theora video and Vorbis audio in an Ogg container. Chrome also supports H.264 video (all profiles) and AAC audio (all profiles) in an MP4 container.
• Safari on Macs and Windows PCs (3.0 and later) will support anything that QuickTime supports “out of the box.” This is a long list, but it does not include Theora video, Vorbis audio, or the Ogg container. However, QuickTime does support H.264 video (main profile) and AAC audio in an MP4 container.
• Mobile phones like Apple’s iPhone and Google Android phones support H.264 video (baseline profile) and AAC audio (“low complexity” profile) in an MP4 container.
• Adobe Flash (9.0.60.184 and later) supports H.264 video (all profiles) and AAC audio (all profiles) in an MP4 container.
• Internet Explorer has no HTML5 video support at all (surprised?), but virtually all Internet Explorer users have the Adobe Flash plugin.

Just look at the table if you didn’t get it:

To put it simple – if you want your video to play in every browser (on every device) you need to encode it in two different formats (Theora+Vorbis in Ogg for Firefox, Opera and Chrome & H.264+AAC in MP4 for Safari, Mobile Webkit on Android and Flash).

Serving content

All these videos can be hosted on common web servers, the same that you use to host your static files.

Are you feeling dizzy yet? We still have to work out live video streaming, but we will do that in another post (coming soon).

Ideally, these would be the steps to make webcam work in flash :

• Buy a webcam
• Plug it into your usb port

However, real world always slaps you in your face. First, make sure that your webcam works outside flash :

• Buy a webcam that is listed as supported (green icon) here, I bought cheapest available webcam in local store – Logitech C200
• Plug it into your usb port and use  guvcview to test it (it should work ok, if not, I can’t help you)

Ok, now that we know that webcam is recognized and usable, let’s try it in flash. Oops, when I tried loading our old development flash widget it freezed my firefox tab :

I couldn’t click on anything, because that settings pop-up window wasn’t responding. So, what happened ? Flash widget wanted access to my webcam and microphone and I had to confirm it. But I couldn’t because whole tab was unresponsive. Or was it ? Lo and behold, one key worked. One key out of one hundred and some keys on my keyboard worked.  That key is TAB with which I could cycle through pop-up window’s components (note the yellow rectangle) :

Cool, but the problem was, that I couldn’t toggle the selection, because only TAB worked. Enter, space and other keys didn’t work ! So I thought that replacing flash with version 9 would help or even a downgrade of firefox to version 3. Well, I’ve been down that road before and I didn’t like it. Downgrading only introduces new problems. Another option would be to change flash security settings via some other mechanism. After some googling it turns out that it actually is possible to change settings via Adobe’s Settings manager. I had to add our development server address as trusted :

and :

There are also Microphone and Camera settings in Adobe’s Settings Manager, but they are as unresponsive as that pop-up. Which is a bummer if you have more that one camera and/or microphone. But it’s a limitation that I can live with. Now reload that flash widget and it should work, because that security pop-up never shows up. Right ? Wrong, flash widget works, but there’s no camera stream. It is as if there was no camera plugged into usb port, flash simply doesn’t know it’s there ! At this point I was ready to throw my laptop over my balcony 20 meters down to the pavement. After I calmed down I googled some more and found that v4l (video for linux, used for capturing stream from video devices) comes in two flavors, version one and version two. There are some compatibility issues, so even though v4l version 2 is recommended, it doesn’t always work. It certainly doesn’t with flash widgets. Luckily, it’s possible to force some sort of compatibility layer unto every application that tries to use v4l with following command :

LD_PRELOAD=/usr/lib/libv4l/v4l2convert.so firefox &

Finally, webcam stream showed up in flash widget :

(I used paper snowman to cover up my tired face, no need to show it on the “internets“, there are better pics of me out there)

A note about microphones:
It turns out that there’s a way to set one particular microphone as preferred sound capturing device by using alsamixer (in terminal):

After it loads up press F4 to switch to Capture  settings where you can set Input Source (I have multiple options – internal, docking and mix). However, this still leaves us the problem with camera choice (if there’s more than one available). I don’t know how to solve this problem but, frankly, I didn’t put to much effort into it. I don’t care.

Well, that’s it. Hopefully this will help someone until all multimedia shit finally starts working normally on linux.

In order to spend some time off-work and relax together we went spent our Sunday shooting other geeks in a paintball team deathmatch.

The campaign ran in two major Slovene cities, during the 2010 Olympic games, combining the reach and exposure of digital out of home with Qootia’s interactivity and intimate follow-up communication potential via SMS.

Congrats to the combined Qootia and Renderspace team that made this possible:

Project Manager: Tomaž Štolfa
Creative Director: Matevž Klanjšek
Art Director: Žiga Aljaž
Game frontend implementation: Nil Gradišnik, Anže Cesar
Game backend implementation: Aleš Černe

And finally thanks to the great people at SiOL for believing in such a forward looking campaign. We showed it makes sense from the business, marketing and most importantly user’s perspective.

Find out more about Qootia

We are planning to keep you updated with what is going on behind the curtains of our think tank, what we are working on or just playing with. You can also expect some posts about specific technologies and their applicative uses. Finally, we will be providing some free material, code snippets and ideas for you to consume and share.

See you around ;)

p.s.: follow us on Twitter