Практика застосування модулів Laurent. Частина 2: зміна WEB-інтерфейсу

Привіт Хабр! Це друга стаття з практичного застосування модулів Ethernet-управління Laurent (тут частина перша) і, як ти любиш, мова піде про програмування, а, точніше, про підгонку WEB-інтерфейсу під свої інтереси. Може знадобитися системним інтеграторам для того, щоб надати замовникам продукт зі своїм фірмовим зовнішнім виглядом, так і приватному користувачеві буде зручніше оперувати кнопками зі зрозумілими назвами, без зайвої обв'язки на екрані. Крім цього, доступно і деяка зміна функціоналу.

Отже…

В оригіналі ми маємо стартовий екран управління:



Розглянемо приклад модифікації Web-інтерфейсу модуля Laurent-2. В якості практичної задачі пропонується виконання наступних операцій:

  1. Зміна кількості кнопок реле в Web-інтерфейсі
  2. Для кнопок реле зробимо можливість роботи в режимі без фіксації (кнопка отщелкнется сама, як тільки буде відпущена ліва кнопка миші)


Отже, насамперед необхідно завантажити пакет SDK Web-інтерфейсу. SDK являє собою вихідний проект Web-інтерфейсу (такий же, який використовується у штатній постачання модуля) і компілятор, з допомогою якого можна зібрати образ інтерфейсу для його подальшого завантаження в енергонезалежну пам'ять модуля.

Початковий проект заснований на використанні різних Web-мов і технологій: HTML, JavaScript, AJAX, XML. Оскільки весь код відкритий, ми можемо робити будь-які зміни і розробити спеціалізований інтерфейс спеціально під конкретні завдання.

Переходимо в директорію \Laurent-2_WebSDK_v.2\Laurent_Web\protect, в якій знаходиться головна сторінка Web-інтерфейсу. Титульна сторінка, на якій розміщені поля введення пароля доступу, розміщена в кореневому каталозі. Ті HTML документи, які розміщені в підкаталозі \protect, будуть вимагати вказівки пароля доступу.

У файлі index.html (ми зараз у підкаталозі \protect) знайдемо ділянку коду, відповідальний за виведення зображення кнопок реле:

<table width=500>
<tr ><td ><p class=texts>Включення / вимикання реле. Зелений колір індикатора відповідає включеному реле.</p>
</td></tr>
</table>

<table>
<tr>
<script>
for (i = 1; i < = 4; i++) {
inTxt = "<td width=80 align=center><a href='javascript: JsClickRele(" + i + ")'><img src='Rele_Gray.jpg' border=0 id='Rele_Pic" + i + "'></a></td>"; 
document.write(inTxt);
}
</script>
</tr>
<tr>
<td class=textb align=center>RELE 1</td>
<td class=textb align=center>RELE 2</td>
<td class=textb align=center>RELE 3</td>
<td class=textb align=center>RELE 4</td>
</tr>
</table>


Для прикладу давайте зробимо так, щоб відображалися тільки перші дві кнопки реле, відповідні реле RELE_1 і RELE_2.

Для цього, по-перше, необхідно змінити параметри циклу створення нових кнопок і записати ось так (зеленим виділенням відзначені виконані зміни):



Додатково слід видалити рядки з підписами реле, яких більше не буде, а саме (червоним відмічено те, що слід видалити):



Тепер скрипт створить всього дві кнопки реле. Однак, потрібно модифікувати ще одну ділянку коду, а саме, блок відстеження змін стану реле. Web-інтерфейс влаштований таким чином, що web-сторінка з деяким періодом надсилає запити до модулю про поточний стан його апаратних ресурсів (наприклад, включено реле або вимкнено і т. д.) – дивись файл keweb_Laurent.js. Отримавши відповідь, скрипт зберігає нові значення і викликає функції, відповідальні за оновлення інформації на сторінці.

Оскільки ми тільки що «видалили» дві кнопки, а скрипт оновлення про це ні чого не знає, то при спробі запуску сторінки відбудеться порушення в роботі, т. к. скрипт спробує звернутися до неіснуючих елементів. Щоб цього уникнути потрібно модифікувати JavaScript функцію оновлення контенту UpdateInformation( )

У тілі функції є рядки стосуються реле:

for( i = 0; i < 4; i++ ) {
ReleNew = ModuleObj.GetRele( i );
ReleOld = ReleSave[i]; 
if( ReleNew != ReleOld ) {
UpdateRele( i+1, ReleNew ); 
ReleSave[i] = ReleNew;
} 
}


Слід модифікувати цикл, помінявши число 4 на 2, оскільки тепер нам потрібно відслідковувати стану тільки двох перших реле:



Тепер наш Web-інтерфейс працює тільки з двома першими реле модуля, а інші два не використовує.

Наступним кроком давайте модифікуємо кнопки реле так, щоб вони стали працювати в режимі без фіксації (отщелкивалась назад, як тільки буде відпущена ліва кнопка миші або миша піде за межі зображення кнопки).

Нам доведеться помітно модифікувати код скрипта створення кнопок, оскільки тепер потрібно відстежувати факти натискання, відпускання кнопки миші і виходу її за межі зображення кнопки. Робимо нову модифікацію в коді скрипта створення і розміщення елементів реле на сторінку:



Замість HTML тега обробку натискання кнопки ми доручили все тієї ж функції JsClickRele(), але чітко по події натискання кнопки миші (без відпускання). Додатково призначили функцію ReleOnMouseUp() — в якості обробника події відпускання кнопки лівої кнопки миші, і функцію ReleOnMouseOut() — в якості обробника події виходу миші за межі елемента для відстеження того випадку, коли кнопка миші, будучи натиснутою, виводиться за межі зображення реле. В якості аргументу функцій передається цифровий ідентифікатор номери реле (індексація починається з нуля).

Проведемо невеликі модифікації в функції, що викликається при натисканні кнопки реле.
Створимо спеціальну глобальну змінну для відстеження стану натискання кнопки миші, яка нам знадобиться надалі. Якщо кнопка натиснута – зводимо змінну. Сама функція зміни стану реле працює за принципом перемикання: кожне нове звернення до неї (SetRele()) змінює стан реле на протилежне.



Далі створимо функцію обробник відпускання миші. Якщо миша була натиснута (відстежуємо це з допомогою змінної MouseSave), то встановлюємо протиставлених стан реле (тобто відключаємо його).



Якщо ж миші була натиснута, не відпущена і вийшла за межі зображення реле – цю ситуацію ми теж отловим за допомогою нашого обробника ReleOnMouseOut():



Тепер можна приступити до складання інтерфейсу. Для цього слід запустити виконавчий BAT файл LAURENT_RUN.bat розташований в корені каталогу SDK.
Запускаємо його. Отримуємо повідомлення про успішно створеному образі інтерфейсу:



У кореневій директорії утворюється файл інтерфейсу Laurent_WI.bin



Пора його завантажити в пам'ять модуля. Підключаємо модуль до мережі, заходимо через браузер за адресою (якщо ви змінювали IP адреса модуля – слід використовувати його поточний адреса):

http://192.168.0.101/web_update

Вводимо логін / пароль (за замовчуванням admin / Laurent)



Вибираємо файл Laurent_WI.bin і натискаємо кнопку Upload.



Процес завантаження займе 30-60 сек. По його закінченні побачимо повідомлення виду:



Заходимо на головну сторінку модуля. Не забуваємо оновити сторінку т. к. браузер може закешувати старий варіант сторінки, і ми не побачимо наших змін.

Тепер в інтерфейсі ми бачимо два реле, і вони працюють так, як ми запрограмували: в режимі без фіксації (реле тримається назад, як тільки ліва кнопка миші буде відтиснута або вийшла за межі зображення кнопки реле):



Якщо у вас виникли питання по зміненим кодом – до статті додається первісний проект SDK з виконаними модифікаціями.

продовження слідує…

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.