Monday, August 11, 2014

Google Charts: How to change axis, legend styles beyond what is provided by the API

If you are familiar with Google Charts, you know that you need to pass a 'Configuration Options' object when drawing a chart. Properties of that object for bar charts are found here.

For a recent project I worked, I needed to show the axis and legend labels as 'clickable' links hence I needed to show the cursor as a 'hand/pointer' when hovered above them. But Google Charts API only provides a limited set of styling for axis and legend labels. More precisely it only supports color, fontName, fontSize, bold, italic & underline styles.

But after inspecting the generated HTML DOM for the charts, I figured out a simple way to manipulate the elements properties and change the styling the way you want.

I prefer jQuery so here goes how the vertical axis labels were manipulated:
 $('text[text-anchor=end]').each(
  function (index, value) {
   $(value).attr('cursor', 'pointer');
   ...
  });

Here's how the horizontal axis labels were manipulated:
 
 $('text[text-anchor=middle]').each(
  function (index, value) {
   $(value).attr('cursor', 'pointer');
   ...
  });

Here's how the legend labels were manipulated:
 
 $('text[text-anchor=start]').each(
  function (index, value) {
   $(value).attr('cursor', 'pointer');
   ...
  });

If you are a plain JavaScript guy, here you go:
 
 var labels = document.querySelectorAll('text[text-anchor=end]');
 for (var i = 0; i < labels.length; i++) {
  labels[i].setAttribute('cursor', 'pointer');
  ...
 }

Make sure you understand that the above hacks basically set the styling to every matching element found on the page. So if you have multiple charts on the same page and you need styling done individually, you will have to check additional properties of those elements inside the loops to determine which chart they belong to.

If you need further clarification on this, post it as a comment :)

Sunday, August 10, 2014

Android: Implementing a One-Way Lockable View Pager

While implementing a fun Android app, I came across a scenario where the ViewPager should only be swiped right-to-left. Visiting back should be restricted. Also at some points, I needed to lock the whole view pager so that it cannot be swiped at any direction.

The following code shows how I did it by extending the ViewPager class. Note that I was using the support library.


 
 import android.content.Context;
 import android.support.v4.view.ViewPager;
 import android.util.AttributeSet;
 import android.view.MotionEvent;

 public class OneWayLockableViewPager extends ViewPager {  
   private boolean enabled;  
   private float lastX;  

   public OneWayLockableViewPager(Context context, AttributeSet attrs) {  
     super(context, attrs);  
     this.enabled = true;  
   }  

   @Override  
   public boolean onTouchEvent(MotionEvent event) {  
     if (this.enabled) {  
       boolean lockScroll;  
       switch (event.getAction()) {  
         case MotionEvent.ACTION_MOVE:  
           lockScroll = lastX <= event.getX();  
           break;  
         default:  
           lockScroll = false;  
           lastX = event.getX();  
           break;  
       } 
       return lockScroll ? false : super.onTouchEvent(event);    
     }  
     return false;  
   }  

   @Override  
   public boolean onInterceptTouchEvent(MotionEvent event) {  
     if (this.enabled) {  
       return super.onInterceptTouchEvent(event);  
     }  
     return false;  
   }  

   public void lock() {  
     this.enabled = false;  
   }  

   public void unlock() {  
     this.enabled = true;  
   }  
 }  

It is quite easy to change it if you want to reverse the allowed direction of swiping. Just change the less than or equal sign to a greater than sign in line number 21.

Also when you want to lock down the whole view pager, just call the lock() method and swiping will be disabled.

Wednesday, June 25, 2014

SLT Usage Meter goes Android!

Get the Android App here:
https://play.google.com/store/apps/details?id=lk.elnino.sltusagemeter

Finally I had time to spare on this pet project, which the idea was originally coined by one of my colleagues who writes cool Android apps. Initially I thought this wouldn't be any use to have as a mobile app but then again when I thought that it could be useful as a widget on the home screen, I got motivated to try. Simply because I have not written any widgets for Android before :)


I got to say that this ain't the only app on the play store which can check your SLT broadband usage. I've seen a couple of others which basically does the same thing. So why I wrote yet another one? Because none of them had a home screen widget or notifies you when the limit is reached.


Let's have a look at the party piece.

This widget is shown at the bottom. I just cropped the home screen. The green and yellow bars show the percentage used. When you touch the widget, the numbers change to either show the percentages, used GBs or unused GBs. No surprise there, it works just like the browser widgets.

When you touch the icon, the usage is updated. Anyhow the app updates the usage automatically in the background, but if you want you can turn off that feature.



When you reach the end of your monthly limit, you will get notified whether you had the widget or not. Then again that'll also work if the auto updates are enabled.






The main app looks like this. Nothing to brag though.

 

So there you have it. Try it out and let me know how it is.
As always, it's free and not adware.

Enjoy!


Monday, February 3, 2014

Android: How to embed Google Map

Well here I am specifically talking about getting it done with Android Studio and with Maps API v2.

First of all you need the Google Play services downloaded using the SDK Manger.


Then add the Google Play services version to your app's manifest file.
<meta-data
    android:name="com.google.android.gms.version"
    android:value="@integer/google_play_services_version" />
Get your Google Maps API key.

  • Go here: https://code.google.com/apis/console/?noredirect and click 'Cloud Console' link.
  • Register a project there and turn on your Google Maps Android App v2 Service
  • Create a new key under APIs & auth -> Credentials
  • Add the key information to the manifest. See below.
<meta-data
    android:name="com.google.android.maps.v2.API_KEY"
    android:value="AasdJHJHKSDHfcFJLbZhndBC_fdsd1KEHk"/>
Add permissions in the manifest to access Internet.
<uses-permission android:name="android.permission.INTERNET"/>
Add a map fragment to your layout. Note that I have used SupportMapFragment. That comes with Android Support Repository.
<fragment 
          android:id="@+id/map"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          class="com.google.android.gms.maps.SupportMapFragment"/>
Check device compatibility. If Google Play Services are not up-to-date on the phone, this will let the user to update then and there.
SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map);
int mapResult = GooglePlayServicesUtil.isGooglePlayServicesAvailable(this);
if (mapResult != ConnectionResult.SUCCESS) {
    GooglePlayServicesUtil.getErrorDialog(mapResult, this, 0).show();
} else {
    mapFragment.getMap().animateCamera(CameraUpdateFactory.zoomIn());
}
That's about it. Now the map should be visible on your app. If not, patiently go through the above check-list again and see what you have missed :)

Monday, January 6, 2014

All new SLT Usage Meter is here!

The SLT has revamped their website and not surprisingly has fixed the security hole too, which enabled us to grab the usage data only by giving the user id. Now users are required to create a new profile here in order to view their usage.

Sadly this made my 'SLT Usage Meter' browser add-ons obsolete. Well technically for few days, until I found some spare time to figure out the new thing. Hey SLT, we are still keeping up :)

I have updated add-ons for Chrome and Firefox both, which now work fine with the new portal login credentials. Now you need to enter the password as well so the gadjet's wow factor is gone, but that's the way it is...

I changed the icon and the layout of the gadjet too. Special thanks to GK, who supplied me with a sample icon and encouraged me to make it more eye candy. Please feel free to comment about what you think of the new look. Thank you.

Download links:
Chrome: https://chrome.google.com/webstore/detail/slt-usage-meter/hofjanlkemfjdabokampgoehhfifbbjc
Firefox: https://addons.mozilla.org/en-US/firefox/addon/slt-usage-meter

Touchpad not working on CloudReady / Chrome OS? Here's how to fix it!

Covid-19 break seems to be opening up interesting avenues for me. I started a storeroom cleanup activity and I found an old laptop which I s...