memori · a free photo-printing tool for the Hobonichi Techo and other planners!

[irving]

As a longtime Hobonichi Techo user, I was excited to learn that the official Hobonichi Techo App would include a Memory Print feature, letting you print pictures perfectly sized to fit the techo's grid paper.

HOWEVER.... I was less excited to learn that this feature is locked behind a paid subscription... of $5.99/month 

So I did what any reasonable person would do and built my own free/open-source replacement!

My tool runs completely in the browser, and it's called memori. You can use it to arrange, crop, and print images to fit the grid paper of the different techos and any other planner. It's also really nice for making print-at-home stickers! (if you don't have specialty sticker paper, regular old printer paper + a gluestick works almost just as well).

I hope this slightly strange, very niche tool can be of use to you 

• memori on github: https://github.com/hunterirving/memori
  
  
• memori on hunterirving.com/git (if u hate github): https://hunterirving.com/git/memori
  
  
• live demo (with grid spacing set to 4mm): https://hunterirving.github.io/memori/?grid-size=4mm

[haumeaGeth]

Bruh, I literally just started prepping my first ever Hobonichi for the new year. Your timing is spooky. Thanks so much for making this!!

Just an idea: do you think you'd be able to add corner rounding? Of course it'd be possible to just eyeball it and round the corners when cutting out the images, but doing it evenly is tricky.

[irving]

Thanks for checking it out, @haumeaGeth!

I have one of these corner rounder tools (attached) that I use sometimes, I highly recommend them!

That said, if you'd like to try cutting out rounded corners by hand, here's a snippet you can paste into your browser console. You can change value of radiusMm to set the rounding depth.

Code

(() => {
	const radiusMm = 3;
	
	const pdfPixelsPerMm = 600 / 25.4;
	const css = `
		@media screen {
			.page {
				container-type: inline-size;
			}
		}
		.image-wrapper {
			border-radius: calc(${radiusMm} / ${LETTER_WIDTH_MM} * 100cqw);
		}
		@media print {
			.image-wrapper {
				border-radius: ${radiusMm}mm;
			}
		}
	`;
	const style = document.createElement('style');
	style.textContent = css;
	document.head.append(style);

	const originalToDataURL = HTMLCanvasElement.prototype.toDataURL;

	HTMLCanvasElement.prototype.toDataURL = function (type, quality) {
		const rounded = document.createElement('canvas');
		rounded.width = this.width;
		rounded.height = this.height;

		const ctx = rounded.getContext('2d');
		ctx.fillStyle = 'white';
		ctx.fillRect(0, 0, rounded.width, rounded.height);
		ctx.roundRect(0, 0, rounded.width, rounded.height, radiusMm * pdfPixelsPerMm);
		ctx.clip();
		ctx.drawImage(this, 0, 0);

		return originalToDataURL.call(rounded, type, quality);
	};
})();

[haumeaGeth]

Oh sweet, thanks! I've actually got that exact tool on my Christmas list, I just haven't gotten a chance to grab it yet. That bit of code'll be handy until I do xD