Deep Zoom - Mouse wheel to zoom in & zoom out.

There are a lot of ways how to manipulate Deep Zoom depending on your needs. Before anything else I give you a short description of what is Deep Zoom. Deep Zoom provides the ability to interactively view high-resolution images in Silverlight. You can zoom in and out of images rapidly without affecting the performance of your application. This Quickstart shows you how to create a Deep Zoom image, load a Deep Zoom image, and add interactivity. Learn More

In order to build Deep Zoom applications, you need to download Microsoft's Deep Zoom Composer . And before we going into the mouse interactive code we should first have a short steps on how to create/build a Deep Zoom Application. So lets say you already has the DeepZoom Composer, open and create a new project.

1. Create new Project and Import Images
You see it has three different parts: Import, Compose and Export. The first thing we do is to import our images. See on the right side there is an Add Image button.



2. Compose the Imported Images
Click on the composed tab then just drag and drop all the images you had imported into the canvas. You see also all of it on the right side.



To arrange all of those, select all images and right click to bring up "Arrange Into Grid" dialog.



Define the number of rows and padding.



Once you click OK on that dialog, Deep Zoom Composer will arrange the images exactly like they're supposed to be.



3. Export Deep Zoom Project
Export them so that we can used it in our Silverlight application.



It generates a couple of different things. First it will create a folder called "GeneratedImages". This folder contains hundreds of images that Silverlight will request and combine when a user is using the Deep Zoom application. Inside this folder is also a file called "dzc_output.xml". This file will be the actual source of the MultiScaleImage object that will be used when building our app.

4. Silverlight Application
Locate the file where you saved your exported Deep Zoom project, and get the GeneratedImages folder and add it in the ClientBin forder of the ASP.net project.



The first piece of code we need to write will create the multiscale image object and set it's source to our Deep Zoom Composer output.

<UserControl x:Class="deepZoom.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
    <Grid x:Name="LayoutRoot" Background="Black">
        <MultiScaleImage x:Name="msi" Source="../GeneratedImages/dzc_output.xml"/>
    </Grid>
</UserControl>

If you run the application you can actually see the the images..how they we're arranged. However there is no mouse interaction happen, you cant zoom in and zoom out those images using your mouse. Now we're down to the good stuff..the code behind of it.

5. Code Behind. Zoom In and Zoom Out
Most of it was being provided by Microsoft I guess, but there are lots of versions on this code it depends what version of Silverlight your using. There are plenty of code but aint working for me. The code-behind for this application:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace deepZoom
{
    public partial class MainPage : UserControl
    {

        //
        // Based on prior work done by Lutz Gerhard, Peter Blois, and Scott Hanselman
        //
        Point lastMousePos = new Point();

        double _zoom = 1;
        bool mouseButtonPressed = false;
        bool mouseIsDragging = false;
        Point dragOffset;
        Point currentPosition;

        public double ZoomFactor
        {
            get { return _zoom; }
            set { _zoom = value; }
        }


        public MainPage()
        {
            InitializeComponent();
         this.MouseMove += delegate(object sender, MouseEventArgs e)
            {
                if (mouseButtonPressed)
                {
                    mouseIsDragging = true;
                }
                this.lastMousePos = e.GetPosition(this.msi);
            };

            this.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs e)
            {
                mouseButtonPressed = true;
                mouseIsDragging = false;
                dragOffset = e.GetPosition(this);
                currentPosition = msi.ViewportOrigin;
            };

            this.msi.MouseLeave += delegate(object sender, MouseEventArgs e)
            {
                mouseIsDragging = false;
            };

            this.MouseLeftButtonUp += delegate(object sender, MouseButtonEventArgs e)
            {
                mouseButtonPressed = false;
                if (mouseIsDragging == false)
                {
                    bool shiftDown = (Keyboard.Modifiers & ModifierKeys.Shift) == ModifierKeys.Shift;

                    ZoomFactor = 2.0;
                    if (shiftDown) ZoomFactor = 0.5;
                    Zoom(ZoomFactor, this.lastMousePos);
                }
                mouseIsDragging = false;
            };

            this.MouseMove += delegate(object sender, MouseEventArgs e)
            {
                if (mouseIsDragging)
                {
                    Point newOrigin = new Point();
                    newOrigin.X = currentPosition.X - (((e.GetPosition(msi).X - dragOffset.X) / msi.ActualWidth) * msi.ViewportWidth);
                    newOrigin.Y = currentPosition.Y - (((e.GetPosition(msi).Y - dragOffset.Y) / msi.ActualHeight) * msi.ViewportWidth);
                    msi.ViewportOrigin = newOrigin;
                }
            };

            new MouseWheelHelper(this).Moved += delegate(object sender, MouseWheelEventArgs e)
            {
                e.Handled = true;
                if (e.Delta > 0)
                    ZoomFactor = 1.2;
                else
                    ZoomFactor = .80;

                Zoom(ZoomFactor, this.lastMousePos);
            };
        }

        public void Zoom(double zoom, Point pointToZoom)
        {
            Point logicalPoint = this.msi.ElementToLogicalPoint(pointToZoom);
            this.msi.ZoomAboutLogicalPoint(zoom, logicalPoint.X, logicalPoint.Y);
        }
    }
}

