DEV Community: Michał Kalbarczyk

How to cross compile linux kernel on MacOS

Michał Kalbarczyk — Thu, 15 Aug 2024 21:01:19 +0000

You have a mac? You need to compile linux kernel for your Raspberry PI?

Great. Follow me…

Part 1. Case sensitive file system

Note: This step is required if you want to have kernel files outside docker. There is a case sensitive fs inside docker container. You can just copy needed file at the end.

Bad news. MacOS uses case insensitive file system by default. What we can do about it?
No we will not make whole root partition case sensitive. We might have trouble.
We try USB drive or SD card, but I don't want to get up from a chair.

We need to create an image file with case sensitive file system first:

$ hdiutil create -size 5g -fs "Case-sensitive APFS" -volname LinuxBuilder LinuxBuilder.dmg

Then we need to mount it:

$ hdiutil attach LinuxBuilder.dmg -mountpoint linux_builder -nobrowse -readwrite

Enter the new file system

$ cd linux_builder

OK problem solved.

Part 2. Checkout kernel

Within aur new shiny file system checkout a kernel source:

$  git clone --depth 1 https://github.com/raspberrypi/linux

Part 3. Cross compilation tools

I bet there are, but don't want to think about this where they are, how to install them. We have docker. Right?
I have you can install it too. It's easy. Just do it.

Create a "Dockerfile" file:

FROM debian:buster

ENV DEBIAN_FRONTEND=noninteractive

RUN apt-get clean && apt-get update && \
    apt-get install -y \
    bc \
    bison \
    flex \
    libssl-dev \
    make \
    kmod \
    libc6-dev \
    libncurses5-dev \
    crossbuild-essential-armhf \
    crossbuild-essential-arm64

WORKDIR /linux
VOLUME ["/linux"]

Build an image:

$ docker build -t linux_builder .

Part 4. Make script

We will need one command: make. But let's create a simple wrapper that runs make in the container.
I am so creative, will call this file make.

# Run builder environment
docker run --rm \
    --device /dev/fuse \
    --cap-add SYS_ADMIN \
    --name linux_builder \
    -v "$(pwd)/linux":"/linux" \
    -e ARCH=arm \
    -e KERNEL=kernel7 \
    -e CROSS_COMPILE=arm-linux-gnueabihf- \
    -it linux_builder \
    make $@

This example is for RPI3. For other platdorm just adjust ARCH, KERNEL, and CROSS_COMPILE envs.

Make it executable:

$ chmod +x make

We're done.

Part 5. Build the kernel

Now instead use make menuconfig we will use ./make menuconfig.
You know what to do next. Right?

If not, here is a hint:

$ ./make bcm2709_defconfig
$ ./make -j12 zImage modules dtbs

Wait. And look what is there:

$ ls linux/arch/arm/boot/

This is all we want.
Cheers!

Zig! Can you C?

Michał Kalbarczyk — Thu, 04 Apr 2024 21:27:33 +0000

I just want to develop something different. But what? Game, graphics, sound processing?
Surely you'll say Rust! Yep done a lot of things in Rust. But maybe C?

Ohhh... Noooo...
Remember Segmentation Fault?
How are you going to manage depenencies?

OK, So try to use some C library in ZIG! How hard it will be? Let's see.

Try to write somple app using raylib.

$ mkdir ray_test_zig
$ cd ray_test_zig
$ zig init-exe

Got a project. Try to run?

$ zig build run

Yep it's working.
We need to fetch and include raylib somehow.

Zig uses zon to fetch dependencies. Does it work with C libraries? Find out!

We need to provide where the lib is! Here it is:

Create build.zig.zon file.

.{
    .name = "ray_test_zig",
    .version = "0.0.1",

    .dependencies = .{
        .raylib = .{
            .url = "https://github.com/raysan5/raylib/archive/refs/tags/5.0.tar.gz",
        },
    },
}

Try to build project?

