64 Bytes

just a few characters short of a code base.

Making a “zoom to image” double click with Seadragon AJAX. (Part 1-The Problem)

clock December 21, 2008 04:05 by author josh

   Recently Microsoft released its deep zoom technology implemented in JavaScript using Ajax.  Using the Deep Zoom Composer I made a quick composition with it to test it out.  Part of this was random curiosity and part was because I was actually looking for something like this to build a High Res photo album.

   While things are very intuitive as you could click to zoom in, use your scroll wheel to zoom in or out, pan with a mouse drag etc.. A feature that seemed very obvious (especially for photo albums) was some kind of “Zoom to fit” feature.   My thought was, if I double click on  specific picture in my gallery then I want to zoom that image to fit the screen..  Double click again should zoom me back out.

While this idea seems simple there are actually a few challenges that must be dealt with Like:

  • Event wiring isn’t obvious at first (thank you Aseem Kishore at MS for pointing me in the right direction)
  • Seadragon doesn’t know there are multiple images. All it does is manage zooming and scrolling on a large canvas. 
  • There are event collisions due to single clicks firing with double clicks.
Before we dive into all of the issues let’s take a look at what we want things to look like when we are done.. The below example will allow you to do all the normal Sea dragon things (single click zoom, scroll zoom, pan, full screen, etc) and  it will let you zoom to fit any photo by double clicking on it.. And you can Zoom back out by double clicking again.


Now that we know the problem and we see how the solution works let’s talk about how we got here. Basically there are 4 steps..
  1. Compose a deep zoom composition and export it to Seadragon Ajax & update the export to use the current Seadragon API.
  2. Override Seadragon’s Mouse events in JavaScript
  3. Map all of the images using Seadragon’s coordinate system
  4. Build a way to detect and manage double clicks.
So in the next post  I’ll take you thru getting all setup and having a sample composition ready and running locally in your own web browser.



www.delphiquery.com - Because everyone should write at least one "toy" app :-)

clock November 24, 2008 05:10 by author josh

I'm pleased to announce this "toy" app a friend and I wrote.. www.delphiquery.com. The app is pretty strait forward. A person asks a question and its voted on for a few minutes. The results are then emailed back to them once the poll closes (currently 5 ~ 10 minutes).  

The REAL reason we wrote this little app was to play with MVC and LINQ to SQL. I have to say the experience was very pleasent.. the Jquery ajax calls worked easy to build, and it was so VERY nice to actually know my client IDs inside my HTML . Also With a little bit of routing voodoo we got it to do some interesting things routing wise for having all of our controller actions ALSO available via JSON or XML as API calls.

I'll post more about the whole Actions as API techniques later. But for now.. Here it is, as silly as they come.. 



ASP.NET Web services + AJAX + prototype.js

clock May 10, 2007 17:50 by author josh
So doing some reading on ASP.NET Webservices and ASP.NET AJAX's ScriptManager Tag, I realized ASP.NET Webservices can handle SOAP or JSON  if you set them up right. So below is what I have figured out. And my thoughts on the whole experience.

First off, you need to have ASP.NET AJAXs installed. Now make a refrence to System.Web.Extentions. Once that is done you can get to the meat of it.

Start off by making a quick change to your web.config so it can support passing .asmx requests to a script handler.

using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services; 


/// 
/// Summary description for WebService
/// 
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class WebService : System.Web.Services.WebService { 

    public WebService () { 

        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    } 

    [WebMethod]
    public string HelloWorld(string echoField) {
        return echoField;
    }
    
} 

