DEV Community: Matt 🦕

ffconf22

Matt 🦕 — Tue, 29 Nov 2022 12:37:47 +0000

tl;dr

ffconf22 allowed me to reconnect with what I love about frontend. The day also doubled as a great introduction to a community of folks who are just as passionate about frontend as me. It was worth the early start. I'm already looking forward to next year.

6am mmm let's go

This was me heading down to Brighton for ffconf, having been encouraged to sign up during the summer. Navigating a tube strike. Sourcing something resembling breakfast.

Work was chaotic given the recent ownership change, so I was too busy to plan ahead or overthink the trip down to ffconf. But getting out of London and taking the time away from work was just what I needed.

9am Duke of York's, cinema and coffee

Conferences are always a little nervy in the beginning. There's a brief moment before it starts where you're kinda fending for yourself. I had come down with a friend, but they had made themselves scarce at the key moment of mingling.

This conflict between shyness and socialising was easily overcome by a strong urge to find coffee. In I went. A quick stop at the table to pick up stickers, badges and a notebook - I love a good notebook during a conf.

Upstairs I found the coffee and a cute little balcony overlooking the groups of ffconf'ers below. Old friends? Colleagues? First timers? I would find out later. For now, I got chatting with Ciaran who happened to have a spot next to him on the balcony.

9:40 hello Remy

We ended up sitting in the front row with a couple of friends behind. Excellent view of the stage and speakers. The Duke of York's is usually a cinema and happens to have the world's comfiest seats - dangerous for those early starters who were missing out on sleep, but we had nowhere to hide.

I had a quick look over the schedule on the lanyard and saw Sophie was talking - looking forward to that, everything else would be a nice surprise. It did not disappoint.

Remy, one of the organisers, filled the room full of energy the moment he stepped on stage. After the usual preamble, we were on to our first talk. Cue the first of many talks all the while hurriedly note-taking and listening intently.

09:50 Florence and Heydon

Florence Okoye (@FINOkoye) kicked off the conference with "Designing as we want, to create the experiences that we need". Straight up a super informative talk which touched on several elements of design theory. I'll need to make time to give Socio-Technical Design a read at some point.

As someone who doesn't have an academic background in this space, I found comfort in hearing about tools/techniques that I had seen in practice e.g. "How Might We" and bringing the vital sense of community to the forefront of decision-making. Similarly, I think it would be worth remembering this definition of a designer; "[someone] who moves things from an existing condition to a preferred one".

I had not heard of the Design Justice framework, yet had experienced people-centric design at scale. This talk left me yearning for the company we used to be, an aside for another time. Ensuring the community you are building for is right at the centre of your design thinking is a no-brainer, but sometimes things aren't working so ask "are the relationships with the community right?".

The next speaker was Heydon Pickering (@heydonworks) with "Capitalism, The Web and You". Heydon lit up the stage with a fierce dismantling of capitalism and the general idea of "growing the pie" (as it relates to the forever growth that capitalism requires). There were plenty of shock moments in the talk, not least because after each bombshell we were treated to an updated CSS feature that had full modern browser support.

The talk had a few standout moments; when he talked about the "privatisation of social capital" it really hit home. Similarly, "obfuscation of theft" is another way that it really strikes a chord. Without going too deep into the talk; given have a finite amount of resources, or capital means that infinite growth is impossible therefore there's a redistribution, rather than growth.

There is no burnout, without capitalism.

Capitalism is, at least I always thought, a necessary evil. However, this talk gave me a fresh perspective. The near faith-like, unquestionable position, that's so far gone now schools aren't able to teach critical thinking around capitalism as they're not allowed to use material from anti-capitalist writers.

How does the generation ahead have a chance if they're not taught to question?

12:00 Lex and Sophie

Following a short break, we were back on with Lex Lofthouse (@loftio) who took us through their talk "Design for Developers". This talk had a nice familiarity with the first talk of the day where the former was more theory this was more hands-on. Lex showed some relatively simple, but effective, principles that can be used to improve the overall design.

The breakdown of "hierarchy", "proximity", "contrast", and "balance" with each having an illustrative slide helped show what to look for. Lex also did a series of before-and-after examples where an "ok" design was jazzed up using the principles. I fit squarely into the category of a pixel-perfect kind of frontend eng and this is exactly the kind of chat I'm here for.

Alongside the examples were several useful links too e.g. fontjoy.com, type-scale.com, colour.adobe.com, coolers.co and fontawseome.com to name a few.

One nice trick that I really liked was the styling of images with different filters/crops etc. This can bring consistency to a bunch of different images and you can see this done to great effect with the ffconf speaker avis.

Next up was Sophie Koonin (@type__error) and her excellent "This Talk is Under Construction: a love letter to the personal website". She took us through the early days of the wild wild west that was the internet like NeoPets, free ISP hosting options and even the exciting days of Myspace customisation.

I left the talk remembering the simpler days of the internet, when I built many websites in notepad and hadn't the foggiest what vim was, etc.

I couldn't leave my own little landing page up without giving it a once over. Check it out at mbarnettjones.com. I guess I also dusted off my jekyll-powered static site generator and wrote this too so double props to Sophie.

12:45 lunch

Lunch with future friends was a nice touch where those who were keen could meet other like-minded minglers in some pre-booked lunch spots. A lot of thought has clearly gone into the organisation.

However, I was away to make new frontend friends with the little crew that had formed during the first part of the day. We headed off to find MEATliquor and tucked in. Dangerously full and ready for a nap we headed back for a quick coffee and the next talks.

14:00 Lily and Natalia

Programming a computer can usually be thought of as passing instructions for it to perform. Have you ever tried crochet? Well in crochet you're the computer, performing a series of instructions from a pattern (a program). This was an excellent talk from Lily Madar (@Lily_2point0) who lead us through the uncanny similarities between wrestling yarn and massaging code.

The talk, titled "Programming with Yarn" (not the package manager), drew many parallels between the worlds of programming and crochet. Be that Ravelry for GitHub-like code sharing, forking a pattern to customise it for yourself or the event loop of crochet providing unit-testing confidence that you've not made a mistake the line prior.

Depending on where you sit you might argue that programming is as much a craft as it is a science. I have always admired the "craft" of the profession, sure there are plenty of strict rules that must be followed but, like crochet, what you create with them is endless.

// Detect dark theme var iframe = document.getElementById('tweet-1002232071597719552-565'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1002232071597719552&theme=dark" }

The next talk started out with a warning, things were going to be a bit grim. "Working towards a greener world from behind the keyboard" was an honest look at the state of our industry and the climate impact. Natalia Waniczek (@lil_natw) started with the news that the U.N. believes with have "10 years remaining" (to avoid climate catastrophe). CO2 has returned to pre-pandemic levels.

Did you know that the internet is now responsible for 3.7% of worldwide CO2 emissions? Approximately the output of Germany, or global air travel, is used to power the modern world. Perhaps that's not as much but put this into perspective; streaming an album on Spotify, 8hr/day, for a month produces the same amount of emissions as a car driving 31.2km. After a certain point CDs become the economical option 🤯.

Solving the issue of climate change is increasingly feeling like it's out of out reach, with the big corporations and fossil fuel industries shouldering the blame however, there are things we can still do to make a small difference, even in the world of frontend. There are "green" hosting providers and you can check your site with a Carbon Calculator.

We're increasingly sending more and more data over the wire to our users (remember those Spotify streams?) so saving bytes on your JavaScript bundles not only helps the user but also the planet. One thing that got me thinking was the choice of language, presumably the closer we are to machine code the more efficient we become, thus less waste. Do we always have to reach for a higher-level language? Could we use WebAssembly to build even more efficient websites?