$ zig build

What it is?

Fetch Packages... raylib... ./ray_test_zig/build.zig.zon:7:20: error: url field is missing corresponding hash field
.url = "https://github.com/raysan5/raylib/archive/refs/tags/5.0.tar.gz",
^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
note: expected .hash = "1220c28847ca8e8756734ae84355802b764c9d9cf4de057dbc6fc2b15c56e726f27b",

Ok, zon expects a hash, just in case someone will try to hack out computer. Once again:

.{
    .name = "ray_test_zig",
    .version = "0.0.1",

    .dependencies = .{
        .raylib = .{
            .url = "https://github.com/raysan5/raylib/archive/refs/tags/5.0.tar.gz",
            .hash = "1220c28847ca8e8756734ae84355802b764c9d9cf4de057dbc6fc2b15c56e726f27b",
        },
    },
}

Try once again:

$ zig build

It works! Woooow! That's it?

No! We need to tell zig to include raylib during build!

Now we will edit build.zig. Just above line ~30 we have b.installArtifact(exe);
Before that line we need to add:

const raylib = b.dependency("raylib", .{
    .target = target,
    .optimize = optimize,
});

exe.installLibraryHeaders(raylib.artifact("raylib"));
exe.linkLibrary(raylib.artifact("raylib"));

We're teling zig where header files are and to link out executable with raylib.
Does it works? Let's check!

$ zig build

OMG! Looks like somethings with raylib was happened. It's compiled?
Let's port an simple example from raylib to zig.

In the src/main.zig:

const std = @import("std");

const ray = @cImport({
    @cInclude("raylib.h");
});

pub fn main() !void {
    ray.InitWindow(800, 450, "Hey ZIG");
    defer ray.CloseWindow();

    while (!ray.WindowShouldClose()) {
        ray.BeginDrawing();
        ray.ClearBackground(ray.RAYWHITE);
        ray.DrawText("Congrats! You created your first window!", 190, 200, 20, ray.LIGHTGRAY);
        ray.EndDrawing();
    }
}

$ zig build

No errors? Great!

$ zig build run

We got the raylib window!
As you can see! Just one line of code and raylib working like native lib!

So yep! Zig can C!

How to generate git commit message using AI?

Michał Kalbarczyk — Sun, 27 Aug 2023 17:47:35 +0000

Why don't use available solution? All of them using ChatGPT. But I'm out of credits ;)
Of course I want to learn something!

How to generate git commit message?

Git allows you to create hooks. Let's use global one. Global hooks works without modifying every git repo.

Create a directory for hooks:

$ mkdir ~/.config/git/hooks/

Let git knows where hooks are:

$ git config core.hooksPath ~/.config/git/hooks/

Long story short the prepare-commit-msg is the one we need. The file we need to update is passed as first parameter.
Create a simple script:

#!/bin/sh

echo "Fancy commit message" > $1

Make it executable:

$ chmod +z ~/.confog/git/hooks/prepare-commit-msg

Is it works? Let's commit something ... Yep, we have a message at the end of the commit message.

Let's generate something:

Generating commit message

Let's build something that's works offline. AI? Yes, let's use AI!

We need model right?

Let's look at huggingface!

There it is: https://huggingface.co/mamiksik/T5-commit-message-generation but there is no docs :(
But if you'll look deeper you'll find https://huggingface.co/spaces/mamiksik/commit-message-generator

We can use this https://huggingface.co/spaces/mamiksik/commit-message-generator/blob/main/app.py with a little modifications.

As we can use any shell script in a hook, let's use python.

Let's take a look what's there:

import re

import gradio as gr
import torch
from transformers import T5ForConditionalGeneration, RobertaTokenizer


tokenizer = RobertaTokenizer.from_pretrained("mamiksik/CommitPredictorT5PL", revision="fb08d01")
model = T5ForConditionalGeneration.from_pretrained("mamiksik/CommitPredictorT5PL", revision="fb08d01")

