Two tweaks for Internet Arcade games on archive.org

The Internet Arcade has a great collection of browser-playable arcade games. But I ran into two problems: (1) the aspect ratio goes bad in full-screen mode (no black bars on the sides of 4:3 content), and (b) mouse support is turned off, which makes trackball games like Marble Madness less fun and spinner games like Blasteroids not great for those of us who have a USB spinner (I just made one myself using a magnetic rotary sensor). 

It took me a while to find a solution, but finally I managed to inject options into the underlying MAME emulator and thereby fix both problems:

First, go to a game, but don't click the start button.

Then put the following into the URL bar and press enter: 

javascript:MAMELoader.extraArgs=(z)=>({extra_mame_args:['-mouse','-keepaspect']});AJS.emulate()

(Note that Chrome will not let you past the "javascript:" prefix into the URL bar. You can copy and paste the rest, but you have to type "javascript:" manually.) The game will start, and the mouse will be enabled. You can add other MAME options if you like.

You can also turn this into a bookmarklet. Indeed, you can just drag this to your bookmark bar: Emularity Mouse .

There is still a minor aspect ratio problem. If you go to fullscreen and go back to windowed view, the aspect ratio will be bad in windowed mode.

Web-based tool for adding timed text and a timer to a video

When making my Guinness application record video, I wanted to include a time display in the video and Guinness also required a running count display. I ended up writing a Python script using OpenCV2 to generate a video of the time and lap count, and overlaid it with the main video in Adobe Premiere Rush.

Since then, I wrote a web-based tool for generating a WebP animation of a timer and text synchronized to a set of times. The timer can be in seconds or tenths of a second, and you can specify a list of text messages and the times to display them (or to hide them). You can then overlay it on a video in Premiere Rush or Pro. There is alpha support, so you can have a transparent or translucent background if you like, and a bunch of fonts to choose from (including the geeky-looking Hershey font that I used in my Python script.)

The code uses webpxmux.js, though it was a little bit tricky because in-browser Javascript may not have enough memory to store all the uncompressed images that webpxmux.js needs to generate an animation. So instead I encode each frame to WebP using webpxmux.js, extract the compressed ALPH and VP8 chunks from the WebP file, and store only the compressed chunks, writing them all at the end. (It would be even better from the memory point of view to write the chunks one by one rather than storing them in memory, but a WebP file has a filesize in its header, and that’s not known until all the compressed chunks have been generated. One could get around this limitation by generating the video twice, but that would be twice as slow.)

Chrome extension: Blacker Text

Web design has opted for dark grays as opposed to blacks. For a middle-aged person like me, this makes things less pleasant (and perhaps harder, but I don't have the empirical data to show that) to read: the grays not only look dimmer, but also fuzzier to me. So I wrote a simple Chrome extension that automatically snaps near-black colors to black (and near-white to white, for use on dark-mode sites) on all websites, except within links. You can adjust how close you have to be to black (or white) to snap. 

Update: Here is the FireFox version.

The result of using this extension for the last week has been a pleasanter web experience: a lot of sites look crisper, more like reading a book printed with high quality ink on high quality acid-free paper. I miss it on my phone since mobile Chrome doesn't support extensions (I am tempted to switch to a mobile browser that does support extensions, but haven't done so yet).

Eventually, if there is any actual interest in the extension from people other than myself, I may add some per-site options in case some site is broken by this. 

Contrast, Serif and Justify

I was trying to read Locke online, but was annoyed by the fact that the font was dark gray instead of black and sans serif, neither of which is great for extended reading. So I made two bookmarklets: Contrast and Serif. Just drag them to your bookmark bar and click on them to run them on a page. The Contrast one snaps all fonts to white or black (depending on background color) or blue (if it's a link) and adjusts near-black/white page backgrounds to black/white.

Update 1: Justify may also help. And, finally, Reader combines all three functions.

Update 2: Sepia is sometimes nice.

Update 3: See also my Blacker Text extension.

Generate bookmarklet dynamically from gist

Let's say you want to make some bookmarklets be available to readers of your website and you want to be able to update them conveniently without having to re-encode your javascript into a bookmarklet and edit your website html. Here's a simple method. Post the bookmarklet on gist.github.com, and then edit and use the following html/javascript code to fetch the javascript and automatically generate a bookmarklet:

<p>My bookmarklet is here: <a href="__error__" id="myBookmarklet1">My Bookmarklet</a>.</p>
<script>
var linkId = "myBookmarklet1";
var gistLink = "https://gist.githubusercontent.com/arpruss/74abc1bc95ae08e543b9b74f15a23b07/raw";
fetch(gistLink).then(function(response) {
    if (!response.ok) {
        //alert("Error fetching "+response.statusText);
    }
    else {
        response.text().then(function(text) {
            var link = document.getElementById(linkId);
            link.href = "javascript:"+encodeURIComponent("(function(){"+text+"})()");
        });
    }
}); 
</script>

For a live example, see my previous post.