Meefik's Blog

Freedom and Open Source

UX framework for JavaScript libraries

02 Dec 2021 | javascript

In one of my JS projects, I needed to implement UX interfaces in the Web SDK. Such a Web SDK was embedded on pages of third-party sites and for security reasons should not contain any external dependencies, including libraries like React. For these purposes, an own implementation of the UX framework was created, which can be embedded on the country of any site without problems and conflicts.

The code is implemented as a JS library and posted on GitHub under the MIT license. Build size - 12kb uncompressed (4kb gzipped).


Encoding and decoding data in PNG with compression

22 Feb 2020 | javascript

I want to talk about a couple of interesting ways to encode data - encoding in the form of a picture and embedding them into an existing picture. I experimented with the PNG format because it uses lossless compression and is supported in browsers in the canvas element. I am interested in JavaScript, so the implementation will be written in it. The code is implemented as a JS library and posted on GitHub under the MIT license.

The first encoding option is to generate a new picture based on arbitrary data. To do this, each byte of data is recorded sequentially in the RGB channels of the PNG picture, while the alpha channel is not touched, since when the alpha channel changes, the RGB colors partially change when unloading from canvas to PNG. In this variant, WIDTH * HEIGHT * 3 bytes of data can be packed in PNG. When encoding text, the image size is smaller than the source text, since Deflate compression is applied to the data.

// encode file to PNG
asPNG.encode(file).then(blob => {
  // encoded blob
// decode file from PNG
asPNG.decode(file).then(blob => {
  // decoded blob


Homemade LED Keychain Beacon

29 Sep 2019 | diy

Some time ago I found a curious device on the Internet - a keychain powered by a radioisotope of hydrogen (tritium). The principle of operation there is as follows: there is an isotope in the sealed cavity, the inner part of the cavity is covered with a phosphor, which glows when exposed to electrons emitted as a result of beta decay of tritium. The half-life of tritium is 12 years, which ensures the continuous glow of the phosphor for many years.


I was inspired by this idea and somewhere in 2013, the idea appeared to make a keychain beacon so that it glowed and was visible in the dark for a long time. You can use it for keys, you can use it for something else, I was interested in the idea. However, I decided to use not a radioactive element, but an electric circuit with an ordinary LED. It remained to make the LED glow for many years without replacing the batteries, while maintaining the size of the keychain.

Training 5 points model for OpenCV Facemark API

20 Sep 2018 | opencv

More recently, OpenCV introduced an API for detecting anthropometric points of the face. There is a good article on using the Facemark API at Learn OpenCV. A good implementation of the search for such points is in the dlib library, but sometimes you want to limit yourself to one library, especially when it comes to porting code to mobile devices or a browser (by the way, OpenCV supports compilation in WebAssembly). Unfortunately, face point search algorithms use models of a sufficiently large size (68 points ~ 54 MB), and the size of the downloadable code per client may be limited. The dlib library has a pre-trained model for 5 points (5.44 MB), but for OpenCV there is no such model, and there is not even support for such a model, at the moment models for 68 and 29 points are supported. The 5-point model can be used to normalize faces on the client. Below I will describe the process of learning your own model of a small size for 5 points.

Face detection with rotation invariance

27 Aug 2018 | javascript

Not so long ago I came across the publication Object Detection with Pixel Intensity Comparisons Organized in Decision Trees, the authors of which offer a modification of the Viola-Jones. The main difference of the method is that instead of Haar features, simple pixel tests are used without the need to calculate an integral image. This allows you to increase the speed of calculations and save memory.

The authors of the article give an example of the implementation of this algorithm in C with a pre-trained classifier for face detection. Recently, an implementation of the PICO algorithm in JS has appeared, but it does not implement the invariance of turning the image (or tilting the head to the left/right). This is the shortcoming I decided to fix.

To implement the rotation invariance, it is necessary to run the algorithm several times for the image rotated at several angles. But since the algorithm works with pixels, and not an integral image, you can not perform a resource-intensive image rotation operation, but simply read the desired pixels using a rotation matrix.

The revision included:

DTMF generation and recognition in JavaScript

26 Apr 2018 | javascript

When the task appears to transmit some code by audio, the classic solution is DTMF codes. DTMF is a two-tone multi-frequency signal used to dial a phone number. However, the actual application of this technology is much wider.

The signal format is the sum of two sinusoidal signals of certain frequencies. DTMF symbols are encoded by the following frequencies:

  1209 Hz 1336 Hz 1477 Hz 1633 Hz
697 Hz 1 2 3 A
770 Hz 4 5 6 B
852 Hz 7 8 9 C
941 Hz * 0 # D

There are many examples of DTMF implementation, one of the most well-known DTMF detection algorithms is Goertzel algorithm. There is even its JavaScript implementation.

Code recognition occurs by frequency response, and by time response, noise filtering can be implemented.

OpenWRT with OpenVPN on TL-WR841N router

21 Apr 2018 | openwrt

The problem with the TL-WR841N router (v9 in my case) is that there’s only 4MB of flash memory and after the OpenWRT firmware, there’s only about 300KB left for personal use, which is not enough to install OpenVPN. The solution to this problem is in the post OpenWrt + VPNclient for a router with 4mb ROM, but several years have passed and scripts require changes.

Aligning face images in JavaScript

01 Oct 2017 | javascript

In the tasks of automatic processing of images of faces, the question of finding and normalizing (aligning) the image of a face in a photo or video stream often arises. Alignment usually involves rotating, zooming, and cropping the part of the photo of interest. On the web, you can find examples for implementing this function in Python or C/C++ using the OpenCV computer vision library. Here I will give two examples of the implementation of this function in JavaScript for NodeJS and for running in a browser on pure JS.

Video of Linux Deploy 2.0

25 Feb 2017 | linuxdeploy

Demo of installing and running Debian on Android phone using Linux Deploy.

Release Linux Deploy 2.0

14 Oct 2016 | android linuxdeploy

Today was the official release of Linux Deploy 2.0, which includes many new developments that have been conducted over the past year. Not everything could be realized from what was conceived for one reason or another, it’s time to figure out what exactly has changed and how to live with it. For more details, see the project page.