[TSTIL] easee RemoteControl

[ This is a part of "The Software That I Love", a series of posts about Software that I created or had a small part in ]

easee RemoteControl

The easee wizard engine was quite cool, and we used it to structure the code for our online eye exam. It executes whatever you see on your computer screen. It was not all good though. At some point in the exam your smartphone is paired using a websocket. The code for sending the phone what to display was a bit ugly. I had an inkling that there was a cleaner solution.

We ended up with a special Vue component called "RemoteControl". This component has three props:
- remoteComponent
- remoteProps
- callback

When you use the RemoteControl component, a couple of store methods are called. These will serialize the remoteComponent, remoteProps and the callback and send them over the websocket. At the other side the specified component is displayed with the props. A special prop for the callback function is created too, so the user input from the remote control can be sent back to the main computer.

As the remoteProps and remoteComponent are reactive, the phone screen updates whenever the main computer decides to update the remote. It's magic.

I can't share the code here as it's a bit entangled into our codebase, but the idea is so simple that you can probably create it within a day. There's a couple of caveats:
- the remote checks if it can find the remote component, if not, throw an error
- there should be only one RemoteControl active at the same time
- as network messages can be delayed, add an envelope with a random ID to see if the answer is actually sent to the current instance of the RemoteControl. If not, it might be from a previous version and you should discard it.

As with the wizard engine, having the right abstraction layer can make the codebase a joy to work with. It certainly does in this case!




Comments

Popular posts from this blog

"Security Is Our Top Priority" is BS

AI programming tools should be added to the Joel Test

The long long tail of AI applications