GPS-Logger/static/gps_logger/js/main.js

const selColor = "#FF5C26";
let d = [{
  label:"Altitude,m",
  data:[], 
  yaxis: 2
},
{
  label:"Speed,km/h",
  data:[]
}];

let options = {
  xaxis: {
    mode: "time",
    tickLength: 5,
    zoomRange: [60 * 1000, 1000 * 3600 * 24 * 365]
  },
  /*selection: {
    mode: "x",
    color: selColor
  },*/
  yaxes: [{
    min: 0,
    zoomRange: false,
    panRange: false
  }, {
    position: "right",
    alignTicksWithAxis: 1,
    min: 0,
    zoomRange: false,
    panRange: false
  }],
  zoom: {
    interactive: true
  },
  pan: {
    interactive: true,
    cursor: "move",
    frameRate: 60
  }
};
let optO = {
  legend : {
    show: false
  },
  series: {
    lines: {
      show: true,
      lineWidth: 1
    },
    shadowSize: 0
  },
  xaxis: {
    //ticks: [],
    mode: "time"
  },
  yaxis: {
    ticks: [],
    autoscaleMargin: 0.1
  },
  selection: {
    mode: "x",
    color: selColor,
    minSize: 0
  }
};

let gps = new GPS();
let plot, overview;

