newz20

Ввод пин-кода или киношный экран разблокировки

Ввод кода доступа или команды.

За долгое время моего пребывания в команде, часто вопрошающих и редко отвечающих, я таки дополз до жуткого киношного стереотипа о вводе пин-кода при отключении режима охраны. Данный вопрос за все это страшное время, 2 год пошел, всплывал несколько десятков раз и на форуме и в других локациях. Самой охраны у меня, если честно, не реализовано, но это не мешает мне заниматься разминкой мозгов, моих и уважаемых мною людей из чата в телеге благодаря которым статья появилась на этом экране. к слову сказать не обязательно пользовать его только для охраны, можно заложить в него скрытые функции вашего умного дома, например вызов, нет не полиции-милиции, а режима дискотеки и прочее. Все что вы хотите скрыть от других "пользователей" системы явными вызовами голосом или командами в чате.
На данный момент, оговорюсь сразу, что коды введенные вами не должны содержать одинаковые цифры, так как их посследованость и кол-во не проверяется . Код 1111 будет равен 1, а 1234 = 4321. Но есть и бонус, об этом знать будете только вы, в теории.
Вернемся к режиму охраны, для которого все и разрабатывалось, еще раз напомню у меня его нет и я его не проверял. Но все описанное ниже позволяет играть свою "музыку".
Приступим к мануалу: Создадим класс Keyboard, а в нем свойства от 0 до 9 и zv (зведочка) и resh (решетка)(добавляем не символами, а текстом для избежания проблем в коде), затем создадим еще нужные нам свойства, ну например свойство pass содержащее правильный пароль. У меня создано свойство popitka для отслеживания количества вводов пароля. Далее создаем объект Keyboard и получаем вот такую картину , у вас при создании будут пустые свойства без 0, но это мы поправим ниже.
Создаем 2 метода уже в объекте или в классе, если в классе то автоматом попадут в объект. Метод OK (латиница) и NO. В методе NO (обратите внимание что уже в объекте) пропишем сброс всех свойств на 0 (от 0 до 9 и zv и resh), кроме содержащих коды для сравнения и кол-во попыток ввода

$z='0';
$this->setProperty('1',$z);
$this->setProperty('2',$z);
$this->setProperty('3',$z);
$this->setProperty('4',$z);
$this->setProperty('5',$z);
$this->setProperty('6',$z);
$this->setProperty('7',$z);
$this->setProperty('8',$z);
$this->setProperty('9',$z);
$this->setProperty('0',$z);
$this->setProperty('zv',$z);
$this->setProperty('resh',$z);

В методе OK добавляем код считывания нужных свойств и собираем их вместе для проверки.

$a=$this->getProperty('1');
$b=$this->getProperty('2');
$c=$this->getProperty('3');
$d=$this->getProperty('4');
$e=$this->getProperty('5');
$f=$this->getProperty('6');
$g=$this->getProperty('7');
$h=$this->getProperty('8');
$j=$this->getProperty('9');
$k=$this->getProperty('0');
$l=$this->getProperty('zv');
$q=$this->getProperty('resh');
$pass=$this->getProperty('pass');
$popitka=$this->getProperty('popitka');
$passOK=$a.$b.$c.$d.$e.$f.$g.$h.$j.$k.$l.$q;
if ($pass==$passOK){
// останавливаем таймер на ввод вызывающий тревогу, таймер запускаем при обнаружении движения под охраной
//снимаем с охраны
echo 'пароль верен';
callMethod('Keyboard.NO'); //сбросим все введенные цифры
$this->setProperty('popitka','0');}
else 
{
if ($popitka>=3)
{echo 'включаем тревогу';
 callMethod('Keyboard.NO'); //сбросим все введенные цифры
}
else {
 echo 'попытка не верна';
$this->setProperty('popitka',$popitka+1);
callMethod('Keyboard.NO'); //сбросим все введенные цифры
}
} 

Логика действий прописывается вами, примеры прописал, но логика только ваша.
Ну а теперь перейдем к самому главному пункту нашего блога, как создать клавиатуру на сцене и заставить ее работать.
На сцене создаем элемент в нем пишем имя и выставляем html. Далее в пункте "Дополнительный код CSS" прописываем

container {
    width: 100%;
    border: 1px solid black;
    display: inline-block;
}
block {
    display: inline-block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: calc(33% - 10px);
    height: 100px;
    margin: 5px;
    background: none;
    float: left;
}
block[v2] {
    height: 210px;
}
block[h2] {
    width: calc(50% - 
10px);
}

В самом коде прописываем

