Lite mer buggfixande i GPS Averaging applikationen

Fixat Firefox 3.6 stöd, gjort så den skriker om Geolocation API inte är stött, fixat en felaktig HTML (script-taggen fick man visst inte stänga direkt med /> utan det var tvunget att vara explicit stänga med en egen stop tag)


<!DOCTYPE html>

<!--

 Blaufish's HTML5 Geolocation API GPS Averaging

 https://blaufish.wordpress.com/

 Some rights reserved;

 http://creativecommons.org/licenses/by-nc-sa/3.0/

-->

<html>

<canvas id="canvas" width="256" height="256">

This text is displayed if your browser does not support HTML5 Canvas.

</canvas><br/>

<font face="courier" size="-3">

<output id="output">no output</output>

</font>

<!-- 

   latlon2tile.js: This is a port of Ian Dees php class to a

   javascript prototype so you can get tile information from

   a lat/lon coordinate on the client side. By Will James of

   Tekimaki.com

 -->

<script src="latlon2tile.js"></script>

<script>

   if (navigator.geolocation == undefined) {

     output.innerText = "Error: geolocation API not accessible!";

     alert("Geolocation API required!");

   }

   var cnt, avglat, avglon, avgacc, minlat, maxlat, minlon, maxlon;

 

   var output = document.getElementById('output'); 

   

   var cnvs = document.getElementById('canvas'); 

   var context = cnvs.getContext('2d');

   

   localStorage.clear(); 

   function calculateMinMaxAvg() {

      //Calculate min, max, avg

      maxlat = Number(localStorage.getItem('lat1'));

      minlat = maxlat;

      maxlon = Number(localStorage.getItem('lon1'));

      minlon = maxlon;

      var i;

      avglat = 0;

      avglon = 0;

      avgacc = 0;

      for(i = 1; i <= cnt; i++) {

         var lat = Number(localStorage.getItem('lat'+i));

         var lon = Number(localStorage.getItem('lon'+i));

         var acc = Number(localStorage.getItem('acc'+i));

         maxlat = Math.max(maxlat, lat);

         minlat = Math.min(minlat, lat);

         maxlon = Math.max(maxlon, lon);

         minlon = Math.min(minlon, lon);

         avglat += lat/acc;

         avglon += lon/acc;

         avgacc += 1/acc;

      }

      avglat /= avgacc;

      avglon /= avgacc;

     

   }

   var avgcolor = 0;

   function paintAvg() {

      if (avglat == undefined) return;

      if (avglon == undefined) return;

      // Paint average

      switch (avgcolor) {

        case 0: context.fillStyle = 'rgb(255,255,0)'; break;

        case 1: context.fillStyle = 'rgb(0,0,0)'; break;

        case 2: context.fillStyle = 'rgb(0,255,0)'; break;

        case 3: context.fillStyle = 'rgb(0,255,127)'; break;

      }

      avgcolor = (avgcolor+1)%2;

      var tile = TileUtl.getTileCoordinate(avglat,avglon,zoom);

      var bitmap = TileUtl.getBitmapCoordinate(avglat,avglon,zoom);

      var x = bitmap.x - tile.x*256;

      var y = bitmap.y - tile.y*256;

      context.fillRect(x,y,7,7);

   }

   function log10(n) { return Math.log(n)/Math.log(10); }

 

   function paintCanvas() {

     

      // Clear canvas

      context.clearRect(0,0,cnvs.width,cnvs.height);

      // Paint positions

      for(i = 1; i <= cnt; i++) {

         var lat = Number(localStorage.getItem('lat'+i));

         var lon = Number(localStorage.getItem('lon'+i));

         var acc = Number(localStorage.getItem('acc'+i));

         var tile = TileUtl.getTileCoordinate(lat,lon,zoom);

         var bitmap = TileUtl.getBitmapCoordinate(lat,lon,zoom);

         var x = bitmap.x - tile.x*256;

         var y = bitmap.y - tile.y*256;

         var color = 'rgb(255,0,0)';

         if (acc>50) color = 'rgb(255,100,150)';

         if (acc>100) color = 'rgb(255,150,150)';

         if (acc>200) color = 'rgb(255,200,200)';

         var size = 1 + Math.ceil(5*log10(acc));

 

         context.fillStyle = color;

         context.fillRect(x,y,size,size);

      }

      //paintAvg();

      output.innerHTML += '<br/>done!';

    }

    

    function fmt(latlong,ne,sw) {

       var dir = (latlong>0) ? ne : sw;

       latlong = Math.abs(latlong);

       var deg = Math.floor(latlong);

       var res = latlong - deg;

       var min = (res * 60);

       min = Math.round(min * 10000) / 10000;

       return dir + " " + deg + " " + min;

    }

    function ffmt(lat,lon) {

       var s = fmt(lat,'N','S') + ' ' + fmt(lon,'E','W');

       s += ' <a href="http://maps.google.se/maps?q=';

       s += lat+'+'+lon+'">map</a>'; 

       return s;

    }

    var zoom = 17;

    var TileUtl = new Tile();

    function setBg(lat,lon) {

      var tileCoords = TileUtl.getTileCoords( lat, lon, zoom );

      var url = 'http://mt.google.com/vt/x=';

      url += tileCoords.x + '&y=' + tileCoords.y + '&z=' + zoom;

      cnvs.style.backgroundImage = 'url('+url+')';

    }

    function scrollMap(position) {

      output.innerHTML = '';

      cnt = 0;

      if (localStorage.getItem(cnt) !== undefined) {

        cnt = localStorage.getItem('cnt');

      }

      cnt++;

      var lat = position.coords.latitude;

      var lon = position.coords.longitude;

      var acc = position.coords.accuracy;

      localStorage.setItem('cnt', cnt);

      localStorage.setItem('lat'+cnt, lat);

      localStorage.setItem('lon'+cnt, lon);

      localStorage.setItem('acc'+cnt, acc);

      calculateMinMaxAvg();

      output.innerHTML += 'cur: ' + ffmt(lat,lon);

      output.innerHTML += ' ' + Math.round(position.coords.accuracy);

      output.innerHTML +=  'm cnt:' + cnt;

      output.innerHTML += '<br/> avg: ' + ffmt(avglat,avglon);

      output.innerHTML += '<br/> min: ' + ffmt(minlat,minlon);

      output.innerHTML += '<br/> max: ' + ffmt(maxlat,maxlon);

      output.innerHTML += '<br/>';

      setBg(avglat,avglon);

      paintCanvas();

  }

  function errorCallback(e) {

    output.innerText = "Error: " + e.code + " " + e.message;

  }

  navigator.geolocation.watchPosition(scrollMap, errorCallback);

  function gcp() {

    navigator.geolocation.getCurrentPosition(

       new function(e){}, 

       errorCallback, 

       {maximumAge:500, timeout:500} 

    );

  }

  setInterval( "gcp();", 5000 );

  setInterval( "paintAvg();", 250 );

</script>

</html>

Annonser

Kommentera

Fyll i dina uppgifter nedan eller klicka på en ikon för att logga in:

WordPress.com Logo

Du kommenterar med ditt WordPress.com-konto. Logga ut / Ändra )

Twitter-bild

Du kommenterar med ditt Twitter-konto. Logga ut / Ändra )

Facebook-foto

Du kommenterar med ditt Facebook-konto. Logga ut / Ändra )

Google+ photo

Du kommenterar med ditt Google+-konto. Logga ut / Ändra )

Ansluter till %s