Добрый день.
Подскажите, пожалуйста, есть ли возможность в SVG-панели реализовать поведение RANGE-type управления?
Типа такого:
Хочу сделать примерно такой GUI для диммера:
Добрый день.
То есть нажатие (щелчок) на одну стрелочку инкрментит а на вторую - декрементит значение? Да, можно, описав правилом.
@BrainRoot, cпасибо. Нашёл пример. Разобрался. Работает.
Вопрос в развитие темы. Как я понял, события создаются по отпусканию кнопки. Тогда есть ли возможность реализации поведения holding-dimmer’a? Т.е. пока держим кнопку, значение изменяется с заданной скоростью; отпускаем - изменение прекращается. Можно, конечно, создавать таймер при нажатии и останавливать его при следующем нажатии. А можно ли создавать при нажатии и останавливать при отпускании?
(Поясню. Хочу сделать графический интерфейс на SVG для HMI-панели. Понятно, что можно диммировать множественными нажатиями на соответствующую кнопку, но хотелось бы удержанием, как у физического диммера)
Попробуйте сделать вспомогательный топик инкрементации, правило при его срабатывании и повесьте на него длинное нажатие
Подскажите пожалуйста как это делается?
А пример от пользователя не подошёл?
У меня немного другая задача, мне просто нужно две кнопки, одна при нажатии инкрементирует, другая декрементирует, проблема в том что у меня нет понимания куда писать правило и тд, если подскажете, буду очень признателен
Думаю, пример вам подойдёт. Куда писать правила, можно почитать в документации по wb-rules.
Да спасибо, разобрался
Получилось сделать?
Глянул - функции типов: whenChanged, asSoonAs, when все работают по отжатию кнопки.
Даже интересно стало, а как нужно.)
whenChanged использовал, вроде по нажатию срабатывает
Нет, если говорить про кнопку pushbutton, в веб-интерфейсе то она не генерирует событие отпускания, вообще.
Code
defineVirtualDevice('up_down', {
title: 'Up Down Value',
cells: {
whenChanged: {
title: 'whenChanged',
type: 'pushbutton',
order: 2,
},
when: {
title: 'when',
type: 'pushbutton',
order: 3,
},
asSoonAs: {
title: 'asSoonAs',
type: 'pushbutton',
order: 3,
},
},
});
defineRule('test_whenChanged', {
whenChanged: ['up_down/whenChanged'],
then: function (newValue, devName, cellName) {
log('click whenChanged');
},
});
defineRule({
when: function() {
return dev["up_down/when"]; // правило сработает, когда значение параметра изменится на истинное
},
then: function (newValue, devName, cellName) {
log('click when');
}
});
defineRule({
asSoonAs: function() {
return dev["up_down/asSoonAs"]; // правило сработает, когда значение параметра изменится на истинное
},
then: function (newValue, devName, cellName) {
log("Click asSoonAs");
dev["up_down/asSoonAs"] = !dev["up_down/asSoonAs"];
}
});
2024-07-12 13-14-25_cut.mkv (789,9 КБ)
А, да, я понял, не очень верно сформулировал. Я про то что нет отдельного события "нажатие " и “отпускание”.
То есть нельзя сделать например “длинное” нажатие на кнопку.
Понял, спасибо!
Так это от меня пример 
Да, подошёл, если диммировать множественными нажатиями (т.е. одно нажатие изменяет яркость на один “шаг”).
Но хотелось бы сделать, как у физического диммера: нажали - началось изменение в нужную сторону с нужным шагом: отпустили - изменение прекратилось.
т.е. в svg не получится сэмулировать поведение физического диммера?
Нет, не получится. По крайней мере в текущей реализации.
1 лайк
Можно попробовать сделать следующие решения:
- Набор кнопок с различной яркостью, например “25%”, “50%”…
- Сделать функцию плавного приращения значения, которая будет менять свое состояние “вкл/выкл” каждым нажатием на кнопку. т.е. один раз нажали и яркость начала изменяться, второй раз нажали - остановилась.
- Сделать ввод яркости вручную (цифрой или бегунком)
Но мне кажется, что достаточно найти пару используемых сценариев и сделать под каждый свою кнопку.
2 лайка
Извините, был не прав.
У svg есть событие “долгий клик”, на него вешаем функцию приращения значения.
На обычный клик (который срабатывает при отпускании) мы вешаем остановку приращения.
Пока что потестировал с пищалкой - работает.
Код
defineVirtualDevice("test_buzzer", {
title: "Test Buzzer",
cells: {
enabled: {
type: "switch",
value: false
},
disabled: {
type: "pushbutton",
value: false
}
}
});
defineRule({
whenChanged: "test_buzzer/enabled",
then: function (newValue, devName, cellName) {
dev["buzzer/enabled"] = dev["test_buzzer/enabled"];
}
});
defineRule({
whenChanged: "test_buzzer/disabled",
then: function (newValue, devName, cellName) {
if (dev["test_buzzer/disabled"] == true)
{
dev["test_buzzer/enabled"] = false;
}
}
});
3 лайка