Hmmm,
So finally, I am here, with the code that does all the magical asynchronous upload of files. Sure it did take quite some time to get to the exact function, but all this time, the entire solution was staring right into my face !
In my previous blog post, I was exploring the possibility of allowing in YAHOO Mail Beta, the ability to select multiple files in the upload dialog, and uploading them simultaneously. Unable to find out what the "Attach" button exactly does and getting confused by the event handling model, I had decided to directly post to the given URL. That is when I saw that Yahoo Mail seems to use the YUI connection library. Ironically though, the file upload does not happen then.
Call it the result of rest, of non stop playing of Age of Empires, when I looked at the code again today morning, on the brink of giving up, I found how simple it was. The "Attach Button" is not really a button or an image. It is a form input of type file. I did not quite realize that the file upload dialog cannot be actually be invoked using only javascript (need to check this) and requires the user to actually click the button. The nice look was only a style. The button is also inside a form, that actually does the submit. The value of the button is the path of the file, and the target for the frame is some obscure hidden frame. Hence, once the click is captured (after the modal dialog box) , all the button does is automatically submit it.
All I would have to do now is to get the array of files selected for upload, and submit the form, one after another. That should quite do the job, and I can have my greasemonkey script ready !!
Uploading Multiple files to YAHOO Mail Beta
Hi there,
In a previous post, I had explored the possibility of allowing a user to select multiple files for upload in the generic HTML upload box. The technique was a combination of using the Flash FileReference and its interaction with Javascript. Ever since I had blogged on it, I realized that I invariably attach multiple files, and this was a "MUST-HAVE" feature in the Yahoo Mail Beta client that I wrote. This post is a quick architectural discussion on a greasemonkey script that I am planning to write.
The biggest hurdle is that the script in the mail UI is compacted, and without indentation, it was a little difficult to figure out the exact function that uploads the file. This is complicated by the fact that the mail UI is based on events, with the event names changed for obfuscation. A simple trace using firebug did not really get me to the function in the half hour i spent reading the UI. Most of the event passing and stuff seems to reside in this file.
For now, I just think I would go the way of directly posting the content to this URL. The parameters passed include the content type, filename and the content. As this is quite simple to do, I am planning to get this up and running to start with. However, getting to that specific function that actually takes the file name and does the upload would be finer. Just that I would have to keep updating this till YAHOO implements this as a feature.
In a previous post, I had explored the possibility of allowing a user to select multiple files for upload in the generic HTML upload box. The technique was a combination of using the Flash FileReference and its interaction with Javascript. Ever since I had blogged on it, I realized that I invariably attach multiple files, and this was a "MUST-HAVE" feature in the Yahoo Mail Beta client that I wrote. This post is a quick architectural discussion on a greasemonkey script that I am planning to write.
The biggest hurdle is that the script in the mail UI is compacted, and without indentation, it was a little difficult to figure out the exact function that uploads the file. This is complicated by the fact that the mail UI is based on events, with the event names changed for obfuscation. A simple trace using firebug did not really get me to the function in the half hour i spent reading the UI. Most of the event passing and stuff seems to reside in this file.
For now, I just think I would go the way of directly posting the content to this URL. The parameters passed include the content type, filename and the content. As this is quite simple to do, I am planning to get this up and running to start with. However, getting to that specific function that actually takes the file name and does the upload would be finer. Just that I would have to keep updating this till YAHOO implements this as a feature.
Image Resizing - Images from the Server
Hey,
A quick peek at Image Resizing using Flash or HTML canvas shows that it may not yet be feasible to use the technique for actual web sites. Unlike the demo real web sites may not really require changing the picture in real time. The resize could be initiated only when the browser is resized. Hence, I was looking at a more realistic image resizing implementation, having minimal JavaScript code at the client, and not really slowing down the browser by intensive Flash or JavaScript computation.
This approach relies in the image being actually being performed at the server, and the client only fetching the changed image in the background. When the browser is resized, the image is first resized in the native way, and then, the JavaScript code that is triggered, loads the seam-carved image. This approach also had the problem of network latency, and hence I was looking at using YUI Image Loading utility to load the images the background, to reduce the delay between actual resizing and seam based resizing.
A simple central server could host this as a service, reducing the image to the required dimensions. For the demo, due to the unavailability of the server, I precomputed the images for widths 350 to 200, in intervals of 5. The JavaScript in the page first resizes the image to the required width using native image resizing, and then loads the seam resized image. An addition is the use of the YUI image library that tries to pre-load the data for the image in the back ground. It would be great to hear your feedback on the performance for different network latencies.
Please check this link for the demo.
[UPDATE : Having problems with hosting the images. Demo not showing server image. Working to find some other image hosting site]
A quick peek at Image Resizing using Flash or HTML canvas shows that it may not yet be feasible to use the technique for actual web sites. Unlike the demo real web sites may not really require changing the picture in real time. The resize could be initiated only when the browser is resized. Hence, I was looking at a more realistic image resizing implementation, having minimal JavaScript code at the client, and not really slowing down the browser by intensive Flash or JavaScript computation.
This approach relies in the image being actually being performed at the server, and the client only fetching the changed image in the background. When the browser is resized, the image is first resized in the native way, and then, the JavaScript code that is triggered, loads the seam-carved image. This approach also had the problem of network latency, and hence I was looking at using YUI Image Loading utility to load the images the background, to reduce the delay between actual resizing and seam based resizing.
A simple central server could host this as a service, reducing the image to the required dimensions. For the demo, due to the unavailability of the server, I precomputed the images for widths 350 to 200, in intervals of 5. The JavaScript in the page first resizes the image to the required width using native image resizing, and then loads the seam resized image. An addition is the use of the YUI image library that tries to pre-load the data for the image in the back ground. It would be great to hear your feedback on the performance for different network latencies.
Please check this link for the demo.
[UPDATE : Having problems with hosting the images. Demo not showing server image. Working to find some other image hosting site]
Selecting multiple files for upload
Hi,
At most time when I upload stuff, I usually select more than one local file to be uploaded. It gets a little irritating to click the Upload button for each file to be uploaded. The other day, I noticed the way box.net does it and least to say, I got curious. I tried figuring out ways for Javascript / HTML combination to do this, but could not find any appropriate construct that could let me select multiple file in the "File Open" dialog box. Interestingly, not many sites supported this feature of selecting multiple files at the same time.
That is when I started reverse engineering the box.net interface, to discover the intricate synergy of Flash and Javascript doing the magic. Though the page seems to be complete Javascript, a hidden Flash movie is loaded when the upload button is clicked.
A little more experimentation with SWFMill to peek at the flash movie showed the use of the FileReference and the FileReferenceList Object. A simple FileReferenceList.browse() opens up the multi-select file open dialog. After selecting multiple files, the file names are passed to the FileReference Object as an array.
Flash then calls a JavaScript function that appends the <input type='file'> in the DOM. Now that is a pretty neat way of doing it, and I also googled for libraries that allows mix and match of this. This was an interesting library, with a lot more capabilities that I came across.
Interestingly, I looked at the Web Forms 2.0 and discovered that this feature could be easily implemented using the max and min attributes that would be supplied to the input type. However, this is still a working draft, and could take some time till it is pushed into HTML 5. Here is how Web Forms 2.0 map to the HTML versions.
At most time when I upload stuff, I usually select more than one local file to be uploaded. It gets a little irritating to click the Upload button for each file to be uploaded. The other day, I noticed the way box.net does it and least to say, I got curious. I tried figuring out ways for Javascript / HTML combination to do this, but could not find any appropriate construct that could let me select multiple file in the "File Open" dialog box. Interestingly, not many sites supported this feature of selecting multiple files at the same time.
That is when I started reverse engineering the box.net interface, to discover the intricate synergy of Flash and Javascript doing the magic. Though the page seems to be complete Javascript, a hidden Flash movie is loaded when the upload button is clicked.
A little more experimentation with SWFMill to peek at the flash movie showed the use of the FileReference and the FileReferenceList Object. A simple FileReferenceList.browse() opens up the multi-select file open dialog. After selecting multiple files, the file names are passed to the FileReference Object as an array.
Flash then calls a JavaScript function that appends the <input type='file'> in the DOM. Now that is a pretty neat way of doing it, and I also googled for libraries that allows mix and match of this. This was an interesting library, with a lot more capabilities that I came across.
Interestingly, I looked at the Web Forms 2.0 and discovered that this feature could be easily implemented using the max and min attributes that would be supplied to the input type. However, this is still a working draft, and could take some time till it is pushed into HTML 5. Here is how Web Forms 2.0 map to the HTML versions.
Logging out from CardSpace
Hi,
After nearly spending a week to quickly come up with a CardSpace demo, I realized that programming to inter-operate is not a great thing. Apart from broken links and completely non-technical documentation about the standard, I also found thought of some interesting add-ons to the existing windows Identity Selector CardSpace user interface. Coming for a SAML background, I obviously expected CardSpace to offer me Single sign on with logout service.
All investigations till now have not shown me any way in which the UI remembers my credentials for a card, and automatically fills them for me. This basically refers to the user name Password Authentication method. It would be a great addition to CardSpace Identity Selector UI to help me single sign on with cards that I select for different relying parties.
However, even if the feature is implemented, there could be a slight complication. The technical specifications do not indicate the way One Time Passwords (OTPs) to be used. The suggestion is to use them like the user name password profiles, substituting the password with the OTP. If the UI now starts remembering the passwords, the OTPs would definitely fail. Hence, I would love to see a "cache-password" attribute added if one does not already exists.
About the Logout service, I think that SAML 2.0 has taken a great leap by introducing the idea of global logout. WS-Federation followed the suite, but when I encountered, the entire feature is missing. I am still reading the documents again to ascertain if the logout endpoint and the use case are really missing.
To summarize, though Card Space provides a great UI for authentication (more like a password protection module ? ), I would love if they could singly sign me in, and globally log me out like the good old SAML 2.0 days.
For reference, here is the thread of cardpsace.
After nearly spending a week to quickly come up with a CardSpace demo, I realized that programming to inter-operate is not a great thing. Apart from broken links and completely non-technical documentation about the standard, I also found thought of some interesting add-ons to the existing windows Identity Selector CardSpace user interface. Coming for a SAML background, I obviously expected CardSpace to offer me Single sign on with logout service.
All investigations till now have not shown me any way in which the UI remembers my credentials for a card, and automatically fills them for me. This basically refers to the user name Password Authentication method. It would be a great addition to CardSpace Identity Selector UI to help me single sign on with cards that I select for different relying parties.
However, even if the feature is implemented, there could be a slight complication. The technical specifications do not indicate the way One Time Passwords (OTPs) to be used. The suggestion is to use them like the user name password profiles, substituting the password with the OTP. If the UI now starts remembering the passwords, the OTPs would definitely fail. Hence, I would love to see a "cache-password" attribute added if one does not already exists.
About the Logout service, I think that SAML 2.0 has taken a great leap by introducing the idea of global logout. WS-Federation followed the suite, but when I encountered, the entire feature is missing. I am still reading the documents again to ascertain if the logout endpoint and the use case are really missing.
To summarize, though Card Space provides a great UI for authentication (more like a password protection module ? ), I would love if they could singly sign me in, and globally log me out like the good old SAML 2.0 days.
For reference, here is the thread of cardpsace.
Caller IDs for Meebo Me
Hey,
I was experimenting with FeedJIT and a couple of other alternatives on my blog. Initially, they seemed interesting, but I realized that it would be a little more interesting if I could mash them with the meebo me widget on my page.
Most people pinging me on the meebo me widget are anonymous to an extent that I don't even know the country of origin. On the other hand, just below the widget is FeedJIT that shows me not only the country of origin, but also interesting things like referral URL, and leaving time from the page. If I could pass this information along to the meebo me widget, I could know the source a visitor came from, and his location. This is more like a caller ID service, and initial investigations show me that a small scriptlet on my bog should do the job. Thought Meebo Me is in flash, and it would be a pain to send messages via meebo, I was looking at mimicking the behavior of the widget, and doing a direct post via an iFrame. There still are some really weird parameters that I am working on, and am hoping to quickly get a script by the end of the week.
I was experimenting with FeedJIT and a couple of other alternatives on my blog. Initially, they seemed interesting, but I realized that it would be a little more interesting if I could mash them with the meebo me widget on my page.
Most people pinging me on the meebo me widget are anonymous to an extent that I don't even know the country of origin. On the other hand, just below the widget is FeedJIT that shows me not only the country of origin, but also interesting things like referral URL, and leaving time from the page. If I could pass this information along to the meebo me widget, I could know the source a visitor came from, and his location. This is more like a caller ID service, and initial investigations show me that a small scriptlet on my bog should do the job. Thought Meebo Me is in flash, and it would be a pain to send messages via meebo, I was looking at mimicking the behavior of the widget, and doing a direct post via an iFrame. There still are some really weird parameters that I am working on, and am hoping to quickly get a script by the end of the week.
The three line salute to firefox !!
Hey,
I was giving finishing touches to the Seam Carving Demo that I have been working on for quite some time now, when I stumbled on a strange problem. The canvas implementation in Firefox seemed to be very slow and unsuited for image manipulation. The script was taking too long to execute.
At one instant, I did something like canvas.getContext('2d').putImageData(null,0,0). Well, I did not explictly pass the null to putImageData, the imageData that I was passing somehow got corrupted, and hence, a null arguement was passed to putImageData.
Quoting the HTML 5 specifications
The first argument was not a class of type ImageData (it is null), and hence none of the other conditions are satisfied. Hence, by the specifications, a TYPE_MISMATCH_ERR should have been raised. However, all firefox does is crash the browser in my case.
Here is the link to the page that could potentially crash Firefox. I tried googling for this error, but could not find any existing reference to an error as this. For the record, I used Firefox 2.0.0.6 [Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6] on Windows XP.
I was giving finishing touches to the Seam Carving Demo that I have been working on for quite some time now, when I stumbled on a strange problem. The canvas implementation in Firefox seemed to be very slow and unsuited for image manipulation. The script was taking too long to execute.
At one instant, I did something like canvas.getContext('2d').putImageData(null,0,0). Well, I did not explictly pass the null to putImageData, the imageData that I was passing somehow got corrupted, and hence, a null arguement was passed to putImageData.
Quoting the HTML 5 specifications
If the first argument to the method is not an object whose [[Class]] property isImageData, but all of the following conditions are true, then the method must treat the first argument as if it was anImageDataobject (and thus not raise theTYPE_MISMATCH_ERRexception):
- The method's first argument is an object with
widthandheightattributes with integer values and adataattribute whose value is an integer array.- The
ImageDataobject'swidthis greater than zero.- The
ImageDataobject'sheightis greater than zero.- The
ImageDataobject'swidthmultiplied by itsheightmultiplied by 4 is equal to the number of entries in theImageDataobject'sdataarray.- The
ImageDataobject'sdataarray only contains entries that are in the range 0 to 255 inclusive.
The first argument was not a class of type ImageData (it is null), and hence none of the other conditions are satisfied. Hence, by the specifications, a TYPE_MISMATCH_ERR should have been raised. However, all firefox does is crash the browser in my case.
Here is the link to the page that could potentially crash Firefox. I tried googling for this error, but could not find any existing reference to an error as this. For the record, I used Firefox 2.0.0.6 [Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6] on Windows XP.
Applying Web Based Seam Carving for the "REAL" web page
Hey,
The demonstration video of seam carving indicated that images should be considered at par with text on web pages, and should react to resizing just like text, by automatically adjusting to the available width. With many people implementing seam carving, I picked up a couple of implementations and tried to apply this technique to real web pages. Most of the implementations that I found were executables. There was one good flash implementation that could be used in real web pages.
This article (and this label) suggests some alternatives to make seam carving realistic. I have not had time or server space to implement them all, so I just thought of putting down the steps in text, and a crude demo of what I was able to achieve. As I find more time this week, I would try to refine the demo to something more usable.
Firstly, the <IMG> tag does not allow manipulation of an image at a pixel level. Hence, till the browsers come out with native support for re-targeting, web page will have to squeeze in this functionality using the limited JavaScript support available. That leaves us with two alternatives.
All the <IMG> tags on the page could be simply replaced with a Flash object, or the HTML5 canvas element. These are the two tags that allow manipulation of an image at a pixel level. However, I discovered that the entire process of finding the energy function and subsequently, the seam are very costly processes. I tried to implement a Soble Filter in JavaScript to find the edges, but the browser easily gave up. The flash implementation seemed to work fine. Nevertheless, the operations seem to freeze the browser for some time.
Hence, it may be worthwhile to find the seam at the server, and just pass down the data structure that represents the seam to the client.
Now, all the client has to do is to replace the images that have to be resized with an canvas of equal dimensions, the image drawn on it. When the image is resized, the JavaScript kicks in, removing 'n' seams from the image, where n equals to the difference of the original width and the changed width.
I tried this out for a HTML page, but found that the dynamism that was shown the the video seemed a little tough to achieve. The canvas was very jittery, did not refresh when a new image was drawn, and seemed to hang the browser. Also, the sobel filter that I had used for the energy function was not great with many images.
My demo is currently hosted here, and watch out for updates to the demo.
The demonstration video of seam carving indicated that images should be considered at par with text on web pages, and should react to resizing just like text, by automatically adjusting to the available width. With many people implementing seam carving, I picked up a couple of implementations and tried to apply this technique to real web pages. Most of the implementations that I found were executables. There was one good flash implementation that could be used in real web pages.
This article (and this label) suggests some alternatives to make seam carving realistic. I have not had time or server space to implement them all, so I just thought of putting down the steps in text, and a crude demo of what I was able to achieve. As I find more time this week, I would try to refine the demo to something more usable.
Firstly, the <IMG> tag does not allow manipulation of an image at a pixel level. Hence, till the browsers come out with native support for re-targeting, web page will have to squeeze in this functionality using the limited JavaScript support available. That leaves us with two alternatives.
All the <IMG> tags on the page could be simply replaced with a Flash object, or the HTML5 canvas element. These are the two tags that allow manipulation of an image at a pixel level. However, I discovered that the entire process of finding the energy function and subsequently, the seam are very costly processes. I tried to implement a Soble Filter in JavaScript to find the edges, but the browser easily gave up. The flash implementation seemed to work fine. Nevertheless, the operations seem to freeze the browser for some time.
Hence, it may be worthwhile to find the seam at the server, and just pass down the data structure that represents the seam to the client.
Now, all the client has to do is to replace the images that have to be resized with an canvas of equal dimensions, the image drawn on it. When the image is resized, the JavaScript kicks in, removing 'n' seams from the image, where n equals to the difference of the original width and the changed width.
I tried this out for a HTML page, but found that the dynamism that was shown the the video seemed a little tough to achieve. The canvas was very jittery, did not refresh when a new image was drawn, and seemed to hang the browser. Also, the sobel filter that I had used for the energy function was not great with many images.
My demo is currently hosted here, and watch out for updates to the demo.
Seam Carving for the web
Hey,
Since it appeared on the first page of TechCrunch and Digg, seam carving based image resizing seems to have garnered enough attention to trick any coding enthusiast into coming up with an implementation of the algorithm. A little research, and I found a some source code and interesting examples here, here and here.
I got a little curious and started a little exploration. A couple of hours, and I was finally able to get my own version of the filter to find the energy function of the image. A little more coding, and JavaScript seemed to be stretching to its maximum. By the time the sobel filter was complete, the browser started throwing up the "Script taking too long to execute error".
This is where I had to backtrack a little and get some server side that would compute the seams. The only responsibility that JavaScript now holds is to fetch the seams from the server, given an image, and remove the seams.
Here is the workspace
You could use the build.xml with ant to see this in action.
Some enhancements that remain to be done are
Since it appeared on the first page of TechCrunch and Digg, seam carving based image resizing seems to have garnered enough attention to trick any coding enthusiast into coming up with an implementation of the algorithm. A little research, and I found a some source code and interesting examples here, here and here.
I got a little curious and started a little exploration. A couple of hours, and I was finally able to get my own version of the filter to find the energy function of the image. A little more coding, and JavaScript seemed to be stretching to its maximum. By the time the sobel filter was complete, the browser started throwing up the "Script taking too long to execute error".
This is where I had to backtrack a little and get some server side that would compute the seams. The only responsibility that JavaScript now holds is to fetch the seams from the server, given an image, and remove the seams.
Here is the workspace
You could use the build.xml with ant to see this in action.
Some enhancements that remain to be done are
- convert this to a full fledged demo
- extract this to a independent library, so that this can be used unobtrusively in HTML
- horizontal seam
- image expansion