Create a new class MouseWheelHelper.cs and have this code.

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;

namespace deepZoom
{
        // Courtesy of Pete Blois
        public class MouseWheelEventArgs : EventArgs
        {
            private double delta;
            private bool handled = false;

            public MouseWheelEventArgs(double delta)
            {
                this.delta = delta;
            }

            public double Delta
            {
                get { return this.delta; }
            }

            // Use handled to prevent the default browser behavior!
            public bool Handled
            {
                get { return this.handled; }
                set { this.handled = value; }
            }
        }

        public class MouseWheelHelper
        {

            public event EventHandler<MouseWheelEventArgs> Moved;
            private static Worker worker;
            private bool isMouseOver = false;

            public MouseWheelHelper(FrameworkElement element)
            {

                if (MouseWheelHelper.worker == null)
                    MouseWheelHelper.worker = new Worker();

                MouseWheelHelper.worker.Moved += this.HandleMouseWheel;

                element.MouseEnter += this.HandleMouseEnter;
                element.MouseLeave += this.HandleMouseLeave;
                element.MouseMove += this.HandleMouseMove;
            }

            private void HandleMouseWheel(object sender, MouseWheelEventArgs args)
            {
                if (this.isMouseOver)
                    this.Moved(this, args);
            }

            private void HandleMouseEnter(object sender, EventArgs e)
            {
                this.isMouseOver = true;
            }

            private void HandleMouseLeave(object sender, EventArgs e)
            {
                this.isMouseOver = false;
            }

            private void HandleMouseMove(object sender, EventArgs e)
            {
                this.isMouseOver = true;
            }

            private class Worker
            {

                public event EventHandler<MouseWheelEventArgs> Moved;

                public Worker()
                {

                    if (HtmlPage.IsEnabled)
                    {
                        HtmlPage.Window.AttachEvent("DOMMouseScroll", this.HandleMouseWheel);
                        HtmlPage.Window.AttachEvent("onmousewheel", this.HandleMouseWheel);
                        HtmlPage.Document.AttachEvent("onmousewheel", this.HandleMouseWheel);
                    }

                }

