totally pro wardrobe image adapter, via konami

This commit is contained in:
Emi Matchu 2011-05-22 16:30:02 -04:00
parent 926f2a5350
commit 6c9ddac8dd
11 changed files with 447 additions and 224 deletions

View file

@ -1,8 +0,0 @@
class AssetImageConversionRequestsController < ApplicationController
def create
@swf_asset = SwfAsset.find params[:swf_asset_id]
@swf_asset.request_image_conversion!
render :nothing => true
end
end

View file

@ -26,8 +26,22 @@ class SwfAssetsController < ApplicationController
json = @swf_assets.map { |a| a.as_json(:parent_id => pet_state_id, :for => 'wardrobe') } json = @swf_assets.map { |a| a.as_json(:parent_id => pet_state_id, :for => 'wardrobe') }
elsif params[:pet_type_id] elsif params[:pet_type_id]
@swf_assets = PetType.find(params[:pet_type_id]).pet_states.emotion_order.first.swf_assets @swf_assets = PetType.find(params[:pet_type_id]).pet_states.emotion_order.first.swf_assets
elsif params[:ids]
@swf_assets = []
if params[:ids][:biology]
@swf_assets += SwfAsset.biology_assets.where(:id => params[:ids][:biology]).all
end
if params[:ids][:object]
@swf_assets += SwfAsset.object_assets.where(:id => params[:ids][:object]).all
end
end
if @swf_assets
@swf_assets = @swf_assets.all unless @swf_assets.is_a? Array
@swf_assets.each(&:request_image_conversion!)
json = @swf_assets unless json
else
json = nil
end end
json ||= @swf_assets ? @swf_assets.all : nil
render :json => json render :json => json
end end

View file

@ -1,8 +1,8 @@
class AssetImageConversionRequest class AssetImageConversionRequest
@queue = :requested_asset_images @queue = :requested_asset_images
def self.perform(asset_id) def self.perform(asset_type, asset_id)
asset = SwfAsset.find asset_id asset = SwfAsset.where(:type => asset_type).find(asset_id)
asset.convert_swf_if_not_converted! asset.convert_swf_if_not_converted!
end end

View file

