DEV Community: Neil Wilkinson

SimHub without the wires

Neil Wilkinson — Sat, 20 Feb 2021 08:17:45 +0000

This is a guide to creating sim racing displays that work over Bluetooth, using SimHub's Custom Serial Device plugin and an ESP32. Note that to follow this you'll need to have some experience with coding on Arduino-like boards. And to use it as a base to create your own device, you'll need to have some experience of electronics.

You'll also need:

An ESP32 device, ideally a Lolin D32
Windows
Bluetooth support in your PC
SimHub
Arduino IDE

SimHub is an awesome piece of software for Sim Racing on PC - kudos to SHWotever for creating and updating it.

I made these displays for the Thrustmaster Open Wheel, named Tow, that use the telemetry exposed by SimHub:

SimHub does not directly support Bluetooth, but using the Custom Serial Device plugin you can connect to bluetooth serial ports just like you do a standard COM port. You then make your ESP32 read the data coming over the COM port from SimHub, and control your displays, LEDs etc.

Here we'll walk through making an ESP32 (Lolin D32 in this case) connect to SimHub over bluetooth and receive telemetry data - Speed and Rpm.

First enable the Custom serial devices plugin as described in the SimHub Wiki - https://github.com/SHWotever/SimHub/wiki/Custom-serial-devices#enabling-the-plugin, stop at the Configuration step for this guide.

Upload this code to your ESP32 - I use Arduino IDE - so that it reads data from the BT COM port, the data will come from SimHub and we'll configure that in a bit:

#include "BluetoothSerial.h"

#if !defined(CONFIG_BT_ENABLED) || !defined(CONFIG_BLUEDROID_ENABLED)
#error Bluetooth is not enabled! Please run `make menuconfig` to and enable it
#endif

#define BUF_SIZE 64

char simHubMessageBuf[BUF_SIZE];
BluetoothSerial btSerial;

int spd;
int revs;

void setup() {
  Serial.begin(115200);
  Serial.println("setup");

  memset(simHubMessageBuf, 0x0, BUF_SIZE);
  btSerial.begin("BT-DASH");
}

void loop() {
  if (btSerial.available() > 0) {
    btSerial.readBytesUntil('{', simHubMessageBuf, BUF_SIZE);
    int readCount = btSerial.readBytesUntil('}', simHubMessageBuf, BUF_SIZE);
    simHubMessageBuf[min(readCount, BUF_SIZE - 1)] = 0x0;
    processMessage();
    memset(simHubMessageBuf, 0x0, BUF_SIZE);
  }
}

void processMessage() {
  char msgType = simHubMessageBuf[0];

  switch (msgType) {
    case 'R':
      sscanf(&simHubMessageBuf[1], "%d", &revs);
      break;
    case 'S':
      sscanf(&simHubMessageBuf[1], "%d", &spd);
      break;
  }

  Serial.print("Revs: ");
  Serial.print(revs);
  Serial.print(", Speed: ");
  Serial.println(spd);
}

The code looks for two pieces of data, the Revs percent and the Speed in KMH. It reads both as integers, so we'll end up with whole numbers.

Once this code is uploaded to your ESP32 you can pair it over Bluetooth with Windows. But first, open Windows Device Manager and expand the Ports (COM & LPT) section. Make a quick note of the port numbers of any existing entries named Standard Serial over Bluetooth link - there may not be any, that's fine.

Now pair the device in Windows' Bluetooth settings, it'll appear as BT-DASH, you can change this in the above code if you want a different name.

Once paired go back to Device Manager and you should have two new Standard Serial over Bluetooth link entries in the Ports (COM & LPT) section. Make a note of the port number of the higher numbered one.

In SimHub, go to the Custom serial devices section, click Add new serial device, and then expand the entry that appears.

In the Serial port drop down, choose the serial port you noted above. Tick the Automatic reconnect box.

Now we need to add the Speed and Revs messages in the Update messages section, click Add new message so that you have two empty Update messages and then edit them with these:

'{R'+isnull([CarSettings_CurrentDisplayedRPMPercent], '0')+'}'

'{S'+isnull([SpeedKmh], '0')+'}'

Change the frequency to Changes only for both - using the dropdown next to the EDIT button. This optimizes the data that's sent over the port a little.

You should end up with this:

Connect your ESP32 to your PC so that is has power, and click the toggle button to enable the custom serial device entry, and it should connect to your ESP32.

Now should be able to monitor the ESP32's serial port (the USB one, not the Bluetooth one) in the Arduino IDE and see the messages coming from SimHub when racing or playing a replay - there's buttons at the top to record and playback SimHub telemetry:

Ensure you have the correct baud rate selected - 115200 - in the serial monitor, and you should see data being logged to the USB serial port when the revs and speed change:

You can now use the code above as a base to control displays, LEDs etc. To see what other data you can read in SimHub, click EDIT on an Update message and click Insert Property. You'll see a list that can be searched:

Please leave any questions in the comments below. I'll either answer them or update the article to include the answer or clarification.

Thanks for reading.

Flutter Crash Course - Step 2

Neil Wilkinson — Fri, 19 Feb 2021 16:00:55 +0000

Part one showed us how to create a static UI. Now we'll make it dynamic.

Given our previous example, let's say we want the button to be disabled on startup because our app needs to talk to an API before enabling it. To achieve this we'll need a few steps:

1/ The enabled state of a Button Widget is determined by whether or not there's an action set on the onPressed property. At present there is one set:

            RaisedButton(
              child: Text("A Button"),
              onPressed: () => print("Pressed"),
            ),

Let's change that:

            RaisedButton(
              child: Text("A Button"),
              onPressed: buttonEnabled ? () => print("Pressed") : null,
            ),

buttonEnabled is a variable that currently doesn't exist. So how do we pass this in? Via a Builder class (not a type - just a concept), in this case a FutureBuilder.

2/ We wrap the RaisedButton inside this other FutureBuilder Widget.

            FutureBuilder<bool>(
              future: null,
              builder: (context, AsyncSnapshot<bool> snapshot) {
                final buttonEnabled = snapshot.hasData && snapshot.data;
                return RaisedButton(
                  child: Text("A Button"),
                  onPressed: buttonEnabled ? () => print("Pressed") : null,
                );
              }
            ),

We don't have a Future<bool> yet, hence it's been left blank future: null, but let's explain the rest. To build the UI, the FutureBuilder's builder function will be called (at least) once before the future has completed, then once it has completed. Whether it's completed and, if it has, its result will be delivered in the snapshot. We enable or disable the button based on this snapshot.

A good way of thinking of a Builder is:

I need a small piece of logic to determine which Widget to show, or what property to set on a Widget. So I need a Builder to put the condition in.

Or even simpler:

I need an if statement, so I need a Builder.

Now we'll create a Future that the FutureBuilder can listen to.

3/ To do this, we'll need to change our Widget to be one that has state. Currently, it's a StatelessWidget, which is for Widgets that don't need to know anything about state. As we're introducing a Future, and we only want that Future to execute once, we'll need the Widget to have state.

Change MyApp to extend StatefulWidget rather than StatelessWidget via Android Studio's alt+enter:

The eagle-eyed may notice that, in terms of text, nothing much changed. Our build function moved to a new inner class, and MyApp now just creates an instance of this inner class.

4/ So now let's add the Future as a property of _MyAppState and create it in the _MyAppState's initState method:

class _MyAppState extends State<MyApp> {
  Future<bool> future;

  @override
  void initState() {
    super.initState();
    future = Future.delayed(Duration(seconds: 2), () => true);
  }