16:15 Sareh and Ruth

After a quick ice cream break and another #mingle we were entering the final section of the day. Sareh Heidari (@sareh88) spoke to some of the reasons that this digital future isn't for everyone and the folks we're leaving behind in her "Digital Exclusion in Healthcare".

The COVID-19 pandemic was a hugely stressful time for many and between the frequent lockdowns in the UK the hope of normalcy rested on access to a vaccine. The rollout varied between countries but in the UK NHS was fairly quick to get it to those in most need and as COVID-19 seemed to be the most fatal to the elderly, they were first in line.

However, of the ~60 million people in the UK, only ~20 million appointments were booked online. Huge numbers were booked online but it still represents only 1/3 of the population. Who did we miss? Sareh's talk expanded on the various reasons for people and groups that don't or can't access digital services.

The idea that "Digital-first shouldn't mean digital-only" really struck me as one of those things that should be obvious but as someone who builds websites I often start out with the assumption that access is given - that's not always true.

There was plenty to think about from this talk, both the NHS simplifying its language down to "pee & poo" and the COM-B model are highlights. The NHS in particular is always something I valued and, from a frontend point of view, it is great to see them leading the way with their NHS Digital Styleguide.

A question that stuck with me; why is access to NHS digital services not free? Zero-rating (where providers don't charge for access) was talked about during COVID but feels like a no-brainer to me. We should break down as many barriers preventing people's access to healthcare.

Check out the excellent Good Things Foundation which works at bridging the digital device.

To bring the day to a close we had "Day Disco" by Ruth John @rumyra. An excellent showcase of all the media APIs available on the modern web; interactive animations drawn to canvas, bouncing to the beat.

I'm not all too familiar with those APIs to be completely honest but now I wanna try embedding some music into my personal site just to give them a go, why not? For my day-to-day the MediaSession API sounded like it might solve an issue I was seeing with Spaces, this API provides the metadata needed to show album art, track info etc in the browser playing overlays.

A great talk to round out the day! 🥁 🎉 🗣 ️

17:30 closing

Throughout the talks, I looked for a pattern, the common thread that linked them. The overriding "frontend" aspect was clear from the outset. However there's a nice compliment to the individual talks and their ideas; those of inclusion and empowerment; thoughtful design with the Users and Communities at the heart of it; exploitation and climate.

Huge props to the organisers, the AV staff, and the folks keeping the coffee flowing - you all did an amazing job. Special shout-out to the dude doing the captions, he certainly had a bunch of technical vocab to deal with (though in talking to him I learnt, it's Greek / Roman philosophers that trip him up more than often.)

Overall I left the day feeling invigorated, I had talked to new people and listened to many brilliant talks. I'm left with many questions and many, many, ideas! I can't wait to get started.

18:15 afters

Before I headed back to London there was one last chance to say hey and meet some more conference-goers. This time in the bar. Always good to close off the night with cheers to new friends. The beachside bar didn't disappoint.

See you next year for, ffconf.

First appeared on my blog, published 29th Nov 2022

From Hero to Zero(seg)

Matt 🦕 — Mon, 15 Mar 2021 14:14:11 +0000

This weekend I spent some time getting to know how Raspberry Pi, GPIO and SPI work - not know what any of that means? Great, me neither until this weekend.

For a tenner I picked up a ZeroSeg with the aim to use it to display numbers like temperature, time, and anything else you can think of. I often browse The PiHut just to see what's available and what sparks ideas for little projects like this.

Kit

For this build I used:

ZeroSeg
Soldering Iron (etc)
Raspberry Pi 3B+
Micro SD (or USB thumb)

Getting Started

Hands on

The ZeroSeg comes as a kit that needs building with a couple of resistors and chips that need soldering to the supplied board - loads of fun and a great project for beginners as it comes with a pretty comprehensive guide.

Prepping the Pi

I've covered my go-to Raspberry Pi setup previously and this build is no different, DietPi flashed onto a USB thumbdrive (booting to USB supported on Raspberry Pi 3 B+ onwards).

Testing, Testing

To get things started I popped the ZeroSeg on the GPIO pins.

GPIO is simply an series of pins that can be used to talk (send signals) to any number of devices, sensors etc via the Raspberry Pi - switching off / on an LED is common example you'll often see.

Next I used SSH to connect to my Raspberry Pi so I can configure the display without having to plug into a mouse and keyboard, instead working on my laptop.

SSH gives me a command line on the Raspberry Pi and if you've not tried using the command line I highly recommend it - it's a great way to interact with different devices from your Mac / Windows PC to a Cloud Server / Raspberry Pi.

There was a recommended library in the ZeroSeg guide for interacting with the display which I cloned and had a play with.

Ok, What Next?

The library provided uses Python, which is a typical programming language for this type of project. However my plan was to make the display available over the network and I wanted to do this using NodeJS.

There are a couple of benefits to NodeJS, first you write JavaScript which is a language I'm already comfortable with and secondly, there are a wealth of packages on npm that I can use to get something workable quickly.

I decided to try find a NodeJS equivalent package / library (over on npm) and then write a small wrapper to expose it to the web. (I probably could have just done it all in Python and saved myself an afternoon, but, the learning was fun.)

Abandonware

I started my search with "node raspberry-pi" and "node zeroseg" before finding something with "node MAX7219" (where MAX7219 is the name of the chip powering the ZeroSeg).

Turns out there's no "recent" library that does what I want. Several libraries claimed to talk to the chip however I had some real issues getting things going on my Pi.

Through this searching I did learn the ZeroSeg uses the Serial Peripheral Interface(SPI) to talk to to the display and that support for SPI in NodeJS is lacking - knowing what to search for however, "node spi", for made a huge difference when debugging (and reading the manual more thoroughly would have helped too).

Bespokeware

However after a bit of digging I discovered both spi-device and MAX7219.js which combined could do what I wanted.

The result is this: a new MAX7219.js.

I forked MAX72219.js from the original repo and converted to use spi-device. It was a super interesting deep dive into how SPI works and how to talk to devices attached to a Raspberry Pi.

Let's See it in Action?

Ok, so now I have a NodeJS interface to the display which means I can start to have a little play. In the update to MAX7219.js I started adding some abstractions (helper functions for common actions like setText) on top of the setDigitSymbol function - which will change on of the 8 numbers to the supplied symbol.

To demonstrate some of the new abstractions I built I created an examples folder and started putting together things like show_time.js and show_message.js.

The one I'm running at the moment is bounce.js - which "bounces" the time between the "sides" of the display, check it out 👇

This feels like a good place to have reached, I was able to talk to my display, with NodeJs, and I even made some commits to GitHub.

Next Steps

As mentioned I want to make this display available to devices on the network so the first thing I will do is implement some wrapper around my library so that I can do something like http://my-zeroseg.home/setText?value="hello_world" and have it shown on the display.

Another thing that I learned through the course of the project is the Arduino board should also be able to talk to this display - so I might try the whole thing again but this time without the Pi.

First appeared on my blog, published 15th May 2021

Setup Guide for Plex on Raspberry Pi

Matt 🦕 — Thu, 26 Nov 2020 19:39:33 +0000

Media streaming isn't a new thing and since the early days of the internet home media setups have been fairly common. What has changed is the hardware needed powering such a setup. The RasperryPi 4 is a powerful, pocket-sized, computer which can be setup as a home media server with very little cost or effort.

For this setup you'll need a RaspberryPi (4 if possible), a microSD card and an external drive of your media.

Steps

1. Flash SD Card with DietPi

2. Configure DietPi Automations

3. First boot

4. Configure Plex and Tautulli

Flash SD Card with DietPi

DietPi is my goto image when I'm working on RaspberryPi projects (I've written a little about this in the past as it offers a great base image, a simple software configuration and a ton of guides in their docs which is super helpful for getting started.

Head over to the website and download the DietPi image for your device (there are lots of platforms on offer). Each version of the RaspberryPi is catered for in one image:

Flashing the SD card can be done a number of different ways though I prefer the command line and there's a great guide on raspberrypi.com for macOS (and other plaforms).

Command Line

In short, use diskutil list to find the SD card, then unmount with diskutil unmountDisk /dev/diskN where diskN is the SD card. e.g

DietPi_RPi-ARMv6-Buster-3 % diskutil list
/dev/disk0 (internal, physical):
   #:                       TYPE NAME                    SIZE       IDENTIFIER
   0:      GUID_partition_scheme                        *500.3 GB   disk0
   1:                        EFI ⁨EFI⁩                     314.6 MB   disk0s1
   2:                 Apple_APFS ⁨Container disk1⁩         498.7 GB   disk0s2
   3:       Apple_KernelCoreDump ⁨⁩                        1.3 GB     disk0s3

/dev/disk1 (synthesized):
   #:                       TYPE NAME                    SIZE       IDENTIFIER
   0:      APFS Container Scheme -                      +498.7 GB   disk1
                                 Physical Store disk0s2
   1:                APFS Volume ⁨Macintosh HD - Data⁩     333.7 GB   disk1s1
   2:                APFS Volume ⁨Preboot⁩                 428.0 MB   disk1s2
   3:                APFS Volume ⁨Recovery⁩                1.2 GB     disk1s3
   4:                APFS Volume ⁨VM⁩                      4.3 GB     disk1s4
   5:                APFS Volume ⁨Macintosh HD⁩            23.8 GB    disk1s5
   6:              APFS Snapshot ⁨com.apple.os.update-...⁩ 23.8 GB    disk1s5s1

/dev/disk2 (external, physical):
   #:                       TYPE NAME                    SIZE       IDENTIFIER
   0:     FDisk_partition_scheme                        *63.9 GB    disk2
   1:             Windows_FAT_32 ⁨boot⁩                    268.4 MB   disk2s1
   2:                      Linux ⁨⁩                        63.6 GB    disk2s2

In my case this is disk2 as the other disks are APFS macOS Volumes and contain boring things like the operating system and my photos.

Next we need to unmount that disk and then copy the image (I've openned terminal inside the folder of the DietPi image)

diskutil unmountDisk /dev/disk2
sudo dd bs=1m if=DietPi_RPi-ARMv6-Buster.img of=/dev/rdisk2; sync

If you have issues running this command the RaspberryPi guide has some suggestions.

balenaEtcha

Alternatively DietPi recommends using balenaEtcha to flash the drive which offers a more friendly UI to select images, disks and flashes the SD card for you.

Either balenaEtcha or the command line should result in a flashed SD card that looks something like this:

With the fresh DietPi SD card we're in a good position to plug in a monitor, keyboard and mouse, then start up the Pi. If you are curious and want to try configuring it for yourself then try it out, you'll be taken through the DietPi setup and their helpful software configuration.

However I much prefer to automate as much of the first setup as possible, it's far more reliable and requires less fiddling with DietPi.

Configure DietPi Automations

When I say automate I mean that we're going to configure the DietPi image with a baseline set of software (on top of what is already provided). To do this we need to add a few lines to the /boot/dietpi.txt file on the SD card we just flashed. We can also pre-configure Wifi too however for the purpose of this setup I'm assuming wired ethernet but the approach is similar.

Adding software

If you open the dietpi.txt you'll find a load of configuration options and to make things easier you'll probably find ⌘ + F is your friend here.

I recommend copying dietpi.txt to your desktop then making the changes there, don't forget to copy it back onto the SD card when you're done though.

From this list we need to find the corresponding codes for Plex (42), Tautulli (146), RPi Monitor (66). We'll also need some utilities to read exFAT drives (more on that later).

Add a AUTO_SETUP_INSTALL_SOFTWARE_ID line for each softare you're configuring, e.g:

...

# Software to automatically install
# - List of available software IDs: https://github.com/MichaIng/DietPi/wiki/DietPi-Software-list
# - Add as many entries as you wish, one each line.
# - DietPi will automatically install all pre-reqs (e.g. ALSA/X11 for desktops etc)
# - E.g. the following (without the leading "#") will install the LXDE desktop automatically on first boot:
#AUTO_SETUP_INSTALL_SOFTWARE_ID=23
#Plex
AUTO_SETUP_INSTALL_SOFTWARE_ID=42

#Tautulli
AUTO_SETUP_INSTALL_SOFTWARE_ID=146

#RPi-Mon
AUTO_SETUP_INSTALL_SOFTWARE_ID=66

...

These changes will automatically install the above software when DietPi runs its first time setup.

Next we need to create a small install script to allow the Pi to read from exFAT and other windows partitions (we're likely adding an external harddrive which will have some flavour of Windows filesystem). To do this we need to create a text file called Automation_Custom_Script.sh on the /boot/ drive. The script will only have one line:

#!/bin/bash
apt-get install -y exfat-fuse exfat-utils ntfs-3g

To enable this setup script we again need to modify dietpi.txt, find AUTO_SETUP_CUSTOM_SCRIPT_EXEC and change it to 1, e.g:

# Custom Script (post-networking and post-DietPi install)
# - Allows you to automatically execute a custom script at the end of DietPi install.
# - Option 0 = Copy your script to /boot/Automation_Custom_Script.sh and it will be executed automatically.
# - Option 1 = Host your script online, then use e.g. AUTO_SETUP_CUSTOM_SCRIPT_EXEC=https://myweb.com/myscript.sh and it will be downloaded and executed automatically.
# - Executed script log: /var/tmp/dietpi/logs/dietpi-automation_custom_script.log
AUTO_SETUP_CUSTOM_SCRIPT_EXEC=1

Finally we need to let DietPi know to use all our automations so, find AUTO_SETUP_AUTOMATED and change it to 1.

You can download both dietpi.txt and Automation_Custom_Script.sh if you please.

Finishing Touches

There are a bunch of other options for the setup of the system so feel free to have a play. One line which might be worth changing is AUTO_SETUP_NET_HOSTNAME which defaults to "DietPi".

First Boot

If you've decided to setup the automations from the previous section then this step should be seamless. Plug you SD card into your pi, make sure there's ethernet, and the power it up. The setup process can take a bit of time but after about ~10 minutes you should be able to visit the IP address of the Pi on port 8888, e.g. 192.168.0.151:8888.

If you're impatient / worried, like I was, you can always try SSH'ing to the Pi to make sure it's behaving ssh dietpi@192.168.0.153 with the password dietpi. You should see something that looks like this:

After some time the setup should complete, once you're able to visit the RPI-Mon page (192.168.0.153:8888 in my case) you should be able to move onto the next, and final, step.

It's worth SSH'ing into the Pi to check the first time setup has completed too (otherwise it will reboot as you're configuring the other services)

Configure Plex and Tautulli

We can configure Plex and Tautulli. To do so we simply need to hit the local webservers for each of these services i.e the local webservers we just installed on the Pi.

For Plex visit: http://192.168.0.151:32400/web/index.html

For Tautulli visit: http://192.168.0.151:8181

(You IP address is likely to be different)

During the Plex setup it will ask you to add a library for your media, at this point you should connect your USB drives and click Browse. What you should see is a bunch of directories none of which are your drive, why? Well Linux needs to mount USB drives to make them available to the operating system.

Ideally this would be handled automatically, howecer I've yet to find a good solution for this, though usbmount looks promising.

Mounting Drives for Plex

To mount a drive on the Pi first SSH over to the machine ssh dietpi@192.168.0.151 with the password dietpi.

Once logged in we first need to create a folder for the drive to be mounted, run sudo mkdir /media/my_drive to create the folder. Next we need to mount the actual drive, run sudo fdisk -l and look for your drive (hint Disk model is usually provied for USB drives).

Disk /dev/sda: 57.3 GiB, 61530439680 bytes, 120176640 sectors
Disk model: Ultra Fit       
Units: sectors of 1 * 512 = 512 bytes
Sector size (logical/physical): 512 bytes / 512 bytes
I/O size (minimum/optimal): 512 bytes / 512 bytes
Disklabel type: dos
Disk identifier: 0xbba82a87

Device     Boot Start       End   Sectors  Size Id Type
/dev/sda1          32 120176639 120176608 57.3G  7 HPFS/NTFS/exFAT

When you've identified the drive we need to instruct linux where to mount it

sudo mount /dev/sda1 /media/my_drive

All things being well the Pi should mount your drives and they will be available under /media/ when you go back to Plex (refresh first).

Make sure to login with your Plex account, if you're lucky you'll be able to configure remote access (the port forwarding needed differs across routers but some will do it automatically.)

Tautulli

Once your Plex server is up and running you can start Tautulli.

Tautulli is a service that look at all the Plex server metadata to give you an overview of how much media is being watched, by whom and on what device - especially useful when sharing your Plex server with friends and family.

Sit back and enjoy

That's it, you should now be able to watch your media anywhere via one of the many Plex apps!

I hope you enjoyed this guide, I would like it to be an entirely plug and play experience with the USB drives and I suspect I will do a followup post when I figure that part out. Feel free to reach me on Twitter with any feedback and enjoy your Pi powered media server.

First appeared on my blog, published 26th November 2020

Homebridge x Xiaomi Roborock S5 Vacuum setup guide

Matt 🦕 — Mon, 31 Aug 2020 23:10:24 +0000

I'm super into home automation and I have built a fairly decent setup around Apple Home.

I’m completely sold on being able to control my house by voice, asking Siri to turn on various lights or ask about air the quality.

There is one holdout however, one that I can’t control by voice, my robot vacuum cleaner. HomeKit doesn’t support vacuum cleaners so we’ll have to get creative.

There are a bunch of good resources (links below) out there already for how to do this but I wanted to share my steps as it involved a bit of trial and error.

Steps

(Homebridge setup and configured with HomeKit)
Get Xiaomi device token
- BlueStacks (or any Android emulator)
- MiHome 4.4.49 (specifically this version)
- Login, extract log and get token (stored in Bitwarden)
Configure miio device w/ token + ip
- Test it all works
Configure Homebridge accessory (the robot vacuum)
- Homebridge plugin: homebridge-xiaomi-roborock-vacuum
- Add accessory: XiaomiRoborockVacuum
- Test in Apple Home
Configure rooms
- Add timer (for all rooms configured) 12:00am / 00:00
- Add room setup in order selected in timer
- Restart Homebridge
- Check each room (order may vary)

Homebrige

If you're reading this guide there's a good chance you know about Homebridge already. For those who don't Homebridge allows for non-HomeKit devices to be added to you Apple Home and there's a good guide available

Getting started with Homebridge on a Raspberry Pi Zero W

Brandon Brown ・ Mar 24 '18 ・ 5 min read

#raspberrypi #homebridge

I'll not go too much into the details for Homebridge but just for context I have Homebridge running on a Raspberry Pi and added to my Apple home.

Xiaomi Device Token

The first hurdle to overcome with this setup is getting the Xiaomi device token which is used to communicate with the vacuum. The vacuum in question is the Xiaomi Roborock S5 Vacuum.

I assume the device token is a layer of security added to ensure only Xiaomi clients can talk to the device and without it setting up the Homebridge wouldn't be possible.

So how do we get access to this secure token?

Android

The simplest way to do this is by getting hold of an Android device and run an old version of the Xiaomi MiHome app (4.4.49 to be precise). This version of the MiHome app helpfully prints the device details to a log file which can be extracted and read.

As an Apple household we don't have any Android devices so that's where BlueStacks comes in. BlueStacks is a powerful emulator aimed at Android gamers who want to play on macOS or Windows 10 and best of all, it's free to download.

Once downloaded, install the MiHome APK and sign in to to the Mi account where the vacuum is registered. What should happen in the background is a file will be created that you can export to you machine:

sdcard/SmartHome/logs/plug_DeviceManager

Looking inside this file you will find a bunch of log messages and a few lines of JSON which will contain the string "token":... verify the device is the correct one, as any device on the account will show up here. It's also a good idea to note down the deviceId and ip at this point too as you might need them later.

Once you have your token(s) store them somewhere for safekeeping, a notepad is fine for this but I used a Bitwarden secure note becuase I was moving between computers.

Configure `miio`

The first thing to do with the token is to test it works.

In order to test this use miio, which provides a slew of useful commands that help with talking to various MiHome devices. Install this on the computer where Homebridge is installed.

npm install -g miio

Once that's installed the command miio discover can be used to quickly scan the network for devices (if you run this now you might see your vacuum, however it's likely the token will come back as ???).

To actually talk to the target device the local token cache needs to be updated with the one retrieved from the log. To do this simply run the command miio tokens update with the IP and token for the device

miio tokens update 192.168.0.12 my-super-secret-token

This will allow you to then query the device with miio inspect which should return various device stats, state, etc.

$ miio inspect 192.168.0.12
 INFO  Attempting to inspect 192.168.0.12

Device ID: ________
Model info: roborock.vacuum.s5
Address: 192.168.0.12
Token: my-super-secret-token via stored token

...

At this point you should be fairly confident the token is valid and the device is responding. Nice! 👍

Configure Homebridge

The way different devices / accessories are configured in Homebridge is by plugins. The plugin for setting up the vacuum is the homebridge-xiaomi-roborock-vacuum which you can search for on the Homebridge website or use the link.

Each plugin spcifies its own accessory config and for homebridge-xiaomi-roborock-vacuum the accessory XiaomiRoborockVacuum has a bunch of options. The default ones are things like the token and ip as shown below.

  "accessory": "XiaomiRoborockVacuum",
  "name": "Robot Vacuum",
  "ip": "192.168.1.12",
  "token": "my-super-secret-token",

This setup is enough to start test with the Apple Home so once you've added your ip and token start up Homebridge and give her a whirl. 🧹

The vacuum should show up in Apple Home as a fan (which sorta makes sense, at least until HomeKit supports vacuums). The power of the vacuum can be controlled by the % of the fan so 100% is Turbo on my Roborock S5.

Configure Rooms

Looking back at the config there are a few optional parameters that might be some use (complete list is available)

Name	Default value	Notes
cleanword	"cleaning"	Prefix name of room switches
room	false	Array of `id`, `name` for room configs
zones	false	Array of `name`, `zone` configs

When a room (or zone) Array is specified an additional switch is created in Apple Home with the name that of the entry in the array. The cleanword prefixes the room name so if there was a room configured with the name "Kitchen" the switch would be labeled "cleaning Kitchen".

There are 5 rooms in my flat so I setup a room config like this

  "rooms": [
    { "id": 16, "name": "Bathroom" },
    { "id": 17, "name": "Kitchen" },
    { "id": 18, "name": "Bedroom" },
    { "id": 19, "name": "Hall" },
    { "id": 20, "name": "Livingroom" }
  ],

The id is arbitrary as far as I can tell (the example config starts at 16) however when I tried starting at 1 it didn't seem to work.

The next step is a little odd but there needs to be a Timer configured in the MiHome app at 00:00 / 12:00am (the first timer in the list). I suspect that the timer will setup some internal id which can be later relied on to allow for the room mapping to work reliably.

When setting up the timer it's important to add room cleaning with Select a room to divide and add the rooms in the order specified in the config. This should allow for the mapping from Homebridge room to MiHome room.

Once again restart the Homebridge and open the Apple Home app. Test that each of the rooms are mapped correctly - don't panic if not, go through each room and make a note of where it's configured, you should find that each room is mapped and only the lables need updating.

Final Tips

Set the cleanword to something like Vacuum the so that you don't have to speak in broken sentences
In Apple Home rename the device to "Robot Vacuum" or something and separte each switch into its own Tile, this helps with On / Off commands (otherwise there are a number of switches and Siri gets confused.)
If you look at the main fan you should see the battery level and filter life percentages

Hey Siri, vacuum the living room

With that you're done! Congrats, it's certainly worth it as now you should be able to trigger a room cleaning using your voice.

Raspberry Pi - Quick Start

Matt 🦕 — Sun, 10 May 2020 15:12:40 +0000

I love messing around with Raspberry Pis, they are a great place to try out home projects from hosting your own git server or a blog to controlling your smart windows and blocking ads.

This post is mainly a reminder for me on how to get setup with a fresh SD and a Raspberry Pi.

Quickstart

Download the DietPi image for your device
Extract the archive and then follow the instructions from Raspberry Pi on how to copy the image to your SD card
(Optional) Pre-configure your DietPi image with WiFi / SSH details (see DietPi Automation)

Why I run this setup

I did some research to find a lightweight image for the Raspberry Pi as this is super important with low powered devices. My thinking was that I want the fewest processes running on my Pi as possible, anything that would eat into those precious CPU cycles or RAM. In most cases I am running projects which are headless (in that there is no desktop or monitor connected).

Minibian

Initially I tried out Minibian which is incredibly lightweight image based off the official Raspberry Pi 'Raspbian' image, this means it pretty much guaranteed to run with the Pi while being performant and stable.

Minibian was perfect for hosting my blog, it meant I could install the minimum required to the run the blog, namely: SSH, Nginx and Ruby. That was it, the base image runs very little else (installing the daemon need for SSH was also a fun learning curve, n.b. if you're configuring SSHD, don't do it over SSH 🤦‍♂️).

DietPi

The next PiProject was PiHole, I wrote a few words about how this works at the time but didn't detail the setup. The same thinking was applied, how can I eke out the most performance from the Raspberry Pi 1 B+ that I had handy.

I found DietPi on a list of the "10 best Raspberry Pi images.." and while I was a little skeptical at first I gave it a go. Once again it's a pretty lightweight image, perhaps not as skinny as Minibian but still impressive. DietPi also offers a really helpful setup / configuration process which allows you to select the packages you want to install when you first run the device (and add / remove new packages later).

The DietPi package management is presented in a fairly nice UI (no apt-get or yum install necessary) and I've not run into any problems thus far. Another benefit is the DietPi Automation which allowed me to take a fresh image and then configure it with some of the specifics of my network, namely Wifi and OpenSSH Server.

Other images

I found a more recent list of 20 best Raspberry Pi OS and that had both Minibian and DietPi listed, which is nice to see. The list also includes things like Windows IoT OS which is something I'm interested in trying out. Take a look I'm sure you'll find something.

Where should I start?

The Raspberry Pi is a hugely useful computing, hobby-ist, electronics, electronic device. The versatility of the Raspberry Pi means there is endless opportunities for projects and configurations.

Here's one I tried as a bit of fun when the Pi Zero came out (sorry about the shakycam):

I strongly recommend just getting a familiar with linux and a Raspberry Pi project with Minibian is a great way to get going with installing packages and configuring a setup.

For the really green, try setting up Raspbian on a Pi and then running it as your "dev" computer. It has a familiar-ish desktop with programs and can serve as a great middle ground.

No matter where you start I'm sure you'll build something excellent!

First appeared on my blog, published 10th May 2020

Trying out MithrilJS by Building a Browser Based Game

Matt 🦕 — Sun, 26 Apr 2020 16:44:48 +0000

TL;DR I spent the weekend building a game with MithrilJS and wrangling Webpack.

With a lot of people rightly practising social disatancing and following stay at home orders, there's been a huge uptick in playing games remotely, be that over video chat or otherwise.

The Drawful Situation

I was in South Africa for part of their lockdown and during this time my friend group played a lot of Drawful 2, between 7 players, 3 households and 2 timezones (plus a bunch of phones / tablets).

If you're not familiar with Drawful, the premise is straightforward and lots of fun - you're each given an object / scene to draw (on your phone). Then every round a drawing is shown to everyone playing and each player has to suggest what the drawing is. The drawing suggestions are then voted on with more points awarded to more accurate drawers and bonus points for sensible suggestions that aren't the right answer.

Drawful played remotely involves a sizeable amount of tech, each house would have a device for videocalling, a device for streaming the game (over Steam Share / Twitch) and then a device per player. For players joining a Drawful game they simply need to visit a website and enter a code (nothing extra to download or pay for).

With the experience of playing Drawful perculating through my mind, I wondered what else might be fun to play remotely...

What's the big idea?

I really like the way Drawful (and the other Jackbox games) work with players using their devices, phones or tablets etc, to play along.

I would also like to have a go at building a game. It's a chance to build something a little more fun and try out new frameworks and ways of building websites.

The Pitch

I am taking inspiration from Obama Llama - a great party game and combines a simple memory game with trivia questions, sharades and rhyming. Obama Llama is a series of small games all rolled into one so it's a great candidate to break into milestones and work through each over a series of weekends.

A few "goals" for this project:

Each milestone should be small enough to build a functional game in a weekend.
There should be time left over in the weekend to do a write-up.
A new technology should be used each weekend.

The first milestone is going to be build out the simple memory game at the heart of Obama Llama.

What are the tools?

This weeks focus will be a single player memory game so the bulk of the progress will set the groundwork for the future. I have to decide on a JS Framework to build the website, work out what sort of build environment, deployments and then build a playable memory game.

Framework

For the last 4 years I have been working with ReactJS and while it is a super interesting framework it's important to step outside your comfort zone, from time to time, and try something new.

I recently read about MithrilJS on my friend, Emile's, blog and really like the prospect of a lightweight JS framework to build Single Page Applications (webapps).

I did consider VanillaJS and I am pretty keen to try out a vanilla JS and web-component based app but today is not that day.

Build Env

Github

First thing is to do is create a Github repo, vital to any software engineering project and will come in useful down the line when I want to think about automated deployments.

Naming things is hard, and thinking about the name for this game to setup a repo was harder still. I was stuck for a decent name when my girlfriend yelled out the suggestion Blue Lagoon.

Building and Serving

I am fairly used to modern web development with the yarn, yarn start and yarn build song and dance at this point so in an effort to keep something familiar around I opted for Webpack.

I have used webpack to build apps before but when I say "I have used webpack" I really mean that I've used create-react-app or a webapp template where webpack comes pre-setup.

Setting up webpack was certinaly a learning experience. I started by just trying out a few things until I got something "working". I quickly turned to various, resources and blog posts to get things setup properly, referring to the webpack docs frequently.

After ~2 hours I had something working with a folder strucutre I was happy with and the webpack-dev-server serving the bundled file with an generated index.html. This was further enhanced when later when I started thinking about styling.

Not too bad for a mornings work and now for the more fun part.

Building a game

I haven't built much in the way of games before and I'm not really sure how to approach it other than having a picture in my head and writing down a rough idea of the game mechanics I want.

For the memory game I pictured a 6x6 grid of cards which, when clicked or tapped, would flip to reveal the name / picture / illustration of a pair. A second tap would reveal another card and if the pair matches they would stay flipped, if not they would flip back.

There are lots of places to start with this but for me, the most interesting was to get a flipping card mechanic working.

You flipping what?

Solving the flipping animation would involve solving a bunch of problems - creating components in Mithril and passing data between them, animating the component, deciding on how to do styling (plain CSS, CSS-in-JS, inline style?)... quite a bit to think about.

A good place to start is with creating the components in Mirthril, this will allow me to start thinking about where animation happens and who is responsible for controlling behaviour or providing data.

There is a fairly decent amount of docs over at Mithril.js.org and they have a great walkthrough of how components are created, and work, with lots of CodePen live examples to go alongside.

Learning new frameworks is fun and after a bit of fiddling I was able to commit my first game component.

Let's talk about CSS

During my day-to-day work I use the react-native-web StyleSheet which is a CSS-in-JS approach to styling. React Native for Web is an abstraction layer that can used in react projects to allow the same code to be used on the web as with native (iOS / Android).

I really like CSS-in-JS and find it useful to be able to see the whole of a component, style and structure, in one place. For this reason I wanted to find a similar approach for the Mithril project.

Mithril + j2Css

The Mithril docs used to suggest using plain CSS and offer a few suggestions on how to avoid some of the issues frequently occuring (in some part due to global scope). There is a section towards the end of the docs on CSS which recommend J2C which looked interesting and would do roughly what I wanted.

This turned out to be a mistake, although initally I seemed to make progress with "simpler" animations (things like pseudo-classes and hover worked great) I reached a roadblock when trying to add the flip animation. The issue I had was translating many combined selctors like, .flip-container.flip .flipper, into something that worked with J2C.

I am willing to admit that I simply didn't spend enough time working with J2C so I'm not writing it off completely and it handled some CSS selectors that I never normally get to use with React Native StyleSheets.

PostCSS

The next thing to try was plain CSS, I can include a global stylesheet and be done with it. Though I still prefer having style and structure somewhat near each other when building components. The ideal solution would be smaller stylesheets located next to my component.js:

This is made possible by PostCSS which, after a bit more webpack wrangling I added to my project. At this point I also setup auto-deployments through zeit.co so while I had spent ~3 hours going down the wrong path I could start to see the app coming together and that was really encouraging!

To flip, or not to flip

The first implementation of the flipping was done on hover (you can play with this for yourself here) which was great to test out the behaviour but useless for a game.

I was following a tutorial for the CSS flip and there was a section on making it clickable which was achived by toggling a class on the card:

document.querySelector("#myCard").classList.toggle("flip")

While toggling the class works it's more imperative than I am used to and I wanted to find a way to do this within the framework as it would be a good chance to explore click-handlers and state.

After another ~3 hours I was able to cook, eat some dinner and then figure out scope, state and really start to get into my framework of choice.

I wired everything through and started clicking on cards, only nothing was happening...

Baby steps

It turns out I had made a crucial mistake when I first created the Mithril app by calling m.render instead of m.mount at the root of my app, from the docs:

The m.mount function is similar to m.render, but instead of rendering some HTML only once, it activates Mithril's auto-redrawing system.

So while it looked like the app was functioning (because it was rendering) the auto-redrawing system wasn't active which meant any changes to state in the component wouldn't re-render.

Swapping render for mount activated the redraw system solving the issue I had with the click-flip™️ and that was the final piece of the puzzle, now I could foucs on making something playable.

Game on

With that last little mount / render hiccup resolved I could tidy up and finish the game logic. The component that was driving the matching / pairing logic was the Stage and it would be responsible for flipping the cards and counting matches.

Initially I had thought the Card would be in control of when it flips (based on click etc) however it ended up coupling the Card and Stage too closely and it would simplify the logic greatly if the Card was a simpler component.

With the Stage wired up to flip the cards and make a note of all matches it could also determine the end of game, to show the winner a banner, and reset the board.

A key play

In React, keys can be used to reset a components state and cause it to re-render and thankfully the same is true with the VNodes of Mithril. When the end of the game is reached I wanted a Play again? button that could reset the board, shuffle the cards and start the game again.

I ran into a bit of an unexpected error here. It turns out that if a Mithril component renders multiple children (say a section with a h2 and a div) the keys must be all or none - if I want a key on one of the chilren I have to add keys to all of them. The error message for this:

“Vnodes must either always have keys or never have keys”

What I was trying to do was add a key to one of the entries but not the other. I'm highlighting this because I found the message pretty opaque and there wasn't a lot in the way of results when I searched. In the end I put a breakpoint in the code and stepped through to the component that was breaking it.

It's always fun to do a bit of debugging through framework source code, you learn loads and it's the best way to understand how it works under the hood; that said good error messages are useful too.

To finish off I spent a little bit of time writing a helper that converts "matching-pairs" into my card model representation and then thought up a bunch of pairs for testing.

Taking stock

I really enjoyed starting a project from scratch, I found the the webpack setup to be a great way to get to grips with a tool I use daily for my job but know little about.

I like the Mithril framework, I was able to get going with it fairly quickly, aside from a few gotchas, and using the Hyperscript approach (rather than JSX) means it's different enough from React. Mithril still shares enough of the declaritve patterns that I'm used to with React so I don't feel like I'm relearning from scratch.

Finally animation can be hard, CSS-in-JSS isn't always the right approach but it's always a good idea to take a break and get some food.

With that I now present to you Blue Lagoon (click to visit) 🎉👇

Thanks for reading, look out for more in this series to see how this game evolves. Next I'm planning on investigating adding more players into the mix.

To get updates about this series, you can follow me on Twitter @mattjones

P.S This takes time to do, I spent the best part of Saturday building the game and then the bulk of Sunday writing about it - time well spent.

First appeared on my blog, last update 26 Apr 2020

Gaming on macOS, kinda...

Matt 🦕 — Tue, 21 Apr 2020 20:33:28 +0000

TL;DR Using the power of my gaming computer through the convenience of my MacBook - setup for a headless Windows 10 gaming PC with macOS Steam in-home streaming

I really like Apple's hardware and enjoy my little, ultraportable, MacBook (that is sadly discontinued). One thing Apple hardware falls short on is in the gaming category, that is, unless you punt for the highest model MacBook Pro with a dedicated graphics chip (no thanks), so if I want to play games it's either a PC or PS4.

In the absence of a desk or monitor, in the past, I have used a Steam Link to play games from my PC on the TV. Steam Link is great for titles that have controller support but less great for RTS's or anything where you have to use a mouse and keyboard.

Steam Remote Play

The Steam client, though sometimes lacking in usability, has a bunch of great features - one of which is Remote Play, which allows streaming from one PC to another device. It's Steam Remote Play that powers the Steam Link.

Something I never explored was using Steam Remote Play to stream from my gaming PC to my MacBook which should be possible, despite the severe lack of gaming grunt afforded by the ultraportable.

Remote Desktop

First thing to do is setup Remote Deskop on the gaming PC. The gaming PC runs Windows 10 Pro which can be setup in Settings -> System -> Remote Desktop and enable.

Once Remote Desktop is enabled I tested with the free Microsoft Remote Desktop 10 app available from the Mac App Store (a nice surprise and a really great app).

Side note: I have done a bunch of extra work to "secure" the Remote Desktop connection which will come in handy down the line if I want to access from outside my home network.

With Remote Desktop setup I switched to the Mac and used Remote Desktop to do the rest of the configuration (probably not ideal but I don't have a monitor for the PC and staring at the TV gets old, really quickly).

Headless Windows

The goal is to have the PC, no monitor attached, boot straight into Steam (big picture mode) and skip loading all the usual Desktop etc.

In short I want to turn my PC into a games console but with extras.

This gaming PC is also used for Plex and a Minecraft Server so there are a handful of other things I want to start when the PC boots.

Finally, it would be ideal to sleep after a time so some way of waking the PC from sleep without having to press a button would be perfect.

A, non-exhaustive, checklist of things to solve:

⬜️ Straight to desktop
⬜️ Booting into Steam (and others)
⬜️ Auto wake

Straight to desktop

This approach is best done on a dedicated non-admin user

Getting Windows 10 to boot straight to desktop is achieved by changing a registry entry. The Windows Registry is a huge database of settings for basically everything running on the machine, including Windows itself.

Thankfully there are plenty of articles that help when making changes, though tread carefully as it's really easy to bork Windows when fiddling in the Registry. Following the steps in this article there are a bunch of values to change in the entry:

HKEY_LOCAL_MACHINE\Software\Microsoft\WindowsNT\CurrentVersion\Winlogon

I still find it nerve-wracking whenever I make changes to the Registry but once these have been applied rebooting my PC take it straight to desktop.

✅ Straight to desktop
⬜️ Booting into Steam (and others)
⬜️ Auto wake

Booting into Steam

There is something called Kiosk mode which does this but it's limited to Windows 10 Pro / Enterprise and seemed to be restricted to UWP Apps - I couldn't see a way to do this with Steam in my cursory search.

The approach here is to replace the usual Windows 10 Logon shell, Explorer, with something else. Like everything interesting in Windows, this is again configured in the Registry and like the auto login the same entry is needed:

HKEY_LOCAL_MACHINE\Software\Microsoft\WindowsNT\CurrentVersion\Winlogon

This time the value to change is "Shell", initially it was explorer.exe which starts the desktop and kick starts any other loading that happens with it.

To test this I tried setting it to C:\"Program Files (x86)"\Steam\steam.exe and rebooting the PC to see, thankfully it booted straight into Steam (I setup Steam to start into Big Picture Mode). To make sure I could still get back to the safety of my desktop I reverted the change back to explorer.exe and made sure that was still working.

Booting into Steam (and others)

So switching an exe worked but that is just one program, what about the three that I want to start?

Operating systems tend to have some way of scripting, that is, adding a bunch of commands into a file and having them execute. In Windows this can be achieved with a .bat file or a Batch file.

The first test was to try starting steam from a batch file. In the weird and wonderful world where Microsoft has added Linux to Windows 10 I can start bash from cmd.exe and then run vim to create the batch file... what a time to be alive.

ECHO Starting Steam
start C:\"Program Files (x86)"\Steam\steam.exe

It's pretty straightforward and easy to test either type the name out in the command prompt or double click.

Where I replaced the explorer.exe with the steam.exe I can now replace it with the batch file and it will execute each line in the file, which means I can start Minecraft Server and Plex.

The full startup script looks something like this:

ECHO Starting Plex
start  C:\"Program Files (x86)"\Plex\"Plex Media Server\Plex Media Server.exe"
ECHO Starting Minecraft
start  D:\Minecraft\start.bat
ECHO Starting Steam
start C:\"Program Files (x86)"\Steam\steam.exe

It's important to start both Plex and Minecraft server first so there's not risk they will popup anything over Steam.

✅ Straight to desktop
✅ Booting into Steam (and others)
⬜ Auto wake

Auto wake

The final piece of the puzzle is to enable auto wake, this is part energy saving, part noise reduction and part why not?

For this there's a cool networking feature called Wake-on-LAN and this allows sleeping computers connected to a network to be woken up by sending a so-called "magic packet".

Setting this up is done in from Windows Device Manager -> Network Adapters then finding the Ethernet adapter being used by the computer. In the Advanced tab are two entries Wake on Pattern Match and Wake on Magic Packet that needed to be enabled and a checkbox in Power Management "Allow this device to wake the computer".

One way to test this is to use a little helper called wakeonlan, with this
I can broadcast the magic packet to the network and have the PC receive it and
wake. To do this I needed the mac address and the IP address of the subnet mask
both of which I get get (for full details StackExchange had all the answers).

The other way I tested this was to put the computer to sleep and then use the Plex app on my phone to wake up the PC - this works a treat and with Plex Remote Access I can leave my PC sleeping then wake it up when I need it, wherever I am in the world.

✅ Straight to desktop
✅ Booting into Steam (and others)
✅ Auto wake

Time to play?

After solving everything I needed to solve I started up Steam on my MacBook and then started browsing my games - I fired up Ashes of the Singularity and was really impressed with how well the splash screen, sound and all, streamed across my home network (wifi + power line adapters). However it didn't look quite right. I couldn't click on any of the UI and it was almost like the screen was too small for the game.

The final problem to solve was screen resolution of the headless PC. I'm certainly not an expert when it comes to this but from what I know Windows talks to the Graphics Card / display card to work out what resolutions it can display in, 1920x1080, 1280x720, etc. Without a monitor plugged in Windows can't tell what resolution to output and fallback to some defaults.

Where does Windows store these defaults? Nvidia control panel? Display Settings? Of course not, it's back to the Registry.

After a bit of googling I found an article that looked promising. Starting in the entry:

HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\GraphicsDrivers\Configuration

A few entries for SIMULATED_... would need to be updated

Within this entry there are a bunch of different configurations, clicking through I found 4 which started with the SIMULATED prefix and changed each of these to default to 1920x1080.

One gotcha I ran into was when editing the value, not changing to decimal.

With the default resolution updated and the PC rebooted I was able to access Steam with a sensible resolution and Stream a game to my MacBook!

Thanks for reading, I am going to go play some games now, catch you next time.

First appeared on my blog, published 21st April 2020

Clock

Matt 🦕 — Sun, 03 Nov 2019 23:52:49 +0000

TL;DR Like clocks? I built a clock made of clocks, click below to play with it.

Or read on for a more in depth look at building clocks out of clocks (with some React).

Inspiration from strange places

Have you something like this before?

Me too, it's cool huh! I really enjoy the way the time seems to gradually appear and take shape.

Actually, the more I looked at it the more I appreciated the way it was put together, they are not individual clocks in the traditional sense as one arm is not simply following the other. Both arms of the clock are moving freely allowing for the various interesting shapes and movements and, of course, the time.

I bet that wouldn't be too difficult to put together, a RaspberryPi to control the "clocks" with a mechanism to specify an angle for the first and second hands...

Creativity intensifies

Ok, so I don't have the motors to build the physical clocks and I'm not sure what I need to buy or how to wire them into a RaspberryPi. However, what I can do to prototype the idea is build a web app.

The quickest way to get started is to use create-react-app, this provides the basic setup for a React app.

The first thing I wanted to do was to create a simple clock, requirements were simple; two hands that can move independently of each other and a face. Throwing together some div's, a bit of CSS and voila, I had the makings of a clock, I can specify the angle in degrees, of each hand using the a CSS transform rotate and there's a white face.

Making things move

From here I wanted to see what the best way to animating things could be. I spent a bit of time looking into the various ways I could animate components in React. Then I thought, nah, why not just see what I can I achieve without a library, surely I should be able to prototype something just using React and a bit of CSS knowhow.

Using create-react-app meant that I get a modern version of React out of the box, which means hooks! I've been looking for an excuse to try out hooks and this seemed a good a time as any to try.

I imagined a basic rendering loop like this:

inital state sets start / end positions
render clock hands at initial position
setTimeout or requestAnimationFrame to increment and set new position
render clock hands at new position
repeat

Keeping the hand positions in state meant I could "animate" the hands by updating the state, incrementally, and causing a re-render which would update the hands to their new position.

const [angle, setAngle] = useState({
   hour: getRandomStartingAngle(), 
   minute: getRandomStartingAngle()
});

In the new world of React hooks there's a hook perfect for the job of triggering the increment: useEffect which, amongst other things, is run after every render (for more details check out the docs).

To increment I needed to create an effect with would trigger at a reasonable rate, for this I used requestAnimationFrame which is a suitable API to schedule an update on as it's usually called 60 times per second (generally considered the threshold for smooth animation).

useEffect(()=> {
   requestAnimationFrame(()=>{
      const { hour, minute } = angle;
      setAngle({
         hour: hour + 1, 
         minute: minute + 1
      });
   });
}, [angle]);

Putting it all together and I had a clock that animated around and around, and around, and around, and never stop.

It seemed to work pretty well. However, I made a couple of mistakes which won't become apparent until I start trying to create numbers from the clocks.

Drawing numbers, with clocks

Next was to put a bunch of these little clocks onto the screen and see how they animate, using a small bit of flexbox to define rows / columns and create 2x3 grids for a single number.

So it's starting to look a lot more like it could resemble a number. In order to animate to the number I needed to work out all the various positions that could go into a clock number and then tell the smaller clocks to animate to those positions.

The approach to drawing a number was to pass a targetAngle to each of the smaller clocks. The basic idea was that for a given target angle the clock would continue increment the position of the hands until they'd reached it, then stop.

function getIncrementValue(angle, targetAngle) {
   if(angle === targetAngle){
      return angle;
   } else { 
      return resetAngle(angle + 1);
   }
}

Incremental by 1 each time means the target angle would eventually be achieved, however the first mistake I made in the sub clock logic rears its head.

As the hands increment around they can reach an angle above 360deg which breaks for situations where the hand has to travel around the whole clock to reach the target angle. This would mean some of the sub clocks would stop at the right place but others would continue rotating, an awkward bug.

To solve the endless rotation bug I added a resetAngle function which keeps the numbers between 0 < 359 allowing the target angle to always be reached.

Next was the job of actually figuring out these angles. The approach initially was to write, by hand, each angle, for each number, for each clock in the 2x3 grid... I quickly grew tired of this. Instead it's easier to specify a a number of set positions which are the building blocks of the number.

const createAngleSet = (hour, minute) => ({hour, minute});
const bothLeft = createAngleSet(270, 90);
const bothRight = createAngleSet(90, 270);
const bothTop = createAngleSet(0, 180);
const bothBottom = createAngleSet(180, 0);
const topAndBottom = createAngleSet(0, 0);
const rightAndLeft = createAngleSet(90, 90);
const topLeftCorner = createAngleSet(90, 0);
const topRightCorner = createAngleSet(270, 0);
const bottomLeftCorner = createAngleSet(0, 270);
const bottomRightCorner = createAngleSet(0, 90);
const emptySpace = createAngleSet(225, 45);

Above is the list of all the positions needed to "draw" the numbers 0-9 and they're used in a number config that looks something like this:

TWO: {
  a1: { ...bothRight },
  a2: { ...topLeftCorner },
  a3: { ...bottomLeftCorner },
  b1: { ...topRightCorner },
  b2: { ...bottomRightCorner },
  b3: { ...bothLeft }
}

The result of all this work was the realisation of the numbers. The effect was captured almost exactly as I wanted it, with the number appearing out of the randomness of the single clock faces.

The full NumberGrid is available for preview and illustrates the whole number set that is used in building the clock.

Animations, animations, animations

Earlier I mentioned I had made a mistake when creating the mini-clock, did you catch it?

Well, my first go with useEffect was more on feeling than careful study of the documentation. As a result when I first attempted to draw the numbers 0-9, at the same time, there was pretty terrible performance.

Turns out useEffect is expected to be triggered and then torn down, as a result it's supposed to provide a cleanup function to do any bits of cleanup that are needed if an in progress effect needs to be cancelled. This caused a subtle issue as everything seems to animate smoothly however it slowed way down as I scaled up from the 1 mini-clock to the 54 that I needed in order to display the full 0-9 numbers.

useEffect(()=> {
   const increment = requestAnimationFrame(()=> {
      const { hour, minute } = angle;
      const { hour: targetHour, minute: targetMinute } = targetAngle;
      setAngle({
         hour: getIncrementValue(hour, targetHour, speed), 
         minute: getIncrementValue(minute, targetMinute, speed)
      });
  }
  return () => cancelAnimationFrame(increment);
}, [angle, targetAngle, speed]);

I corrected this within my effect with cancelAnimationFrame and added a speed value, via useContext to give me some control over the mini-clock animations (necessary for building a stopwatch).

Clock

I now have all the pieces to build the clock. Using the Date object and updating the target time every time the hours or seconds changed. The DigitalClock would then work out the individual parts of the time string and pass them to the ClockNumbers which would, in turn, pass the individual parts to each mini clock.

I am so happy with the result 🕑🕤🕜😬

Thanks for reading and check out the clock below 👇

First appeared on my blog, published 3rd November 2019

DEV Community: Matt 🦕

ffconf22

tl;dr

6am mmm let's go

9am Duke of York's, cinema and coffee

9:40 hello Remy

09:50 Florence and Heydon

12:00 Lex and Sophie

12:45 lunch

14:00 Lily and Natalia

16:15 Sareh and Ruth

17:30 closing

18:15 afters

From Hero to Zero(seg)

Kit

Getting Started

Hands on

Prepping the Pi

Testing, Testing

Ok, What Next?

Abandonware

Bespokeware

Let's See it in Action?

Next Steps

Setup Guide for Plex on Raspberry Pi

Steps

Flash SD Card with DietPi

Command Line

balenaEtcha

Configure DietPi Automations

Adding software

Finishing Touches

First Boot

Configure Plex and Tautulli

Mounting Drives for Plex

Tautulli

Sit back and enjoy

Homebridge x Xiaomi Roborock S5 Vacuum setup guide

Steps

Homebrige

Getting started with Homebridge on a Raspberry Pi Zero W

Brandon Brown ・ Mar 24 '18 ・ 5 min read

Xiaomi Device Token

Android

Configure miio

Configure Homebridge

Configure Rooms

Final Tips

Hey Siri, vacuum the living room

Raspberry Pi - Quick Start

Quickstart

Why I run this setup

Minibian

DietPi

Other images

Where should I start?

Trying out MithrilJS by Building a Browser Based Game

The Drawful Situation

What's the big idea?

The Pitch

What are the tools?

Framework

Build Env

Github

Building and Serving

Building a game

You flipping what?

Let's talk about CSS

Mithril + j2Css

PostCSS

To flip, or not to flip

Baby steps

Game on

A key play

Taking stock

Gaming on macOS, kinda...

Steam Remote Play

Remote Desktop

Headless Windows

Straight to desktop

Configure `miio`