Geekly Articles each Day
📜 ⬆️ ⬇️

How I complemented reality in the library

picture to attract attention
Picture to attract attention.
I am the one who first used navigation technology to build augmented reality.
Geolocation technologies have been known for a long time and are well documented in all language parts of the Internet, including Russian. But, no matter how surprisingly, until now no one really used it in practice. A few years ago, all on the same habrahabr I read about plans to use augmented reality maps. But, as far as I can see, nowhere but ingress is this, again, never used.
In December 2011, the Voronezh Regional Children's Library created its own local history resource for Children about the Voronezh Region and since then systematically filled it with brief annotations on monuments, places of memory and other information about the Voronezh Region. Users at any time could get this information and references to local history literature, which is available in the library.
Everything is extremely simple. Information is already on the site. Each such article is the only entry in the database in the form of html code. To display it, it is enough to make one request. But you need to somehow deliver it to the user. Here the idea of ​​the “guide” was born.
There are a lot of guests in Voronezh. These are students from other cities, and foreigners who came on duty, and just tourists. They all love to see our sights and monuments. And it is always more convenient to have something at hand that you don’t need to mess around for a long time.
Therefore, I decided to link each entry to specific coordinates on the ground. If this is not augmented reality, then what?
Let's sort the concrete implementation.
Looking for a week ready solutions and not finding anything suitable, I decided to do everything in my own way. First, the method of determining the coordinates of the user.
<body onload="getLocation();"> ... geolocationOptions: { enableHighAccuracy: true; } function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else { x.innerHTML = "      ."; }

As you can see from here, everything is extremely simple. Here the watchPosition method helped me a lot, which works more than once, like getCurrentPosition, but it works constantly as the user coordinates change. Therefore, it turned out to be extremely convenient to show content depending on the situation.
The next moment is the verification of coordinates. I thought for a long time how best to do? At first I was visited by the thought of sufficiently coarsening the accuracy of the specified location. But this method turned out to be unsuitable, since it turned out to be difficult to choose an error that would give the desired radius and I refused it.
Then I began to think in the direction of the contours delineating the area on the ground. But it would greatly complicate and weighed the code, and I also refused this idea.
The third solution seemed to me the most simple and correct. It is expressed in the following line of code:
 var data = <?php echo $myArray ?>; //

As a result, obviously, it turns into a code of the form:
 var data = [["293","51.6569823","51.6583003","39.2145828","39.2174366"],["294","51.630048","51.630752","39.156333","39.157132"],["295","51.693474","51.693709","39.20857","39.209728"],["296","51.6704160","51.6718383","39.2093698","39.2117104"],["297","51.6644532","51.6647234","39.2065102","39.2066389"],["298","51.6640640","51.6645244","39.2074646","39.2079206"],["300","51.6664147","51.6669751","39.2019236","39.2021328"],["301","51.6624973","51.6629277","39.2063693","39.2069325"],["302","51.6610044","51.6621621","39.2011539","39.2019854"],["303","51.6735303","51.6739639","39.2071490","39.2077873"],["304","51.6644936","51.6652675","39.2038072","39.2049820"],["305","51.6715535","51.6722906","39.2086361","39.2097626"],["306","51.6615435","51.6622841","39.1990161","39.1997027"],["308","51.6554642","51.6559213","39.1859334","39.1865128"],["312","51.6735318","51.6740154","39.2113578","39.2124253"],["313","51.6758248","51.6762417","39.2107791","39.2114228"],["315","51.7115548","51.7120380","39.2272416","39.2277244"],["316","51.7564548","51.7572128","39.1742317","39.1752658"],["434","51.6659232","51.6664169","39.2051209","39.2057968"],["435","51.7064638","51.7071071","39.1711776","39.1726474"]];

As you can see, this is just a set of coordinates and id articles.
And here the most important is already done:
 function showPosition(position) { for (i = 0; i < data.length; i++) { if ((position.coords.latitude >= data[i][1] && position.coords.latitude <= data[i][2]) && (position.coords.longitude >= data[i][3] && position.coords.longitude <= data[i][4])) { showArticle(data[i][0]); x.innerHTML = ("<h1>         ,      .</h1>"); } } }

That is, summing up the above, each time when the coordinates change, we go over the entire array and compare the current values ​​with those in the array. Thus, if the user entered the rectangle that we specified when creating the tag, the script will automatically download the article from the database. Naturally, with the help of ajax, in such a simple way:
 function showArticle(str) { if (str == "") { document.getElementById("txtHint").innerHTML = ""; return; } else { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("txtHint").innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET","getArticle.php?q="+str,true); xmlhttp.send(); } }

Of course, the method described above has obvious drawbacks.

In the highlighted rectangle there is a memorial sign to the victims of the bombing in the Pioneer garden. But to indicate it somehow differently, so that nearby houses that do not fall into this square, using this approach is simply impossible. But, fortunately, in this case, it does not matter, because, as a rule, the density of monuments per unit area is extremely small, and therefore, it does not interfere.
Another difficulty is the problem of the navigation technology itself. Sometimes it gives surprisingly large errors. So, the monument to S. Yesenin is approximately more than five hundred meters from the monument to A. Koltsov. But because of the surrounding buildings, at times, instead of S. Yesenin, you can see information on A. Koltsov.
Nevertheless, the “Guide” was launched and residents and guests of the city already use it. Work to improve it will continue. I will be glad to constructive criticism and suggestions.
The “guide” itself can be found at the following link: www.okrae.odbvrn.ru/guide
On this, I believe, you can finish the review. I hope the information will be useful to the community.
UPD: video from local TV.
UPD 2: we will roll out a new version soon. This is already old.

')

Source: https://habr.com/ru/post/258387/

More articles:


All Articles