An HTML template is a page stored in a templates directory and rendered by a web request handler. It combines ordinary markup with placeholders such as {{ stamp }} and controls that submit actions to the application. section 6.3.3 section 6.4.1
A robot-control template can:
- Display a timestamp supplied by the handler. section 6.3.3
- Submit movement commands with POST forms and button actions. section 6.3.3
- Group forward, backward, turning, spinning, and no-operation controls into a touch-friendly layout. section 6.4.1
- Use HTML5-named character references and CSS to provide graphical buttons with consistent sizing and spacing. section 6.4.1
Robot movement template
A compact template places two POST forms on the page: one submits to forward and the other to backward. The handler renders forward.html, dispatches the requested motor function, and redirects to the home page after the action. section 6.3.3
Listing 6.6 full.html: HTML user interface that supports all robot movement actions
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Robot Web</title>
<meta name="viewport" content="width=device-width">
<link rel="icon" href="data:,">
<style>
body, a {
font-family: Verdana, Arial, sans-serif;
text-align: center;
text-decoration: none;
}
button {
font-size: 300%;
margin: 0px 10px;
height: 60px;
width: 60px;
}
</style>
</head>
<body>
<h1><a href='/'>Robot Web</a></h1>
{{ stamp }}<br><br>
<form method="post">
<button formaction="forward">▴</button>
<button formaction="backward">▾</button>
<br><br>
<button formaction="left">◂</button>
<button formaction="right">▸</button>
<br><br>
<button formaction="spin_left">↺</button>
<button formaction="spin_right">↻</button>
<br><br>
<button formaction="noop">X</button>
</form>
</body>
</html>
Inspect the complete full.html interface, including the timestamp placeholder, movement buttons, HTML5 symbols, and responsive styling. section 6.4.1
