Инструкция по использованию ALPS-V
ALPS-V — настольный визуальный конструктор интерфейсов панелей. Вы размещаете элементы на Рабочей области, настраиваете свойства и действия, сохраняете проект в .valp и выгружаете пакет для ALPS-E.
1. Начало работы
1.1. Запуск приложения
1.1.1. Необходимо скачать приложение с сайта www.antonloginov.pro, с раздела Загрузки
1.1.2. Запустить исполняемый файл программы ALPS-V.
1.2. Создание проекта
- Нажмите Новый проект на панели инструментов или выберите пункт в меню Файл.
- В Project Manager выберите корень проекта.
- В Properties задайте размер холста (global_width / global_height), при необходимости WebSocket IP, panel_id и start_page.
- Нажмите Apply Dimensions.
- Сохраните проект (Ctrl+S) — появится рабочая папка и файл .valp.
1.3. Открытие проекта
- Открыть проект на панели / в меню Файл;
- двойной щелчок по файлу .valp (если ассоциация зарегистрирована).
2. Интерфейс редактора
2.1. Панель инструментов
| Кнопка | Действие | Горячая клавиша |
| Новый проект | Создать проект | — |
| Открыть | Открыть проект .valp | — |
| Сохранить | Упаковать и сохранить .valp | Ctrl+S |
| Сохранить как | Сохранить под новым именем | — |
| Отменить / Повторить | Undo / Redo | Ctrl+Z / Ctrl+Y |
| Вставить | Создать Button, Slider, Text, Stream, Scrolling | — |
| Запуск | Эмулятор панели | — |
| Выгрузить для ALPS-E | Сохранить .ealp в папке проекта | — |
| Устройства | Поиск панелей и контроллеров и отправка проекта | — |
| Выравнивание | Выровнять / распределить выделенные элементы | — |
2.2. Project Manager (слева)
Дерево проекта:
| Узел | Назначение |
| Корень проекта | Настройки проекта в Properties |
| Pages | Полные страницы и папки |
| SubPage | Подстраницы (слои) |
| Resources | Изображения проекта |
| Fonts | Пользовательские шрифты |
Контекстное меню (ПКМ):
- Add Page / Add SubPage / Add Folder;
- Add Image / Add Font;
- Show/Hide SubPages — видимость подстраниц в редакторе;
- Delete.
Выберите Page или SubPage, чтобы открыть её на canvas.
2.3. Рабочая область
- Панорамирование — средняя кнопка мыши или два пальца на тачпаде ноутбука.
- Масштаб — Ctrl + колёсико или CTRL+два пальца на тачпаде ноутбука.
- Вписать страницу — двойной щелчок ЛКМ по пустому canvas или двойной щелчок средней кнопкой.
- Выделение — щелчок по элементу; Ctrl+клик — добавить к выделению.
- Рамка — тянуть слева направо (пересечение) или справа налево (полное вхождение).
- Перемещение — перетаскивание; стрелки — сдвиг на 1 px; Ctrl + стрелки — на 10 px.
- Размер — Shift + стрелки; Ctrl+Shift + стрелки — шаг 10 px.
- Удаление — Delete / Backspace.
- Состояние — Page Up / Page Down переключают State выделенного элемента.
2.4. Properties (слева снизу)
Состав полей зависит от выбранного объекта (проект, страница, элемент).
Типичные поля элемента:
| Группа | Примеры |
| Attributes | Id – уникальное имя элемента (на латинице), Visible – видимость элемента Enable – активность элемента (будет ли он передавать Action1/Action0) Touch – кликабельность элемента, если она выключена и он лежит поверх другого элемента, он не будет перекрывать кликабельность второго |
| Feedback | Type Feedback – Local(обратная связь не учитывает LinkID value), LinkID (обратная связь учитывает LinkID value) LinkID – число по которому идет связь между ALPS-L и ALPS-V Value – значение, которое приходит по LinkID |
| State | Состояние элемента (нажат, отжат или другое) |
| Geometry | left, top, width, height. Положение элемента на полотне, его размеры в пикселях |
| Appearance | background-color, opacity. Цвет фона элемента и прозрачность. |
| Border | Толщина, радиус, цвет и прозрачность контура (рамки) элемента |
| Image | Картинка, которую можно вставить как фон элемента |
| Icon | Иконка, которую можно вставить как картинку из resources поверх Image и поверх фона. |
| Text | Текст, который можно написать поверх всех других свойств. Там же можно выбрать Fonts из папки fonts, а также иконки текста. |
2.5. Actions
Панель Actions Element (деревья Action 1 и Action 0) общая для кнопки, страницы и подстраницы. Набор шагов один, отличается момент запуска.
| Объект | Когда открыть панель | Action 1 | Action 0 |
| Button | выбран Button на Рабочей области | нажатие / удержание (press) | отпускание (release) |
| Page | выбрана Page в Project Manager | страница показана | страница скрыта (уход на другую) |
| SubPage | выбрана SubPage | подстраница показана (SHOW_SUBPAGE / LinkID) | подстраница скрыта (HIDE_SUBPAGE / LinkID) |
Колонки: Target | Property | Value.
ПКМ: Add Action, Add Delay, Add Condition, Show Page, Show SubPage, Hide SubPage, Edit / Copy / Paste / Remove.
Шаги выполняются сверху вниз.
Общий набор шагов
1. Изменить свойство (Add Action)
| Поле | Смысл |
| Target | id элемента/страницы; пусто = сам источник |
| Property | свойство |
| Value | новое значение |
Группы в диалоге:
| Группа | Свойства |
| Page | width, height, background-color, background-image, background-image-opacity |
| SubPage | x, y, width, height, background-color, background-image, background-image-opacity |
| Elements | атрибуты и стили текущего элемента (Visible, Enable, State, Value, text, image …) |
2. Навигация
| Property | Value | Эффект |
| SHOW | id Page или PREVIOUS_PAGE | открыть страницу / назад |
| SHOW_SUBPAGE | id SubPage | показать подстраницу |
| HIDE_SUBPAGE | id SubPage | скрыть подстраницу |
3. DELAY — пауза (мс, 0…60000) перед следующим шагом.
4. CONDITION — if / else if / else; проверка State, Time, атрибута или стиля, вложенные действия.
Button
События: pressed → Action 1, released → Action 0.
| Условие | Поведение |
| Enable = 0 | Actions не запускаются |
| Touch = 0 | касания проходят сквозь кнопку |
| Type Feedback = Local | Программа сама ставит State 1 на press и 0 на release |
| Type Feedback = LinkID | State локально не «залипает»; вид с контроллера по LinkID |
| Удержание | Action 1 может повторять шаги (удобно для Time) |
| Отпускание при DELAY | Action 0 ждёт конца очереди Action 1 |
| Смена Page | зажатая кнопка принудительно «отпускается» → Action 0 |
При отпускании в атрибут Time пишется длительность нажатия (мс).
Что писать в Action 1 (Button)
| Задача | Пример |
| Команда «вкл» | Value = 1 (Target пусто) |
| Переход | SHOW → id страницы |
| Подстраница | SHOW_SUBPAGE → id SubPage |
| Долгое нажатие | CONDITION if Time >= 800 → нужный шаг |
| State (если LinkID) | State = 1 |
Что писать в Action 0 (Button)
| Задача | Пример |
| Команда «выкл» | Value = 0 |
| Закрыть подстраницу | HIDE_SUBPAGE |
| Только на отпускании | основная логика в Action 0, Action 1 пуст |
Примеры Button
- Local, переход: Action 1 = SHOW → home; Action 0 пуст.
- LinkID «свет»: Action 1 = Value 1; Action 0 = Value 0.
- Press открыть / release закрыть: Action 1 = SHOW_SUBPAGE; Action 0 = HIDE_SUBPAGE.
Page
События видимости страницы:
| Действие | Последствие |
| Страница стала активной (load_page, SHOW) | Action 1 |
| Уход со страницы (другой SHOW, смена экрана) | Action 0 |
У Page в списке свойств Actions акцент на навигации и паузах: SHOW, SHOW_SUBPAGE, HIDE_SUBPAGE, HIDE, DELAY (плюс CONDITION и смены свойств целей через Add Action / Condition).
Что писать в Action 1 (Page) — при входе на страницу:
| Задача | Пример |
| Закрыть подстраницу | HIDE_SUBPAGE |
| Сбросить локальные кнопки / флаги | State 0, Visible 0 |
| Остановить побочные эффекты | смена свойств элементов страницы |
Показ/скрытие по LinkID страницы (Value 1 / 0) тоже запускает Action 1 / Action 0. Если триггер пришёл по WebSocket, исходящие WS из этих Actions подавляются (без петли).
SubPage
События подстраницы:
| Действие | Последствие |
| SubPage показана (SHOW_SUBPAGE, LinkID) | Action 1 |
| SubPage скрыта (HIDE_SUBPAGE, LinkID, уход с базовой Page) | Action 0 |
3. Работа с элементами
3.1. Добавление
- Нажмите Вставить и выберите тип.
- Растяните прямоугольник на Рабочей области.
- В Properties задайте id, внешний вид и при необходимости LinkID.
- В Actions добавьте реакции на нажатие / отпускание.
3.2. Типы элементов
| Тип | Назначение |
| Button | Кнопка; состояния 0, 1 и дополнительные через State |
| Slider | Регулятор значения (горизонтальный / вертикальный) |
| Text | Добавление элемента типа «Текст». |
| Stream | Видео / поток по stream-url типа RTSP, MJPEG и другие. |
| Scrolling | Прокручиваемый контейнер с SubPage |
3.3. Button
- Выберите кнопку в Рабочей области.
- Задайте State (0, 1 или добавьте состояние).
- Для каждого State настройте image / icon / text.
- Выберите Type Feedback: Local или LinkID.
- В Action 1 / Action 0 опишите действия, которые вы хотите повесить на эту кнопку.
3.4. Slider
Основные свойства:
| Свойство | Описание |
| slider-type | Вертикальный/горизонтальный |
| slider-down-limit / slider-up-limit | Впишите верхний лимит и нижний лимит |
| step | Шаг с которым будут отправляться значения (value) |
| slider-type-touch | Выберите тип слайдера: 1. Drag-and-Drop – нажать и тянуть за ползунок 2. Touch-slider – нажать на любой уровень слайдера |
| slider-touch-color / slider-touch-size | Форма, цвет и размер ползунка слайдера |
| delay_fb | Время задержки мс. прихода обратной связи по LinkID (необходимо чтобы не было прыжков ползунка) |
3.5. Прокрутка(Scrolling) и Постраницы(SubPage)
- Создайте Постраницу и наполните её элементами.]
- На основной странице вставьте элемент Прокрутка.
- В свойстве SubPage Show укажите нужную подстраницу.
- Выберите Type Scrolling: Vertical / Horizontal / All.
Одну и ту же SubPage можно показать в разных Scrolling на разных страницах.
3.6. Resources и Fonts
Последовательность работы с Resources и Fonts.
Изображения:
- Сохраните проект.
- ПКМ по Resources → Add Image (или перетащите файлы).
- Форматы: png, jpg, jpeg, gif, svg, webp.
- В свойствах выберите ресурс через Select Resource.
Шрифты:
- Сохраните проект.
- ПКМ по Fonts → Add Font.
- Форматы: ttf, otf, woff, woff2.
- Укажите шрифт в font-family у текстовых элементов.
3.7. Выравнивание
Выделите элементы и используйте панель выравнивания:
- к краям / центру страницы;
- распределение по горизонтали / вертикали;
- совпадение ширины / высоты;
- выравнивание относительно последнего выделенного элемента.
4. LinkID и связь с контроллером
4.1. Что такое LinkID
LinkID — номер виртуального канала между элементом (или страницей) панели и логикой контроллера.
По этому номеру панель:
- отправляет нажатия, Value слайдера и другие изменения;
- принимает обратную связь (Value, State, text и др.).
Карта номеров проекта: Проект → Связи (LinkID).
Синие – это занятые LInkID, серые – свободные.
4.2. Type Feedback
| Режим | Поведение |
| LinkID | Элемент принимает входящие обновления по своему LinkID. Локальный press/release сам state не меняет — ждёт ответ контроллера (или только отправляет). |
| Local | Входящий feedback по LinkID не применяется; при действиях элемент может отправлять данные на LinkID, если это задано в Action. |
Пустой LinkID или 0 обычно означает «канал не задан».
4.3.Специальные LinkID
В настройках проекта:
| Свойство | Описание |
| WebSocket IP | Хост контроллера / эмулятора |
| panel_id | Id панели. Номер панели, по которой она подключается к контроллеру или эмулятору. |
| websocket_port | Порт (только чтение). Порт = 9000 + panel_id |
Несколько элементов с одним LinkID получают одно и то же входящее обновление.
5. Страницы и проект
5.1. Page
Размер = global_width × global_height. Задается в настройка проекта
Стартовая страница задаётся в start_page.
Фон: background-color, background-image, background-image-opacity.
У страницы могут быть LinkID и Action 0 / Action 1. Через LinkID можно показывать страницы через контроллер.
5.2. SubPage
Свои x / y / width / height.
Показ и скрытие — через Actions (Show SubPage / Hide SubPage) или через Scrolling.
В редакторе видимость управляется командой Show/Hide SubPages.
5.3. Навигация в Actions
| Свойство | Значение | Описание |
| SHOW | Id страницы или PREVIOUS_PAGE | Показать страницу |
| SHOW_SUBPAGE | Id SubPage | Показать подстраницу |
| HIDE_SUBPAGE | Id SubPage | Скрыть подстраницу |
Дополнительно: DELAY, CONDITION, изменение свойства цели (Add Action).
5.4. Screensaver
| Свойство | Описание |
| screensaver_time (sec) | Таймаут простоя панели без нажатия на экран или кликов (0 = выкл.) |
| screensaver_link_id | 1 по таймауту / 0 при активности |
Фокус на screensaver_time переключает Actions на screensaver Action 0/1.
6. Запуск и выгрузка
6.1. Сохранение
- Нажмите Ctrl+S.
- Проект упаковывается в .valp.
Перед добавлением Resources и Fonts проект должен быть сохранён.
6.2. Эмулятор — Запуск
Кнопка Запуск открывает runtime-предпросмотр текущей вёрстки и действий на ПК.
6.3. Выгрузка для плеера
- Сохраните .valp.
- Нажмите Выгрузить для плеера.
- В папке проекта появится .ealp для ALPS-E.
6.4. Устройства
Откройте Устройства….
Найдите панель или контроллер в сети.
Отправьте .ealp на устройство.
Также в меню можно вручную добавить устройство, если оно не нашлось в сети (если в сети заблокирован UDP Broadcast). Кнопка увеличительного стекла на устройстве выдаст на данном устройстве (при запущенном приложении ALPS-E) меню выбора проектов.
7. Горячие клавиши
7.1. Правка
| Клавиши | Действие |
| Ctrl+S | Сохранить |
| Ctrl+Z / Ctrl+Y | Отменить / Повторить |
| Ctrl+C / Ctrl+V | Копировать / вставить элементы |
| Delete / Backspace | Удалить выделенные элементы |
| Esc | Снять выделение |
| F1 | Справка |
7.2. Canvas
| Жест / клавиши | Действие |
| Средняя кнопка + перетаскивание или два пальца на тачпаде и перетаскивание | Перемещение по рабочей области |
| Ctrl + колесо или Ctrl+два пальца на тачпаде | Масштаб |
| Двойной щелчок по пустому canvas или двойной щелчок СКМ | Вписать страницу |
| Стрелки при выбранном элементе на рабочей области | Сдвиг на 1 px |
| Ctrl + Стрелки при выбранном элементе на рабочей области | Сдвиг на 10 px |
| Shift + стрелки при выбранном элементе на рабочей области | Изменение размера элемента |
| Page Up / Page Down при выбранном элементе на рабочей области | Предыдущий / следующий State в свойствах элемента |
8. Типовой рабочий процесс
- Создайте проект и задайте размер экрана.
- Сохраните .valp (Ctrl+S).
- Добавьте Page и при необходимости SubPage.
- Загрузите изображения в Resources.
- Вставьте элементы (Вставить → выделить область на canvas).
- Назначьте id, внешний вид и LinkID.
- Опишите Action 0 / Action 1 (навигация, свойства, delay, condition).
- Нажмите Запуск и проверьте поведение.
- Выгрузите .ealp для плеера или отправьте на устройство
9. Справка внутри приложения
| Действие | Результат |
| F1 | Открыть справку (тема выбранного типа элемента, если есть) |
| Меню Справка → Справка | Открыть справку |
Темы справки: горячие клавиши, LinkID, настройки проекта, Page/SubPage, Resources, Fonts, элементы и действия.
Шпаргалка
| Задача | Где |
| Новый / открыть / сохранить | Панель или Файл; Ctrl+S |
| Добавить элемент | Вставить → область на рабочую область |
| Свойства | Левая панель Properties |
| Действия для элементов | Action 1 / Action 0 |
| Получение/передача данных с контроллера | LinkID + Type Feedback |
| Карта каналов LinkID | Проект → Связи (LinkID) |
| Картинки / шрифты | Resources / Fonts |
| Предпросмотр | Запуск |
| Пакет для панели | Выгрузить для ALPS-E / Устройства… |
| Справка | F1 |
