Talking House

3 min read

Control panel with buttons Exhibition in Glarus, Switzerland

Talking House by Lucy Li is a project that addresses the question of how to experience tourist sites on an auditory rather than purely visual level. An interactive object, that is the focal point of an informative spatial installation, was designed. After putting on the headphones, the user selects a location by turning a dial and then presses one of two buttons to select an audio track from the present or the past. My task was to synchronize the physical input buttons with the content displayed on the audiovisual interface.

Push buttons

Electrics

The interface consisted of a 6-position rotary switch and two spring loaded push-buttons that also featured a built in LED. I designed a simple router board to avoid a cable mess. It connects all inputs and outputs with resistors, transistors and the PINS. The board was mounted inside the panel and was connected to the RPI and +12V DC to power the two LEDs inside the switches.

Router PCB

The Code

A Node.js script read the button states and sent out the data over a websocket. The visual interface was rendered by a React App that received the data over the websocket. The app, which ran inside Electron, was then able to display the appropriate contents.

// Node.js script running on a Raspberrypi
// Require modules
const io = require("socket.io")(PORT);
const Gpio = require('pigpio').Gpio;

// Defining input pins
const switch = new Gpio(12, {
  mode: Gpio.INPUT,
  pullUpDown: Gpio.PUD_UP,
  alert: true
});

// Debounce button
switch.glitchFilter(1000);

// Handle button press
io.on("connection", async socket => {
  switch.on('alert', (level, tick) => {
    if (level === 0) {
    socket.emit('switch');
    }
  })
  //...
})

process.on('SIGINT', function() {
  process.exit();
})

// React App running inside Electron
import React, { Component } from 'react';
import io from 'socket.io-client';

import YourComponent from './components/YourComponent';

// Connect to socket
const socket = io("raspberrypi.local:8080")

// Set state
class App extends Component {
  constructor(props) {
    super(props);
	this.state = {
      globalindex: 0
    }
  }
	
  // Set state on button pressed
  componentDidMount() {
    socket.on('switch', () =>{
      this.setState({globalindex: 1});
	})
  }

   // Render component
  render () {
    return(
      <div className = "App">
        <YourComponent index={this.state.globalindex}/>
      </div>
    )
  }
};

export default App;

Interface displaying information Rendered interface

Credits

The Project “Talking House” was designed by Lucy Li. If you want to learn more, please visit her website. Learn how to run a React App inside Electron here.

All Detour Posts