Range на SVG-панели

Добрый день.

Подскажите, пожалуйста, есть ли возможность в SVG-панели реализовать поведение RANGE-type управления?

Типа такого:

Хочу сделать примерно такой GUI для диммера:

Добрый день.
То есть нажатие (щелчок) на одну стрелочку инкрментит а на вторую - декрементит значение? Да, можно, описав правилом.

@BrainRoot, cпасибо. Нашёл пример. Разобрался. Работает.

Вопрос в развитие темы. Как я понял, события создаются по отпусканию кнопки. Тогда есть ли возможность реализации поведения holding-dimmer’a? Т.е. пока держим кнопку, значение изменяется с заданной скоростью; отпускаем - изменение прекращается. Можно, конечно, создавать таймер при нажатии и останавливать его при следующем нажатии. А можно ли создавать при нажатии и останавливать при отпускании?

(Поясню. Хочу сделать графический интерфейс на SVG для HMI-панели. Понятно, что можно диммировать множественными нажатиями на соответствующую кнопку, но хотелось бы удержанием, как у физического диммера)

Попробуйте сделать вспомогательный топик инкрементации, правило при его срабатывании и повесьте на него длинное нажатие
image

Подскажите пожалуйста как это делается?

А пример от пользователя не подошёл?

У меня немного другая задача, мне просто нужно две кнопки, одна при нажатии инкрементирует, другая декрементирует, проблема в том что у меня нет понимания куда писать правило и тд, если подскажете, буду очень признателен

Думаю, пример вам подойдёт. Куда писать правила, можно почитать в документации по 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 КБ)

А, да, я понял, не очень верно сформулировал. Я про то что нет отдельного события "нажатие " и “отпускание”.
То есть нельзя сделать например “длинное” нажатие на кнопку.

Понял, спасибо!

Так это от меня пример :slight_smile:
Да, подошёл, если диммировать множественными нажатиями (т.е. одно нажатие изменяет яркость на один “шаг”).
Но хотелось бы сделать, как у физического диммера: нажали - началось изменение в нужную сторону с нужным шагом: отпустили - изменение прекратилось.

т.е. в svg не получится сэмулировать поведение физического диммера?

Нет, не получится. По крайней мере в текущей реализации.

Можно попробовать сделать следующие решения:

  1. Набор кнопок с различной яркостью, например “25%”, “50%”…
  2. Сделать функцию плавного приращения значения, которая будет менять свое состояние “вкл/выкл” каждым нажатием на кнопку. т.е. один раз нажали и яркость начала изменяться, второй раз нажали - остановилась.
  3. Сделать ввод яркости вручную (цифрой или бегунком)

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

1 Like