Visit to http://tringgr.com/ to view the new look. The UI now is more clean and refresh.

With One click You can make a call to customer support person.

The new UI of TringgrEngage in Offline Mode.

In the Offline Mode, website visitor can leave a message for agent.

“Thank You” Message is displayed when the message is sent.

website visitor can also have a text chat with company agent.

For those who don;t know, Tringgr Engage is a real time customer engagement chat box solution that helps the consumer facing business to grow sales and serves their website visitors in a better way, thus help them in elevate the customer experience via Video, Voice and Chat support.

TringgrEngage seamlessly connects customers to enterprises anytime and anywhere from desktop driving consistent interactions across multiple channels. As a result, companies can provide superior service, form closer relationships, and meet customers’ needs at their point of buying intent.

With TringgrEngage You can use video chat to interact with your customer. Come closer to your customer- communicate with them. Show off your products, solver customer queries right away and in return increase sales and enhance customer experience.

We all know how important customer support is for any online business. With TringgrEngage, your customer will get an opportunity to talk with you face 2 face. A human touch that was missing in customer support is now possible with multimedia interaction experience brought by TringgrEngage.

Do let me know , how did you like this new UI.

Reach Me at- sushant@tringgr.com

“Tringg Me” at http://www.tringgr.com

Tringgr brings Free instant video conferencing without any plugins, downloads and totally hassle free. Tringgr Video Conferencing and Chat solution is as 1.2.3!. Its built on top of WebRTC and requires only your browser to start a video chat (upto 4 participants). Start a conference, Share your Conference link with your friends or colleagues and they just need a browser (Chrome, Opera, FireFox) with internet to join you!! Try it Now

Tringgr – WebRTC based Video Conference on the fly!!

Tringgr – Plugin Free Video Conferencing for e-Commerce, Education and Customer Support

Ever had a video conference to attend but couldn’t make it? Either because of A. low bandwidth, B. couldn’t skype, C. didn’t have the time to download software/plug-ins.

So how about a solution that only needs Chrome and uses a service that runs on the low bandwidth?

Developed by IIIT-H alumni, Sushant Pandey, Tringgr is the service which provides this multi-video conferencing and chat solution. Tringgr is part of Effect Labs started by Sushant and Shubhashish. Sushant came up with the idea and Shubhashish with his deep research interest helped with developing the code Abstraction layer over WebRTC called TringgrRTC.

Tringgr not only solved the instant conferencing needs but also open doors for presently booming online businesses in India like e-commerce, online education and live video customer support etc.

“Look at a scenario where you have to buy a high value product and you have got some doubts, also you are not sure how the product actually looks. Tringgr takes on this challenge and provides live product demonstration and sales agent interaction to provide the ultimate e-commerce experience and that too from within the e-commerce website. We are planning to place Tringgr at the center of this unique online experience and we are seeing very good response from our initial market research.”  Says Sushant.

Product Description

Tringgr is ‘video conferencing on the fly’ product which provides Video Conferences or chats, Audio only conference and chat, group or private text chat, File Transfer features as of now. Its roadmap involves video integration API release, Mobile full support, Screen Sharing, Contact saving & chatting with your Facebook contacts from within Tringgr chat.

“Tringgr” has been developed with our RTC API called TringgrRTC on top of WebRTC platform and it works on low bandwidths smoothly. Our API is due to be released for other websites to extend Live Audio\Video customer chats support. 

Tringgr is intended to bring Smooth conferencing solution for Live Tutoring in eLearning, Live Product display for e-commerce with product sales assistant for high value products to give that personalized touch – this would be the ultimate experience from E-commerce.

“It will work well on lower bandwidths as we have worked on the media server to support it well. With most IT department blocking browser plugin it is clear that there needs to be another way. Tringgr serves that purpose, being designed to be an open standard video and voice communication tool that can be used on any computer with just the requirement of Chrome browser.” says Shubhashish.

How the Idea Was Born?

From India’s perspective e-Commerce has been growing like anything and video\audio support for high value products, interaction with a sales agent from sitting at home, take an in-shop experience from home is what he thinks as the ultimate e-commerce experience. Live Tutoring and online e-Learning\Test prep programs can get benefited hugely by face to face interactions etc. and that when the idea of Tringgr was born.

Tringgr works from within the browser and hence we don’t need any extra plug-ins. It can, hence will help in any service or product offering where video can add great value. Use Cases we see are: Live Tutoring (Current increase in Technology usage for Education makes it great use case), Customer Support, Live Chat Support, Interviews for HR processes, Taking actual Shops online, Proctoring online exams and real time doubt clearance, Live Reporting using Tringgr Mobile etc. With huge adoption of technology in India and continuous lowering in the cost of video infrastructure it can be seen as next big thing.

Where can we use Tringgr?

Tringgr is intended to bring Smooth conferencing solution for Live Tutoring in eLearning, Live Product display for e-commerce with product sales assistant for high value products to give that personalized touch – this would be the ultimate experience from ecommerce.

Our Market Areas Includes-

• Video Conferencing on the fly for instant needs without any plugin.
• Live tutoring for Education.
• Live Product Demo for e-commerce high value products.
• Live Audio\Video chat support on your website.

Expansion Plans

We are planning to release TringgrRTC API for providing live Audio\Video Custom Support for high end servicing like in E-commerce segment.

Live tutoring – we are running a pilot with a training institute. Post pilot we are planning to apply it to a larger scale.

E-Commerce – We see the ultimate experience of ecommerce for high value products where the sale is still less by providing Video tour of product, live video demonstration of the product and direct contact with a sales person provides a platform both for customer and seller to better communicate and hence more closers on purchases can be achieved.

WebRTC enables organization to make websites an extended channel of the contact center, and use real-time communication services like live chat, audio and video call and screen sharing right from the browser.

Tringgr – Product Team

Sushant Pandey – He is a 2005 CSE Grad from IIIT Hyderabad and has worked with Microsoft for 3 years before starting his Entrepreneurial journey. He has been running an IT Solutions company Effect Labs from past 5 years providing innovative Technology solutions around brain waves mapping, adaptive learning, mobile applications, banking solutions, location intelligence for retail and finance etc.

From past 1 year he has aligned himself more towards product development and to focus on leveraging technology driven Products in online interaction space including live tutoring on low bandwidth, instant conference needs, carrying Live Interviews, to Show your product to a prospective customer live, to provide live video\audio support for customer service etc as a first hand browsing experience. He came up with Tringgr and now it has taken shape of big software and he is planning to take it for funding in order to enhance its API and provide Tringgr services to various businesses.

Sushant was well supported by Shubhashish who bring in deep research capabilities and has contributed in the development of core abstraction layer over WebRTC called Tringgr RTC. 

Tringgr team involves 10 members and we are constantly enhancing the platform and presently it works as one of the best running WebRTC applications available.

 So how about a solution that only needs Chrome and uses a service that runs on the low bandwidth?

