ExpandableRowListViewFeaturedImage

UWP Custom control: Expandable Row ListView

I was working on a Universal Windows Platform app where I needed a ListView whose rows can be expanded to reveal further data underneath it. I think these controls are called DataRowTables in Web UI programming. So, I decided to write one.

ExpandableRowListView usage animation

To use it, you can either bind its ‘ItemsSource’ to an ‘IEnumerable<ExpandableRowListViewItem>’ or add static items in XAML or add static items in code using ‘ExpandableRowListView.Items.Add(…)’ method. These usages are shown in the project containing the source code.

Source code

Implementing custom captions renderer for Android VideoView

From Android KitKat (API level 16), programmers can use ‘addSubtitleSource()’ on VideoView to add a WebVTT format subtitle track. That’s it. Nothing else to do. The native subtitle handler even automatically listens and changes drawing styles according to system accessibility caption settings. (FYI – System captions settings are under Settings->Accessibility->Captions) Awesome!

But only that it isn’t. Most of the application workflows have a captions button for the user to turn captions on/off. Unfortunately, there are no public member functions on VideoView control to allow the developer, in proxy of app user, to control captions visibility from within the app. All the developer can do is redirect the user to system accessibility page using ‘Intent’. Even then, the captions settings are global. Sure, if the user has permanent hearing disability, this is no problem. He/she would want to turn on caption for all the apps with one switch. Unfortunately, this is not always the case. Even a normal user may want to mute sound and watch the video with captions in a quiet environment. Then, the app will need a button within it for the user to toggle captions. Another, though minor, quirk is that ‘addSubtitleSource()’ works with WebVTT format. The ubiquitous captions format is SRT. This will require you to wire an intermediate converter (A simple SRT to WebVTT converter that I wrote for testing can be downloaded here). Hence, there is atleast two strong cases to implement a custom captions handler.

Android Custom Captions Renderer

1. Get an instance of internal MediaPlayer

The VideoView control has a private member object instance of MediaPlayer control and implements ‘addSubtitleSource()’ on top of it. So, the first plan of attack is getting an instance of this MediaPlayer object instance. One way of doing this is using Java’s reflection capabilities to call hidden member functions in VideoView class – i.e. ‘VideoView.class.getDeclaredMethod(“<Method name>”).invoke(<Params>)’. This, of course, is very ‘hacky’ and we want to stay away from this as much as we can in production code. Fortunately, there’s another way. If we create a new derived class from ‘VideoView’, we can override the ‘onPrepared()’ event and get an instance of its internal MediaPlayer object in the event listener’s function parameter. When this event fires, the video player has loaded the video and is ready to accept captions track. Using MediaPlayer’s ‘addTimedTextSource()’, we can add an external captions track. This can be SRT format.

2. Handle special condition where caption file is on the network

If your captions file is on the network though, we have another hurdle to jump. The function accepts only local file path or a local file descriptor so we have to download the captions to a local file in a temp directory and then add code to handle file clean up when it is no longer needed. If your code fails to properly cleanup, you will be cluttering user’s precious storage space. Alternatively, we could go another path by using ‘MemoryFile’. MemoryFile is a file mapped into memory used for inter-process communication. Nice thing about this is that the system takes care of the file maintenance part while we just read/write to memory. Using Java’s reflection capabilities we can call hidden member ‘getFileDescriptor()’ on MemoryFile to get a ‘FileDescriptor’ to use with ‘addTimedTextSource()’. I would argue that though ‘getFileDescriptor()’ is hidden, it is safe to call it. It ties directly with underlying Linux API and there isn’t any reason for Android  framework to change or remove this function in the future.

3. Rendering caption on specific time

When you set a listener using ‘MediaPlayer.setOnTimedTextListener()’, we have only asked MediaPlayer to notify us using ‘onTimedText’ event when caption text start/end timing is reached on playback. We still have to put a TextView on top of VideoView to show the captions. This can be done easily in the video activity. When the listener handler is invoked, it will have a ‘TimedText’ object on its function parameter. The ‘getText()’ method of this parameter will return the caption text to be rendered at this playback time. If the end time for a caption is reached, this will return a null string. Then, we just hide the TextView captions text control. There is also a ‘getBounds()’ method in the ‘TimedText’ object. Optionally, this may be a non-null ‘Rect’ object. This is a valid Rect object when the input captions file contains positioning information. A rigorous implementation will use this bounds by moving TextView accordingly. One case where this may be used is when an object/person important to the video’s subject matter is on the bottom part of the video which is usually occluded by the captions text.

Pitfalls

The native SRT parser is confused by subtitle information blocks where there is sequence and timing information but the captions text is empty. For instance, as in caption sequence 2 below:

1
00:00:00,000 --> 00:00:00,100
Caption text 1

2
00:00:01,200 --> 00:00:02,000


3
00:00:04,000 --> 00:00:06,000
Caption text 3

