Neuroplay

by MaksimPankrukhin

HTML

<script src="https://braincomputer.io/development/assets/js/notifyObject-1.0.0.js"></script>
<script src="https://braincomputer.io/development/assets/js/neuroplay-1.0.0.js"></script>

<div id="img" style = "background: url(https://art.pixilart.com/010812bfb6e6172.png) no-repeat; background-size: cover; position: absolute; top:0; left: 0; width: 100%; height: 100%">
<div id="lightyellow"></div>
<div id="red"></div>
<div id="prpl"></div>
<div id="cyan"></div>
<div id="orange1"></div>
<div id="blue1"></div>
<div id="blue2"></div>
<div id="lightorange"></div>
<div id="orange2"></div>
Медитация:
<h1 id="med" style="color: #159">?</h1>
<br/><br/>
Концентрация:
<h1 id="con" style="color: #C30">?</h1>

</div>

CSS

#lightyellow{
  width: 20px;
  height: 20px;
  position: relative;
  top: 320px;
  left: 120px;
  background: #ffcf3f;
}
#red{
  width: 20px;
  height: 20px;
  position: relative;
  top: 420px;
  left: 190px;
  background: #bf262e;
}
#prpl{
  width: 30px;
  height: 30px;
  position: relative;
  top: 380px;
  left: 100px;
  background: purple;
}
#cyan{
  width: 20px;
  height: 20px;
  position: relative;
  top: 280px;
  left: 280px;
  background: #019697;
}
#orange1{
  width: 25px;
  height: 25px;
  position: relative;
  top: 159px;
  left: 270px;
  background: #cb401b;
}
#blue1{
  width: 20px;
  height: 20px;
  position: relative;
  top: 25px;
  left: 259px;
  background: blue;
}
#blue2{
  width: 30px;
  height: 30px;
  position: relative;
  top: 110px;
  left: 150px;
  background: blue;
}
#lightorange{
  width: 15px;
  height: 15px;
  position: relative;
  top: 290px;
  left: 289px;
  background: orange;
}
#orange2{
  width: 30px;
  height: 30px;
  position: relative;
  top: 169px;
  left: 350px;
  background: #cb401b;
}

JavaScript

var neuroplay = null;
let control = 0;
let control1 = 0;
function bci(data) {
  //В этой функции необходимо преобразовывать входящий сигнал (медитацию ИЛИ концентрацию) 
  //и превращать его в управляющее воздействие
  //data.meditation и data.concentration лежат в диапазоне от 0 до 100

  $("#med").html(data.meditation + "%");
  $("#con").html(data.concentration + "%");
	
  var i = 2;
  // Выставляем условие - для показателя медитации больше 30 лампочки появляются, при показателе концентрации больше 60, лампочки гаснут
  if (data.meditation > 30)
  {
  control +=i;
  control1 ++;
  }
  if (data.concentration > 60){
   control -=i;
  	control1 --;
  }
  // Делаем проверку на выход нашего значения control и control1 в диапозоне от 0 до 100 и при выходе - задаем максимальное или минимальное значение
	if (control<0 || control1 <0) {
  control = 0;
  control1 = 0;
  }
  if (control > 100 || control1 > 100 ) {
  control = 100;
  control1 = 100;
  }
  // Меняем прозрачность объекта
  $("#lightyellow").css('opacity', control/100);
  $("#red").css('opacity', control1/100);
  $("#prpl").css('opacity', control1/100);
  $("#cyan").css('opacity', control/100);
  $("#orange1").css('opacity', control1/100);
  $("#blue1").css('opacity', control/100);
  $("#blue2").css('opacity', control1/100);
  $("#lightorange").css('opacity', control/100);
  $("#orange2").css('opacity', control1/100);
  }

$(function() {
  //Этот код выполняет подключение к ПО NeuroPlay
  //10 раз в секунду запрашивает состояние нейроинтерфейса (медитацию, концентрацию и т.д.) 
  neuroplay = new NeuroplayConnector();
  neuroplay.connect();
  neuroplay.on('bci', bci);
  setInterval(function() {
    neuroplay.send('bci');
  }, 100);
});