Мой дневник

12.01.2017

Освещение комнаты на mongoose-iot

Filed under: Uncategorized — sae762 @ 11:06

пока standalone

Продолжение. Начало работы с mongoose-iot в предыдущей статье

Для примера я сделал систему управления лентой RGB и белой лентой для отдельной комнаты. Все что нужно добавить – веб-страницу интерфейса, в нашем случае с четырьмя слайдерами. После изменения положения слайдера в чип отправляется команда вида PWM.set(red,10000,value) и соответствующий канал меняет интенсивность свечения.

Несколько модификаций в системе. Можно их не делать, а вызывать страницу с домашнего веб-сервера.

  • перенес встроенный веб-сервер на порт 88 (через веб-страницу конфига)
  • переименовал встроенную страницу конфига с index.html в config.html
  • собственную страницу управления поставил как index.html

15871461_1285211388227636_5588909604704536074_n
15826727_1285211304894311_2186298967977520777_n
Планы:
– Нельзя опросить состояние каналов. Думаю, нужно добавить переменные, которые будут содержать значения pwm.
– В некоторых помещениях (кухня, коридор) уместно добавить детектор движения. Сейчас на кухне такое сделано, но на Arduino IDE. Нужно подобрать алгоритм зависимости освещенности от движения. Как раз посильная задача для javascript.
– Буду подключать датчики воздуха, термометр, и т.п.

так что продолжеие следует.

Ниже код самой страницы (команды обрабатываются на url /eval, см httpd.js из предыдущего поста, html вставляется плохо, просто скопировать не получится,если что спрашивайте):

<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″/>

var url=”http://192.168.1.180/eval&#8221; //for ext web
//var url=”/eval” //for inernal page

// common method
var http = new XMLHttpRequest();// one object instance

function send_eval(cmd) {
var params = “cmd=”+cmd;
document.getElementById(‘status’).value+=cmd+”\n”;
//jquery way also ok: $( “#status” ).val( $( “#status” ).val() + cmd+”\n” );
//sync (false) is deprecated but works better, connection always keep-alive (
http.open(“POST”, url, false);
//in case of sync.
//http.onreadystatechange = function() {
//if(http.readyState == 4 ) {
document.getElementById(‘status’).value+=http.responseText+”\n”;
//}
//}
http.send(params);
}

< script src=”https://code.jquery.com/jquery-1.12.4.js”></script&gt;
< script src=”https://code.jquery.com/ui/1.12.1/jquery-ui.js”></script&gt;

<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”/>
<style>
body {width: 100%;background-color: #DDDDDD; }
.p1 {text-align: center;}
#debug {width:100%; padding-left: 10%; padding-top: 20px;}
#status {width: 80%; height: 150px; }

#red, #green, #blue, #white {
clear: left;
width: 80%;
margin: 25px 15px 25px 10%;
}
#off {
width: 20%;
margin: 15px 15px 15px 10%;
}
#random {
width: 20%;
margin: 15px 10% 15px 0%;
}

#red .ui-slider-range { background: #ef2929; }
#red .ui-slider-handle { background:#ef2929; border-color: #ffffff; }
#green .ui-slider-range { background: #8ae234; }
#green .ui-slider-handle { background: #8ae234; border-color: #ffffff; }
#blue .ui-slider-range { background: #729fcf; }
#blue .ui-slider-handle { background: #729fcf; border-color: #ffffff; }
#white .ui-slider-range { background: #ffffff; }
#white .ui-slider-handle { background: #ffffff; border-color: #ffffff; }
</style>

//specific methods

pinR=13;
pinG=12;
pinB=14;
pinW=5;

//init recommend place to controller
$( function() {
cmd = ‘GPIO.setMode(‘+pinR+’,GPIO.OUT);’+
‘GPIO.setMode(‘+pinG+’,GPIO.OUT);’+
‘GPIO.setMode(‘+pinB+’,GPIO.OUT);’+
‘GPIO.setMode(‘+pinW+’,GPIO.OUT)’;
send_eval(cmd);
});

//jquery init
$( function() {
$( “#off,#random” ).button( {} );
$( “#random” ).click( rand );
$( “#off” ).click ( off );

$( “#red, #green, #blue, #white” ).slider({
orientation: “horizontal”,
range: “min”,
max: 10000,
value: 5000,
step: 200
});
$( “#red” ).slider( {change: setR} );
$( “#green” ).slider( {change: setG} );
$( “#blue” ).slider( {change: setB} );
$( “#white” ).slider( {change: setW} );
$( “#status”).hide();
});

//controls
function setR() {
v=$( “#red” ).slider( “value” )
send_eval(‘PWM.set(‘+pinR+’,10000,’+v+’)’);
}
function setG() {
v=$( “#green” ).slider( “value” )
send_eval(‘PWM.set(‘+pinG+’,10000,’+v+’)’);
}
function setB() {
v=$( “#blue” ).slider( “value” )
send_eval(‘PWM.set(‘+pinB+’,10000,’+v+’)’);
}
function setW() {
v=$( “#white” ).slider( “value” )
send_eval(‘PWM.set(‘+pinW+’,10000,’+v+’)’);
}

function off() {
//value change->setX called
$( “#red” ).slider( “value”, 0);
$( “#green”).slider( “value”, 0);
$( “#blue” ).slider( “value”, 0);
$( “#white”).slider( “value”, 0);
//turn off pwm
send_eval(‘PWM.set(‘+pinR+’,0,0)’);
send_eval(‘PWM.set(‘+pinG+’,0,0)’);
send_eval(‘PWM.set(‘+pinB+’,0,0)’);
send_eval(‘PWM.set(‘+pinW+’,0,0)’);
}

function rand() {.
//value change->setX called
$( “#red” ).slider( “value”,rnd());
$( “#green” ).slider( “value”,rnd());
$( “#blue” ).slider( “value”,rnd());
}

function rnd() {
return Math.floor(Math.random()*10000);
}

function debug() {
$(“#status”).toggle();.
$(“#status”).val(”);.
}

</head>
<body>

Anina Lampa

</div>

OFF
RAND

</div>

<textarea id=”status”></textarea>
</div>
</body>
</html>

 

 

Advertisements

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: