by Nirupam Biswas

Create a Tag field using Django-Select2.

The excellent framework – Select2, have had support for tags for a long time, but Django-Select2 lacked that, until now (version 4.2.0).

Tag fields are very much like any multiple value input field except that it allows users to enter values which does not exist in the backing model. So, that the users can add new tags.

For this purpose few new fields have been added to Django-Select2. They all have the suffix – TagField. Few widgets too have been added to auto configure Select2 Js to run in “tagging mode”.

You can see the full reference in docs – http://django-select2.readthedocs.org/en/latest/ref_fields.html and http://django-select2.readthedocs.org/en/latest/ref_widgets.html.

Simple tag field implementation example

You can find this code in testapp too.

models.py:-

#!python
class Tag(models.Model):
    tag = models.CharField(max_length=10, unique=True)

    def __unicode__(self):
        return unicode(self.tag)

class Question(models.Model):
    question = models.CharField(max_length=200)
    description = models.CharField(max_length=800)
    tags = models.ManyToManyField(Tag)

    def __unicode__(self):
        return unicode(self.question)

forms.py:-

#!python
class TagField(AutoModelSelect2TagField):
    queryset = Tag.objects
    search_fields = ['tag__icontains', ]
    def get_model_field_values(self, value):
        return {'tag': value}

class QuestionForm(forms.ModelForm):
    question = forms.CharField()
    description = forms.CharField(widget=forms.Textarea)
    tags = TagField()

    class Meta:
        model = Question

Above I am trying to create a form which the website users can use to submit questions. Things to note in TagField is that it is almost like we use any other AutoModel fields in Django-Select2, except that here we override one new method get_model_field_values().

When users submit a tag field, the usual validation runs, but with a twist. While checking if the provided value exists, if it is found not to exist then the field, instead of raising error, creates that value. However, the library does not know how to create a new value instance, hence it invokes create_new_value() to do that job.

Model version of the tag field already knows that it is dealing with Django models so it knows how to instantiate that, but does not know what values to set for the attributes. So it implements create_new_value() which in-turn invokes get_model_field_values() to get required attribute names mapped to their values.

Before you continue

One key thing to remember is that unlike other widgets, you ideally should not be using tag widgets with normal Django fields. Django fields do not allow creation of a new choice value. However, if you want tagging support but do not want to allow users to create new tags then you can very much use the tag widget here and pair it up with normal Django fields. However, that may not be a good idea, since then UI would still allow creation of new tags, but on submit the user would get an error.

Making it better

We can make this better and interesting. A typical tagging system should have the following features.

  • Ability to detect misspellings. Peter Norvig’s essay on this is excellent. More information can be found on Stack Overflow.
  • Use statistics to order the results. This very much useful when the tag counts ballon up. The statistics could be based on how many tags are frequently used together. Of course when you start a site you would not have any data, in that case for a period of time you can set the algo to only learn.
  • Cache frequently used tags. This is a normal optimization technique which is frequently used. A memcache like layer is usually used to cache the DB data, and if the data is not found there, then a DB hit is made.
by Nirupam Biswas

Find one’s complement of a decimal number.

One’s complement of a binary number (1001_{2}) is (0110_{2}). That is, we simply flip the bits. This is easy to do in binary. However, if the number is in base 10, then do we do that. Convert that to base 2 then flip the bits and change it back to base 2? Maybe, but if the number is stored in native data types (like int) then we can simply use bitwise not to invert the bits, without any conversion.

In my case it wasn’t so simple. I had a really big number, which had to be stored in BigDecimal. Converting to base 2, back and forth too is very costly. So the efficient algo for that is…

(x’) is the one’s complement of (x) and it has (b) bits, or we are interested in only (b) bits of it.

$$ \begin{align} &x + x’ = 2^{b+1} – 1 \tag{all ones for all b bits} \ &\Rightarrow x’ = 2^{b+1} – 1 – x \ \end{align} $$

So, the equivalent Java code for the above is…

public static BigDecimal onesComplement(BigDecimal n, int totalBits) {
    return new BigDecimal(2).pow(totalBits + 1).subtract(BigDecimal.ONE).subtract(n);
}
by Nirupam Biswas

Lessons learned from PhoneGap (Cordova) and jQueryMobile on Android

I recently created my first Android app – JustTodo. This is a simple app but took considerable time to finish due many unexpected problems. Google wasn’t too helpful either. Here is a list of issues I faced and their solutions I discovered.

General tips

Zooming and Scaling

I presume that you have already encountered suggestions over the net that you should use meta tag in your html page. So, that your page is scaled to, maybe, take the exact device width. For example you may use…

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width will make sure that your page’s width is equal to the device’s width. Of course, for any device, the width differs based on if it is in landscape or portrait orientation.

initial-scale=1 will hint the mobile browser to not zoom out the pages. Mobile browsers typically zoom out the whole page when it is initially loaded, so that the whole page fits on the screen. This way the user can tap anywhere to zoom into that exact location. You do not want that to happen to your apps.

However, in spite of the above setting, the browser may still scale your page. This is because a web page designed for iPhone 3G will look half its size on iPhone 5, since iPhone 5 has twice the pixel density. To prevent the webpages from breaking on high DPI devices, the devices usually scale them by a fixed percent to make them look like they would on MDPI (Medium Dots Per Inch) devices. Webpages can read the value of window.devicePixelRatio to know the factor by which they have been scaled. This is 1 for MDPI devices.

jQueryMobile tips

Do not minify jqm structure css!

I don’t know the reason or the root cause for this. When I use the jquery.mobile.structure css minified by Yahoo UI compressor, the fixed header stops resizing on orientation change! The solution is simple. Always use the official minified version.

tap event gets fired when swipe is fired

If on an element if you are listenning for both tap and swipe events, then it would be better to replace tap by vclick. This is because tap is fired before swipe. However, in case of vclick, it waits for about 200 – 300ms to check if any other event is fired. If not then it fires that. This way you can prevent user accidentally clicking an element while trying to swipe it.

Better swipe event detection

Jqm sets swipe horizontal distance threshold to 30px and time threshold to 1s. Which means to successfully swipe an element the user needs to drag his finger at least 30px horizontally within 1s. I usually set the time threshold to 2.5s. However, due to scaling on high density bigger phones and tablets the physical distance covered by 30px on a MDPI and a XHDPI might vary by a lot. This would force the users to drag their fingers for longer distance in the same duration. So, the trick is to change the distance threshold, such that it covers the same physical distance on all devices.

I wrote the following Javascript function for that.

#!javascript
function getLenInCurrDevice(len) {
    var refernecDPI = 192.2960680247461, // Ref device is Sony Xperia Mini Pro - SK17i.
        pRatio = window.devicePixelRatio, // Ratio of current device DPI on a square inch to that of a MDPI.
        currDPI = refernecDPI * Math.sqrt(pRatio),
        originalWInInch = len / refernecDPI;
    return (originalWInInch / pRatio) * currDPI;
}

For a given distance in px the above function will return a new distance in px on the current device, such that, the distances cover the same physcial length on the current and the reference devices. In this case the reference device is Sony Xperia Mini Pro Sk17i, which has DPI of about 192.3 and devicePixelRatio of 1.

If you want to accurately calculate the DPI of your device you can use the DPI Calculator here.

Cordova tips

Caution when using Proguard

Build files created for an Android project which allows you to enable Proguard on your project. Proguard analysis the Java files and removes all which are not used. However, it also strips out the Cordova plugin classes, since it does see them referenced in any Java classes. (They are referenced from the cordova.js file.) So, you need to add the following to your Proguard config.

-keep class org.apache.cordova.** { *; }

Minimum plugins needed

This is not documented anywhere and it seems the minimum plugins needed are – App and Device. Frankly, I did not try removing them ever. So, maybe even they too are needed. Just try it and let me know. 😉

Although I must mention that if you remove NetworkStatus plugin then occasionally you might see error related to that in the console. Other than that there is no adverse effect of that. In my app I have kept this disabled, so that I can create an app which requires no special permissions. 🙂

Remove junk files and folders

Be sure to delete assets/www/res, assets/www/specs and assets/www/specs.html files and folders. The first one might be about 7MB! Actually the only file needed is cordova.js and the cordova.jar file.

Show native Android context menu

In JustTodo the user when long presses an item in the list it programmatically shows the context menu from the JS. There are two parts to this problem. First is adding the code which allows the JS to open the context menu. Second is to prevent WebView from automatically opening the context menu. More on this later.

Implementing context menu

First step is creating the context menu xml. Below is an example.

res/menu/example_ctx_menu.xml. The xml’s name can be of your choosing.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:id="@+id/edit"
          android:title="@string/edit"/>
    <item android:id="@+id/delete"
          android:title="@string/delete" />    
</menu>

res/values/strings.xml. This maps the key we used in menu xml to the actual string which is displayed to the user.

<?xml version='1.0' encoding='utf-8'?>
<resources>
    <string name="edit">Edit</string>
    <string name="delete">Delete</string>
</resources>

The official way we should be implementing this is using Cordova Plugins. However, I find the technique described here to be simpler. You be your best judge.

NativeContextMenu.java

#!java
public class NativeContextMenu {
    private WebView mAppView;
    private DroidGap mGap;

    public NativeContextMenu(DroidGap gap, WebView view) {
      mAppView = view;
      mGap = gap;
      mGap.registerForContextMenu(mAppView);
    }

    @JavascriptInterface
    public void showCtxMenu() {
        mGap.runOnUiThread(new Runnable() {
            @Override
            public void run() {
                mGap.openContextMenu(mAppView);
            }
        });
    }

    private void raiseJSEvent(String event) {
        mGap.sendJavascript("$(document).trigger('" + event + "');");
    }

    boolean onContextItemSelected(MenuItem item) {
        switch (item.getItemId()) {
        case R.id.edit:
            raiseJSEvent("menu.item.edit");
            return true;
        case R.id.delete:
            raiseJSEvent("menu.item.delete");
            return true;
        }
        return false;
    }

    void onCreateContextMenu(ContextMenu menu, View v,
                                    ContextMenuInfo menuInfo) {
        mGap.getMenuInflater().inflate(R.menu.todo_ctxmenu, menu);
        raiseJSEvent("menu.opened");
    }

    void onContextMenuClosed(Menu menu) {
        raiseJSEvent("menu.closed");
    }
}

YourCordovaActivity.java

#!java
public class YourCordovaActivity extends DroidGap {
    private NativeContextMenu ctxMenu;

    @Override
    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        super.loadUrl(Config.getStartUrl());

        ctxMenu = new NativeContextMenu(this, appView);
        appView.addJavascriptInterface(ctxMenu, "ContextMenu");
    }

    @Override
    public boolean onContextItemSelected(MenuItem item) {
        return ctxMenu.onContextItemSelected(item) ? true : super.onContextItemSelected(item);
    }

    @Override
    public void onContextMenuClosed(Menu menu) {
        super.onContextMenuClosed(menu);
        ctxMenu.onContextMenuClosed(menu);
    }

    @Override
    public void onCreateContextMenu(ContextMenu menu, View v,
                                    ContextMenuInfo menuInfo) {
        super.onCreateContextMenu(menu, v, menuInfo);
        ctxMenu.onCreateContextMenu(menu, v, menuInfo);
    }
}

Now ContextMenu.showCtxMenu() would be available to you in Javascript.

example.js

#!javascript
$('element').on('taphold', function  () { // taphold event is defined by jqm
    ContextMenu.showCtxMenu(); // Shows the context menu.
                               // Also the user will get a haptic feedback.
});

$(document).on('menu.item.edit', function () {
    console.log('Edit option was selected.');    
});

Preventing WebView from automatically opening the context menu

The big problem you will face here that when you long press, the context menu will open twice. One by your call in JS code, and another by WebView. WebView has a method setLongClickable() which even if you set after calling registerForContextMenu() does not seem to have any effect. WebView directly calls performLongClick() without checking if isLongClickable(). So the other way to do this is make NativeContextMenu also implement OnLongClickListener.

Changed codes.

NativeContextMenu.java

#!java
public class NativeContextMenu implements OnLongClickListener {  // <---
    private WebView mAppView;
    private DroidGap mGap;

    public NativeContextMenu(DroidGap gap, WebView view) {
      mAppView = view;
      mGap = gap;
      mGap.registerForContextMenu(mAppView);
      mAppView.setOnLongClickListener(this); // <---
    }

    @JavascriptInterface
    public void showCtxMenu() {
        mGap.runOnUiThread(new Runnable() {
            @Override
            public void run() {
                mGap.openContextMenu(mAppView);
            }
        });
    }

    private void raiseJSEvent(String event) {
        mGap.sendJavascript("$(document).trigger('" + event + "');");
    }

    boolean onContextItemSelected(MenuItem item) {
        switch (item.getItemId()) {
        case R.id.edit:
            raiseJSEvent("menu.item.edit");
            return true;
        case R.id.delete:
            raiseJSEvent("menu.item.delete");
            return true;
        }
        return false;
    }

    void onCreateContextMenu(ContextMenu menu, View v,
                                    ContextMenuInfo menuInfo) {
        mGap.getMenuInflater().inflate(R.menu.todo_ctxmenu, menu);
        raiseJSEvent("menu.opened");
    }

    void onContextMenuClosed(Menu menu) {
        raiseJSEvent("menu.closed");
    }

    @Override
    public boolean onLongClick(View v) {  //<---
        return true; // We return true, to let performLongClick() know that we handled the long press.
    }
}

The only side effect of the above code is that whenever the user long presses and you do not show a context menu, the user will still get the haptic feedback. The only way to circumvent that is by sub-classing CordovaWebView and overriding performLongClick().

by Nirupam Biswas

How to register your Aadhaar number with your bank (ICICI) without the physical Aadhar card

If you are one of those unfortunates who need to register their Aadhaar number with your bank to get LPG gas subsidy, but you lost your Aadhaar card or did not receive that, then read on…

About two years back I enrolled for Aadhaar. I never received that, but I did not bother checking, since in those days Aadhaar was mostly like a passing fad. Well, now it is different. We have probably three more months of grace period before this abomination kicks in.

I went to ICICI bank with my e-Aadhaar print out, but they refused to accept that, citing company directive to accept only physical cards. This was done to prevent fraud. I contacted Aadhaar “Customer Care” to request for a duplicate physical card, but was informed that there is no such provision! In fact they have been informed that e-Aadhaar should be accepted in lieu of Aadhaar card.

I had hit a stone wall. The only way I could resolve this by trying to reason with ICICI (my bank). We cannot reason with the Govt., which keep on inventing nasty little things to make our life difficult. I tried sending my concern via https://infinity.icicibank.co.in/web/emailus/jsp/emailUs.jsp but that ended up in internal server error. Nice! (sarcasm)

I let the issue rest for sometime. After reading about the LPG deadline again in the newspapers I shook myself up, and started finding alternative ways to get in touch with ICICI. During my hunt I ended up with the email id of the CEO. I mailed to her my plight and requested her to invent an alternative process for people like us. After all, if the aim is to prevent fraud then there should be other ways too. Also they are our banker who already know so much about us to form an informed likely-hood of fraudulent stunts we may try.

I was pleasantly surprised to hear back from a Senior Manager within one business day. She assured me they will address this. On the second day I got a call from my bank Branch Manager that a new process has been sanctioned and I need to bring my Aadhaar Enrollment slip with me. Yeeaah! The Manager used the Enrollment slip to download my e-Aadhaar from uidai.gov.in directly onto his system. Some form fillings and photocopies of an Id proof and I was done.

So, if you have an account in ICICI then you can use the above process. You might want to directly check with the Branch Manager if the bank employees insist that original Aadhaar card is a must and there is no other way. They may not be informed. This process came into effect on 21st May, 2013.

If you have account in other banks and they do not yet have such a provision then you might want to communicate with the bank senior management. I was informed by a reliable source that the banks received a circular in March of this year from Govt., that e-Aadhaar should be accepted in lieu of original Aadhaar card.

I also got another info that you can download your e-Aadhaar for a maximum of five times. I am not sure how true is this, but I am not keen on testing this myself. 😛

BTW, for your information I will reiterate that – there is no way as of now to request for duplicate Aadhaar card.

Anyway, happy enrolling your Aadhaar. BTW do not forget to take your mobile phone too since you will receive your OTP on your registered phone when then bank employee tries to download your e-Aadhaar.

Update 26-Aug-2013 I am an Indane LPG customer and when I checked my Aadhaar status on their site, it showed Red for LPG and White (Invalid/Unkown) for Bank. I seeded my LPG information online from https://rasf.uidai.gov.in. Also I created an account on Indane and there they again ask for the Aadhaar details, which I provided.

Update 2-Sep-2013 Now Indane site shows Green for LPG side and Bank side is Red! I already seeded by Aadhaar with bank in May. I followed up with ICICI customer care and got it confirmed that they have my correct Aadhaar number. They suggested, I check with the Gas agency, since enrolling online may not be same as enrolling offline.

Update 6-Sep-2013 Went to my Gas agency. According to them my Aadhaar is already enrolled. So, it seems enrolling online is enough. Now I am stuck again. My guess is that the Indane software checks the status in its own database. Maybe it sycns the Bank linkage details on monthly basis for accounts with valid LPG linkage. I will now wait till the end of this month. If it becomes Green till then, fine, else I will have to pay a visit to my bank.

Update 18-Sep-2013 Finally! Now Indane site shows that both IOCL and bank are linked. It is showing green for both now. I have been checking almost regularly, so it took around 15 days to refresh.

Update 10-Oct-2013 I received my first DBT (Direct Bank Transfer) subsidy! The subsidy was credited one day before I received SMS from Indane that cash memo has been generated. However, the amount is Rs.435 only. This time they charged Rs.1096 (plus Rs.20 extortion by delivery boy) so the net cylinder refill price comes to Rs.661! That is damn costly. Few months back it was less than Rs.500. PS. The subsidy from Indane was credited by the name ‘APBS_IOC R_07-10-2013’, so look for similar name in your bank statement.

Update 18-Dec-2014 Today I finally received my Aadhaar card! That is, I received it after around 3.5+ years later!!! Kudos to Indian bureaucracy, they do get things done, even though it may not matter by then.

by Nirupam Biswas

Securing the WordPress Login page

Of late I have seen quite a lot of brute force attempts to login into the admin account of this blog. The source IPs are wide and varied, ranging from Istanbul, Germany, Greece, US and more. In fact according to ArsTechnica article this has been happening for sometime now on a huge scale. I see a POST request on my site every few hours. Recently I submitted a list of such IPs to Deutsche Telekom Abuse Team for the offending IPs from their network.

Protection from the attack ArsTechnica suggested using

Limit Login and WP Better Security plugins. Limit Login is a simple and must have plugin. It blocks an IP for some hours our repeated failure attempts. Of course for this to be useful you need to have a strong password like mine, which is ….. . However, WP Better Security is the best but makes some drastic changes to your site. I don’t like to make so many changes, and would prefer that WordPress came bundled with those features. One of those features is modifying the login url. By default it is like http://blog.host/wp-login.php. This makes it an easy target. One simple way to fix this is change it.

Changing your login url

I do not want to physically rename wp-login.php, since that would mean after a WordPress upgrade the change would be gone. The other way is to rename it in your web-server configuration. Below is my relevant Nginx configuration. (If you are still using Apache then you may want to switch to Nginx.)

#!cink
server {
    server_name blog.host;
    # Other configs like root etc...
    location ^~ /wp-login.php {
        include phpparams.conf;
        if ($request_method = POST) { return 444; }
    }
    location ^~ /your-secret-login-page-name.php {
        rewrite ^ /wp-login.php break;
        include phpparams.conf;
    }
    # ...
}

The above config blocks all POST request to wp-login.php but allows GET requests. So, wp-login.php would show up but if someone tries to submit on that page then the server will close the connection (status 444 is a special code which instructs Nginx to close the remote connection). Since we are using ^~ to prevent Nginx from matching to any more regex locations so, if you have any location directive to match .php won’t be used. So, effectively your wp-login.php file source would be sent to the user instead of executing them. That is why I have included phpparams.conf. See the Nginx migration guide for the contents of phpparams.conf.

One Caveat

Now even if you open your-secret-login-page-name.php, the form will still send POST requests to wp-login.php, because after all that is the page which is being served. So, either you need to use web developer tools like Inspector to modify the web code or better write a GreaseMonkey or TamperMonkey script to do that for you.

by Nirupam Biswas

Process to get new LPG gas connection

There are no silver bullets but it is better to know the process to avoid harassment. I recently got Indane LPG gas after making rounds of their office for about a month. Most of these was due to the lack of info. SO, here you go.

First step is you need to get the KYC (Know Your Customer) form from the dealer. There is nothing special about it so, even if someone happens to have a soft copy of it then you can get it printed. I had to wait for 2 weeks to get this. One format of KYC document is available on Indane site (here), but the one I got from the dealer was a little different. They will also give you an affidavit form, which you need to get printed on a Rs 20 Stamp Paper and notarized by a lawyer. You can get that form from here.

Tip: If you live anywhere in Hitec City, Hyderabad then there is a small shop available in Madhapur to Stamp Papers and notarize documents. – http://maap.in/w

Fill the KYC form and affix a colored photograph. Along with the Stamp Paper and KYC you need to attach your address proof and photo Id proof. Also you should provide the Aadhaar number on the KYC form, though its photocopy need to be attached if you are providing another photo Id proof.

Some of the accepted address proofs are:-

  • Rental agreement
  • Credit / Bank statement
  • Electricity bill
  • Self-declaration attested by Gazetted officer
  • Flat allotment/possession letter

Some of the accepted photo Id proofs are:-

  • Passport
  • Aadhaar
  • Pan Card
  • Driving License

Once you submit all the above, they say, they will make a verification call in a week. After that you may go to your dealer and deposit a sum of Rs. 5000 to get the new connection.

However, in my case they did not call me. When I anyway went there after a week I got the connection. I had to dig through the applications dump to find mine. Rs. 5000 deposit includes price of gasket, regulator, one cylinder, a stove and other misc charges. Buying stove from them is purely optional, but the agency might try to force you to buy that.

Along with the above stuffs you get a connection certificate sort of paper and the gas booklet. According to the agency you can only apply for single cylinder when you are getting a new connection. You can get the second one after three months.

Hope the above info helps. May god help you with your Gas hunting. 😛

More info:-