                private void HandleMouseWheel(object sender, HtmlEventArgs args)
                {
                    double delta = 0;

                    ScriptObject eventObj = args.EventObject;

                    if (eventObj.GetProperty("wheelDelta") != null)
                    {
                        delta = ((double)eventObj.GetProperty("wheelDelta")) / 120;


                        if (HtmlPage.Window.GetProperty("opera") != null)
                            delta = -delta;
                    }
                    else if (eventObj.GetProperty("detail") != null)
                    {
                        delta = -((double)eventObj.GetProperty("detail")) / 3;

                     if (HtmlPage.BrowserInformation.UserAgent.IndexOf("Macintosh") != -1)
                           delta = delta * 3;
                    }

                    if (delta != 0 && this.Moved != null)
                    {
                        MouseWheelEventArgs wheelArgs = new MouseWheelEventArgs(delta);
                        this.Moved(this, wheelArgs);

                        if (wheelArgs.Handled)
                            args.PreventDefault();
                    }
                }
            }
        }
    }

ciao. Read More...

Add Silverlight in Web page .aspx

I just had my training about Silverlight, and one of the few important things i have learned and want to share it with you all is to how to add/integrate your silverlight application in the web page.

You can embed the Silverlight plug-in in your Web page in two ways:

● Using the HTML object element.
● Using JavaScript, Silverlight.js helper file.

I never try to used JavaScript but i found a very simple way on how to do it. See How to: Add Silverlight to a Web Page by Using JavaScript. For more information about Silverlight.js, see Silverlight.js Reference. So we have to focus more on HTML object element.


The HTML object element is the simplest way to embed the Silverlight plug-in, and is the recommended way. This is the default approach that is used by Visual Studio when you create a new Silverlight-based application and choose to host it in a dynamically generated HTML page.

You can use the object element to integrate Silverlight with JavaScript code in your Web page. However, JavaScript is not required to embed the control. This is useful if JavaScript is disabled on the client or prohibited on the server.

Question is where to find object element that being generated. You can find those in your Testpage both in .aspx and .html



In silverlight 2.0 Testpage.aspx has a different code, it never uses object but still you can make used of those, either way. Code looks like this.

 <asp:ScriptManager runat="server" ID="ScriptManager" />

    <asp:Silverlight runat="server" ID="silverlightLayout" InstallationMode="Inline"

Version="1.1" Source="MVC_silverlight.xap" EnableHtmlAccess="true" Windowless="true"

Width="844" Height="472" PluginBackColor="Transparent" />

And the object element im preferring too is this:

  <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">

    <param name="source" value="ClientBin/MVC_silverlight.xap"/>

    <param name="onError" value="onSilverlightError" />

    <param name="background" value="white" />

    <param name="minRuntimeVersion" value="3.0.40818.0" />

    <param name="autoUpgrade" value="true" />

    <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration:none">

      <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>

    </a>

     </object>

<iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>

NOTE: You have to build your project in order to have those object.
Take a look on the first param, name="source" value="ClientBin/MVC_silverlight.xap" it pointed to the xap file. Xap file is the compressed output file for the Silverlight application. The .xap file includes AppManifest.xaml, compiled output assembly of the Silverlight project (.dll) and any other resource files referred by the Silverlight application.

You can actually just add that xap file in your Web project and point it right on the param source value.



For more information, see How to: How to: Add Silverlight to a Web Page by Using HTML

Read More...

Submit a form using asp.net MVC

Ok well..there a lot of ways on how to submit your forms depending on your needs.
I'm gonna show few of those..and its up to you what you gonna used.

The normal way of submitting forms.

Views File (Register.aspx)

 <% using (Html.BeginForm()) { %>
        

            

                
Account Information
                

                    Username:
                    <%= Html.TextBox("username") %>
                
                // more code in here
              
            
        
    <% } %>

Controller File (Home.cs)

 [AcceptVerbs(HttpVerbs.Post)]
 public ActionResult Register(string username,...)
        {

            if (string.IsNullOrEmpty(username))
            {
                return View();
            }
            // more code in here for checking
        }

Submit a form using Javascript

   <% using (Html.BeginForm(null, null, FormMethod.Post, new { id="myForm"})) 
      { %>
          //code here
   <% } %> 

and then:

 $("#myForm").submit(); 

and do not forget to include jquery-1.2.6.js that comes with mvc (or use a higher version).
The Home.cs file is same as the above code.

