Deze tutorial is gericht op Interactieve Media studenten aan de HvA. Ik maak namelijk gebruik van de stap server die alleen maar voor IAM studenten aan de HvA beschikbaar is.

Deze tutorial is gemaakt op basis van deze tutorial van Layar zelf, in de mijne ga ik ook in op een database maken op de stap server en hoe je een tabel maakt en de data er in zet.

Hier ga ik behandelen hoe je heel snel je eigen layer opzet, ik ga redelijk snel door de theorie heen want deze tutorial is gericht op het zo snel mogelijk realiseren van je layer.

Stap 1 – Maak een database aan

Layar werkt met objecten, zogeheten POI’s. Als jij Layar naar een bepaald huis wil linken moet daarvoor een object in een database staan.

Op de stap server (de server die je tijdens internetstandaarden hebt gebruikt voor je website) kan je een een database aanmaken. Dit kan je doen door naar de stap website te gaan en in te loggen.

Als je dit gedaan hebt krijg je een mailtje met gegevens die je nodig hebt in latere stappen.

Stap 2 – Vul de database

Hiervoor ga je naar de phpMyadmin van stap. Hier log je in met de gegevens uit de mail. Vervolgens klik je aan de linkerkant op je database (de naam van de database staat in de mail, waarschijnlijk is het stu_[studentlogin]). En hierna op het tabblad SQL. Nu moet je de onderstaande code kopieren naar het invulscherm en op Go klikken.

CREATE TABLE IF NOT EXISTS `POI_Table` (
  `id` varchar(255) NOT NULL,
  `attribution` varchar(150) default NULL,
  `title` varchar(150) NOT NULL,
  `lat` decimal(20,10) NOT NULL,
  `lon` decimal(20,10) NOT NULL,
  `imageURL` varchar(255) default NULL,
  `line4` varchar(150) default NULL,
  `line3` varchar(150) default NULL,
  `line2` varchar(150) default NULL,
  `type` int(11) default '0',
  `dimension` int(1) default '1',
  `alt` int(10) default NULL,
  `relativeAlt` int(10) default NULL,
  `distance` decimal(20,10) NOT NULL,
  `inFocus` tinyint(1) default '0',
  `doNotIndex` tinyint(1) default '0',
  `showSmallBiw` tinyint(1) default '1',
  `showBiwOnClick` tinyint(1) default '1',
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

Hiermee maken we een tabel in de database waar we info van dingen die zichtbaar moeten zijn in de layer in kunnen zetten.

Stap 2b

Laten we dit maar gelijk doen, laten we de locatie van het singelgrachtgebouw opnemen: Klik links op POI_Table en daarna op het tabblad insert.

Hier moeten we alle info invullen die Layar nodig heeft per object. Je moet dit lijstje invullen per object die je in je layer wilt hebben.

De gegevens: _id_: je eerste object is 1, je tweede 2, je begint nu dus met 1.
Attribution: Wat link je op de kaart? In dit geval: De locatie van het Singelgrachtgebouw
Title: de titel van je object: Het Singelgrachtgebouw

de waarde lat en lon zijn de coördinaten van het object, deze kan je gemakkelijk via google maps opvragen. Als je bij google maps zoekt naar het Singelgrachtgebouw, Rhijnspoorplein, Amsterdam dan krijg je ons schoolgebouw met een rode pijl. Als je rechts klikt op de rode pijl en klikt op wat is hier dan worden de coördinaten in het zoekveld gezet.

in ons geval dus:

• lat: 52.360585
• lon:4.909558

imageURL is een link naar een plaatje, zoals bijvoorbeeld het logo van de HvA: http://www.4c4u.nl/userfiles/image/hva_logo.jpg
line4, 3 en 2: zijn regels waar je info over de locatie kan neerzetten die dan ook in Layar te zien zijn als je naar je object kijkt.
distance: 0.0000000000
type: 1

Alles wat niet genoemd is kan je leeg laten, ten slotte kan je op Go klikken.

Je hebt nu een object in de database staan!

Stap 3 – Maak een script waarmee de info uit de database aan Layer gekoppeld kan worden.

Dit script hoef jij gelukken niet te maken, je kan hem hier downloaden. Je moet drie regels wijzigen met gegevens uit het mailtje van de database, namelijk regel 10, 11 en 12:

$dbdata = "VUL HIER JE DATABASE NAAM IN";
$dbuser = "VUL HIER JE DATABASE USER IN";
$dbpass = "VUL HIER JE DATABASE WACHTWOORD IN";

De gegevens kan je uit het mailtje halen (je moet de ” ” laten staan) Dit scriptje haalt gegevens uit je database en stuurt ze terug naar Layar.

Als je dit gedaan hebt kan je het bestand opslaan en uploaden naar de stapsite zoals we dat geleerd hebben bij internetstandaarden, namelijk:

Gebruik een FTP programma zoals Filezilla en log in op jouw plekje op de stap server:

• server: stap.iam.hva.nl
• gebruikersnaam: [login]
• wachtwoord: [wachtwoord] <- dit wachtwoord is je schoolwachtwoord, NIET die uit de mail.

Zet nu het php bestand wat je zojuist aangepast hebt op de server (in het PUBLIC_HTML mapje) zodat je hem kan bereiken via je browser.

Stap 4 – Koppel aan Layar

Je hebt alles gedaan voor je layer, nu moet je hem alleen nog koppelen aan Layar zelf.

Ga naar layar.com en maak een account aan. Als je dit gedaan moet je jezelf aanmelden als developer (klik op become a developer). Als je hier bent ingelogd moet je klikken op “my layers” en dan op “create a layer”.

Hier kan je alles invullen, maar: Layer type kan je op “Generic 2d” laten staan. de API Endpoint URL is de weblink naar het php bestandje wat je op de stap server hebt gezet in stap 3.

Stap 5

Als je alles goed hebt gedaan kan je nu bij “my layers” klikken op de test knop naast de layer die je net hebt aangemaakt. Als je vervolgens het poppetje iets meer richting school verplaatst (anders valt school niet binnen het bereik) en klikt op Load POI’s dan zal Layar verbinding maken met je script op de stap server en die geeft alle data uit de database (ook op de stap server) terug.

Rechts onder zie je een lijst met objecten die Layer heeft kunnen krijgen op basis van de positie van het poppetje.

Stap 6

Ga terug naar stap 2b en vul nog wat andere locaties in de buurt toe (denk eraan dat je id door moet nummeren vanaf je eerste object).