got map screenshot working decent

Procfile

@@ -0,0 +1,2 @@
+web: bundle exec rails server -p $PORT
+worker: bundle exec sidekiq -c 5 -v

app/assets/javascripts/src/Metamaps.Backbone.js

@@ -72,6 +72,7 @@ Metamaps.Backbone.Map = Backbone.Model.extend({
             topic_count_string: this.get('topic_count')  == 1 ? ' topic' : ' topics',
             synapse_count_number: '<span class="sCountColor">' + this.get('synapse_count') + '</span>',
             synapse_count_string: this.get('synapse_count') == 1 ? ' synapse' : ' synapses',
+            screenshot: '<img src="' + this.get('screenshot_url') + '" />'
         };
         return obj;
     }

app/assets/javascripts/src/Metamaps.JIT.js

@@ -7,7 +7,7 @@ Metamaps.JIT = {
         newSynapse: 'Metamaps:JIT:events:newSynapse', 
         removeSynapse: 'Metamaps:JIT:events:removeSynapse', 
         pan: 'Metamaps:JIT:events:pan',
-        zoom: 'Metamaps:JIT:events:zoom'
+        zoom: 'Metamaps:JIT:events:zoom',
         animationDone: 'Metamaps:JIT:events:animationDone',
     },
     vizData: [], // contains the visualization-compatible graph
@@ -230,7 +230,7 @@ Metamaps.JIT = {
             duration: 800,
             onComplete: function () {
                 Metamaps.Visualize.mGraph.busy = false;
-                $(document).trigger(Metamaps.JIT.events.animationDone, [event]);
+                $(document).trigger(Metamaps.JIT.events.animationDone);
             }
         },
         animateFDLayout: {

app/models/map.rb

@@ -13,8 +13,9 @@ class Map < ActiveRecord::Base
   # This method associates the attribute ":image" with a file attachment
   has_attached_file :screenshot, :styles => {
    :thumb => ['188x126#', :png],
-   :full => ['1880x1260#', :png]
-  }
+   :full => ['940x630#', :png]
+  },
+  :default_url => "/assets/missing-map.png"
     
   # Validate the attached image is image/jpg, image/png, etc
   validates_attachment_content_type :screenshot, :content_type => /\Aimage\/.*\Z/
@@ -64,6 +65,10 @@ class Map < ActiveRecord::Base
     self.contributors.length
   end
 
+  def screenshot_url
+    self.screenshot.url(:thumb)
+  end
+
   def created_at_str
     self.created_at.strftime("%m/%d/%Y")
   end
@@ -73,7 +78,7 @@ class Map < ActiveRecord::Base
   end
 
   def as_json(options={})
-    json = super(:methods =>[:user_name, :user_image, :topic_count, :synapse_count, :contributor_count], :except => [:created_at, :updated_at])
+    json = super(:methods =>[:user_name, :user_image, :topic_count, :synapse_count, :contributor_count, :screenshot_url], :except => [:screenshot_content_type, :screenshot_file_size, :screenshot_file_name, :screenshot_updated_at, :created_at, :updated_at])
     json[:created_at] = self.created_at_str
     json[:updated_at] = self.updated_at_str
     json
@@ -118,4 +123,19 @@ class Map < ActiveRecord::Base
     GrabMapScreenshotWorker.perform_async(self.id)
   end
 
+  def decode_base64(imgBase64)
+    decoded_data = Base64.decode64(imgBase64)
+ 
+    data = StringIO.new(decoded_data)
+    data.class_eval do
+      attr_accessor :content_type, :original_filename
+    end
+
+    data.content_type = "image/png"
+    data.original_filename = File.basename(self.id.to_s + '-' + 'screenshot.png')
+
+    self.screenshot = data
+    self.save
+  end
+
 end

app/views/layouts/_templates.html.erb

@@ -46,8 +46,8 @@
         {{name}}
       </span>  
       <div class="mapScreenshot">
-        <img src="https://dl.dropboxusercontent.com/u/13307147/map%20screengrab%20blur-02.png">
-      </div>                                                           
+        {{{screenshot}}}
+      </div>                                                  
       <div class="scroll">                                                    
         <div class="desc">                                                    
           {{desc}}

app/workers/grab_map_screenshot_worker.rb

@@ -6,12 +6,8 @@ class GrabMapScreenshotWorker
     imgBase64 = ''
     Phantomjs.run('./script/phantomjs-save-screenshot.js', map_id.to_s) { |line|
       imgBase64 << line
-      puts line
     }
-
-    #this doesn't work yet
-    #map = Map.find(map_id)
-    #map.add_attachment(imgBase64)
-    #map.save!
+	map = Map.find(map_id)
+    map.decode_base64(imgBase64)
   end
 end

diff.txt

