Skip to content

Ah/headshots #96

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nnouns wants to merge 3 commits into
base: development
Choose a base branch
from
Open

Ah/headshots #96

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
199b053
added avatar_remote_url method and wrote temp avatar scrape task
nnouns Apr 25, 2017
a6873c8
modified scrape_player_avatars task to use threading
nnouns Apr 25, 2017
2044220
added zoom functionality
nnouns May 17, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions app/assets/stylesheets/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
#container {
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
margin: auto;
height: 90vh;
width: 90vw;
}

#get_club_name {
Expand Down
9 changes: 9 additions & 0 deletions app/models/player.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,4 +38,13 @@ def strip_nationality
self.save
end
end

# avatar methods
def avatar_remote_url=(url_value)
if url_value.present?
self.avatar = URI.parse(url_value)
@avatar_remote_url = url_value
end
end

end
267 changes: 231 additions & 36 deletions app/views/landings/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,47 +2,242 @@
<head>
<%= stylesheet_link_tag 'application' %>

<div id="container">
<%= select("get", "club_name", Club.all.collect {|p| [ p.name ] }, {include_blank: 'Select club:'}) %>
<div id="container" style="">
</div>

<%= select("get", "club_name", Club.all.collect {|p| [ p.name ] }, {include_blank: 'Select club:'}) %>
<script>
var map = new Datamap({
scope: 'world',
element: document.getElementById('container'),
projection: 'mercator',
height: null,
width: null,
responsive: true,
fills: {
defaultFill: '#C4C4C4',
playerFill: '#38003c'
},
geographyConfig:{
hideAntarctica: null,
highlightFillColor: '#e90052',
popupTemplate: function(geography,data){
return '<div class="country_info" id="country_info">' + geography.properties.name + '</strong></div>';
}
},
bubblesConfig: {
borderWidth: 0,
popupTemplate: function(geography,data){

// catches players with place_of_birth stripped
if (data.place_of_birth === "") {
data.place_of_birth = "No information";
};

return '<div class="player_info" id="player_info"><strong>' + data.name + '</strong><br><i>' + data.place_of_birth + '</i></div>';
},
highlightFillColor: '#e90052'
function Zoom(args) {
$.extend(this, {
$buttons: $(".zoom-button"),
$info: $("#zoom-info"),
scale: { max: 50, currentShift: 0 },
$container: args.$container,
datamap: args.datamap
});

this.init();
}

Zoom.prototype.init = function() {
var paths = this.datamap.svg.selectAll("path"),
subunits = this.datamap.svg.selectAll(".datamaps-subunit");

// preserve stroke thickness
paths.style("vector-effect", "non-scaling-stroke");

// disable click on drag end
subunits.call(
d3.behavior.drag().on("dragend", function() {
d3.event.sourceEvent.stopPropagation();
})
);

this.scale.set = this._getScalesArray();
this.d3Zoom = d3.behavior.zoom().scaleExtent([ 1, this.scale.max ]);

this._displayPercentage(1);
this.listen();
};

Zoom.prototype.listen = function() {
this.$buttons.off("click").on("click", this._handleClick.bind(this));

this.datamap.svg
.call(this.d3Zoom.on("zoom", this._handleScroll.bind(this)))
.on("dblclick.zoom", null); // disable zoom on double-click
};

Zoom.prototype.reset = function() {
this._shift("reset");
};

Zoom.prototype._handleScroll = function() {
var translate = d3.event.translate,
scale = d3.event.scale,
limited = this._bound(translate, scale);

this.scrolled = true;

this._update(limited.translate, limited.scale);
};

Zoom.prototype._handleClick = function(event) {
var direction = $(event.target).data("zoom");

this._shift(direction);
};

Zoom.prototype._shift = function(direction) {
var center = [ this.$container.width() / 2, this.$container.height() / 2 ],
translate = this.d3Zoom.translate(), translate0 = [], l = [],
view = {
x: translate[0],
y: translate[1],
k: this.d3Zoom.scale()
}, bounded;

translate0 = [
(center[0] - view.x) / view.k,
(center[1] - view.y) / view.k
];

if (direction == "reset") {
view.k = 1;
this.scrolled = true;
} else {
view.k = this._getNextScale(direction);
}

l = [ translate0[0] * view.k + view.x, translate0[1] * view.k + view.y ];

view.x += center[0] - l[0];
view.y += center[1] - l[1];

bounded = this._bound([ view.x, view.y ], view.k);

this._animate(bounded.translate, bounded.scale);
};

Zoom.prototype._bound = function(translate, scale) {
var width = this.$container.width(),
height = this.$container.height();

translate[0] = Math.min(
(width / height) * (scale - 1),
Math.max( width * (1 - scale), translate[0] )
);

translate[1] = Math.min(0, Math.max(height * (1 - scale), translate[1]));

return { translate: translate, scale: scale };
};

Zoom.prototype._update = function(translate, scale) {
this.d3Zoom
.translate(translate)
.scale(scale);

this.datamap.svg.selectAll("g")
.attr("transform", "translate(" + translate + ")scale(" + scale + ")");

this._displayPercentage(scale);
};

Zoom.prototype._animate = function(translate, scale) {
var _this = this,
d3Zoom = this.d3Zoom;

d3.transition().duration(350).tween("zoom", function() {
var iTranslate = d3.interpolate(d3Zoom.translate(), translate),
iScale = d3.interpolate(d3Zoom.scale(), scale);

return function(t) {
_this._update(iTranslate(t), iScale(t));
};
});
};

Zoom.prototype._displayPercentage = function(scale) {
var value;

value = Math.round(Math.log(scale) / Math.log(this.scale.max) * 100);
this.$info.text(value + "%");
};

Zoom.prototype._getScalesArray = function() {
var array = [],
scaleMaxLog = Math.log(this.scale.max);

for (var i = 0; i <= 10; i++) {
array.push(Math.pow(Math.E, 0.1 * i * scaleMaxLog));
}

return array;
};

Zoom.prototype._getNextScale = function(direction) {
var scaleSet = this.scale.set,
currentScale = this.d3Zoom.scale(),
lastShift = scaleSet.length - 1,
shift, temp = [];

if (this.scrolled) {

for (shift = 0; shift <= lastShift; shift++) {
temp.push(Math.abs(scaleSet[shift] - currentScale));
}

shift = temp.indexOf(Math.min.apply(null, temp));

if (currentScale >= scaleSet[shift] && shift < lastShift) {
shift++;
}

if (direction == "out" && shift > 0) {
shift--;
}

this.scrolled = false;

} else {

shift = this.scale.currentShift;

if (direction == "out") {
shift > 0 && shift--;
} else {
shift < lastShift && shift++;
}
}

this.scale.currentShift = shift;

return scaleSet[shift];
};

function Datamap() {
this.$container = $("#container");
this.instance = new Datamaps({
scope: 'world',
element: this.$container.get(0),
projection: 'mercator',
fills: {
defaultFill: '#C4C4C4',
playerFill: '#38003c'
},
geographyConfig:{
hideAntarctica: null,
highlightFillColor: '#e90052',
popupTemplate: function(geography,data){
return '<div class="country_info" id="country_info">' + geography.properties.name + '</strong></div>';
}
},
bubblesConfig: {
borderWidth: 0,
popupTemplate: function(geography,data){

// catches players with place_of_birth stripped
if (data.place_of_birth === "") {
data.place_of_birth = "No information";
};

return '<div class="player_info" id="player_info"><strong>' + data.name + '</strong><br><i>' + data.place_of_birth + '</i></div>';
},
highlightFillColor: '#e90052'
},
done: this._handleMapReady.bind(this)
});
}

Datamap.prototype._handleMapReady = function(datamap) {
this.zoom = new Zoom({
$container: this.$container,
datamap: datamap
});
}
})

$(window).on('resize', function() {
map.resize();
});
var map = new Datamap().instance;

</script>
</head>
Expand Down
55 changes: 55 additions & 0 deletions lib/tasks/scrape_player_avatars.rake
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
# scrapes all players in database... arguments coming soon

namespace :app do
task :scrape_player_avatars => :environment do
require 'nokogiri'
require 'open-uri'
require 'thread'
require 'resolv'
require 'resolv-replace'

url_base = 'http://www.transfermarkt.com'

club_players = Player.all

start = Time.now

puts "Number of avatars to update: " + club_players.count.to_s

work_q = Queue.new
club_players.each {|player| work_q << player}

i = 0
workers = (0..4).map do
Thread.new do
begin
while player = work_q.pop(true)
begin
doc = Nokogiri::HTML(open(url_base + player.profile_link))

avatar_url = doc.at_css('.dataBild>img').attributes["src"].value
avatar_url.prepend("http:")

player.avatar_remote_url=(avatar_url)
player.save!

print "\rNumber of players birthplaces updated: #{i + 1}"
i = i+1

rescue => e
puts "problem at #{profile_url}"
puts e.inspect
end

end
rescue ThreadError
end
end
end
workers.map(&:join)

finish = Time.now

puts "\nIt took #{finish - start} seconds to get all player avatars"
end
end