DeviceRadio’s Einride tablet UI

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.

Context and scope

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.

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 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 visibility and context.

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 troubleshooting if there were connection issues or other problems.

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.

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. It would also prevent using the flat surface of the tablet as the table, I feel.

 

You may also like