CSS Bokeh Effect
A little animated Bokeh generator, refresh for different colours.
It changes every 60 seconds so you can run it like a screensaver 🙂
WebXR / VR / AR
My first foray into WebXR development with some good old three.js.
If you have a Quest 3 check out my AR Cube Whales! Browse the page in your headset, hit the Enter button and enjoy the colourful cube whales swimming around you. 🙂
Dynamik Tech
A simple brochure webpage… it’s a start.
…really happy with the animations on this page. 👍
Galahga!
A little side experiment/prelude to a new wordpress theme I’m cooking up … turned into an homage to classic 8 bit arcade.
https://paulwright.id.au/codefun/galahga/
The voxel objects were created with @nimadez’s excellent Voxel Builder (nimadez.github.io) and the rest is Three.js and GSAP.
This.wtf
A new domain to bring together all the side projects I have, under one banner.
Check it out and buy some merch! 🙂
“TV” Gallery
A little gallery idea I had with three.js and video.
https://paulwright.id.au/codefun/gallery/
Progressive Web Apps
So you want to use web technologies to build a stand-alone application…
You could use Electron (see my getting started) but generally that’s limited to desktop apps, requires the app to be packaged and deployed (admin rights?), and also sucks up ~500MB of RAM (a whole new chromium instance) for every instance running on your computer! Which is bad for mobile and VDI clients.
Compare that to a PWA…
- Works on Win/Mac/Nix/Desktops/Phones anything with a Chrome/Edge/Brave browser.
- A PWA runs as a “new tab” in your default browser (logically in memory that is, on your desktop it can be a separate fullscreen or standalone window) – so it piggybacks on the browser you likely already have open and therefore only uses a fraction of the memory that a separate chromium app does. (better for the device)
- It can be installed directly from the website, by the user – it lives in the user space (like browser extensions) and does not require admin intervention. (easier for your clients)
- Updates can be pushed automatically, no redeploying or reinstalling required. (good for you)
So – where to from here?
My first efforts at a bare-bones shell can be found here…
Note the icon/notification that appears in your address bar when you browse that page… On a mobile phone, you can go to ‘share’ and ‘add to homescreen’ to “install” it.
Keen? Check out the following resources…
Progressive web apps (PWAs) | MDN (mozilla.org)
Overview of Progressive Web Apps (PWAs) – Microsoft Edge Development | Microsoft Learn
Jubble!
So I’ve embarked upon making a web game… it’s nearing its’ v1.0 milestone and is now open for beta testing! 🙂
Check it out at: https://jubble.fun
Transparent fonts?
A little web experiment to see if i could replicate a “transparent font” effect – what’s really happening here is the font and background share the same background image/offset.
The clock to demonstrate it’s not a transparent .png… and throw in a nice ‘plasma’ colour effect for some eye-candy. 🙂
Coins!
Another experiment with canvas.toDataURL() in the form of a coin sprinkler!
Word Solver
I got bored with Wordle’s one-word-a-day thing, so I made my own.
Link: WordSolver
A simple word guessing game with no play or word-size limits.
TickerText
A tickertext example with sound, and punctuation support 🙂
Canvas FX
A nice little ‘spotlight’ effect using HTML Canvas.
Microsoft Store Apps
For some reason apps like “Word Mobile” just aren’t discoverable within the store anymore!? They’re still there lurking in the background, so here’s a quick reference for some of the more common apps you might need.
Personal / Frontline / Windows 10
- Word Mobile (store)
- Excel Mobile (store)
- OneNote for Windows 10 (store)
- Mail and Calendar (store)
- Sticky Notes (store)
- Microsoft Photos (store)
- Snip and Sketch (store)
- Windows Calculator (store)
- Paint 3D (store)
Education / Enterprise
- Company Portal (store)
- Microsoft Defender Application Guard (store)
- Power Apps (store)
- Microsoft Whiteboard (store)
Utility
Other
Tip: This is a useful article for managing store apps with PowerShell.
I ♥ Pixels.
This started as an experiment with Responsive WebGL and quickly evolved into a browser-compatibility challenge with the CSS “image-rendering” property.
The image-rendering property should tell the browser how to render an item when it is stretched or enlarged. By default, browsers will assume the ‘auto’ value, which uses bi-cubic filtering (or the like) to smooth out an enlarged image.
But sometimes you don’t want this to occur, e.g. with a QR Code, you want the pixels to remain sharp and defined not soft and blurry, and so we specify the ‘pixelated’ value in CSS.
As it happens this property is obeyed by Edge, Chrome and Firefox on all raster objects – however, on Safari (and any iOS browser) it only works on images and not canvas elements! … and because WebGL can only render in a canvas element – that leaves us in a bit of a pickle.
The work around here, is to fetch the image data from the canvas element, into an image and scale the image instead. sure, it works, but it does cop a huge performance penalty as you’re double handling all the image data every frame! … alas.
Check out the demo here: http://paulwright.id.au/codefun/pixl/
Windowless Apps with PowerShell
What?! You can Create and Deploy completely custom apps with a single Powershell script? Turns out it’s quite easy.
If you want the jump on the explanation below, grab my demo script from here – else read on to find out more.
The WYSIWYG way to layout a custom GUI is to use Microsoft’s XAML Studio from the Windows app store, but in this post we’re doing it the hacker way by pulling apart a working example – how fun!
(more…)Unity 2D First Steps
Challenge: Make a cross platform 2D game.
In this post I explore the basics of building up a 2D game using the Unity cross-platform game engine. My efforts below, based on the examples found at The Polyglot Developer and Unity Documentation.
The graphics I use for this tutorial, can be downloaded as a bundle here.
Raspberry Pi 4 & Waveshare 5.5″ AMOLED
Put together a Waveshare 5.5″ AMOLED touch display (available here) with the Raspberry Pi 4B today and set it up as a kiosk. This display is a much welcomed upgrade from the 3.5″ (XPT2046) that was available for the Raspberry Pi 3.
It’s bigger with a higher resolution and better contrast. The glass display having a smartphone quality look and feel about it.
Assembly was very straight forward, the Raspberry Pi 4 screws on the back of the panel with two little bridge-boards – one for Power & USB/Touch – the other for HDMI display.
All the bits and pieces are included with the panel, so nothing to worry about there.
Building the image
For the Raspberry Pi 4 image first we install Raspbian by following the instructions on my previous post…
Once you have your card imaged, add the following to config.txt
max_framebuffer_height=1920
max_usb_current=1
config_hdmi_boost=10
hdmi_group=2
hdmi_force_hotplug=1
hdmi_mode=87
hdmi_timings=1080 1 26 4 50 1920 1 8 2 6 0 0 0 60 0 135580000 3
Manufacturer website: 5.5inch HDMI AMOLED – Waveshare Wiki
Then all there is to do is setup a web kiosk on it.
Instructions here: Raspberry Pi Kiosk Cheat Sheet
GLTF .glb and Three.js
I was looking for rapid-development 3D tools and (re) discovered the highly underrated Microsoft Paint 3D. Yes, that’s right, Paint 3D, that app you already have with Windows 10 but never really bothered to use.
Quick primitive building and paintable textures with my Surface Pen? It’s a good start …but can I really use it for production stuff?
Well, it turns out Paint3D lets you save in .glb format and yes, you can load these GLTF models straight into a Three.js scene! Super convenient.
A quick trip to technohippy and three.js docs, and we have a proof of concept…
Sky High WordPress Theme
Inspired by this cloud effect by Jaume Sanchez Elias, I wanted to create a completely custom WordPress Theme from scratch.
Throw in a little Bootstrap to keep it tidy, and here we are. 🙂
Download Theme (64kb)
You can download the WordPress theme files here.
PS Error: “Unable to download from URI”
Using a Server 2016 server today, and trying to install MSOnline packages, I got the error:
WARNING: Unable to download from URI 'https://go.microsoft.com/fwlink/?… etc.
Turns out the error was PS Shell trying to use HTTPS 1.1
The Fix
Fix it with the following command in an elevated window.
[Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12
…that’s all one-line btw, in case it wraps in your browser.
Raspberry Pi Kiosk Cheat Sheet
# Tested on Raspberry Pi model 4B # Updated Apr21 - Tested on Buster Lite
Image your SD card with Raspberry Pi OS Lite
Configure Network & SSH
Install LXDE and Chromium
sudo apt-get upgrade
sudo apt-get dist-upgrade
sudo apt-get update
sudo apt-get install chromium-browser unclutter lxde
Configure Boot
Change the boot configuration to autologin to desktop as ‘pi’ user (see below to change the password)
sudo raspi-configsudo reboot
Set chrome to autostart and turn off screensaver
sudo nano ~/.config/lxsession/LXDE/autostart
Remove anything there, it should look like this…
@xset -dpms off@unclutter -idle 0@sed -i 's/"exited_cleanly": false/"exited_cleanly": true/' ~/.config/chromium-browser Default/Preferences
@chromium-browser --noerrdialogs --kiosk http://localhost --incognito --disable-translate --check-for-update-interval=1 --simulate-critical-update
⚠ If there was nothing there, or the file didn’t exist, it’s because you didn’t reboot in the previous step.
Node.js Cheat Sheet
Installing on Ubuntu 18.04
Install Node.js from the repositories
$ sudo apt install nodejs
Install npm, the Node.js package manager
$ sudo apt install npm
Check which version of Node.js you have installed
$ nodejs -v
Create your project
mkdir project
cd project
Initialize your project.
npm init
Link the Express package.
npm install express --save
First Electron App Cheat Sheet
A quick walkthrough to create your own native Win32 or MacOS app in minutes.
Electron is a framework for creating native applications with Chromium web engine using JavaScript (Node.js), HTML, and CSS.
Preparation
Download and install the latest Node.js installer for your operating system. In this example we’ll use the Windows Installer.
If you don’t have a text editor I recommend Atom.io. You can use it as a windowed app and launch it from the command line. e.g. atom index.html
First Things
Open a PowerShell window. I like the new Windows Terminal app from Microsoft.
Navigate to your home folder or wherever you keep your files.> cd ~/Documents
Make a directory for your Electron projects and subdirectory for your first project.> md Electron/MyProject
Excel IPv4 Subnet Planner
Visually plan your CIDR subnets and firewall ranges with this handy Excel spreadsheet.
If you have a large (Wide-area) Network that you need to segment into VLANs of varying sizes – this spreadsheet can help you organize them into hierarchical ranges.
In the image above you can see that all of “WA1” is 10.0.16.0/21 so we can set global ACL’s at that level. All the corporate staff fall into 10.0.16.0/22 and Guests 10.0.20.0/23.
So as we progress from larger ranges to smaller, more defined subnets, then we can define ACL’s and firewall rules for global and/or granular policies respectively.
This kind of subnetting is much easier when done visually.
Ubuntu LAMP from scratch
A quick guide to rolling an Apache/PHP/MYSQL webserver.
Starting with a default Ubuntu Server installation.
Install all the things…
$ sudo apt-get update
$ sudo apt-get upgrade
$ sudo apt-get install apache2 mysql-server mysql-client
$ sudo apt-get install php libapache2-mod-php php-mysql
Configure firewall…
$ sudo ufw allow 80/tcp
$ sudo ufw allow 443/tcp
PHP PDO Cheat Sheet
A quick and dirty example for PHP with MySQL PDO.
// db details
$db_HOST = 'localhost';
$db_USER = 'myusername';
$db_PASS = 'mypassword';
$db_NAME = 'databasename';
$db_CHR = 'utf8mb4';
$db_DSN = "mysql:host=$db_HOST;dbname=$db_NAME;charset=$db_CHR";
$pdoOPT = [ PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, PDO::ATTR_EMULATE_PREPARES => false ];
// connect
try { $pdo = new PDO($db_DSN, $db_USER, $db_PASS, $pdoOPT); }
catch (\PDOException $e) { throw new \PDOException($e->getMessage(),(int)$e->getCode()); }
// query
$stmt = $pdo->query('SELECT * FROM table');
// push query result into array
$result = array();
while ($row = $stmt->fetch()) { array_push($result, $row); }
// step through results
foreach ($result as $col) {
print("Name: ".$col['name']);
print("Score: ".$col['score']);
}
Latency testing in Perth, WA
Lag, Jitter, generally shitty internet. Troubleshooting a good connection can be (not) fun, especially when most ISP/RSP’s are based on the other side of the country.
Here’s a list of local addresses that should give you a sub <10ms ping with a half-decent NBN connection. If your ping is higher than that, then you might want to investigate.
- 1.1.1.1 and 1.0.0.1 (Cloudflare WAIX Peer)
- osy-core.dctwo.com.au (Osborne Park DC)
- qv1.com.au (Perth DC)
- speedtest-pth.vocus.net
- per1.speedtest.telstra.net
- speedtest.wa.ix.asn.au
- rockingham.wa.speedtest.optusnet.com.au
- sp02.au.superloop.com
Ping Pong!
Here is a convenient Powershell one-liner to test them all.
Test-Connection -ComputerName 1.1.1.1,1.0.0.1,osy-core.dctwo.com.au,qv1.com.au,speedtest-pth.vocus.net,per1.speedtest.telstra.net,speedtest.wa.ix.asn.au,rockingham.wa.speedtest.optusnet.com.au,sp02.au.superloop.com -Count 1Happy pinging!
The Headless Raspberry Pi
Starting a new IoT project?
Want to build your own discrete Linux server?
A “Headless” device basically means a device without a display. If you have a project that doesn’t really need an HDMI Display, Keyboard or Mouse – this is a lightweight way to get started with just a bare-bones Raspberry Pi and MicroSD card.
The instructions below will guide you to setup a RaspberryPi 2/3 or ZeroW without any peripherals and with remote access.
Get Ready
Download Raspbian OS
Get the image suitable for your needs. (With or without Desktop)https://www.raspberrypi.org/downloads/raspbian/
https://www.raspberrypi.org/software/operating-systems/
While that’s happening lets prep your PC…
Install a good Text Editor
Further on we will need to edit some files. To make sure they are handled properly – use a good text editor like Atom or Notepad++.
Windows 10 – Linux Subsystem
The Raspbian (Linux) OS uses a different file system to Windows, to edit files on the SD Card using your windows machine, you’ll need to install the Linux Subsystem for Windows.
SSH Client
When setup we will connect to the Pi using SSH (Secure SHell), if you installed the Linux Subsystem above, you can use the ‘ssh’ command (e.g. ‘ssh user@raspberrypi.lan’) – otherwise Putty is the standard.
For transferring bulk files, I recommend WinSCP.
WebGL + Virtual Reality
My experiments with VR, three.js and Google Cardboard glasses.
Speed Tester
As I go about my daily grind, I often need to test LAN and WAN connections for performance. One of the go-to sites for speed testing WAN connections to the internet is SpeedTest.net, another that uses only HTML5 is SpeedOf.me.
Of course these websites are only really effective at testing your internet connection speed.
I needed a tool that could quickly assess LAN and Wireless AP connections.
Now for the serious troubleshooter, there’s tools like iPerf which are excellent, but this still requires setting up two endpoints and installing software on clients.
What I really wanted was just a quick metric, something accessible from any modern browser enabled device, and so I got to making my own.
Download:
This is a simple html website that leverages Javascript to fetch 4 asynchronous blobs of data and aggregates the time it takes to download giving you a quick metric on your internet connection speed.
To pretty it up I leveraged the jQuery library and this sweet little progressbar script as well.
The blobs it fetches are truncated 10MB chunks of gzip data – I did this as a quick way to make the files relatively incompressible, to negate the webserver gzipping the HTTP stream and providing a false result.
Usage: To use it just download the zip file (above) and extract it to a (local?) webserver with a nice fast connection. If you’re really keen you’ll want to look at trunking some EtherChannel/LACP links together to give it the best possible performance.