Gif animation prototype

Gemfile

@@ -117,7 +117,7 @@ gem "canonical-rails"
 gem "logstasher"
 
 # Used to generate images for traces
-gem "gd2-ffij"
+gem "gd2-ffij", :git => 'git@github.com:mmd-osm/gd2-ffij.git', :branch => 'animated_gif'
 
 # Used for browser detection
 gem "browser"

Gemfile.lock

@@ -1,3 +1,11 @@
+GIT
+  remote: git@github.com:mmd-osm/gd2-ffij.git
+  revision: c92057a8f699a36b5f6d208db3d11eb3bae185dd
+  branch: animated_gif
+  specs:
+    gd2-ffij (0.3.1)
+      ffi (>= 1.0.0)
+
 GEM
   remote: https://rubygems.org/
   specs:
@@ -173,8 +181,6 @@ GEM
       multipart-post (>= 1.2, < 3)
     ffi (1.10.0)
     fspath (3.1.0)
-    gd2-ffij (0.3.0)
-      ffi (>= 1.0.0)
     geoip (1.6.4)
     globalid (0.4.2)
       activesupport (>= 4.2.0)
@@ -462,7 +468,7 @@ DEPENDENCIES
   factory_bot_rails
   fakefs
   faraday
-  gd2-ffij
+  gd2-ffij!
   geoip
   htmlentities
   http_accept_language (~> 2.0.0)
@@ -512,4 +518,4 @@ DEPENDENCIES
   webmock
 
 BUNDLED WITH
-   1.16.2
+   1.16.6

lib/gpx.rb

@@ -48,24 +48,29 @@ module GPX
     end
 
     def picture(min_lat, min_lon, max_lat, max_lon, _num_points)
-      # frames = 10
+      nframes = 10
       width = 250
       height = 250
+      delay = 50
+
+      ptsper = _num_points / nframes;
+
       proj = OSM::Mercator.new(min_lat, min_lon, max_lat, max_lon, width, height)
 
-      # TODO: create animated gif
-      # https://github.com/openstreetmap/openstreetmap-website/issues/281
-      image = GD2::Image::IndexedColor.new(width, height)
+      frames = Array.new(nframes,  GD2::Image::IndexedColor.new(width, height))
 
-      black = image.palette.allocate(GD2::Color[0, 0, 0])
-      white = image.palette.allocate(GD2::Color[255, 255, 255])
+      (0..nframes - 1).each do |n|
+        frames[n] = GD2::Image::IndexedColor.new(width, height)
+        black = frames[n].palette.allocate(GD2::Color[0, 0, 0])
+        white = frames[n].palette.allocate(GD2::Color[255, 255, 255])
+        grey = frames[n].palette.allocate(GD2::Color[187, 187, 187])
 
-      image.draw do |pen|
+        frames[n].draw do |pen|
           pen.color = white
           pen.rectangle(0, 0, width, height, true)
         end
 
-      image.draw do |pen|
+        frames[n].draw do |pen|
           pen.color = black
           pen.anti_aliasing = true
           pen.dont_blend = false
@@ -75,19 +80,34 @@ module GPX
 
           first = true
 
-        points do |p|
+          points.each_with_index do |p, pt|
             px = proj.x(p.longitude)
             py = proj.y(p.latitude)
 
-          pen.line(px, py, oldpx, oldpy) unless first
+            if ((pt >= (ptsper * n)) && (pt <= (ptsper * (n+1))))
+              pen.thickness=(3)
+              pen.color = black
+            else
+              pen.thickness=(1)
+              pen.color = grey
+            end
 
+            pen.line(px, py, oldpx, oldpy) unless first
               first = false
               oldpy = py
               oldpx = px
           end
         end
+      end
 
-      image.gif
+      res = GD2::AnimatedGif::gif_anim_begin(frames[0])
+      res << GD2::AnimatedGif::gif_anim_add(frames[0], nil, delay)
+      (0..nframes - 1).each do |n|
+        res << GD2::AnimatedGif::gif_anim_add(frames[n], frames[n-1], delay)
+      end
+      res << GD2::AnimatedGif::gif_anim_end()
+
+      res
     end
 
     def icon(min_lat, min_lon, max_lat, max_lon)