Developed by IIIT-H alumni, Sushant Pandey, Tringgr is the service which provides this multi-video conferencing and chat solution. Tringgr is part of Sushant’s startup Effect Labs. To read full story click here

Tringgr is a Free chatting solution, develop by Effect Labs  which enable user to do video chat/text chat, file sharing and desktop screen sharing. Communication with the one who matters to you is easy.

FEATURES:

1) Hassle Free Video calling and Video conferencing( upto 4 max)

2) Text chatting along with Video calling

3) Desktop to Desktop voice calling

4) File Sharing , docs with your friends

5) Screen Sharing( Expected to come soon)

So Guys just try this app, a good video calling/voice calling application. The beauty of this application is that you did not need to download any software or any plugin. Even no sign up required. Everything is on the fly!

Thanks

We are pleased to announce the Beta Release of our Application ‘FotoDesk’ – Easy to Use Photo Editor and Collage Maker. This Application is developed by Team Effect Labs. FotoDesk lets you to paint your beautiful memories with its easy effects and filters. You can create a alluring Collage and can share it on social networks. With Many beautiful design to choose from it is the best in its class, Completely online with no Download or Installation required. You Just Need an internet connection and then start Playing with your images. Give them a life like look. Wow !!

Its been an sustained efforts and hard-work of effect labs product development team. Team are working quite well.

Feature List Of  fotoDesk:

• It is built with the HTML5 and CSS3 latest technologies.
• spectacular user interface makes photo editing facile.
• fotoDesk is fully Responsive and develop as an Single-Page Application
• No Software Installation is Required , Just open browsers and Start play with your images.
• Effective Tools and Digital Filters made easy for users to create stunning Collage.
• Importing Your Image is the USP of fotoDesk, that made this app go Viral, Support JPEG and PNG format.
• Social Media Integration is also a remarkable feature of this application.

Snapshot of  FotoDesk

                                                                                                         Collage Maker- Pic Studio

Step To Use FotoDesk for Photo Editing and Collage Making:

Now Editing your pics and making collage in Three simple steps.

1) Select Image or multiple images from your desktop and choose image.

2) Now you can use Image filters , canvas and effect to make stunning collage.

3) Your Collage is Ready !! Download it

Whether you want to touch up a profile pic, try a new effect, or use fotoDesk collage maker,it has got the photo editing features for you.So what are you waiting for- Just Create , Edit & Share . And, Do I tell You ITS FREE !!!

Do tell me people , How did you find this application, share your reviews about this application

Many Thanks !!

]]> https://sushantp.wordpress.com/2014/01/05/fotodesk-paint-your-memories/feed/ 0 sushantp fotodesk collage maker https://sushantp.wordpress.com/2014/01/05/tringgr-video-chatconference-on-the-fly/ https://sushantp.wordpress.com/2014/01/05/tringgr-video-chatconference-on-the-fly/#respond Sun, 05 Jan 2014 08:18:59 +0000 http://sushantp.wordpress.com/?p=234 Hi People !!

I am pleased to announced the Beta Released of Tringgr– Video Chat/Conference solution developed by Effect Labs Private Limited. It is the result of constant efforts of Product Development Team of Effect Labs, whose efforts paid off well.

• Develop on the Top of WebRTC .
• No Registration Required.
• Supports Chrome Browser Only.
• Hassle Free Video Calls/Conference
• High Definition Chat on the Fly
• It is Free and always will be.

Snapshot of this app :

Home Page of Tringgr

Text/Video Chat on the fly !!

Features of Tringgr :

Video Chat facility

 –  Easy Text Chat

–  Video Conferencing

– Text Chat

– Voice Chat

– Screen Sharing

– No Registration Required

– Do we Tell – Its Free , So What are you waiting for Try out now and give your reviews in comments.

                                                  “Because we Believe in Live & Face to Face Communication”- TEAM EFFECT LABS 

Fellas, Do use this app, I personally recommend this. No need to Install software , effortless communication !! Its Fast & Easy

Do write me your reviews about this application.

Many Thanks !!

A new year is always a new beginning, new hope and new expectations and we would like to welcome  2014 on the same lines!! lets grow together, lets spread happiness, lets make life easier with softwares and lets be happy about what we do and how we do!!

Thank you for extending your support in making 2013 a great success in all fronts for Effect Labs. We value your continuous support, guidance, and encouragement highly.

We wish you’ll peace, prosperity and good health, and a New Year filled with joy and success. May all your New Year Resolutions come true.

We hope our paths will cross more often in 2014 and we look forward to see you more this year.

We have released an online professional photo editor cum collage maker called fotoDesk (http://fotodesk.in) which is not only free but also help you to paint your memories. Try it out!!

With the start of new year we are bringing you with TRINGGR (http://tringgr.com) which will make video chat\conferencing super easy and without any additional software need. No hassle, no downloads, no contact list.. its video chat on the go!!!

Lets welcome 2014 with open arms for better future and success!!

EffectLabs_HappyNewYear2014

For further information on Microsoft Surface “Mini” Tablet see here

Pay a visit to http://effectlabs.com to view about our Services and Products!

Effect Labs Product Engineering team is working on some Cool products around Education, Healthcare and Communication. We are committed to develop quality that not only offer right value but also helps us as people and businesses.

More updates would be seen by our PR team which is working constantly to release notes on major Social and Professional platforms.

Snapshot1:

Snapshot 2:

bye for now.

#Sushant
b: http://blog.effectlabs.com
c: http://effectlabs.com
t: http://technews.effectlabs.com

I will now start writing a lot about our activities, work and great Products our Engineering team has been working on.

keep an eye here…

bye for now
– Sushant
in: http://in.linkedin.com/sushantp
c: http://effectlabs.com

On the product development team we are looking for a solid Android dev who is passionate about developing Android applications and loves to be a leader with his\her solutions.

On the services team we are looking for Silverlight devs (RIA being our core focus area), ASP.NET Devs with MVC experience, A web 2.0 Designer and UX researcher. On Silverlight we are looking for very solid devs and technical leaders.

If you are great at SharePoint and a self started then you can be among the first few members of our Collaborative Application Team.

We are also starting a Media Application Team and hence are looking for Flash, Action Script and Flex senior dev.

We work on cool and challenging projects and love to have people with entrepreneurial mind-set, people who like to take on big challenges, provide quick solutions and like to work on shaping up a company. We offer great projects, very high market visibility and business visibility to dev team, very high amount of responsibility and a fun filled place.

Hope this might help you if you are looking out for a cool place to work at.

bye for now.

Technology Team would focus around Silverlight, RIA Development, WPF, WCF, ASP.NET MVC, SharePoint etc and Business team would be focusing on market behavior, technology evaluations, business insights to our products etc

hope our team blog would also help you finding solutions to your business problem and would be worth looking at.

thanks and bye for now.

I was working on a project a few days before and got to implement reporting support in Silverlight 3 project which doesn’t support Reporting natively or doesnt provides a control similar to ASP.NET ReportViewer Control. In this post we will look into the how we can work around this problem with the best possible solutions available for Silverlight 3.

If you try looking around for solution you will find a solution provided by Perpetuum Software http://www.perpetuumsoft.com/Silverlight-Viewer-for-Reporting-Services.aspx. They have offered a solution but due to two things I didnt go for it – 1) The print quality was not good for me 2) Its obviously costing some bucks

So, I tried to find how can we workaround it in a free way and leveraging the Microsoft ReportViewer Control itself. So, what we can do is we can have ASP.NET report viewer being used by our application being called by Silverlight app, which is being hosted on a ASP.NET page itself. So, from the Silverlight app when a button is clicked or some event occurs we can cause a pop-up to show the report viewer using some javascript etc.

There are 3 possible solutions which a user can go:
1) Use of pop-up window, which is called by an Event in Silverlight app and ASP.NET report viewer is being used as it is in the pop-up window. The Report customization is part of your report development.
The major issue here is pop-up blockers which by default comes with major browser and hence your pop-up would be blocked mostly causing a bad user experience. Good part is the solution works and presents you with the report.

2) Use of iframe on the same page where Silverlight app is also hosted. The iframe is hidden initially and based on the Silverlight Event this iFrame is made visible and hence we see the report inside an iframe.
Good part is it gives a good user experience and the report viewer looks continous and part of application.

3) Use some third party control like Telerik or so and they have HtmlPlaceholder Silverlight control which can be used to provide with the url of Report and it takes care of setting iFrame and writing the javascript for you to make it cross browser compliant. This approach also essentially uses the iframe way to show the reports.

Let’s look into some code snippet below which uses the iFrame way (2 approach as stated above) so that you can use them in your app if you are working out with this problem or scenario:

1) Default.aspx where the Silverlight object is hosted and iframe added by us:
(I have used inline styling for demo here but you should be using proper styling)

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

<!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 id="Head1" runat="server">
    <title>abc</title>
    <style type="text/css">
    html, body {
	    height: 100%;
	    overflow: auto;
    }
    body {
	    padding: 0;
	    margin: 0;
    }
    #silverlightControlHost {
	    height: 100%;
	    text-align:center;
    }
    </style>
    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript">
        function onSilverlightError(sender, args) {
            var appSource = "";
            if (sender != null && sender != 0) {
              appSource = sender.getHost().Source;
            }
            
            var errorType = args.ErrorType;
            var iErrorCode = args.ErrorCode;

            if (errorType == "ImageError" || errorType == "MediaError") {
              return;
            }

            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;

            errMsg += "Code: "+ iErrorCode + "    \n";
            errMsg += "Category: " + errorType + "       \n";
            errMsg += "Message: " + args.ErrorMessage + "     \n";

            if (errorType == "ParserError") {
                errMsg += "File: " + args.xamlFile + "     \n";
                errMsg += "Line: " + args.lineNumber + "     \n";
                errMsg += "Position: " + args.charPosition + "     \n";
            }
            else if (errorType == "RuntimeError") {           
                if (args.lineNumber != 0) {
                    errMsg += "Line: " + args.lineNumber + "     \n";
                    errMsg += "Position: " +  args.charPosition + "     \n";
                }
                errMsg += "MethodName: " + args.methodName + "     \n";
            }

            throw new Error(errMsg);
        }
    </script>
</head>
<body style="background-colr:black;">
    <form id="form1" runat="server" style="height:100%">
    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="950">
		  <param name="source" value="ClientBin/abc.xap"/>
		  <param name="onError" value="onSilverlightError" />
		  <param name="background" value="white" />
		  <param name="minRuntimeVersion" value="3.0.40624.0" />
		  <param name="autoUpgrade" value="true" />
                  <strong><param value="true" name="windowless" /></strong>
		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.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></div>
        <div id="divReport" style="margin: 5% auto 0pt 18%; position: relative; z-index: 5; background-color: white; opacity: 1; float: left;">
         <iframe style="border: medium none ; margin: 0pt auto; z-index: 10; display:none;" id="_report"></iframe>
     </div>
    </form>
</body>
</html>

Here we can see that we are using a iframe which has a style of display:none which hides the iframe when the application loads.

2) In your Silverlight app. Create a button and bind an Event handler to it. In the event handler you can use the below code:

private void Btn_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            Uri sourceUri = new Uri(HtmlPage.Document.DocumentUri, Application.Current.Host.Source.ToString().Substring(0, Application.Current.Host.Source.ToString().IndexOf("ClientBin") - 1) + "/ReportViewerPage.aspx?ReportName=Report1&Client=L1");

            string wid = ContentStackPanel.ActualHeight.ToString();
            string hei = ContentStackPanel.ActualWidth.ToString();

            HtmlPage.Document.GetElementById("_report").SetStyleAttribute("display", "");
            HtmlPage.Document.GetElementById("_report").SetProperty("height", hei);
            HtmlPage.Document.GetElementById("_report").SetProperty("width", wid);
            HtmlPage.Document.GetElementById("_report").SetAttribute("src", sourceUri.ToString());
            //Above code will make the iframe solution work

            //Below code is for using pop-up window. So you can comment the code if you are only using iframe
            if (true == HtmlPage.IsPopupWindowAllowed)
            {
                System.Text.StringBuilder codeToRun = new System.Text.StringBuilder();
                codeToRun.Append("window.open(");
                codeToRun.Append("\"");
                codeToRun.Append(sourceUri.ToString());
                codeToRun.Append("\",");
                codeToRun.Append("\"");
                codeToRun.Append("\",");
                codeToRun.Append("\"");
                codeToRun.Append("width=" + wid + ",height=" + hei);                
                codeToRun.Append(",scrollbars=yes,menubar=no,toolbar=no,resizable=yes");
                codeToRun.Append("\");");
                try
                {
                    HtmlPage.Window.Eval(codeToRun.ToString());
                }
                catch
                {
                    MessageBox.Show("You must enable popups to view reports.  Safari browser is not supported.", "Error", MessageBoxButton.OK);
                }
            }
            else
                MessageBox.Show("You must enable popups to view reports.  Safari browser is not supported.", "Error", MessageBoxButton.OK);
        }

In this code we are making the src component of iframe which is a aspx page in the project called ReportViewerPage.aspx and use some query string parameters to pass the report name and parameters.

The iframe style property is changed and its height and width is set to the container above which it has to be shown and then using the windowless param of Silverlight object and CSS of setting position and z-index we can have our iframe show on top of Silverlight giving the user and impression that the reportviewer is part of Silverlight app itself.

3) ReportViewerPage.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ReportViewerPage.aspx.cs" Inherits="abc.Web.ReportViewerPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=9.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"
    Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>
    
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>    
</head>
<body>
    <form id="form1" runat="server">
   <div>
        <rsweb:ReportViewer ID="MainReportViewer" runat="server" 
            ProcessingMode="Remote"
            Width="100%"
            Height="700"
            ShowExportControls="True"
            ShowFindControls="True"
            ShowParameterPrompts="False"
            ShowPromptAreaButton="False"
            ShowRefreshButton="False"
            ShowPrintButton="true"
            ShowZoomControl="true"
            ZoomMode="Percent"
            BackColor="White" >
            <ServerReport DisplayName="MainReport" ReportServerUrl="" />
        </rsweb:ReportViewer>
    </div>
    </form>
</body>
</html>

4) ReportViewerPage.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Microsoft.Reporting.WebForms;
using System.Configuration;

namespace abc.Web
{
    public partial class ReportViewerPage : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            MainReportViewer.ProcessingMode = ProcessingMode.Remote;
            MainReportViewer.ZoomMode = ZoomMode.Percent;
            MainReportViewer.ZoomPercent = 100;
            MainReportViewer.ServerReport.ReportPath = ConfigurationSettings.AppSettings["ReportPath"] + this.Request.QueryString["ReportName"];
            MainReportViewer.ServerReport.ReportServerUrl = new Uri(ConfigurationSettings.AppSettings["ReportServerUrl"]);
            List parameters = new List();
            List values = new List();
            values.Add(this.Request.QueryString["Client"]);
           
            ReportParameter oneParamter = new ReportParameter("Client", values.ToArray());
            values.Clear();
            string apars = this.Request.QueryString["Apar_Id"];
            values = apars.Split(new[] { "," }, StringSplitOptions.None).ToList();
            ReportParameter twoParamter = new ReportParameter("Apar_Id", values.ToArray());

            parameters.Add(oneParamter);
            parameters.Add(twoParamter);
            MainReportViewer.ServerReport.SetParameters(parameters.ToArray());
            MainReportViewer.ShowParameterPrompts = false;
            MainReportViewer.ServerReport.Refresh();
        }
    }
}

This page reads the parameter passed by iframe src property and then parses the query string to make a Report Server call. The parameters are passed using Report parameter and if your report is set to take parameters then these parameters would be used to show the report in the Report Viewer.

You need to provide ReportServer url like http://localhost/ReportServer and ReportPath like “/FirstReport/” which will be appended by specific report name send by the Silverlight app. So finally it should look something like – http://localhost/ReportServer/FirstReport/MyReport

You need to prepare a report for the above to work and have it hosted on your server (localhost or external server) and then point the add in this program to your server.

This overall is a simple way to get the SSRS Report being shown in a ASP.NET along with Silverlight app hosted but giving the impression that Reporting support is part of Silverlight app itself.

I Hope this will solve your problems if you are working on this scenario. Write back if you find any issues or clarification regarding any code.

I have a working solution with my and have tested the code with local and external report server and it works just fine.

Good day!!
bye for now.

Journey:

Since my Microsoft days, it was there somewhere but due to several things going within and around, it just didn’t came out then. Though to keep myself ignited I joined a services start-up so that I see the services side of the software industry and explore various opportunities.

That was the time when I and my friends joined together and we were hardcore thinkers of the product development in the area of Tourism, Media Studio, GPS based systems, Controls making company, Silverlight based CMS system, Job portal industry, Online test platform and actually various other options and opportunities. We all had our own thinking for the products and we finally came close on a few. But due to lack of funding and recession hitting at the same time our conversations didn’t went well with the investors. This left us thinking again.

Since all three of us had really good experience with the services industry and had different expertise with some common technologies to work with. This made us think seriously in the direction of setting up an IT services firm and helping businesses with the custom processes where we are good and some of the cool things we do here. One of us being highly creative with programming   and playing with Silverlight it came out really well to be used as one of the pillars, Another being highly experienced with SharePoint custom development and integration with Silverlight it came out as another pillar and ASP.NET\MVC\jQuery\JSON\WCF etc is common across us so this helped us concentrating on Microsoft technologies as well as playing the common work area.

These pillars helped us setting up a plan where we keep out instinct of being on the product side up too but just putting say a small holding time. We planned to start with Services offerings, working parallel in developing customized solutions as these work well in form of packaged services products like Silverlight controls, media kit etc Setting up these two and establishing good process and name among clients would take a bit of time but would help us leveraging out strengths to product development too.

There are many things if I talk about service offerings but I think its already a lot written above about the company so I will write things what I feel like about a company. Just to showcase the offerings in a splash here it goes – custom process setup using TFS 2008 – complete project management and collaboration with integration of VS, TFS, Sharepoint, SSRS etc and customizing TFS process templates according to a company or project needs, Custom application development using various Microsoft technologies like ASP.NET 3.5, ASP.NET MVC, C# 3.5, WCF, WPF, Expression Blend, Silverlight (Prism, Caliburn), Sharepoint etc. and various other technologies, platforms and tools like Photoshop, jQuery, Ajax with JSON, javascript, Ext-JS etc. We bring in high quality and great user experience in the works we do and have done. There’s much to say here but lets put a stop now.

I follow and would suggest one thing – Think what you do and do what you love.  This is really very important and separates you. If you are reading this I would say to ask yourself a question – am I happy doing what I do today? (you cant be satisfied since it stops progress) If the answer is YES then you are on the right path but if it NO then this is the right time to think and find out a way to do what interests you because it gives a lot of pleasure and ultimately you progress the best in your interest area.

I hope this journey would be extraordinary and keep me on my toes always. There a long way to go and a lot of patience at this stage is required. We are fortunate to get a good start but still have seen hard time during this last 3 months – Patience and self motivation are key in this practice.

I have taken up the role of Techno\Business person in the company where I do coding, learn and implement new technologies, come up with working demos and finding process\software optimizations etc as well as looking into business expansion, doing strategic partnerships, maintaining business relationship so that we get recurring business etc There’s a lot involved actually.

I would now be writing a mix of both technology and business in due course. Hope the experience would be good.

Thanks.

So, the scenario here is we have a page with multiple file upload depending upon some data. We will use a repeater to deal with the data and hence we get ‘n’ rows of file upload depending upon the datasource. The iframe elements are kept inside repeater as shown below. Here we will see how we can trigger specific iframe events and then try to do validations and data communication between the main page and an iframe using jQuery. The communication is done with the help of accessing current pages elements and then setting the iframes hidden element with the values we got on the current page. The set values are then used by code behind of the iframe file upload page or the javascript of that page. So, in another way we achieve both file upload and parameter passing in this type of scenario.

multiple file uploads

Code Example1: Page = Main.aspx

