Наш интерфейс, впрочем, будет попроще - сделаем страницу с всего двумя кнопками 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() {
httpGetAsync(window.location.href + "?BtnLeftUp", null);
}
function mouseDownR() {
httpGetAsync(window.location.href + "?BtnRightDown", null);
}
function mouseUpR() {
httpGetAsync(window.location.href + "?BtnRightUp", null);
}
</script>
</body>
</html>
Разберем код подробнее. Как можно видеть, мы создали 2 кнопки с идентификаторами btn_left и btn_right. Далее мы добавили к каждой кнопке обработчики событий onmousedown, onmouseup и onmouseleave (на смартфоне нет мыши, но события нажатия и отпускания пальца называются также). Они будут вызываться когда пользователь нажимает или отпускает кнопку. Внутри каждого события вызывается соответствующая функция для левой (Left) или правой (Right) кнопки, например mouseDownL(). Наша задача - уведомить сервер, посылкой ему соответствующего GET-запроса. Для этого написана функция httpGetAsync. В обработчике каждой из кнопок мы вызываем разные функции, например BtnRightDown, BtnLeftDown. Переменная window.location.href хранит адрес сервера, таким образом при нажатии кнопки LEFT на сервер отправляется запрос http://192.168.0.124:8000/?BtnLeftDown.
На этом клиентская часть закончена. Сохраним этот файл как index.html. Сам сервер тоже необходимо дописать, чтобы он корректно обрабатывал новые запросы. Код сервера показан ниже, как можно видеть, изменения в нем минимальны.
from BaseHTTPServer import BaseHTTPRequestHandler, HTTPServer
class Server(BaseHTTPRequestHandler):
def do_GET(self):
print self.path
if "?BtnLeftDown" in self.path:
self.send_response(200)
self.send_header('Content-type', 'text/plain')
self.end_headers()
self.wfile.write("ok left start")
return
if "?BtnLeftUp" in self.path:
self.send_response(200)
self.send_header('Content-type', 'text/plain')
self.end_headers()
self.wfile.write("ok left end")
return
if "?BtnRightDown" in self.path:
self.send_response(200)
self.send_header('Content-type', 'text/plain')
self.end_headers()
self.wfile.write("ok right start")
return
if "?BtnRightUp" in self.path:
self.send_response(200)
self.send_header('Content-type', 'text/plain')
self.end_headers()
self.wfile.write("ok right end")
return
with open('index.html', 'r') as htmlfile:
self.send_response(200)
self.send_header('Content-type', 'text/html')
self.end_headers()
data = htmlfile.read()
self.wfile.write(data)
if __name__ == "__main__":
# Start server
server_address = ('', 8000)
httpd = HTTPServer(server_address, Server)
print 'Starting httpd...'
try:
httpd.serve_forever()
except:
pass
Мы проверяем, есть ли в запросе нужная строка (например BtnLeftDown), и если есть, то выполняем соответствующее действие. В данном случае мы отправляем клиенту подтверждение вида “ok left start”, это удобно для отладки. В реальности нужно будет добавить дополнительный код, например для активации соответствующих портов ввода-вывода.
Теперь все готово, сохраняем наш файл и запускаем сервер. Кстати, для тестирования можно использовать тот же компьютер, используя ip-адрес http://127.0.0.1:8000. Запускаем браузер, нажимаем кнопки, и в окне отладки браузера видим ответы сервера.
Теперь мы можем управлять чем угодно с помощью длинных или коротких нажатий кнопок. Можно кстати, приобрести на ebay специальную платформу с гусеницами и моторами, и управлять ею удаленно.