@@ -1,130 +0,0 @@
-
-
-diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
-index bb0edb6..bb56ab0 100644
---- a/app/assets/stylesheets/application.css
-+++ b/app/assets/stylesheets/application.css
-@@ -74,8 +74,9 @@ body,
- /* forgot password fix */
- 
- .forgotPassword input[type="submit"] {
--    padding: 0 5px;
--    width: auto;
-+    width: 300px;
-+    color: #f5f5f5;
-+    font-family: din-regular;
- }
- html {
- 
-@@ -189,36 +190,55 @@ input[type="submit"]:active {
-     border-radius: 5px;
-     color: black;
-     box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.4);
-+    position:absolute;
-     top: 50%;
-     left:50%;
--    position:absolute;
--    margin-left: -166px;
-+    
- }
-+
- .forgotPassword {
-     height: 134px;
-     margin-top: -83px;
-+    font-family: din-medium;
-+    color:#424242;
-+    text-transform: uppercase;
-+    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.23), 0px 3px 3px rgba(0, 0, 0, 0.16);
-+    font-size: 17px;
-+    margin-left: -166px;
-+
-+}
-+
-+.emailText {
-+    font-family: din-regular;
-+    font-size: 14px;
-+    color:#424242;
-+    padding-top:24px;
-+    padding-bottom: 6px;
-+    text-transform: none;
-+    margin: 0px;
- }
- .centerGreyForm input[type="text"],
- .centerGreyForm input[type="email"],
- .centerGreyForm input[type="password"] {
--    width: 250px;
-+    width: 300px;
-     height: 32px;
-     font-size: 15px;
-     direction: ltr;
-     -webkit-appearance: none;
-     appearance: none;
-     display: inline-block;
--    margin: 0;
--    padding: 0 8px;
-+    margin: 0px 0px 6px 0px;
-+    padding: 10px 0px 0px 9px;
-     background: #fff;
-+    color: #bdbdbd;
-     border: 1px solid #d9d9d9;
-     border-top: 1px solid #c0c0c0;
-     -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-     box-sizing: border-box;
--    -webkit-border-radius: 1px;
--    -moz-border-radius: 1px;
--    border-radius: 1px;
-+    -webkit-border-radius: 2px;
-+    -moz-border-radius: 2px;
-+    border-radius: 2px;
-     font: -webkit-small-control;
-     color: initial;
-     letter-spacing: normal;
-@@ -227,8 +247,10 @@ input[type="submit"]:active {
-     text-indent: 0px;
-     text-shadow: none;
-     display: inline-block;
--    text-align: start;
-+    font: din-medium;
-+    text-align: left;
- }
-+
- .centerGreyForm input[type="text"]:hover,
- .centerGreyForm input[type="email"]:hover,
- .centerGreyForm input[type="password"]:hover {
-@@ -237,7 +259,9 @@ input[type="submit"]:active {
-     -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-     -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-+    color: #424242;
- }
-+
- .new_topic {
-     /* start it off screen while it initializes the spinner, then it will be hidden with jquery */
-     top: -1000px;
-diff --git a/app/views/users/edit.html.erb b/app/views/users/edit.html.erb
-index 738d5c6..70d6de7 100644
---- a/app/views/users/edit.html.erb
-+++ b/app/views/users/edit.html.erb
-@@ -17,4 +17,3 @@
-   <%= form.submit "Update", class: "update" %>
- <% end %>
- </div>
--
-diff --git a/app/views/users/passwords/new.html.erb b/app/views/users/passwords/new.html.erb
-index 88dddb4..3238a81 100644
---- a/app/views/users/passwords/new.html.erb
-+++ b/app/views/users/passwords/new.html.erb
-@@ -6,10 +6,10 @@
-   
-   <h3>FORGOT PASSWORD?</h3>
- 
--  <div><%= f.label :email, "Enter Your Email:" %>
-+  <div><%= f.label :email, "Enter your email:", :class => "emailText" %>
-   <%= f.email_field :email, :autofocus => true %></div>
- 
--  <div><%= f.submit "Send Reset Password Instructions" %></div>
-+  <div><%= f.submit "Send Password Reset Instructions" %></div>
-   
- <% end %>
- </div>

script/phantomjs-save-screenshot.js

@@ -8,9 +8,9 @@ if (args.length <= 1) {
 
 //configurable variables - CHANGE ME
 var mapID = args[1];
-var url = 'http://localhost:3000/maps/' + mapID;
-var width = 188;
-var height = 126;
+var url = 'http://metamaps.herokuapp.com/maps/' + mapID;
+var width = 940;
+var height = 630;
 
 //set up page and the area we'll render as a PNG
 var page = require('webpage').create();
@@ -23,25 +23,28 @@ page.open(url, function (status) {
   if (status === 'success') {
     //since this isn't evaluateAsync, it should also ensure the asynchronous
     //js stuff is loaded too, hopefully?
+
+    page.onCallback = function(data){
+      
+      //pass to ruby
+      console.log(page.renderBase64('PNG'));
+
+      //render to the metamaps_gen002 directory for debug
+      //page.render('map1.png', 'PNG');
+      
+      phantom.exit();
+    };
+
     page.evaluate(function() {
       $(document).on(Metamaps.JIT.events.animationDone, function(){
-        $('.upperLeftUI, .upperRightUI, .mapControls, .infoAndHelp, #barometer_tab').hide();
-        Metamaps.Famous.logo.hide() 
+        $('.upperLeftUI, .upperRightUI, .mapControls, .infoAndHelp, .uv-icon, .footer').hide();
         Metamaps.JIT.zoomExtents();
-        console.log('got here');
+        if (typeof window.callPhantom === 'function') {
+          window.callPhantom();
+        }
       });//document.on animationDone
     });//page.evaluate
-
-    //pass to ruby
-    //console.log(page.renderBase64('PNG'));
-    
-    //render to the metamaps_gen002 directory for debug
-    page.render('map1.png', 'PNG');
-
   } else {
     //failed to load
   }//if
-
-  setTimeout(phantom.exit,5000);
-  //phantom.exit();
 });