DEV Community: Misael Braga de Bitencourt

A Eficiência do Cache no SQLite

Misael Braga de Bitencourt — Sun, 18 Jan 2026 23:23:28 +0000

Este projeto é um teste que fiz para verificar a performance do uso de banco de dados NoSQL de chave/valor como cache de busca de dados em comparação com um banco SQLite3 local. Os resultados em um ambiente local não distribuído me impressionaram devido a um recurso de cache do SQLite.

O projeto criado para testes foi um webservice Rest JSON com Python + Flask. O serviço possui um endpoint para encurtar uma URL e outro para acessar o link original de uma URL curta. O cache criado em questão é para a leitura da URL previamente encurtada. O servidor web pode responder de maneira muito mais eficiente se o banco de dados que armazena a URL de forma estruturada não precisar buscar em arquivos o dado toda a vez que é requisitado. O banco de dados de chave-valor Valkey, que é, basicamente, uma versão open source do Redis, foi utilizado para o cache em questão.

O código a seguir trata-se das configurações das rotas (endpoints, ou controllers) do servidor:

from flask import Flask, request
from business.link_shortener import generate_new_link, get_link_by_hash_string

app = Flask(__name__)

@app.route("/heart-beat")
def hello_world():
    return {'OK': 'true'}

@app.route("/link", methods=['POST'])
def link():
    data = request.get_json()
    new_link = generate_new_link(data['url'])
    return {'short_link': new_link}

@app.route("/link/<short_link>")
def get_link(short_link):
    link = get_link_by_hash_string(short_link)
    return {'link': link}

O core da aplicação de exemplo está no arquivo que se segue:


import sqlite3
import random
import string
import threading
import valkey
import json

# Thread-local storage for database connections
_thread_local = threading.local()

# Flag that activate the key value database cache
kv_cache = True

# Create a global connection pool for Valkey
kv_pool = valkey.ConnectionPool(
    host='localhost',
    port=6379,
    db=0,
    max_connections=50,  # Match the number of concurrent threads
    socket_keepalive=True,
    socket_connect_timeout=5,
    retry_on_timeout=True,
    decode_responses=True  # Automatically decode responses to strings
)

# Initialize database schema
conn = sqlite3.connect('database.db')
cur = conn.cursor()
cur.execute('''
    CREATE TABLE IF NOT EXISTS links (
        id INTEGER PRIMARY KEY,
        link_hash TEXT,
        link_target TEXT
    )
''')
cur.execute('CREATE INDEX IF NOT EXISTS idx_links_id ON links (id)')
cur.execute('CREATE INDEX IF NOT EXISTS idx_links_link_hash ON links (link_hash)')
conn.commit()
conn.close()

def get_db_connection():
    if not hasattr(_thread_local, 'conn'):
        _thread_local.conn = sqlite3.connect('database.db', check_same_thread=False)
        _thread_local.conn.execute('PRAGMA cache_size = 0')  # Disable page cache
        _thread_local.conn.execute('PRAGMA temp_store = 0')  # Use disk for temp storage
    return _thread_local.conn

def get_kv_db():
    if not hasattr(_thread_local, 'kv_db'):
        _thread_local.kv_db = valkey.Valkey(connection_pool=kv_pool)
    return _thread_local.kv_db

def generate_hash():
    return ''.join(random.choices(string.ascii_letters + string.digits, k=10))

def create(link):
    conn = get_db_connection()
    cur = conn.cursor()
    link_hash = generate_hash()
    cur.execute('INSERT INTO links (link_hash, link_target) VALUES (?, ?)', (link_hash, link))
    conn.commit()
    return link_hash

def get_link_by_hash(hash):
    if kv_cache:
        cached = get_kv_db().get(hash)
        if cached:
            return cached  # Already decoded due to decode_responses=True
    conn = get_db_connection()
    cur = conn.cursor()
    cur.execute('SELECT link_target FROM links WHERE link_hash = ?', (hash,))
    result = cur.fetchone()
    if result[0]:
        if kv_cache:
            get_kv_db().set(hash, result[0])
        return result[0]
    else:
        return None

Na linha 48 se encontra uma variável que configura se o cache Redis será ativo ou não. Note que nas linhas 80 e 81 existem configurações que desabilitam o cache do próprio SQlite3.

Eu solicitei a um agente de I.A. que gerasse um teste de stress para este servidor. Com algumas modificações, ele ficou pronto para disparar requisições pesadas por meio de várias threads. Segue o script para tal ação:

import time
import requests
from concurrent.futures import ThreadPoolExecutor, as_completed
from statistics import mean, median

# Configuration
BASE_URL = "http://localhost:5000"
NUM_TASKS = 100
NUM_THREADS = 30
NUM_LINK_GETS = 80


def create_test_link():
    try:
        response = requests.post(f"{BASE_URL}/link", json={'url': 'https://example.com'})
        if response.status_code == 200:
            data = response.json()
            return data.get('short_link')
    except Exception as e:
        print(f"Error creating test link: {e}")
    return None


def test_link_retrieval():
    start = time.time()
    short_link = create_test_link()
    results = []
    for _ in range(NUM_LINK_GETS):
        try:
            response = requests.get(f"{BASE_URL}/link/{short_link}")
            elapsed = time.time() - start
            results.append({
                'success': response.status_code == 200,
                'time': elapsed,
                'status_code': response.status_code
            })
        except Exception as e:
            results.append({
                'success': False,
                'time': elapsed,
                'error': str(e)
            })
    return results


def run_stress_test():
    print(f"Total tasks: {NUM_TASKS}")
    print(f"Concurrent threads: {NUM_THREADS}\n")

    results = []
    start_time = time.time()

    with ThreadPoolExecutor(max_workers=NUM_THREADS) as executor:
        futures = []
        for _ in range(NUM_TASKS):
            future = executor.submit(test_link_retrieval)
            futures.append(future)

        for i, future in enumerate(as_completed(futures), 1):
            subresults = future.result()
            results.extend(subresults)
            if i % 100 == 0:
                print(f"Completed: {i}/{NUM_TASKS}")

    total_time = time.time() - start_time

    # Analysis
    successful = [r for r in results if r['success']]
    failed = [r for r in results if not r['success']]
    response_times = [r['time'] for r in successful]

    print("\n" + "="*60)
    print("STRESS TEST RESULTS")
    print("="*60)
    print(f"Total tasks: {NUM_TASKS}")
    print(f"Successful: {len(successful)}")
    print(f"Failed: {len(failed)}")
    print(f"Total time: {total_time:.2f}s")
    print(f"Tasks/second: {NUM_TASKS/total_time:.2f}")

    if response_times:
        print(f"\nResponse times:")
        print(f"  Min: {min(response_times)*1000:.2f}ms")
        print(f"  Max: {max(response_times)*1000:.2f}ms")
        print(f"  Mean: {mean(response_times)*1000:.2f}ms")
        print(f"  Median: {median(response_times)*1000:.2f}ms")

    if failed:
        print(f"\nErrors:")
        for r in failed[:5]:  # Show first 5 errors
            print(f"  - {r.get('error', 'Unknown error')}")

    print("="*60)


run_stress_test()

Nos testes em ambiente local em um servidor único, não foram inseridas as configurações de desabilitar o cache de memória do SQLite3 e os resultados foram impressionantes! O banco de dados SQL respondia praticamente no mesmo tempo com ou sem o auxílio do Valkey (Redis).

Resultados com o SQLite3, SEM o cache do Valkey (Redis)

============================================================
STRESS TEST RESULTS
============================================================
Total tasks: 100
Successful: 8000
Failed: 0
Total time: 4.57s
Tasks/second: 21.89

Response times:
  Min: 10.92ms
  Max: 1534.86ms
  Mean: 664.45ms
  Median: 627.76ms
============================================================

Resultados com o SQLite3, COM o cache do Valkey (Redis)

============================================================
STRESS TEST RESULTS
============================================================
Total tasks: 100
Successful: 8000
Failed: 0
Total time: 5.24s
Tasks/second: 19.08

Response times:
  Min: 25.95ms
  Max: 1896.03ms
  Mean: 783.95ms
  Median: 747.06ms
============================================================

Mesmo levando-se em conta o overhead de rede para acessar o Valkey (Redis), a velocidade do SQLite ainda impressiona!

O banco de dados SQLite3 não é utilizado para aplicações em larga escala, por isso, o teste feito localmente não representa um ambiente real sem o recurso de cache do próprio banco. Mesmo desabilitando o cache do SQLite, o próprio sistema operacional faz cache do sistema de arquivos em memória. Estes recursos chamaram mais a minha atenção do que a própria Prova de Conceito do uso do Valkey para cache.

O código fonte completo pode ser encontrado em: memcache-poc

3D Game Scene with Raylib

Misael Braga de Bitencourt — Thu, 23 Oct 2025 00:16:00 +0000

Raylib, the excellent library created by Ramon Santamaria has become very popular recently. Its simplicity makes it easy to build games, engines, and graphics applications. Several UI toolkits have even been created using Raylib.

Newcomers can use the website's simple, to-the-point examples. These samples are organized by the library's main features, such as: window creation, 2D drawing, font rendering, input handling, image loading, 3D shapes, 3D mesh importing, and 3D lighting. Although the documentation is sufficient to learn the basics (and some advanced topics), there isn't a single tutorial that shows how to create a complete 3D scene like the ones found in Unreal Engine tutorials. To build something similar, you must combine many of the individual samples (collision, mesh loading, etc.).

With that in mind, I started using Raylib for the first time to create a full 3D scene. I used some basic sample code as a foundation to build a scene that includes:

A default window
Loading 3D meshes with bones (animation) and textures (UV maps)
Creating a 3D terrain from an image (heightmap)
Loading a 2D texture and applying it to the terrain
Basic lighting
Keyboard input handling
Box collisions

I created the 3D models in about 15 minutes using Blender. As you may notice, I'm not a graphic artist. Despite the rough models, the example works well as a demo.

The following example is written in C, which is the language Raylib itself is written in. If you prefer another language or technology, wrappers for other languages are available. As you read the code, you'll see that Raylib is almost as easy to use as a full game engine. The example is self-explanatory and contains comments on the key parts.

/*******************************************************************************************
*
*                             3D Game Scene Basics - Example
*
********************************************************************************************/
#include<stdio.h>

#include "raylib.h"
#include "raymath.h"

// Function to create a tiled texture by repeating an image X times
Texture2D CreateTiledTexture(Texture2D sourceTexture, int tilesX, int tilesY)
{
    // Get the source image from the texture
    Image sourceImage = LoadImageFromTexture(sourceTexture);

    // Calculate new dimensions
    int newWidth = sourceImage.width * tilesX;
    int newHeight = sourceImage.height * tilesY;

    // Create a new image with the tiled dimensions
    Image tiledImage = GenImageColor(newWidth, newHeight, WHITE);

    // Tile the source image across the new image
    for (int y = 0; y < tilesY; y++)
    {
        for (int x = 0; x < tilesX; x++)
        {
            Rectangle destRec = { 
                x * sourceImage.width, 
                y * sourceImage.height, 
                sourceImage.width, 
                sourceImage.height 
            };
            ImageDraw(&tiledImage, sourceImage, 
                     (Rectangle){ 0, 0, sourceImage.width, sourceImage.height }, 
                     destRec, WHITE);
        }
    }

    // Create texture from the tiled image
    Texture2D tiledTexture = LoadTextureFromImage(tiledImage);

    // Clean up temporary images
    UnloadImage(sourceImage);
    UnloadImage(tiledImage);

    return tiledTexture;
}

// Function to get height from image at a specific world position
float GetHeightFromImage(Image image, Vector3 worldPos, Vector3 mapSize, Vector3 mapPos)
{
    // Convert world coordinates to image coordinates
    float u = (worldPos.x - mapPos.x) / mapSize.x; // Normalize x to [0, 1]
    float v = (worldPos.z - mapPos.z) / mapSize.z; // Normalize z to [0, 1]

    // Ensure u, v are within [0, 1]
    if (u < 0.0f || u > 1.0f || v < 0.0f || v > 1.0f) return 0.0f;

    // Map to image pixel coordinates
    int pixelX = (int)(u * image.width);
    int pixelY = (int)(v * image.height);

    // Get pixel color (grayscale height value)
    Color pixel = GetImageColor(image, pixelX, pixelY);

    // Debug purposes
    // printf(">>>>>>>>> %i %i\n", pixelX, pixelY);

    // Convert grayscale value (0-255) to height (assuming grayscale image)
    // Scale it to match the heightmap mesh's y-scale (8.0f in GenMeshHeightmap)
    float height = (pixel.r / 255.0f) * mapSize.y;

    // Debug purposes
    // printf(">>>>>>>>>> %i\n", height);

    return height;
}



//------------------------------------------------------------------------------------
// Program main entry point
//------------------------------------------------------------------------------------
int main(void)
{
    // Initialization
    //--------------------------------------------------------------------------------------
    const int screenWidth = 800;
    const int screenHeight = 450;

    InitWindow(screenWidth, screenHeight, "raylib [models] example - heightmap loading and drawing");
    Quaternion characterRotate = QuaternionFromAxisAngle((Vector3){ 0.0f, 0.0f, 0.0f }, 0.0f);

    // Define our custom camera to look into our 3d world
    Camera camera = { 0 };
    camera.position = (Vector3){ 0.5f, 1.5f, -0.5f };     // Camera position
    camera.target = (Vector3){ 0.0f, 0.0f, 0.0f };          // Camera looking at point
    camera.up = (Vector3){ 0.0f, 1.0f, 0.0f };              // Camera up vector (rotation towards target)
    camera.fovy = 45.0f;                                    // Camera field-of-view Y
   // camera.projection = CAMERA_PERSPECTIVE;                 // Camera projection type

    Shader lightingShader = LoadShader("resources/shaders/glsl330/lighting.vs", "resources/shaders/glsl330/lighting.fs");

    int animsCount = 0;
    unsigned int animIndex = 0;
    unsigned int animCurrentFrame = 0;
    Model characterModel = LoadModel("resources/char.glb");

    characterModel.materials[0].shader = lightingShader;

    ModelAnimation *modelAnimations = LoadModelAnimations("resources/char.glb", &animsCount); 
    Vector3 characterSize = { 0.5f, 0.5f, 0.5f };


    Model houseModel = LoadModel("resources/house.glb");

    houseModel.materials[0].shader = lightingShader;

    Vector3 housePosition = { 0.5f, 0.03f, 0.93f };
    Vector3 houseSize = { 0.005f, 0.005f, 0.005f };


    Image image = LoadImage("resources/map-01.png");     // Load heightmap image (RAM)
    Texture2D texture = LoadTextureFromImage(image);        // Convert image to texture (VRAM)

    Texture2D terrainTexture01 = LoadTexture("resources/map-01-texture-01.png"); // Load base texture
    Texture2D tiledTerrainTexture = CreateTiledTexture(terrainTexture01, 16, 16); // Create XxX tiled version
    UnloadTexture(terrainTexture01); // Unload original since we're using the tiled version

    Vector3 mapSize = { 16.0f, 8.0f, 16.0f };         // Define heightmap size (x, y, z)
    Mesh mesh = GenMeshHeightmap(image, mapSize); // Generate heightmap mesh (RAM and VRAM)
    Model model = LoadModelFromMesh(mesh);                  // Load model from generated mesh

    SetMaterialTexture(&model.materials[0], MATERIAL_MAP_DIFFUSE, tiledTerrainTexture);

    model.materials[0].shader = lightingShader;

    Vector3 mapPosition = { -8.0f, 0.0f, -8.0f };           // Define model position

    Vector3 walkingPointSize = { 0.2f, 0.2f, 0.2f };
    Vector3 walkingPointPosition = { 0.0f, 1.0f, 2.0f };
    Vector3 walkingPointIntentPosition = { 0.0f, 1.0f, 2.0f };

    SetTargetFPS(60);               // Set our game to run at 60 frames-per-second
    //--------------------------------------------------------------------------------------

    // Setup default sun lighting (directional light)
    Vector3 sunDirection = Vector3Normalize((Vector3){0.3f, -1.0f, 0.4f}); // Sun coming from upper right
    Vector3 sunColor = {1.0f, 0.95f, 0.8f}; // Warm sunlight color
    Vector3 ambientColor = {0.3f, 0.3f, 0.4f}; // Cooler ambient light

    // Get shader uniform locations
    int lightDirLoc = GetShaderLocation(lightingShader, "lightDir");
    int lightColorLoc = GetShaderLocation(lightingShader, "lightColor");
    int ambientColorLoc = GetShaderLocation(lightingShader, "ambientColor");

    // Set sun lighting uniforms (only need to do this once)
    SetShaderValue(lightingShader, lightDirLoc, &sunDirection, SHADER_UNIFORM_VEC3);
    SetShaderValue(lightingShader, lightColorLoc, &sunColor, SHADER_UNIFORM_VEC3);
    SetShaderValue(lightingShader, ambientColorLoc, &ambientColor, SHADER_UNIFORM_VEC3);

    float characterRotationAngle = 0.0f; // Add this variable to track rotation angle
    Vector3 characterRotationAxis = { 0.0f, 1.0f, 0.0f }; // Y-axis rotation

    // Main game loop
    while (!WindowShouldClose())    // Detect window close button or ESC key
    {
        // Update
        //----------------------------------------------------------------------------------
        // UpdateCamera(&camera, CAMERA_ORBITAL);
        camera.position.x = walkingPointPosition.x;
        // camera.position.y = walkingPointPosition.y + 1.5f;
        camera.position.z = walkingPointPosition.z + 2.0f;
        camera.target.x = walkingPointPosition.x;
        camera.target.y = walkingPointPosition.y;
        camera.target.z = walkingPointPosition.z;
        walkingPointPosition.y = GetHeightFromImage(image, walkingPointPosition, mapSize, mapPosition) + 0.05f;
        walkingPointIntentPosition.x = walkingPointPosition.x;
        walkingPointIntentPosition.y = walkingPointPosition.y;
        walkingPointIntentPosition.z = walkingPointPosition.z;
        bool moving = false;
        bool collided = false;
        Vector3 movementDirection = { 0.0f, 0.0f, 0.0f };

        if (IsKeyDown(KEY_RIGHT)) 
        {
            walkingPointIntentPosition.x += 0.01f;
            movementDirection.z = -1.0f;
            characterRotationAngle = 270.0f;
            moving = true;
        }
        else if (IsKeyDown(KEY_LEFT)) 
        {
            walkingPointIntentPosition.x -= 0.01f;
            movementDirection.z = -1.0f;
            characterRotationAngle = 90.0f;
            moving = true;
        }
        else if (IsKeyDown(KEY_DOWN))
        {
            walkingPointIntentPosition.z += 0.01f;
            movementDirection.z = -1.0f;
            characterRotationAngle = 180.0f;
            moving = true;
        }
        else if (IsKeyDown(KEY_UP))
        {
            walkingPointIntentPosition.z -= 0.01f;
            movementDirection.z = -1.0f;
            characterRotationAngle = 0.0f;
            moving = true;
        }

        ModelAnimation anim = modelAnimations[animIndex];
        if (moving)
        {
            // Box collision check
            if (CheckCollisionBoxes(
                (BoundingBox){(Vector3){ walkingPointIntentPosition.x - characterSize.x/2,
                                        walkingPointIntentPosition.y - characterSize.y/2,
                                        walkingPointIntentPosition.z - characterSize.z/2 },
                            (Vector3){ walkingPointIntentPosition.x + characterSize.x/2,
                                        walkingPointIntentPosition.y + characterSize.y/2,
                                        walkingPointIntentPosition.z + characterSize.z/2 }},
                (BoundingBox){(Vector3){ housePosition.x - houseSize.x/2,
                                        housePosition.y - houseSize.y/2,
                                        housePosition.z - houseSize.z/2 },
                            (Vector3){ housePosition.x + houseSize.x/2,
                                        housePosition.y + houseSize.y/2,
                                        housePosition.z + houseSize.z/2 }})) collided = true;

            animCurrentFrame = (animCurrentFrame + 3) % anim.frameCount;
            UpdateModelAnimation(characterModel, anim, animCurrentFrame);
            if (!collided) {
                walkingPointPosition.x = walkingPointIntentPosition.x;
                walkingPointPosition.y = walkingPointIntentPosition.y;
                walkingPointPosition.z = walkingPointIntentPosition.z;
            }
        }


        //----------------------------------------------------------------------------------

        // Draw
        //----------------------------------------------------------------------------------
        BeginDrawing();

            ClearBackground(RAYWHITE);

            BeginMode3D(camera);

                DrawModel(model, mapPosition, 1.0f, WHITE);

                // DrawGrid(20, 1.0f);

                // DrawCube(walkingPointPosition, walkingPointSize.x, walkingPointSize.y, walkingPointSize.z, GRAY);
                // UpdateModelAnimation(characterModel, anim, animCurrentFrame);

                // Set the character position using transform matrix
                //ßcharacterModel.transform = MatrixTranslate(walkingPointPosition.x, walkingPointPosition.y, walkingPointPosition.z);

                // Draw the character model at the walking point position
                DrawModelEx(characterModel, walkingPointPosition, characterRotationAxis, characterRotationAngle, (Vector3){0.03f, 0.03f, 0.03f}, WHITE);

                // House model
                DrawModelEx(houseModel, housePosition, characterRotationAxis, 0.0f, (Vector3){0.05f, 0.05f, 0.05f}, WHITE);

            EndMode3D();

            // DrawTexture(texture, screenWidth - texture.width - 20, 20, WHITE);
            // DrawRectangleLines(screenWidth - texture.width - 20, 20, texture.width, texture.height, GREEN);

            DrawFPS(10, 10);

        EndDrawing();
        //----------------------------------------------------------------------------------
    }

    // De-Initialization
    //--------------------------------------------------------------------------------------
    UnloadImage(image);             // Unload heightmap image from RAM, already uploaded to VRAM
    UnloadTexture(texture);     // Unload texture
    UnloadTexture(tiledTerrainTexture); // Unload tiled terrain texture
    UnloadModel(model);         // Unload model
    UnloadModel(houseModel);

    CloseWindow();              // Close window and OpenGL context
    //--------------------------------------------------------------------------------------

    return 0;
}

The full example can be found in this GitHub repository

Creating Native Desktop Apps with SQLite and GTK

Misael Braga de Bitencourt — Mon, 26 May 2025 00:20:06 +0000

I went back to the 90s when I tested how to create a local Desktop app for PCs. Compilers targeting native binaries, O.S. default user interface and a single file database are uncommon today. However, there has always been a project with those requirements even though it is rare.

Unfortunately, most of modern solutions for local desktop apps are basically a browser packed with a javascript app that looks like a native one. Technologies like Python and Javascript are very productive, friendly for newcomers, easy to debug and run everywere. The price paid for these advantages is the big waste of resources with higher memory and CPU usage. Your software would require an interpreter, virtual machine or browser. Program instructions are typically scripts or virtual machine bytecode or some virtual machine instructions instead of the machine code itself.

We are living in a world with many M1 and M2 processors, low-cost computers with 512Gb SSD and most people have a multi-core computer in their pockets. Performance and light bundles might not be a strict requirement for your project. Anyway, if you are starting a new project with these requirements, the stack I have used could be a good fit.

Some default CRUD

The problem to be solved is a standard CRUD (Create Retrieve Update Delete) of a movie list. The columns of each movie are just its name, year of release, genre and score.

This is just a silly problem created in order to test the stack perform.

This app is coded for Linux. It can be easily executed on Windows with WSL2 or on MAC using VM or container.

Raw lightweight stack

The old C programming language is used aside the good old GCC compiler. Here lies the challenge. No garbage collector, no object orientation, no types, no namespaces and manual memory management. For these reasons it got fast. It is hard, unproductive and a lot of coders will hate it. This is the cost.

Beside the standard lib, the SQlite3 and Gtk3 are used to create a SQL database repository and user interface.

Repository

The SQLite3 database is a efficient, free and open source as well known. Its library was linked in the project. The Sqlite lib provides a connection that requires a filepath to the local storage. If the file does not exists, it will be creating. It also provides procedures to create SQL queries and prepared statements as well.

Some wrapper functions and one struct were wrote to manage the database storage. The struct is the following one:

typedef struct {
    sqlite3 * db;
    unsigned int connected;
    char ** result_buffer;
    int result_buffer_size;
} repository_sqlite3_s;

repository_sqlite3_s repository_sqlite3;

Wrapper procedures:

int repository_sqlite3_query(char * raw_query);
int repository_sqlite3_prepared_statement_query(const char *query_template, const char **bind_values, int bind_count);

The property repository_sqlite3.db holds the pointer to the database connection. connected is just the connection flag.

result_buffer contains a pointer to the memory address of the query result first collumn. Adding a value to this variable (like result_buffer + 1) you can get the address of the second column. In that way, adding the total column count, we could access the second row. Adding 15 * column_count it would be accessing the 15th row.

result_buffer_size is the column count.

Every time repository_sqlite3_prepared_statement_query is called and returns 0, the result is stored in the memory buffer as explained before.

Migrations

Migration is a good technique to control sql database versions. Each new table or column created, update or deleted is added to a list of changes. Every instance of the app needs to run all changes on the list. A new version of the app may have new items in its list.

I have never imagined I would code a database migration system in plain C but there it is:

int repository_sqlite3_migration_run()
{
    int rc;
    char *errMsg = 0;

    printf("SQLite database migration...\n");
    repository_sqlite3_connect();
    import_migrations();

    rc = sqlite3_exec(repository_sqlite3.db, SQL_MIGRATION_JOURNAL_CREATE_TABLE, 0, 0, &errMsg);
    if (rc != SQLITE_OK) 
    {
        printf(stderr, "SQL error: %s\n", errMsg);
        sqlite3_free(errMsg);
        return 1;
    }

    rc = repository_sqlite3_query(SQL_MIGRATION_JOURNAL_FETCH);
    if (rc != SQLITE_OK)
    {
        printf(stderr, "SQL error: %s\n", errMsg);
        sqlite3_free(errMsg);
        return 1;
    }
    int * migrated_ids = malloc(sizeof(int) * repository_sqlite3.result_buffer_size);
    for (int j=0; j<repository_sqlite3.result_buffer_size; j++)
    {
        char * migrated_id_str = repository_sqlite3.result_buffer[j];
        migrated_ids[j] = atoi(migrated_id_str);
    }

    int * migrations_done = malloc(sizeof(int) * REPOSITORY_DATABASE_MIGRATION_BUFFER_SIZE);    
    for (int i=0; i<repository_database_migration_buffer_count; i++)
    {
        int already_migrated = 0; // TODO
        for (int j=0; j<repository_sqlite3.result_buffer_size; j++)
            if (migrated_ids[j] == i)
            {
                already_migrated = 1;
                break;
            }
        if (already_migrated) continue;

        repository_sqlite3_query(repository_database_migration_buffer[i]);
        char * insert_migration_journal_sql_2 = app_strcat("INSERT INTO migration_journal (migration) VALUES('", int32_to_str(i));
        char * insert_migration_journal_sql = app_strcat(insert_migration_journal_sql_2, "');");
        repository_sqlite3_query(insert_migration_journal_sql);
        free(insert_migration_journal_sql_2);
        free(insert_migration_journal_sql);
    }
    repository_sqlite3_connect_clear_all_migrations();
    free(migrations_done);

    return 0;
}

GTK View

Gnome Tool Kit is a free, open source and complete UI lib written in C to create native user interfaces. It is used to create softwares like Gimp and Transmission (Bittorrent client). This is the other lib linked to the app. I have tested the tool kit before and its result can be found on this article.

A GTK visual editor called Glade was managed to design the window. It exports the result in a XML text file very similar to HTML.

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.38.2 -->
<interface>
  <requires lib="gtk+" version="3.24"/>
  <object class="GtkAdjustment" id="adjustment1">
    <property name="lower">1</property>
    <property name="upper">10</property>
    <property name="step-increment">10</property>
    <property name="page-increment">10</property>
  </object>
  <object class="GtkWindow" id="movies_window">
    <property name="can-focus">False</property>
    <property name="title" translatable="yes">Movies</property>
    <property name="resizable">False</property>
    <property name="destroy-with-parent">True</property>
    <child>
      <object class="GtkBox" id="main_window_container">
        <property name="width-request">600</property>
        <property name="visible">True</property>
        <property name="can-focus">False</property>
        <property name="orientation">vertical</property>
        <child>
          <object class="GtkBox" id="form_container">
            <property name="visible">True</property>
            <property name="can-focus">False</property>
            <property name="margin-start">10</property>
            <property name="margin-end">10</property>
            <property name="margin-top">10</property>
            <property name="margin-bottom">10</property>
            <property name="orientation">vertical</property>
            <property name="baseline-position">top</property>
            <child>
              <object class="GtkBox">
                <property name="visible">True</property>
                .....
  </object>
</interface>

A GTK struct called builder is able to load the file mentioned by the gtk_builder_add_from_file.

movies_view.window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
GtkBuilder *builder = gtk_builder_new();
if (!gtk_builder_add_from_file(builder, "./glade/movies_view.glade", NULL)) 
{
    g_printerr("Error loading Glade file\n");
    return;
}
movies_view.window = GTK_WIDGET(gtk_builder_get_object(builder, "movies_window"));
if (!movies_view.window)
{
    g_printerr("Error getting window object\n");
    g_object_unref(builder);
    return;
}

The results

The example full code is published in this Github repository: https://github.com/misabitencourt/gtk3-sqlite3-basic

By using a raw, simpler and layer lowered technologies we are able to build faster, headless and lightweight apps but its cost can be expensive. Tools like Angular and React are easier and way more productive than this to craft user interfaces. About the business and repository layers that could be used as server backend too, the difficulty persists even there. If it were decided to code with a language with garbage collector or some interpreted one, it would be coded around 4 times faster (based on my own experience).

The cons aren’t limited to development time. This app compiled binary runs only on Linux environments. Despite all of other platforms can emulate it easily, other technologies with virtual machines or interpreters bring us more resources to port our apps for other platforms reducing issues.

If you are looking for a high performance approach for your software, it would be a good fit! In other situations, You might think twice before choosing this kind of stack.

2D Game Menu with Godot4

Misael Braga de Bitencourt — Wed, 20 Nov 2024 23:18:44 +0000

Godot is one of the most famous game engines, like Unreal Engine and Unity. Like its competitors, Godot allows the creation of 2D and 3D games with a visual editor. Its main advantage is being open-source. Additionally, it enables developers to write code in a language called Godot Script, which is very similar to Python.

This brief article quickly demonstrates how to create a game menu using the latest major version of the engine, version 4. The menu in question will serve as the screen where the player enters a shop with their character to buy items using gold collected in-game. Anyone who has played a JRPG will recognize this type of screen.

Obtaining Assets

The assets used in this scene are simple and were created with AI. These can easily be replaced with real artwork after development.

Creating the Scene Tree

After starting a new project in the Godot editor, create the first object in the scene tree, a Node2D called InGameShop. This is the root object of the scene. Godot allows you to export it as a reusable resource. The tool also lets you copy and paste this node into a more complex scene.

As a child of the root node, add an object of type Sprite, which will serve as the background for the menu.

Select the "Background" object and set its texture to the background image from the asset collection.

Since the image has a different scale than the screen (you can see the blue outline of the user’s screen in the editor), increase the image size to ensure it fills more than the screen space. (This can be done in the Transform >> Scale property.)

In the image properties, adjust the image's colors to make it less striking, as the background shouldn’t distract from the menu items on the screen. If you prefer, you can do this directly in an editor like Photoshop or GIMP.

Next, create two additional objects under InGameShop. These are of type Node2D, named MenuLeft and MenuRight.

Inside each of MenuLeft and MenuRight, create a child object of type Sprite named Background.

For each sprite created, set its texture to a blue panel image and adjust the size via the Transform property. Reposition them on the screen using the Position property or the editor's tools.

Running the project with the "play" button at the top of the screen shows the user’s perspective.

For the central panel showing the coin count, follow the same process used for the other panels. Create a Node2D under the root object, name it, and add a Sprite inside it. I named it CoinPanel.

Add a Label object inside CoinPanel. This object displays text. In the text property, set the initial value to "0000." Adjust its size and position using the Position and Scale properties, similar to Sprite objects.

Finally, add a Sprite inside CoinPanel to represent the coin icon, positioned on the left of the coin counter. Adjust its size and position using the same properties as before.

Two additional "Label" objects need to be created, one inside "MenuLeft" and another inside "MenuRight". These will represent items within a panel. The size of these items is adjusted, and they are placed as the first row of items in each panel. These labels will lose visibility before the scene begins. The script will clone these items to render the actual list of items for the scene.

The vendor's speech bubble is created by inserting another "Node2D" into the root object. This node is named "SalesmanDialog". It contains a Sprite and a Label. The Sprite serves as the background image, using the speech bubble image. The Label is centered within the bubble, and its color is changed to a dark tone using the property Material >> New Canvas Item >> Edit Canvas Item, and changing the Blend Mode to "Subtract."

When running the project again, you can see how the bubble is positioned on the screen.

Among the selected assets, there is a PNG of a white panel with the image opacity reduced by half. This means the panel will not overlap other elements behind it. Instead, it will behave like light (for light colors) or shadow (for dark colors). A Sprite object with this panel texture was added to "MenuRight," overlaying the first item.

After adjusting the position, the vendor's speech bubble should have its "visible" property set to false. This can be done using the "eye" icon in the left-hand menu or by editing the object's properties directly.

The Labels, which will be duplicated for each item on the left or right, will have their visibility set to invisible. You can use the "eye" icon in the left-hand panel or the "visible" property in the right-hand panel for this.

A Godot Script is added to the main node by right-clicking on it. The script that programs the behavior of the scene is shown below. It is well-commented, with descriptive variable names. If you plan to use this script or something similar in a project, it is recommended to extract enums and messages into separate scripts.

extends Node2D

# Max amount of itens on panel, without scrolling
const max_amount_vertically = 8

# Store itens available enum
enum Adquirance {
    MUSHROOM,
    MUSHROOM_5x,
    RING,
    RING_10x,
    GREEN_MUSHROOM,
    GREEN_MUSHROOM_5x,
    GREEN_MUSHROOM_10x,
    GREEN_MUSHROOM_20x,
    LEAF,
    LEAF_5x,
    LEAF_10x,
}

var adquirances = []
var menu_left_items = []
var menu_right_items = []
var menu_left_scroll_top = 0
var menu_right_scroll_top = 0
var selectedItemIndex = 0
var focusInitialPosition = 0
var game_state = null
var coin_available = 800
var coin_transfering = 0
var salesman_talking = 0

# Store itens available on this store
var salesman_store = [
    Adquirance.MUSHROOM,
    Adquirance.MUSHROOM_5x,
    Adquirance.RING,
    Adquirance.RING_10x,
    Adquirance.GREEN_MUSHROOM,
    Adquirance.GREEN_MUSHROOM_5x,
    Adquirance.GREEN_MUSHROOM_10x,
    Adquirance.GREEN_MUSHROOM_20x,
    Adquirance.LEAF,
    Adquirance.LEAF_5x,
    Adquirance.LEAF_10x,
]

# Internationalization messages
var i18n_messages = {
    'MUSHROOM': 'Mushroom',
    'MUSHROOM_5x': 'Mushroom 5x',
    'RING': 'Ring',
    'RING_10x': 'Ring 10x',
    'GREEN_MUSHROOM': 'Green Mushroom',
    'GREEN_MUSHROOM_5x': 'Green Mushroom 5x',
    'GREEN_MUSHROOM_10x': 'Green Mushroom 10x',
    'GREEN_MUSHROOM_20x': 'Green Mushroom 20x',
    'LEAF': 'Leaf',
    'LEAF_5x': 'Leaf 5x',
    'LEAF_10x': 'Leaf 10x',
    'THX': 'Thanks!',
    'NOT_ENOUGHT_COINS': 'Not enough coins.'
}

# price mapping
var price_table = [
    {
        'item': Adquirance.MUSHROOM,
        'price': 30
    },
    {
        'item': Adquirance.MUSHROOM_5x,
        'price': 70
    },
    {
        'item': Adquirance.RING,
        'price': 90
    },
    {
        'item': Adquirance.RING_10x,
        'price': 140
    },
    {
        'item': Adquirance.GREEN_MUSHROOM,
        'price': 60
    },
    {
        'item': Adquirance.GREEN_MUSHROOM_5x,
        'price': 90
    },
    {
        'item': Adquirance.GREEN_MUSHROOM_10x,
        'price': 120
    },
    {
        'item': Adquirance.GREEN_MUSHROOM_20x,
        'price': 120
    },  
    {
        'item': Adquirance.LEAF,
        'price': 50
    },
    {
        'item': Adquirance.LEAF_5x,
        'price': 200
    },
]

# Called when the node enters the scene tree for the first time.
func _ready():
    rearrange_store()
    focusInitialPosition = $MenuRight/Selection.position.y
    pass

# Called every frame. 'delta' is the elapsed time since the previous frame.
func _physics_process(delta):
    if coin_transfering > 0:
        coin_available -= 1
        coin_transfering -= 1
        $CoinPanel/Label.text = str(coin_available)
    else:
        if Input.is_action_just_released("ui_down"):
            selectedItemIndex += 1
            # $PopAudio.play()
        if Input.is_action_just_released("ui_up"):
            selectedItemIndex -= 1
            # $PopAudio.play()
        if Input.is_action_just_released("ui_accept"):          
            buy_item(salesman_store[selectedItemIndex + menu_right_scroll_top])
            # $PopAudio.play()
    if selectedItemIndex < 0:
        selectedItemIndex = 0
        if menu_right_scroll_top > 0:
            menu_left_scroll_top -= 1
            do_menu_right_scroll_up()
    if selectedItemIndex > salesman_store.size():
        selectedItemIndex = salesman_store.size()
    if (selectedItemIndex + menu_right_scroll_top) > (salesman_store.size()-1):
        selectedItemIndex -= 1
    if selectedItemIndex > (max_amount_vertically-1):
        do_menu_right_scroll_down()
        selectedItemIndex = (max_amount_vertically-1)
    $MenuRight/Selection.position.y = focusInitialPosition + (selectedItemIndex * 35)
    if salesman_talking > 0:
        salesman_talking -= 1
        if salesman_talking == 0:
            $SalesmanDialog.visible = false
    pass


func do_menu_right_scroll_down():
    menu_right_scroll_top += 1
    rearrange_store()


func do_menu_right_scroll_up():
    menu_right_scroll_top -= 1
    rearrange_store()


func get_item_name(item):
    match item:
        'mushroom':
            return i18n_messages['MUSHROOM']
        'ring':
            return i18n_messages['RING']
        'green_mushroom':
            return i18n_messages['GREEN_MUSHROOM']
        'leaf':
            return i18n_messages['LEAF']
        Adquirance.MUSHROOM:
            return i18n_messages['MUSHROOM']
        Adquirance.MUSHROOM_5x:
            return i18n_messages['MUSHROOM_5x']
        Adquirance.RING:
            return i18n_messages['RING']
        Adquirance.RING_10x:
            return i18n_messages['RING_10x']
        Adquirance.GREEN_MUSHROOM:
            return i18n_messages['GREEN_MUSHROOM']
        Adquirance.GREEN_MUSHROOM_5x:
            return i18n_messages['GREEN_MUSHROOM_5x']
        Adquirance.GREEN_MUSHROOM_10x:
            return i18n_messages['GREEN_MUSHROOM_10x']
        Adquirance.GREEN_MUSHROOM_20x:
            return i18n_messages['GREEN_MUSHROOM_20x']
        Adquirance.LEAF:
            return i18n_messages['LEAF']
        Adquirance.LEAF_5x:
            return i18n_messages['LEAF_5x']
        Adquirance.LEAF_10x:
            return i18n_messages['LEAF_10x']
    return ""


func get_product_price(item):
    for price_table_item in price_table:
        if price_table_item['item'] == item:
            return price_table_item['price']
    return 0 


func rearrange_store():
    $CoinPanel/Label.text = str(coin_available)
    var amount = 0
    for item in menu_right_items:
        $MenuRight.remove_child(item['node']) 
    for item in menu_left_items:
        $MenuLeft.remove_child(item['node']) 
    menu_right_items = []
    var scrolling = menu_right_scroll_top
    for item in salesman_store:
        if scrolling > 0:
            scrolling -= 1
            continue
        var item_node = $MenuRight/Item.duplicate()
        var in_list_item = {
            'kind': item,
            'node': item_node
        }
        menu_right_items.push_back(in_list_item)
        if amount < max_amount_vertically:
            $MenuRight.add_child(item_node)
            item_node.position.y += 35 * amount
            item_node.set_visible(true)
            item_node.text = get_item_name(item) + " $" + str(get_product_price(item))
        amount += 1
        if amount == max_amount_vertically:
            var more_indicator = $MenuRight/Item.duplicate()
            more_indicator.text = "..."
            more_indicator.set_visible(true)
            more_indicator.position.y += 35 * amount
            $MenuRight.add_child(more_indicator)
    amount = 0
    for adquirance in adquirances:
        var item_node = $MenuLeft/Item.duplicate()
        item_node.visible = true
        item_node.position.y += 35 * amount
        item_node.text = get_item_name(adquirance.type) + " x" + str(adquirance.amount)
        var in_list_item = {
            'kind': adquirance.type,
            'amount': adquirance.amount,
            'node': item_node
        }
        menu_left_items.push_back(in_list_item)
        $MenuLeft.add_child(item_node)
        amount += 1


func buy_item(item):
    var price = get_product_price(item)
    if coin_available < price:
        salesman_talks(i18n_messages['NOT_ENOUGHT_COINS'])
        return; # TODO more coins needed
    coin_transfering = price
    salesman_talks(i18n_messages['THX'])
    match item:
        Adquirance.MUSHROOM:
            add_item_to_bag('mushroom', 1)
            return;
        Adquirance.MUSHROOM_5x:
            add_item_to_bag('mushroom', 5)
            return;
        Adquirance.RING:
            add_item_to_bag('ring', 1)
            return;
        Adquirance.RING_10x:
            add_item_to_bag('ring', 10)
            return;
        Adquirance.GREEN_MUSHROOM:
            add_item_to_bag('green_mushroom', 1)
            return;
        Adquirance.GREEN_MUSHROOM_5x:
            add_item_to_bag('green_mushroom', 5)
            return;
        Adquirance.GREEN_MUSHROOM_10x:
            add_item_to_bag('green_mushroom', 10)
            return;
        Adquirance.GREEN_MUSHROOM_20x:
            add_item_to_bag('green_mushroom', 20)
            return;
        Adquirance.LEAF:
            add_item_to_bag('leaf', 1)
            return;
        Adquirance.LEAF_5x:
            add_item_to_bag('leaf', 5)
            return;
        Adquirance.LEAF_10x:
            add_item_to_bag('leaf', 10)
            return;


func add_item_to_bag(type, amount): 
    for adquired in adquirances:
        if adquired.type == type:
            adquired.amount += amount
            rearrange_store()
            return;
    adquirances.push_back({ 'type': type, 'amount': amount })
    rearrange_store()


func salesman_talks(message):
    $SalesmanDialog/Label.text = message
    $SalesmanDialog.visible = true
    salesman_talking = 200

Github repository: https://github.com/misabitencourt/in-game-shop

Menu de Game Retrô com Godot4

Misael Braga de Bitencourt — Wed, 20 Nov 2024 23:01:34 +0000

A Godot é uma game engine das mais famosas, como a Unreal Engine e Unit. Assim como suas concorrentes, a Godot permite a criação de games 2D e 3D com editor visual. O seu principal diferencial é ser de código aberto. Além disso, esta permite que o programador escreva em uma linguagem chamada Godot Script, muito parecida com Python.

Esse pequeno artigo vai mostrar rapidamente como criar a parte de menu de um game utilizando esta engine em sua versão major mais recente, a versão 4. O menu em questão será a tela onde o jogador entra com seu personagem em uma loja, para comprar itens com o ouro coletado in-game. Todo o mundo que já jogou um JRPG é familiar com esse tipo de tela.

Obtendo assets

Os assets utilizados na cena são bem básicos, criados por I.A. Estes podem ser facilmente trocados por artes de verdade depois do desenvolvimento.

Criando árvore da cena

Depois de criar um novo projeto usando o editor da engine, criei o primeiro objeto na árvore da cena que é um Node2D o qual chamei de InGameShop. Esse é o objeto raíz da cena. A Godot permite que você exporte ele como um recurso reutilizável. A ferramenta também permite que você simplesmente copie esse nó é cole em uma cena mais complexa.

Como filho do nó raiz, adicionamos um objeto do tipo "Sprite", que será o plano de fundo do menu.

Selecionamos o objeto "Background" e trocamos sua textura para a imagem de fundo da coleção de assets.

Como a imagem possui uma escala diferente da tela (podemos ver o contorno da tela do usuário final em azul, no editor), vamos aumentar o tamanho
da imagem de fundo para que ela ocupe um espaço maior do que a tela. (isso pode ser feito na propriedade Transform >> Scale).

Ainda nas propriedades da imagem, podemos modular as cores da imagem para torná-la menos chamativa, visto que o plano de fundo não pode atrapalhar a visão dos itens do menu na tela. Caso prefira, você pode fazer isso direto na imagem com um editor como o Photoshop ou Gimp.

Agora, vamos criar mais dois objetos debaixo de "InGameShop". São do tipo "Node2D" e vamos chamá-los de "MenuLeft" e "MenuRight".

Dentro de "MenuLeft" e "MenuRight", para cada um deles, criamos um objeto filho do tipo "Sprite" chamado "Background".

Para cada um dos sprites criados anteriormente, selecionamos a imagem que é um painel azul como textura. Depois disso, definimos seu tamanho, o tamanho de cada painel, redimensionando o sprite. Isso pode ser feito pela propriedade transform. Depois, reposicionamos eles na tela, por meio da pripriedade position ou utilziando as ferramentas na parte superior do editor.

Se executarmos o projeto, no ícone de "play" na parte superior da tela, podemos ter a visão do usuário final.

Para criar o painel no meio com a quantidade de moedas, fazemos da mesma forma com que fizemos os outros paineis. Criamos um "Node2D" debaixo do objeto raíz, nomeamos ele e inserimos um objeto "Sprite" dentro desse. Chamei esse de "CoinPanel"

Adicionei um objeto do tipo "Label" dentro do "CoinPanel", como o próprio nome sugere, esse objeto insere um texto. A propriedade "text", como texto inicial, foi inserido o valor "0000". Para controlar seu tamanho e posição, altera-se position e scale, como nos objetos "Sprite".

Adicionado mais um Sprite dentro de "CoinPanel", este sprite é referente ao ícone de moeda que fica à esquerda, no pequeno contador de moedas. O Tamanho e posição foram ajustados nas mesmas propriedades citadas anteriormente.

Mais dois objetos "Labels" precisam ser criados, um dentro de "MenuLeft" e outro dentro de "MenuRight". Eles representarão um item dentro de um painel. É ajustado o tamanho destes itens e inserido no que seria a primeira linha de itens de cada painel. Estes labels perderão a visibilidade antes da cena começar. O script irá clonar esses itens com o fim de renderizar a lista real de itens da cena.

O balão de mensagens do vendedor é criado inserindo mais um "Node2D" dentro do objeto raíz. Chamei esse node de "SalesmanDialog". Este node possui um Sprite e um Label dentro dele. O Sprite é a imagem de fundo que utilizei a imagem do balão de fala. O Label é centralizado no balão e a sua cor é alterada para um tom escuro utilizando a propriedade Material >> Novo Canvas item >> Editar o canvas item e alterando o Blend mode para "Subtract".

Ao executarmos o projeto novamente, podemos ver como o balão fica posicionado em tela.

Nos assets selecionados, existe um png de um painel branco com a opacidade da imagem pela metade. Isso quer dizer que esse painel não ficará sobreposto sobre outros elementos por trás dele. Em vez disso, ele se comportará como uma luz (para cores claras) ou sombra (para cores escuras). Um objeot Sprite com a textura desse painel foi inserido no "MenuRight" sobrepondo o primeiro item.

Depois de ajustada a posição, o balão da fala do vendedor deve ter sua propriedade "visible" alterada para false. Isso pode ser feito no ícone de "olho" no menu á esquerda ou editando as propriedades do objeto mesmo.

Os Labels, que serão duplicados para cada item na esquerda ou à direita, terão suas visibilidades alteradas de modo que fiquem invisíveis. O ícone com o "olho" no painel á esquerda pode ser utilizado tanto quanto a propriedade visible no painel à direita.

Um Godot Script é adicionado no nó principal, clicando com o botão direito neste. O script que programa o comportamento da cena é este abaixo. Ele está comentado e com os nomes de variávels bem descritas. Se for utilizar este script ou algo parecido em um projeto, recomendo extrair os enums e mensagens em scripts separados.

extends Node2D

# Max amount of itens on panel, without scrolling
const max_amount_vertically = 8

# Store itens available enum
enum Adquirance {
    MUSHROOM,
    MUSHROOM_5x,
    RING,
    RING_10x,
    GREEN_MUSHROOM,
    GREEN_MUSHROOM_5x,
    GREEN_MUSHROOM_10x,
    GREEN_MUSHROOM_20x,
    LEAF,
    LEAF_5x,
    LEAF_10x,
}

var adquirances = []
var menu_left_items = []
var menu_right_items = []
var menu_left_scroll_top = 0
var menu_right_scroll_top = 0
var selectedItemIndex = 0
var focusInitialPosition = 0
var game_state = null
var coin_available = 800
var coin_transfering = 0
var salesman_talking = 0

# Store itens available on this store
var salesman_store = [
    Adquirance.MUSHROOM,
    Adquirance.MUSHROOM_5x,
    Adquirance.RING,
    Adquirance.RING_10x,
    Adquirance.GREEN_MUSHROOM,
    Adquirance.GREEN_MUSHROOM_5x,
    Adquirance.GREEN_MUSHROOM_10x,
    Adquirance.GREEN_MUSHROOM_20x,
    Adquirance.LEAF,
    Adquirance.LEAF_5x,
    Adquirance.LEAF_10x,
]

# Internationalization messages
var i18n_messages = {
    'MUSHROOM': 'Mushroom',
    'MUSHROOM_5x': 'Mushroom 5x',
    'RING': 'Ring',
    'RING_10x': 'Ring 10x',
    'GREEN_MUSHROOM': 'Green Mushroom',
    'GREEN_MUSHROOM_5x': 'Green Mushroom 5x',
    'GREEN_MUSHROOM_10x': 'Green Mushroom 10x',
    'GREEN_MUSHROOM_20x': 'Green Mushroom 20x',
    'LEAF': 'Leaf',
    'LEAF_5x': 'Leaf 5x',
    'LEAF_10x': 'Leaf 10x',
    'THX': 'Thanks!',
    'NOT_ENOUGHT_COINS': 'Not enough coins.'
}

# price mapping
var price_table = [
    {
        'item': Adquirance.MUSHROOM,
        'price': 30
    },
    {
        'item': Adquirance.MUSHROOM_5x,
        'price': 70
    },
    {
        'item': Adquirance.RING,
        'price': 90
    },
    {
        'item': Adquirance.RING_10x,
        'price': 140
    },
    {
        'item': Adquirance.GREEN_MUSHROOM,
        'price': 60
    },
    {
        'item': Adquirance.GREEN_MUSHROOM_5x,
        'price': 90
    },
    {
        'item': Adquirance.GREEN_MUSHROOM_10x,
        'price': 120
    },
    {
        'item': Adquirance.GREEN_MUSHROOM_20x,
        'price': 120
    },  
    {
        'item': Adquirance.LEAF,
        'price': 50
    },
    {
        'item': Adquirance.LEAF_5x,
        'price': 200
    },
]

# Called when the node enters the scene tree for the first time.
func _ready():
    rearrange_store()
    focusInitialPosition = $MenuRight/Selection.position.y
    pass

# Called every frame. 'delta' is the elapsed time since the previous frame.
func _physics_process(delta):
    if coin_transfering > 0:
        coin_available -= 1
        coin_transfering -= 1
        $CoinPanel/Label.text = str(coin_available)
    else:
        if Input.is_action_just_released("ui_down"):
            selectedItemIndex += 1
            # $PopAudio.play()
        if Input.is_action_just_released("ui_up"):
            selectedItemIndex -= 1
            # $PopAudio.play()
        if Input.is_action_just_released("ui_accept"):          
            buy_item(salesman_store[selectedItemIndex + menu_right_scroll_top])
            # $PopAudio.play()
    if selectedItemIndex < 0:
        selectedItemIndex = 0
        if menu_right_scroll_top > 0:
            menu_left_scroll_top -= 1
            do_menu_right_scroll_up()
    if selectedItemIndex > salesman_store.size():
        selectedItemIndex = salesman_store.size()
    if (selectedItemIndex + menu_right_scroll_top) > (salesman_store.size()-1):
        selectedItemIndex -= 1
    if selectedItemIndex > (max_amount_vertically-1):
        do_menu_right_scroll_down()
        selectedItemIndex = (max_amount_vertically-1)
    $MenuRight/Selection.position.y = focusInitialPosition + (selectedItemIndex * 35)
    if salesman_talking > 0:
        salesman_talking -= 1
        if salesman_talking == 0:
            $SalesmanDialog.visible = false
    pass


func do_menu_right_scroll_down():
    menu_right_scroll_top += 1
    rearrange_store()


func do_menu_right_scroll_up():
    menu_right_scroll_top -= 1
    rearrange_store()


func get_item_name(item):
    match item:
        'mushroom':
            return i18n_messages['MUSHROOM']
        'ring':
            return i18n_messages['RING']
        'green_mushroom':
            return i18n_messages['GREEN_MUSHROOM']
        'leaf':
            return i18n_messages['LEAF']
        Adquirance.MUSHROOM:
            return i18n_messages['MUSHROOM']
        Adquirance.MUSHROOM_5x:
            return i18n_messages['MUSHROOM_5x']
        Adquirance.RING:
            return i18n_messages['RING']
        Adquirance.RING_10x:
            return i18n_messages['RING_10x']
        Adquirance.GREEN_MUSHROOM:
            return i18n_messages['GREEN_MUSHROOM']
        Adquirance.GREEN_MUSHROOM_5x:
            return i18n_messages['GREEN_MUSHROOM_5x']
        Adquirance.GREEN_MUSHROOM_10x:
            return i18n_messages['GREEN_MUSHROOM_10x']
        Adquirance.GREEN_MUSHROOM_20x:
            return i18n_messages['GREEN_MUSHROOM_20x']
        Adquirance.LEAF:
            return i18n_messages['LEAF']
        Adquirance.LEAF_5x:
            return i18n_messages['LEAF_5x']
        Adquirance.LEAF_10x:
            return i18n_messages['LEAF_10x']
    return ""


func get_product_price(item):
    for price_table_item in price_table:
        if price_table_item['item'] == item:
            return price_table_item['price']
    return 0 


func rearrange_store():
    $CoinPanel/Label.text = str(coin_available)
    var amount = 0
    for item in menu_right_items:
        $MenuRight.remove_child(item['node']) 
    for item in menu_left_items:
        $MenuLeft.remove_child(item['node']) 
    menu_right_items = []
    var scrolling = menu_right_scroll_top
    for item in salesman_store:
        if scrolling > 0:
            scrolling -= 1
            continue
        var item_node = $MenuRight/Item.duplicate()
        var in_list_item = {
            'kind': item,
            'node': item_node
        }
        menu_right_items.push_back(in_list_item)
        if amount < max_amount_vertically:
            $MenuRight.add_child(item_node)
            item_node.position.y += 35 * amount
            item_node.set_visible(true)
            item_node.text = get_item_name(item) + " $" + str(get_product_price(item))
        amount += 1
        if amount == max_amount_vertically:
            var more_indicator = $MenuRight/Item.duplicate()
            more_indicator.text = "..."
            more_indicator.set_visible(true)
            more_indicator.position.y += 35 * amount
            $MenuRight.add_child(more_indicator)
    amount = 0
    for adquirance in adquirances:
        var item_node = $MenuLeft/Item.duplicate()
        item_node.visible = true
        item_node.position.y += 35 * amount
        item_node.text = get_item_name(adquirance.type) + " x" + str(adquirance.amount)
        var in_list_item = {
            'kind': adquirance.type,
            'amount': adquirance.amount,
            'node': item_node
        }
        menu_left_items.push_back(in_list_item)
        $MenuLeft.add_child(item_node)
        amount += 1


func buy_item(item):
    var price = get_product_price(item)
    if coin_available < price:
        salesman_talks(i18n_messages['NOT_ENOUGHT_COINS'])
        return; # TODO more coins needed
    coin_transfering = price
    salesman_talks(i18n_messages['THX'])
    match item:
        Adquirance.MUSHROOM:
            add_item_to_bag('mushroom', 1)
            return;
        Adquirance.MUSHROOM_5x:
            add_item_to_bag('mushroom', 5)
            return;
        Adquirance.RING:
            add_item_to_bag('ring', 1)
            return;
        Adquirance.RING_10x:
            add_item_to_bag('ring', 10)
            return;
        Adquirance.GREEN_MUSHROOM:
            add_item_to_bag('green_mushroom', 1)
            return;
        Adquirance.GREEN_MUSHROOM_5x:
            add_item_to_bag('green_mushroom', 5)
            return;
        Adquirance.GREEN_MUSHROOM_10x:
            add_item_to_bag('green_mushroom', 10)
            return;
        Adquirance.GREEN_MUSHROOM_20x:
            add_item_to_bag('green_mushroom', 20)
            return;
        Adquirance.LEAF:
            add_item_to_bag('leaf', 1)
            return;
        Adquirance.LEAF_5x:
            add_item_to_bag('leaf', 5)
            return;
        Adquirance.LEAF_10x:
            add_item_to_bag('leaf', 10)
            return;


func add_item_to_bag(type, amount): 
    for adquired in adquirances:
        if adquired.type == type:
            adquired.amount += amount
            rearrange_store()
            return;
    adquirances.push_back({ 'type': type, 'amount': amount })
    rearrange_store()


func salesman_talks(message):
    $SalesmanDialog/Label.text = message
    $SalesmanDialog.visible = true
    salesman_talking = 200

Um repositório com o projeto pode ser encontrado em: https://github.com/misabitencourt/in-game-shop

Criando interface gráfica Desktop nativa utilizando C++ com GTK3

Misael Braga de Bitencourt — Sun, 13 Oct 2024 22:26:29 +0000

Trabalho há muitos anos desenvolvendo interface gráfica para a web, soluções desktop Java e Android. Atualmente, eu estou curioso sobre como seria criar essas soluções para Desktop sem utilizar alguma ferramenta multiplataforma.

Com o intuito de experimentar como seria desenvolver uma interface gráfica para PCs Desktop nativa em C/C++, decidi criar uma pequena aplicação usual "TODO list" (lista de afazeres) nesses moldes.

Quando eu me refiro a "Desktop nativo", estou falando de soluções que não envolvam containers web ou outras soluções multi-plataforma como o Java FX ou Swing. Apesar de soluções híbridas serem ideais para criar aplicações para várias plataformas com o mesmo código, elas possuem um GAP em questão de performance. Além disso, diferentes sistemas operacionais se comportam de maneiras distintas e um código genérico para todos eles pode apresentar comportamentos inesperados.

Os diferentes sistemas operacionais possuem diferentes APIs e frameworks para criar apps Desktop. Para a minha pequena aplicação, decidi que ela seria executada no Linux e codificada em C++ com o compilador GCC. Dessa forma, utilizo apenas software livre tanto no S.O. quanto nas ferramentas utilizadas. Caso o programa necessite ser executado em Windows, o WSL pode abrir o software. Já no MacOS, é muito fácil de emular outros sistemas.

Continuando com a utilização de software livre, a biblioteca GTK nos permite construir interfaces gráficas. Ferramenta esta utilizada em programas famosos como GIMP (editor de imagens) e Transmission (cliente BitTorrent).

O repositório com o código fonte do projeto encontra-se aqui: https://github.com/misabitencourt/gtk3-cpp-todolist

Criando um arquivo CMAKE para o projeto

Foi feito o uso do CMAKE para definir as configurações de build. Eu acho muito cômodo o fato de o CMAKE gerar o Makefile no Linux e também poder criar um projeto Visual Studio no Windows.

O CMAKE pode ser instalado via APT em distribuições Debian.

sudo apt install cmake

O arquivo CMakeLists ficou da seguinte forma:

cmake_minimum_required(VERSION 3.0)
project(todolist_app)
set(CMAKE_CXX_STANDARD 17)

# Find GTK3 package
find_package(PkgConfig REQUIRED)
pkg_check_modules(GTK3 REQUIRED gtk+-3.0)

file(GLOB SOURCES
    "src/sample.cpp"
)

add_compile_options(-fpermissive)
include_directories(./)
include_directories(${GTK3_INCLUDE_DIRS})

add_executable(todolist_app ${SOURCES})


target_link_libraries(todolist_app ${GTK3_LIBRARIES})

add_definitions(${GTK3_CFLAGS_OTHER})

Para gerar o Makefile, basta rodar:

mkdir build
cd build
cmake ../

Antes de executar o script do Makefile, é preciso instalar a lib-gtk:

sudo apt install libgtk-3-dev

Obviamente, o compilador GCC (e o build-essential) junto com o make também têm de estar instalados. Geralmente, esses pacotes já estão configurados em praticamente toda a máquina de desenvolvedores. Para compilar o projeto, basta usar o make:

cd build
make
./todolist_app

Main loop

O código abaixo é o arquivo que possui o void main do projeto. Nele, o loop principal da aplicação é iniciado. Antes disso, foram definidas algumas structs e módulos para salvar, atualizar, listar e deletar a lista de afazeres. Como o objetivo é apenas o foco na interface, esses métodos persistem em uma lista local na memória.

Main loop:

#include <gtk/gtk.h>
#include<list>
#include<string>

// Types
#include "types/models.h"

// Services
#include "services/todo-service.h"

// Views
#include "views/dialogs.h"
#include "views/main.h"


int main(int argc, char *argv[]) 
{
    gtk_init(&argc, &argv);

    // Show all widgets
    MainWindow::openMainWindow();

    gtk_main();

    return 0;
}

Antes da criação da janela da aplicação, a API da GTK requer uma chamada de inicialização passando os parâmetros dos argumentos da chamada. O método gtk_main inicia o event loop da interface gráfica.

O módulo MainWindow foi definido em views/main.h:

#define APP_MAIN_WINDOW_WIDTH 400
#define APP_MAIN_WINDOW_HEIGHT 800
#define SUCCESS_COLOR "#99DD99"

namespace MainWindow
{
    // Main widget pointers
    GtkWidget *mainWindow = nullptr;
    GtkWidget *mainWindowContainer = nullptr;
    GtkWidget *(*mainWindowRefresh)();
    GtkWidget *todoInputText;
    int inEdition = 0;

    // Button events
    void mainWindowViewTodoListSaveClicked(GtkWidget *widget, gpointer data)
    {
        GtkEntry *entry = GTK_ENTRY(data);
        const gchar *text = gtk_entry_get_text(entry);
        Todo todoDto;
        todoDto.description = (char *)text;
        if (inEdition)
        {
            todoDto.id = inEdition;
            TodoService::todolistUpdate(&todoDto);
        }
        else
        {
            TodoService::todolistSave(&todoDto);
        }
        inEdition = 0;
        mainWindowRefresh();
        gtk_widget_show_all(mainWindowContainer);
    }

    void mainWindowViewTodoListEditClicked(GtkWidget *widget, int id)
    {
        Todo *todo = TodoService::todolistLoad(id);
        inEdition = id;
        g_print("Editing %i %s\n", todo->id, todo->description);
        gtk_entry_set_text(GTK_ENTRY(todoInputText), todo->description);
    }

    void mainWindowViewTodoListDeleteClicked(GtkWidget *widget, int id)
    {
        TodoService::todolistDelete(id);
        mainWindowRefresh();
        gtk_widget_show_all(mainWindowContainer);
    }

    // Render function
    GtkWidget *createMainWindowView()
    {
        GtkWidget *list_box;
        GtkWidget *row;
        GtkWidget *hbox;
        GtkWidget *label;

        mainWindowRefresh = createMainWindowView;

        // Creates a new window
        if (mainWindow == nullptr)
        {
            mainWindow = gtk_window_new(GTK_WINDOW_TOPLEVEL);
            gtk_window_set_title(GTK_WINDOW(mainWindow), "Todo List");
            gtk_window_set_default_size(GTK_WINDOW(mainWindow), APP_MAIN_WINDOW_WIDTH, APP_MAIN_WINDOW_HEIGHT);
            g_signal_connect(mainWindow, "destroy", G_CALLBACK(gtk_main_quit), NULL);
        }
        else
        {
            gtk_widget_destroy(mainWindowContainer);
        }

        GtkWidget *windowContainer;
        windowContainer = gtk_box_new(GTK_ORIENTATION_VERTICAL, 5);
        mainWindowContainer = windowContainer;
        gtk_container_add(GTK_CONTAINER(mainWindow), windowContainer);

        GtkWidget *todoFormContainer;
        todoFormContainer = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 0);
        gtk_container_add(GTK_CONTAINER(windowContainer), todoFormContainer);

        GtkWidget *inputVbox;
        inputVbox = gtk_box_new(GTK_ORIENTATION_VERTICAL, 5);
        gtk_widget_set_size_request(inputVbox, 250, -1);
        gtk_container_add(GTK_CONTAINER(todoFormContainer), inputVbox);
        todoInputText = gtk_entry_new();
        gtk_box_pack_start(GTK_BOX(inputVbox), todoInputText, TRUE, TRUE, 0);

        GtkWidget *saveBtn;
        saveBtn = gtk_button_new_with_label("Save");
        gtk_widget_set_size_request(saveBtn, 80, -1);
        gtk_container_add(GTK_CONTAINER(todoFormContainer), saveBtn);
        g_signal_connect(saveBtn, "clicked", G_CALLBACK(mainWindowViewTodoListSaveClicked), todoInputText);

        GtkWidget *cancelBtn;
        cancelBtn = gtk_button_new_with_label("Cancel");
        gtk_widget_set_size_request(cancelBtn, 80, -1);
        gtk_container_add(GTK_CONTAINER(todoFormContainer), cancelBtn);

        // // Creates a new GtkListBox
        list_box = gtk_list_box_new();
        gtk_container_add(GTK_CONTAINER(windowContainer), list_box);

        // // Creates and add rows to the GtkListBox
        int i = 0;
        for (std::list<Todo>::iterator it = todoListRepository.begin(); it != todoListRepository.end(); ++it)
        {
            row = gtk_list_box_row_new();
            hbox = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 5);

            // Column 1
            gchar *label_text1 = g_strdup_printf(it->description, i);
            label = gtk_label_new(label_text1);
            gtk_widget_set_size_request(label, 250, -1);
            gtk_box_pack_start(GTK_BOX(hbox), label, TRUE, TRUE, 0);
            g_free(label_text1);

            // Column 2
            GtkWidget *editBtn = gtk_button_new_with_label("Edit");
            gtk_widget_set_size_request(saveBtn, 80, -1);
            gtk_box_pack_start(GTK_BOX(hbox), editBtn, TRUE, TRUE, 0);
            g_signal_connect(editBtn, "clicked", G_CALLBACK(mainWindowViewTodoListEditClicked), it->id);

            // Column 3
            GtkWidget *removeBtn = gtk_button_new_with_label("Remove");
            gtk_widget_set_size_request(removeBtn, 80, -1);
            gtk_box_pack_start(GTK_BOX(hbox), removeBtn, TRUE, TRUE, 0);
            int index = i;
            g_signal_connect(removeBtn, "clicked", G_CALLBACK(mainWindowViewTodoListDeleteClicked), it->id);

            gtk_container_add(GTK_CONTAINER(row), hbox);
            gtk_container_add(GTK_CONTAINER(list_box), row);
            i++;
        }

        return mainWindow;
    }

    // Open function
    void openMainWindow()
    {
        gtk_widget_show_all(createMainWindowView());
    }
}

Semelhante a abordagem utilizada nas tecnologias web e no desenvolvimento Android, no GTK, temos uma interface para criar uma janela gtk_window_new e dentro dela, adicionamos vários elementos que podem conter vários outros elementos dentro, assim, formando uma árvore. Os elementos aqui são GtkWidget. Na documentação da lib podemos encontrar os diversos tipos de Widgets que podemos utilizar.

Em meu experimento, não utilizei nenhuma ferramenta para o design da tela. Tudo foi feito via interface de programação. Todavia, o GTK permite a criação de arquivos XML que representam a tela. E o Glade é uma interface gráfica que permite a criação destes XML.

Creating a Native Desktop GUI Using C++ with GTK

Misael Braga de Bitencourt — Sun, 13 Oct 2024 22:03:49 +0000

I've been working for many years developing graphical interfaces for the web, as well as desktop Java and Android solutions. Currently, I'm curious about how it would be to create these solutions for the desktop without using a cross-platform tool.

With the goal of experimenting with developing a native graphical interface for desktop PCs in C/C++, I decided to create a small and practical "TODO list" application using this approach.

When I say "native desktop," I'm referring to solutions that do not involve web containers or other cross-platform solutions like JavaFX or Swing. Although hybrid solutions are ideal for creating applications for various platforms with the same code, they often have a performance gap. Additionally, different operating systems behave differently, and generic code for all of them may show unexpected behavior.

Different operating systems have different APIs and frameworks for creating desktop apps. For my small application, I decided it would run on Linux and be coded in C++ using the GCC compiler. This way, I only use open-source software both in the OS and in the tools used. If the program needs to run on Windows, WSL can open the software. On macOS, it's very easy to emulate other systems.

Continuing with the use of open-source software, the GTK library allows us to build graphical interfaces. This tool is used in famous programs like GIMP (image editor) and Transmission (BitTorrent client).

The repository with the project's source code can be found here: https://github.com/misabitencourt/gtk3-cpp-todolist

Creating a CMAKE File for the Project

I used CMAKE to define the build configurations. I find it very convenient that CMAKE generates the Makefile on Linux and can also create a Visual Studio project on Windows.

CMAKE can be installed via APT on Debian distributions.

sudo apt install cmake

The CMakeLists file looks like this:

cmake_minimum_required(VERSION 3.0)
project(todolist_app)
set(CMAKE_CXX_STANDARD 17)

# Find GTK3 package
find_package(PkgConfig REQUIRED)
pkg_check_modules(GTK3 REQUIRED gtk+-3.0)

file(GLOB SOURCES
    "src/sample.cpp"
)

add_compile_options(-fpermissive)
include_directories(./)
include_directories(${GTK3_INCLUDE_DIRS})

add_executable(todolist_app ${SOURCES})


target_link_libraries(todolist_app ${GTK3_LIBRARIES})

add_definitions(${GTK3_CFLAGS_OTHER})

To generate the Makefile, simply run:

mkdir build
cd build
cmake ../

Before running the Makefile script, you need to install the GTK library:

sudo apt install libgtk-3-dev

Of course, the GCC compiler (and build-essential) along with make must also be installed. These packages are generally already configured on almost every developer's machine. To compile the project, just use make:

cd build
make
./todolist_app

Main loop

The code below is the file containing the project's void main. Here, the main loop of the application is started. Before that, some structs and modules were defined to save, update, list, and delete the to-do list. Since the focus is only on the interface, these methods persist in a local list in memory.

Main loop:

#include <gtk/gtk.h>
#include<list>
#include<string>

// Types
#include "types/models.h"

// Services
#include "services/todo-service.h"

// Views
#include "views/dialogs.h"
#include "views/main.h"


int main(int argc, char *argv[]) 
{
    gtk_init(&argc, &argv);

    // Show all widgets
    MainWindow::openMainWindow();

    gtk_main();

    return 0;
}

Before the application window is created, the GTK API requires an initialization call passing the arguments from the function call. The gtk_main method starts the graphical interface's event loop.

The MainWindow module is defined in views/main.h:

#define APP_MAIN_WINDOW_WIDTH 400
#define APP_MAIN_WINDOW_HEIGHT 800
#define SUCCESS_COLOR "#99DD99"

namespace MainWindow
{
    // Main widget pointers
    GtkWidget *mainWindow = nullptr;
    GtkWidget *mainWindowContainer = nullptr;
    GtkWidget *(*mainWindowRefresh)();
    GtkWidget *todoInputText;
    int inEdition = 0;

    // Button events
    void mainWindowViewTodoListSaveClicked(GtkWidget *widget, gpointer data)
    {
        GtkEntry *entry = GTK_ENTRY(data);
        const gchar *text = gtk_entry_get_text(entry);
        Todo todoDto;
        todoDto.description = (char *)text;
        if (inEdition)
        {
            todoDto.id = inEdition;
            TodoService::todolistUpdate(&todoDto);
        }
        else
        {
            TodoService::todolistSave(&todoDto);
        }
        inEdition = 0;
        mainWindowRefresh();
        gtk_widget_show_all(mainWindowContainer);
    }

    void mainWindowViewTodoListEditClicked(GtkWidget *widget, int id)
    {
        Todo *todo = TodoService::todolistLoad(id);
        inEdition = id;
        g_print("Editing %i %s\n", todo->id, todo->description);
        gtk_entry_set_text(GTK_ENTRY(todoInputText), todo->description);
    }

    void mainWindowViewTodoListDeleteClicked(GtkWidget *widget, int id)
    {
        TodoService::todolistDelete(id);
        mainWindowRefresh();
        gtk_widget_show_all(mainWindowContainer);
    }

    // Render function
    GtkWidget *createMainWindowView()
    {
        GtkWidget *list_box;
        GtkWidget *row;
        GtkWidget *hbox;
        GtkWidget *label;

        mainWindowRefresh = createMainWindowView;

        // Creates a new window
        if (mainWindow == nullptr)
        {
            mainWindow = gtk_window_new(GTK_WINDOW_TOPLEVEL);
            gtk_window_set_title(GTK_WINDOW(mainWindow), "Todo List");
            gtk_window_set_default_size(GTK_WINDOW(mainWindow), APP_MAIN_WINDOW_WIDTH, APP_MAIN_WINDOW_HEIGHT);
            g_signal_connect(mainWindow, "destroy", G_CALLBACK(gtk_main_quit), NULL);
        }
        else
        {
            gtk_widget_destroy(mainWindowContainer);
        }

        GtkWidget *windowContainer;
        windowContainer = gtk_box_new(GTK_ORIENTATION_VERTICAL, 5);
        mainWindowContainer = windowContainer;
        gtk_container_add(GTK_CONTAINER(mainWindow), windowContainer);

        GtkWidget *todoFormContainer;
        todoFormContainer = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 0);
        gtk_container_add(GTK_CONTAINER(windowContainer), todoFormContainer);

        GtkWidget *inputVbox;
        inputVbox = gtk_box_new(GTK_ORIENTATION_VERTICAL, 5);
        gtk_widget_set_size_request(inputVbox, 250, -1);
        gtk_container_add(GTK_CONTAINER(todoFormContainer), inputVbox);
        todoInputText = gtk_entry_new();
        gtk_box_pack_start(GTK_BOX(inputVbox), todoInputText, TRUE, TRUE, 0);

        GtkWidget *saveBtn;
        saveBtn = gtk_button_new_with_label("Save");
        gtk_widget_set_size_request(saveBtn, 80, -1);
        gtk_container_add(GTK_CONTAINER(todoFormContainer), saveBtn);
        g_signal_connect(saveBtn, "clicked", G_CALLBACK(mainWindowViewTodoListSaveClicked), todoInputText);

        GtkWidget *cancelBtn;
        cancelBtn = gtk_button_new_with_label("Cancel");
        gtk_widget_set_size_request(cancelBtn, 80, -1);
        gtk_container_add(GTK_CONTAINER(todoFormContainer), cancelBtn);

        // // Creates a new GtkListBox
        list_box = gtk_list_box_new();
        gtk_container_add(GTK_CONTAINER(windowContainer), list_box);

        // // Creates and add rows to the GtkListBox
        int i = 0;
        for (std::list<Todo>::iterator it = todoListRepository.begin(); it != todoListRepository.end(); ++it)
        {
            row = gtk_list_box_row_new();
            hbox = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 5);

            // Column 1
            gchar *label_text1 = g_strdup_printf(it->description, i);
            label = gtk_label_new(label_text1);
            gtk_widget_set_size_request(label, 250, -1);
            gtk_box_pack_start(GTK_BOX(hbox), label, TRUE, TRUE, 0);
            g_free(label_text1);

            // Column 2
            GtkWidget *editBtn = gtk_button_new_with_label("Edit");
            gtk_widget_set_size_request(saveBtn, 80, -1);
            gtk_box_pack_start(GTK_BOX(hbox), editBtn, TRUE, TRUE, 0);
            g_signal_connect(editBtn, "clicked", G_CALLBACK(mainWindowViewTodoListEditClicked), it->id);

            // Column 3
            GtkWidget *removeBtn = gtk_button_new_with_label("Remove");
            gtk_widget_set_size_request(removeBtn, 80, -1);
            gtk_box_pack_start(GTK_BOX(hbox), removeBtn, TRUE, TRUE, 0);
            int index = i;
            g_signal_connect(removeBtn, "clicked", G_CALLBACK(mainWindowViewTodoListDeleteClicked), it->id);

            gtk_container_add(GTK_CONTAINER(row), hbox);
            gtk_container_add(GTK_CONTAINER(list_box), row);
            i++;
        }

        return mainWindow;
    }

    // Open function
    void openMainWindow()
    {
        gtk_widget_show_all(createMainWindowView());
    }
}

Similar to the approach used in web technologies and Android development, in GTK we have an interface to create a window with gtk_window_new, and inside it, we add various elements that can contain many other elements, forming a tree structure. The elements here are GtkWidget. In the documentation of the library, we can find the various types of widgets we can use.

In my experiment, I did not use any tool for screen design. Everything was done through the programming interface. However, GTK allows the creation of XML files that represent the screen. Glade is a graphical interface that allows the creation of these XMLs.

How to Expand Arduino Ports with Shift Registers

Misael Braga de Bitencourt — Mon, 01 Apr 2024 01:10:05 +0000

A few days ago, I was searching for tutorials and documentation on how to expand Arduino ports using Shift Register ICs. While there are many available, I found that none of them were direct and straight to the point. That's precisely what this text aims to provide.

If you have an Arduino project which have to control a lot of components or ports, the dozens of your arduino ports may not be enough even if you have a board like Arduino Mega or Giga. Some ICs have the capability to receive serial data and transfer it through multiple of their pins. In this demostration, 74HC165 was used for input pins and 74HC595 was used for output pins.

The following example comes with a SimulIDE schematics and Arduino C++ source code. This simulator is free and it is available for Linux 64, Windows (32 and 64) and MacOS. Besides being free, it have a feature to simulate Arduino boards with your compiled source code.

Please note that the simulator has omitted the VCC and Ground pins for the 74HC165 and 74HC595 ICs in order to simplify the simulation environment.

The firmware source code would be:



// 74HC165 Connections
// PL pin 1
int load = 7;
// CE pin 15
int clockEnablePin = 5;
// Q7 pin 7
int dataIn = 4;
// CP pin 2
int clockIn = 6;


// 74HC595 Connections
// ST_CP pin 12
const int latchPin = 10;
// SH_CP pin 11
const int clockPin = 11;
// DS pin 14
const int dataPin = 12;


// Local vars
int outputState = 0;


void setup()
{

  // 74HC165 connections
  pinMode(load, OUTPUT);
  pinMode(clockEnablePin, OUTPUT);
  pinMode(clockIn, OUTPUT);
  pinMode(dataIn, INPUT);

  // 74HC595 connections
  pinMode(latchPin, OUTPUT);
  pinMode(dataPin, OUTPUT);
  pinMode(clockPin, OUTPUT);

  // Setup Serial Monitor
  Serial.begin(9600);
  Serial.println("started!");
}