<asp:Repeater runat="server" ID="rptAdData" OnItemDataBound="rptAdData_ItemDataBound">
    <asp:Label CssClass="flHeight" ID="flHeight" runat="server"></asp:Label>
                                <asp:Label CssClass="flWidth" ID="flWidth" runat="server"></asp:Label>
                                <asp:Label CssClass="flCrTypeName" ID="flCrTypeName" runat="server"></asp:Label>
                                <asp:Label CssClass="lblAds" ID="lblAdIDs" runat="server"></asp:Label>
                                <asp:Label CssClass="lblSkus" ID="lblSkuIDs" runat="server"></asp:Label>
                                <asp:Label CssClass="lblCrSize" ID="lblCrSizeID" runat="server"></asp:Label>
                                <asp:Label CssClass="lblCrType" ID="lblCrTypeID" runat="server"></asp:Label>
    <div id="divFrameOuter" style="margin-top: 5px;">
                                    
    </div>
</asp:Repeater>

Code Example 2: Page = Main.aspx, Code = jQuery

<script type="text/javascript">
        $(document).ready(function() {
         $('iframe').load(function() {
                var parent = $(this).parent();
                var lblHeightIframe = $(this).contents().find("body .lblHeightInner");  //Finding the height element in iframe page -- the value will be set with this pages label element 
                var lblWidthIframe = $(this).contents().find("body .lblWidthInner");
                var lblTypeNameIframe = $(this).contents().find("body .lblTypeNameInner");
                var lblCampaignIdIframe = $(this).contents().find("body .lblCampaignIdInner");

                lblWidthIframe.attr('value', parent.children('.flWidth').text().trim());
                lblHeightIframe.attr('value', parent.children('.flHeight').text().trim());
                lblTypeNameIframe.attr('value', parent.children('.flCrTypeName').text().trim());
                lblCampaignIdIframe.attr('value', campaignId);
            });
 });
</script>

Code Example 3: Page = Photoupload.aspx

<%@ Page Language="C#"  AutoEventWireup="true"  CodeFile="PhotoUpload.aspx.cs" Inherits="PhotoUpload" %>
<!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 id="Head1" runat="server">
</head>
<body style="margin:0px" onload="initPhotoUpload()">
<form id="photoUpload" enctype="multipart/form-data" encoding="multipart/form-data" runat="server">
      <div id="uploadBlock" style="float: left; width: 30%;">
          <div id="divFrame">
              <div>
                <input id="filPhoto" type="file" runat="server"/>
            </div>
            <div id="divUpload" style="padding-top:4px">
                <input type="hidden" id="lblHeight" class="lblHeightInner" value="" runat="server" />
                <input type="hidden" id="lblWidth" class="lblWidthInner" value="" runat="server" />
                <input type="hidden" id="lblTypeName" class="lblTypeNameInner" value="" runat="server" />                
                <input type="hidden" id="lblCampaignId" class="lblCampaignIdInner" value="" runat="server" />
                <input id="btnUpload" type="button" class="btnSimple" value="Upload Creative" />
            </div>
          </div>
</form>
</body>
</html>

There is some javascript too in the photoupload.aspx and it depends on how you want your particular file uplaod to work or else you can write me for that. In the code behind I have done thumbnailing and also taken care of reuploading new file using the same fileupload button.

So, once we are done with file upload in the Main.aspx I can write an event for ‘btnUpload’ button of photoupload.aspx page so that the event is catched at the parent page and some sort of validations like atleast on file is upload or so etc can be done and appropriate error message can be shown.

I hope this will be helpful to you. You can write to me at sushant.pandey@gmail.com in case of any queries or source code.

bye for now.

-Thanks

TFS 2008 provides us with this option in team project settings -> souce control -> to select the option of get latest on check out. To find this option go to Team Explorer, if Team Explorer is not visible along with solution explorer then go to visual studio menu and under view you can find team explorer. Click it to open team explorer which will show all the team projects assigned to you. You can find source control link under team project too but this is not what we have to use here instead we have to find the source control by right clicking team project name as shown below:

Now when we click on source control the below window gets opened where we have to click get latest on check out option as outlined in the image too:

Hope this helps in case you are looking for it too.

bye for now.

-Sushant

So, In the returned data we get JSON serialized date which is in ticks and hence causes problems at the client end as we can’t treat it as javascript date. Eval() fails in coverting it and returns error saying that the format of date is not correct. Now, to resolve this I liked this approach. Use the reviver function which can be used while doing JSON data parsing with JSON.parse function. You can look at http://www.json.org/js.html to know more about reviver funciton.

[from json.ord]
var myObject = JSON.parse(myJSONtext, reviver);

The optional reviver parameter is a function that will be called for every key and value at every level of the final result. Each value will be replaced by the result of the reviver function. This can be used to reform generic objects into instances of pseudoclasses, or to transform date strings into Date objects.

[/from json.ord]

So, here is a sample jQuery ajax call implementation which can be used as part of any event in your javascript file and would work for you. The pre-requisite here is to have JSON.js file included so that JSON object is understood by the interpreter and it doesnt break client side code.

//methodName -> The WebMethod name you want to call from ajax
//paramArray  -> Array of parameters which will be converted as JSON params in this function
//successFunction  -> name of successfunction to be called if ajax call succeeds
//errorFunction-> name of error Function to be called if ajax call fails

function ClientProxyDateFormatted(methodName, paramArray, successFunction, errorFunction) {
    var pagePath = window.location.pathname;
    var paramList = '';

    if (paramArray.length > 0) {
        for (var i = 0; i < paramArray.length; i += 2) {
            if (paramList.length > 0) paramList += ',';
            paramList += '"' + paramArray[i] + '"' + ':' + '"' + paramArray[i + 1] + '"';
        }
    }
    paramList = '{' + paramList + '}';
    $.ajax({
        type: "POST",
        url: pagePath + "/" + methodName,
        contentType: "application/json; charset=utf-8",
        data: paramList,
        dataType: "text",
        processData: false,
        success: function(msgg) {
            var msg = JSON.parse(msgg, function(key, value) {
                var a;
                if (value != null) {
                    if (value.toString().indexOf('Date') >= 0) {
                        //here we will try to extract the ticks from the Date string in the "value" fields of JSON returned data
                        a = /^\/Date\((-?[0-9]+)\)\/$/.exec(value);
                        if (a) {
                            var dt = new Date(parseInt(a[1], 10));
                            //getMonth return months with index 0 so you need to add 1 to get the correct month value.
                            return dt.getMonth() + 1 + "/" + dt.getDate() + "/" + dt.getFullYear();
                        }
                    }
                    return value;
                }
            });
            successFunction(msg);
        },
        error: function() {
            errorFunction();
        }
    });
    return false;
}

This seemed to me as a good problem and hence I think it would be useful to you in case you are facing similar issue. Let me know if it helps or doesnt help

bye for now.

-Sushant

Let’s take a look at a generic example page where we have a list of checkboxes inside a table enclosed in a div (you can use any other scenario like a div having a list of checkbox elements only or a combination of checkboxes and other elements in it).

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

