Brice Lechâtellier

Augmented Reality Markers with Appcelerator Titanium

2012-02-21T05:36:49Z

I’ve been looking at options to do Augmented Reality (AR) marker detection with Appcelerator Titanium and found a great module created by Atsushi KATAOKA. The original tutorial being in Japanese, I’ve used Google Translate and some guessing to get the module working.

Atsushi has been kind enough to share his code on Github if you want to modify and compile it yourself (You’ll need to fork the experimental branch for it to work with the latest 1.8.x SDK). If you don’t want to play around in xCode to build the module, here is my compiled version compatible with 1.8.x.

The module is iOS only and is based on top of OpenCV for the marker detection.

To install the module, copy the zip file in your /Library/Application Support/Titanium/ folder then reference it in your tiapp.xml (Make sure to clean your build folder).

<modules>
    <module platform="iphone" version="0.1">com.armarkerti</module>
</modules>

The AR marker used here is a 16-bit binary number represented by a 4×4 grid of black and white pixels. This means that there are 65,536 possibilities in total (2^16), which translates to 16,456 unique codes since the marker can appear in different angles. The orientation is defined by a 1×1 pixel outside the top left corner.

I’ve modified a script I found online to help generating your marker.

Here is a sample app.js implementation looking for all visible markers and searching for the marker code associated with the letter ‘a’.

var window = Ti.UI.createWindow();

//create the marker overlay
var overlay = Ti.UI.createView({
	center: {
		x:0,
		y:0
	},
	width:100,
	height:100,
	backgroundColor:'#fff',
	borderRadius:12,
	borderColor:'#fff',
	visible:false
});
var label = Ti.UI.createLabel({
	text:'a',
	font: {
		fontSize:60
	},
	width:'auto',
	height:'auto',
	textAlign:'center'
});
overlay.add(label);

//load and init the module
var armarker = require('com.armarkerti');
var cameraView = armarker.createCameraView();

cameraView.add(overlay);

//everytime a marker is detected
cameraView.addEventListener('detected', function(e) {
	var hasMarker = false;
	//read through all markers
	for(var i in e.markers) {
		var marker = e.markers[i];
		//look for the 'a' marker code
		if(marker.code == 40863) {
			//create a 3d Matrix and assign the position
			var t = Ti.UI.iOS.create3DMatrix();

			t.m11 = marker.transform.m11;
			t.m12 = marker.transform.m12;
			t.m13 = marker.transform.m13;
			t.m14 = marker.transform.m14;
			t.m21 = marker.transform.m21;
			t.m22 = marker.transform.m22;
			t.m23 = marker.transform.m23;
			t.m24 = marker.transform.m24;
			t.m31 = marker.transform.m31;
			t.m32 = marker.transform.m32;
			t.m33 = marker.transform.m33;
			t.m34 = marker.transform.m34;
			t.m41 = marker.transform.m41;
			t.m42 = marker.transform.m42;
			t.m43 = marker.transform.m43;
			t.m44 = marker.transform.m44;

			overlay.animate({
				transform:t,
				duration:0
			});
			hasMarker = true;
			break;
		}
	}
	overlay.visible = hasMarker;
});

window.add(cameraView);
window.open();

Again, most of the credit goes to Atsushi for creating this awesome module. You can now replace the overlay with rich media like images or videos to match your marker. Feel free to ping me on Twitter if you have any questions or comments.

wmuSlider, a jQuery responsive slider

2012-02-21T03:58:08Z

I want to give back to the community by sharing the code used for the responsive slider on the homepage. Please keep in mind that it’s still very raw (really) and under the MIT LICENSE, which basically means: break it, steal it but THE STUFF IS PROVIDED “AS IS”!

You can download the code and check out the demo on GitHub.

1. Calling the library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.wmuSlider.min.js"></script>

2. Initialisation

<div class="wmuSlider">
    <div class="wmuSliderWrapper">
        <article>
            <img width="612" height="612" src="http://farm6.static.flickr.com/5295/5476032712_6441c7e316_z.jpg" />
        </article>
        <article>
            <img width="612" height="612" src="http://farm6.static.flickr.com/5176/5456963815_042d9c3ea0_z.jpg" />
        </article>
        <article>
            <img width="612" height="612" src="http://farm6.static.flickr.com/5201/5296457034_5688b25c15_z.jpg" />
        </article>
        <article>
            <img width="612" height="612" src="http://farm6.static.flickr.com/5245/5291874922_35ca47cc3d_z.jpg" />
        </article>
    </div>
</div>
<script>$('.wmuSlider').wmuSlider();</script>

If you are using Modernizr, you can enable automatic touch support by setting the touch parameter.

$('.wmuSlider').wmuSlider({
    touch: Modernizr.touch
});

3. Options

The slider can be customised with the options bellow, it should be pretty self-explanatory.

animation: 'fade',
animationDuration: 600,
slideshow: true,
slideshowSpeed: 7000,
slideToStart: 0,
navigationControl: true,
paginationControl: true,
previousText: 'Previous',
nextText: 'Next',
touch: false,
slide: 'article',
items: 1

Please let me know what you think via Twitter.

Responsive Images Tips

2011-09-06T11:55:41Z

When coding this site, I encountered two issues around responsive images.

The first one was a weird IE bug that would resize the images correctly in width but not in height when using height:auto and max-width:100%. After searching around for a bit, I found an easy fix, just add width:auto for it to work nicely in IE.

The second one was when setting the width (or max-width) of an element to 100% and also adding some padding. This would cause the image to expand outside the container. You can easily go around it by changing the box-sizing property to border-box.

img {
    max-width: 100%;
    height: auto;
    width: auto; /* Fix for IE */
    padding: 5px;

    /* Box Sizing */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

If you are using Modernizr on your site, you can add a custom test to check for compatibility.

Modernizr.addTest('boxsizing', function() {
    var s = ['boxSizing', 'MozBoxSizing', 'WebkitBoxSizing', 'msBoxSizing'],
    div = document.createElement('div');

    for (var i = 0, l = s.length; i < l; i++) {
        if (div.style[s[i]] != undefined) {
            return true;
        }
    } 

    return false;
});

How-to do an emboss effect in CSS3?

2011-09-03T14:36:08Z

You can found a lot of tutorials online on how-to use drop shadows in CSS3 but not that many show the full emboss effect with an inner top shadow and a bottom reflection to emphasis the depth.

This will only work with browsers supporting the rgba property. (Hint: not IE)

{
    /* Background */
    background: rgba(0, 0, 0, 0.2);

    /* Border bottom light */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    /* Inner top shadow */
    -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.1);

    /* Round corners */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}