def parse_files(patch):
    accumulator = []
    lines = patch.splitlines()

    filename_before = None
    for line in lines:
        if line.startswith("index") or line.startswith("diff"):
            continue
        if line.startswith("---"):
            filename_before = line.split(" ", 1)[1][1:]
            continue

        if line.startswith("+++"):
            filename_after = line.split(" ", 1)[1][1:]

            if filename_before == filename_after:
                accumulator.append(f"<ide><path>{filename_before}")
            else:
                accumulator.append(f"<add><path>{filename_after}")
                accumulator.append(f"<del><path>{filename_before}")
            continue

        line = re.sub("@@[^@@]*@@", "", line)
        if len(line) == 0:
            continue

        if line[0] == "+":
            line = line.replace("+", "<add>", 1)
        elif line[0] == "-":
            line = line.replace("-", "<del>", 1)
        else:
            line = f"<ide>{line}"

        accumulator.append(line)

    return '\n'.join(accumulator)


def predict(patch, max_length, min_length, num_beams, prediction_count):
    input_text = parse_files(patch)
    with torch.no_grad():
        token_count = tokenizer(input_text, return_tensors="pt").input_ids.shape[1]

        input_ids = tokenizer(
            input_text,
            truncation=True,
            padding=True,
            return_tensors="pt",
        ).input_ids

        outputs = model.generate(
            input_ids,
            max_length=max_length,
            min_length=min_length,
            num_beams=num_beams,
            num_return_sequences=prediction_count,
        )

    result = tokenizer.batch_decode(outputs, skip_special_tokens=True)
    return token_count, input_text, {k: 0 for k in result}


iface = gr.Interface(fn=predict, inputs=[
    gr.Textbox(label="Patch (as generated by git diff)"),
    gr.Slider(1, 128, value=40, label="Max message length"),
    gr.Slider(1, 128, value=5, label="Min message length"),
    gr.Slider(1, 10, value=7, label="Number of beams"),
    gr.Slider(1, 15, value=5, label="Number of predictions"),
], outputs=[
    gr.Textbox(label="Token count"),
    gr.Textbox(label="Parsed patch"),
    gr.Label(label="Predictions")
], examples=[
["""
diff --git a/.github/workflows/pylint.yml b/.github/workflows/codestyle_checks.yml
similarity index 86%
rename from .github/workflows/pylint.yml
rename to .github/workflows/codestyle_checks.yml
index a5d5c4d9..8cbf9713 100644
--- a/.github/workflows/pylint.yml
+++ b/.github/workflows/codestyle_checks.yml
@@ -20,3 +20,6 @@ jobs:
     - name: Analysing the code with pylint
       run: |
         pylint --rcfile=.pylintrc webapp core
+    - name: Analysing the code with flake8
+      run: |
+        flake8
""", 40, 5, 7, 5]
]
)

if __name__ == "__main__":
    iface.launch()

Everything we need is here! We need to:

fetch gitmessage file to update
fetch git diff
use current script make predictions
prepend commit message to gitmessage file

File that we need to update is passed as first parameter so

import sys

sys.argv[1]

Heh that was easy.

Fetch git diff

import subprocess

subprocess.run(['git', 'diff', '--cached'], capture_output=True).stdout.decode('utf-8')

Easy peasy!

Use current script to make predictions

max_message = 40
min_message = 5
num_beams = 10
num_predictions = 1

msg = predict(diff, max_message, min_message, num_beams, num_predictions)

Prepend our message to gitmessage file

with open(sys.argv[1], 'r+') as f:
    content = f.read()
    f.seek(0)
    f.write(msg + '\n' + content)
    f.close()

It's just like that. With little cleanups this is our final script.

#!/usr/bin/env python
print("Generating commit message", end="", flush=True)

import sys
import re
import subprocess
import torch
from transformers import T5ForConditionalGeneration, RobertaTokenizer

