tag:blogger.com,1999:blog-69677406138385822402024-03-12T16:39:45.901-07:00Web and Mobile DevelopmentAngularjs, Nodejs, HTML5, Silverlight, Jquery Mobile Topics for DevelopersVijay Kumarhttp://www.blogger.com/profile/06184667566362408473noreply@blogger.comBlogger73125tag:blogger.com,1999:blog-6967740613838582240.post-39559764653232194842015-05-04T06:27:00.001-07:002015-05-04T06:32:46.649-07:00JQuery UI with AngularJS Directive, Datepicker, migration to AngularJS new version<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="http://henriquat.re/#chapter_directives" target="_blank">henriquat.re</a> is an interesting project on AngularJS from the .net developer’s point of view. Their article on <a href="http://henriquat.re/directives/advanced-directives-combining-angular-with-existing-components-and-jquery/angularAndJquery.html" target="_blank">Combining AngularJS with existing Components</a> gives an elegant approach to combine JQuery UI datepicker fragment and move it to a reusable AngularJS directive. <br />When I tried the code with the latest AngularJS and JQuery UI releases the code did not work. I researched and found the problem. As stated in <a href="https://docs.angularjs.org/guide/migration" target="_blank">AngularJS Migrating from Previous Versions</a> <br />“Due to <a href="https://github.com/angular/angular.js/commit/3f2232b5a181512fac23775b1df4a6ebda67d018">3f2232b5</a>, <code>$controller</code> will no longer look for controllers on <code>window</code>. The old behavior of looking on <code>window</code> for controllers was originally intended for use in examples, demos, and toy apps. We found that allowing global controller functions encouraged poor practices, so we resolved to disable this behavior by default. <br />To migrate, register your controllers with modules rather than exposing them as globals:” <br />I also used the idea given in Stackflow question <a href="http://stackoverflow.com/questions/17338197/adding-directive-makes-controller-undefined-in-angular-js-code" target="_blank">Adding directive makes controller undefined in angular js code</a> answered by <a href="http://stackoverflow.com/users/790695/james-allardice">James Allardice</a>. <br />My modified code is given below <br /><u><strong>HTML </strong></u><u><strong>index.html</strong></u><br />
<pre class="csharpcode"> <span class="kwrd"><</span><span class="html">link</span> <span class="attr">rel</span><span class="kwrd">="stylesheet"</span> <span class="attr">href</span><span class="kwrd">="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">script</span> <span class="attr">src</span><span class="kwrd">="http://code.jquery.com/jquery-1.10.2.js"</span><span class="kwrd">></</span><span class="html">script</span><span class="kwrd">></span>
<script src=<span class="str">"http://code.jquery.com/ui/1.11.4/jquery-ui.js"</span>></script>
<!--
<link rel=<span class="str">"stylesheet"</span> href=<span class="str">"http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css"</span>>
<script src=<span class="str">"http://code.jquery.com/jquery-1.9.1.js"</span>></script>
<script src=<span class="str">"http://code.jquery.com/ui/1.10.2/jquery-ui.js"</span>></script>
-->
<!-- Embedded Fragment - maindiv -->
<div ng-app=<span class="str">"demo"</span> ng-controller=<span class="str">"DemoController"</span>>
Date Of Birth:
<my-datepicker type=<span class="str">"text"</span> ng-model=<span class="str">"user.dateOfBirth"</span> />
<br>
Current user's date of birth:
<span id=<span class="str">"dateOfBirthDisplay"</span>>{{user.dateOfBirth}}</span>
</div>
<!-- Fragment End - maindiv -->
<!--<script src=<span class="str">"angular.js"</span>></script>-->
<!-- <script src=<span class="str">"https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"</span>></script>-->
<script src=<span class="str">"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"</span>></script>
<script src=<span class="str">"demo.js"</span>><span class="kwrd"></</span><span class="html">script</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">link</span> <span class="attr">rel</span><span class="kwrd">="stylesheet"</span> <span class="attr">href</span><span class="kwrd">="demo.css"</span><span class="kwrd">></span>
</pre>
<strong><span style="color: #333333;"><u>JavaScript </u></span></strong><br />
<strong><span style="color: #333333;"><u>demo.js</u></span></strong><br />
/* Embedded Fragment - controller */<br />
<pre class="csharpcode"><span class="rem">//function DemoController($scope) {</span>
<span class="rem">// $scope.user = {</span>
<span class="rem">// dateOfBirth: new Date(1970, 0, 1)</span>
<span class="rem">// }</span>
<span class="rem">//}</span>
<span class="rem">//</span>
<span class="kwrd">var</span> demo = angular.module(<span class="str">"demo"</span>, []);
<span class="rem">//</span>
demo.controller(<span class="str">"DemoController"</span>, <span class="kwrd">function</span>($scope) {
$scope.user = {
dateOfBirth: <span class="kwrd">new</span> Date(1970, 0, 1)
}
});
<span class="rem">/* Fragment End - controller */</span>
<span class="rem">/* Embedded Fragment - directive */</span>
demo.directive(<span class="str">'myDatepicker'</span>, <span class="kwrd">function</span> ($parse) {
<span class="kwrd">return</span> {
restrict: <span class="str">"E"</span>,
replace: <span class="kwrd">true</span>,
transclude: <span class="kwrd">false</span>,
compile: <span class="kwrd">function</span> (element, attrs) {
<span class="kwrd">var</span> modelAccessor = $parse(attrs.ngModel);
<span class="kwrd">var</span> html = <span class="str">"<input type='text' id='"</span> + attrs.id + <span class="str">"' >"</span> +
<span class="str">"</input>"</span>;
<span class="kwrd">var</span> newElem = $(html);
element.replaceWith(newElem);
<span class="kwrd">return</span> <span class="kwrd">function</span> (scope, element, attrs, controller) {
<span class="kwrd">var</span> processChange = <span class="kwrd">function</span> () {
<span class="kwrd">var</span> date = <span class="kwrd">new</span> Date(element.datepicker(<span class="str">"getDate"</span>));
scope.$apply(<span class="kwrd">function</span> (scope) {
<span class="rem">// Change bound variable</span>
modelAccessor.assign(scope, date);
});
};
element.datepicker({
inline: <span class="kwrd">true</span>,
onClose: processChange,
onSelect: processChange
});
scope.$watch(modelAccessor, <span class="kwrd">function</span> (val) {
<span class="kwrd">var</span> date = <span class="kwrd">new</span> Date(val);
element.datepicker(<span class="str">"setDate"</span>, date);
});
};
}
};
});
<span class="rem">/* Fragment End - directive */</span></pre>
<br />
<strong><u>References</u></strong><br />
<ol>
<li><a href="http://henriquat.re/#chapter_directives" target="_blank">henriquat.re</a> </li>
<li><a href="http://henriquat.re/directives/advanced-directives-combining-angular-with-existing-components-and-jquery/angularAndJquery.html" target="_blank">Combining AngularJS with existing Components</a> </li>
<li><a href="https://docs.angularjs.org/guide/migration" target="_blank">AngularJS Migrating from Previous Versions</a> </li>
<li><a href="http://stackoverflow.com/questions/17338197/adding-directive-makes-controller-undefined-in-angular-js-code" target="_blank">Adding directive makes controller undefined in angular js code</a> </li>
<li><a href="https://code.angularjs.org/" target="_blank">AngularJS versions</a> </li>
</ol>
</div>
Vijay Kumarhttp://www.blogger.com/profile/06184667566362408473noreply@blogger.com0tag:blogger.com,1999:blog-6967740613838582240.post-77048133852087636682014-04-20T18:18:00.001-07:002014-04-20T18:19:08.613-07:00Syntax for accessing Json objects with “–” orspace in key<p>I  recently had to access Json object returned by Wikipedia with a key  name “query-continue”. </p> <p>This can be done by using   ECMAscripts "bracket notation"  </p> <p>response.data['query-continue'].categorymembers.gcmcontinue</p> <p>refer</p> <p><a href="http://stackoverflow.com/questions/8317982/access-javascript-object-with-space-in-key" target="_blank">access javascript object with space in key</a></p> Vijay Kumarhttp://www.blogger.com/profile/06184667566362408473noreply@blogger.com0tag:blogger.com,1999:blog-6967740613838582240.post-32588431214659819202014-04-17T19:09:00.001-07:002014-04-17T19:09:43.819-07:00angularjs page slider<p>Needed a sliding panel like the ones in Ipad for cascading dropdown. I wanted a button to open the dropdown panel and the panel to close after the last dropdown finished.</p> <p>I used the nice directive provided by </p> <p>Daniele Piccone in <a href="https://github.com/dpiccone/ng-pageslide" target="_blank">ng-pageslide</a> </p> <p>I have given below some code snippets to achieve this using the ng-pageslide directive.</p> <pre class="csharpcode"><span class="kwrd"><</span><span class="html">a</span> <span class="attr">class</span><span class="kwrd">="btn btn-primary"</span> <span class="attr">ng-click</span><span class="kwrd">="drop_down_open=true"</span><span class="kwrd">></span>Open<span class="kwrd"></</span><span class="html">a</span><span class="kwrd">></span><br /><br /><span class="kwrd"><</span><span class="html">pageslide</span> <span class="attr">ps-open</span><span class="kwrd">="drop_down_open"</span> <span class="attr">pageslide</span><span class="kwrd">="left"</span> <span class="attr">ps-size</span><span class="kwrd">="550px"</span> <span class="attr">ps-speed</span><span class="kwrd">="0.5"</span> <span class="attr">ps-target</span><span class="kwrd">="#div_dropdown"</span><span class="kwrd">></</span><span class="html">pageslide</span><span class="kwrd">></span> <br /><br /><span class="kwrd"><</span><span class="html">div</span> <span class="attr">id</span><span class="kwrd">="div_dropdown"</span><span class="kwrd">></span><br /><br /><span class="kwrd"><</span><span class="html">a</span> <span class="attr">ng-click</span><span class="kwrd">="drop_down_open=false"</span> <span class="attr">class</span><span class="kwrd">="btn btn-primary"</span> <span class="kwrd">></span>Close<span class="kwrd"></</span><span class="html">a</span><span class="kwrd">></span><br /> <span class="kwrd"><</span><span class="html">div</span> <span class="attr">data-ng-include</span> <span class="attr">data-src</span><span class="kwrd">="'pages/dropdown.html'"</span><span class="kwrd">></span><br /><span class="kwrd"></</span><span class="html">div</span><span class="kwrd">></span> </pre><br /><style type="text/css"><br /><br /><br />.csharpcode, .csharpcode pre<br />{<br /> font-size: small;<br /> color: black;<br /> font-family: consolas, "Courier New", courier, monospace;<br /> background-color: #ffffff;<br /> /*white-space: pre;*/<br />}<br />.csharpcode pre { margin: 0em; }<br />.csharpcode .rem { color: #008000; }<br />.csharpcode .kwrd { color: #0000ff; }<br />.csharpcode .str { color: #006080; }<br />.csharpcode .op { color: #0000c0; }<br />.csharpcode .preproc { color: #cc6633; }<br />.csharpcode .asp { background-color: #ffff00; }<br />.csharpcode .html { color: #800000; }<br />.csharpcode .attr { color: #ff0000; }<br />.csharpcode .alt <br />{<br /> background-color: #f4f4f4;<br /> width: 100%;<br /> margin: 0em;<br />}<br />.csharpcode .lnum { color: #606060; }</style><br /><br /><p>In the controller to close or open</p><br /><br /><pre class="csharpcode">$scope.drop_down_open=<span class="kwrd">false</span>;<br /><br />$scope.drop_down_open=<span class="kwrd">true</span>;</pre><br /><style type="text/css"><br /><br /><br />.csharpcode, .csharpcode pre<br />{<br /> font-size: small;<br /> color: black;<br /> font-family: consolas, "Courier New", courier, monospace;<br /> background-color: #ffffff;<br /> /*white-space: pre;*/<br />}<br />.csharpcode pre { margin: 0em; }<br />.csharpcode .rem { color: #008000; }<br />.csharpcode .kwrd { color: #0000ff; }<br />.csharpcode .str { color: #006080; }<br />.csharpcode .op { color: #0000c0; }<br />.csharpcode .preproc { color: #cc6633; }<br />.csharpcode .asp { background-color: #ffff00; }<br />.csharpcode .html { color: #800000; }<br />.csharpcode .attr { color: #ff0000; }<br />.csharpcode .alt <br />{<br /> background-color: #f4f4f4;<br /> width: 100%;<br /> margin: 0em;<br />}<br />.csharpcode .lnum { color: #606060; }</style> Vijay Kumarhttp://www.blogger.com/profile/06184667566362408473noreply@blogger.com3tag:blogger.com,1999:blog-6967740613838582240.post-52243599664226138042014-03-15T05:15:00.000-07:002014-03-15T05:15:39.204-07:00Angulajs, Nodejs, Node-webkit articles coming<div dir="ltr" style="text-align: left;" trbidi="on">
Have been busy with other projects. <br />
Angularjs, Nodejs, Node-webkit are very exciting developments which happened in the last few years.<br />
Some of the applications I did with Silverlight will be lot simpler with these.<br />
Look for more articles about these technologies here.<br />
</div>
Vijay Kumarhttp://www.blogger.com/profile/06184667566362408473noreply@blogger.com0tag:blogger.com,1999:blog-6967740613838582240.post-56726563126564269622012-09-28T07:51:00.001-07:002012-09-28T07:51:42.433-07:00Jquery cross domain AJAX requests and HTML parsing list of image src using JQUERY MAP<p>Recently I have been working with Wikipedia, Wikimedia and had to do AJAX requests and parsing the returned HTML.</p> <p>Javascript and JQUERY have problems when you try an AJAX query to cross-domain sites. I read the following article by Micahs </p> <p><a href="http://www.codeproject.com/Articles/78757/Making-Cross-Domain-jQuery-AJAX-Calls">Making Cross Domain jQuery AJAX Calls</a> and followed the method suggested using YQL and seems to work fine. I have repeated below the code mentioned in the article for reference.</p> <pre class="csharpcode"><span class="rem">//feel free to add querystring vars to this</span><br />var myurl=<span class="str">"http://www.example.com/get-post.ashx?var1=var1value&callback=?"</span>;<br /><span class="rem">//make the call to YQL </span><br />$.getJSON(<span class="str">"http://query.yahooapis.com/v1/public/yql?"</span>+<br /> <span class="str">"q=select%20*%20from%20html%20where%20url%3D%22"</span>+<br /> encodeURIComponent(myurl)+<br /> <span class="str">"%22&format=xml'&callback=?"</span>,<br /> function(data){<br /> <span class="kwrd">if</span>(data.results[0]){<br /> <span class="rem">//this data.results[0] is the return object you work with, </span><br /> <span class="rem">//if you actually want to do something with the returned json</span><br /> alert(data.results[0]);<br /> } <span class="kwrd">else</span> {<br /> var errormsg = <span class="str">'<br />Error: could not load the page.<br />'</span>;<br /> <span class="rem">//output to firebug's console</span><br /> <span class="rem">//use alert() for other browsers/setups</span><br /> console.log(errormsg);<br /> }<br /> }<br /> );</pre><br /><style type="text/css"><br /><br />.csharpcode, .csharpcode pre<br />{<br /> font-size: small;<br /> color: black;<br /> font-family: consolas, "Courier New", courier, monospace;<br /> background-color: #ffffff;<br /> /*white-space: pre;*/<br />}<br />.csharpcode pre { margin: 0em; }<br />.csharpcode .rem { color: #008000; }<br />.csharpcode .kwrd { color: #0000ff; }<br />.csharpcode .str { color: #006080; }<br />.csharpcode .op { color: #0000c0; }<br />.csharpcode .preproc { color: #cc6633; }<br />.csharpcode .asp { background-color: #ffff00; }<br />.csharpcode .html { color: #800000; }<br />.csharpcode .attr { color: #ff0000; }<br />.csharpcode .alt <br />{<br /> background-color: #f4f4f4;<br /> width: 100%;<br /> margin: 0em;<br />}<br />.csharpcode .lnum { color: #606060; }</style><br /><br /><p>I have given below an example of parsing all the image source in a list of images.</p><br /><br /><p>The list item code snippet is given below</p><br /><br /><pre class="code"><span style="background: white; color: black"> </span><span style="background: white; color: blue"><</span><span style="background: white; color: maroon">div </span><span style="background: white; color: red">class</span><span style="background: white; color: blue">="thumb" </span><span style="background: white; color: red">style</span><span style="background: white; color: blue">="</span><span style="background: white; color: red">width</span><span style="background: white; color: black">: </span><span style="background: white; color: blue">150px</span><span style="background: white; color: black">;</span><span style="background: white; color: blue">"><</span><span style="background: white; color: maroon">div </span><span style="background: white; color: red">style</span><span style="background: white; color: blue">="</span><span style="background: white; color: red">margin</span><span style="background: white; color: black">:</span><span style="background: white; color: blue">15px auto</span><span style="background: white; color: black">;</span><span style="background: white; color: blue">"><</span><span style="background: white; color: maroon">a </span><span style="background: white; color: red">href</span><span style="background: white; color: blue">="//commons.wikimedia.org/wiki/File:Adrien_Ysenbrandt_-_Virgin_and_Child_with_Two_Angels_in_a_Landscape_-_Walters_37266.jpg" </span><span style="background: white; color: red">class</span><span style="background: white; color: blue">="image"><</span><span style="background: white; color: maroon">img </span><span style="background: white; color: red">alt</span><span style="background: white; color: blue">="Adrien Ysenbrandt - Virgin and Child with Two Angels in a Landscape - Walters 37266.jpg" </span><span style="background: white; color: red">src</span><span style="background: white; color: blue">="//upload.wikimedia.org/wikipedia/commons/thumb/4/49/Adrien_Ysenbrandt_-_Virgin_and_Child_with_Two_Angels_in_a_Landscape_-_Walters_37266.jpg/102px-Adrien_Ysenbrandt_-_Virgin_and_Child_with_Two_Angels_in_a_Landscape_-_Walters_37266.jpg" </span><span style="background: white; color: red">width</span><span style="background: white; color: blue">="102" </span><span style="background: white; color: red">height</span><span style="background: white; color: blue">="120" /></</span><span style="background: white; color: maroon">a</span><span style="background: white; color: blue">></</span><span style="background: white; color: maroon">div</span><span style="background: white; color: blue">></</span><span style="background: white; color: maroon">div</span><span style="background: white; color: blue">><br /> </span></pre><br /><br /><p>After alert(data.results[0]); you can do something like the following to get the  thumb html in the list:</p><br /><br /><pre class="code"><span style="background: white; color: black"> </span><span style="background: white; color: blue">var </span><span style="background: white; color: black">thumb_array_img = $((</span><span style="background: white; color: #a31515">'.thumb img'</span><span style="background: white; color: black">), result);</span></pre><br /><br /><p>To get all the src links in an array use the JQUERY map function like the following code:</p><br /><br /><pre class="code"><span style="background: white; color: black">image_thumb_array = [];</span></pre><br /><br /><p>image_thumb_array = $(thumb_array_img).map(function () <br /> <br />                   { return $(this).attr("src"); }); <br /><br /> </p> Vijay Kumarhttp://www.blogger.com/profile/06184667566362408473noreply@blogger.com0tag:blogger.com,1999:blog-6967740613838582240.post-89290040446973547642012-09-28T06:30:00.001-07:002012-09-28T06:30:03.384-07:00Wikimedia Wikipedia parsing data and machine readable code useful links<p>The Wikipedia, Wikimedia API has lot of information but not well documented. I have been working with that to get some data and parse it. I found the following links very helpful.</p> <ol> <li><a href="http://commons.wikimedia.org/wiki/Commons:Machine-readable_data"><a href="https://www.mediawiki.org/wiki/API">API:Main page</a></a></li> <li><a href="https://en.wikipedia.org/w/api.php">MediaWiki API documentation page</a></li> <li><a href="http://en.wikipedia.org/wiki/Special:ApiSandbox">API sandbox</a></li> <li><a href="http://commons.wikimedia.org/wiki/Commons:Machine-readable_data">Commons:Machine-readable data</a></li> <li><a href="http://en.wikipedia.org/wiki/Category:Infobox_templates">Category:Infobox templates</a></li> <li><a href="http://wikimedia.7.n6.nabble.com/What-is-the-Full-URL-of-the-images-returned-by-a-wikipedia-query-td1147620.html">What is the Full URL of the images returned by a wikipedia query...</a></li> <li><a href="http://www.mediawiki.org/wiki/API:Query">API:Query</a></li> <li><a href="http://labs.steren.fr/2010/11/18/call-wikipedia-api-using-jquery/">Call Wikipedia API using jQuery</a></li> <li><a href="http://www.mediawiki.org/wiki/Manual:Parameters_to_index.php">Manual:Parameters to index.php</a></li> <li><a href="http://commons.wikimedia.org/wiki/Template:Information">Template:Information</a></li> <li><a href="http://www.mediawiki.org/wiki/API:Properties">API:Properties</a></li> <li><a href="http://www.mediawiki.org/wiki/API:Lists">API:Lists</a></li> </ol> Vijay Kumarhttp://www.blogger.com/profile/06184667566362408473noreply@blogger.com0tag:blogger.com,1999:blog-6967740613838582240.post-68221183943628007482012-09-28T06:11:00.001-07:002012-09-28T06:12:03.019-07:00Wikipedida Wikimedia query returns 403 forbidden<p>I had the following webclient request  <br /> <span style="color: #2b91af">WebClient </span>serviceRequest = <span style="color: blue">new </span><span style="color: #2b91af">WebClient</span>(); <br /><span style="color: blue">var </span>JsonResponse = serviceRequest.DownloadString(<span style="color: blue">new </span><span style="color: #2b91af">Uri</span>(urselected));</p> <p>Where urselected was the REST query string. The query worked fine in my browser but returned 403 forbidden error. I found the following post which addresses the problem:</p> <p><a href="http://stackoverflow.com/questions/8105602/wikipedia-query-returns-error-403">Wikipedia query returns error 403</a></p> <p>Modified my code as follows and it worked find:</p> <p>WebClient serviceRequest = new WebClient(); <br />           serviceRequest.Headers.Add("user-agent", "Silver Azure"); </p> <p>           var JsonResponse = serviceRequest.DownloadString(new Uri(urselected)); </p> Vijay Kumarhttp://www.blogger.com/profile/06184667566362408473noreply@blogger.com0tag:blogger.com,1999:blog-6967740613838582240.post-5195294575016331752012-09-07T20:10:00.001-07:002012-09-07T20:10:29.746-07:00Wikipedia and Wikimedia commons html content<p><a href="http://en.wikipedia.org/wiki/Main_Page">Wikipedia</a> and <a href="http://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a> have excellent information. I am building a few applications using the information from these sites. I wanted to get some portions of the html markup, for example the image source, title, thumbnail etc. I tried the <a href="http://www.mediawiki.org/wiki/API">Media Wiki API</a> and was able to get the file names by a query like this.</p> <p><a title="http://commons.wikimedia.org/w/api.php?format=xml&action=query&list=categorymembers&cmtitle=Category:Coins_in_the_Walters_Art_Museum" href="http://commons.wikimedia.org/w/api.php?format=xml&action=query&list=categorymembers&cmtitle=Category:Coins_in_the_Walters_Art_Museum">http://commons.wikimedia.org/w/api.php?format=xml&action=query&list=categorymembers&cmtitle=Category:Coins_in_the_Walters_Art_Museum</a></p> <p>This produced the following output</p> <pre class="csharpcode"><?xml version=<span class="str">"1.0"</span>?><br />-<api>-<query>-<categorymembers><cm title=<span class="str">"File:Ethiopian - Coin Depicting an Anonymous King - Walters 59793 - Obverse.jpg"</span> ns=<span class="str">"6"</span> pageid=<span class="str">"18842729"</span>/><cm title=<span class="str">"File:Ethiopian - Coin Depicting an Anonymous King - Walters 59793 - Reverse.jpg"</span> ns=<span class="str">"6"</span> pageid=<span class="str">"18842732"</span>/><cm title=<span class="str">"File:Ethiopian - One of Two Coins Depicting Ousanas and an Anonymous King - Walters 59794.jpg"</span> ns=<span class="str">"6"</span> pageid=<span class="str">"18809697"</span>/><cm title=<span class="str">"File:Greek - Apollo - Walters 59533.jpg"</span> ns=<span class="str">"6"</span> pageid=<span class="str">"18787772"</span>/><cm title=<span class="str">"File:Greek - Athena - Walters 59519 - Obverse.jpg"</span> ns=<span class="str">"6"</span> pageid=<span class="str">"18801612"</span>/><cm title=<span class="str">"File:Greek - Athena - Walters 59519 - Reverse.jpg"</span> ns=<span class="str">"6"</span> pageid=<span class="str">"18801616"</span>/><cm title=<span class="str">"File:Greek - Athena - Walters 59702 - Back.jpg"</span> ns=<span class="str">"6"</span> pageid=<span class="str">"18787788"</span>/><cm title=<span class="str">"File:Greek - Persephone - Walters 59693.jpg"</span> ns=<span class="str">"6"</span> pageid=<span class="str">"18787786"</span>/><cm title=<span class="str">"File:Greek - Tetradrachme with King Nicodemus II - Walters 59723 - Back.jpg"</span> ns=<span class="str">"6"</span> pageid=<span class="str">"18787795"</span>/><cm title=<span class="str">"File:Matthes Gebel - Medal of Arnold and Nicholas Wenck - Walters 59480 - Obverse.jpg"</span> ns=<span class="str">"6"</span> pageid=<span class="str">"18839416"</span>/></categorymembers></query>-<query-<span class="kwrd">continue</span>><categorymembers cmcontinue=<span class="str">"file|7e524f4d414e202d20434f494e2057495448204120484950504f504f54414d555320414e4420504f525452414954204f46204f544143494c494120534556455241202d2057414c54455253203539373531202d204241434b2e4a50470a524f4d414e202d20434f494e2057495448204120484950504f504f54414d555320414e4420504f525452414954204f46204f544143494c494120534556455241202d2057414c54455253203539373531202d204241434b2e4a5047|18787799"</span>/></query-<span class="kwrd">continue</span>></api></pre><br /><br /><p>You can use the file name to build a url like the following to get the image info</p><br /><br /><p><a title="http://commons.wikimedia.org/wiki/File:Egyptian_-_Pectoral_-_Walters_42199.jpg" href="http://commons.wikimedia.org/wiki/File:Egyptian_-_Pectoral_-_Walters_42199.jpg">http://commons.wikimedia.org/wiki/File:Egyptian_-_Pectoral_-_Walters_42199.jpg</a></p><br /><br /><p>However I wanted to get the title, thumbnail url etc. After some research I hit on this discussion <a href="http://stackoverflow.com/questions/5920078/how-to-get-html-content-text-of-a-wikipedia-page-via-wikipedia-api">How to get HTML content text of a Wikipedia Page (via Wikipedia API)?</a> and then this page <a href="http://www.mediawiki.org/wiki/Manual:Parameters_to_index.php">Manual:Parameters to index.php</a>.</p><br /><br /><p>This led to the following query which gives all the relevant html markup: <a title="http://commons.wikimedia.org/wiki/Category:Coins_in_the_Walters_Art_Museum?action=render " href="http://commons.wikimedia.org/wiki/Category:Coins_in_the_Walters_Art_Museum?action=render ">http://commons.wikimedia.org/wiki/Category:Coins_in_the_Walters_Art_Museum?action=render </a></p> Vijay Kumarhttp://www.blogger.com/profile/06184667566362408473noreply@blogger.com0tag:blogger.com,1999:blog-6967740613838582240.post-37673358525058633372012-09-02T12:42:00.001-07:002012-09-02T12:42:39.688-07:00Wikimedia Commons queries to get image data<p>I am developing application to get images from Wikimedia Commons which is a big repository of excellent images. The query API is not well documented. I researched and came up with the following queries to get the file locations of images.</p> <p>Suppose I want to get the images in the Category <a href="http://commons.wikimedia.org/wiki/Category:Flags_of_the_United_States">Flags of United States</a>, I will do the following:</p> <p><a title="http://commons.wikimedia.org/w/api.php?format=xml&action=query&list=categorymembers&cmlimit=10&cmtitle=Category:benthos" href="http://commons.wikimedia.org/w/api.php?format=xml&action=query&list=categorymembers&cmlimit=10&cmtitle=Category:benthos">http://commons.wikimedia.org/w/api.php?format=xml&action=query&list=categorymembers&cmlimit=10&cmtitle=Category:benthos</a></p> <p>which produces the following XML output for the first 10 items.</p> <pre class="csharpcode"><?xml version=<span class="str">"1.0"</span>?><br />-<api>-<query>-<categorymembers><cm title=<span class="str">"Category:Porifera"</span> ns=<span class="str">"14"</span> pageid=<span class="str">"13371"</span>/><cm title=<span class="str">"Category:Riftia pachyptila"</span> ns=<span class="str">"14"</span> pageid=<span class="str">"8805563"</span>/><cm title=<span class="str">"File:1991 benthos-achtern02 hg.jpg"</span> ns=<span class="str">"6"</span> pageid=<span class="str">"3321991"</span>/><cm title=<span class="str">"File:Abra alba.jpg"</span> ns=<span class="str">"6"</span> pageid=<span class="str">"333239"</span>/><cm title=<span class="str">"File:Ammonia tepida.jpg"</span> ns=<span class="str">"6"</span> pageid=<span class="str">"706636"</span>/><cm title=<span class="str">"File:Aonides paucibranchiata.jpg"</span> ns=<span class="str">"6"</span> pageid=<span class="str">"396315"</span>/><cm title=<span class="str">"File:Aphrodita aculeata (Sea mouse).jpg"</span> ns=<span class="str">"6"</span> pageid=<span class="str">"3610614"</span>/><cm title=<span class="str">"File:Aphrodita aculeata.jpg"</span> ns=<span class="str">"6"</span> pageid=<span class="str">"1525478"</span>/><cm title=<span class="str">"File:Arenicole système.jpg"</span> ns=<span class="str">"6"</span> pageid=<span class="str">"4258545"</span>/><cm title=<span class="str">"File:Asterias rubens.jpg"</span> ns=<span class="str">"6"</span> pageid=<span class="str">"364648"</span>/></categorymembers></query>-<query-<span class="kwrd">continue</span>><categorymembers cmcontinue=<span class="str">"file|42454e5448494320464f52414d494e4946455241532e4a5047|2080936"</span>/></query-<span class="kwrd">continue</span>></api></pre><br /><br /><p>to  get an image you have to use the</p><br /><br /><p><a href="http://commons.wikimedia.org/wiki/File:Aonides%20paucibranchiata.jpg">http://commons.wikimedia.org/wiki/File:Aonides%20paucibranchiata.jpg</a> will take you to the <a href="http://commons.wikimedia.org/wiki/File:Aonides">Aonides</a> paucibranchiata image!</p><br /><br /><p>if you query <a title=" http://commons.wikimedia.org/w/api.php?format=xml&action=query&list=categorymembers&cmlimit=10&cmtitle=Category:benthos&cmcontinue=file|42454e5448494320464f52414d494e4946455241532e4a5047|2080936" href="http://commons.wikimedia.org/w/api.php?format=xml&action=query&list=categorymembers&cmlimit=10&cmtitle=Category:benthos&cmcontinue=file|42454e5448494320464f52414d494e4946455241532e4a5047|2080936"><br /> <br />http://commons.wikimedia.org/w/api.php?format=xml&action=query&list=categorymembers&cmlimit=10&cmtitle=Category:benthos&cmcontinue=file|42454e5448494320464f52414d494e4946455241532e4a5047|2080936</a></p><br /><br /><p>you get the following output  which are the next 10 items, and so on</p><br /><br /><pre class="csharpcode"><?xml version=<span class="str">"1.0"</span>?><br />-<api>-<query>-<categorymembers><cm title=<span class="str">"File:Benthic foraminiferas.jpg"</span> ns=<span class="str">"6"</span> pageid=<span class="str">"2080936"</span>/><cm title=<span class="str">"File:Benthic GLERL 1.jpg"</span> ns=<span class="str">"6"</span> pageid=<span class="str">"2143998"</span>/><cm title=<span class="str">"File:Bentos kasarek.jpg"</span> ns=<span class="str">"6"</span> pageid=<span class="str">"16992357"</span>/><cm title=<span class="str">"File:Borstenwurmer des Meeres.png"</span> ns=<span class="str">"6"</span> pageid=<span class="str">"5229875"</span>/><cm title=<span class="str">"File:Branchiostoma lanceolatum.jpg"</span> ns=<span class="str">"6"</span> pageid=<span class="str">"5712836"</span>/><cm title=<span class="str">"File:Capitella capitata.jpg"</span> ns=<span class="str">"6"</span> pageid=<span class="str">"398359"</span>/><cm title=<span class="str">"File:Cirratulus cirratus.jpg"</span> ns=<span class="str">"6"</span> pageid=<span class="str">"398775"</span>/><cm title=<span class="str">"File:Crabmuss 600.jpg"</span> ns=<span class="str">"6"</span> pageid=<span class="str">"292191"</span>/><cm title=<span class="str">"File:Crangon crangon (dorsal).jpg"</span> ns=<span class="str">"6"</span> pageid=<span class="str">"10320338"</span>/><cm title=<span class="str">"File:Crangon crangon.jpg"</span> ns=<span class="str">"6"</span> pageid=<span class="str">"470098"</span>/></categorymembers></query>-<query-<span class="kwrd">continue</span>><categorymembers cmcontinue=<span class="str">"file|4352494252494e4f50534953204645524e414c44492e4a5047|3307271"</span>/></query-<span class="kwrd">continue</span>></api></pre><br /><br /><p><style type="text/css"><br /><br />.csharpcode, .csharpcode pre<br />{<br /> font-size: small;<br /> color: black;<br /> font-family: consolas, "Courier New", courier, monospace;<br /> background-color: #ffffff;<br /> /*white-space: pre;*/<br />}<br />.csharpcode pre { margin: 0em; }<br />.csharpcode .rem { color: #008000; }<br />.csharpcode .kwrd { color: #0000ff; }<br />.csharpcode .str { color: #006080; }<br />.csharpcode .op { color: #0000c0; }<br />.csharpcode .preproc { color: #cc6633; }<br />.csharpcode .asp { background-color: #ffff00; }<br />.csharpcode .html { color: #800000; }<br />.csharpcode .attr { color: #ff0000; }<br />.csharpcode .alt <br />{<br /> background-color: #f4f4f4;<br /> width: 100%;<br /> margin: 0em;<br />}<br />.csharpcode .lnum { color: #606060; }</style>Other useful formats</p><br /><br /><p>format=json</p><br /><br /><p>format=jsonfm produces a html output of json format.</p><br /><br /><p>Reference</p><br /><br /><ol><br /> <li><a href="http://en.wikipedia.org/w/api.php">API reference</a> </li><br /><br /> <li><a href="http://www.mediawiki.org/wiki/API#A_simple_example">API:Main page</a> </li><br /><br /> <li><a href="http://www.mediawiki.org/wiki/API:Tutorial">API:Tutorial</a> </li><br /></ol> Vijay Kumarhttp://www.blogger.com/profile/06184667566362408473noreply@blogger.com0tag:blogger.com,1999:blog-6967740613838582240.post-23438912444932362012012-08-28T14:10:00.001-07:002012-08-28T14:10:05.855-07:00visual studio express 2012 for web installation experience or frustration !<p>I thought I would share my experience in installing visual studio express for web installation. The indication regarding installation was not very good in the beginning of the installation. So I thought I will outline my experience which might be useful for some one! <br /></p> <ol> <li>Downloaded the ISO file from <a href="http://www.microsoft.com/visualstudio/11/en-us/downloads#express-web">Visual Studio 2012 downloads</a> </li> <li>Double clicked on the file in Explorer. It prompted me to  burn   a disk which I did. </li> <li>9:40 Am: Started installation from disk. </li> <li><font color="#ff0000" size="3">Progress bar was stuck-up in installing .net 4.5</font> </li> <li>Thought of canceling, but went and had a coffee </li> <li>10:17 Am: <font color="#ff0000">Progress bar was still stuck, </font>no indication and suddenly finished and prompted for  restart </li> <li>After restart, seemed to be showing progress bar with meaningful indication </li> <li>10:35 Am Microsoft Visual Studio Express 2012 for web-ENU takes a long time: progress bar struck about 1/3rd </li> <li>10:40 AM: progress bar moved to 1/2! <br />the bottom assembly installation names started changing faster! </li> <li>10:45AM:<font color="#0000ff"> <strong>Setup Successful !</strong></font> </li> <li>When you open the Visual Studio Express it prompts you to get a key which I did. </li> </ol> <p><strong><font color="#333333"><u>My system</u> <br /></font></strong>gateway NE56R13u <br />Celeron 1.7 GHz, 64 bit, 4 GB RAM, <br />Windows 7 ultimate service pack 1</p> Vijay Kumarhttp://www.blogger.com/profile/06184667566362408473noreply@blogger.com0tag:blogger.com,1999:blog-6967740613838582240.post-45166332590272306642012-08-28T13:56:00.001-07:002012-08-28T13:56:03.177-07:00CSS3 transitionend event with cross browser compatability using Javascript<p>I had 2 animations, the first one would last 10 seconds and the second one had to start from the time the first one ends. After some research I found the following solution:</p> <p>First animation:</p> <pre class="code">canvas1 = document.getElementById("myCanvas") ;</pre><br /><br /><pre class="code"><span style="background: white; color: black">canvas1.addEventListener(</span><span style="background: white; color: #a31515">'transitionend'</span><span style="background: white; color: black">, spin_finished, </span><span style="background: white; color: blue">false</span><span style="background: white; color: black">);</span></pre><br /><br /><pre class="code"><span style="background: white; color: black">---Start First animation</span></pre><br /><br /><pre class="code"><span style="background: white; color: black">Second animation:</span></pre><br /><br /><p>function spin_finished() { <br /> <br />       canvas1.removeEventListener('transitionend', spin_finished, false); <br /><br /> <br />         - start second animation <br /><br /> <br />}</p><br /><br /><p>The removeEventListener is required to make sure the transitionend event happens only once.</p><br /><br /><p>Then I ran into cross browser naming convention problem because each browser calls the transitionend event differently. Then I ran into this elegant solution by NeilJS</p><br /><br /><p>// CROSS-BROWSER TRANSITION END EVENT LISTENERS <br /> <br />var transEndEventNames = { <br /><br /> <br />    'WebkitTransition': 'webkitTransitionEnd', <br /><br /> <br />    'MozTransition': 'transitionend', <br /><br /> <br />    'OTransition': 'oTransitionEnd', <br /><br /> <br />    'msTransition': 'MSTransitionEnd', <br /><br /> <br />    'transition': 'transitionend' <br /><br /> <br />}, <br /><br /> <br />transEndEventName = transEndEventNames[Modernizr.prefixed('transition')]; // bind event listener to transEndEventName eg: <br /><br /> <br />//</p><br /><br /><p>So the revised code looks like this after inserting the previous snippet:</p><br /><br /><p>First animation:</p><br /><br /><pre class="code">canvas1 = document.getElementById("myCanvas") ;</pre><br /><br /><pre class="code"><span style="background: white; color: black">canvas1.canvas.addEventListener(transEndEventName,<br /> spin_finished, </span><span style="background: white; color: blue">false</span><span style="background: white; color: black">);</span></pre><br /><br /><pre class="code"><span style="background: white; color: black">---Start animation</span></pre><br /><br /><pre class="code"><span style="background: white; color: black">Second animation:</span></pre><br /><br /><p>function spin_finished() { <br /> <br /></p><br /><br /><p>canvas1.canvas.removeEventListener(transEndEventName, spin_finished, false); <br /> <br />- start second animation <br /><br /> <br />}</p><br /><br /><p>Works great on Firefox, Safari, Opera and Chrome!</p><br /><br /><p>References:</p><br /><br /><ol><br /> <li><a href="https://gist.github.com/2575101">Cross-browser CSS3 transitionend event for event listeners</a> by NeilJS </li><br /><br /> <li><a href="http://marakana.com/static/bookshelf/css3_transitions_tutorial/javascript.html">Css3 Transitions Tutorial : Javascript</a> </li><br /><br /> <li><a href="http://nicolahibbert.com/quick-tip-css3-transition-end-event/">Quick Tip: CSS3 Transition End Event</a> </li><br /><br /> <li></li><br /></ol> Vijay Kumarhttp://www.blogger.com/profile/06184667566362408473noreply@blogger.com0tag:blogger.com,1999:blog-6967740613838582240.post-6428197058453284082012-08-24T07:44:00.001-07:002012-08-24T07:44:10.211-07:00How to resolve IPhone 3 HTML5 canvas fillText not working<p>I am writing a HTML5 canvas applications which has some text in it to be written by the fillText command. This worked well in Safari, Firefox, Ipad but would not work in Iphone 3. Then I found the solution in this discussion:</p> <p><a href="http://stackoverflow.com/questions/2998941/iphone-ipad-html5-canvas-filltext-problem">iPhone/iPad HTML5 Canvas fillText problem</a>.</p> <p>Downloaded  <a href="http://www.netzgesta.de/dev/text/#canvas_api">strokeText.js</a> and implemented with success as per instructions given in the downloaded document. It works now in Iphone 3 along with Safari, Firefox, Opera and even IE9!</p> <p>HTML</p> <pre class="code"><span style="color: blue"><</span><span style="color: maroon">script </span><span style="color: red">src</span><span style="color: blue">="js/strokeText.js" </span><span style="color: red">type</span><span style="color: blue">="text/javascript"></</span><span style="color: maroon">script</span><span style="color: blue">><br /></span></pre><br /><br /><p>Javascript</p><br /><br /><pre class="code">set_textRenderContext(context);<br /><br /> <span style="color: blue">if </span>(check_textRenderContext(context)) {<br /> context.strokeText(text, text_xoffset, text_yoffset, font_size);<br /> }</pre> Vijay Kumarhttp://www.blogger.com/profile/06184667566362408473noreply@blogger.com0tag:blogger.com,1999:blog-6967740613838582240.post-34006538567505938452012-08-23T19:37:00.001-07:002012-08-23T19:37:57.077-07:00Jquery Mobile gradient background for content<p>I have given below the HTML snippet and the CSS file I used for adding a gradient to the Content div.</p> <p>I  used the gradient CSS code from this excellent site:</p> <p><a href="http://www.colorzilla.com/gradient-editor/">Ultimate CSS Gradient Generator</a> by <a href="http://www.colorzilla.com/">ColorZilla</a>.</p> <p> </p> <p>HTML</p> <pre class="code"><span style="color: blue"><</span><span style="color: maroon">div </span><span style="color: red">data-role</span><span style="color: blue">="content" </span><span style="color: red">class</span><span style="color: blue">="main_div_blue" </span><span style="color: red">style</span><span style="color: blue">="</span><span style="color: red">overflow</span><span style="color: blue">:hidden;" > </span></pre><br /><br /><pre class="code"><span style="color: blue">CSS</span></pre><br /><br /><p>.main_div_blue {<br /> <br /> background: rgb(208,228,247); /* Old browsers */<br /><br /> <br />background: -moz-linear-gradient(top, rgba(208,228,247,1) 0%, rgba(115,177,231,1) 24%, rgba(10,119,213,1) 50%, rgba(83,159,225,1) 79%, rgba(135,188,234,1) 100%); /* FF3.6+ */<br /><br /> <br />background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(208,228,247,1)), color-stop(24%,rgba(115,177,231,1)), color-stop(50%,rgba(10,119,213,1)), color-stop(79%,rgba(83,159,225,1)), color-stop(100%,rgba(135,188,234,1))); /* Chrome,Safari4+ */<br /><br /> <br />background: -webkit-linear-gradient(top, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* Chrome10+,Safari5.1+ */<br /><br /> <br />background: -o-linear-gradient(top, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* Opera 11.10+ */<br /><br /> <br />background: -ms-linear-gradient(top, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* IE10+ */<br /><br /> <br />background: linear-gradient(to bottom, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* W3C */<br /><br /> <br />filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=0 ); /* IE6-9 */<br /><br /> <br />}</p> Vijay Kumarhttp://www.blogger.com/profile/06184667566362408473noreply@blogger.com0tag:blogger.com,1999:blog-6967740613838582240.post-41220666413415774272012-08-23T19:24:00.001-07:002012-08-23T19:24:15.667-07:00jquerymobile dynamically changing button text and multiple buttons in Header<p>Couple of interesting discussions.</p> <p>I had a button which had to toggle between Spin Start and   Spin Stop text. When I implemented this in JQuery Mobile after the first press the button and text sizes became smaller. Then I came across this fix given in</p> <p> <a href="http://stackoverflow.com/questions/10094816/jquerymobile-dynamically-changing-text-for-button-issue">jquerymobile dynamically changing text for button issue</a>.</p> <p>I did the fix suggested by Hexagonal </p> <p>$('#svbutton .ui-btn-text').text(currentTimeString); which worked like a charm.</p> <p>I wanted to have the title, Spin, Info and Settings button in the header. Unfortunately this is not possible as described in this discussion </p> <p><a href="http://forum.jquery.com/topic/adding-more-buttons-to-header">Adding more buttons to header</a></p> <p>So I had to move the Spin button to the Content section.</p> Vijay Kumarhttp://www.blogger.com/profile/06184667566362408473noreply@blogger.com0tag:blogger.com,1999:blog-6967740613838582240.post-57521379897932280742012-08-21T06:20:00.001-07:002012-08-21T12:59:26.166-07:00HTML Javascript IDE for development and Tips for Developing with Visual Studio Express<p>When I have a web page development project or issue, I try to divide the project into smaller tasks and do experimental web pages to try out new ideas or resolve bugs. </p> <p>So I needed a development IDE for HTML, Javascript and CSS. Tried Aptana Studio, Microsoft Expression Web 4 and Visual Studio Express, netbeans.</p> <p>Found <a href="http://www.microsoft.com/visualstudio/en-us/products/2010-editions/express">Visual Studio 2010 Express Products</a> to be  the best. I have to warn you that I am little bit prejudiced because I am very familiar with Visual Studio because of my C#, .net, Silverlight development experience.</p> <p>What I like about the IDE is it has some Intellisense, you can collapse divs in HTML . For example if you want to add a reference like the following </p> <p><script src="js/triangle_1.js" type="text/javascript"></script></p> <p>you can just drag the file from the folder view and drop it in your html file.</p> <p>I did not want to create a web site for the small files I work with. I already had a few HTML files and associated folders with Javascript and CSS files in a folder with name JQM1. I asked the Visual Studio Express to start a new empty C# web solution and pointed to the JQM1 folder. It said you already have a project, I said yes and the folders showed up.</p> <p>You can also look at the html pages using the File Web browser option. Since I work a lot with CSS3, I have designated Safari as my default browser and it works fine!</p> <p>Try it , you may like it. One warning though the installation process took more than an hour and there is a registration process for Visual Studio Express using windows live id, but it is free!</p> <p>Excellent reference <a href="http://www.dofactory.com/ShortCutKeys/ShortCutKeys.aspx">Visual Studio shortcut keys</a></p> Vijay Kumarhttp://www.blogger.com/profile/06184667566362408473noreply@blogger.com2tag:blogger.com,1999:blog-6967740613838582240.post-62567591549706537572012-08-19T18:59:00.001-07:002012-08-20T06:26:07.015-07:00CSS prefix issue and Modernizr Prefixed<p>If you are doing any CSS development using Javascript you must be aware of prefixes like -moz-transform, -webkit-transform, -o-transform required by Firefox, Safari and Opera. Safari and Chrome use the same –webkit- prefix. </p> <p>You can use  <a href="http://modernizr.com/">Modernizr</a> to simplify the task.</p> <p>the article <a href="http://www.andismith.com/blog/2012/02/modernizr-prefixed/">Modernizr Prefixed</a> by Andi Smith is a definite read.</p> <p>In this article Andi explains how you can use Modernizr to simplify your life.</p> <p>Typical usage:</p> <p>In HTML page</p> <p><script src="js/modernizr.js"></script></p> <p>In the Javascript</p> <p>var car_cont=document.getElementById('carousel_container') ; <br />     <br />car_cont.style[Modernizr.prefixed('perspective')]  = '1100px'; <br /></p> <p>This is equivalent to the CSS statement</p> <p>-webkit-perspective: 1100px; <br />moz-perspective: 1100px; <br />-o-perspective: 1100px; ----and so on.</p> <p>Some more references from <a href="http://www.w3schools.com/">W3Schools</a></p> <ol> <li><a href="http://www.w3schools.com/cssref/css3_browsersupport.asp">CSS3 Browser Support Reference</a> </li> <li><a href="http://www.w3schools.com/cssref/default.asp">CSS Reference</a> </li> <li>example: <a href="http://www.w3schools.com/cssref/css3_pr_perspective.asp">CSS3 perspective Property</a> <br /></li> </ol> Vijay Kumarhttp://www.blogger.com/profile/06184667566362408473noreply@blogger.com0tag:blogger.com,1999:blog-6967740613838582240.post-22185928465493804772012-08-19T18:51:00.001-07:002012-08-19T18:51:24.055-07:00CSS 3d Transforms for Safari, Chrome and Firefox<p>I am now developing a 3d Carousel for use in different browsers. It uses 3d transforms available in Safari, Chrome and Firefox. Unfortunately IE 9 and Opera do not seem to support it.</p> <p>The following references are excellent resources.</p> <ol> <li><a href="http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Using2Dand3DTransforms/Using2Dand3DTransforms.html">Using 2D and 3D Transforms</a> is an excellent place to start</li> <li><a href="http://css3.bradshawenterprises.com/">CSS3 Transitions, Transforms and Animation Tutorial</a> has excellent tutorial.</li> <li><a href="http://desandro.github.com/3dtransforms/">Intro to CSS 3D transforms</a> has very good step by step approach which explains the fundamentals of transforms and how to implement it with CSS3.</li> <li><a href="http://www.professorcloud.com/mainsite/carousel.htm/">Cloud Carousel - A 3d Carousel in Javascript</a> does not use CSS 3d and done in Javascript</li> <li><a href="http://css-infos.net/">CSS Infos</a> is an excellent reference site.</li> <li><a href="http://matthewlein.com/ceaser/">Ceaser CSS EASING ANIMATION TOOL</a> is worth visiting.</li> <li><a href="http://lea.verou.me/css3-tools/">CSS3 tools</a> is also worth visiting.</li> <li><a href="http://superdit.com/2011/01/06/rotating-image-using-jquery/">Rotating Image Using JQuery</a> has also some introductory information.</li> </ol> Vijay Kumarhttp://www.blogger.com/profile/06184667566362408473noreply@blogger.com0tag:blogger.com,1999:blog-6967740613838582240.post-35759687074120255052012-08-19T18:12:00.000-07:002012-08-19T18:33:08.178-07:00JQuery Mobile Interesting Links to get started<p>If you are looking for a good platform to design applications for Iphone, Ipad, Android and Windows phone, you should definitely consider a browser based approach using JQuery Mobile. Jquery Mobile has very good user interface and page transition mechanisms. </p> <p><a href="http://jquerymobile.com/">Jquery Mobile 1.2. 0 Alpha</a> has been released.</p> <p><a href="http://jquerymobile.com/demos/1.1.1/">Jquery Mobile Docs</a> has excellent documentation</p> <p><a href="http://jquerymobile.com/test/docs/about/getting-started.html">Quick start guide</a> is a good place to start.</p> <p>Eric Sarrion has an excellent  <a href="http://the-jquerymobile-tutorial.org/">The jQuery Mobile tutorial</a> which has lot of useful information about how to construct basic pages, buttons, sliders etc.</p> <p><a href="http://www.webdesignerdepot.com/2011/05/10-handy-jquery-mobile-tips-and-snippets-to-get-you-started/">10 handy jQuery mobile tips and snippets to get you started</a> has excellent tips.</p> <p>You can also look at <a href="http://www.jquery4u.com/mobile/50-jquery-mobile-development/">50 jQuery Mobile Development Tips</a>.</p> Vijay Kumarhttp://www.blogger.com/profile/06184667566362408473noreply@blogger.com0tag:blogger.com,1999:blog-6967740613838582240.post-88761659734028082122012-08-06T11:43:00.001-07:002012-08-06T11:44:38.571-07:00Moved To RTPMoved to North Carolina, RTP area. Have been busy with the move and other projects, hence could not write the blog. Now working on HTML5 and JQuery Mobile. Stay tuned for new blogs.Vijay Kumarhttp://www.blogger.com/profile/06184667566362408473noreply@blogger.com0tag:blogger.com,1999:blog-6967740613838582240.post-25911405597289951882012-08-06T11:40:00.001-07:002012-08-06T11:40:18.636-07:00Android emulator installing Google APIs<p>Tried installing google APIs with the Android SDK manager  and got permission denied message.</p> <p>Run the Android SDK manager by right clicking on the context menu and it works.</p> <p>reference</p> <p><a href="http://androidforums.com/developer-101/227780-installing-android-sdk-packages.html">Installing Android SDK packages</a></p> Vijay Kumarhttp://www.blogger.com/profile/06184667566362408473noreply@blogger.com0tag:blogger.com,1999:blog-6967740613838582240.post-45462060453029714922011-10-11T15:21:00.001-07:002011-10-11T15:21:08.927-07:00Android, Phonegap, Jquery Mobile and Eclipse<p>The following 2 references should get you started with Android, Phonegap, Jquery mobile.</p> <ol> <li> <a href="http://wiki.phonegap.com/w/page/30862722/phonegap-android-eclipse-quickstart">phonegap-android-eclipse-quickstart</a> gives all the steps needed to run a phonegap application with Android and Eclipse. After building the first sample project follow closely the steps given for new project. </li> <li><a href="http://wiki.phonegap.com/w/page/36868306/UI-Development-using-jQueryMobile">UI Development using jQueryMobile</a> gives steps to integrate Jquery mobile to the mix. </li> </ol> <p>The 2nd example uses Phonegap version 0.9. Updating to the recent version of phonegap is easy. However an extra XML folder in phonegap res (as mentioned in the first reference) should also be copied!</p> <p>In reference 2 the download code and the listing in the blog are different. The blog source HTML works.</p> Vijay Kumarhttp://www.blogger.com/profile/06184667566362408473noreply@blogger.com0tag:blogger.com,1999:blog-6967740613838582240.post-69593964532697268382011-10-06T09:13:00.001-07:002011-10-06T09:13:23.192-07:00Jquery mobile, Xampp, Android and WP7.1<p>Downloaded Jquery Mobile RC1. Looks great. The demo files are great to look at for examples. Unfortunately it is little bit more complicated to get it working locally so that you can look at the source code.</p> <p>For this go to the  <a href="https://github.com/jquery/jquery-mobile">Github repo</a> download the zip file. It is a daily build. For example the version I downloaded was jquery-jquery-mobile-1.0rc1-33-gda2352a. </p> <p>I unzipped it and copied all the files  and copied them to </p> <p>C:\jqm2\docs\docs_rc1 folder.</p> <p>In XAMPP to avoid conflicts with IIS I did the following changes in the  httpd.conf file in  C:\xampp\apache\conf: </p> <ol> <li> #Listen 80 to <br />Listen 8080</li> <li>#ServerName localhost:80 <br />ServerName localhost:8080</li> <li>#DocumentRoot "C:/xampp/htdocs" <br />to DocumentRoot "C:\jqm2\docs"</li> </ol> <p>The first 2 changes avoid a conflict with IIS which was in 80 port in my machine.</p> <p>Then I am able to browse the demo files by staring XAMPP and looking at the following web page </p> <p><a title="http://localhost:8080/docs_rc1/" href="http://localhost:8080/docs_rc1/">http://localhost:8080/docs_rc1/</a></p> <p>Tested on both Windows Phone 7 with SDK7.1 and Android emulators. Works great.</p> <p>Remember to press F8 in Android emulator to get web access and instead of localhost you have to use 10.0.2.2 as given in references below.</p> <ol> <li><a href="http://www.droidnova.com/ever-tried-localhost-with-the-android-emulator,102.html">Ever tried ‘localhost’ with the android emulator ?</a></li> <li><a href="http://stackoverflow.com/questions/2437366/android-emulator-internet-access">Android - Emulator internet access</a></li> </ol> Vijay Kumarhttp://www.blogger.com/profile/06184667566362408473noreply@blogger.com0tag:blogger.com,1999:blog-6967740613838582240.post-53396780115522801032011-08-03T19:08:00.001-07:002011-08-03T19:08:39.549-07:00Silverlight Interesting Links for PathListBox<p>I am in the process of preparing an article for Codeproject. I have used the following links to work with PathListBox, geometry etc. I thought I will share these links with others.</p> <ol> <li><a href="http://www.codeproject.com/KB/WPF/SpirographShapes.aspx">Spirograph Shapes: WPF Bezier Shapes from Math Formulae</a></li> <li><a href="http://www.codeproject.com/KB/expression/BusyBee.aspx">Busy Dizzy Bee-sley Spirographic Animation in Expression Blend & Silverlight</a></li> <li><a href="http://www.codeproject.com/KB/WPF/WPFCarouselControl.aspx">WPF: Carousel Control</a></li> <li><a href="http://msdn.microsoft.com/en-us/library/cc189068(v=VS.95).aspx">Geometries</a></li> <li><a href="http://coffeefueled.org/2011/05/04/silverlight-pathlistbox-fading-unselected-items/">Silverlight PathListBox – Fading Unselected Items</a></li> <li><a href="http://coffeefueled.org/2011/05/13/pathlistbox-scrolling-to-selected-item/">PathListBox – Scrolling to Selected Item</a></li> <li><a href="http://kiwigis.blogspot.com/2010/06/cloning-path-geometry-in-silverlight.html">cloning path geometry in silverlight</a></li> <li><a href="http://stringtopathgeometry.codeplex.com/">Silverlight String-To-PathGeometry Converter</a></li> <li><a href="http://blogs.microsoft.co.il/blogs/alex_golesh/archive/2008/10/09/silverlight-treeview-and-string-to-pathgeometry-converter-projects-updated-to-rc0-syntax.aspx">Alex Golesh's Blog About Silverlight Development</a></li> <li><a href="http://www.codeproject.com/KB/silverlight/SilverlightGlassOrbButton.aspx">A Glass Orb Button in Silverlight</a></li> <li><a href="http://www.microsoft.com/design/toolbox/tutorials/pathlistbox/carousel.aspx">Creating a carousel with the PathListBox</a></li> <li><a href="http://www.microsoft.com/design/toolbox/tutorials/pathlistbox/">An introduction to the PathListBox</a></li> <li><a href="http://wrb.home.xs4all.nl/Articles/Article_WPFPathMiniLang_02.htm">NET.2971 - XAML Path mini-language (Silverlight)</a></li> <li><a href="http://www.shinedraw.com/3d-illusion/3d-spiral-image-rotation-for-mix-09-challenge/">3D Spiral Image Rotation for MIX 09 Challenge</a></li> <li><a href="http://www.charlespetzold.com/blog/2006/03/211105.html">Render Transform versus Layout Transform</a><a href="http://programmerpayback.s3.amazonaws.com/NamedColors.html">Named Colors Viewer</a></li> <li><a href="http://www.ssa.gov/cgi-bin/popularnames.cgi">Popular Baby Names</a></li> <li><a href="http://www.microsoft.com/design/toolbox/tutorials/pathlistbox/motionpath.aspx">Creating a motion path with the PathListBox</a></li> </ol> Vijay Kumarhttp://www.blogger.com/profile/06184667566362408473noreply@blogger.com0tag:blogger.com,1999:blog-6967740613838582240.post-76041191154963336312011-06-17T11:22:00.001-07:002011-06-17T11:22:37.880-07:00Windows phone 7 data visualization chart<p>I have made interesting charts on Windows Phone 7 based on various blog posts on this topic.</p> <p>David Anson has a series of posts in his blogs</p> <p><a href="http://blogs.msdn.com/b/delay/">Delay's Blog</a></p> <p>For basic charts use this:</p> <p><a href="http://blogs.msdn.com/b/delay/archive/2010/04/20/phone-y-charts-silverlight-wpf-data-visualization-development-release-4-and-windows-phone-7-charting-sample.aspx">Phone-y charts [Silverlight/WPF Data Visualization Development Release 4 and Windows Phone 7 Charting sample!]</a></p> <p>The interesting portion in Windows Phone 7 is to load the exact assemblies from this code.</p> <p>To modify colors  I used the following post</p> <p><a href="http://blogs.msdn.com/b/delay/archive/2009/05/19/chart-tweaking-made-easy-how-to-make-four-simple-color-tooltip-changes-with-silverlight-wpf-charting.aspx">Chart tweaking made easy [How to: Make four simple color/ToolTip changes with Silverlight/WPF Charting]</a></p> <p>Also I have been able to rotate the labels on column chart X axis by using this post</p> <p><a href="http://blogs.msdn.com/b/delay/archive/2010/03/06/turn-your-head-and-check-out-this-post-how-to-easily-rotate-the-axis-labels-of-a-silverlight-wpf-toolkit-chart.aspx">Turn your head and check out this post [How to: Easily rotate the axis labels of a Silverlight/WPF Toolkit chart]</a></p> Vijay Kumarhttp://www.blogger.com/profile/06184667566362408473noreply@blogger.com0tag:blogger.com,1999:blog-6967740613838582240.post-10006920462322865702011-06-14T10:55:00.001-07:002011-06-14T10:55:23.499-07:00Autocompletebox with long lists for windows phone 7<p>I recently was working with a list of American cities which has around 19000 cities in WP7 application. I wanted to use the autocompletebox which will be helpful to find a name fast. However, the autocompletebox was sluggish. Hence I created a list of lists. The lists where for each alphabet which reduced the list sizes to reasonable size. I also used LINQ to get the city name. </p> <p>When I tested in WP7 I got all searches under 100 milliseconds and most of them around 2 to 30 milliseconds.</p> <p>Another thing I found out is the autocompletebox does not like Pivot control. The selection list offsets to the top of the screen with the first selection completely masked!</p> <p>See the reference below</p> <p><a href="Using AutoCompleteBox in a Windows Phone Panorama or Pivot item ">http://www.jeff.wilcox.name/2011/03/acb-in-pivot/</a></p> <p>The XAML and the code are given below. This also used the textbox substitution to make sure the initial display did not have the drop down of the autocompletebox as per this forum discussion which I initiated:</p> <p><a href="http://forums.silverlight.net/forums/t/230696.aspx">AutoCompleteBox initial value in Windows Phone 7</a></p><pre class="csharpcode"> <StackPanel Grid.Row=<span class="str">"0"</span> Orientation=<span class="str">"Horizontal"</span> HorizontalAlignment=<span class="str">"Stretch"</span>><br /> <toolkit:AutoCompleteBox ItemsSource=<span class="str">"{Binding}"</span> x:Name=<span class="str">"City_Name_TextBox"</span> ValueMemberPath=<span class="str">"CityName"</span><br /> Width=<span class="str">"370"</span> Visibility=<span class="str">"Collapsed"</span> MinimumPopulateDelay=<span class="str">"200"</span> <toolkit:AutoCompleteBox.ItemTemplate><br /> <DataTemplate ><br /> <StackPanel VerticalAlignment=<span class="str">"Stretch"</span> ><br /> <TextBlock Text=<span class="str">"{Binding CityName}"</span> /><br /> </StackPanel><br /> </DataTemplate><br /> </toolkit:AutoCompleteBox.ItemTemplate><br /> </toolkit:AutoCompleteBox><br /> <TextBox Width=<span class="str">"300"</span> x:Name=<span class="str">"City_Name_TextBox_Init"</span> Visibility=<span class="str">"Visible"</span> Text=<span class="str">"Palo Alto"</span> MouseLeftButtonDown=<span class="str">"City_Name_TextBox_Init_MouseLeftButtonDown"</span>></TextBox><br /> <Button x:Name=<span class="str">"Go_Button"</span> Width=<span class="str">"100"</span> Content=<span class="str">"GO"</span> Click=<span class="str">"Go_Button_Click"</span> ></Button><br /></StackPanel></pre><pre class="csharpcode"> </pre><pre class="csharpcode"> <span class="kwrd">private</span> <span class="kwrd">void</span> City_Name_TextBox_Init_MouseLeftButtonDown(<span class="kwrd">object</span> sender, MouseButtonEventArgs e)<br /> {<br /> City_Name_TextBox_Init.Visibility = System.Windows.Visibility.Collapsed;<br /> City_Name_TextBox.Visibility = System.Windows.Visibility.Visible;<br /> City_Name_TextBox.Text = <span class="str">""</span>;<br /> City_Name_TextBox.Focus();<br /> <span class="rem">// City_Name_TextBox.Focus();</span><br /> } </pre><pre class="csharpcode"> </pre><pre class="csharpcode"> <span class="kwrd">public</span> <span class="kwrd">void</span> Load_City_Alpha()<br /> {<br /> <span class="kwrd">string</span>[] abclist = <span class="kwrd">new</span>[] { <span class="str">"a"</span>, <span class="str">"b"</span>, <span class="str">"c"</span>,<span class="str">"d"</span>,<span class="str">"e"</span>,<span class="str">"f"</span>,<span class="str">"g"</span>,<span class="str">"h"</span>,<span class="str">"i"</span>,<span class="str">"j"</span>,<br /> <span class="str">"k"</span>,<span class="str">"l"</span>,<span class="str">"m"</span>,<span class="str">"n"</span>,<span class="str">"o"</span>,<span class="str">"p"</span>,<span class="str">"q"</span>,<span class="str">"r"</span>,<span class="str">"s"</span>,<span class="str">"t"</span>,<br /> <span class="str">"u"</span>,<span class="str">"v"</span>,<span class="str">"w"</span>,<span class="str">"x"</span>,<span class="str">"y"</span>,<span class="str">"z"</span>};<br /> <span class="kwrd">int</span> salphaselectormax=26;<br /> DateTime dtstart = DateTime.Now ;<br /> <br /> <span class="kwrd">for</span> ( <span class="kwrd">int</span> salphaselector = 0; salphaselector < salphaselectormax; salphaselector++)<br /> {<br /> <span class="kwrd">string</span> salpha = abclist[salphaselector];<br /> city_list_abc.Add( (from n <span class="kwrd">in</span> citylist<br /> <span class="kwrd">where</span> n.CityName.ToLower().StartsWith(salpha)<br /> select n).ToList());<br /> <br /> <br /> }<br /> <span class="rem">//List<string> testlistlength = new List<string>();</span><br /> <span class="rem">//for (int i = 0; i < 26; i++)</span><br /> <span class="rem">//{</span><br /> <span class="rem">// testlistlength.Add(abclist[i]+"--" + city_list_abc[i].Count.ToString());</span><br /> <span class="rem">//}</span><br /> DateTime dtend = DateTime.Now;<br /> <span class="kwrd">int</span> dtduration = (dtend - dtstart).Milliseconds;<br /> <br /> }</pre><pre class="csharpcode"> <span class="kwrd">private</span> <span class="kwrd">void</span> City_Name_TextBox_Populating(<span class="kwrd">object</span> sender, PopulatingEventArgs e)<br /> {<br /> <span class="rem">// Allow us to wait for the response</span><br /> DateTime dtstart = DateTime.Now;<br /> e.Cancel = <span class="kwrd">true</span>;<br /> <span class="rem">//only query web service if more than 3 chars</span><br /> <br /> <span class="kwrd">if</span> (City_Name_TextBox.Text.Length >= 3)<br /> {<br /> <span class="rem">// Create a request for suggestion</span><br /> <span class="kwrd">int</span> listindex = Array.IndexOf(abclist, City_Name_TextBox.Text.ToLower().Substring(0,1));<br /> List<City> results = (from n <span class="kwrd">in</span> (Application.Current <span class="kwrd">as</span> App).city_list_abc[listindex]<br /> <span class="kwrd">where</span> n.CityName.ToLower().StartsWith(City_Name_TextBox.Text.ToLower())<br /> select n).ToList(); <br /> City_Name_TextBox.ItemsSource = results;<br /> City_Name_TextBox.PopulateComplete();<br /> }<br /> DateTime dtend = DateTime.Now;<br /> <span class="kwrd">int</span> dtduration = (dtend - dtstart).Milliseconds;<br /> Timer_TextBox.Text = dtduration.ToString();<br /> }</pre><br /><style type="text/css">.csharpcode, .csharpcode pre<br />{<br /> font-size: small;<br /> color: black;<br /> font-family: consolas, "Courier New", courier, monospace;<br /> background-color: #ffffff;<br /> /*white-space: pre;*/<br />}<br />.csharpcode pre { margin: 0em; }<br />.csharpcode .rem { color: #008000; }<br />.csharpcode .kwrd { color: #0000ff; }<br />.csharpcode .str { color: #006080; }<br />.csharpcode .op { color: #0000c0; }<br />.csharpcode .preproc { color: #cc6633; }<br />.csharpcode .asp { background-color: #ffff00; }<br />.csharpcode .html { color: #800000; }<br />.csharpcode .attr { color: #ff0000; }<br />.csharpcode .alt <br />{<br /> background-color: #f4f4f4;<br /> width: 100%;<br /> margin: 0em;<br />}<br />.csharpcode .lnum { color: #606060; }<br /></style><br /><br /><style type="text/css">.csharpcode, .csharpcode pre<br />{<br /> font-size: small;<br /> color: black;<br /> font-family: consolas, "Courier New", courier, monospace;<br /> background-color: #ffffff;<br /> /*white-space: pre;*/<br />}<br />.csharpcode pre { margin: 0em; }<br />.csharpcode .rem { color: #008000; }<br />.csharpcode .kwrd { color: #0000ff; }<br />.csharpcode .str { color: #006080; }<br />.csharpcode .op { color: #0000c0; }<br />.csharpcode .preproc { color: #cc6633; }<br />.csharpcode .asp { background-color: #ffff00; }<br />.csharpcode .html { color: #800000; }<br />.csharpcode .attr { color: #ff0000; }<br />.csharpcode .alt <br />{<br /> background-color: #f4f4f4;<br /> width: 100%;<br /> margin: 0em;<br />}<br />.csharpcode .lnum { color: #606060; }<br /></style><br /><br /><style type="text/css"><br />.csharpcode, .csharpcode pre<br />{<br /> font-size: small;<br /> color: black;<br /> font-family: consolas, "Courier New", courier, monospace;<br /> background-color: #ffffff;<br /> /*white-space: pre;*/<br />}<br />.csharpcode pre { margin: 0em; }<br />.csharpcode .rem { color: #008000; }<br />.csharpcode .kwrd { color: #0000ff; }<br />.csharpcode .str { color: #006080; }<br />.csharpcode .op { color: #0000c0; }<br />.csharpcode .preproc { color: #cc6633; }<br />.csharpcode .asp { background-color: #ffff00; }<br />.csharpcode .html { color: #800000; }<br />.csharpcode .attr { color: #ff0000; }<br />.csharpcode .alt <br />{<br /> background-color: #f4f4f4;<br /> width: 100%;<br /> margin: 0em;<br />}<br />.csharpcode .lnum { color: #606060; }</style><br /><br /><style type="text/css"><br />.csharpcode, .csharpcode pre<br />{<br /> font-size: small;<br /> color: black;<br /> font-family: consolas, "Courier New", courier, monospace;<br /> background-color: #ffffff;<br /> /*white-space: pre;*/<br />}<br />.csharpcode pre { margin: 0em; }<br />.csharpcode .rem { color: #008000; }<br />.csharpcode .kwrd { color: #0000ff; }<br />.csharpcode .str { color: #006080; }<br />.csharpcode .op { color: #0000c0; }<br />.csharpcode .preproc { color: #cc6633; }<br />.csharpcode .asp { background-color: #ffff00; }<br />.csharpcode .html { color: #800000; }<br />.csharpcode .attr { color: #ff0000; }<br />.csharpcode .alt <br />{<br /> background-color: #f4f4f4;<br /> width: 100%;<br /> margin: 0em;<br />}<br />.csharpcode .lnum { color: #606060; }</style> Vijay Kumarhttp://www.blogger.com/profile/06184667566362408473noreply@blogger.com1