In this article we will see how to mark (show the Drawables) a site through Points of Interest (POI); In other words, recognize an area by its geographical position through the so-called Points of Interest (POI) instead of using Image Recognition.
But what is a POI or Point of Interest?
A POI is nothing more than a specific location or point; basically it's an interesting place a Point of Interest listed by someone; maps and GPS contain many of these points called POIs.
POIs in Wikitude are managed by a class called GeoLocation, which represents a location on earth in your 3D space; as you can imagine, it receives three parameters:
Parameters of the GeoLocation class
- Latitude: Latitude of the location given in decimals.
- Longitude: Longitude of the location given in decimals.
- Altitude (optional): The altitude of the given location in meters.
The third component makes it possible to locate a POI in 3D space.
Example of the GeoLocation class
var location3D = new AR.GeoLocation(47.77317, 13.069929, 320.0); // latitude, longitude, altitude
var location2D = new AR.GeoLocation(47.77317, 13.069929); // latitude, longitudeWe already know how to create a Point of Interest or POI in Wikitude, now we must create the Drawable object to mark the site; remembering past articles; this is nothing more than the content that you want to show when recognition occurs either through Image Recognition or by location (our case) through POIs:
htmlDrawable = new AR.HtmlDrawable({uri:"pagina.html"}, 1);We already have the Point of Interest POI and the content to display. What entity is in charge of locating and analyzing the area where the user is located and thus displaying the resources established in the Drawable (if and only if the user is within a POI)?; in other words; How do we show the Drawables according to the position of the user?
The class GeoObject
This class allows you to specify at least one POI (GeoLocation class objects) or location and the Drawable resources to display:
Parameters of the GeoLocation class
- POI: Reference to the GeoLocation object.
- Options (optional): Other parameters to customize the object; allows you to define what you want to do after the user is inside a POI:
- enabled: Boolean that indicates whether or not the GeoObject is active.
- renderingOrder (default 0): Number that defines the order of priority among various objects of the GeoObject class.
- onEnterFieldOfVision: Function that is executed when the user enters a POI.
- onExitFieldOfVision: Function that is executed when the user leaves a POI.
- onClick: Function that is executed when clicking (touching the device screen) on a Drawable object.
- drawables.cam: These are Drawable objects that will be displayed on the device's screen.
- drawables.radar: Radar for the user to locate other POIs of interest near their position:
- drawables.indicator: They are Drawable objects (such as an arrow) that are drawn on the edge of the screen to visualize the position of other objects outside the camera.
Example of the GeoLocation object, Drawable and GeoObject
var location3D = new AR.GeoLocation(47.77317, 13.069929, 320.0); // latitude, longitude, altitude
//recurso Drawable
htmlDrawable = new AR.HtmlDrawable({uri:"pagina.html"}, 1);
//construimos el objeto GeoLocation
var geoObject = new AR.GeoLocation(location3D,htmlDrawable); // POI -GeoLocation-, opciones
Summary
We can summarize what we have seen so far as follows:
- Define the POI.
- Define the Drawable object or what we are interested in showing when the user is located at the POI.
- The object that handles the previous two; locate and analyze the area where the user is located and if it matches the established POI(s), display the established resources (Drawable). It has been something like the Tracker in Image Recognition.
Conclusions
The use of POIs is something that is appreciated when other technologies such as Image Recognition fail or you do not want to use it for various reasons; it counts with greater precision than Image Recognition (since it is Geographic and there is no margin of error); however, we can use both technologies (POIs and Image Recognition) together as we will see in future articles.
Links of interest
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter