Skip to content

Recent Articles

17
Jun

CSS Smiley Infinite Animation – Added Furious Face

In Coffee Steam, it shows a cool CSS animated effect of steam from a coffee. I have copied the CSS code and integrated with my recent modified work on smiley face. A new emotion after the angry face, furious, which is basically angry face and steam together. Here is the demo.

10
Jun

Adding Infinite Loop to the Cool CSS Smiley Animation

There is a very cool pure CSS smiley animation created by Tiago Alexandre Lopes. The animation begins as soon as one of the smiley radio buttons is checked. However, the nice animation doesn’t repeat. It would be nice to have the animation repeated every 5 seconds.

TL;DR Here is the demo.

Read more »

8
Jun

pthread_cancel and blocking I/O in Android NDK

We have a multi-threaded program that has one thread sitting in a while loop blocking from recvfrom system call on a socket. I need to run this C program on mobile. Unfortunately, in the networking side of mobile development, IP address changes all the time and the socket descriptor becomes invalid. Hence we need to break the loop and reconnect the socket.

First approach is to destroy the thread the recreate it again when IP address is changed. So the thread can go through closing the old socket gracefully, creates a new socket with the new IP address and enters the while loop of receiving packets. Quick and simple. However, if you are porting a multi-threaded C/C++ program for Android, perhaps this may not be a smooth ride. This is because pthread_cancel is not available in the Android NDK. So we can’t kill the thread and we need a way to signal blocking I/O recvfrom call.

Second approach is to close the socket descriptor and the recvfrom should return with error. However, this doesn’t happen in Android. The recvfrom continues to block.

Third approach is to set non-blocking I/O option in socket and handles the errno returning from recvfrom.

struct time tv;
tv.tv_sec = 1;
setsockopt(socketfd, SOL_SOCKET, SO_RCVTIMEO, &tv, sizeof(tv));

Another surprise in Android, it won’t let you do that.

I am running out of magic 8-ball. Luckily, the shutdown system call on socket lets you terminate the blocking I/O.

At the time of writing, I’m using API level 24.

3
Jun

Using Semaphores on Android

If you plan to use semaphores on Android, then don’t. This is because the sem_open, sem_close and sem_unlink are not implemented. If you call sem_open on Android, you will get EACCESS error regardlessly.

This is what is defined in the /usr/include/semaphore.h in NDK’s sysroot directory.

int sem_destroy(sem_t*);
int sem_getvalue(sem_t*, int*);
int sem_init(sem_t*, int, unsigned int);
int sem_post(sem_t*);
int sem_timedwait(sem_t*, const struct timespec*);
int sem_trywait(sem_t*);
int sem_wait(sem_t*);

/* These aren't actually implemented. */
sem_t* sem_open(const char*, int, ...);
int sem_close(sem_t*);
int sem_unlink(const char*);

__END_DECLS

#endif /* _SEMAPHORE_H */

The only workaround is to use mutex and conditional variable. Fortunately, there are many online helps on how to do it. Here is an example.

30
May

ICMP Identifier field in UDP between Linux and OSX

Ping packet is traditionally created as a raw packet and formatted into ICMP ECHO REQUEST. The problem with creating a raw socket requires root privilege. It is alright if the program is running as part of the system service under root anyway. However, running as a non privilege user, the program requires extra care by configuring the setuid bit which poses security risks e.g. the program may have memory leak which can be hijacked with shellcode.
Read more »

16
May

Sencha ExtJs Modern: How to Switch Off Compression in ‘Build & Emulate’

Although in Sencha Cmd, we can easily switch off compression by doing a Testing build. In ExtJs Modern framework, when we do a ‘Build & Emulate’, it compresses all the JS code anyway and there is no option to switch it off (Well, at least in Sencha Architect). This makes it hard to debug mobile applications when runs it on an Android emulator, especially using Chrome developer console to remote attach to the emulator.

I contacted the support, here is how you switch the compression off by adding highlighted lines to app.json as shown belown:

     "native": {
         "packager": "cordova",
         "compressor": null,
         "properties": {
            "build.compression": "",
            "enable.resource.compression": false
         },
         "cordova": {
            "config": {
               "id": "com.domain.MyApp",
               "name": "MyApp",
               "platforms": "android"
            }
         }
      }

After that, do a ‘Build & Emulate’ again. When you reconnect the Chrome developer console, you should see your own source code as well as ExtJs source.

2
Dec

Getting ExtJs to work with CORS and Cookies (on Chrome)

This is just a quick reminder note for myself on how to get ExtJs working with cross domain Ajax query and Cookie. My server side code is implemented with Php Slim micro framework which I use .htaccess file on the document root directory.

Step 1. Configure Apache

In my document root setting, I enable some settings can be override by .htaccess file.

<Directory /var/www>
    Options Indexes FollowSymLinks MultiViews
    # enable the .htaccess rewrites
    AllowOverride All
    Require all granted
</Directory>

Read more »

12
Feb

Sencha Architect: How to use ViewModel to Bind Store into Grid Panel

In ExtJs (5+), one of the major features is MVVM (Model-View-ViewModel). It is an alternative approach of MVC. Basically, MVVM enables each view component have it’s own ViewController and ViewModel classes. This offers a number of benefits, better code management, smaller memory footprint, and better integration with automated tests. In this article, we explore how to use Sencha Architect to setup ViewModel relationship.
Read more »

11
Feb

PyQt: How to hide top level nodes in tree view

In Qt treeview, hidding top level nodes is different to hidding lower level nodes. Lets start with a simple treeview example with two non-empty branches. Here is the code:
Read more »

9
Jan

ExtJs5: Notes on Collapsing Panel in BorderLayout

Suppose we have a panel with borderlayout. The center region is a tab panel with two tabs: Expand and Collapse, whereas the south region is a collapsible panel. The whole idea is to program by clicking ‘Expand’ and ‘Collapse’ tabs which will automatically expand and collapse the south panel respectively. The following is the screenshot:

screen
Read more »