<!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 runat="server">
    <title></title>
    <script src="jquery-1.2.6.js" type="text/javascript"></script>
    <% if (false)
       { %>
    <script src="jquery-1.2.6-vsdoc.js" type="text/javascript"></script>
    <% }%>
    <script type="text/javascript">
        //Write your code when Document is loaded
        $(document).ready(function() {
            $("#testChk").click(function() {
                alert($("#testCheck :checked").size());
                //function to print the value of each checked checkboxes
                $("#testCheck :checked").each(function() {
                    alert("value = " + $(this).val());

            });

            $("#tblSub").click(function() {
                //show count of all not checked checkboxes only
                alert($("#testTB :input:not(:checked)").size());
                //show count of all not checked elements
                alert($("#testTB :not(:checked)").size());
                
                //function to print the value of each not checked checkboxes
                $("#testTB :input:not(:checked)").each(function() {
                    alert("value = " + $(this).val());
                });
            });

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <div id="testCheck">
        <input type="checkbox" checked="checked" value="1" />
        <input type="checkbox" checked="checked" value="2" />
        <input type="checkbox" checked="checked" value="3" />
        <input type="checkbox" checked="checked" value="4" />
        <input type="checkbox" checked="checked" value="5" />
        <input type="checkbox" checked="checked" value="6" />
        <input type="checkbox" checked="checked" value="7" />
        <input type="checkbox" checked="checked" value="8" />        
    </div>    
    <input id="testChk" type="button" value="Submit" />
    
    <table id="testTB">
        <thead>
            <tr>
             <th>test</th>
             <th>chk boxes</th>
            </tr>
        </thead>
        <tbody>
            <tr><td>test</td><td><input type="checkbox" checked="checked" value="1" /></td></tr>
            <tr><td>test</td><td><input type="checkbox" checked="checked" value="2" /></td></tr>
            <tr><td>test</td><td><input type="checkbox" checked="checked" value="3" /></td></tr>
            <tr><td>test</td><td><input type="checkbox" checked="checked" value="4" /></td></tr>
            <tr><td>test</td><td><input type="checkbox" checked="checked" value="5" /></td></tr>
            <tr><td>test</td><td><input type="checkbox" checked="checked" value="6" /></td></tr>
        </tbody>
    </table>
    <input id="tblSub" type="button" value="Submit" />
    </div>
    </form>
</body>
</html>

Since everything is present in UI so I am not giving the code behind as it would be default without any changes to verify how the above is working.

Here are few lines to take a look upon:
//show count of all not checked checkboxes only
1) alert($(“#testTB :input:not(:checked)”).size());
//show count of all not checked elements
2) alert($(“#testTB :not(:checked)”).size());

In the first one we get the count of all non checked checkboxes only because it uses an addition filter of ‘input’ tag type which is how checkboxes get rendered in html. In case we dont use it as in 2) example then we get all the elements inside div testTB which dont have checked attribute so it return all the tr, td etc elements along with input elements thereby increasing the count of return set.

This is a simple example but would help you in case you are trying to find the non cheched elements and getting unexpected count. The reason there would be that all the checkboxes are not inside one container and hence you would have to use the input tag type. Also you might have to consider addition filtering in case the same container contains other input elements as then not will filter those also in result set causing unexpected count. Som the gist is that either you do the wrapping in such a way that these checkboxes are clubbed together or else you need to use additional filter to find the right result set.

Hope this helps!

bye for now.

-Sushant

Please find the code snippet below which represents aspx page code behind file and app code file where collection is returned which can be replaced with a service layer call querying DB to get the collection back to presentation layer:

1) ASPX Page with jQuery Code

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

<!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 id="Head1" runat="server">
    <title></title>
    <script src="jquery-1.2.6.js" type="text/javascript"></script>
    <% if (false)
       { %>
    <script src="jquery-1.2.6-vsdoc.js" type="text/javascript"></script>
    <% }%>
    
    <link href="DefaultStyleSheet.css" rel="stylesheet" type="text/css" />
    
    <script type="text/javascript">

        //Write your code when Document is loaded
        $(document).ready(function() {
            $("#ddl2").hide(0, function() { });
            //Code to append a drop down list at client end
            //$("#ddl1").append("<option value=\"new\">new</option>");            

            //event to be fired when an option\index gets changed for first drop down list
            $("#ddl1").change(function() {
                $("#ddl2").fadeOut(1500, function() { });
                var value = $(this).val();
                //alert(value);
                $("#waitingBlock").css({ "margin-left": "10px" });
                $("#waitingBlock").html("<img src='spinner.gif' alt='loading....' />")
                .fadeIn(1500)
                .insertAfter($("#ddl1"));
                
                //Client side function call which will make ajax request for page method named FillDD to get json data
                FillDDProxy("FillDD", ["selectedDDItem", value]);
            });
        });

                
        function FillDDProxy(methodName, paramArray, errorFunction) {
            var pagePath = window.location.pathname;
            var paramList = '';

            if (paramArray.length > 0) {
                for (var i = 0; i < paramArray.length; i += 2) {
                    if (paramList.length > 0) paramList += ',';
                    paramList += '"' + paramArray[i] + '"' + ':' + '"' + paramArray[i + 1] + '"';
                }
            }
            paramList = '{' + paramList + '}';
            
            //Call the page method
            $.ajax({
                type: "POST",
                url: pagePath + "/" + methodName,
                contentType: "application/json; charset=utf-8",
                data: paramList,
                dataType: "json",
                success: function(msg) {
                    successFunction(msg.d);
                }

            });
            return false;
        }
        
        function successFunction(msg) {
            
            $("#waitingBlock").fadeOut(1500, function() { });
            var list = msg.toString();            
            var strArray = list.split(",");
            //clear previously filled second drop down.
            $("#ddl2").children().remove();
            if (strArray.length > 0) {
                for (var i = 0; i < strArray.length; i++) {
                    //Filling the second drop down on client side with returned json data
                    $("#ddl2").append('<option value=\"' + strArray&#91;i&#93; + '">' + strArray[i] + '</option>');
                }
            }
            $("#ddl2").show(1500, function() { });            
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:DropDownList runat="server" ID="ddl1">
        <asp:ListItem Value="d1v1" Text="d1v1"></asp:ListItem>
        <asp:ListItem Value="d1v2" Text="d1v2"></asp:ListItem>
        <asp:ListItem Value="d1v3" Text="d1v3"></asp:ListItem>
        <asp:ListItem Value="d1v4" Text="d1v4"></asp:ListItem>
    </asp:DropDownList>
    
    <%--<asp:DropDownList runat="server" ID="ddl2"></asp:DropDownList>--%>
    <select id="ddl2" ></select>
    
    <span id="waitingBlock"></span>
    </div>
    <div>
    </div>
    </form>
</body>
</html>

2) Code behind C# file

using System;
using System.Web.Services;
using System.Collections;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [WebMethod]
    public static IEnumerable FillDD(string selectedDDItem)
    {
        //Instantiate your service class or call your service layer method directly in case it is also static
        lib serviceLib = new lib();
        return serviceLib.getDDValues(selectedDDItem);
    }
}

I have used App_Code to represent service layer method:

3) App_Code\lib.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

/// <summary>
/// Summary description for lib
/// </summary>
public class lib
{
	public lib()
	{
		//
		// TODO: Add constructor logic here
		//
	}

    public List<string> getDDValues(string currentValue)
    {
        //use the currentValue to get dependent DD values from DB
        //I am putting them here hardcoded to reprenst the same.
        
        List<string> listString = new List<string>();
        listString.Add(currentValue);
        listString.Add("Sushant");
        listString.Add("RampGroup");
        
        return listString;
    }
}

Overall this code results into a beutiful animated dependent drop down showing and fading from ui depending upon the selection of first drop down. This overall is more performant that the postback as round trip is save with partial trip and also the mode of data transfer is thin JSON. On the client side rendering of this JSON data, it can be achieved either by using jQuery as shown in my example or else using jTemplates and then setting as data for the template. I will share the code in another post with use of jTemplates which can be of great help in scenarios where server side data controls like repeater or data grids are used and which can be replaced by the usage of jTemplates and doing a client side binding of the same with thin JSON data.

So, If you are looking into doing a AJAX and JSON call this example can help you along with an implementation of filling a dependent drop down.

Hope this helps!

bye for now

-Sushant

This is a Microsoft Research project which uses capabilities of your graphics hardware to provide image smoothing and high level zooming to get a 3D illusion. HD View is available as activeX browser plugin for Firefox and IE. Having good graphics card helps in getting the full power of HD view. I tried installing it on my system where I didn’t had very good graphics card still I was able to get a real good view of panoramas. You need to have Direct3D installed (which gets installed as part of DirectX). You can get more details about HD View from http://research.microsoft.com/en-us/um/redmond/groups/ivm/hdview/hdgigapixel.htm and http://hdview.spaces.live.com/.

Here is a view of zoom details from http://www.yosemite-17-gigapixels.com

hd view

HD for Silverlight is also available on codeplex which is a Silverlight application to show HD View. You can download it from http://www.codeplex.com/HDViewSL. I tried the cool commandline tool hdmake to generate a high quality image. I downloaded Photoshop plugin of HD View and currently trying my hands on it. I will update about it in another post once I get something subtantial out of it.

But overall it looked very pomising and encouraging to me to see my panoramas with HD view with great details.

– Bye for now.

When you open a Word document click on File menu to find more options present there and then you can see a publish option present as shown in the image below:

You can then see another document getting opened with new menu items as publish, home etc and a pop-up window for creating a new account would come. You can setup word publish to work with wordpress, blogger, community server, sharepoint blog, typepad etc. This can be seen in the image below:

Once you select the blog service provider for setting an account you will proceed to the new window. I selected wordpress and then entered the blog url along with the credentials to use my wordpress account\data here in the offline mode. It works by the medium of webservices to get the data for you or load your data to your blog server provider. You can also provide your photo or imager server url to use the post images from.

Now, we are ready to write a new post in our word document and publish from the same page menu. We can get our older posts, review it, edit it and then republish the same. Click on Home page in the menu shows your blog home page, you can manage different accounts and then using it can publish the same post to multiple providers.

Hope this will help to some of you!!

Happy Blogging…

Problem: There is a table having ID and Names like below and I need to return Name and Count of each Name.

Table: The table named Names looks like one provided below:

We can get the required output by using this query: Select Name, Count(Name) from Names group by Name

The output will look like:

Now the real problem comes when we have to use a where clause which filters some entries. Clause is ‘where Name like ‘%S%’‘so if we use this clause in above query we would get the below result.

(Query: Select Name, Count(Name) from Names where Name like ‘%S%’ group by Name).

So, going by the original requirement of including entry ‘Pandey’ also into the result showing count = 0 like

We can get this by two ways mentioned below:

1. Solution 1: We can use union to get the above result. Though it seems to have more computation involved in it.

   select Name,count(Name) as [count] from Names where Name in (select Name from Names where Name like ‘%S%’)group by Name union select Name, 0 as [count] from Names where Name not in (select Name from Names where Name like ‘%S%’)group by Name

2. Solution2:  There is a keyword for ‘Group By’ clause where we can use ‘All’ which make groups for all the entries even if they are filter out by a where clause. So the below query results in same output:  Select Name, Count(Name) from Names where Name like ‘%S%’ group by all Name
   

So, after messing a lot I found that the solution lied in just one line query so thought of posting. Might be helpful to you.

Bye for now…

You can take a look at my previous post on CAPTCHA at https://sushantp.wordpress.com/2008/08/25/captcha-image-code-verification/

There are some issue which people are finding these days that the distortion is sometime such that its not human friendly but computers are able to read that.

There is an alternate HIP solution developing at MSR which is still in BETA phase and has been prototype by other universities too with the usage of images instead of text where a human can do the identification of images.

Here is how Asirra looks like on a page:

Visit http://research.microsoft.com/asirra/ for complete details on Asirra and usage instructions.

To brief about Assira, this is a two way verification where javascript code gets the challenge and if user solves that correctly, gets a ticket from MSR’s server (also a success message\alert could be shown to user). This message is then passed along with form data as hidden field which is expected to be used by code behind and call a MSR Web Service to validate the Ticket. Repeated trials with the same ticket makes it fail.

In all this seems to be a encouraging way and should improve even more with the quality of images which come. Also there might be orientation changes for images for increased difficulty levels when it would come to machines. Also change in image size (random sized images in challenge) could be one of the improvements which we may find in the final versions.

Here is how the code looks like:

ASP.NET Page

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

<!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 runat="server">
    <title></title>
    
<script type="text/javascript">
    var passThroughFormSubmit = false;
    function MySubmitForm() {
        if (passThroughFormSubmit) {
            return true;
        }
        // Do site-specific form validation here, then...
        Asirra_CheckIfHuman(HumanCheckComplete);
        return false;
    }
    function HumanCheckComplete(isHuman) {
        if (!isHuman) {
            alert("Please correctly identify the cats.");
        }
        else {
            passThroughFormSubmit = true;
            formElt = document.getElementById("mainForm");
            formElt.submit();
        }
    }
</script>
</head>
<body>    
    <form runat="server"
          method="get"
          id="mainForm"
          onsubmit="return MySubmitForm();"> 
    
    <div style="margin:200px 0 0 20px;">
      
      <script type="text/javascript"
              src="http://challenge.asirra.com/js/AsirraClientSide.js"></script>
       <script type="text/javascript">
        // You can control where the big version of the photos appear by
        // changing this to top, bottom, left, or right
           asirraState.SetEnlargedPosition("top");
           asirraState.SetEnlargedPosition("top");
        // You can control the aspect ratio of the box by changing this constant
        asirraState.SetCellsPerRow(4);        
</script>
        <br />
        User Name: <input type="text"
                          name="UserName" />
        Favorite Color: <input type="text"
                               name="FavoriteColor" />      
        <input type="submit"
               value="Submit" />
    </div>
</form>
</body>
</html>

C# Code Behind

using System;
using System.Net;

public partial class asirra : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            string asr_tkr = Request.QueryString["Asirra_Ticket"];
            if (string.IsNullOrEmpty(asr_tkr))
            {
                Response.Write("Asirra Ticket Value is not present");
            }
            else
            {
                string queryString = "action=ValidateTicket&ticket=" + asr_tkr;

                WebClient wc = new WebClient();
                string resp = wc.DownloadString("http://challenge.asirra.com/cgi/Asirra?" + queryString);
                if (resp.IndexOf("Pass", StringComparison.InvariantCultureIgnoreCase) > -1)
                {
                    Response.Write("Got Asirra Ticket Verified");
                }
                else
                {
                    Response.Write("Asirra Ticket Not Verified");
                }
            }                
        }
    }
}

