Image Cropping With Rails 3

I was looking at some options for the Image Cropping functionality with Rails 3 and got many great solutions on the net. This Rails Cast is the best place to start if you have the images stored as local. If you have it as s3 storage there are some changes you need to make.

My main haml file has these contents -

#cropperpopup.lpopup.x 
  %a.ccloser 
  %p.large Image Cropper 
  .cropper 
    = image_tag @user.avatar.url(:medium), :id => :cropbox 
  = form_for @user, :html => {:class => 'edit_user_two'} do |f| 
    - for attrbt in [:crop_x, :crop_y, :crop_w, :crop_h] 
      = f.text_field attrbt, :id => attrbt, :class => :coordinate 
    = f.submit 'Crop'

When on calls the popup, one should call the code for the Jcrop method

$('img#cropbox').Jcrop({ 
  onChange: update_crop, 
  onSelect: update_crop, 
  setSelect: [0, 0, 168, 202], 
  aspectRatio: (168/202) });

My aspect ratio setting is with respect to the configurations I did for the has_attached_file :avatar.

The thing you will have to do specifically for s3 is in the avatar_geometry method.


def cropping? 
  !crop_x.blank? && !crop_y.blank? && !crop_w.blank? && !crop_h.blank? 
end 

def avatar_geometry(style = :medium) 
  @geometry ||= {} 
  path = (avatar.options[:storage]==:s3) ? avatar.url(style).split(' ').join('%20') : avatar.path(style) 
  @geometry[style] ||= Paperclip::Geometry.from_file(path) 
end

Inside the model.

I'm having issues with the cropper processor and its not cropping fine. Will have to fix that. This is the Cropper

module Paperclip 
  class Cropper < Thumbnail 
    def transformation_command 
     if crop_command 
       r = super 
       if r.class == Array 
         r = r.join(' ') 
       end 
       crop_command + r.sub(/ -crop \S+/, '').sub(/-resize \S+/, '') 
     else 
       super 
     end 
   end 
   def crop_command 
     target = @attachment.instance 
     if target.cropping? 
       "-resize \"168x202\" -crop #{target.crop_w}x#{target.crop_h}+#{target.crop_x}+#{target.crop_y} " 
     end 
    end 
  end 
end

Orientation changes for iPad - Secha & PhoneGap

I was working on a mobile application developed for iPhone. The application was built using Sencha Touch and PhoneGap. Its great what these guys have done to bridge the gap between Objective C and HTML/JavaScript/CSS. The application now wants to be run on iPad.

The orientation was something that caused a problem here. The call back for the orientation, onorientationchange, was not being called for some reason. I went through most of the content in the web which described the problem. Solutions were limited.

I tried putting window.onorientationchange, added event listeners for orientation and even added Objective C code ! Did not work ...

Thats when onWindowResize came into picture. The code started working. But just once. You change orientation and that works just once. The code goes something like :

var or = function(){ 
    // alert( Ext.getOrientation()); 
    var width = (Ext.getOrientation()=="landscape") ? window.innerWidth-1 : window.innerWidth; 
    panel.setOrientation( Ext.getOrientation() , width , window.innerHeight ); 
    panel.el.parent().setSize(width, window.innerHeight); 
    // return 0; 
    panel.doComponentLayout(); 
} 
Ext.EventManager.onWindowResize(or);

The alert function caused a lot of issues for me. Firstly it creates an exception on the Objective C side. Signal Exception of some kind which says arguments are expected of a different kind. The setOrientation call is necessary for the panel to know the orientation. This did not update the width and height of the panel for some odd reason. So I did it manually by calling the setSize and to make sure I called the doComponentLayout.

Well, the code works now. This is for reference for all those people who have not still got the answers for this question.

Kudos !

Rails Again

I started digging into Rails again. The stuff I started to do was quite straight forward. The DB access, change routes etc. But the things I want to talk about was Haml and Coffeescript.

Haml :
Wow ! Just Wow !
I always wanted a templating engine which I could use to write easy code. Writing HTML was never so fun. The syntax might seem to be complex but trust me it gets to be fun. 

Just add a
config.generators do |g|
      g.template_engine :haml
end
in application.rb after adding the haml gem and the haml-rails gem.

Coffeescript :
This is an intermediate compiler which converts a file into javascript. Eliminate your braces and semicolons with coffeescript. The compiled output is readable and pretty-printed, passes through JavaScript Lint without warnings, will work in every JavaScript implementation, and tends to run as fast or faster than the equivalent handwritten JavaScript.

You will have to install barista, bisttro_car, coffeescript and coffeescript-script gems. I found an article which would be useful here.

Have Fun coding !

Oatmeal

The oatmeal has been one of the best sites for satirical humour. Just pasting one of their comics :)

Exciting but anxious

Its been some days since my wedding. Those moments where is some sense anxious. Some times one just feels if something went wrong. My being somewhat of a pessimist, had these kind of thoughts very frequently. The engagement, which happened long back, was pretty easy and I had a good time. People commented on me being too easy and laughing a lot. Therefore I decided to act matured. Dont like it, but still. Acting childish makes it easy being young at heart.

I smiled less during the wedding. The pics told it all. :)

I sweated like a pig, but the ceremony went fine. No hassles. No confusion. Everyone seemed to have a blast, even though the travel from my house to the temple was a long one.

