Cloud Event To Photon/Electron?

General
21

Yes, it would, but I’ve made wrong assumptions before. :grinning:

I’m still working on getting the latest particle lib to work, but the this spark code works. Many thanks to everyone that helped me get on the right path!

<!DOCTYPE HTML>
<html>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<body>
    <span id="temp"></span><br>
    <span id="tstamp"></span><br>

    <button id="connectbutton" onclick="start()">Get Location</button>

    <script type="text/javascript">

    function start(objButton) {

        document.getElementById("temp").innerHTML = "Waiting for data...";
        document.getElementById("tstamp").innerHTML ="";
        var deviceID = "4f004";
        var accessToken = "1fa3";
        var varName = "lonlat";

        requestURL = "https://api.spark.io/v1/devices/" + deviceID + "/" + varName + "/?access_token=" + accessToken;
        $.getJSON(requestURL, function(json) {
                 document.getElementById("temp").innerHTML = "Current GPS Location -> " + json.result;
                 // document.getElementById("temp").style.fontSize = "28px";
                 document.getElementById("tstamp").innerHTML = "Date/Time          -> " + json.coreInfo.last_heard;
                 });
    }
    </script>
</body>
</html>
2 Likes
22

Just wanted to update the code, in case it will help anyone else. This code isn’t optimized and I apologize for its sloppy nature. I’ll clean it up later.

This page will load and automatically run the java start() function. I’ve shorten the actual deviceID and Access_Token codes, but otherwise this is the code that is currently working. Thanks again for everyone’s help!

<html>
  <head>
    <title>Current Location</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body onload= "start()">
  	<span id="temp"></span><br>
    <span id="tstamp"></span><br>
     <div id="map"></div>
    <div id="capture"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 39.833, lng: -98.585},
          zoom: 8
        });
      }
      
function ConvertDMSToDD(days, minutes, seconds, direction) {
    var dx = minutes + "." + seconds;
    var dl = (Number(dx)/60);
    var dd = Number(days) + dl;
    dd = parseFloat(dd);
    if (direction == "S" || direction == "W") {
        dd = dd * -1;
    } // Don't do anything for N or E
    return dd;
}
      
 function doh(str) {
 
        var res = str.replace("'","");
        str = res;
        res = str.replace("'","");
        str = res;
        var constr = str.split(",");
        var latstr = constr[0].replace(" ",".");;
        var longstr = constr[1].replace(" ",".");
        var latdir = latstr.charAt(0);
        var longdir = longstr.charAt(0);
        res = latstr.replace("+","");
        latstr = res;
        res = longstr.replace("-","");
        longtr = res;
        res = longstr.replace("+","");
        longstr = res;
        res = longstr.replace("-","");
        longstr = res;
        if (latdir == "+")
          {
            latdir = "N";
          }
        else
        	{
          	latdir = "S";
          }
        if (longdir == "-")
          {
            longdir = "W";
          }
        else
        	{
          	longdir = "E";
          }
        var latpart = latstr.split(".");
        var longpart = longstr.split(".");
        console.log(latstr);
        console.log(latpart[0])
        console.log(latpart[1])
        console.log(latpart[2]);
        console.log(latdir);
        console.log(longstr);
        console.log(longpart[0]);
        console.log(longpart[1]);
        console.log(longpart[2]);
        console.log(longdir);
        var lat = ConvertDMSToDD(latpart[0],latpart[1],latpart[2],latdir);
        console.log(lat);
        var long = ConvertDMSToDD(longpart[0],longpart[1],longpart[2],longdir);
        console.log(long);
        marker = new google.maps.Marker({position: new google.maps.LatLng( lat,long),map: map});
        var laLatLng = new google.maps.LatLng( lat, long);
        map.panTo(laLatLng);
        
 }

function start() {

        document.getElementById("temp").innerHTML = "Waiting for data...";
        document.getElementById("tstamp").innerHTML ="";
        var deviceID = "4f004";
        var accessToken = "1fa3342";
        var varName = "lonlat";

        requestURL = "https://api.spark.io/v1/devices/" + deviceID + "/" + varName + "/?access_token=" + accessToken;
        $.getJSON(requestURL, function(json) {
                 document.getElementById("temp").innerHTML = "Current GPS Location -> " + json.result;
                 jstr = json.result;
                 // document.getElementById("temp").style.fontSize = "28px";
                 document.getElementById("tstamp").innerHTML = "Date/Time          -> " + json.coreInfo.last_heard;
                 console.log(jstr);
                 console.log('calling DOH');
                 doh(jstr);
                 });
    }
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"> </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=<<Your Google API Key Here>>&callback=initMap"
    async defer></script>
  </body>
</html>