Take a look at it and try. You may like it too like me!!

bye for now.

So, DOM or Document Object Model is language and platform independent object model for representing HTML\XML formats. JavaScript works over DOM though the browser can render a page with different available models. Using Javascript we can play with the DOM of a page and make dynamic changes to page structure and change the browser rendering at run time. A very simple example to it is using Firebug in firefox and clicking on Inspect option. This opens the page DOM in the view panel from where a user can make changes to structure or style there by traversing page tree in any order i.e. parent to child or child to parent and see the effect of change instantaneously on browser. Javascript maintains the state of page by means of DOM.

JQuery is a concise, effective and dev friendly javascript library which allows to take advantage of DOM to its fullest by simplfying the element\object traversal, providing various animation options and simplifying ajax interactions. This library can be seen as a development effort towards supporting RAD (Rapid Application Development) where infact todays most of the developments are heading to. Good News for developers!! Write less do more is what JQuery says to us

One of the cool things is usage of chaining thereby making code development very fast and hence we can traverse a node and its decendents or ancestor nodes just with one line of code. It supports Javascript\XPath expression to select an element (javascript object) or list of elements and then using a object oriented approach shows all the properties, functions or methods working on collections when we use a “.”, we will see this in the examples at the bottom of this post.

We can also see direct method for reading JSON data (javascript also supports it but with eval() where the JSON should be trusted else can cause an attack to your server) in form of getJson() etc. We will take a closer look into using JSON over XML for Ajax call in my coming post about JSON where we will look into using a html control to make a Ajax call and receiving data in form of JSON and then making appropriate change upon successful retrieval of data.