void loop()
{

  // Input Shift registers here:
  // Write pulse to load pin
  digitalWrite(load, LOW);
  delayMicroseconds(5);
  digitalWrite(load, HIGH);
  delayMicroseconds(5);
  // Get data from 74HC165
  digitalWrite(clockIn, HIGH);
  digitalWrite(clockEnablePin, LOW);
  byte incoming = shiftIn(dataIn, clockIn, LSBFIRST);
  digitalWrite(clockEnablePin, HIGH);
  // Print to serial monitor
  Serial.print("Pin States:\r\n");
  Serial.println(incoming, BIN);



  // Output Shift registers here:
  outputState += 1;
  outputState = outputState == 256 ? 0 : outputState;
  digitalWrite(latchPin, LOW);  
  shiftOut(dataPin,clockPin,MSBFIRST, outputState);  
  digitalWrite(latchPin, HIGH);


  // Watchable delay
  delay(1000);
}

The code above can be compiled in the Arduino IDE. Once compiled, the resulting hex file can be loaded into the simulator. Simply right-click on the Arduino component in SimulIDE, and select 'Load firmware', then choose your .hex file.

This project was published in this github repository where you can find both the simulator file and the source code.

Javascript Made Simple!

Misael Braga de Bitencourt — Mon, 27 Nov 2023 21:25:54 +0000

Not every frontend projects needs to use a set of complex tools to build or run. Almost all of the new Javascript projects contains a Framework with this tools, transpilers, transformers, minifiers, css libs and dependencies for every feature. But you dont necessarily need to follow this way to build your application, specially if your project is a small one.

This further article shows some approaches to create a application without that bunch of complex tools. A P.O.C. was created in order to demostrate it. It is about one simple crud created with modern Javascript with no dependencies.

It was written using the functional paradigm because Javascript is more Haskell than Java!

About the css, no one lib or framework was used, just a css reset followed by the app style.

Creating a simple CRUD

In order to sample how to use the language in a simple way, using the "Vanilla Javascript", a Create Retrieve Update Delete user interface have been created and the following text explains a several ways to realise it.

An exemple of a simple CRUD APP in raw Javascript could be found in this repository:

https://github.com/misabitencourt/javascript-made-simple

Importing the main.js script

Using a HTML5 document, it is possible to add a "script" tag with "module" as "type" property. This tag will import a ES Module on your web application that could also import another modules.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript made simple!</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/todolist.css">
</head>
<body>

    <div class="app"></div>

    <script type="module" src="js/main.js"></script>

</body>
</html>

js/main.js

import actions from './actions/index.js';
import todoAppComponent from './components/app.js';


