Продолжение «Умного дома» на базе Arduino.
Здравствуйте.
Для лучшего понимания, рекомендую почитать первую часть.
В этой части описывается плавное регулирование освещением (диммер, далее ШИМ), а так же сохранение значений в энергонезависимую память EEPROM.
Сохранение данных в память даёт возможность вернуть работу системы к прежнему состоянию после обесточивания.
Здесь можно посмотреть и потрогать в реальном времени.
Кнопки будут включать/отключать соответствующие пины, а двиганье ползунками будет увеличивать/уменьшать ШИМ на D5 и D6.
Внутри индикаторов расположены полукруглые кнопки с помощью которых можно мгновенно отключить и включить ШИМ. При включении вернётся то значение ШИМа, которое было при отключении.
Перейду сразу к делу...
Ардуино
Вначале обнулим EEPROM. Залейте этот скетч:
#include <EEPROM.h>
void setup()
{
// write a 0 to all 512 bytes of the EEPROM
for (int i = 0; i < 512; i++)
EEPROM.write(i, 0);
// turn the LED on when we're done
digitalWrite(13, HIGH);
}
void loop()
{
}
#include <EEPROM.h>
byte d2 = EEPROM.read(2); // флаги (состояние пинов) хранится в EEPROM, считываем их
byte d3 = EEPROM.read(3);
byte d4 = EEPROM.read(4);
int shim1 = EEPROM.read(5); // значение ШИМ хранится в EEPROM, считываем их
int shim2 = EEPROM.read(6);
byte d11 = EEPROM.read(11);
byte d12 = EEPROM.read(12);
byte d13 = EEPROM.read(13);
byte descript[5]; // массив
void setup()
{
Serial.begin(57600);
pinMode(2, OUTPUT);
pinMode(3, OUTPUT);
pinMode(4, OUTPUT);
pinMode(5, OUTPUT);
pinMode(6, OUTPUT);
pinMode(11, OUTPUT);
pinMode(12, OUTPUT);
pinMode(13, OUTPUT);
if(d2) digitalWrite(2, HIGH); else digitalWrite(2, LOW); // если до перезагрузки d2 была включена, то включаем, если нет, то нет
delay(500); // чтобы не включалось всё сразу, делаем паузы
if(d3) digitalWrite(3, HIGH); else digitalWrite(3, LOW);
delay(500);
if(d4) digitalWrite(4, HIGH); else digitalWrite(4, LOW);
delay(500);
analogWrite(5, shim1 * 2.55); // включаем ШИМ d5
delay(500);
analogWrite(6, shim2 * 2.55); // включаем ШИМ d6
delay(500);
if(d11) digitalWrite(11, HIGH); else digitalWrite(11, LOW);
delay(500);
if(d12) digitalWrite(12, HIGH); else digitalWrite(12, LOW);
delay(500);
if(d13) digitalWrite(13, HIGH); else digitalWrite(13, LOW);
}
void loop()
{
if (Serial.available()>4) // ждём дескриптор и нужный символ
{
if (Serial.read()=='Y') // проверяем первый символ, если это 'Y', то продолжаем принимать, если нет, то выходим из цикла чтения
{
for (byte i=0; i < 5; i++)
{
descript[i] = Serial.read(); // добавляем символы в массив
}
if((descript[0] =='+') && (descript[1] =='=') && (descript[2] =='Z')) // проверяем дескриптор
{
switch (descript[3])
{
case 'o': // обновление
glavnaia(); // отправка ответа
break;
case 'A': // d2 вкл
digitalWrite(2, HIGH); // вкл d2
d2 = 1; // ставим флаг в единицу (вкл)
EEPROM.write(2, d2); // записываем состояние d2 в ячейку №2 EEPROM
glavnaia(); // отправка ответа
break;
case 'a': // d2 откл
digitalWrite(2, LOW); // откл d2
d2 = 0; // ставим флаг в ноль (откл)
EEPROM.write(2, d2); // записываем состояние d2 в ячейку №2 EEPROM
glavnaia(); // отправка ответа
break;
case 'B': // d3
digitalWrite(3, HIGH);
d3 = 1;
EEPROM.write(3, d3);
glavnaia();
break;
case 'b': // d3
digitalWrite(3, LOW);
d3 = 0;
EEPROM.write(3, d3);
glavnaia();
break;
case 'C': // d4
digitalWrite(4, HIGH);
d4 = 1;
EEPROM.write(4, d4);
glavnaia();
break;
case 'c': // d4
digitalWrite(4, LOW);
d4 = 0;
EEPROM.write(4, d4);
glavnaia();
break;
case 'D': // d5 прибавляем shim1
shim1++; // прибавляем
if(shim1 > 100) shim1 = 100; // если больше ста, то будет сто
EEPROM.write(5, shim1); // записываем значение в ячейку №5 EEPROM
analogWrite(5, shim1 * 2.55); // включаем ШИМ D5
glavnaia(); // функция отправки ответа
break;
case 'd': // d5 убавляем shim1
shim1--;
if(shim1 < 1) shim1 = 0;
EEPROM.write(5, shim1);
analogWrite(5, shim1 * 2.55);
glavnaia();
break;
case 'E': // d6 прибавляем shim2
shim2++;
if(shim2 > 100) shim2 = 100;
EEPROM.write(6, shim2);
analogWrite(6, shim2 * 2.55);
glavnaia();
break;
case 'e': // d6 убавляем shim2
shim2--;
if(shim2 < 1) shim2 = 0;
EEPROM.write(6, shim2);
analogWrite(6, shim2 * 2.55);
glavnaia();
break;
case 'F': // мгновенное включение ШИМ на D5
shim1 = EEPROM.read(5); // считываем значение ШИМ из EEPROM
analogWrite(5, shim1 * 2.55); // включаем ШИМ D5
glavnaia();
break;
case 'f': // мгновенное отключение ШИМ на D5
shim1 = 0;
analogWrite(5, shim1); // отключаем ШИМ D5, но НЕ записываем в EEPROM
glavnaia();
break;
case 'G': // мгновенное включение ШИМ на D6
shim2 = EEPROM.read(6); // считываем значение ШИМ из EEPROM
analogWrite(6, shim2 * 2.55); // включаем ШИМ D6
glavnaia();
break;
case 'g': // мгновенное отключение ШИМ на D6
shim2 = 0;
analogWrite(6, shim2); // отключаем ШИМ D6, но НЕ записываем в EEPROM
glavnaia();
break;
case 'J': // d11
digitalWrite(11, HIGH);
d11 = 1;
EEPROM.write(11, d11);
glavnaia();
break;
case 'j': // d11
digitalWrite(11, LOW);
d11 = 0;
EEPROM.write(11, d11);
glavnaia();
break;
case 'K': // d12
digitalWrite(12, HIGH);
d12 = 1;
EEPROM.write(12, d12);
glavnaia();
break;
case 'k': // d12
digitalWrite(12, LOW);
d12 = 0;
EEPROM.write(12, d12);
glavnaia();
break;
case 'M': // d13
digitalWrite(13, HIGH);
d13 = 1;
EEPROM.write(13, d13);
glavnaia();
break;
case 'm': // d13
digitalWrite(13, LOW);
d13 = 0;
EEPROM.write(13, d13);
glavnaia();
break;
default:
glavnaia();
}
}
else // если символ был не 'Y', то очищаем буфер
{
for(byte i=0; i < 255; i++)
{
Serial.read();
}
}
} // конец if (Serial.read()=='Y')
} // конец чтение порта
} // конец loop
void glavnaia() // отправка данных
{
Serial.print(d2);//0
Serial.print(",");
Serial.print(d3);//1
Serial.print(",");
Serial.print(d4);//2
Serial.print(",");
Serial.print(0);//3 // пока отключаем, потом пригодится
Serial.print(",");
Serial.print(0);//4 // пока отключаем, потом пригодится
Serial.print(",");
Serial.print(0);//5 // пока отключаем, потом пригодится
Serial.print(",");
Serial.print(0);//6 // пока отключаем, потом пригодится
Serial.print(",");
Serial.print(0);//7 // пока отключаем, потом пригодится
Serial.print(",");
Serial.print(0);//8 // пока отключаем, потом пригодится
Serial.print(",");
Serial.print(d11);//9
Serial.print(",");
Serial.print(d12);//10
Serial.print(",");
Serial.print(d13);//11
Serial.print(",");
Serial.print(shim1); // 12 отсылается
Serial.print(",");
Serial.println(shim2); // 13 отсылается 14 значений разделённых запятой
}
Обмен данными с ардуиной описан здесь или тут.
Как работает
Кнопки:
Кнопка (например D13) включит светодиод и запишет в EEPROM единицу. В веб-интерфейс отправится флаг 1 сообщающий о том, что команда выполнена. Кнопка подсветится.
При повторном нажатии, светодиод погаснет и в EEPROM запишется ноль. В веб-интерфейс отправится флаг 0. Кнопка поменяет цвет.
То есть в веб-интерфейсе отобразится только гарантированно выполненная команда.
...
case 'M': // d13
digitalWrite(13, HIGH); // включили
d13 = 1; // установили флаг
EEPROM.write(13, d13); // записали его в память
glavnaia(); // функция отправки ответа
break;
case 'm': // d13
digitalWrite(13, LOW);
d13 = 0;
EEPROM.write(13, d13);
glavnaia();
break;
...
Если включить D13 и обесточить ардуину, то при последующем включении ардуина прочитает соответствующую ячейку памяти:
...
byte d13 = EEPROM.read(13);
...
И если там была единица, то в блоке void setup() включит светодиод:
...
delay(500);
if(d13) digitalWrite(13, HIGH); else digitalWrite(13, LOW);
Пауза перед включением нужна для того, чтоб НЕ включались все потребители одновременно (например это дача, и ардуиной управляются обогреватели в разных комнатах).
Диммер:
Диапазон значений ШИМ от 0 до 255, ардуина получает (от клиента) значения в диапазоне от 0 до 100, которые внутри программы умножаются на 2.55 и выводятся на «ножку».
case 'D': // d5 прибавляем shim1
shim1++; // прибавили
if(shim1 > 100) shim1 = 100; // если больше ста, то будет сто
EEPROM.write(5, shim1); // записали значение в память
analogWrite(5, shim1 * 2.55); // зажгли лампочку
glavnaia(); // функция отправки ответа
break;
case 'd': // d5 убавляем shim1
shim1--;
if(shim1 < 1) shim1 = 0;
EEPROM.write(5, shim1);
analogWrite(5, shim1 * 2.55);
glavnaia();
break;
Если ползунок сдвигается, то в ардуину отсылается команда увеличить/уменьшить ШИМ на единицу (и так далее пока двигаете ползунок). Переменная shim1++; увеличивается, её значение помещается в память, и на пин подаётся shim1 умноженный на 2.55.
После этого значение shim1 отсылается обратно в веб-интерфейс и присваиваются индикатору и ползунку.
Индикатору и ползунку будет присвоено то значение, которое гарантированно выполнено ардуиной.
Если часть данных потеряется, ползунок сам отодвинется.
При нажатии на кнопку внутри индикатора:
В ардуину отправится команда обнуляющая значение shim1
case 'F': // мгновенное включение ШИМ на D5
shim1 = EEPROM.read(5); // считываем значение ШИМ из EEPROM
analogWrite(5, shim1 * 2.55); // включаем ШИМ D5
glavnaia();
break;
case 'f': // мгновенное отключение ШИМ на D5
shim1 = 0;
analogWrite(5, shim1); // отключаем ШИМ D5, но НЕ записываем в EEPROM
glavnaia();
break;
При этом в память ничего НЕ записывается, а нажатие на соседнюю кнопку вернёт значение из памяти.
(так удобнее отключать свет, нежели ползунок сдвигать)
Интерфейс
Скачайте архив и распакуйте его в рабочую папку сервера (по умолчанию это /var/www), как то так – /var/www/knopki_shimpolz (у вас может быть своя папка).
В браузере зайдите по адресу ваш_роутер/knopki_shimpolz/. Появится вот такая картинка:
Как это работает
Желательно открыть файл index.html из архива, и почитать комментарии.
Диммер:
При первой загрузки страницы, срабатывает функция обновления — show(); (в дальнейшем она работает с установленным интервалом) и у ардуины вместе с другими данными запрашиваются значения ШИМ:
/*обновление*/
show();
setInterval(show,2000); /* частота обновления в миллисекундах */
function show(){ /* функция обновления */
if(flagobnov == 1) { /* это флаг нужен для временного отключения обновления */
$.ajax({
type: "GET",
url: "box2.php?df=o", /* отправка символа о */
timeout:200, /* время (мс), в течении которого функция будет ждать ответа от сервера */
cache: false,
success: function(data){
var vars = data.split(","); /* разбор строки принятой от ардуино */
if(vars.length == dlina){ /* проверка длины данных (количество блоков разделённых запятой) */
/*d2*/
if(vars[0] == 1) { $(".d2otkl").show(); $(".d2vkl").hide(); } /* в зависимости от принятого флага скрывает/показавыет кнопку вкл или откл */
else if(vars[0] == 0) { $(".d2otkl").hide(); $(".d2vkl").show(); }
/*d3*/
if(vars[1] == 1) { $(".d3otkl").show(); $(".d3vkl").hide(); }
else if(vars[1] == 0) { $(".d3otkl").hide(); $(".d3vkl").show(); }
...
shim1 = vars[12]; /* получаем значение ШИМ */
sh1(); /* и выводим его на первый индикатор */
shim2 = vars[13];
sh2();
...
После получения значения shim1, программа переходит в функцию sh1();
function sh1(){ /* рисование первого индикатора */
var $ppc = $('.progress-pie-chart'),
percent = shim1,
deg = 360*percent/100;
if (percent > 50) {
$ppc.addClass('gt-50');
}
else $ppc.removeClass('gt-50');
$('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');
$('.ppc-percents span').html(percent+' % D5 '); /* название на кнопке - D5 */
sl1();
}
Значение shim1 выводится на индикатор (зелёный кружок) и работа передаётся в функцию sl1();
Функция sl1(); устанавливает ползунок в соответствии со значением shim1
function sl1(){ /* первый слайдер */
$( "#slider" ).slider({
value : shim1,
min : 0,
max : 100,
step : 1,
slide: function( event, ui ) {
...
Функция slide: function( event, ui ) ожидает движения ползунка.
Когда ползунок будет сдвинут в ту или иную сторону на одно деление, сработает следующий алгоритм:
Отключается обновление ⇨
flagobnov = 0;
Проверяется в какую сторону сдвинут ползунок (в большую или меньшую) ⇨
if( ui.value > shim1 ){
else if( ui.value < shim1 ){
Ардуине отправляется символ указывающий увеличить (уменьшить) ШИМ на единицу ⇨
$.ajax({
type: "GET",
url: "box2.php?df=D", /* говорим ардуине что надо увеличить ШИМ на единицу */
Получаем новое значение ШИМ от ардуины и вызывает функцию отрисовки индикатора (sh1();) с новым значением ⇨
shim1 = vars[12]; /* получаем от ардуины ответ с новым значением ШИМ */
sh1(); /* и выводим значение ШИМа на индикатор */
Включаем обновление ⇨
flagobnov = 1;
Функция (sh1();) в свою очередь отрисовывает индикатор и передаёт управление в функцию (sl1();).
Функция (sl1();) устанавливает ползунок в соответствии с новым значением ШИМ и ожидает очередного движение ползунка.
function sh1(){ /* рисование первого индикатора */
var $ppc = $('.progress-pie-chart'),
percent = shim1,
deg = 360*percent/100;
if (percent > 50) {
$ppc.addClass('gt-50');
}
else $ppc.removeClass('gt-50');
$('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');
$('.ppc-percents span').html(percent+' % D5 '); /* название на кнопке - D5 */
sl1();
}
function sl1(){ /* первый слайдер */
$( "#slider" ).slider({
value : shim1,
min : 0,
max : 100,
step : 1,
slide: function( event, ui ) { /* отправили новое значение в арду, получили его обратно, отправили на индикатор и оттуда вернули сюда чтоб установить слайдер */
flagobnov = 0; /* пока таскаем ползунок отключаем обновление, чтоб не засорять "эфир" */
if( ui.value > shim1 ){ /* если потащили ползунок в большую сторону, то увеличиваем ШИМ */
$.ajax({
type: "GET",
url: "box2.php?df=D", /* говорим ардуине что надо увеличить ШИМ на единицу */
timeout:200,
cache: false,
success: function(data){
var vars = data.split(",");
if(vars.length == dlina)
{
shim1 = vars[12]; /* получаем от ардуины ответ с новым значением ШИМ */
sh1(); /* и выводим значение ШИМа на индикатор */
}
}
});
}
else if( ui.value < shim1 ){ /* если потащили ползунок в меньшую сторону, то уменьшаем ШИМ */
$.ajax({
type: "GET",
url: "box2.php?df=d", /* говорим ардуине что надо уменьшить ШИМ на единицу */
timeout:200,
cache: false,
success: function(data){
var vars = data.split(",");
if(vars.length == dlina)
{
shim1 = vars[12]; /* получаем от ардуины ответ с новым значением ШИМ */
sh1(); /* и выводим значение ШИМа на индикатор */
}
}
});
}
flagobnov = 1; /* включаем обновление */
}
});
}
Значение индикатора и позиция ползунка, гарантированно соответствуют значению в ардуине.
Нажатие на кнопку «Мгновенное отключение ШИМ» отправляет в ардуину команду обнулить ШИМ, а кнопка «Мгновенное включение ШИМ» запросит у ардуины значение ШИМ, которое было до обнуления.
/* d5 ШИМ */
/*мгновенное включение ШИМ на D5*/
$(".d5shimvkl").click(function(){
$.ajax({
type: "GET",
url: "box2.php?df=F",
timeout:200,
cache: false,
success: function(data)
{
var vars = data.split(",");
if(vars.length == dlina)
{
shim1 = vars[12]; /* получаем от ардуины ответ с новым значением ШИМ */
sh1(); /* и выводим значение ШИМа на индикатор */
}
}
});
return false;
});
/*мгновенное отключение ШИМ на D5*/
$(".d5shimotkl").click(function(){
$.ajax({
type: "GET",
url: "box2.php?df=f",
timeout:200,
cache: false,
success: function(data)
{
var vars = data.split(",");
if(vars.length == dlina)
{
shim1 = vars[12]; /* получаем от ардуины ответ с новым значением ШИМ */
sh1(); /* и выводим значение ШИМа на индикатор */
}
}
});
return false;
});
Внешний вид
Позиция индикаторов, их цвет и шрифт меняется в файле shim.css
/* первый кружок */
.progress-pie-chart {
width: 200px;
height: 200px;
top: 90px; /* позиция */
left: 80px; /* позиция */
border-radius: 50%;
background-color: #E5E5E5;
position: absolute;
}
...
.ppc-percents span {
display: block;
font-size: 26px; /*размер текста на кружках*/
font-weight: 600; /*ширина текста на кружках*/
font-family: Arial, Helvetica, sans-serif; /*шрифт*/
color: #161616; /*цвет текста на кружках*/
text-shadow: 0px 1px 2px #7c7c7c; /*цвет и размер тени текста*/
}
Размер и позицию ползунков можно менять в файле slai.css
.ui-slider {
position: relative;
width: 200px; /* ширина ползунка */
text-align: left;
outline: none;
}
...
/* кнопка ползунка */
.ui-slider-horizontal .ui-slider-handle {
width: 50px; /*размер кнопки ползунка*/
height: 50px;
margin-left: -25px;
outline: none;
box-shadow: 0 0 10px 3px rgba(0,0,0,0.3);
border-radius: 4px;
border: 1px solid #2b2c2b;
cursor: pointer;
}
...
/*первый ползунок*/
s1 {
position: absolute;
top: 360px;
left: 80px;
font-size: 26px; /*размер текста на кнопках*/
font-weight: 600; /*ширина текста на кнопках*/
font-family: Arial, Helvetica, sans-serif; /*шрифт*/
color: #161616; /*цвет текста на кнопках*/
text-shadow: 0px 1px 2px #7c7c7c; /*цвет и размер тени текста*/
}
/*второй ползунок*/
s2 {
position: absolute;
top: 360px;
left: 420px;
font-size: 26px; /*размер текста на кнопках*/
font-weight: 600; /*ширина текста на кнопках*/
font-family: Arial, Helvetica, sans-serif; /*шрифт*/
color: #161616; /*цвет текста на кнопках*/
text-shadow: 0px 1px 2px #7c7c7c; /*цвет и размер тени текста*/
}
На этом всё, в следующей части будет рассмотрено подключение температурных датчиков и включение/отключение различных устройств по температуре, а также добавлен спящий режим для веб-интерфейса.
Спасибо.
Автор: dimastd