window.onload = function() {
	Cesium.Ion.defaultAccessToken = '<token>';
  
  var extent = {west: -0.2540382220862719, south: 0.6872565916005104, east: 0.6129855406042352, north: 0.9377043806513488};

  Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
  Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;
  
  bingMapsProvider = new Cesium.BingMapsImageryProvider({
    url: 'https://dev.virtualearth.net',
    key: '<key>',
    mapStyle: Cesium.BingMapsStyle.AERIAL_WITH_LABELS
  });

  viewer = new Cesium.Viewer('map', {
    fullscreenElement: "map",
    terrainProvider : Cesium.createWorldTerrain({
      requestVertexNormals: true,
      requestWaterMask: true
    }),
    //shadows: true
  });
  viewer.scene.globe.enableLighting = true;
  viewer.resolutionScale = 1.2;
  viewer.scene.screenSpaceCameraController.enableTilt = !('ontouchstart' in window);
  viewer.baseLayerPicker.viewModel.selectedImagery = new Cesium.ProviderViewModel({
    name: 'Bing Maps Aerial with Labels',
    iconUrl: Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/bingAerialLabels.png'),
    tooltip: 'Bing Maps aerial imagery with labels',
    creationFunction: function () {
      return bingMapsProvider
    }
  });
  var paths = [];

  
  fetch("trips")
  .then(function(response) {
    return response.json();
  })
  .then(function(jsonResponse) {
    gps.parse(jsonResponse);
    for(const t of gps.trips) {
      var desc = "Start: <b>" + timeFormat(t.startTime, "datetime") + 
            "</b><br/>Finish: <b>" + timeFormat(t.endTime, "datetime") + "</b><br/>" +
            "Track time (full): "+ timeFormat(t.totalTime) + "<br>" +
            "Track time (mov.): "+ timeFormat(t.movementTime) + "<br>" +
            "Alt: &uarr;" + t.ascendHeight.toFixed(1) + "m  &darr;" + t.descendHeight.toFixed(1) + "m"+
            "<br/>Distance: "+(t.distance/1000).toFixed(1)+"km<br/>" +
            "top speed: "+t.topSpeed.toFixed(1)+
            "km/h<br/>"+
            "average speed: "+t.avgSpeed.toFixed(1)+"km/h<br/>";

      const col = Cesium.Color.fromCssColorString(t.color)
      var path = viewer.entities.add({
        label : "Track "+t.id,
        id: "track_"+t.id,
        description: desc,
        polyline : {
          positions : t.path.map(p => Cesium.Cartesian3.fromDegrees(p.lng, p.lat, p.alt)),
          width : 5,
          material : new Cesium.PolylineOutlineMaterialProperty({
            color : col,
          }),
          //clampToGround: true,
          depthFailMaterial: new Cesium.PolylineOutlineMaterialProperty({
            color : Cesium.Color.fromAlpha(col, 0.6),
          }),
          shadows: Cesium.ShadowMode.ENABLED
        }
      });
      paths.push(path);
    }
    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    handler.setInputAction(function (movement) {
      var pick = viewer.scene.pick(movement.position);
      if (Cesium.defined(pick) && (pick.id._id.match(/track_([0-9]+)/))) {
        var id = parseInt(RegExp.$1);
        var path = paths[id];
        show(id);
      }
    }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

    viewer.flyTo(paths[paths.length - 1], { offset: new Cesium.HeadingPitchRange(0, -90, 0)});
    let regionIndex = 0;
    for(let r=0; r<gps.regions.length; r++) {
      addInfo(bingMapsProvider, viewer, regionIndex, gps.regions[r]);
      regionIndex++;
    }
    const i = gps.getInfo();
    var html =
      "Time (full): "+ timeFormat(i.totalTime) + "<br>" +
      "Time (mov.): "+ timeFormat(i.movementTime) + "<br>" +
      "Alt: &uarr;" + (i.ascendHeight).toFixed(1) + "m  &darr;" + (i.descendHeight).toFixed(1) + "m<br>"+
      "Distance: <b>"+(i.distance/1000).toFixed(1)+"km</b><br/>" +
      "Top speed: <b>"+i.topSpeed.toFixed(1) + "km/h</b><br/>"+
      "Avg. speed: "+i.avgSpeed.toFixed(1)+"km/h<br/>"+
      "Data points: "+i.points+"<br/>"+
      "<a href='javascript:show(" + (gps.trips.length-1) + ")'>Graph</a>";
    
    $(".status").append(html);

  });

  plot = $.plot("#placeholder", d, options);
  overview = $.plot("#overview", d, optO);
  // now connect the two

  $("#placeholder").bind("plotpan", updateOverview);
  $("#placeholder").bind("plotzoom", updateOverview);
  function updateOverview(event, ranges) {
    var axes = plot.getAxes();
    for(var axis in axes) {
      axes[axis].from = axes[axis].min;
      axes[axis].to = axes[axis].max;
    }
    overview.setSelection(axes, true);
  }
  $("#overview").bind("plotselected", function (event, ranges) {
    $.each(plot.getXAxes(), function(_, axis) {
      var opts = axis.options;
      opts.min = ranges.xaxis.from;
      opts.max = ranges.xaxis.to;
    });
    plot.setupGrid();
    plot.draw();
  });
  
  $("#whole").click(function () {
    setZoom(false,false);
  });
  $("#right").click(function () {
    var min = plot.getXAxes()[0].options.min;
    var max = plot.getXAxes()[0].options.max;
    if(min != null && max != null)
      setZoom((min+max)/2, max * 1.5 - min/2);
  });
  $("#left").click(function () {
    var min = plot.getXAxes()[0].options.min;
    var max = plot.getXAxes()[0].options.max;
    if(min != null && max != null)
      setZoom(min * 1.5 - max/2, (min+max)/2);
  });
}

let firstShow = true;

function show(id) {
  if(firstShow) {
    firstShow = false;
    
    d[0].data = smoothOut(gps.data.map(v => v.alt), 0.85);
    d[1].data = smoothOut(gps.data.map(v => v.speed), 0.85);
    
    for(let i=0; i<gps.data.length; i++) {
      const cur = gps.data[i];
      if((cur.timeDiff > 60 && cur.speed < 0.5) || cur.speed === null) {
        d[0].data[i] = null;
        d[1].data[i] = null;
      }
      d[0].data[i] = [cur.timestamp*1000, d[0].data[i]];
      d[1].data[i] = [cur.timestamp*1000, d[1].data[i]];
    }
    let opts = plot.getXAxes()[0].options;
    opts.panRange = [
      gps.data[0].timestamp*1000,
      gps.data[gps.data.length-1].timestamp*1000
    ];
    
    plot.setData(d);
    plot.setupGrid(); //only necessary if your new data will change the axes or grid
    plot.draw();
    overview.setData(d);
    overview.setupGrid(); //only necessary if your new data will change the axes or grid
    overview.draw();
    
    for(let t of gps.trips) {
      $("#tracks").append(`<li><input type='button' onclick='setZoom(${t.startTime*1000}, ${t.endTime*1000})' value='${timeFormat(t.startTime, "date")} ${t.name} ${(t.distance/1000).toFixed(1)}km'</li>`);
    }
  }
  
  $("#shadow").css("visibility", "visible");
  $("#frame").css("visibility", "visible");
  console.log(id);
  
  let start = gps.trips[id].startTime*1000;
  let end = gps.trips[id].endTime*1000;
  
  setZoom(start,end);
  
  $("#track").click(function () {
    setZoom(start,end);
  });
};
function hide() {
  $(".popup").css("visibility", "hidden");
};
function setZoom(Xmin, Xmax) {
  var opts = plot.getXAxes()[0].options;
  if(Xmax==false) {
    Xmax = +new Date() - 60 * new Date().getTimezoneOffset() * 1000;
  }
  if(Xmin==false) {
    Xmin = d[0].data[0][0];
    overview.clearSelection();
  } else {
    overview.setSelection({ xaxis: { from: Xmin, to: Xmax}});
  }
  opts.min=Xmin;
  opts.max=Xmax;

  plot.setupGrid();
  plot.draw();
  plot.clearSelection();

  return false;
}

function addInfo(bingMapsProvider, viewer, id, data) {
  $('.sidebar').append("<div class='info' id='info_" + id + "'>" + 
    timeFormat(data.timestamp, "short") + "<br>" +
    data.name + "<br><b>" +
    (data.distance/1000).toFixed(1) + " km</b></div>");
    
  $('#info_'+id).click(function() {
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(data.lng, data.lat, data.distance),
      offset: new Cesium.HeadingPitchRange(0, -90, 0)
    });
  });
}