Microsoft announced that it will integrate JQuery in coming VSTS versions though we have already seen integration support in terms of Javascript intellisense for JQuery in Visual Studio 2008 SP1. Read http://weblogs.asp.net/scottgu/archive/2008/11/21/jquery-intellisense-in-vs-2008.aspx post for complete details. This patch enables Visual Studio to look for “-vsdoc.js” in the same directory where Jquery.js file is linked to. If you find any problems installing it and want to have intellisense support then you can add the code below to get the support

<% if(false) { %>
    <script src="jquery-1.2.6-vsdoc.js" type="text/javascript"></script>
    <% }%>

read more about it at http://blogs.msdn.com/webdevtools/archive/2008/11/18/jscript-intellisense-faq.aspx.

Some Examples of JQuery usage:

The code below shows example usage of jQuery Slidedown, Rounded corners, Dynamic menu, Drop down value change dynamically, behavior change of anchor tags etc.

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

<!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 runat="server">
    <title>Untitled Page</title>

    <script src="jquery-1.2.6.js" type="text/javascript"></script>

    <script src="jcorners.js" type="text/javascript"></script>

    <% if (false)
       { %>

    <script src="jquery-1.2.6-vsdoc.js" type="text/javascript"></script>

    <% }%>

    <script type="text/javascript">

        //Function When window is loaded
        window.onload = function() { alert("Welcome"); }

        //Write your code when Document is loaded
        $(document).ready(function() {
            alert("Welcome Again");

            //rounded corner using JCorners plugin
            $.jcorners("#round", { radius: 10 });

            //Animate anchor
            $("a").click(function(event) {
                alert("Thanks for visiting!");

                event.preventDefault(); //Change default Click event of all anchors on page
                $(this).hide('slow');   //hides slowly
            });

            //Dynamic Menu
            $("#menu li ul").hide();
            $("#menu li").hover(function() {
                $(this).children().show('slow')
            }, function() {
                $(this).children().hide('slow')
            });

            //Slide Down and Slide up animation
            $("input.buttonSlideDown").click(function() { $("div.content").find("p.firstParagraph:hidden").slideDown("slow"); });
            $("input.buttonSlideUp").click(function() { $("div.content").find("p.firstParagraph:visible").slideUp("slow"); });
        });

        //Play with Dropdown List
        function replace() {
            var opt = $('#myselect').children().eq(2);
            //text("text") sets value for text element.
            //If you want to keep the original value then you can store it in some var
            opt.text("sushant");
            alert(opt.text());
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
<div style="margin-bottom:20px;">
<div class="content" style="overflow: hidden; display: block; height: 101px;">

                Hi this is first paragraph.

                Hi this is second paragraph</div>
<input type="button" class="buttonSlideDown" value="SlideDown" />
        <input type="button" class="buttonSlideUp" value="SlideUp" /></div>
<div style="width: 50px; margin-bottom:20px;">
        <a href="http://jquery.com/">jQuery</a></div>
<select id="myselect" style="margin-bottom:20px;">
        <option value="1">TD1</option>
        <option value="2">TD2</option>
        <option value="3">TD3</option>
        <option value="4">TD4</option>
        <option value="5">TD5</option>
    </select>
    <input type="button" value="Get Value" onclick="alert($('#myselect').val())" />
    <input type="button" value="Get Text Value" onclick="alert($('#myselect option:selected').text())" />
    <input type="button" value="Replace" onclick="replace()" />
<div style="width: 150px; margin-bottom:20px;">
<ul id="menu">
	<li class="menu">Menu 1
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
</ul>
</li>
	<li class="menu">Menu 2
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
</ul>
</li>
</ul>
</div>
<div id="round" style="width: 100px; height: 100px; border: 1px solid;"
        runat="server">
        This is a big Rounded div</div>
</form>
</body>
</html>

So what we see is that everything in jQuery is either a object it self or property or function of that object. The return of a function in jQuery is again an Object hence allowing us to do chaining operations\calls and write real less code to achieve what we want.

There’s a lot involved in playing with jQuery, writing plug-ins for it and utilizing\testing currently available cool plug-ins. Adding your custom plugin to jQuery is a very straight forward and simple process. Take a look at http://docs.jquery.com/Plugins/Authoring if you want to write your own plugin.

Hope this post would help those looking to start on jQuery.

Keep quering with jQuery

Thanks.

Superblog Directory