Taking a screenshot in Windows with Go

I’ve tried to code a Windows screenshot utility before, following the example of the official Windows documentation I found it tricky though, so I just gave up at the time.

This Monday morning, after receiving a request to implement GetDIBits in WinSafe, I tried to implement it Windigo first. To my surprise, it went incredibly smooth. Go’s defer mechanism is much to praise.

Here’s the whole code

package main

import (
	"runtime"
	"unsafe"

	"github.com/rodrigocfd/windigo/win"
	"github.com/rodrigocfd/windigo/win/co"
)

func main() {
	runtime.LockOSThread()

	cxScreen := win.GetSystemMetrics(co.SM_CXSCREEN)
	cyScreen := win.GetSystemMetrics(co.SM_CYSCREEN)

	hdcScreen := win.HWND(0).GetDC()
	defer win.HWND(0).ReleaseDC(hdcScreen)

	hBmp := hdcScreen.CreateCompatibleBitmap(cxScreen, cyScreen)
	defer hBmp.DeleteObject()

	hdcMem := hdcScreen.CreateCompatibleDC()
	defer hdcMem.DeleteDC()

	hBmpOld := hdcMem.SelectObjectBitmap(hBmp)
	defer hdcMem.SelectObjectBitmap(hBmpOld)

	hdcMem.BitBlt(
		win.POINT{X: 0, Y: 0},
		win.SIZE{Cx: cxScreen, Cy: cyScreen},
		hdcScreen,
		win.POINT{X: 0, Y: 0},
		co.ROP_SRCCOPY,
	)

	bi := win.BITMAPINFO{
		BmiHeader: win.BITMAPINFOHEADER{
			BiWidth:       cxScreen,
			BiHeight:      cyScreen,
			BiPlanes:      1,
			BiBitCount:    32,
			BiCompression: co.BI_RGB,
		},
	}
	bi.BmiHeader.SetBiSize()

	bmpObj := win.BITMAP{}
	hBmp.GetObject(&bmpObj)
	bmpSize := bmpObj.CalcBitmapSize(bi.BmiHeader.BiBitCount)

	rawMem := win.GlobalAlloc(co.GMEM_FIXED|co.GMEM_ZEROINIT, bmpSize)
	defer rawMem.GlobalFree()

	bmpSlice := rawMem.GlobalLock(bmpSize)
	defer rawMem.GlobalUnlock()

	hdcScreen.GetDIBits(hBmp, 0, int(cyScreen), bmpSlice, &bi, co.DIB_RGB_COLORS)

	bfh := win.BITMAPFILEHEADER{}
	bfh.SetBfType()
	bfh.SetBfOffBits(uint32(unsafe.Sizeof(bfh) + unsafe.Sizeof(bi.BmiHeader)))
	bfh.SetBfSize(bfh.BfOffBits() + uint32(bmpSize))

	fo, _ := win.FileOpen("C:\\Temp\\foo.bmp", co.FILE_OPEN_RW_OPEN_OR_CREATE)
	defer fo.Close()

	fo.Write(bfh.Serialize())
	fo.Write(bi.BmiHeader.Serialize())
	fo.Write(bmpSlice)

	println("Done")
}

For reference, this example is now on GetDIBits documentation.

Generating React object keys with WeakMap

When iterating through an array in React, a key attribute is expected on the rendered elements, so a reordering is properly rendered. However, often the objects we’re rendering have no unique ID and using the plain index will give us a broken rendering when a reorder happens. So what should we use?

My first idea was to use the object itself as the key, but it must be a string or a number. Then, while researching the matter, I found a rather good solution: using a WeakMap object. I wasn’t even aware that such WeakMap existed, and turns out it’s perfect for the job.

A WeakMap is basically a Map which uses objects as keys. The difference from an ordinary Map is that the Map would retain the objects indefinitely – they would simply pile up, what can be seen as a memory leak –, while the WeakMap lets the objects being garbage collected when they are no longer referenced anywhere.

Given that concept imagine the following interface:

interface Person {
	name: string;
	age: number;
}

Now we have a React component which needs to render an array of Person. This is how we can write it:

interface Props {
	people: Person[];
}
	
function ThePeople(props: Props) {
	return <>
		{props.people.map(person =>
			<div key={getId(person)}>
				{person.name}, {person.age}
			</div>
		)}
	</>;
}

Note the getId function in the code above, which somewhat returns an unique ID for the object.

We’ll use a WeakMap to store the Person objects along with an auto-generated number, which will be its unique ID::

let currentId = 0;
let ids = new WeakMap<Object, number>();

export function getId(obj: Object): number {
	if (ids.has(obj)) {
		return ids.get(obj)!;
	} else {
		const newId = ++currentId;
		ids.set(obj, newId);
		return newId;
	}
}

For each object, the ID is set once, and it can be retrieved any number of times. This effectively eliminates the need of an alien _id field in our struct, and it also prevents the memory leaking of using an ordinary Map.