@ -27,11 +27,10 @@ class SwfAsset < ActiveRecord::Base
def after_swf_conversion(images) def after_swf_conversion(images)
images.each do |size, path| images.each do |size, path|
s3_key = URI.encode("#{self.id}/#{size.join 'x'}.png") key = s3_key(size)
print "Uploading #{key}..."
print "Uploading #{s3_key}..."
IMAGE_BUCKET.put( IMAGE_BUCKET.put(
s3_key, key,
File.open(path), File.open(path),
{}, # meta headers {}, # meta headers
IMAGE_PERMISSION, # permission IMAGE_PERMISSION, # permission
@ -43,6 +42,25 @@ class SwfAsset < ActiveRecord::Base
end end
end end
def s3_key(size)
URI.encode("#{s3_path}/#{size.join 'x'}.png")
end
def s3_path
"#{type}/#{s3_partition_path}#{self.id}"
end
PARTITION_COUNT = 3
PARTITION_DIGITS = 3
PARTITION_ID_LENGTH = PARTITION_COUNT * PARTITION_DIGITS
def s3_partition_path
(id / 10**PARTITION_DIGITS).to_s.rjust(PARTITION_ID_LENGTH, '0').tap do |id_str|
PARTITION_COUNT.times do |n|
id_str.insert(PARTITION_ID_LENGTH - (n * PARTITION_DIGITS), '/')
end
end
end
def convert_swf_if_not_converted! def convert_swf_if_not_converted!
if has_image? if has_image?
false false
@ -58,7 +76,7 @@ class SwfAsset < ActiveRecord::Base
if image_requested? if image_requested?
false false
else else
Resque.enqueue(AssetImageConversionRequest, self.id) Resque.enqueue(AssetImageConversionRequest, self.type, self.id)
self.image_requested = true self.image_requested = true
save! save!
true true
@ -101,12 +119,14 @@ class SwfAsset < ActiveRecord::Base
def as_json(options={}) def as_json(options={})
json = { json = {
:id => id, :id => id,
:type => type,
:depth => depth, :depth => depth,
:body_id => body_id, :body_id => body_id,
:zone_id => zone_id, :zone_id => zone_id,
:zones_restrict => zones_restrict, :zones_restrict => zones_restrict,
:is_body_specific => body_specific?, :is_body_specific => body_specific?,
:has_image => has_image? :has_image => has_image?,
:s3_path => s3_path
} }
if options[:for] == 'wardrobe' if options[:for] == 'wardrobe'
json[:local_path] = local_url json[:local_path] = local_url
@ -179,8 +199,8 @@ class SwfAsset < ActiveRecord::Base
self.body_id = 0 if !self.body_specific? || (!self.new_record? && self.body_id_changed?) self.body_id = 0 if !self.body_specific? || (!self.new_record? && self.body_id_changed?)
end end
after_create do after_commit :on => :create do
Resque.enqueue(AssetImageConversionRequest::OnCreation, self.id) Resque.enqueue(AssetImageConversionRequest::OnCreation, self.type, self.id)
end end
class DownloadError < Exception;end class DownloadError < Exception;end

View file

@ -1,4 +1,5 @@
@import ../shared/jquery.jgrowl @import ../shared/jquery.jgrowl
@import partials/wardrobe
@import icon @import icon
@import star @import star
@ -156,6 +157,16 @@ body.outfits-edit
margin-bottom: 1em margin-bottom: 1em
position: relative position: relative
width: $preview-dimension width: $preview-dimension
&.swf-adapter
#preview-image-container
display: none
&.image-adapter
#preview-swf-container
display: none
#preview-image-container
+wardrobe-image-wrapper
margin: 1em auto
position: relative
#preview-swf-overlay #preview-swf-overlay
+opacity(0) +opacity(0)
background: black background: black
@ -164,6 +175,18 @@ body.outfits-edit
position: absolute position: absolute
top: 0 top: 0
width: 100% width: 100%
#preview-images-pending
background: black
background: rgba(0, 0, 0, 0.75)
bottom: 0
color: white
font-size: 75%
padding: .5em
position: absolute
right: 0
z-index: 1000
&.waiting-on-0
display: none
#preview-sidebar #preview-sidebar
+border-radius(10px) +border-radius(10px)
border: 1px solid $soft-border-color border: 1px solid $soft-border-color

View file

@ -0,0 +1,6 @@
=wardrobe-image-wrapper
img
left: 0
position: absolute
top: 0

View file

@ -35,6 +35,7 @@
#preview-swf-container #preview-swf-container
%p Flash and Javascript (but not Java!) are required to preview outfits. %p Flash and Javascript (but not Java!) are required to preview outfits.
%p If this message stays after the page is done loading, check those first. %p If this message stays after the page is done loading, check those first.
#preview-image-container
#preview-sidebar #preview-sidebar
#outfit-not-found Outfit not found #outfit-not-found Outfit not found
#save-success Outfit successfully saved #save-success Outfit successfully saved

View file

@ -22,9 +22,7 @@ OpenneoImpressItems::Application.routes.draw do |map|
end end
resources :outfits, :only => [:show, :create, :update, :destroy] resources :outfits, :only => [:show, :create, :update, :destroy]
resources :pet_attributes, :only => [:index] resources :pet_attributes, :only => [:index]
resources :swf_assets, :only => [:show] do resources :swf_assets, :only => [:index, :show]
resources :asset_image_conversion_requests, :path => 'conversions', :only => [:create]
end
match '/users/current-user/outfits' => 'outfits#index', :as => :current_user_outfits match '/users/current-user/outfits' => 'outfits#index', :as => :current_user_outfits

View file

@ -25,8 +25,9 @@ var Partial = {}, main_wardrobe,
View = Wardrobe.getStandardView({ View = Wardrobe.getStandardView({
Preview: { Preview: {
swf_url: '/swfs/preview.swf?v=0.12', swf_url: '/swfs/preview.swf?v=0.12',
wrapper: $('#preview'), wrapper: $('#preview-swf'),
placeholder: $('#preview-swf-container') placeholder: $('#preview-swf-container'),
image_container: '#preview-image-container'
} }
}); });
@ -223,18 +224,6 @@ View.Fullscreen = function (wardrobe) {
wardrobe.item_zone_sets.bind('update', fitSoon); wardrobe.item_zone_sets.bind('update', fitSoon);
wardrobe.pet_attributes.bind('update', fitSoon); wardrobe.pet_attributes.bind('update', fitSoon);
fit(); fit();
var Konami=function(){var a={addEvent:function(b,c,d,e){if(b.addEventListener)b.addEventListener(c,d,false);else if(b.attachEvent){b["e"+c+d]=d;b[c+d]=function(){b["e"+c+d](window.event,e)};b.attachEvent("on"+c,b[c+d])}},input:"",pattern:"3838404037393739666513",load:function(b){this.addEvent(document,"keydown",function(c,d){if(d)a=d;a.input+=c?c.keyCode:event.keyCode;if(a.input.indexOf(a.pattern)!=-1){a.code(b);a.input=""}},this);this.iphone.load(b)},code:function(b){window.location=b},iphone:{start_x:0,start_y:0,stop_x:0,stop_y:0,tap:false,capture:false,keys:["UP","UP","DOWN","DOWN","LEFT","RIGHT","LEFT","RIGHT","TAP","TAP","TAP"],code:function(b){a.code(b)},load:function(b){a.addEvent(document,"touchmove",function(c){if(c.touches.length==1&&a.iphone.capture==true){c=c.touches[0];a.iphone.stop_x=c.pageX;a.iphone.stop_y=c.pageY;a.iphone.tap=false;a.iphone.capture=false;a.iphone.check_direction()}});a.addEvent(document,"touchend",function(){a.iphone.tap==true&&a.iphone.check_direction(b)},false);a.addEvent(document,"touchstart",function(c){a.iphone.start_x=c.changedTouches[0].pageX;a.iphone.start_y=c.changedTouches[0].pageY;a.iphone.tap=true;a.iphone.capture=true})},check_direction:function(b){x_magnitude=Math.abs(this.start_x-this.stop_x);y_magnitude=Math.abs(this.start_y-this.stop_y);x=this.start_x-this.stop_x<0?"RIGHT":"LEFT";y=this.start_y-this.stop_y<0?"DOWN":"UP";result=x_magnitude>y_magnitude?x:y;result=this.tap==true?"TAP":result;if(result==this.keys[0])this.keys=this.keys.slice(1,this.keys.length);this.keys.length==0&&this.code(b)}}};return a};
konami = new Konami();
konami.code = function () {
overrideFull = true;
$(document.body).removeClass('fullscreen');
preview_swf.removeAttr('style').css('visibility', 'visible');
preview_el.removeAttr('style');
wardrobe.search.setItemsByQuery(wardrobe.search.request.query, {offset: wardrobe.search.request.offset});
full = false;
}
konami.load();
} }
View.Hash = function (wardrobe) { View.Hash = function (wardrobe) {
@ -825,6 +814,16 @@ View.PetTypeForm = function (wardrobe) {
}); });
} }
View.PreviewAdapterForm = function (wardrobe) {
var preview = wardrobe.views.Preview;
var Konami=function(){var a={addEvent:function(b,c,d,e){if(b.addEventListener)b.addEventListener(c,d,false);else if(b.attachEvent){b["e"+c+d]=d;b[c+d]=function(){b["e"+c+d](window.event,e)};b.attachEvent("on"+c,b[c+d])}},input:"",pattern:"3838404037393739666513",load:function(b){this.addEvent(document,"keydown",function(c,d){if(d)a=d;a.input+=c?c.keyCode:event.keyCode;if(a.input.indexOf(a.pattern)!=-1){a.code(b);a.input=""}},this);this.iphone.load(b)},code:function(b){window.location=b},iphone:{start_x:0,start_y:0,stop_x:0,stop_y:0,tap:false,capture:false,keys:["UP","UP","DOWN","DOWN","LEFT","RIGHT","LEFT","RIGHT","TAP","TAP","TAP"],code:function(b){a.code(b)},load:function(b){a.addEvent(document,"touchmove",function(c){if(c.touches.length==1&&a.iphone.capture==true){c=c.touches[0];a.iphone.stop_x=c.pageX;a.iphone.stop_y=c.pageY;a.iphone.tap=false;a.iphone.capture=false;a.iphone.check_direction()}});a.addEvent(document,"touchend",function(){a.iphone.tap==true&&a.iphone.check_direction(b)},false);a.addEvent(document,"touchstart",function(c){a.iphone.start_x=c.changedTouches[0].pageX;a.iphone.start_y=c.changedTouches[0].pageY;a.iphone.tap=true;a.iphone.capture=true})},check_direction:function(b){x_magnitude=Math.abs(this.start_x-this.stop_x);y_magnitude=Math.abs(this.start_y-this.stop_y);x=this.start_x-this.stop_x<0?"RIGHT":"LEFT";y=this.start_y-this.stop_y<0?"DOWN":"UP";result=x_magnitude>y_magnitude?x:y;result=this.tap==true?"TAP":result;if(result==this.keys[0])this.keys=this.keys.slice(1,this.keys.length);this.keys.length==0&&this.code(b)}}};return a};
konami = new Konami();
konami.code = function () {
preview.toggleAdapter();
}
konami.load();
}
View.Search = function (wardrobe) { View.Search = function (wardrobe) {
var form_selector = '#preview-search-form', form = $(form_selector), var form_selector = '#preview-search-form', form = $(form_selector),
item_set = new Partial.ItemSet(wardrobe, form_selector + ' ul'), item_set = new Partial.ItemSet(wardrobe, form_selector + ' ul'),

View file

@ -76,18 +76,22 @@ function Wardrobe() {
} }
} }
function Asset(data) { function Asset(newData) {
var asset = this; var asset = this;
for(var key in data) { this.imageURL = function (size) {
if(data.hasOwnProperty(key)) { return Wardrobe.IMAGE_CONFIG.base_url + this.s3_path + "/" + size[0] + "x" + size[1] + ".png";
asset[key] = data[key]; }
this.update = function (data) {
for(var key in data) {
if(data.hasOwnProperty(key)) {
asset[key] = data[key];
}
} }
} }
this.requestImageConversion = function () { this.update(newData);
$.post('/swf_assets/' + this.id + '/conversions');
}
} }
function BiologyAsset(data) { function BiologyAsset(data) {
@ -271,7 +275,8 @@ function Wardrobe() {
// note: may contain duplicates - loop through assets, not these, for // note: may contain duplicates - loop through assets, not these, for
// best performance // best performance
var restricted_zones = [], var restricted_zones = [],
restrictors = outfit.worn_items.concat(outfit.pet_state.assets); restrictors = outfit.worn_items;
if(outfit.pet_state) restrictors = restrictors.concat(outfit.pet_state.assets);
$.each(restrictors, function () { $.each(restrictors, function () {
restricted_zones = restricted_zones.concat(this.restricted_zones); restricted_zones = restricted_zones.concat(this.restricted_zones);
}); });
@ -366,8 +371,9 @@ function Wardrobe() {
} }
this.getVisibleAssets = function () { this.getVisibleAssets = function () {
var assets = this.pet_state.assets, restricted_zones = getRestrictedZones(), var assets, restricted_zones = getRestrictedZones(),
visible_assets = []; visible_assets = [];
assets = this.pet_state ? this.pet_state.assets : [];
for(var i = 0; i < outfit.worn_items.length; i++) { for(var i = 0; i < outfit.worn_items.length; i++) {
assets = assets.concat(outfit.worn_items[i].getAssetsFitting(outfit.pet_type)); assets = assets.concat(outfit.worn_items[i].getAssetsFitting(outfit.pet_type));
} }
@ -1114,6 +1120,15 @@ function Wardrobe() {
} }
} }
Wardrobe.IMAGE_CONFIG = {
base_url: "https://s3.amazonaws.com/impress-asset-images/",
sizes: [
[600, 600],
[300, 300],
[150, 150]
]
}
Wardrobe.StandardPreview = { Wardrobe.StandardPreview = {
views_by_swf_id: {} views_by_swf_id: {}
}; };
@ -1163,6 +1178,7 @@ Wardrobe.getStandardView = function (options) {
} }
StandardView.Preview = function (wardrobe) { StandardView.Preview = function (wardrobe) {
var preview = this;
var preview_el = $(options.Preview.wrapper), var preview_el = $(options.Preview.wrapper),
preview_swf_placeholder = $(options.Preview.placeholder); preview_swf_placeholder = $(options.Preview.placeholder);
@ -1171,6 +1187,8 @@ Wardrobe.getStandardView = function (options) {
preview_swf, preview_swf,
update_pending_flash = false; update_pending_flash = false;
preview_el.removeClass('image-adapter').addClass('swf-adapter');
swfobject.embedSWF( swfobject.embedSWF(
options.Preview.swf_url, options.Preview.swf_url,
preview_swf_id, preview_swf_id,
@ -1205,28 +1223,145 @@ Wardrobe.getStandardView = function (options) {
} }
function ImageAdapter() { function ImageAdapter() {
var pendingAssets = {}, pendingAssetIds = [], pendingInterval,
pendingAssetsCount = 0,
pendingMessageEl = $('<span/>', {id: 'preview-images-pending'}),
previewImageContainer = $(options.Preview.image_container);
var ASSET_PING_RATE = 5000;
preview_el.removeClass('swf-adapter').addClass('image-adapter');
pendingMessageEl.appendTo(previewImageContainer);
this.updateAssets = function () { this.updateAssets = function () {
var assets = wardrobe.outfit.getVisibleAssets(), asset; var assets = wardrobe.outfit.getVisibleAssets(), asset,
var imagesPending = 0; availableAssets = [];
pendingAssets = {};
pendingAssetsCount = 0;
clearView();
for(var i in assets) { for(var i in assets) {
if(!assets.hasOwnProperty(i)) continue; if(!assets.hasOwnProperty(i)) continue;
asset = assets[i]; asset = assets[i];
if(!asset.has_image) { if(asset.has_image) {
assets[i].requestImageConversion(); addToView(asset);
imagesPending++; } else {
pendingAssets[asset.id] = asset;
pendingAssetsCount++;
} }
} }
preview_swf_placeholder.text("Waiting on " + imagesPending + " images."); updatePendingStatus();
} }
function addToView(asset) {
$(
'<img/>',
{
css: {
zIndex: asset.depth
},
src: asset.imageURL(bestSize())
}
).appendTo(previewImageContainer);
}
// TODO: choose new best size on window resize
function bestSize() {
var sizes = Wardrobe.IMAGE_CONFIG.sizes,
width = preview_el.width(), height = preview_el.height();
for(var i in sizes) {
if(sizes[i][0] < width && sizes[i][1] < height) return sizes[i];
}
return sizes[sizes.length - 1];
}
function clearView() {
previewImageContainer.children('img').remove();
}
function loadPendingAssets() {
var pendingAssetIds = {
biology: [],
object: []
}, asset;
for(var i in pendingAssets) {
if(pendingAssets.hasOwnProperty(i)) {
pendingAssetIds[pendingAssets[i].type].push(pendingAssets[i].id);
}
}
$.getJSON(
'/swf_assets.json',
{
ids: pendingAssetIds
},
function (assetsData) {
var assetData, asset;
for(var i in assetsData) {
assetData = assetsData[i];
if(assetData.has_image && pendingAssets.hasOwnProperty(assetData.id)) {
asset = pendingAssets[assetData.id];
asset.update(assetData);
delete pendingAssets[assetData.id];
pendingAssetsCount--;
addToView(asset);
}
}
updatePendingStatus();
}
);
}
function updateContainerSize() {
var size = bestSize();
previewImageContainer.css({
height: size[1],
width: size[0]
});
}
function updatePendingInterval() {
if(pendingAssetsCount) {
if(pendingInterval == null) {
pendingInterval = setInterval(loadPendingAssets, ASSET_PING_RATE);
}
} else {
if(pendingInterval != null) {
clearInterval(pendingInterval);
pendingInterval = null;
}
}
}
function updatePendingMessage() {
pendingMessageEl.text("Waiting on " + pendingAssetsCount + " images").
attr("className", "waiting-on-" + pendingAssetsCount);
}
function updatePendingStatus() {
updatePendingInterval();
updatePendingMessage();
}
updateContainerSize();
$(window).resize(updateContainerSize);
} }
//this.adapter = new SWFAdapter(); this.adapter = new SWFAdapter();
this.adapter = new ImageAdapter();
function updateAssets() {
preview.adapter.updateAssets();
}
var updateAssets = $.proxy(this.adapter, 'updateAssets');
wardrobe.outfit.bind('updateWornItems', updateAssets); wardrobe.outfit.bind('updateWornItems', updateAssets);
wardrobe.outfit.bind('updateItemAssets', updateAssets); wardrobe.outfit.bind('updateItemAssets', updateAssets);
wardrobe.outfit.bind('updatePetState', updateAssets); wardrobe.outfit.bind('updatePetState', updateAssets);
this.useSWFAdapter = function () { preview.adapter = new SWFAdapter(); updateAssets(); }
this.useImageAdapter = function () { preview.adapter = new ImageAdapter(); updateAssets(); }
this.toggleAdapter = function () {
var nextAdapter = preview.adapter.constructor == SWFAdapter ? ImageAdapter : SWFAdapter;
preview.adapter = new nextAdapter();
updateAssets();
}
} }
window.previewSWFIsReady = function (id) { window.previewSWFIsReady = function (id) {

File diff suppressed because it is too large Load diff