Updated Open Xdrive Usage Meter

But it seemed to me that as soon as you have computer storage you could put every point you wanted in - make the ones that are less relevant to your central topic, further away or allow the central topic to move as the reader proceeded. - Ted Nelson

In September I wrote about the Open Xdrive Usage Meter Dashboard Widget - since that time version 1.2 of the Open Xdrive API has been released. In addition Mark recently posted about JSON and the eval() trap. With that in mind I thought it would be a good time to update the Open Xdrive widget to use the version 1.2 API and also insulate the widget from any possible security issues.

If you’re unfamiliar with Open Xdrive – Jim Knowlton explained why it’s so cool! In a nutshell – 5GB of online storage – FREE!

Figures 1 and 2 show the Open Xdrive widget in action. The user provides their username and password in the widget configuration. Anytime the Mac OS X dashboard is activated the current usage will be checked. As shown in Figures 3 and 4, the dial will turn yellow once 75% or more of the available space is used, and red once 90% or more of the available space is used.

Figure 1 - The Open Xdrive Usage Meter Front

Figure 2 - The Open Xdrive Usage Meter Back

Figure 3 - The Open Xdrive Usage Meter Warning Mode

Figure 4 - The Open Xdrive Usage Meter Critical Mode

Before we can retrieve the user's usage information, we must authenticate against XDrive, and retrieve the MemberObject, using the member.login method. This is done in the loadUserData function shown in Listing 1. The username and password are retrieved from the user preferences. In version 1.2 of the Open Xdrive API – all calls are made through Https. Https indicates a secure connection, this ensures that the username and password as well as any data returned are encrypted.

Listing 1 - The loadUserData function.


function loadUserData(username,password)
{

	if(loadPref("username") == "*Your Username*") {
	  $("used").innerText = "Set Your Username & Password!";
        } else {
	
	    // Member Login URL
	    var feedURL = "https://plus.xdrive.com/json/v1.2/member.login";
	
	    // Pass JSON Member Object Data
	    var postData = 'data={"user":{"type":"MemberObject","username":"' 
		+ loadPref("username") + '","password":"' + loadPref("password") + '"}}';
	
	    // Create XMLHttpRequest Object
	    var xmlRequest = new XMLHttpRequest();
	
	    // Open a POST request - false indicates we will do this synchronously
	    xmlRequest.open("POST", feedURL, false);
	
	    // Set Headers
	    xmlRequest.setRequestHeader("Cache-Control", "no-cache");
            xmlRequest.setRequestHeader('Content-type','application/x-www-form-urlencoded'); 
	
	    // Post Data
	    xmlRequest.send(postData);

	    // Check for successful POST
	    if (xmlRequest.status == 200) {
	
	      // Evaluate JSON userdata
	      // We specifically will need the JSessionID...
	      userdata = xmlRequest.responseText.evalJSON(true);
	      updateQuotaInfo();
	    }
	}
}

The member.login method is called using the XMLHttpRequest object which allows your web page to request and get a response from a web page without reloading. The MemberObject also contains the session id - which maintains your session information on the XDrive site. This session ID is returned as jsessionid in the MemberObject structure. Note the construction of the postData variable, data= precedes the MemberObject JSON structure. A JSON data structure is returned, which can be parsed into a JavaScript object using the evalJSON method of the Prototype JavaScript library (I've previously discussed the Prototype JavaScript Library here). On a successful post the status will be 200. Once the session ID is retrieved, the updateQuotaInfo method is called, as shown in Listing 2. This method updates the usage information, and is called anytime the widget is displayed.

Listing 2 - The loadUserData function.


function updateQuotaInfo() 
{
	// Call the member.getquota method - we MUST append the prevuously retrieved jsessionid
	// Note jsessionid is lowercase and preceeded by a ; in the URL
	var feedURL = 'http://plus.xdrive.com/json/v1.1/member.getquota;jsessionid=' 
	+ userdata.jsessionid ;
	
	// No data required for getquota - empty JSON structure
	var postData = 'data={}';
	
	var xmlRequest = new XMLHttpRequest();

	// Open a POST request - false indicates we will do this synchronously
	xmlRequest.open("POST", feedURL, false);
	
	// Set Headers
	xmlRequest.setRequestHeader("Cache-Control", "no-cache");
        xmlRequest.setRequestHeader('Content-type','application/x-www-form-urlencoded'); 
	xmlRequest.send(postData);  

	// Check for successful POST	
	if (xmlRequest.status == 200) {	
		// Retrieve UserQuotaObject
		UsageData = xmlRequest.responseText.evalJSON(true);
		
		// Set the attributes for the gauge based on current usage
		gauge.object.setMinValue(0);
		gauge.object.setMaxValue(UsageData.quota.limit);
		gauge.object.setWarningValue(Math.floor(UsageData.quota.limit * 0.75));
		gauge.object.setCriticalValue(Math.floor(UsageData.quota.limit * 0.90));
		gauge.object.setValue(UsageData.quota.used);
		
		// Display the current usage as text inforamtion
		$("used").innerText = "Total Used: " + makeByteString(UsageData.quota.used);
		$("limit").innerText = "Quota: " + makeByteString(UsageData.quota.limit);
	}
}

Want to get started with the Open XDrive API? Here are some resources to begin your exploration:

Interested in native Open XDrive access in Mac OS X - see my posting on The Cocoa Open XDrive Framework

You can download the Open Xdrive Usage Meter widget at http://widgets.idcc.net

Topic Centers

Submit Post