С помощью портов ввода-вывода мы уже можем управлять внешними устройствами, например платой управления двигателем. Мы также можем запустить собственный сервер, как было показано выше. Добавим в наш сервер возможность реакции на нажатие и отпускание кнопок, это позволит использовать смартфон как полноценный пульт дистанционного управления. Такой интерфейс сейчас весьма популярен и используется, например, для управления мини-дронами.
Наш интерфейс, впрочем, будет попроще - сделаем страницу с всего двумя кнопками LEFT и RIGHT, при нажатии на которые на Raspberry Pi будут генерироваться соответствующие события.
Основная работа здесь будет в модификации файла index.html - в него мы добавим код, срабатывающий при нажатии и отпускании кнопок. Это позволит например, управлять радиоуправляемым танком, если поставить на него Raspberry Pi.
Для создания кнопки в HTML есть тег button, а для подписки на события нажатия и отпускания мы будем использовать Javascript, который поддерживается всеми браузерами.
Обновленный код index.html приведен ниже.
<html>
<head><title>Raspberry Pi server</title></head>
<body>
<button id="btn_left" type="button" style="height:60px;width:60px">Left</button>
<button id="btn_right" type="button" style="height:60px;width:60px">Right</button>
<script>
document.getElementById("btn_left").onmousedown = function() { mouseDownL() };
document.getElementById("btn_left").onmouseup = function() { mouseUpL() };
document.getElementById("btn_left").onmouseleave = function() { mouseUpL() };
document.getElementById("btn_right").onmousedown = function() { mouseDownR() };
document.getElementById("btn_right").onmouseup = function() { mouseUpR() };
document.getElementById("btn_right").onmouseleave = function() { mouseUpR() };
function httpGetAsync(theUrl, callback) {
console.log('httpGetAsync: ' + theUrl);
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
// callback(xmlHttp.responseText);
console.log(xmlHttp.responseText);
}
}
xmlHttp.open("GET", theUrl, true); // true for asynchronous
xmlHttp.send(null);
}
function mouseDownL() {
httpGetAsync(window.location.href + "?BtnLeftDown", null);
}
function mouseUpL() {