If you want to do a client side checking before submitting your data on the server..you have to do the more complex way.

   
  <% using (Html.BeginForm("Register", "Home", FormMethod.Post, new { id="myForm", onsubmit="return !stopThis();", enctype="multipart/form-data" }))
            {%>
              //code here
         <% } %>

and then:

   
  function stopThis() {
   //Mandatory fuction where u can check all ur data if it was all correct and fill up
   if (Mandatory()) {
    // let say we have a notification element name notify_msg
    document.getElementById('notify_msg').innerHTML = 'Pls. Fill up all the Required Fields'; 
    return true;
   }
   return false;  // require fields are all correct
  }

Home.cs

   
  public ActionResult SubmitCareerForm(FormCollection frm)
        {
         // no more checking on the field
        // code here 
        }

Take a look on the Home.cs file, see the [AcceptVerbs(HttpVerbs.Post)] it was removed on the last sample. No need for that since we are already
pointing the funtion on the Home file using (Html.BeginForm("Register", "Home",.....

Theres also an elegant way to ajaxify you forms (with jquery) . Never try that one though.

ciao.

Read More...

Installing and Include new module for Joomla

I just had a project using Joomla 1.5 , it was my first time to used it and i find it very difficult to use the new module i added. It took me almost half a day to do research how to include the ninja shadow box module i installed for me to use it in my images. So i decided to post this blog for all joomla starter like me. This tutorial will explain how to install and include the module, we'll gonna use joomla 1.5.

So to start with will have a sample module, lets use Ninja Shadow Box more likely a jquery lightbox. Shadowbox is a cross-browser, cross-platform, cleanly-coded and fully-documented media viewer application written entirely in JavaScript. Using Shadowbox, website authors can display a wide assortment of media in all major browsers without navigating away from the linking page.
Lets say we already had the zip file of the module so the next to do is to install it in our joomla application.

1. Install the Module
Extension -> Install/Uninstall



2. Add a position in templateDetails.xml ( \templates\[template used] Read More...

Problem in Jquery Virtual Tour when place inside a pop-up div.

jQuery virtual tour - an extension to the simple panorama viewer that allows you to play a little bit more with jQuery by adding interactivity to transform some panoramic views into a virtual tour! FREE - released under the GPL licence.

No need for Flash, Quicktime ou Java. Your visitors will not have to install any software to experiment your virtual tour.

Advanced Panorama
This virtual tour plugin has the particularity to be accessible and can run even if javascript has not been activated - navigation uses the standard html tags <map> and <area> in accordance with w3c.

jQuery virtual tour DEMO / jQuery virtual tour Article

Simple Pandora Viewer
This small plugin for jQuery offers display as an interactive panorama, all images of your page containing the class 'panorama'

simple pandora viewer DEMO / simple pandora viewer Article

Well, both article sample had there image on a page none of them show how to do it in a pop-up/lightbox image where you can do like this:



So how to do it? Take these simple steps.
1.) Choose what viewer to used. In this case we will just used Simple Pandora Viewer.
2.) Follow the Installation on how to used pandora viewer on this article
3.) Create a pop-up div where you can place your image. See this sample.
Place your image inside <div class="divTextHolder">. Just adjust the css of class divTextHolder to fit the image.

As you try to test your application it works well in Firefox and other browsers but in IE the image won't appear and u will be having trouble in your jquery.js or jquery-1.3.2.js

The following error will occur:
Ln 32 Col 4414 Invalid Argument
fx.elem.style[fx.prop]=fx.now+fx.unit

Ln 24 Col 1337 Invalid Argument
elem[name]=value

To resolve those ERROR you need to do the ff:
on the css of #light need to comment/remove display:none and write this scripts

In this scenario you have to display the div that holds image after the page is ready, coz when you have to display none on div the scripts can't fine the current position of image, but well you know this error will only appeared in IE. IE sucks.

- Read More...