  @override
  Widget build(BuildContext context) {

5/ Now hook it up to the FutureBuilder:

              FutureBuilder<bool>(
                future: future,
                builder: (context, AsyncSnapshot<bool> snapshot) {

Run the app:

Other Builders

Just as frequently used as FutureBuilder, there is StreamBuilder (actually far more often used in my case). This is very similar with the exception that it listens to a stream of data that can change multiple times. E.g. visibility of a progress indicator, or the contents of a list.

A good practice is to keep all of the state of your screen in a data class, and have your business logic update this state and send out the updates via a stream. Your UI (Widgets) can listen to this using a StreamBuilder, and update the UI to reflect whatever is in this state.

In this example we'll adapt Android Studio's default Flutter project to use a stream and perform asynchronous code whenever the button is tapped, like this:

Let's define a simple class to hold our state:

class MyHomePageState {
  final int counter;
  final bool showSpinner;

  MyHomePageState(this.counter, this.showSpinner);
}

Now we need a plain Dart class (i.e. not Flutter code) to perform business logic:

class Logic {
  // private stream controller that will manage our stream
  final _streamController = StreamController<MyHomePageState>();

  // expose the stream publicly
  Stream<MyHomePageState> get homePageState => _streamController.stream;

  MyHomePageState _currentState;

  Logic() {
    _updateState(MyHomePageState(0, false));
  }

  // update the state and broadcast it via the stream controller
  void _updateState(MyHomePageState newState) {
    _currentState = newState;
    _streamController.sink.add(_currentState);
  }

  // increment the counter after waiting 1 second, to simulate a network call for example.
  Future<void> incrementCounter() async {
    _updateState(MyHomePageState(_currentState.counter, true));
    await Future.delayed(Duration(seconds: 1));
    _updateState(MyHomePageState(_currentState.counter + 1, false));
  }
}

The UI will now play dumb and simply use this Logic class by sending events to it (button taps), and listening for what to display (the contents of the Stream).

class MyHomePage extends StatelessWidget {
  final Logic logic = Logic();

  Widget build(BuildContext context) {
    return StreamBuilder<MyHomePageState>(
      stream: logic.homePageState,
      builder: (context, AsyncSnapshot<MyHomePageState> snapshot) {
        print("snapshot: ${snapshot?.data ?? "null"} ");
        final asyncInProgress = snapshot.data?.showSpinner ?? true;
        return Scaffold(
          appBar: AppBar(title: Text("Stream Example")),
          body: Center(
            child: asyncInProgress
                ? CircularProgressIndicator()
                : Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text('You have pushed the button this many times:'),
                      Text(
                        '${snapshot.data.counter}',
                        style: Theme.of(context).textTheme.headline4,
                      ),
                    ],
                  ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: asyncInProgress ? null : logic.incrementCounter,
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
        );
      },
    );
  }
}

Note that the floating action button is only enabled when the progress spinner isn't shown, so it can't be pressed again until the asynchronous operation is complete.

The final part of this short series will cover navigation, which is a simple pattern that can be applied across any app.

Flutter Crash Course - Step 1

Neil Wilkinson — Tue, 11 Feb 2020 21:00:49 +0000

On the face of it Flutter can appear incredibly simple based on most basic tutorials on the web. But going from a simple example to creating something that's actually useful is a steep learning curve. This is because a number of core concepts need to be understood to comprehend what's going on in a real world example. Trying to absorb them all in one go is too much for most people.

In this series I'll try to convey these concepts in concise examples that are small enough to absorb. Then it should just be a case of combining them in order to develop Flutter code that actually does something useful.

Step 1 - Widgets

There are countless guides around on Widgets, so I'll not delve too deeply here, and it's probably the easiest concept to pick up when learning to write Flutter apps.

Flutter apps consist of a tree of Widgets. Text, Images, Rows etc are all Widgets (i.e. they're descendents of the Widget class). This concept is nicely conveyed by the code indentation. Widgets have a child Widget, or many Widget children.

Take a look at this example and try and understand what UI will be shown before you scroll down and see the screenshot (btw, this is the full code for the app, not a snippet):

    import 'package:flutter/material.dart';

    void main() => runApp(MyApp());

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text("Example"),
            ),
            body: Center(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text("Some Text"),
                  ),
                  RaisedButton(
                    child: Text("A Button"),
                    onPressed: () => print("Pressed"),
                  ),
                ],
              ),
            ),
          ),
        );
      }
    }

Most of this example is self-explanatory, except maybe for:

MaterialApp.home & Scaffold.body, these can be thought of just like Widget.child.
mainAxisSize: MainAxisSize.min, this just means the Column uses the size of its children to determine its size - think wrap_content on Android).
Padding is done using a Widget named Padding. It wraps the Widget it is applying padding to.

There are numerous Widgets provided by the framework and, at present, you don't need to concern yourself with knowing any more than what's shown above. The important thing to grasp is the tree.

One concern that may arise when looking at the code is the heavy use of indentation. Trying to keep track of parentheses, commas, and semi-colons looks daunting. But this is mostly a non-issue, as the IDE (Android Studio in this case) does 90% of it for you via alt+enter:

After running this example and tweaking it to add more Widgets, or apply different styling, your next question might be: yes, but that's a static UI, how do I make a UI that changes? We'll cover that next in Part Two, using Builders.