One way to fix this is by replacing the ‘\r\n\r\n\r\n’ (assuming Windows style line break) after the end time in sequence 2 with ‘\r\n{Any non-white space character here}\n\r\n’.

QR code generator console application

QRCodeGenerator
QR Code Generator

Source code: https://github.com/sanje2v/QRCodeGenerator

QR code generators are nothing new – they are all over the internet. Yet, I decided to write one as a console application which I didn’t find any (not that it would be groundbreaking in anyway but just to learn how QR code is implemented). This application implements QR code version 1 and encodes only in alphanumeric mode (hence limited to encoding in uppercase English characters).

This project was not intended to cover all implementations of QR code versions and is not likely to be developed further in the future – but perhaps, a decoder if I feel like it. Rather, I wanted to understand how QR code is generated. One of the most important (and interesting) component is error correction which  covers some interesting topics like number theory, Galois field and polynomial arithmetic. I had a lot of fun implementing these. An unexpected field I got to explore was masking where the specification tries to remove unwanted patterns – i.e. patterns which may cause confusion to decoders. The source code for this project will be helpful to anyone starting to learn QR code encoding.

Aside from the official QR code specification document, http://www.thonky.com/qr-code-tutorial/ provides a good overview with walk-through samples for various steps of the encoding process. Not being a math buff, the guide was especially helpful to me on understanding binary polynomial division in Galois field.

In order for the console application to display the square QR code correctly, the program changes console’s font size and type in function ‘SetConsoleAttributes()’. The font index number used in this function is undocumented and was determined by changing Windows 10 console properties and watching the index number change in Windows API. If you are using non-Windows operating system, please change this function to correct your console font to any monospaced font. Also, the function forces the console to black background with bright white foreground as required by the specification.

Pellucid Icons - allows your desktop icons to be semi/transparent so that it doesn't occlude your wallpaper

Pellucid Icons – Transparent Windows Desktop Icons

Pellucid Icons - allows your desktop icons to be semi/transparent so that it doesn't occlude your wallpaper
Pellucid Icons – allows your desktop icons to be semi/transparent so that it doesn’t occlude your wallpaper

So, you have a beautiful wallpaper on your desktop but there’s a barrage of programs and document icons occluding it – ’cause all play and no work makes Jack a dull boy. What to do? Well, here’s a solution.

Pellucid Icons is a shell extension for Explorer that makes your icons transparent until you perform an activity such as mouse move, mouse move to one-third of the screen or double click. Scroll to the bottom for installer.

The extension is implemented with two COM shell extensions in it. One is an icon overlay handler. We (ab)use this handler to make Explorer load our DLL into its address space as soon as possible. The other is a context menu handler. We use this handler to add sub menu items to the context menu when users right click on the desktop.

Once Explorer has mapped our DLL into its address space, we can find the ListView control responsible for desktop icons using ‘FindWindow()’ and set its transparency using ‘SetLayeredWindowAttributes()’. Of course, we need to set ‘WS_EX_LAYERED’ attribute for this ListView before we can set transparency. This attribute is can be applied to child windows only if the application is running in the operating system context of Windows 8 or greater. Notice, that I didn’t say ‘run(ning) in’ but ‘run(ing) in operating system context’. Even though, you may be running your application in Windows 8, it may be running in context of Windows Vista. For normal applications, you need to embed a manifest with ‘supportedOS’ tag to make it run in Windows 8 context. Windows Explorer executable doesn’t have this manifest. Yet, using task manager (in Details tab, you need to right click the header->Select columns… and check Operating system context) we can see that the OS has decided to run it in the context of Windows 8.1 (my test machine’s OS). Phew, we wouldn’t want to make changes to Explorer image file in any way but I wonder how this works? Is this hard coded into the OS? If you have any info regarding this, please do comment.

In order to make Windows Explorer invoke our context menu for the desktop, we need to register it at ‘HKEY_CLASSES_ROOT\DesktopBackground\shellex\ContextMenuHandlers’. Easy peasy. But our context menu handler is invoked even when the user right clicks on an Explorer folder window showing files in user’s Desktop. This is a minor annoyance but fortunately we can detect whether the user right clicked on the actual Desktop or a folder window by checking the flag parameter in ‘IContextMenu::QueryContextMenu(…)’ for ‘CMF_EXPLORE’ (0x4L). If this flag is set, its a folder window so we exit the method without adding anything else we add our menu.

Minimum supported OS: Windows 8

License: Freeware, Open Source, Author disclaims any liability
Credit: Icon from FlatIcons.com, function ‘Utility::Create32BitHBITMAP()’ is lifted from TortoiseSVN project, context menu handler code template is from Microsoft and installer from InnoSetup

Source code

Download installer
Supported architecture for installer: 64-bit machine, for 32-bit machine you’ll have to build yourself
NOTE: This program is installed for all users in your computer but the installer activates it only for the user who ran the installer. Other users in the computer can activate this program by right clicking on their desktop then checking the option ‘Pellucid icons->are enabled’.