SwiftUI meets websockets to control an RC boat

Following up on my recent post of creating a REST API for controlling an RC boat, it became clear that a more flexible setup is needed to have a joyful experience.

After playing around with the previous implementation, where navigation using buttons still felt very clumpsy, I thought that using joysticks could be a great improvement. After looking into some video games where boats were involved, I decided using two joysticks for controlling the two separate axis.

As I wanted to drive my boat outdoors at a lake as well, I started looking into a native iOS implementation which I can use on my iPad.

Used hardware:

• Raspberry Pi Zero WH
• SanDisk Extreme micro SDHC A1 UHS-I U3 or similar
• M-F Jumper cables
• Tamiya 300054393 Electric Motor Type 380
• Hobby Wing Quick Run WP 1625 Brushed including manual
• Carson 500607017 Charger for Glow Plug, 230 V
• Carson 500502015 CS-3 Servo
• iOS 14 phone / tablet

Used software:

• Raspian GNU/Linux 9 (stretch) Lite on the Pi
• PiCruise backend
• Node.js
• pi-blaster.js
• ws
• PiCruise iOS frontend
• Xcode 12.3

Software configuration

Install the latest node.js environment with npm for package management on the Pi:

sudo apt-get install nodejs npm

Install some javascript dependencies which we need for the project later in the tutorial:

npm install http pi-blaster.js ws

Verify that pi-blaster is running correctly after start-up:

sudo systemctl status pi-blaster

If pi-blaster is not running on your Raspberry yet, find out here how to set it up.

You can find a very simple backend to control your boat here. Clone it on to your Raspberry:

git clone https://github.com/michaelmuenzer/picruise.git

After having set up everything correctly you can start the server on the Raspberry by running:

node app.js

You can now access the websocket on ws://raspberry.local:3002

An easy mechanism to find out if your connection is working is http://www.websocket.org/echo.html.

Using this web-page, you can send messages like:

start
stop
angle: -1
angle: 1
speed: -1
speed: 1

On the server-side, normalized values between -1 and 1 will be translated to a pwm signal.

You will also see logs on the web-page:

SENT: angle:1
RECEIVED: {"msg":{"connectionId":1610807678299}}

You can also look at logs on the raspberry by running tail -F PiCruise.log:

Websocket received a message: angle:1 (string)
normalized angle: 1
move angle: 45
angle pwm:0.15000000000000002

The next step is connecting to the server with your iOS application. Clone the following sample project built with TCA and SwiftUI on to your Mac:

git clone https://github.com/michaelmuenzer/picruise-ios.git

For deploying the app on to your phone you need to set up an Apple developer account. If you only use the app for personal use, this is free and you can follow this tutorial.

Within the cloned project I was extracting the DEVELOPMENT_TEAM for signing into a separate Config.xcconfig. Follow this tutorial in order to do the same.

If you have set-up everything correctly you should have the app running and look like this:

I hope you enjoyed this tutorial and have some fun driving your boat 🛥️💯🤩