Інтернет речей з RemoteXY: робота з онлайн-редактором та елементи оформлення інтерфейсу

Продовжую цикл статей про сервіс RemoteXY. 

Редактор інтерфейсу

Настав час детально розглянути роботу з онлайн-редактором інтерфейсу, розташованим за адресою http://remotexy.com/uk/editor

Вікно редактора розділене на 3 частини: зліва панель елементів інтерфейсу, по центру поле редактора, справа панель налаштувань і властивостей. Панель елементів інтерфейсу має 3 групи елементів: управління, індикації та оформлення. Панель налаштувань і властивостей має 4 групи: конфігурація, підключення модуля, екран і властивості елемента. Група властивостей елемента активна лише тоді, коли виділено елемент на полі редактора. Ця група буде розглянута в наступних статтях, індивідуально для кожного елемента інтерфейсу. Група конфігурації та підключення модуля була розглянута в попередній статті http://cxem.net/arduino/arduino213.php, під час опису різних типів підключень. З моменту написання попередньої статті в типах підключень відбулися зміни (які, до речі, не торкнулися вже розглянуті типи підключень) - був доданий спосіб зв'язку смартфона з ардуіно через хмарний сервер. Це підключення буде розглянуто пізніше в окремій статті.

Група налаштування екрану має 2 пункти: колір фону та орієнтація екрану. Колір фону інтерфейсу можна вибрати з 16 представлених кольорів. Орієнтація екрану може приймати значення горизонтально, вертикально та обидва варіанти. При виборі режиму «обидва варіанти» екран буде змінювати орієнтацію в залежності від датчиків смартфона, а на полі редактора з'являться ще дві іконки, які позначають горизонтальну та вертикальну орієнтації.  В цьому випадку зовнішній вигляд інтерфейсу необхідно налаштовувати для обох орієнтацій екрану, оскільки будь-який елемент додається і видаляється одночасно в обох режимах орієнтації. При цьому у такого підходу є перевага: для кожної орієнтації можна розмістити елементи по-різному, оскільки це буде зручніше при тій чи іншій орієнтації екрану.

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

Робота на полі редактора виконується за допомогою миші методом drag-n-drop. Розглянемо основні прийоми роботи в онлайн-редакторі:

• Щоб додати елемент на робоче поле, наведіть курсор на елемент у панелі елементів інтерфейсу, натисніть ліву клавішу миші і, не відпускаючи її, перетягніть елемент на поле редактора. Елемент буде розміщений там, де буде відпущена ліва кнопка миші.
• При кліку правою кнопкою миші на елементі відкриється контекстне меню з 4 пунктів: вирізати, копіювати, вставити (активно лише при кліку на вільному місці поля редактора, коли в буфері обміну є вирізаний або скопійований елемент) і видалити.
• При кліку лівою кнопкою миші на елементі, розташованому на полі редактора, навколо елемента з'являється прямокутна рамка з квадратними маркерами на кутах, над рамкою відображається ім'я змінної, пов'язане з виділеним елементом.
• Якщо потягнути за куточковий маркер, то зміняться масштаб і пропорції елемента.
• Щоб перенести елемент, необхідно натиснути на нього лівою кнопкою миші (навіть якщо він не виділений) і, не відпускаючи кнопку, перетягнути його в інше місце.
• Можна також виділити один або кілька елементів за допомогою виділення мишкою: натисніть мишкою на вільному місці поля редактора і, не відпускаючи кнопку, потягніть мишу вбік. У цьому випадку з'явиться прямокутна область, і всі елементи, повністю потрапивши в цю область, будуть виділені. Виділені групою елементи можна перемістити, змінити їх колір, а також застосувати до них функції з контекстного меню. Масштабувати групу виділених елементів не можна.

Елементи оформлення інтерфейсу

Перейдемо до елементів інтерфейсу. В першу чергу я рекомендую розглянути елементи оформлення інтерфейсу, оскільки в подальшому розгляді елементів управління та індикації я буду користуватися елементами оформлення. Крім того, елементи оформлення – найпростіші з усіх елементів, призначені для оформлення інтерфейсу, не інтерактивні (окрім елемента «сторінка»), в обміні інформацією між смартфоном і контролером не беруть участі.

Мітка

Мітка – незмінний текст. Має 2 параметри: колір (16 кольорів на вибір) та текст мітки – той текст, який буде відображатися на екрані

Текст можна масштабувати як завгодно і розмістити в будь-якому зручному місці. Але текст буде відображатися в один рядок, переносити текст не дозволяється. Варто одразу зазначити, що всі елементи всіх груп можна масштабувати і переміщати в будь-яке зручне місце на полі редактора. Також всі елементи всіх груп мають параметр кольору.

Панель

Панель призначена для візуальної групування елементів інтерфейсу. Має параметри колір і «зріз краю». Зріз краю може бути вибраний з трьох варіантів: лінійний, піднятий і вдавлений край. На скріншоті показано приклад інтерфейсу з трьома панелями, зрізи країв яких представлені у всіх можливих варіантах. Панель завжди розташовується на задньому плані інтерфейсу, всі інші елементи інтерфейсу розташовуються поверх панелей.

Сторінка

При побудові складних інтерфейсів на робочому полі може закінчитися місце. Для таких випадків передбачена можливість додаткових сторінок інтерфейсу. Сама сторінка представлена «кнопкою», при натисканні на яку стають видимими елементи, прив'язані до даної сторінки. У елемента «сторінка» наступні параметри: колір, назва сторінки та основна сторінка. Назва сторінки – текст, який відображається на кнопці переходу на сторінку. Основна сторінка – та, яка відкривається при підключенні смартфона до контролера.

Основна сторінка може бути лише єдиною в інтерфейсі. Основною сторінкою за замовчуванням є перша додана сторінка.

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

Кожен елемент може належати або всім сторінкам одночасно, або розташовуватися на якійсь одній вибраній сторінці. Кнопки переходу по сторінках відображаються завжди на всіх сторінках.

При виділенні кнопки переходу на сторінку на робочому полі видні лише ті елементи, які належать цій сторінці, та елементи, які видні на всіх сторінках одразу.

P.S. У наступній статті я познайомлю вас з елементами управління.