window.todoApp = function(renderInEl) {
/// ... more code

Note: The div with the app class is out target element to render the entire application.

The View - Manipulation Elements with just Javascript

The Javascript runtime available on the current major browsers is powerful. One of its power is the DOM element manipulation. Despite that, the "raw javascript" element API could be simplifyed by our home made functions. For example, if you must create a title for one application section using the built in api, it would be like:

const title = document.createElement('h1'); // Creates element
title.textContent = 'User list'; // Sets the text content of it
parentElement.appendChild(title); // Appends the title element as a parentElement child (it must be another element, like document.body or another)

At the first look, it sounds nice and easy, but if you would have a little bit more complex element tree, it would be a pain:

// Creates the four elements
const title = document.createElement('h1');
const titleIcon = document.createElement('img');
const titlePrimaryText = document.createElement('span');
const titleSecondaryText = document.createElement('small');

// Adds CSS classes to them
title.classList.add('app-main-title');
titleIcon.classList.add('app-main-title-icon');
titlePrimaryText.classList.add('app-main-title-primary-text');
titleSecondaryText.classList.add('app-main-title-secondary-text');

// Adds text Content and src to them
titlePrimaryText.textContent = 'User list';
titleSecondaryText.textContent = 'Listing X users from Y';
titleIcon.src = 'assets/img/users-icon.svg';

// Appends the title children
title.appendChild(titleIcon);
title.appendChild(titlePrimaryText);
title.appendChild(titleSecondaryText);

// Appends the title with children to one parent element
parentElement.appendChild(title);

In order to create a DOM tree in a most efficient way, i reccommend the approach used by some microframeworks like: Mithril, Hyperapp or React without JSX.

It could solved by create a function with receives, at least, these parameters:

String: the tag name
String: css class list
Element[]: the list of children elements or the text content

The implementation of that is like that:

export default function el({
    tag,
    textContent,
    classList,
    children,
    events,
    attributes
}) {

    const element = document.createElement(tag || 'div');

    if (textContent) {
        element.textContent = textContent;
    }

    if (classList) {
        (classList+'').split(' ').filter(clazz => clazz.trim()).forEach(clazz => element.classList.add(clazz));
    }

    if (children) {
        children.forEach(child => element.appendChild(child));
    }

    if (events) {
        events.forEach(event => {
            element.addEventListener(event.event, event.listener);
        });
    }

    if (attributes) {
        attributes.forEach(attribute => {
            element.setAttribute(attribute.name, attribute.value);
        });
    }

    return element;
}

This function is used in this way:


// Creates the element tree mentioned above using our helper
const title = el({
    tag: 'h1',
    classList: 'app-main-title',
    children: [
        el({ 
            tag: 'img',
            classList: 'app-main-title-icon',
            attributes: {src: 'assets/img/users-icon.svg'}
        }),
        el({
            tag: 'span',
            classList: 'app-main-title-primary-text', // OR a string constant from another module
            textContent: 'User list' // or getTranslatedText() from another module
        }),
        el({
            tag: 'span',
            classList: 'app-main-title-secondary-text', // OR a string constant from another module
            textContent: 'Listing X users from Y' // or getListCount() from another module
        })
    ]
});

// Appending the created element tree to another element
parentElement.appendChild(title);

We could got a lot of advantages using this kind of functional module to create views. Imagine if you must code a user list of that screeen, you would have got a shortcut in your hands. Take a look:


// Supposing it is in an async function
const users = await userService.list();

const userList = el({
    tag: 'ul',
    classList: 'app-user-list',

    children: users.map(user => ( // Transforms user json to user list item element
        el({
            tag: 'li',
            classList: 'app-user-list-item',
            children: [
                // User name on list
                el({ tag: 'span', textContent: user.name }),

                // ... icons and stuff
            ]
        })
    ))
});

If you choose to use it, you would probably have to create a application state manager. It doesnt needs to be something complicated like Redux.

I suggest to use an object json witch represents the application state and can't be changed by component functions, just read by them. Once the component needs to trigger some event, it could do it using some callback function in order to sepparate the render function and the state change logic. That state change functions could be tested on unity.

The code above is about the root render of a component tree:

let state = {};
let renderedElement;

/**
 * App state changed! action trigger!
 * @param {*} actionName Id of the action triggered
 * @param {*} params action parameters
 */
function actionTrigger(actionName, params) {
    const action = actions.find(action => action.name === actionName);
    if (!action) {
        console.warn(`Action ${actionName} not found`);
        return state;
    }
    state = action.exec(state, params);
}

/**
 * Single app render, on action trigger or app start
 */
function render() {
    console.log('render called', state);
    const currentRender = todoAppComponent(state, (action, params) => {
        actionTrigger(action, params);
        render();
    });
    if (renderedElement) {
        renderedElement.parentElement.removeChild(renderedElement);
    }
    renderedElement = currentRender;
    renderInEl.appendChild(renderedElement);
}

// First render
render();

A simple component would be like:

export default (state, action) => el({
    classList: 'todo-list-app-todo-list-crud-list',
    children: (() => {
        if (!(state.todolist && state.todolist.length)) {
            return [
                el({
                    tag: 'p',
                    classList: 'alert-default',
                    textContent: 'No items have been created yet.'
                }),
                button({
                    text: 'Reload',
                    onClick: () => action(TODO_LIST_RELOAD_ACTION, null)
                })
            ];
        }

        return state.todolist.map(todo => 
            el('div', 'todo-list-app-todo-list-crud-list-item', { textContent: todo.text }));
    })()
});

This suggestion is a reactive functional approach. Some procedural or object oriented one also could be done with raw javascript if you are not confortable with functional programming.

Using modules - decoupling code with javascript modules

ES2016 Javascript modules naturally acts like a Singleton object. The script inside a module have it own scope. Unlike the classic javascript code imported with "script src=", when you declare a variable in some module, that variable does not populate the global scope. The programmer can control what variables can be accessible from other modules using the "export" sintax. For example:

some-module.js


// This variable is only accessible from THIS module
const petSizes = {
    small: 1,
    medium: 2,
    large: 3
};

function checkPetSize(size) {
    switch (size) {
        case (petSizes.small):
            return 'small';
        case (petSizes.medium):
            return 'medium';
        case (petSizes.large):
            return 'LARGE';
        default:
            return 'unknown';
    }
}

// This function is available for another modules
export checkPetSize;

By using javascript modules to your advantage, you can naturally create singleton services or some object factories. Using the javascript "ducktype" to your advantage, the dependency injection also could be done easily.

Fetch HTTP Client

The majority of modern apps must send and retrieve data from backend webservices. It is usually being done with HTTP protocol. Nowadays, there is no need of any lib like JQuery.ajax or axios to perform that kind of request.

The modern browsers supports Fetch API by default. This api uses javascript Promises and it is easy to use. See the following sample:


async function getConfigJson() {
    const response = await fetch(`https://my-api.com/v1/config/`);
    if (response.code !== 200) {
        throw new Error(`Error no fetch config`);
    }
    const configJson = await response.json();

    return configJson;
}

I recommend the wrapping of the fetch api in specific module to perform a http fetch. By this way, some request configurations like the API path and the authorization request headers would be easily managed.

Native Local Databases

The HTML, CSS and JS trio is used not only to create web apps but mobile and desktop too (see Electron and Tauri). All of the software on this platforms needs a local database in a higher or lower level. All online websites sometimes needs to store some cache and configuration in a local machine.

In all of this platforms, the JS code could be exactly the same on doing database operations. We have two secure ways to do it: Localstorage and IndexedDb. This first option is the faster way to save and retrieve data. Check this out:

localStorage.setItem('data-key', 'data-value');

This API have been available in all major browsers for years but Localstorage have some issues. It is not available in all javascript backend runtimes and it stores only strings. Thease strings are normally one stringified JSON stored like:

// save
localStorage.setItem('app-config', JSON.stringify(config));

// load
const config = JSON.parse(localStorage.getItem('app-config'));

The LocalStorage also have data size limitations and it is different between browsers and runtimes. More than 1 Megabyte datastorage is dangerous to using. For large amount of data, is recommended IndexedDb instead.

Code checking and tests

With all of that APIs you have seen before, you are able to create and entire application with Javascript without no extra transformer, library or framework. You may consider it optional for smaller projects but some code audition tools are recommended. The standart tools for syntax and style checking are: Prettier and ESLint.

End to end tests (also known as e2e or integration test) are almost essential for frontend apps. To perform it, Playwright is a good fit for. The original raw javascript code whould not changed or transformed to create it. This lib works just as a bot navigatinig, clicking, typing and checking the app in a browser of your preference.

A good option

As you have seen, it is absolutely possible to create a Javascript application without a bunch of complex polyfills, JSX, transpilers, libs and etc. The first detail you plan about you project do not needs to be a framework choose, why not give a change to the language default resources?

If it is about a huge and complex project with dozens of coders from different ecosystems working on it, the avoiding dependencies could be on your way. But if you have some mid-sized project or an ordinary one, you may claim yourself for simplicity.

NodeJS: Blurring Human Faces in Photos

Misael Braga de Bitencourt — Thu, 26 Oct 2023 21:26:08 +0000

**This article was automatically translated from Portuguese by ChatGPT, the original article could be found here.

In 2017, I created a small utility in NodeJS to blur faces of people in photos. When this program was executed, it searched for all image files in a specified directory and then blurred (or removed) all the faces from the photos. The integrity of the photos was preserved, with only the facial expressions being removed.

This became a useful utility for not recording sensitive user data, which is their own face. It can be helpful for use on websites where the identity of children or individuals who do not wish to be exposed needs to be preserved.

In recent weeks, I have been refactoring this project, which was previously written in JavaScript and has now been refactored into TypeScript. I took the time to write this article to demonstrate how simple it is to implement this solution using a few libraries.

Gloob + OpenCV4NodeJs + JIMP

These three libraries can be combined to generate the proposed solution.

Gloob

Gloob is the most well-known and widely used among the three. It is used to search for files using shell-like commands, and the same implementation works on all platforms. For example:



const filesStream = await glob('**/*.dat')

The code above will search for .dat files in all directories from the context and return a list of them.

OpenCV4NodeJs

The OpenCV4NodeJs A.I. library provides an interface for calling OpenCV routines in NodeJS.

JIMP

The last library is used for image manipulation in JavaScript in NodeJS. JIMP is used to apply the blur effect to the region where faces exist.

Although in this example, we only use it for this purpose, JIMP is a powerful tool in the style of ImageMagick that allows us to perform various types of image manipulation. Below is an example of how to resize a photo, change its quality, and its color palette in just a few lines:



Jimp.read("lenna.png", (err, lenna) => {
  if (err) throw err;
  lenna
    .resize(256, 256) // resize
    .quality(60) // set JPEG quality
    .greyscale() // set greyscale
    .write("lena-small-bw.jpg"); // save
});

Putting the Pieces Together

The most challenging parts of solving the problem have been handled by the previously mentioned libraries. Now, all that's left is to put them together to create the solution.

Gloob will scan the directory containing the images.
OpenCV will identify where faces exist in each image.
JIMP will apply blur to the regions where faces are found.

index.ts



(async () => {

    await argParser.parseArgs(process.argv);
    const rootDir = argParser.getArgument('dir');
    const files = await getImageFiles(rootDir || '');
    console.log(rootDir, files);
    await imageService.detectFaceInFiles(files);
    console.log('Done!');

})().catch(err => {
    console.error(err);
})

image-service.ts



import * as cv from "opencv4nodejs";
import * as jimp from "jimp";

export type Rect = {
    x: number;
    y: number;
    width: number;
    height: number;
};

export default {

    readImage(path: string) {
        return cv.imreadAsync(path).then((img: any) => img.bgrToGrayAsync());
    },

    async hideFromImage(file: string, regions: Rect[]) {
        regions = regions.slice();
        let image = await jimp.read(file);

        for (let region of regions) {
            image = await image.pixelate(21, region.x, region.y, region.width, region.height);
        }

        return image;
    },

    async detectFaceInFiles(files: string[]) {
        const classifier = new cv.CascadeClassifier(cv.HAAR_FRONTALFACE_ALT2);
        const result = [];

        for (let file of files) {
            try {
                const grayImg = await this.readImage(file);
                const res = await classifier.detectMultiScaleAsync(grayImg);                
                result.push(res);
                console.log(res);
                const img = await this.hideFromImage(file, res.objects);
                await img.write(file);
            } catch (e) {
                console.error(e);
            }
        }

        return result;
    }

}

**Note: The code above can be refactored to perform tasks in parallel, but this may require more computational resources.

The complete code can be accessed at: https://github.com/misabitencourt/face-blur.

NodeJS - Ofuscando rostos humanos em fotos

Misael Braga de Bitencourt — Thu, 26 Oct 2023 21:20:51 +0000

Em 2017, eu criei um pequeno utilitário em NodeJS para ofuscar rostos de pessoas em fotos. Esse programa, quando executado, buscava todos os arquivos de imagens em um diretório informado e, depois disso, ofuscava (ou removia) todos os rostos de fotos. A integridade das fotos era preservada, apenas onde haviam as expressões faciais que eram removidas.

Esse se tornou um bom utilitário para não gravar um dado sensível do usuário que é o seu próprio rosto. Isso pode ser útil para ser utilizado em websites onde deve-se preservar a identidade de crianças ou pessoas que não queriam ser expostas.

Nas últimas semanas, eu estive refatorando esse projeto que antes estava escrito em javascript e agora foi refatorado para Typescript. Aproveitei o tempo para escrever esse texto demonstrando como é simples de se implementar essa solução utilizando algumas bibliotecas.

Gloob + OpenCV4NodeJs + JIMP

Essas três libs podem ser combinadas para gerar a solução proposta.

Gloob

O Gloob é a mais conhecida e utilizada das três. Ela é utilizada para procurar arquivos utilizando comandos semelhantes aos de um shell, sendo que a mesma implementação funciona em todas as plataformas. Exemplo:

const filesStream = await glob('**/*.dat')

O código acima pesquisará em todos os diretórios, a partir do contexto, os arquivos ".dat" e retornará uma lista com eles.

OpenCV4NodeJs

A biblioteca de I.A. OpenCV4NodeJs oferece uma interface para chamar as rotinas do OpenCV no NodeJS.

JIMP

Esta última é uma utilizada para a manipulação de imagens em Javascript no NodeJS. O JIMP é utilizado para aplicar o efeito de blur na região onde existem os rostos.

Apesar de, nesse exemplo, a utilizarmos apenas para esse fim, o JIMP é uma poderosa ferramenta no estilo image magick nos permite realizar vários tipos de manipulação de imagem. Segue abaixo um exemplo de como redimensionar uma foto, alterar sua qualidade e sua paleta de cores em algumas linhas:

Jimp.read("lenna.png", (err, lenna) => {
  if (err) throw err;
  lenna
    .resize(256, 256) // resize
    .quality(60) // set JPEG quality
    .greyscale() // set greyscale
    .write("lena-small-bw.jpg"); // save
});

Juntando as peças

As partes mais dificultosas da resolução do problema foram feitas pelas bibliotecas anteriormente citadas. Agora, só nos resta juntá-las para criarmos a solução.

O Gloob vai varrer o diretório contendo as imagens;
O OpenCV vai verificar onde exitem rostos em cada uma;
O JIMP vai aplicar o blur na região onde existem rostos;

index.ts

(async () => {

    await argParser.parseArgs(process.argv);
    const rootDir = argParser.getArgument('dir');
    const files = await getImageFiles(rootDir || '');
    console.log(rootDir, files);
    await imageService.detectFaceInFiles(files);
    console.log('Done!');

})().catch(err => {
    console.error(err);
})

image-service.ts

import * as cv from "opencv4nodejs";
import * as jimp from "jimp";

export type Rect = {
    x: number;
    y: number;
    width: number;
    height: number;
};

export default {

    readImage(path: string) {
        return cv.imreadAsync(path).then((img: any) => img.bgrToGrayAsync());
    },

    async hideFromImage(file: string, regions: Rect[]) {
        regions = regions.slice();
        let image = await jimp.read(file);

        for (let region of regions) {
            image = await image.pixelate(21, region.x, region.y, region.width, region.height);
        }

        return image;
    },

    async detectFaceInFiles(files: string[]) {
        const classifier = new cv.CascadeClassifier(cv.HAAR_FRONTALFACE_ALT2);
        const result = [];

        for (let file of files) {
            try {
                const grayImg = await this.readImage(file);
                const res = await classifier.detectMultiScaleAsync(grayImg);                
                result.push(res);
                console.log(res);
                const img = await this.hideFromImage(file, res.objects);
                await img.write(file);
            } catch (e) {
                console.error(e);
            }
        }

        return result;
    }

}

**obs: o código acima pode ser refatorado para executar as tarefas em paralelo mas isso pode demandar mais recursos computacionais.

O código completo pode ser acessado em: https://github.com/misabitencourt/face-blur.

Creating a 13kb Game in JavaScript

Misael Braga de Bitencourt — Sun, 15 Oct 2023 23:27:05 +0000

**This article was automatically translated from Portuguese by ChatGPT, the original article could be found here.

As a game enthusiast and programmer, from time to time, I seek to study game development. Some time ago, I was studying how to create a 2D game scene using only C and OpenGL, which resulted in an interesting proof of concept (POC) project.

This project sparked my interest in 2D image processing and a better understanding of how formats like PNG work. Some time later, I came across an announcement of a game development competition in JavaScript called js13kgames. In this competition, participants had to develop the best JavaScript game using only 13kb in their source code, including scripts, libraries, sounds, and images! All of this had to be packaged into just 13 kilobytes. The game had to be developed in one month. In August, the theme for the game would be revealed. Delivery was in September, and the results would be announced in October.

The game could be compressed with ZIP, and JavaScript could be minimized. Creating scripts within 13kb was not really a problem, as we have very efficient JavaScript minifiers at our disposal. MIDI format sounds are not very heavy, nor are texts. The real challenge lies in creating graphics.

Excited by the challenge, I decided to do something new and technically unusual. If I were to use a sprite in PNG format to keep it small, it would have to be of VERY low resolution (as many competitors did). Creating vector graphics like SVG is another obvious solution. However, the "flash game" aesthetic would be almost inevitable, and all the images would look like paper cutouts (surprisingly, the winner used this approach, despite its flaws).

Matrix Images in a Few Kilobytes

The approach I chose was to create graphics with animated matrix images. These would be inserted into a JavaScript array, not as binary assets. To draw the images, I used an open-source map creation tool called Tiled. This map could have only three variations: transparent, gray, and black, as exemplified in the image below:

The image above could be exported as JSON by Tiled. One of the properties of this JSON is the array containing the image, something like:

/* Anchor icon of the game title */
[1, 1, 1, 1, 1, 2, 3, 3, 3, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 3, 3, 3, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 3, 3, 1, 1, 1, 2, 1, 1, 1, 1, 1, 2, 3, 1, 1, 1, 3, 3, 1, 1, 3, 3, 1, 1, 1, 1, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, 3, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 1, 1, 1, 1, 3, 3, 1, 1, 1, 2, 3, 1, 1, 3, 3, 3, 3, 1, 1, 1, 3, 3, 1, 1, 3, 3, 3, 3, 2, 3, 3, 3, 3, 1, 1, 1, 3, 3, 1, 1, 3, 3, 3, 3, 2, 1, 2, 3, 1, 1, 1, 1, 3, 3, 1, 1, 1, 2, 3, 1, 1, 1, 2, 3, 1, 1, 1, 1, 3, 3, 1, 1, 1, 2, 3, 1, 1, 1, 2, 3, 3, 1, 1, 1, 3, 3, 1, 1, 1, 3, 3, 1, 1, 1, 1, 3, 3, 3, 2, 2, 3, 3, 2, 2, 3, 3, 1, 1, 1, 1, 1, 1, 3, 3, 3, 3, 3, 3, 3, 3, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 3, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1]

This array would represent an image. The number 1 would be the transparent pixel, the number 2 the gray pixel, and the number 3 the black pixel. The images, by default, would be in black and white. When rendering them, you can change the color palette, so an image can be "strong blue" and "light blue" instead of gray and black.

The image above is a 16x16 resolution image. In this case, every 16 pixels, the function that performs rendering must advance one row for every 16 positions in the array.

This alone helps a lot with gzip compression, but it can be made even smaller! So, for each of these images, I ran a script that reduced every number in the array by 1, using only 0, 1, and 2. After that, I used an 8-bit number to represent 4 positions of that array. For example:

To represent the array:

[2, 2, 1, 2]

You can simply use the number 116.

116 in binary = 10100110

10 = 2 in binary
10 = 2 in binary
01 = 1 in binary
10 = 2 in binary

If we were working with a low-level language, this wouldn't make sense. But since everything in a JavaScript file is a string, the text "116" takes up less disk space than the text "[2,2,1,2]".

Additionally, the script that performs this compression also handles sequences of zeros. As all the transparent parts of the image are "0", several sequences of zeros are added to an array. This can be replaced by just one negative number representing the number of consecutive zeros. For example:

[1,0,0,0,0,0,0,0,0,0,0,0,0,2]

Replaced by:

[1,-12,2]

This way, we have a much smaller string. When the "unpacking" function of the image encounters a negative number, it simply adds "x*-1" zeros to the array.

The script that performs this compression is as follows:

(It works both in the browser console and in a runtime environment like NodeJS or BUN)

const image = [1, 1, 3, ....];

const leftPad = (str, length) => {
    while (str.length < length) {
        str = '0' + str;
    }
    return str;
}

const IMAGE_ARRAY_NUMBER_LENGTH = 8;


function compressImage(image) {
    let byteBuffer = '';
    return image.reduce((acc, pixel) => {
        let pixelVal = pixel - 1;
        pixelVal = pixelVal > 2 ? 0 : pixelVal; /* Sometimes tiled exports wrong map tiles */
        pixelVal = pixelVal < 0 ? 1 : pixelVal; /* Sometimes tiled exports wrong map tiles */
        byteBuffer += leftPad(pixelVal.toString(2)+'', 2);
        if (byteBuffer.length === IMAGE_ARRAY_NUMBER_LENGTH) {
            const val = parseInt(byteBuffer, 2);
            acc.push(val);
            byteBuffer = '';
        }
        return acc;
    }, []);
}

function uncompressImage(compressed) {
    return compressed.reduce((acc, byte) => {
        let binaryNumber = leftPad((+byte).toString(2), IMAGE_ARRAY_NUMBER_LENGTH);
        while (binaryNumber.length) {
            const twoBits = binaryNumber.substring(0, 2);
            const twoBitsInInt = parseInt(twoBits, 2);
            acc.push(twoBitsInInt);
            binaryNumber = binaryNumber.substring(2, binaryNumber.length);
        }
        return acc;
    }, []);
}

function compressMore(compressed) {
    let buffer = 0;
    const compressedMore = compressed.reduce((acc, current) => {
        if (current === 0) {
            buffer += 1;
            return acc;
        }
        if (buffer) {
            acc.push(buffer * -1);
            buffer = 0;
        }
        acc.push(current);
        return acc;
    }, []);
    if (buffer) {
        compressedMore.push(buffer * -1);
    }
    return compressedMore;
}


const compressed = compressImage(image);
console.log(JSON.stringify(compressMore(compressed)));
const uncompressed = uncompressImage(compressed);

The Result

Death Sea XIII

The game "Death Sea XIII" was created using the approach mentioned above. To play it, simply access the link:

PLAY HERE!

I have chosed to create a 2D shooter game because it is quick to program, both in terms of mechanics and balancing difficulty and gameplay. The name "Death Sea" was chosen for obvious reasons, and the "13" (XIII in Roman numerals) refers to the century in which its story takes place and a reference to the competition.

The Competition
The js13kgames competition happens every year and is divided into categories. This project was entered in the desktop games category. During the development of Death Sea, I followed the projects being created on the competition's Slack channel. Many of them are truly impressive. I recommend that readers interested in the subject take a look at these projects:

I recommend checking out this list instead of just looking at the winners. Unfortunately, none of these made it to the top 10 in the desktop category. The winners were games with the best user interface. It's a bit disappointing that this is more of a web design competition than a game competition. By some miracle, my game made it among the top 100 (90th out of 146) because, among other flaws, its graphic interface was lacking.