| Goal | Make a simple website to start and stop a Handy using the Javascript Handy SDK (https://sweettech.notion.site/Handy-SDK-9521165a0d2749dca8a1ee17bcf206fb) and the Handy Universal UI (https://sweettech.notion.site/Handy-Universal-UI-592e2476f7414a6da26d9c4ee903dfae) |
|---|---|
| Completion time | 15min |
| Skills needed | HTML + Javascript skills |
This tutorial builds on the concepts introduced in:
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>
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
<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”; 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%;
}