$put_perv_real = "/home/www/dvakompa-ru/dopol/"; ?>
Для создания своего проекта с использованием фреймворка WebIOPi необходимо реализовать следующие его компоненты:
* веб-интерфейс — HTML-страница с использованием библиотеки webiopi.js;
* серверный скрипт на языке Python, запускаемый при старте webiopi для реализации функционала веб-интерфейса;
* файл конфигурации с установкой начальных значений портов.
Подготовим проект управления из веб-интерфейса камерой, укрепленной на подвесе, снабженном сервоприводами. Из веб-интерфейса можно будет поворачивать камеру, а также делать снимки и отправлять их на электронную почту.
Для проекта понадобятся следующие детали:
* подвес для камеры (рис. 6.16);
* сервоприводы TG9 (рис. 6.17) — 2 шт.;
* дополнительный блок питания 5 В;
* камера Raspberry Camera Board (см. рис. 3.35).
Для управления сервоприводами задействуем два вывода GPIO (GPIO23 и GPIO24). Электрическая схема проекта представлена на рис. 6.18.
Сначала настроим в файле конфигурации config, который находится в папке /etc/webiopi/, необходимые параметры: путь к домашней папке и путь к скрипту, выполняемому при запуске webiopi:
doc-root = /home/pi/webiopi/examples/servo-camera script = /home/pi/webiopi/examples/servo-camera/camera.py
В разд. 4.11.2 мы уже рассматривали передачу потокового видео с камеры Raspberry Pi Camera Board. Немного изменим скрипт запуска камеры (файл stream_start.sh) — картинку, получаемую с камеры, лучше сохранять в папке нашей домашней страницы. Содержимое измененного файла stream_start.sh представлено в листинге 6.9.
Листинг 6.9. Файл stream_start.sh
#!/bin/bash
if [ -d /tmp/stream ];then
echo "/tmp/stream already created"
else
mkdir /tmp/stream
fi
if [ -f /tmp/stream/pic.jpg ];then
echo "raspistill already running"
else
raspistill -w 320 -h 240 -q 5 -o /home/pi/webiopi/examples/servocamera/pic.jpg -tl 100 -t 9999999&
fi
mjpg_streamer -i "input_file.so -f /home/pi/webiopi/examples/servo-camera"
-o "output_http.so -w /home/pi/webiopi/examples/servo-camera"
Напишем на Python серверный скрипт camera.py, который будет запускаться при запуске webiopi. В скрипте пропишем назначение контактов, макросы и выполним начальный запуск камеры потокового видео. Содержимое скрипта camera.py представлено в листинге 6.10.
Управляющие контакты сервоприводов подключены к выводам 16 (GPIO23) и 18 (GPIO24) GPIO. Плюс еще одна дополнительная опция — мигание светодиода, подключенного к выводу 22 (GPIO25).
Листинг 6.10. Серверный скрипт camera.py
Веб-интерфейс у нас будет достаточно простой: два слайдера управления подвесом
камеры, кнопка для отправки фото на email и картинка изображения с камеры
(рис. 6.19). При изменении позиции слайдера подвес поворачивается в направлении
вверх-вниз и влево-вправо. Изображение с камеры постоянно обновляется запуском
функции set_Timeout(). Необходимо также запретить кэширование страницы. Код
HTML-страницы camera.html представлен в листинге 6.11.
Листинг 6.11. Код HTML-страницы camera.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv = "cache-control" content = "max-age=0">
<meta http-equiv = "cache-control" content = "no-cache">
<meta http-equiv = "expires" content = "0">
<meta http-equiv = "expires" content = "Tue, 01 Jan 1970 1:00:00 GMT">
<meta http-equiv = "pragma" content = "no-cache">
<meta name="viewport" content = "height = device-height, width = 420, user-scalable = no" />
<title>WebIOPi camera</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript">
function init() { var button;
button = webiopi().createButton("photo", "big photo", photo);
$("#cam").append(button);
button = webiopi().createAngleSlider(23, 30);
$("#updown").append(button);
button = webiopi().createAngleSlider(24, 0);
$("#leftright").append(button); }
function photo() {
$("#ph").html('');
$("#ph").html('<img src="pic.jpg">');
}
function get_img()
{
document.getElementById("img1").src="http://192.168.0.101:8080/pic.jpg";
}
webiopi().ready(init);
</script>
<style type="text/css">
button {
margin: 5px 5px 5px 5px;
width: 150px;
height: 50px;
font-size: 12pt;
font-weight: bold;
color: black;
}
</style>
</head>
<body onload='setInterval("get_img();",1000);'>
<div style="float:left">
<div id="content" align="center"> <div id="cam"></div>
<div id="vid"><img id="img1" width="320" height="240" src="http://192.168.0.101:8080/pic.jpg"></div>
<div>down<span id="updown"></span>up</div>
</div>
</div>
<div style="float:right" id="ph"></div> </body>
</html>
Примечание
Коды листингов этого проекта вы найдете в папке glava_06\servo-camera сопровождающего книгу электронного архива (см. приложение).