After that started the visits to the relatives. Short ones except for Govindan's house. A dear friend, I felt it necessary for her to know the people who stayed there. Reshma's relatives were also visited.

Then it was off to Shimla. 10 hours of travel from Delhi to Shimla was tiresome, even if it were in a Swift Dezire. Shimla was not as cold as we expected. But the hotel stay was excellent. Great people at the Woodville Palace and excellent food.

More tours yet to come

Bangalore Superfast Express timings changed ??

"  Train services partially cancelled
STAFF REPORTERSHARE  ·   PRINT   ·   T+ 
The following trains will be regulated/partially cancelled for 12 days from Monday. However, the trains will run on Wednesdays. This has been necessitated due to hoisting of girders for the superstructure of a railway overpass between Devaragudda and Byadagi stations, a release said.
Accordingly, the Hubli-Bangalore City Passenger (train no. 56516) will leave Hubli at 8.45 a.m. instead of 7.15 a.m. Bangalore City-Hubli Passenger (56911) will terminate at Harihar and be partially cancelled between Harihar and Hubli. Arsikere-Hubli Passenger (56273) will be regulated at Ranebennur from 9.25 a.m. to 10.50 a.m.
Change in serviceErnakulam-Bangalore City Bi-weekly Superfast Express (train no. 12863) will leave Ernakulam on Wednesdays and Mondays instead of Wednesdays and Sundays with effect from July 20.
In the return direction, Bangalore City-Ernakulam Bi-weekly Superfast Express (train no. 12864) will leave Bangalore on Thursdays and Tuesdays instead of Thursdays and Mondays with effect from July 21."

Excerpt from the Hindu

What do I do so that this is taken off ???

Anybody agrees and knows what to do ?

Web access in Vajra

I was back from Delhi after visiting some of my old friends. I was sitting on the Vajra bus from the airport. These Vajra buses have these touch screen powered by Android which could be used by the passengers to play games and browse. To browse you are required to enter your mobile details. The gateway sends an sms with a code which is to be entered to the system which will then allow you to browse.

There should be a workaround !

I noticed these advertisements which scrolled at the bottom. Clicking on them opened a page on a browser. The WiFi was on allowing me to see the page. Unfortunately, the address bar was disabled from typing. Hmm .. The advertisement for Bharat Matrimony had a link to Facebook !! Hurray !! I logged in Facebook and checked out the messages and statuses :)

Could there be another hack perhaps ?

The system had the Application Monitor / Quitter installed. Touching on it opened the interface where one could selectively stop applications running in the system. There was also the application's own advertisement system which popped a small ad at the bottom every now and then. Clicking on that opened the actual browser. Only now the address bar was editable.

Eureka !

World Cup Calendar

Delegation Drag

Its been some time since I have written something and its simply because there is not much to write about. But now I have something :P

The application that I'm working on currently use a lot of drag and drop features for many objects. The number of these objects in the UI varies from user to user. The code has been written to create a DragDrop object for each of these UI elements. Therefore if you were supposed to have many elements, the page would stall thus making actions damn slow. I was told to improve performance by changing this to a delegation model.

The delegation model would find the event attachments done to the main container and not the individual elements. The event would bubble up to the container which would be handled by the handler written for this. The container would be specified as well as the css selector for the elements which would have the drag and drop feature.

To make this work was pretty easy with YUI3. A delegation class was present which gave me the initial stuff to get started. But then came problems.

The application would have different drop targets at different points of time. An ajax action would change the UI which would then have different drop targets. Now if you were using delegation, you need to specify the drop objects in the constructor. I did not find a way where I could add/remove drop targets dynamically. This is when I saw a post from an author who did a work around for this. He had created the drop targets inside the mouseover action of the drag, thus scoping it :). I put these drop objects inside a scoped variable so that when the UI changed, I reset this variable.


YUI().use('dd-delegate', 'dd-constrain', 'dd-proxy', 'dd-drop', function(Y) {

var del = new Y.DD.Delegate({
container: '#container1',
nodes: '.appt',
target: true,
dragConfig: { groups: ['default']}
});

del.dd.plug(Y.Plugin.DDConstrained, {
constrain2node: '#container1'
});

del.dd.plug(Y.Plugin.DDProxy, {
moveOnEnd: false,
cloneNode: false
});

del.on('drag:mouseDown', function(e){
if(_self.createdDrops.length ==0){
var drops = Y.all('td.day');
Y.each(drops, function(v, k) {
var tar = new Y.DD.Drop({
node: v,
groups: ['default']
});
_self.createdDrops.push(tar);
});
}
});

del.on('drag:start', function(e) {
_self.delDragStart(e, Y);
});

del.on('drag:end', function(e) {
_self.delDragStop(e);
});

del.on('drag:drophit', function(e) {
_self.delDragHit(e,Y);
});

del.on('drag:over', function(e){
_self.delDragOver(e);
});

del.on('drag:exit', function(e){
_self.delDragExit(e);
});

_self.del = del;
});


I also required there be different drag objects. Those which went to specific drop targets. I started specifying the 'container' parameter instead of the 'cont' parameter and that solved some issues. To have another set of delegates, I just took the above code and changed the 'container' parameter to get the correct set of draggables. I also change the groups parameter bit that did not seem to make a difference ...

References
http://yuilibrary.com/forum/viewtopic.php?p=17845
http://developer.yahoo.com/yui/3/dd/
http://developer.yahoo.com/yui/3/examples/dd/