gpstrek - Show flag instead of circle for target

apps/gpstrek/README.md

@@ -10,7 +10,7 @@ Tapping or button to switch to the next information display, swipe right for the
 
 Choose either a route or a waypoint as basis for the display.
 
-After this selection and availability of a GPS fix the compass will show a blue dot for your destination and a green one for possibly available waypoints on the way.
+After this selection and availability of a GPS fix the compass will show a checkered flag for your destination and a green dot for possibly available waypoints on the way.
 Waypoints are shown with name if available and distance to waypoint.
 
 As long as no GPS signal is available the compass shows the heading from the build in magnetometer. When a GPS fix becomes available, the compass display shows the GPS course. This can be differentiated by the display of bubble levels on top and sides of the compass.

apps/gpstrek/app.js

@@ -239,10 +239,16 @@ function getCompassSlice(compassDataSource){
           } else {
             bpos=Math.round(bpos*increment);
           }
+          if (p.color){
             graphics.setColor(p.color);
+          }
+          if (p.icon){
+            graphics.drawImage(p.icon, bpos,y+height-12, {rotate:0,scale:2});
+          } else {
             graphics.fillCircle(bpos,y+height-12,Math.floor(width*0.03));
           }
         }
+      }
       if (compassDataSource.getMarkers){
         for (let m of compassDataSource.getMarkers()){
           g.setColor(m.fillcolor);
@@ -677,6 +683,8 @@ function setClosestWaypoint(route, startindex, progress){
 
 let screen = 1;
 
+const finishIcon = atob("CggB//meZmeZ+Z5n/w==");
+
 const compassSliceData = {
   getCourseType: function(){
     return (state.currentPos && state.currentPos.course) ? "GPS" : "MAG";
@@ -691,10 +699,10 @@ const compassSliceData = {
       points.push({bearing:bearing(state.currentPos, state.route.currentWaypoint), color:"#0f0"});
     }
     if (state.currentPos && state.currentPos.lon && state.route){
-      points.push({bearing:bearing(state.currentPos, getLast(state.route)), color:"#00f"});
+      points.push({bearing:bearing(state.currentPos, getLast(state.route)), icon: finishIcon});
     }
     if (state.currentPos && state.currentPos.lon && state.waypoint){
-      points.push({bearing:bearing(state.currentPos, state.waypoint), color:"#00f"});
+      points.push({bearing:bearing(state.currentPos, state.waypoint), icon: finishIcon});
     }
     return points;
   },