Now its time to play with your HTML. Now I am on this kick of trying to write 100% HTML clients, so I won't be using the scriptmanager tag (that would be too easy).. But if I were to use the scriptmanager tag then all I would need to do is write one line of javascript to call the above webservice. As such my script would look something like this (so that it can handle processing the request)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
        function testCall()
        {
            debugger;
            WebService.HelloWorld("test message",completeTest,errorTest);
        }
        function completeTest(val)
        {
            alert(val);
        }
        function errorTest(error)
        {
            alert(error.get_message());
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
        <asp:ServiceReference Path="Services/WebService.asmx" />
        </Services>
        </asp:ScriptManager>
        <div>
          <button onclick="testCall()">test</button>
        </div>
    </form>
</body>
</html> 

But like I said before I wasn't going to USE microsofts framework on the client. if I did the page would be ASP.NET not 100% Html :-P.. So this is what I did. first off I have to choose a AJAXs API, in this case I used Prototype.js but I like YUI and could have used it :-).. Once I have added my API to my page I would call my JSON webservice and it too is only one line (although not as pretty as Microsofts provides. As such it looks something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" src="scripts/prototype.js"></script>
    
    <script type="text/javascript">
    function testCall()
    {
        new Ajax.Request('Services/WebService.asmx/HelloWorld',
                {   postBody:"{echoField:'test message'}",
                    method: 'post', contentType:'application/json; charset=utf-8',
                    onSuccess: completeTest,
                    onFailure: errorTest});
    }
    function completeTest(val)
    {
          alert(val.responseText);
    }
    function errorTest(error)
    {
        var val = error.responseText;
        alert(val);
    }
    </script>
    
    
</head>
<body>
    <div>
          <button onclick="testCall()">test</button>
        </div>
</body>
</html>

Although I could use the ASP.NET AJAX provided javascript API and it works great, I'm having more fun making it work with prototype. Plus this is a proof of concenpt, which means you can find the smallest lightest JSON communication layer you want and use that (jquery is only 50k uncompressed and should work fine).. I think next I'll have to come up with an easy way to wrap these webservices in a proxy much like microsoft does OR find a way to use the microsoft generated Proxies with other APIs.. By the way to see the Microsoft generated Javascript proxy, just put /js at the end of your webservice URL. (scriptmanager does this for you normally).

Anyways, this was a fun little experiement, and I'll post when I get it more refined.

 



Dr. Dobbs and I Agree!!!

clock May 2, 2007 17:20 by author josh

Saw this on slashdot and it warmed my heart. see there is an artical on Dr. Dobbs about AJAX frameworks and it reminded me of the process I went thru. Just like Dr. Dobbs I weighed DOJO, scriptastic, Prototype, YUI and GWT; and like the artical I finally chose YUI..

    Now personally I loved DOJO (I still use it on quicker projects); but YUI is much quicker (performance) and customization is a whole lot less complex although less extendable. One other part of YUI I really like is its communications layer, the service architecture (yes even inside javascript you can have services) makes since to me and just seemd to fit my brain better. I also have to say that extJS (based on YUI) is a great extention to YUI and worth looking into (although now the developer seems to be charging for it, although its not to much  [Correction - see comments ] Now the developer has added support options for the library and/or if you need more freedom than LGPL gives you. And the prices aren't bad either).



View Webservices done.

clock April 30, 2007 06:57 by author Josh

So on our little project I have decided that because our fatclient will connect to the server via webservices, so should our webapp. Sure, sure its on the same server (now) but using SOA here helps in several ways.

1)  If we grow to a multie server enviroment it will be easy as pie to cut the webapp away from the business layer (as it will already be using the webservices

2) I only have to write my webservices once, and I don't have to write a bunch of wrapper classes just so the webapp can call right back to the BAL while the fatclient has to go thru webservices.

3) I can make the webapp 100% HTML. Now you may be asking, but then its just a webpage. True, but with AJAX I have actually been quite successful writing 100% javascript HTML clients to my webapps. The idea being that static file serving is light, easy, cheap (doesn't require IIS or windows for that matter), and finally it completely decouples business logic from the UI allowing solid design practices.

4) We can publish a Webservice API for client websites to use as they like.

So with all that being said, as of yesterday I completed all of the webclient Services for searching and rendering. Now I have a few new entry points (Scope creep) to write. But the "core" webclient APIs are done. On the flipside my partner is working on the Fatclient and he will give me his list of APIs to write when he is ready. We have split up the project, with him getting the fatclient and me doing everything on the server.. Its a fair trade :-).



Adobe Flex Goes Open Source

clock April 27, 2007 17:18 by author Josh
Big news from Adobe. This will make Flex the de-facto standard for Rich Internet Applications. Now this is intresting, Because Flex is the dynamic form of Flash, and has quite a bit of Web 2.0 magic. I wonder how this folds in to the whole Apollo project.

read more



Calendar

<<  March 2010  >>
MoTuWeThFrSaSu
22232425262728
1234567
891011121314
15161718192021
22232425262728
2930311234

View posts in large calendar

Add to Technorati Favorites

Sign in