However, when using immutable state – which is basically the norm in React –, you’ll always have different objects, thus different IDs, and this will cause the loss of focus on elements. So, despite its ugliness, an _id attribute is still better. Or, if the list element won’t reorder, a simple index.

VSCode extension Personal Access Token

I received an user request for my Format Comment VSCode extension, which pleases me greatly.

Implementing the feature itself took me just a few minutes, then I spent the next hour trying to figure out how to setup the “Personal Access Token” to publish the extension to the marketplace. So, to avoid this waste of time to my future self, these are the steps:

1. Go to dev.azure.com/rodrigocfd to see the tokens;
2. If necessary, create another one, which will be a long string;
3. Organization must be set to “All Accessible Organizations”;
4. On the project directory, run vsce login rodrigocfd and paste the long string when prompted.

The Personal Access Token lasts at max 1 year, so this process will have to be made at least once a year

Using active/inactive system colors in Firefox

After the horrible Proton UI in Firefox v89, there was no difference between active/inactive window colors. The theme would simply remain static while you switched to other windows, which from the usability point of view, is absurd.

After digging a bit, I found an userChrome.css hack to use the system colors on Firefox window. As of Firefox 98, it appears to work well:

/* Show active colors on main menu bar */
/* https://superuser.com/a/1675508 */
#TabsToolbar,
#navigator-toolbox {
	background: -moz-accent-color !important;
	color: white;
}
#TabsToolbar:-moz-window-inactive,
#navigator-toolbox:-moz-window-inactive {
	background: unset !important;
	color: unset;
}

Just for the record: this is how you activate userChrome.css stuff.

Helix amp: sag, hum, ripple, bias and bias-x

I found a rather interesting video demonstrating the advanced amp parameters of the Line 6 Helix: sag, hum, ripple, bias and bias-x. As a summary, this is what I could infer to them:

• sag – lower is tighter and less dynamics; higher sounds muffled;
• hum – the literal ground hum of the amp;
• ripple – harmonic undertone audible on single notes; hard to hear in a mix;
• bias and bias-x – changes the overdrive character when used together.

Basically, these parameters make close to zero difference in clean tones. Crunch and high gain tones can change in thousands of ways, though.

Back to the tone chasing.

Filtering Pinia store fields

I’m having great joy working with Pinia, so much I’m introducing it at work. It seems reliable so far.

I found a quirk that’s annoying, however. In VS Code autocomplete, all the contents of the store are exposed – that includes all the internals we should not see.

After digging into the code and a lot of experimentation, I finally found a way to filter the visible fields using TypeScript:

import {defineStore, StoreActions, StoreGetters, StoreState} from 'pinia';
	
const useDef = defineStore('main', () => {
	return {};
});

export type ReachableStore =
	StoreActions<ReturnType<typeof useDef>> &
	StoreGetters<ReturnType<typeof useDef>> &
	StoreState<ReturnType<typeof useDef>>;
const useStore = (): ReachableStore => useDef();
export default useStore;

Although those types are exported by Pinia, they have basically zero documentation. I’m considering contribute with some documentation improvement, but I’m unsure if it’s worth.

Loading data asynchronously with Vue and Pinia

When working with Vue 3 Composition API and Pinia, I struggled a bit to put out an example of loading async data, where the request is handled by the Pinia store, which also owns the data.

It’s 2 AM and, finally, here is the store:

import {ref, reactive} from 'vue';
import {defineStore} from 'pinia';

const useStore = defineStore('fruits', () => {
	const fruits = reactive<string[]>([]);
	const loading = ref(false);

	return {
		fruits,
		loading,
		loadFruits(): Promise<void> {
			loading.value = true;
			return new Promise((resolve, _reject) => {
				setTimeout(() => {
					fruits.push('lemon', 'orange', 'peach', 'strawberry');
					loading.value = false;
					resolve();
				}, 2000);
			});
		},
	};
});

export default useStore;

And this is the single file component, which calls the store asynchronously:

<template>
	<div v-if="loading">Loading...<div>
	<div v-if="!loading">
		<div v-for="fruit of fruits" :key="fruit">
			{{fruit}}
		</div>
	</div>
</template>

<script setup lang="ts">
import {computed, onMounted} from 'vue';
import useStore from '@/model/store';

const store = useStore();
const loading = computed(() => store.loading);
const fruits = computed(() => store.fruits);

onMounted(() => {
	store.loadFruits();
});
</script>

Although I’m not seeing much advantage of Vue over React, Pinia is so much better than Redux insanity. Even with Redux Toolkit. I hope they don’t mess it up when Pinia becomes Vuex 5, as said.

Two-way binding input in React

As a follow-up to my big disappointment with Vue due to the lack of typed emits, even with TypeScript, I came back to think about a two-way binding input in React. Turns out, it’s pretty trivial to implement.

