2017-07-09

DeviceRadio's Einride tablet UI

01 Where the user remote controls the truck. You can see the tablets on either side of the steering wheel

DeviceRadio was tasked with creating a demo which includes tablet UI where a user remote controls a truck for Einride. I helped create the UI and some UX of the tablet experience.

Details of my involvement

Einride is working towards an autonomous electric transportation system. DeviceRadio helped create a prototype which includes a desktop setup and a tinier version of the truck that was to be controlled. It was a means to neatly show off the capabilities of remotely driving as a proof-of-concept from Einride during an exhibition event.

03 Here is what the setup looked like before being moved to the exhibition event.

04 05 Shown here are the tablets loaded in their initial state.

02 06 On the left we see Martin setting the tiny truck down on the road. On the right we can see some of the innards required for it to be remotely controlled.

In terms of what I worked with, it was clear I would only be using html and jQuery/js, though I made the call to use and manipulate SVG, and later added Chart.js graphs as well.

There are several ways to animate SVG, and maybe some easier methods if you involve third-party libraries. But because of the nature of the project and that the UI is on tablets, I opted to copy the SVG code directly into the html to manipulate using javascript. Also because of how important visibility is in the UI, the highest contrast of black and white were used. Buttons which were active had colors which also considered the visibility and context.

07 An example showing the activated button statuses.

As I wanted to avoid having to update two different versions at once, I also chose to put both screens into one html file and set a variable which enables you to set which screen to show. This also made it easier to make quick tests and troubleshoot if there were connection issues or other issues.

08 09 The two different screens side-by-side.

What was fun to work with was some of the logic that should function in the interface. For instance, toggling buttons should first confirm data from the server before being enabled. The left and right turning signals also are coupled together so that you can't have both active. The flood/full lights do not toggle on if the normal lights aren't already toggled, but can be pressed and held for use as a light horn. Also of note are that the pitch and roll of the truck were CSS transformations.

Some extra notes

The data was sent through to RabbitMQ, but there's a lot more magic on DeviceRadio's side which just makes all this work. On my end it was only a matter of sending JSON data.

10 You even see the JSON data being sent over the console. Pretty neat!

Some issues that we couldn't account for was that the demo was under a white tent, which affected the visibility of the tablet UI as they were flush against a flat table. I think in future iterations angling the tablets would help avoid this situation more and give more visibility in general. Perhaps the ability to tilt them by mechanical means would be ideal to prevent situations where (for example) a remote driver will experience odd reflections or light. It would also prevent using the flat surface of the tablet as part of the table, but that may be part of the original idea and perhaps must also be considered.