<container>
    <block><button type="button" onclick="loadDoc1()" style="width:100%;height:100%;font-size:600%" ><b><font color="black" face="Arial">1</font></b></button></block>
    <block><button type="button" onclick="loadDoc2()" style="width:100%;height:100%;font-size:600%" ><b><font color="black" face="Arial">2</font></b></button></block>
    <block><button type="button" onclick="loadDoc3()" style="width:100%;height:100%;font-size:600%" ><b><font color="black" face="Arial">3</font></b></button></block>
    <block><button type="button" onclick="loadDoc4()" style="width:100%;height:100%;font-size:600%" ><b><font color="black" face="Arial">4</font></b></button></block>
    <block><button type="button" onclick="loadDoc5()" style="width:100%;height:100%;font-size:600%" ><b><font color="black" face="Arial">5</font></b></button></block>
    <block><button type="button" onclick="loadDoc6()" style="width:100%;height:100%;font-size:600%" ><b><font color="black" face="Arial">6</font></b></button></block>
    <block><button type="button" onclick="loadDoc7()" style="width:100%;height:100%;font-size:600%" ><b><font color="black" face="Arial">7</font></b></button></block>
    <block><button type="button" onclick="loadDoc8()" style="width:100%;height:100%;font-size:600%" ><b><font color="black" face="Arial">8</font></b></button></block>
    <block><button type="button" onclick="loadDoc9()" style="width:100%;height:100%;font-size:600%" ><b><font color="black" face="Arial">9</font></b></button></block>
    <block><button type="button" onclick="loadDoczv()" style="width:100%;height:100%;font-size:600%" ><b><font color="gray" face="Arial">*</font></b></button></block>
    <block><button type="button" onclick="loadDoc0()" style="width:100%;height:100%;font-size:600%" ><b><font color="black" face="Arial">0</font></b></button></block>
    <block><button type="button" onclick="loadDocresh()" style="width:100%;height:100%;font-size:600%" ><b><font color="gray" face="Arial">#</font></b></button></block>
    <block h2=""><button type="button" onclick="loadDocOK()" style="width:100%;height:100%;font-size:600%" ><b><font color="green" face="Arial">OK</font></b></button></block>
    <block h2=""><button type="button" onclick="loadDocNO()" style="width:100%;height:100%;font-size:600%" ><b><font color="red" face="Arial">NO</font></b></button></block>
</container>
<!--<button type="button" onclick="loadDoc()" style="width:100x;height:75px;font-size:20px" ><img src="images/umbrella.gif" alt="Зонтик" 
          style="vertical-align: middle">Request data</button>

<p id="demo"></p>-->

<script>
function loadDoc1() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/objects/?op=set&object=Keyboard&p=1&v=1", true);
  xhttp.send();
}
function loadDoc2() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/objects/?op=set&object=Keyboard&p=2&v=1", true);
  xhttp.send();
}
 function loadDoc3() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/objects/?op=set&object=Keyboard&p=3&v=1", true);
  xhttp.send();
}
 function loadDoc4() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/objects/?op=set&object=Keyboard&p=4&v=1", true);
  xhttp.send();
}
 function loadDoc5() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/objects/?op=set&object=Keyboard&p=5&v=1", true);
  xhttp.send();
}
 function loadDoc6() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/objects/?op=set&object=Keyboard&p=6&v=1", true);
  xhttp.send();
}
 function loadDoc7() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/objects/?op=set&object=Keyboard&p=7&v=1", true);
  xhttp.send();
}
 function loadDoc8() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/objects/?op=set&object=Keyboard&p=8&v=1", true);
  xhttp.send();
}
 function loadDoc9() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/objects/?op=set&object=Keyboard&p=9&v=1", true);
  xhttp.send();
}
  function loadDoc0() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/objects/?op=set&object=Keyboard&p=0&v=1", true);
  xhttp.send();
}
 function loadDoczv() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/objects/?op=set&object=Keyboard&p=zv&v=1", true);
  xhttp.send();
}
 function loadDocresh() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/objects/?op=set&object=Keyboard&p=resh&v=1", true);
  xhttp.send();
}
 function loadDocOK() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/objects/?op=m&object=Keyboard&m=OK", true);
  xhttp.send();
}
 function loadDocNO() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/objects/?op=m&object=Keyboard&m=NO", true);
  xhttp.send();
}

</script>

Обратите внимание на код, в нем использованы ссылки на api Мажордомо, управление через http.
Ссылки ведут на изменение свойства объекта. если у вас другие свойства или объект то код придется править.
Кнопка ОК и NO ведут на созданные методы, проверяйте их у себя.
В итоге должно быть так
Логика работы такова: при нажатии на кнопку ОК мы сверяем в методе введенные цифры и сбросим введенные цифры, при нажатии NO мы сбрасываем все свойство в 0. При нажатии других кнопок происходит установка свойств в 1 без перехода по ссылке, проще говоря ставим 1 в нужное свойство. Далее дело за вашей логикой. 000011110000 вот такой код записанный в pass соответствует паролю 5678, но еще раз напомню 6587 и другие варианты набора этих цифр будут срабатывать как верные .
Простите если можно проще и короче, но как умеем так и доносим. Все исправления и дополнения прошу в комментарии. Буду править если что.
Экспорт класса с свойствами прикладываю как ссылку тут не нашел как залить сюда.

Обсуждение (12) (9)

Краснодар, Россия

На форуме: newz20