def parse_files(patch):
    accumulator = []
    lines = patch.splitlines()

    filename_before = None
    for line in lines:
        print(".", end="", flush=True)
        if line.startswith("index") or line.startswith("diff"):
            continue
        if line.startswith("---"):
            filename_before = line.split(" ", 1)[1][1:]
            continue

        if line.startswith("+++"):
            filename_after = line.split(" ", 1)[1][1:]

            if filename_before == filename_after:
                accumulator.append(f"<ide><path>{filename_before}")
            else:
                accumulator.append(f"<add><path>{filename_after}")
                accumulator.append(f"<del><path>{filename_before}")
            continue

        line = re.sub("@@[^@@]*@@", "", line)
        if len(line) == 0:
            continue

        if line[0] == "+":
            line = line.replace("+", "<add>", 1)
        elif line[0] == "-":
            line = line.replace("-", "<del>", 1)
        else:
            line = f"<ide>{line}"

        accumulator.append(line)

    return '\n'.join(accumulator)

def predict(patch, max_length, min_length, num_beams, prediction_count):
    print(".", end="", flush=True)
    input_text = parse_files(patch)

    tokenizer = RobertaTokenizer.from_pretrained("mamiksik/CommitPredictorT5PL", revision="fb08d01", low_cpu_mem_usage=True)
    print(".", end="", flush=True)
    model = T5ForConditionalGeneration.from_pretrained("mamiksik/CommitPredictorT5PL", revision="fb08d01", low_cpu_mem_usage=True)
    print(".", end="", flush=True)

    with torch.no_grad():
        input_ids = tokenizer(
            input_text,
            truncation=True,
            padding=True,
            return_tensors="pt",
        ).input_ids
        print(".", end="", flush=True)
        outputs = model.generate(
            input_ids,
            max_length=max_length,
            min_length=min_length,
            num_beams=num_beams,
            num_return_sequences=prediction_count,
        )
        print(".", end="", flush=True)

    result = tokenizer.batch_decode(outputs, skip_special_tokens=True)
    return result[0]

if __name__ == "__main__":
    diff = subprocess.run(['git', 'diff', '--cached'], capture_output=True).stdout.decode('utf-8')

    max_message = 40
    min_message = 5
    num_beams = 10
    num_predictions = 1

    msg = predict(diff, max_message, min_message, num_beams, num_predictions)

    with open(sys.argv[1], 'r+') as f:
        content = f.read()
        f.seek(0)
        f.write(msg + '\n' + content)
        f.close()

    print("Done!\n")

It's fast on cpu, but loading model take a lot of times. Anyway 3s is OK.
That's all. It works. At least for me.

Let's GO WASM

Michał Kalbarczyk — Thu, 13 Jul 2023 12:47:27 +0000

WASM? WebAssembly?

Lately I've started to ask myself: "Is WASM worth paying attention to?"

Let's find out. There are few languages that can be directly compiled into WASM. Anyway let's try GO.

We will make a simple web application that converts image from your webcam into ascii art.
The goal is to write as much code in Go as possible.

Let's go!

# go mod init asciifyme

And that's it, everything works!

Just kidding. It's not that simple.

We will need following pieces:

webcam - will initialize and fetch image from web cam
canvas - we need this to fetch pixel data from image
asciifyier - turn image data into string

The webcam:

This module will:

create a video element with document.createElement
initialize webcam with navigator.getUserMedia

We need to create a file webcam/webcam.go

First part looks like this:

package webcam

import (
    "fmt"
    "syscall/js"
)

var (
    navigator js.Value
    video     js.Value
)

func init() {
    navigator = js.Global().Get("navigator")
    video = js.Global().Get("document").Call("createElement", "video")
}

With this code we are creating video element, and fetching navigator for future use.

It's time to setup webcam:

func Setup() js.Value {
    user_media_params := map[string]interface{}{
        "video": true,
    }

    navigator.Call("getUserMedia", user_media_params, js.FuncOf(stream), js.FuncOf(err))

    return video
}

We will call this function from the main, it will setup webcam and return video object to fetch data from.
But wait! There are two callbacks stream and err we need to implement:

func err(this js.Value, args []js.Value) interface{} {
    fmt.Println("err")
    return nil
}

func stream(this js.Value, args []js.Value) interface{} {
    video.Set("srcObject", args[0])
    video.Call("addEventListener", "canplaythrough", js.FuncOf(canPlay))
    return nil
}

For now we will ignore errors and write error on console.
stream function adds a stream to the video element and listen to canplaythrough event.
Another callback? Yes! video will call canPlay callback when there will be enough data.

func canPlay(this js.Value, args []js.Value) interface{} {
    video.Call("play")
    return nil
}

When we have enough data press play!

We have a video, now we need a pixel data. Let's create canvas in canvas/canvas.go

package canvas

import (
    "syscall/js"
)

const (
    CanvasWidth  = 80
    CanvasHeight = 40
)

var (
    ctx js.Value
)

func init() {
    ctx = js.Global().Get("document").Call("createElement", "canvas").Call("getContext", "2d")
}

We're creating canvas element and fetching context. Will use it to draw and fetch pixel data.

func DrawImage(video js.Value) {
    ctx.Call("drawImage", video, 0, 0, CanvasWidth, CanvasHeight)
}

We can draw a frame from video by passing it into drawImage function.

func GetImageData() []uint8 {
    data := ctx.Call("getImageData", 0, 0, CanvasWidth, CanvasHeight).Get("data")

    lenght := data.Get("length").Int()

    goData := make([]uint8, lenght)

    js.CopyBytesToGo(goData, data)

    return goData
}

Fetching pixel data is more complicated. We have to fetch JS array of uint8 into GO.
This function takes the length of data from canvas, create GO array, and copy whole data into go array.
Voila! We have a pixel data.

What's left? Convert it to asciiart.

asciifyier/asciifyier.go is what we need!

package asciifyier

import (
    "asciifyme/canvas"
)

const (
    Chars       = "   .,:;i1tfLCG08@"
    CharsLength = 16
)

We don't need any JS stuff here. But need to import our canvas to fetch its size.

func Asciify(data []uint8) string {
    output := ""

    for y := 0; y < canvas.CanvasHeight; y++ {
        for x := 0; x < canvas.CanvasWidth; x++ {
            offset := (y*canvas.CanvasWidth + x) * 4

            red := data[offset]
            green := data[offset+1]
            blue := data[offset+2]
            //alpha := data[offset+3]

            brightness := (0.3*float64(red) + 0.59*float64(green) + 0.11*float64(blue)) / 255.0

            char_index := CharsLength - int(brightness*CharsLength)

            output += string(Chars[char_index])
        }
        output += "\n"
    }

    return output
}

What we're doing here? We're taking each pixel data from array of uint8 and creating a string. Our asciiart.

It's time for main.go ...

package main

import (
    "asciifyme/asciifyier"
    "asciifyme/canvas"
    "asciifyme/webcam"
    "syscall/js"
)

var (
    camera js.Value
    window js.Value
    pre    js.Value
)

func init() {
    camera = webcam.Setup()
    window = js.Global().Get("window")
    pre = js.Global().Get("document").Call("getElementById", "pre")
}

Taking all the pieces together. We will need a camera, window.requestAnimationFrame, and pre element to display our asciiart.

func loop(this js.Value, args []js.Value) interface{} {
    window.Call("requestAnimationFrame", js.FuncOf(loop))
    canvas.DrawImage(camera)
    imageData := canvas.GetImageData()
    output := asciifyier.Asciify(imageData)
    pre.Set("innerHTML", output)
    return nil
}

func main() {
    loop(js.ValueOf(nil), make([]js.Value, 0))

    select {}
}

