Skip to main content

Another Face Mess

· 4 min read

Experimenting with webcam Kaleidoscopes.

This project was born from a desire to slowly build up a digital hall of mirrors. I created a digital kaleildoscope installation for the Laurel and Hardy Museum visitors to have fun with.

This joins LAMO, the Gill Witch and the Gallery Box projects in my growing hall of mirrors.

  • Made with a second hand TVs, Raspberry Pi computers and webcams.
  • I worked hard to make each one simple "plugin and play" system so no technical expertese is needed by anyone to turn on and off.

Tweet thread with initial code experiments:

Loading tweet...

Gallery:

From the back you can see the telly and Raspberry Pi

Home Testing

Child Testing (most nerve-wracking part!!!)

Signage and Donations tin

Wheeling to the museum

In situ at the Laurel and Hardy Museum, being used by Owner Mark

Chin Sea Urchin

Technical Notes:​

  • Webcam + Raspberry Pi + old TV.
  • Created with web tecnologies - Javascript, HTML canvas and CSS.
  • I used the ReactJS framework with the create-react-app starter, but that's just because it's what I know best - would be fine with plain Javascript, I'm sure.
  • I used Electron to bundle the website files into a standalone application to avoid using the browser directly -> so update notices etc won't pop up, and to make it easier to launch full screen at startup.
    • With this adjustment to the package.json before building the app: "homepage": "./",
    • Move the whole build folder to the electron folder.
      • Change this in the electron main.js file.
        • mainWindow.loadFile('./build/index.html')
    • Hide the cursor in the app that is to be launched.
      • cursor = "none";
      • or if you forget to do that Chris, because you always do, add this to the build index.html file just before the body closing tag.
        • <script>function hideCursor(){ document.body.style.cursor = "none"; } setTimeout(hideCursor,1000); </script>
  • I added a on/off switch to make startup and shut down as easy as possible - for that I followed another wonderful tutorial here: https://howchoo.com/g/mwnlytk3zmm/how-to-add-a-power-button-to-your-raspberry-pi

Electron Instuctions​

Edited instructions from: https://lucas-vogel.de/blog/perfect-electron/

Download and install node​

What you want is a node version for ARMv7, downloaded from the node website.

Link to Node download page

If you are unsure, you can use the following command to find out what Version you need:

  • uname -m

Then, unpack ist with the following command:

  • tar -xzf node-....tar.gz
  • I had to use unzip the xz file with:
    • tar -xf archive.tar.xz

then, to install it, copy it into your home folder:

  • cd node-v.... (the unpacked node folder)
  • sudo cp -R * /usr/local/

now you should be able to check your node and npm version:

  • node -v npm -v

Setting up the electron app​

To get started, follow the electron quickstart guide.

Link to Electron Quickstart Guide

If you then have your Electron App, you have to modify some parts in your code to make it fullscreen. In your main Javascript File (where you specify

mainWindow = new BrowserWindow...)

you have to add these lines:

mainWindow = new BrowserWindow({ ... frame:false //Possibly not working in
  future versions, possibly not required }) mainWindow.setKiosk(true);
  //important

Make electron stable​

Add code to deal with restarting if your app crashes.

mainWindow.webContents.on("crashed", (e) => {
  app.relaunch();
  app.quit();
});

Create a build version of the React App​

  • IMPORTANT: With this adjustment to the package.json before building the app: "homepage": "./",
  • Once added the Electron quickstart folder move the whole build folder into the electron folder.
    • Change this in the electron main.js file.
      • mainWindow.loadFile('./build/index.html')

Make electron start automatically on boot​

Type this into the terminal

sudo nano /etc/xdg/lxsession/LXDE-pi/autostart

There, you can add the following code as a new line:

npm start --prefix path/to/your/directory

or if this does not work, you can use

node /home/pi/.../index.js &

Hide Raspberry Pi Mouse Cursor​

Edited from this source: https://2021.jackbarber.co.uk/blog/2017-02-16-hide-raspberry-pi-mouse-cursor-in-raspbian-kiosk

1. Use Terminal to install Unclutter

sudo apt-get install unclutter

2. Use Terminal to edit LXDE Autostart Script

sudo nano /etc/xdg/lxsession/LXDE-pi/autostart

3. Turn the Cursor Off by adding this line

@unclutter -idle 0

Press ctrl+X and then hit Y to save your changes and enter and your are golden!