Umer Pasha Blogs

www.umerpasha.com

Simplest Phonegap Barcode reader example

Created a small app last night to read barcodes.

 

Nothing fancy. Just a button to invoke the barcode reader camera and then returns the barcode number along with the barcode standard.

 

You can get it here:

 UmerBarcodeReader_QR

 

Checked on iPhone 5S and Android Kit Kat.

 

I am only using an html file and a js file along with the config.xml.

 

You can get the code from my github repository. You can remove the resource files from config.xml. I just got it from the base template.

 https://github.com/genrex/PhonegapBarcode

 

Instructions:

 

  1. To add the plugin , in Config.xml you need to have:

<gap:plugin name=”com.phonegap.plugins.barcodescanner”/>

 

  1. Write the following javascript to listen for an event (button click) and then start the scanner

 

</p><p>var resultDiv;</p><p> </p><p>document.addEventListener("deviceready", init, false);</p><p>function init() {</p><p>               
 document.querySelector("#startScan").addEventListener("touchend", startScan, false);</p><p>               
 resultDiv = document.querySelector("#results");</p><p>}</p><p> </p><p>function startScan() {</p><p> </p><p>               
 cordova.plugins.barcodeScanner.scan(</p><p>                               function(result) {</p><p>                                               
 var s = "Result: " + result.text + "&lt;br/&gt;" +</p><p>                                               "Format: " + result.format + "&lt;br/&gt;" +</p><p>                                               "Cancelled: " + result.cancelled;</p><p>                                               
 resultDiv.innerHTML = s;</p><p>                               
 },</p><p>                               function(error) {</p><p>                                               
 alert("Scanning failed: " + error);</p><p>                               
 }</p><p>               );</p><p> </p><p>}</p><p> </p><p>

 

 

 

 

 

7 Comments »

jQuery to change size of the Promoted Links in Sharepoint 2013

Sharepoint 2013 comes with standard Metro UI links app called “Promoted Links”. I will not go into how to set them up as you can google it and find various resources for that.

I was trying to put in two strips of promoted links and also wanted the second strip to be smaller than the first giving it a feel of a sub-menu. Coincidentally, there is no out of the box way of doing that. The images seemed to be scaled to 150px fixed.

So I added in a little bit of jQuery to resize them.

Here is the code that goes into a content editor webpart on the same page. Please change the path to your jQuery library reference. Change the image size you want. Change the WPQ number of the promoted link. You can find it by using developer tools on your browser hitting F12. Look for “promotedlinksbody_WPQ” :

<!--JQuery script to make promoted links any size. Also shifts to 2nd row if more than specified tiles. Author: Umer Pasha , Date: 3/15/2013-->

<script type="text/javascript" src="/scripts/jquery/jquery-1.8.1.min.js"></script>


<script language="javascript">
$(document).ready(function () {
 
// Update this value to the number of links you want to show per row
var numberOfLinksPerRow = 10;

// Set Image Size 
var ImageSize = "76";

// in case we have multiple promoted links on page, name the WPQ here
var promotedlinksbody_WPQ = "4";
 
// local variables
var pre = "<tr><td><div class='ms-promlink-body' id='promlink_row_";
var post = "'></div></td></tr>";
var numberOfLinksInCurrentRow = numberOfLinksPerRow;
var currentRow = 1;
// find the number of promoted links we're displaying

var numberOfPromotedLinks = $('#promotedlinksbody_WPQ' + promotedlinksbody_WPQ + ' > .ms-tileview-tile-root').length;
//var numberOfPromotedLinks = $('.ms-promlink-body > .ms-tileview-tile-root').length;

  // if we have more links then we want in a row, let's continue
  if (numberOfPromotedLinks > numberOfLinksPerRow) {
    // we don't need the header anymore, no cycling through links
    $('.ms-promlink-root > .ms-promlink-header').empty();
    // let's iterate through all the links after the maximum displayed link
    for (i = numberOfLinksPerRow + 1; i <= numberOfPromotedLinks; i++) {


      // if we're reached the maximum number of links to show per row, add a new row
      // this happens the first time, with the values set initially
      if (numberOfLinksInCurrentRow == numberOfLinksPerRow) {
        // i just want the 2nd row to
        currentRow++;

 
        // create a new row of links
        $('.ms-promlink-root > table > tbody:last').append(pre + currentRow + post);
        // reset the number of links for the current row
        numberOfLinksInCurrentRow = 0


    }
    

    // move the Nth (numberOfLinksPerRow + 1) div to the current table row
    $('.ms-promlink-body > .ms-tileview-tile-root:nth-child(' + (numberOfLinksPerRow + 1) + ')').appendTo($('#promlink_row_' + currentRow));
    // increment the number of links in the current row
    numberOfLinksInCurrentRow++;

  }
}


	// Set the size of main promoted links body
	var ControlID='promotedlinksbody_WPQ';
	ControlID=ControlID + promotedlinksbody_WPQ;
	$("#" + ControlID).height(ImageSize);
	
	// iterate through each link and set the size
    for (i = 1; i <= numberOfPromotedLinks; i++) {
        
		ControlID='Tile_WPQ' + promotedlinksbody_WPQ + '_' + i ;
		ControlID= ControlID + '_1';
    	$("#" + ControlID).width(ImageSize);
    	$("#" + ControlID).height(ImageSize);
		
		ControlID='Tile_WPQ' + promotedlinksbody_WPQ + '_' + i ;
		ControlID= ControlID + '_2';
    	$("#" + ControlID).width(ImageSize);
    	$("#" + ControlID).height(ImageSize);

		ControlID='Tile_WPQ' + promotedlinksbody_WPQ + '_' + i ;
		ControlID= ControlID + '_7';
    	$("#" + ControlID).width(ImageSize);
		
		ControlID='Tile_WPQ' + promotedlinksbody_WPQ + '_' + i ;
		ControlID= ControlID + '_4';
    	$("#" + ControlID).width(ImageSize);
    	$("#" + ControlID).height(ImageSize);
    	
    	
		ControlID='Tile_WPQ' + promotedlinksbody_WPQ + '_' + i ;
		ControlID= ControlID + '_4';
    	$("#" + ControlID).width(ImageSize);
    	$("#" + ControlID).height(ImageSize);
    	//$("#" + ControlID).top(ImageSize);

	}

	ControlID="promotedlinksheader_WPQ" + promotedlinksbody_WPQ;
	$("#" + ControlID).hide();


});