import { useState } from 'react';
	
interface TwoWayValue {
	value: string;
	setValue: (value: string) => void;
}

interface Props {
	data: TwoWayValue;
}

function TwoWayInput(props: Props) {
	return <input type="text" value={props.data.value}
		onChange={e => props.data.setValue(e.target.value)} />;
}

function useTwoWayState(initialValue: string): TwoWayValue {
	const [value, setValue] = useState(initialValue);
	return { value, setValue };
}

export { TwoWayValue, TwoWayInput, useTwoWayState };

Usage:

import { TwoWayInput, useTwoWayState } from 'two-way-input';

function App() {
	const nome = useTwoWayState('');

	return <div>
		<h1>{nome.value}</h1>
		<TwoWayInput type="text" data={nome} />
	</div>;
}

Now I’m still wondering about scoped CSS.

Install and uninstall Rust nightly

When developing the full-module refactoring of WinSafe, I found that it’s possible to tag the items with their respective required Cargo features. However, as many things in Rust, this is still available only in the nightly toolchain.

I want to make WinSafe available for the stable toolchain, so I needed to install nightly just to see how that stuff worked out, and then uninstall it after the tests.

Rust nightly can be installed and uninstalled with the following commands:

rustup install nightly
rustup toolchain remove nightly

To see which toolchains are installed:

rustup show

RAII guards in Rust

While experimenting with scope rules in Rust, I ended up implementing a recurrent idea I had – a RAII guard that runs a function when the object goes out of scope. I’m well aware of scopeguard crate, but it has some stinky unsafe bits in its implementation.

I was never able to properly implement it, probably because my Rust skills weren’t good enough, but now I did. And I’m rather satisfied with it:

use std::ops::Deref;

/// Returns the object wrapped in a way that the associated closure will run
/// when it goes out of scope.
pub struct Guard<T, D: FnOnce(&mut T)> {
	asset: T,
	dropper: Option<D>,
}

impl<T, D: FnOnce(&mut T)> Drop for Guard<T, D> {
	fn drop(&mut self) {
		self.dropper.take()
			.map(|d| d(&mut self.asset));
	}
}

impl<T, D: FnOnce(&mut T)> Deref for Guard<T, D> {
	type Target = T;

	fn deref(&self) -> &Self::Target {
		&self.asset
	}
}

impl<T, D: FnOnce(&mut T)> Guard<T, D> {
	/// Creates a new `Guard` object.
	pub fn new(asset: T, dropper: D) -> Guard<T, D> {
		Self { asset, dropper: Some(dropper) }
	}
}

I though about writing stuff like this in WinSafe:

impl HWND {
	pub fn GetDC(self) -> WinResult<Guard<HDC, impl FnOnce(&mut HDC)>> {
		Ok(Guard::new(
			self.GetDC()?,
			move |hdc| {
				self.ReleaseDC(*hdc).expect("Guard crash.");
			},
		))
	}
}

But then there are big implications like CreateMenu, which may or may not require a DestroyMenu call. These dubious behaviors are very unsettling, and many questions arise:

• Should I write another method, with a _guarded suffix?
• Mark the unguarded original as unsafe?
• In the example above, self is copied into the closure – what if it’s still zero?

So by now I believe I’ll leave everything as it is, and let the defer-lite crate at hand when needed.

Still, I greatly miss the idiomatic defer in Go.

Bash script to deploy my own Rust tools

While developing my own personal tools in Rust – which seems to be “the one” language of my own stuff now, after the disappointment of the consistent Go crashes –, I often need to compile and replace the current *.exe tool. The compile line I use is rather long, plus I want to standardize the steps, so I put out a shell script to automate the tasks.

This shell script must be placed at the project root.

EXE=program-name.exe

echo "Compiling $EXE..."
RUSTFLAGS="-C target-feature=+crt-static" cargo build --release --target x86_64-pc-windows-msvc

echo "Replacing old $EXE..."
mv ./target/x86_64-pc-windows-msvc/release/$EXE /d/Stuff/apps/_audio\ tools/.

echo "Cleaning up..."
rm -rf ./target/release
rm -rf ./target/x86_64-pc-windows-msvc

echo "Done."

I’m not versioning this script because it contains the directories on my computer, plus the command line itself is commented in the Cargo.toml file.

Fixing Visual Studio Code icon overlay color in Linux

A few months ago I had to dig into Visual Studio Code source until I found a change in the built-in light theme, where they changed the overlay color of the suspended autocomplete menu. This ended up being a question and an answer on StackOverflow, and it made up to my Windows patch.

There’s no patch for Linux, though. Another jab at my lack of multiplatform GUI framework – but I digress.

So, for the record, with Visual Studio Code standard *.deb installation, this is the file with the light theme:

/usr/share/code/resources/app/extensions/theme-defaults/themes/light_vs.json

The line to be commented out is:

"list.activeSelectionIconForeground": "#FFF"