Проект управления веб-камерой на сервоприводах


Предыдущая | Следующая

Для создания своего проекта с использованием фреймворка 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 сопровождаю­щего книгу электронного архива (см. приложение).