</script>

Image

 

I am putting the javascript above in a .js file and putting the link to the .js file in a content editor. The content editor is on the same page as the promoted links.

smallPL1

These are the paths to the online vector icons I am using:

http://modernuiicons.com/icons/svg/appbar.reply.calendar.svg
http://modernuiicons.com/icons/svg/appbar.money.svg
http://modernuiicons.com/icons/svg/appbar.man.suitcase.svg
http://modernuiicons.com/icons/svg/appbar.calendar.14.svg
http://modernuiicons.com/icons/svg/appbar.calendar.svg
http://modernuiicons.com/icons/svg/appbar.places.svg

Here is the link to the .js file. Please rename to .js:   Link

 

73 Comments »

Using Adobe Omniture WebServices API in C# and showing data in Telerik grid and charts (Source Code included)

Here is the Source Code right up front: The C# Project File for Visual Studio 2008

If you have used Adobe Omniture Site Catalyst Web Services API, you will know what a hassle it is and how bad the documentation and technical support is. It took me a couple of weeks to reach this point. But that also included mastering a 3rd party grid and charting control from Telerik.

You will need to get a trial version of RadGrid from Telerik here which works for 90 days. You can also modify the attached code to just get the data and delete anything related to Telerik.

You will need to download MS Web Service Enhancement 3. You can get it here.

Make sure you get Web Service Access to the Enterprise API. Instructions are here.

You need to get your specific Site Catalyst WSDL. Here are the instructions. You will use this to add a web reference to your dot net project.

In the web.config, setup the SQL Server Connection String before running. I am storing the data I get from Omniture in SQL Server. I have not provided the SP code here. Mail me if you need help with that. You can remove all the SQL bits from code to not use that.

The project uses API 1.3 which is the latest as of now.

The project also shows getting custom conversion variables “eVar21”. if you are not using them, you can remove the code.


Some important links:

Getting started with Omniture API: https://developer.omniture.com/en_US

Reporting API Tutorial: https://developer.omniture.com/en_US/content_page/enterprise-api/c-reporting-api-tutorial

Leave a comment »

Debugger problem “The breakpoint will not currently be hit. No symbols have been loaded for this document”

I ran into the problem of Visual Studio 2005 not debugging a standard Dot Net 2.0 ASPX based website. It would attach to the process and then show me the darn error at breakpoint “The breakpoint will not currently be hit. No symbols have been loaded for this document”.  Looks like a known issue here at Microsoft.

Anyway, after banging my head on the wall for a an hour or so, it turned out I just needed to go to IIS, go to site properties, click “Configuration” , go to debugging tab and select “Enable Server Side Debugging”. Now, I knew about this but seeing that the same environment and project was debugged correctly for another page, i did not think it could be an issue. but there you have it 🙂

1 Comment »