Goal Make a simple website to start and stop a Handy using the Javascript Handy SDK and the Handy Universal UI
Completion time 15min
Skills needed HTML + Javascript skills

https://youtu.be/HSmbr8RGdDg

This tutorial builds on the concepts introduced in:

Create a remote control app

Intro

This tutorial does the same as the Create a remote control app tutorial, but this time, we are using Handy Universal UI. In addition to simplifying the logic and the need to make the UI:

<aside> 💡 We are not focusing on edge cases and error handling in this tutorial.

</aside>

What will we make

A simple app that makes a Handy move up and down with a given speed using the Javascript Handy SDK and the Handy Universal UI. The end result will look like this:

End result of this tutorial

End result of this tutorial

Make the website

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Remote control app</title>
</head>

<body>
    <h3>Remote control app</h3>
    <div id="app-container">
        <input id="range-velocity" type="range" value="0" />
        <div class="button-container">
            <button id="start-button">Start</button>
            <button id="stop-button">Stop</button>
        </div>
    </div>
</body>

</html>

Style it

“Style it”; it looks like a controller from Windows 95. We leave it to you to add some artistic touch to your results.

#app-container {
    border: 1px solid black;
    border-radius: 5px;
    width: fit-content;
    padding: 22px;
    margin-bottom: 12px;
}

.button-container {
    width: 100%;
    text-align: center;
}

#range-velocity {
    margin-bottom: 20px;
    width: 100%;
}

Add event listeners