Just back from our event at the MACRO Museum of Rome where we were hosted in the Miltos Manetas’ electronicOrphanage to present this.astro and Come in Cielo Così in Terra in occasion of the Global Astronomy Month, in the event called Connect the Dots and see the Unseen, curated by Elena Giulia Abbiatici and Valentina Levy.
In this article you will find some of the images of the workshop and, here below, is a view taken from the this.astro projection we showed in the entrance hall of the museum:
A great part of our presence was focused on the creation of Come in Cielo Così in Terra, a software-enabled participatory performance through which people can collaborate in drawing constellations onto their cities using their bodies:
The application is designed for access through smartphones: just open up the URL using your iPhone or Android and you will be able to start right away.
A couple of things:
So: just download and install its, or use it FROM HERE and check for updates on Art is Open Source for new releases.
And, as a follow up to the workshop: here are is a basic tutorial on how to make an HTML application which can track users’ positions using only standard features of W3C compliant browsers.
What we want to achieve is an application which runs on a user’s web browser (for example Firefox, Chrome or Safari) and:
First step: localize the user
The geolocation API specified by the W3C consortium allows us to do just what we require.
First let’s create a standard, almost empty HTML page.
If you wrote everything correctly, you can upload this file (save it as an HTML file) to your webserver (if you don’t have a web server anywhere, you can download and install on your computer one of the Bitnami Stacks from here: choose WAMPStack for Windows, LAMPStack for Linux or MAMPStack for OSX).
You can now access your file using your browser (for example, if you installed a Bitnami Stack you can point your browser to http://localhost/the_name_of_your_file.html).
The browser should ask you if you want to be geo-located: if you answer “no” it will pop up an error message, if you answer “yes” it will pop up your geographical coordinates.
This should work consistently on both your computer web browsers and on the web browsers found on your smartphones.
STEP 2 CREATE A DATABASE:
Now we want to store our coordinates somewhere.
So we need to create a database and, inside it, a table to hold them.
Use the tools you have to manipulate your databases (for example, if you installed the Bitnami stack, you will have the PhpMyAdmin application which you can use through your browser) to create a table (let’s call it “coordinates“) with two FLOAT columns named lat and lon, to hold the coordinates.
Here is what my PhpMyAdmin schema looks like:
now, let’s create a PHP file (a regular text file, saved with extension “.php”), and let’s save it as “storeCoordinates.php“.
Inside it, let’s write this code:
Put this file on your webserver, as right next to the one we created before.
THIRD STEP: store coordinates
Now we will modify our HTML file to invoke the functionality we just implemented using PHP.
Add the following line right after the <head> tag in the HTML file we created in the first step:
This tells the browser to load the jQuery library.
Then modify the updatePosition function we have created in the first step, so that it looks like this:
What we are doing with the getJSON command is to call the storeCoordinates PHP file we created earlier on and pass to it the coordinates we just captured.
Just update the file you just modified on your web server (so, in the same folder used by the web server there should be the HTML file together with the jquery.js file and the storeCoordinates.php file.
If you navigate to the HTML file using your browser and you answer “yes” when it asks you to be geo-localized, you should see a row being automatically added to your DB, containing your coordinates.
(about accuracy: if you are using this through a web browser, accuracy could not be perfect, as localization will be performed using your network information; this, according to the setup of your provider, will yield results of different degrees of accuracy; the same can be said when using GPS enabled devices: according to where you are, the GPS could provide more or less accurate results)
Here’s my first coordinates automatically captured in this way:
LAST STEP: SHOW’EM ON A MAP!
To show these coordinates on a map, let’s prepare another PHP file to get them from the database and add them to a Google Map. To use Google Maps you have to register and obtain a KEY. Click here to know how to obtain your key (read under the “Obtaining API Key).
Create another PHP file, and call it “map.php“.
Inside it write the following code:
Phew! that’s quite a lot of code!
let’s browse through it to see the new things which we introduced here. Starting from the top, here are the interesting lines:
And that’s it!
If you upload this PHP file to your web server and open up these two web pages we created (this last file and the initial HTML file with the request for geo location) on two different tabs of your browser (even on your smartphone) and you refresh first one and then the other (maybe moving a block or two between each refresh, so that you will record different coordinates) you will see the map populate with the markers describing your movements.
xDxD.vs.xDxD April 29th, 2012