DEV Community: Davy Chen

Encode/Decode emojis into/from base64

Davy Chen — Wed, 08 May 2024 12:00:33 +0000

Many users like to use emojis when posting messages to your website. As Web developer we should allow and encourage such kind of usage. Because it's funny!😊

And some websites may have the need retrieving messages from backend being base64-coded.

But most of emojis are UTF-16 code. base64 can only work with UTF-8 or ASCII code. You can't encode UTF-16 into base64 directly!

The idea is to convert the text containing emojis into a piece of intermediate code in the form of ASCII first!

If you use JavaScript at both ends, you can do this:

Backend:

TextEncoder().encode() the text.
base64 encode.
Save into DB and over to Frontend.

Frontend:

Retrieve encoded text from Backend.
base64 decode.
TextDecoder().decode.

Then you'll see the emojis. 😀

But if you use another language at backend, say PHP, you don't always find an alternative of TextEncoder there. Instead we can use URL encoding/decoding at backend/frontend.

Document of encodeURIComponent() says:



It encodes a URI by replacing each instance of certain characters 
by one, two, three, or four escape sequences representing the 
UTF-8 encoding of the character

In other words, it converts emojis code into ASCII, which is perfectly compitable with base64. Here is what we can do:

Backend(PHP):

rawurlencode() the text.
base64_encode() encode.
Save into DB and over to Frontend.

Frontend(JavaScript):

Retrieve encoded text from Backend.
atob()(base64 decode)
decodeURIComponent().

Then we can see the emojis on webpage, even mixed with other UTF-8 text. 😎

A good, open source tool to share files between Computer and mobile devices.

Davy Chen — Sat, 17 Feb 2024 06:03:31 +0000

I often have the need to send files from mobile phone to my desktop computer. And vice versa (computer -> mobile phone).

Some people recommend a tool called "localsend".

It's an open source project, and works on multiple ends/platforms.
GitHub: https://lnkd.in/gm2Qm-Yh
Official website: https://localsend.org/

I tried it on Win11 & Android. It has a nice designed logo, clean user interfaces and a discussion area.

And it works well as I expected! 😊

How can we draw Fonts in OpenGL

Davy Chen — Sun, 11 Feb 2024 08:49:59 +0000

We can draw all kinds of 3D Models in OpenGL. But oftentimes we also need to draw Fonts in OpenGL. How can we make that?

Luckily there are a few open-source fonts rendering libraries out there. I'll guide you to make use of one of them: FTGL.

I. Libraries we'll need to use.

OpenGL
FTGL
freeglut
freetype

II. Compile the libraries in Visual Studio 2022 / VC++.

freeglut

I downloaded freeglut v3.4.0 from Sourceforge. And use CMake to build VC++ project management files.
CMake has a very easy to use GUI on Windows platforms.

With the generated freeglut.sln we can open the project. Select building options of x64 & release.
As we don't need other external libraries, we can build it directly.

Then we'll have a freeglut.lib or freeglut_static.lib for later use.

freetype

I downloaded freetype v2.13.2 from freetype.org.

I'll recommend you to get the sources packages from their official websites if they have. You'll encounter fewer building errors in stead of using the newest code from their GitHub repositories.

After all, tuning rendering effects are much more interesting than solving building blockers.

We can open the default freetype.sln provided by this source package in VC++ to build it. Before start building, please select x64 & release options first. After that, we'll get the binary freetype.lib.

FTGL

We can use default ftgl.sln in source package to build. Please select x64 & release first.
And we'll need to configure include paths & library paths to the project. We'll also need to add freeglut.lib & freetype.lib to the linker settings.
In the end, we'll get ftgl.lib.

III. Write a FTGL demo. Sample code:

// Demo code
void Demo_code(void)
{
    // Resolutions of the picture
    const GLfloat width = 800;
    const GLfloat height = 600;

    glShadeModel(GL_SMOOTH);
    glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
    glClearDepth(1.0f);
    glEnable(GL_DEPTH_TEST);
    glDepthFunc(GL_LEQUAL);
    glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);

    // Load the Font
    // Use any TTF font name you like here
    font = (FTGLfont*)new FTGLPolygonFont("./Mona-Regular-2.ttf");
    if (((FTGLPolygonFont*)font)->Error())
    {
        fprintf(stderr, "Failed to load font\n");
        return;
    }

    // Clear all pixels
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    // Set perspective view
    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    gluPerspective(45.0f, (GLfloat)width / (GLfloat)height, 0.1f, 100.0f);

    glPushMatrix();
    // Place camera
    glMatrixMode(GL_MODELVIEW);
    glLoadIdentity();
    // Adjust the position of the text
    glTranslatef(-0.5f, 0.0f, -5.0f);
    // Rotate the text to be vertically
    glRotatef(55.0f, 0.0f, 1.0f, 0.0f);
    glScalef(0.35f, 0.35f, 0.35f);

    if (font)
    {
        // Render Fonts
        ((FTGLPolygonFont*)font)->FaceSize(0);
        glTranslatef(-6.0f, 0.0f, 0.0f);
        ((FTGLPolygonFont*)font)->Render("You know Bill?");

        glColor4d(0.0, 0.0f, 1.0f, 0.8f);
        glTranslatef(0.0f, -1.0f, 0.0f);
        ((FTGLPolygonFont*)font)->Render("You know Bill?");
    }

    glPopMatrix();
    // Render
    glutSwapBuffers();
}

IV. Compile the sample code into executable binary.

We need to confifgure the VC++ project with include paths, library paths and libraries prior building:

ftgl.lib
freeglut.lib
freetype.lib

V. Rendering results.

The library can render fonts into multiple styles.

Polygon mode

Outline mode

Extrude mode

And more!

Don't forget to copy the TTF font file and any DLL files you're leveraging to executable folder to try the Demo.

Hope you enjoy the FTGL 3D Fonts rendering library for OpenGL. It's a wonderful library! 😊

Rarely Heard Knowledge Of JavaScript

Davy Chen — Tue, 30 Jan 2024 11:19:04 +0000

Rarely Heard Knowledge Of JavaScript

Sometimes you'll want an automatically ordered Dictionary. The key-value pairs of the Dictionary get ordered by the keys after insertion.

In JS, the data structure of Map() won't do that for you. While, an Object can.

An Object is this:

{}

But only when the keys are numbers and the numbers >= 0 (Non-fractional), the keys to be ordered ascendingly.

Otherwise, If the numbers are fractional, they are going to be taken as strings, and strings are to be arranged by insertion order in an Object.

JS code that gives output in the picture:

const list = {};
const length = 15;

for (let i = 0; i < length; i++) {
 let value = Math.random() * 1000000;
 list[value] = i + 1;
}

const keys = Object.keys(list);
const values = Object.values(list);

for (let i = 0; i < keys.length; i++) {
 console.log(keys[i], values[i]);
}

And if you need to tell that if the keys are fractional or integral, you can use this:

Number.isInteger()