Every self respecting business (wo)man has a business card. And generally a business card is more boring than watching a cactus hatch on your grandmother’s balcony.
Q: But Menno, does it really have to be boring?
A: No! And to prove it we’ll make a boring card awesome instead. That way your customer will remember you for ever!
Q: That sounds amazing but how would you archieve that?
A: By adding some Layar Augmented Reality magic of course ….. d’Oh!
Getting prepared
First of all let’s take a second to acknowledge that the sole purpose of a business card is to share contact information and hopefully make a potential customer remember you when he has business for you.
For this tutorial you’ll need:
- a boring business card
- the Layar application
- a bit of web space to host the layer (only required if you really want to do it yourself)
Here’s the business card we’ll be awesomizing
Not bad for 5 minutes of fiddling, ey?
And this is how it’s going to look once it’s “awesome”.
Please note that I'm a flower.
Do you like the idea above but don’t you / can’t you do it yourself? Hire me and I’ll do it for you! (I promise to make it look better than the example above 
)
Here we go
To make your life easier I’ve added all the source files to this DIY Business Card archive so you don’t have to do any of the “hard work”.
Also there’s a working version of this Layar to be found online. Simply scan the reference image in the archive using Layar and you’ll either be taken right to it, OR someone else has used my reference image to do this tutorial and thus you’ll have to choose “DIY Business Card (diybusinesscard)”
Here’s the process broken down into these simple steps
- Modify the JSON from the provided archive and replace the “your.server.com” parts by links to your publicly available web space.
Note there’s more URL’s you might want to change. - Upload the json file + images directory the before mentioned web space.
- Log into the Layar Publishing Environment with your developer account and click “Create a new layer!”.
- Fill out the fields, using:
- API endpoint URL:
The URL of the JSON file you just uploaded to your web spapce. - Enable “Layar Vision”.
Note that the Layer type now switched to “3D and 2D objects in 3D space”
- API endpoint URL:
- Now upload the provided reference image and define the height as 5.5cm (0.055)
It will take some time to process the reference image but that should be done in about 2 minutes. After this you can check your handy work using the Layar application.
There you go… that’s all.
Keep reading if you want to know more about the mechanics of this layer.
The nitty gritty
Ok, time to dig into the details of this layer.
Special actions
The “call me” button opens the dialer with the phone number to be called already defined. Nifty ‘ey?
This is simply a matter of using action with a tel: link and the proper content type. Like this:
"actions": [{
"uri": "tel:+31624484523",
"label": "Call Me",
"contentType": "application/vnd.layar.internal"
}]
The “Mail me” button is equally simple. Just create a link like you would in html. Simply mailto:someone@somewhere.com and the right content type and you’re done!
"actions": [{
"uri": "mailto:myname@mydomain.com",
"label": "Mail Me",
"contentType": "application/vnd.layar.internal"
}]
Animation
You may also have noticed that my head is not only a flower, but it’s also spinning!
Layar supports a bunch of simple animations such as rotation (over each x,y and/or z axis), scaling (also over the 3 axis’s) and translation (moving) over 3 axis’s.
This way you can do some simple animations and if you’re patient you can even combine animations using delay/speed and interpolation to generate a kind of path animations. But again, this requires patience and loads of testing. There might also be differences under the Android or the iPhone version of the Layar app.
Here’s the animation I used on the flower object. Simple but effective.
"animations": {
"onCreate":[{
"interpolation": "linear",
"length": 8000,
"from": -359,
"to": 0,
"delay": 0,
"repeat": true,
"type": "rotate",
"axis": {
"y": 0,
"x": 0,
"z": 1
},
"persist": true
}]
}
That’s it!
Thanks for your attention.
For more information about actions, see my other tutorial “Add interaction using actions and asynchronous calls“
Thanks a lot for this useful tutorial. I’ve downloaded it and tried to modify one of the buttons to play a sound and display a pop-up message when clicked without leaving the layer. but it didn’t work, is it because each hotspot must have a single action?
Best regards,
Hi Atheer, good to hear it was useful to you.
If you want to have 2 actions attached to 1 button we’ll need to get a bit more creative from a technical point of view.
You would have to make the click on that button do an asynchronous call to your server with the action parameter set to “update” and load a new response that contains an invisible POI (i.e. a transparent png) which has an autoTriggering action attached to it (the audio file) and you need another POI
that is the popup.
Have a look at my other tutorial about asynchronous actions for more details or check the Layar documentation. Anyway, you’d need to add the following 2 hotspots somewhat like this:
{ "id":"audioPOI", "showBiwOnClick":false, "showSmallBiw":false, "anchor": { "referenceImage": "reference" }, "transform":{ "translate": { "y":-1 } }, "object": { "url":"http://myserver.com/mylayer/images/pixel.png", "contentType":"image/png", "size": 0.1 }, "actions": [{ "uri":"http://myserver.com/mylayer/assets/honk.mp3", "label":"My Sound", "contentType":"audio/mpeg", "autoTrigger":true }], "text": { "title": "Audio POI" }, "showActivity":false }, { ... your popup image's POI }That’s brilliant.
Thanks for your reply, it was really helpful.
Hi Atheer,
I don’t understand your solution. I have a imageslider of two images. when the user presses left, I want to remove the old picture and show a new one. The update part is quite vague for me. Could you explain your solution in my context?
Thanks!
Hi Lenny,
)
(I’ll just boldly assume you meant me, not Atheer
The update concept is actually quite simple once you get it.
A refresh means: Drop everything from the scene and replace it with this new response.
An update means: Don’t touch anything, just add new content from this new response and only delete what I specified in this new response.
Example:
The very first response (when opening the layer) defines these hotspots:
{ "hotspots":[{ "id":"dog", ... }, { "id":"cat", ... }] }So now I’m seeing a dog and a cat on the scene.
Now I click on one of them which triggers an update:
{ "deletedHotspots":"dog", ... "hotspots": [{ "id":"mouse", ... }] }Now the dog will have been removed and a mouse pops up in the scnene instead.
Also, if I would specify “cat” again (which already exists on the scene) with a different image, the previous version of “cat” would be replace for the new, updated image.
Does this clear things up?
hello
is it possible to change the images ?
Sure. it’s possible to change the images, but that requires you create your own layar and follow the steps in this tutorial to get your own version running which you can then update all you like.
I create a new layar and i change the first line <>
then i change the images but it still show yours.
Any advice ?
Thank you for your time
Hi again Haris,
I’m quite sure you are not opening the layer you created yourself, but you’re still opening mine.
The example files I uploaded don’t contain links to my images, so there’s no way you could be seeing my images if you aren’t using my layer by accident.
Make sure that you create your own layer in the Layar Publishing Environment (this requires you having a developer account)
Layar also made tutorials on how to create your own layar so it might be good to have a look at that.
Good luck!
Hi, great tutorial, thanks for sharing, we appreciate it.
Can you tell me how to know the correct path to “my.server.com”?
Thanks a lot.
Hi Omar,
I can’t give you a straight answer to that for that’s really up to you. You have to host the Layar response on some publicly available webserver. Only you know where you do that and what the domain of that server is, but to help you on your way:
Probably your internet provider has given you some webspace to play with. In my case that would be something like “http://members.chello.nl/~mennobieringa/”
In there I could upload my files through FTP and they would become available on that beforementioned URL.
So, if I’d upload “readme.txt” I would be able to find it at “http://members.chello.nl/~mennobieringa/readme.txt”
Hope that helps.
Hi Menno,
i tried to follow your tutorial, but somewhere i make a mistake.
When i test my layer it says error: no content available. But i have everything uploaded. changed the url-locations in the json file. The phone gives the text WincX, but tdoesn’t show the changes i made to my businesscard. Is there something obvious i’m doing wrong or do you need more information?
cheers,
Oswald
Hi Oswald,
Have you tried the “Test” function that Layar offers? You can find the button in the overview of your Layers (which I don’t think is the most logical place for this button, but well, there it is)
Please have a look at the error messages. If they are not clear to you, paste them here and I’ll have a look
Well, i did try this testing and i got this: and to be honest… i’m a bit lost. I’m not sure where the mistake is. It looks like the phone cannot get to the content, but if i type it in lets say explorer, the content is there…
here’s the report:
Loading layer “wincxcard”…
found layer = wincxcard
Loading POIs
Loading POIs for page #1
oauth disabled
POI fwd url = http://www.wincx.nl/ar/wincxkaartje/images/index.json?lang=en&countryCode=AF&userId=6f85d06929d160a7c8a3cc1ab4b54b87db99f74b&lon=4.887339&version=6.0&radius=1500&lat=52.377544&layerName=wincxcard&accuracy=100
Response received from provider, validating…
response code : 200
Traceback (most recent call last): File “/var/www/layar.com/app/api/handlers/api_layer/main_proxy.py”, line 525, in get_pois data = self.preprocess_response(data) File “/var/www/layar.com/app/api/handlers/api_layer/main_proxy.py”, line 145, in preprocess_response page = self.get_page_or_raise(key) File “/var/www/layar.com/app/api/handlers/api_layer/main_proxy.py”, line 203, in get_page_or_raise “Reference image unknown or inaccessible: ‘%s’” % key ValueError: Reference image unknown or inaccessible: ‘reference’
oauth disabled
POI fwd url = http://www.wincx.nl/ar/wincxkaartje/images/index.json?lang=en&countryCode=AF&userId=6f85d06929d160a7c8a3cc1ab4b54b87db99f74b&lon=4.887339&version=6.0&radius=1500&lat=52.377544&layerName=wincxcard&accuracy=100
Response received from provider, validating…
response code : 200
Traceback (most recent call last): File “/var/www/layar.com/app/api/handlers/api_layer/main_proxy.py”, line 525, in get_pois data = self.preprocess_response(data) File “/var/www/layar.com/app/api/handlers/api_layer/main_proxy.py”, line 145, in preprocess_response page = self.get_page_or_raise(key) File “/var/www/layar.com/app/api/handlers/api_layer/main_proxy.py”, line 203, in get_page_or_raise “Reference image unknown or inaccessible: ‘%s’” % key ValueError: Reference image unknown or inaccessible: ‘reference’
Error: No content available
This is the important part:
ValueError: Reference image unknown or inaccessible: ‘reference’
Did you already upload you business card as a reference? If so, what is the name you gave it?
That name should be copied into the json as the value for “referenceImage” under “anchor” (case sensitve)
So, that’s this part:
“anchor”: {
“referenceImage”: “reference”
},
Good luck
aaah YeS! That did the tric. i uploaded a referenceimage, but i forgot i gave the image key a different name. So in the json file i have to refere to the image key.
Thank you!!!