In main loop we're:

fetching data from video
drawing it on canvas
fetch pixel data from canvas
create asciiart using asciifyier
draw asciify into pre

One more thing! select {} make the wasm program don't quit!

That's it. Compile time!

To run this in the browser we need:

index.html
wasm_exec.js
compiled app

Simple index.html file

<html>
  <head>
    <title>asscify-me</title>
    <style>
      body{background-color:#000}pre{text-align:center}header{color:#daa520;font-size:18px;font-weight:700;text-shadow:0 0 3px gold}section{margin-top:30px;color:#32cd32;text-shadow:0 0 15px #0f0;font-size:14px}footer,footer a{margin-top:30px;color:red;text-shadow:0 0 15px tomato;font-size:14px}
    </style>
    <script src="wasm_exec.js"></script>
    <script>
    const go = new Go();
    WebAssembly.instantiateStreaming(fetch("asciifyme.wasm"), go.importObject).then((result) => {
    go.run(result.instance);
    });
    </script>
  </head>
  <body>
    <pre id="pre"></pre>
  </body>
</html>

And the build script:

#/bin/bash

export GOOS=js
export GOARCH=wasm
mkdir -p build
cp index.html build/
cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" build/
go build -o build/asciifyme.wasm

Now we need to run:

# ./build.sh

Serve files from build folder, and use the browser.

Notice that the browser will give camera access when you're using https:// or localhost

P.S

But wait! The size! ~2MB is way to much! Yes!

Try thinygo compiler, ~200KB is much better!

# tinygo build -o build/asciifyme.wasm -target wasm

Don't need to write whole thing yourself if you don't want. Check out my github or working an app.

When WASM gets Rusty?

Michał Kalbarczyk — Thu, 13 Jul 2023 12:46:52 +0000

We will take a look at WASM again! But this time with Rust. Why Rust? Because I can compile Rust directly into WASM.

Our goal is the same app we've created in Go, but ... yes! with Rust!

What is the plan?

Let's try to create same app that we did last time in Go. The asciifyier. It ill convert data from video camera into asciiart.

# cargo new --lib asciifier

One more thing:

# rustup target install wasm32-unknown-unknown

Target is needed, so we can compile directly to WASM.

Before we go into the code we need to add dependencies into Cargo.toml file.

[dependencies]
wasm-bindgen = "0.2.63"
wasm-bindgen-futures = "0.4.15"
js-sys = "0.3.35"
console_error_panic_hook = "0.1.7"
log = "0.4"

console_log = { version = "1", features = [
  'color'
]}

web-sys = { version = "0.3.4", features = [
  'Document',
  'Element',
  'GetUserMediaRequest',
  'HtmlCanvasElement',
  'HtmlMediaElement',
  'HtmlVideoElement',
  'HtmlElement',
  'MediaStreamConstraints',
  'MediaDevices',
  'Navigator',
  'Node',
  'Window',
  'MediaStream',
  'CanvasRenderingContext2d',
  'ImageData',
  'console',
  'ContextAttributes2d',
]}

It's clear there are libs that our project will use but what about features? When we specify features, compiler will compile in these so we can use them.
Anyway our project uses only libs that allows us to use what browser offer.

Divide our project to 3 parts:

webcam - fetch image from web cam
canvas - fetch pixel data from image
asciifyier - turn image data into string

The canvas.rs:

We need:

create canvas element
get 2d context
function to draw video frame on canvas
function to fetch pixel data from canvas

use wasm_bindgen::{prelude::*, Clamped};
use web_sys::{window, CanvasRenderingContext2d, HtmlCanvasElement, HtmlVideoElement};

use crate::{CANVAS_HEIGHT, CANVAS_WIDTH};

#[derive(Debug)]
pub struct Canvas {
    pub context: CanvasRenderingContext2d,
}

impl Canvas {
    pub fn new() -> Self {
        let document = window().unwrap().document().unwrap();

        let mut context_attributes = web_sys::ContextAttributes2d::new();
        context_attributes.will_read_frequently(true);

        // create document element
        let canvas = document
            .create_element("canvas")
            .unwrap()
            .dyn_into::<HtmlCanvasElement>()
            .unwrap();

        // set dimensions
        canvas.set_width(CANVAS_WIDTH.into());
        canvas.set_height(CANVAS_HEIGHT.into());

        // get 2d context
        let context = canvas
            .get_context_with_context_options("2d", &context_attributes)
            .unwrap()
            .unwrap()
            .dyn_into::<CanvasRenderingContext2d>()
            .unwrap();

        // store the context
        Self { context }
    }

    // draw a video frame on canvas
    pub fn draw_image(self: &Self, video: &HtmlVideoElement) {
        self.context
            .draw_image_with_html_video_element_and_dw_and_dh(
                video,
                0.0,
                0.0,
                CANVAS_WIDTH as f64,
                CANVAS_HEIGHT as f64,
            )
            .unwrap();
    }

    // fetch pixel data
    pub fn get_image_data(self: &Self) -> Clamped<Vec<u8>> {
        self.context
            .get_image_data(0.0, 0.0, CANVAS_WIDTH as f64, CANVAS_HEIGHT as f64)
            .unwrap()
            .data()
    }
}

Important thing is that you need to use dyn_into to make created element have a specific type. Other than that whole implementation is easy to read.

The asciifier takes a pixel data and converts it into String.

use wasm_bindgen::Clamped;

const CHARS_LENGTH: usize = 16;
const fn get_char(index: usize) -> char {
    "   .,:;i1tfLCG08@".as_bytes()[index] as char
}

pub fn process(data: &Clamped<Vec<u8>>) -> String {
    let mut output = String::new();

    for y in 0..40 {
        for x in 0..80 {
            let offset = (y * 80 + x) * 4;

            let red = data[offset];
            let green = data[offset + 1];
            let blue = data[offset + 2];
            //let alpha = data[offset+3]

            let brightness = (0.3 * red as f32 + 0.59 * green as f32 + 0.11 * blue as f32) / 255.0;

            let char_index = CHARS_LENGTH - (brightness * CHARS_LENGTH as f32) as usize;

            output.push(get_char(char_index));
        }
        output.push('\n');
    }
    output
}

Last thing? The webcam:

This module will create video element and set it up. Get the video stream from getUserMedia and pass it back into video.

use wasm_bindgen::prelude::*;
use web_sys::{window, HtmlVideoElement, MediaStreamConstraints};

#[derive(Debug)]
pub struct WebCam {
    pub video: HtmlVideoElement,
}

impl WebCam {
    pub fn new() -> Self {
        let document = window().unwrap().document().unwrap();

        let video = document
            .create_element("video")
            .unwrap()
            .dyn_into::<HtmlVideoElement>()
            .unwrap();

        video.set_autoplay(true);

        Self { video }
    }

    pub async fn setup(&self) -> Result<(), JsValue> {
        let mut constraints = MediaStreamConstraints::new();
        constraints.video(&JsValue::from(true));

        let promise = window()
            .unwrap()
            .navigator()
            .media_devices()
            .unwrap()
            .get_user_media_with_constraints(&constraints)
            .unwrap();

        let stream = wasm_bindgen_futures::JsFuture::from(promise).await?;

        self.video.set_src_object(Some(&stream.into()));

        Ok(())
    }
}

And this is where things get complicated. getUserMedia returns a promise. We need to wait for it! But await works only within async functions. Let's mars setup function as async then.

Making it work together.

We need to create a loop using request_animation_frame that:

draw video frame on canvas
takes pixel data from canvas
pass it thru asciifier
print string within pre element

Here what it's looks like:

extern crate console_error_panic_hook;

mod asciifyier;
mod canvas;
mod utils;
mod web_cam;

use std::cell::RefCell;
use std::rc::Rc;
use wasm_bindgen::prelude::*;
use web_sys::{window, HtmlElement};

const CANVAS_WIDTH: u16 = 80;
const CANVAS_HEIGHT: u16 = 40;

fn request_animation_frame(f: &Closure<dyn FnMut()>) {
    window()
        .unwrap()
        .request_animation_frame(f.as_ref().unchecked_ref())
        .expect("should register `requestAnimationFrame` OK");
}

#[wasm_bindgen(start)]
async fn run() -> Result<(), JsValue> {
    utils::set_panic_hook();
    console_log::init().expect("error initializing log");

    let context = canvas::Canvas::new();
    let web_cam = web_cam::WebCam::new();
    let pre = window()
        .unwrap()
        .document()
        .unwrap()
        .get_element_by_id("pre")
        .unwrap()
        .dyn_into::<HtmlElement>()
        .unwrap();

    if let Ok(()) = web_cam.setup().await {
        let f = Rc::new(RefCell::new(None));
        let g = f.clone();

        *g.borrow_mut() = Some(Closure::new(move || {
            request_animation_frame(f.borrow().as_ref().unwrap());

            context.draw_image(&web_cam.video);
            let data = context.get_image_data();
            let output = asciifyier::process(&data);

            pre.set_inner_text(&output);
        }));

        request_animation_frame(g.borrow().as_ref().unwrap());
    } else {
        pre.set_inner_text("Camera not found!");
    };

    Ok(())
}

We did it! But wait! async fn run()?. Yes! Because the target is WASM. We can have async main function. Browser will take care of it!

Compile time!

index.html of course...

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>asscify-me</title>
    <script src='asciifyme.js'></script>
    <script>
        wasm_bindgen('asciifyme_bg.wasm');
    </script>
  </head>
  <body>
    <pre id="pre"></pre>
  </body>
</html>

The build script:

build.sh:

#/bin/bash

mkdir -p build
cp index.html build/
wasm-pack build -t no-modules -d build/

And we're done. wasm-pack will do the dirty work for us!

$ ./build.sh

Serve files from build folder, and use the browser.

Notice that the browser will give camera access when you're using https:// or localhost!

What is better? Rust or GO?

Creating the same application with Rust was much harder, but there are some positives because of that!
You'll ask what? Harder is better? Yes! Rust compiler forced me to think deeper about what I am doing. Like a good, but strict friend ;)
Other than that the Rust runtime is a way faster.

For WASM I will choose Rust!

Don't need to write whole thing yourself if you don't want. Check out my github or working an app.

Best dotfiles manager is GIT

Michał Kalbarczyk — Wed, 12 Jul 2023 16:39:18 +0000

Long story short. Tried lot of dotfiles managers including custom solutions. All of them have a big disadvantage. You have a copy of a file or symlink.
What do we need? Just git. Let's start!

First of all we need a shell alias to manage our files.

I'm using fish so creating alias looks like this.

$ alias hi "echo hello"

But you can do same thing in bash as well:

$ alias hi="echo hello"

Let's name our alias dot.

Just add such a line in your shell config file.

Depending on our needs we can:

Allow to backup files on whole disk:

alias dot "git --git-dir=$HOME/.dotfiles --work-tree=/"

Or just in the home directory:

alias dot "git --git-dir=$HOME/.dotfiles --work-tree=$HOME"

Great. We're just made an dot manager!

Let's init out repo

$ dot init

One more thing! Need to set up one thing:

$ dot config --local status.showUntrackedFiles no

And we're done. All git files are in $HOME/.dotfiles directory.

To add a file or directory we can simply:

$ dot add ~/.config

and commit it with

$ dot commit

The backup is a git repository. We can push it to github for example. Just add remote like on every other git repository.

Just like you saw. There is no copying, linking, just adding a files when something changed.