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.

Interacting with the control panel 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.