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.

  • Made with a second hand TV, Raspberry Pi computer and webcam.
  • I worked hard to make it a simple "plugin and play" system so no technical expertese is needed by Mark and his team at the museum.

Tweet thread with initial code experiments:

Gallery:

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!

You know it's all over when the victorian lady jumps the stool.

© 2021 ArtFly