totally pro wardrobe image adapter, via konami

app/controllers/asset_image_conversion_requests_controller.rb

@@ -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
-

app/controllers/swf_assets_controller.rb

@@ -26,8 +26,22 @@ class SwfAssetsController < ApplicationController
       json = @swf_assets.map { |a| a.as_json(:parent_id => pet_state_id, :for => 'wardrobe') }
     elsif params[:pet_type_id]
       @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
-    json ||= @swf_assets ? @swf_assets.all : nil
     render :json => json
   end
 

app/models/asset_image_conversion_request.rb

@@ -1,8 +1,8 @@
 class AssetImageConversionRequest
   @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!
   end
 

app/models/swf_asset.rb

@@ -27,11 +27,10 @@ class SwfAsset < ActiveRecord::Base
 
   def after_swf_conversion(images)
     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(
-        s3_key,
+        key,
         File.open(path),
         {}, # meta headers
         IMAGE_PERMISSION, # permission
@@ -43,6 +42,25 @@ class SwfAsset < ActiveRecord::Base
     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!
     if has_image?
       false
@@ -58,7 +76,7 @@ class SwfAsset < ActiveRecord::Base
     if image_requested?
       false
     else
-      Resque.enqueue(AssetImageConversionRequest, self.id)
+      Resque.enqueue(AssetImageConversionRequest, self.type, self.id)
       self.image_requested = true
       save!
       true
@@ -101,12 +119,14 @@ class SwfAsset < ActiveRecord::Base
   def as_json(options={})
     json = {
       :id => id,
+      :type => type,
       :depth => depth,
       :body_id => body_id,
       :zone_id => zone_id,
       :zones_restrict => zones_restrict,
       :is_body_specific => body_specific?,
-      :has_image => has_image?
+      :has_image => has_image?,
+      :s3_path => s3_path
     }
     if options[:for] == 'wardrobe'
       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?)
   end
 
-  after_create do
+  after_commit :on => :create do
-    Resque.enqueue(AssetImageConversionRequest::OnCreation, self.id)
+    Resque.enqueue(AssetImageConversionRequest::OnCreation, self.type, self.id)
   end
 
   class DownloadError < Exception;end

app/stylesheets/outfits/_edit.sass

@@ -1,4 +1,5 @@
 @import ../shared/jquery.jgrowl
+@import partials/wardrobe
 
 @import icon
 @import star
@@ -156,6 +157,16 @@ body.outfits-edit
     margin-bottom: 1em
     position: relative
     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
     +opacity(0)
     background: black
@@ -164,6 +175,18 @@ body.outfits-edit
     position: absolute
     top: 0
     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
     +border-radius(10px)
     border: 1px solid $soft-border-color

app/stylesheets/partials/_wardrobe.sass

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

app/views/outfits/edit.html.haml

@@ -35,6 +35,7 @@
       #preview-swf-container
         %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.
+      #preview-image-container
     #preview-sidebar
       #outfit-not-found Outfit not found
       #save-success Outfit successfully saved

config/routes.rb

@@ -22,9 +22,7 @@ OpenneoImpressItems::Application.routes.draw do |map|
   end
   resources :outfits, :only => [:show, :create, :update, :destroy]
   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
 

public/javascripts/outfits/edit.js

@@ -25,8 +25,9 @@ var Partial = {}, main_wardrobe,
   View = Wardrobe.getStandardView({
     Preview: {
       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.pet_attributes.bind('update', fitSoon);
   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) {
@@ -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) {
   var form_selector = '#preview-search-form', form = $(form_selector),
     item_set = new Partial.ItemSet(wardrobe, form_selector + ' ul'),

public/javascripts/wardrobe.js

@@ -76,18 +76,22 @@ function Wardrobe() {
     }
   }
 
-  function Asset(data) {
+  function Asset(newData) {
     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) {
@@ -271,7 +275,8 @@ function Wardrobe() {
       // note: may contain duplicates - loop through assets, not these, for
       // best performance
       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 () {
         restricted_zones = restricted_zones.concat(this.restricted_zones);
       });
@@ -366,8 +371,9 @@ function Wardrobe() {
     }
 
     this.getVisibleAssets = function () {
-      var assets = this.pet_state.assets, restricted_zones = getRestrictedZones(),
+      var assets, restricted_zones = getRestrictedZones(),
         visible_assets = [];
+      assets = this.pet_state ? this.pet_state.assets : [];
       for(var i = 0; i < outfit.worn_items.length; i++) {
         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 = {
   views_by_swf_id: {}
 };
@@ -1163,6 +1178,7 @@ Wardrobe.getStandardView = function (options) {
   }
 
   StandardView.Preview = function (wardrobe) {
+    var preview = this;
     var preview_el = $(options.Preview.wrapper),
       preview_swf_placeholder = $(options.Preview.placeholder);
 
@@ -1171,6 +1187,8 @@ Wardrobe.getStandardView = function (options) {
         preview_swf,
         update_pending_flash = false;
 
+      preview_el.removeClass('image-adapter').addClass('swf-adapter');
+
       swfobject.embedSWF(
         options.Preview.swf_url,
         preview_swf_id,
@@ -1205,28 +1223,145 @@ Wardrobe.getStandardView = function (options) {
     }
 
     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 () {
-        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) {
           if(!assets.hasOwnProperty(i)) continue;
           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('updateItemAssets', 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) {