Processing Sketch and Processing.js working together

jgmourag

Hi Guys,

I have an map using the Unfolding library. And I need to trace a route in this map using the Google Directions Api. I have this code and I need to run the API in the processing sketch. Does anyone has an ideia how can I do that ?

    
        GPS ARDUINO 
        

  
  
  
    #map_content {
      height: 400px;
      margin: 10px 0;
    }
  

    

    


    var map;
    var directionsService = new google.maps.DirectionsService();
    var info = new google.maps.InfoWindow({maxWidth: 200});
    
    var marker = new google.maps.Marker({
      title: 'Google Belo Horizonte',
      icon: 'marker.png',
      position: new google.maps.LatLng(-31.3247328,-54.0965701)
    });
    
    function initialize() {
      var options = {
          zoom: 15,
          center: marker.position,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      
      map = new google.maps.Map($('#map_content')[0], options);
      
      marker.setMap(map);
      
      google.maps.event.addListener(marker, 'click', function() {
        info.setContent('Avenida Bias Fortes, 382 - Lourdes, Belo Horizonte - MG, 30170-010, Brasil');
        info.open(map, marker);
      }); 
    }
    
    $(document).ready(function() {
      $('#form_route').submit(function() {
        info.close();
        marker.setMap(null);
        
        var directionsDisplay = new google.maps.DirectionsRenderer();
        
        var request = {
            origin: $("#route_from").val(),
            destination: marker.position,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        
        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(response);
              directionsDisplay.setMap(map);
            }
        });
        
        return false;
      });
    });
  


  
    Origem: 
    
  
  
  



    

blindfish

Can't seem to open the links because they got themselves embedded in a code block... but processing.js won't run java based libraries, like unfolding :/

A quick search reveals a number of JavaScript based map libraries. If your plan is to put your sketch online I'd suggest finding one that suits your needs. you can dump raw JS into a tab (which you give a .js extension) though may have to do some work to then get this interfaced with the 'java' in your other tabs...

I managed to do just this (with a chess JS library) recently. Do you have any experience with JS?

jgmourag

I found the Leaflet library that can help me(http://leafletjs.com/) but I don't know much about javascritpt. How can I use this library in Processing ?????

blindfish

Processingjs just converts java to JS. From my little experience with it you can get away with some raw JS in a standard tab - e.g. console.info() instead of println()... So you may be able to use the leaflet library API directly; otherwise you'd have to create a raw JS tab and make your API calls there instead. It's certainly possible to put these in functions that can be called from a standard tab.

I may be able to throw a demo together over the weekend...

blindfish

Hmm... It actually looks far more fiddly than what I did with the JS chess library. That didn't have any visual output: so I could just process data with the library and pass this to my Processing sketch to work with further and then handle the display.

The leaflet.js library expects you to set up a placeholder div and outputs content into this. That won't play well with processingJS which uses a canvas element... I should probably do the research properly before I post a reply: sorry :\">

Reading your question again it looks like you want to run the code you posted inside a Processing sketch. I can see that it's already reliant on jQuery ( a JS library) and makes calls to the Google maps API (another library). That doesn't seem like a realistic prospect to me.

Let's take a different tack: What do you want to do in Processing once you have a map loaded?

jgmourag

Blindfish, I want to load the Google Directions Api in the map that was loaded in Processing. The Directions API calculates directions between two address. And an GPS module(using Arduino) will get the latitude and longitude that will pass this data for the API that will show in the map. Thanks for the help.

blindfish

Ok - that makes things far clearer (and my head is clearer now too). From the Google documentation (my emphasis):

You can calculate directions (using a variety of methods of transportation) by using the DirectionsService object. This object communicates with the Google Maps API Directions Service which receives direction requests and returns computed results. You may either handle these directions results yourself or use the DirectionsRenderer object to render these results.

So you need to get the Google API library loaded into ProcessingJS. It may be possible to do this from within ProcessingJS (I can't find anything in the docs though. It's a shame the preload function can't be used to load in script dependencies!); or you will have to build an HTML page yourself with the necessary imports (and run this on a server - not locally). You can do this using the contents of the 'web-export' folder. Open index.html and add:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;signed_in=false"></script>

on the line before:

<script src="processing.js" type="text/javascript"></script>

Note that web-export contents are overwritten each time you hit play in the Processing IDE; so create a copy ;)

Now to the code:

The sketch

Boolean dataIsReady = false;

void setup() {

  // you obviously have to populate the parameters with real lat/lng here!
  //  getMapData(originLat, originLng, destLat, destLng);
  getMapData(37.7699298, -122.4469157, 37.7683909618184, -122.51089453697205, doStuffWithData);

}

void draw() {
   // it's important to check you have data before trying to do anything with it!!!
   if(dataIsReady) {
      console.info("ready!");
   } 
}

// this callback is passed to getMapData() and runs once data is received...
void doStuffWithData(Object data) {

  // e.g. you might create a Class to handle the returned 
  // data and use this function to create an instance of that class

  // this will output the data to the browser console
  console.info(data);
  dataIsReady = true;
}

The JavaScript: This all goes on a separate tab. Call it something like 'getMapData.js'

// This will obviously only work if the Google maps library has been loaded!
var getMapData = function(originLat, originLng, destLat, destLng, callback) {

  var directionsService = new google.maps.DirectionsService();


  var myOrigin = new google.maps.LatLng(originLat,originLng);
  var myDestination = new google.maps.LatLng(destLat,destLng)

  // change travelMode as required
  // this is the object you pass to Google to get the data back
  var request = {
          origin: myOrigin,
          destination: myDestination,
          travelMode: google.maps.DirectionsTravelMode.DRIVING
      };


  // the function as parameter is a common pattern in JS
  // Basically anything in the function is called when the request 
  // completes - .i.e. when data is returned.
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
       // put the raw data into our callback function and make it accessible
       // in the context of the sketch code:
       callback(response);
    }
  });


}

I tested this and - I must admit slightly to my surprise - I got a data object back from Google :)

Hit F12 in your browser and you can navigate the JSON object in the console.

There don't appear to be any examples of parsing the data in Google's documentation: they probably expect most people will just render it to a Google map (it's no doubt far simpler to use their predefined rendering methods than to handle this yourself). The JSON format matches that described in their sample response

Happily I just remembered the callback trick I used to get the data that is retrieved via the pure JS tab back into the sketch tab; so you should have everything you need here to get data and do stuff with it in ProcessingJS

blindfish

Ah! But of course this still leaves you with a problem, since this code won't work with the Java based unfolding library; so I'm afraid it's of no use to you :/

At least I enjoyed figuring it out :D

I did however notice that you can make direct calls to the Google API via an HTTP request and get JSON or XML data in return... I think that's the only 'straightforward' solution if you want to use the data in pure Processing. I think you should now explore whether you can pass the Google API URL to the following:

• loadJSONObject
• loadXML

And if those don't work maybe the HTTP request library.