ФорумРазделы

Галерея UI написанных на MQL - страница 69

Новый комментарий

Тема 14.3: Инидикация опасных значений посредством мигания частей элементов (рамок, оснований, текста, ползунков и табло слайдера).

Мигание элементов - отличное дополнение к цветовой индикации сигнализирующей о переходе параметров в зону опасных значений. Реализация нового решения внешне похожа на предыдущую, но если цветовая индикация работает по принципу, чем ближе значение к критическому, тем ярче цвет, то мигание лишь увеличивает частоту смены исходного цвета с заданным для мигания цветом. Пользователь может программно регулировать задержку мигания, постепенно уменьшая до 25мс или увеличивая до 2.5 секунд. При этом, оба механизма могут работать одновременно. Цвет смещается от светло-зеленого к ярко красному и бардовому и, а мигание увеличивает скорость. Один механизм не мешает второму. Далее мы разберем практические примеры.

*Важно: мигание включается независимо от функций цветовой индикации. Оба механизма технически не связаны между собой и могут работать параллельно или порознь.

Для реализации мигания были добавлены новые свойства интерактивным элементам:

  • pn_BLINK_frame    - Мигание рамки.         Добавлено всем элементам управления имеющим рамку. В исключение вошли элементы: H_SLIDER, V_SLIDER, VALUE, R_BUTTON,  CHECKBOX.
  • pn_ BLINK_text     -  Мигание текста.        Добавлено всем элементам имеющим текст. В исключении оказались элементы: P_BAR, D_BAR,  H_SLIDER, V_SLIDER. 
  • pn_BLINK_base     -  Мигание основания.  Добавлено всем элементам имеющим основание. В исключении попали элементы:  CHECKBOX, R_BUTTON, D_LIST, C_LIST, VALUE.  
  • pn_BLINK_bar       -  Мигание бара.           Добавлено элементам имеющим полосу:   P_BAR, D_BAR,  H_SLIDER, V_SLIDER. 
  • pn_BLINK_handle  -  Мигание ползунка.   Добавено слайдерам  H_SLIDER, V_SLIDER.  


Для регуляции скорости и остановки мигания добавлены новые свойства: 

  • pn_BLINK_DELAY  -  Задержка мигания.  Добавлено всем основным элементам без исключения. *Важно - задержка устнавливается для всех мигающих частей элемента и не может отличатся от одной части к другой.  Все части элемента у которых программно включено мигание (их может быть несколько), будут мигать синхронно. Однако, скорость мигания между элементами может отличаться и это полностью на усмотрение пользователя.
  • pn_BLINK_STOP Комманда которая полностью останавливаем мигание всех компонентов элемента.
  • На текущем этапе, имеется возможность включения мигания рамки окна настроек. Для этого необходимо вызвать функцию окна и передать в нее идентификатор свойства pn_BLINK_frame. И цвет. Все точно также, как у элементов.

Обобщим вышесказанное:

  • Задержка мигания  pn_BLINK_DELAY устанавливается программно и применяется сразу ко всем мигающим частям элемента. Они мигают синхронно.  
  • Свойство pn_BLINK_DELAY имеет значение по умолчанию. При отсутствии явного указания пользователя, задержка мигания будет равна 20-ти, что чуть больше секунды (20*25мs).
  • У элемента может быть включено мигание сразу несколько частей, или же одной части на выбор. Решение принимает пользователь.
  • В процессе мигания можно программно менять цвет и регулировать скорость. Функции мигания рассмотрим далее.
  • Чтобы заставить мигать другую часть элемента нужно вызвать функцию и передать идентификатор части элемента и цвет. Но если, например, мигает рамка и пользователь хочет чтобы на нужном значении замигал текст, а рамка прекратила мигать, необходимо полностью выключить мигание с помощью комманды pn_BLINK_STOP, и затем программными вызовом включить мигание текста.
  • По желанию пользователя компоненты элемента могут мигать разными цветами. Например, тексту можно установить мигание зеленым цветом, рамке синим, а основанию красным. Доступны разные вариации. Но напомню: скорость мигания всех частей внутри элемента одинакова.
  • Если окно минимизировано и его вкладка находится на Таскбаре, и при этом в окне есть мигающие элементы, вкладка автоматически выберет наиболее быстромигающий элемент в закрытом окне (фактической перерисовки при закрытом окне не происходит) и настроится на его частоту и цвет. То есть, вкладки на Таскбаре мигают цветом и скоростью самого быстромигающего элемента в их окне. Но если элементы меняют скорость мигания в процессе получения значений, тогда вкладка автоматически перестроиться, найдя другой элемент и поменяет свою скорость мигания и цвет. 
  • В случае полного отключения мигания элементов в окне, вкладка перестает мигать автоматически. 

Завтра перейдем к практическим примерам. 

Сегодня лишь небольшое демо для понимания о чем речь.



К сожалению при записи возникают лаги. Процессор грузится. Но, на демо видно что элементы мигают асинхронно и с разной скоростью. Мигают также разные части элементов. Все это задается программно. А вкладка на Таскбаре автоматически нашла самый быстромигающий элемент и стала синей. Потом, когда элемент стал мигать реже, она нашла другой самый быстромигающий и стала красной. 

Завтра изучим все подробнее.

P.S. Также обсудим варианты применения этих, весьма полезных, фич.  

В продолжение вчерашней темы...

Сегодня концептуально обобщим и закончим тему мигания элементов.

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

Представим мультивалютный советник анализирующий ситуацию нескольких рыночных площадок. Допустим он подбирает оптимальные точки входа/выхода по набору сложных критериев. Советник работает в полуавтоматическом режиме и трейдер не может, или не хочет программировать всю логику торговой стратегии. Его робот мониторит рыночные площадки, собирает данные и информирует о важных моментах. Работа эксперта ограничена проведением анализа и выводом результатов в таблицы и диаграммы. Окончательное решение о сделках принимает человек.

В этом варианте, трейдинговая деятельность заключается в наблюдении потоков real-time данных и упаковке рядов бегущих значений в кастомные параметры. Последние помогают масштабировать ситуативную осведомленность.

Однако живое участие требует своевременных решений. Проблема возникает когда результаты анализа выводятся в разные окна через несколько графических представлений. Объем информации требующей внимания растет и фокус внимания расщепляется. В итоге, рыночная перспектива мутнеет в сознании трейдера и эффективность его работы снижается. Приходит утомление.  

В этом случае мигание элементов хороший помошник:

  • Сигнализирует о срочности принятия решений или совершении действий.
  • Сообщает о скорости приходящих изменений.
  • Говорит об актуальности наблюдаемых событий.  
  • Информирует о значимости получаемых результатов: цифр, разниц, диапазонов, сумм, границ и т.д.

Подведу итог:
  • Мигание может напоминать, предупреждать, сообщать, сигнализировать или указывать.  
  • Мигание центрирует фокус и повышает концентрацию трейдера.
  • Частота и цвет диктуют срочность решений или действий.
  • В сочетании с цветовым измением, мигание повышает интерактивность графического интерфейса и эффективность работы трейдера.

Приступим к практическому разбору нового функционала:

  • 1. Пропишем порядок подготовительных действий.
  • 2. Вызовем включение мигания рамки кнопки при нажатии и отключение мигания при отжатии.
  • 3. Включим мигание текста кнопки.  
  • 4. Включим мигание основания кнопки. 
  • 5. Подключим к миганию кнопки несколько других элементов: поле с кнопками, слайдер, чекбокс и другие.
  • 6. Вызовем мигание рамки окна.
  • 7. Свяжем скорость мигания элементов со значением слайдера и поля с кнопками.

//----------------------------------------------------------------------------------------------------------

1. Порядок подготовительных действий:

  • Для начала напишем обертки функций Blink_start() и Blink_stop(), которые должны включать и выключать мигание элементов при вызове.  
  • За включение будет отвечать функция Blink_start(). Ее будем вызывать на событии нажатия. Функция Blink_stop() будет отвечать за отключение мигания. Она будет вызываться при отжатии кнопки кнопки "Start".
  • Найдем кнопку в файле API и пропишем вызов функции  Blink_start() на нажатии кнопки, и вызов функции  Blink_stop() на отжатии.  
//-----------------------------------------------------
//This function will start the blinking of the elements.
//-----------------------------------------------------
void Blink_start()
{

}
//-----------------------------------------------------
//This function will stop the blinking of the elements.
//-----------------------------------------------------
void Blink_stop()
{

}


Теперь найдем кейс кнопки "Start" в файле API и пропишем вызовы функций  Blink_start() и Blink_stop() на событии нажатия и отжатия кнопки:

case Settings_example_1___Start:
  
               //------------------------------------------------------------------------------------------------------
               //What to do when the button is pressed or released?
               //------------------------------------------------------------------------------------------------------
               switch((int)action)
               {
                case pressed:    Blink_start();  break;
  
                case released:   Blink_stop();   break;
               }
               //------------------------------------------------------------------------------------------------------
               //Your comment:
               //------------------------------------------------------------------------------------------------------
               break;


Перейдем к заполнению функций содержанием:

1. Нам нужно чтобы мигала рамка кнопки "Start". Пишем вызов мигания рамки как показано в коде ниже.  Идентификатор свойства мигания рамки кнопки - p1_BLINK_frame.  Указываем цвет мигания и объект мигания.   

void Blink_start()
{
 //Setting the color and the part of the element that is suppoused to blink.
 w6_i_p1_BUTTON_Start((int)clrLimeGreen,p1_BLINK_frame);
}


2. Теперь реализуем отключение мигания при отжатии кнопки. За отключение мигание отвечает идентификатор p1_BLINK_STOP. Кроме него в скобках ничего ставить не нужно.

void Blink_stop()
{
 //Stopping the blinking of all of the parts of the element all together:
 w6_i_p1_BUTTON_Start(p1_BLINK_STOP);
}


Проверяем результат:



3. Включим мигание текста кнопки вместо рамки. За мигание текста отвечает идентификатор свойства pn_BLINK_text:

void Blink_start()
{
 //Setting the color and the part of the element that is suppoused to blink.
 w6_i_p1_BUTTON_Start((int)clrRed,p1_BLINK_text);
}

Результат: текст кнопки мигает синим цветом и перестает мигать при отжатии.



4. Включим мигание основания кнопки. За основание отвечает идентификатор свойства  pn_BLINK_base:

void Blink_start()
{
 //Setting the color and the part of the element that is suppoused to blink.
 w6_i_p1_BUTTON_Start((int)clrRed,p1_BLINK_base);
}

Результат: основание кнопки мигает красным цветом и перестает мигать при отжатии.



Теперь совместим мигание рамки кнопки и ее текста:

void Blink_start()
{
 //Setting the blinking of the frame and the text of the button
 w_6_Settings_example_1((int)clrRed,p8_BLINK_frame);
 w_6_Settings_example_1((int)clrRed,p8_BLINK_text);
}

Результат: Рамка и текст кнопки мигают синхронно разными цветами, как и задумано.


5. Подключим к миганию другие элементы в этом окне:  

void Blink_start()
{
 //Setting the color and the part of the element that is suppoused to blink.
 //-------------------------------------------------------------
 w6_i_p1_BUTTON_Start((int)clrLimeGreen,p1_BLINK_frame);
 w6_i_p1_BUTTON_Start((int)clrRed,p1_BLINK_text);
 //-------------------------------------------------------------
 w6_d_p5_S_EDIT_Spin_the_value((int)C'255,50,0',p5_BLINK_frame);
 w6_d_p5_S_EDIT_Spin_the_value((int)C'255,50,0',p5_BLINK_text);
 //-------------------------------------------------------------
 w6_i_p3_H_SLIDER_Roll_the_value((int)C'255,50,0',p3_BLINK_handle);
 w6_i_p3_H_SLIDER_Roll_the_value((int)C'255,50,0',p3_BLINK_bar);
 //-------------------------------------------------------------
 w6_i_p7_CHECKBOX_Set_an_option((int)C'255,50,0',p7_BLINK_text);
 //-------------------------------------------------------------
 w6_s_p6_D_LIST_D_LIST_1((int)C'255,50,0',p6_BLINK_frame);
 //-------------------------------------------------------------
}

Также пропишем отключение мигания внутри функции Blink_stop():  

void Blink_stop()
{
 //Stopping the blinking
 //-------------------------------------------------------------
 w6_i_p1_BUTTON_Start(p1_BLINK_STOP);
 //-------------------------------------------------------------
 w6_d_p5_S_EDIT_Spin_the_value(p5_BLINK_STOP);
 //-------------------------------------------------------------
 w6_i_p3_H_SLIDER_Roll_the_value(p3_BLINK_STOP);
 //-------------------------------------------------------------
 w6_i_p7_CHECKBOX_Set_an_option(p7_BLINK_STOP);
 //-------------------------------------------------------------
 w6_s_p6_D_LIST_D_LIST_1(p6_BLINK_STOP);
 //-------------------------------------------------------------
}

Результат: новые элементы включены в функции Blink_start() и Blink_stop() и мигают как положено.


6. Вызовем мигание рамки окна при нажатии на кнопку. (Временно отключим мигание отстальных элементов.)

void Blink_start()
{
//Setting the blinking of the frame of the window:
 w_6_Settings_example_1((int)clrRed,p8_BLINK_frame);
}

void Blink_stop()
{
//Stopping the blinking of the frame of the window:
 w_6_Settings_example_1(p8_BLINK_STOP);
}


Результат: рамка окна мигает как положено.


*Важно: все рассмотренные элементы и рамка окна мигали на скорости установленной по умолчанию.

Далее мы будем регулировать скорость мигания элементов ручкой слайдера и полем с кнопками.


7. Привяжем скорость мигания к значению в поле с кнопками и слайдера. Мигать будут одновременно все элементы и рамка окна, а скорость мигания будет задаваться вручную этими элементами. 

Напомню - скорость мигания зависит от задержки pn_BLINK_DELAY.

  • Минимальная возможная задержка равна 1, максимальная 99. 
  • Для вычисления времени задержки мигания, нужно ее значение умножить на 25 (ms). 
  • По умолчанию задержка равна 20-ти, что составляет 500 миллисекунд (20*25ms).

Для решения задачи сделаем следующее:

  • 1. Вернем мигание всех элементов при нажатии/отжатии кнопки и добавим к ним вызов/остановку мигания окна.
  • 2. Напишем новую функцию Blink_delay() в которую поместим вызовы устанавливающие паузу в мигании. Функция будет принимать значение задержки.
  • 3. Пропишем вызов функции  Blink_delay() из кейсов элементов слайдера и поля ввода в файле API, с передачей текущего значения.
Добавили мигание рамки окна внутрь функции Blink_stаrt():  

void Blink_start()
{
 //Setting the color and the part of the element that is suppoused to blink.
 //-------------------------------------------------------------
 w_6_Settings_example_1((int)clrRed,p8_BLINK_frame);
 //-------------------------------------------------------------
 w6_i_p1_BUTTON_Start((int)clrLimeGreen,p1_BLINK_frame);
 w6_i_p1_BUTTON_Start((int)clrRed,p1_BLINK_text);
 //-------------------------------------------------------------
 w6_d_p5_S_EDIT_Spin_the_value((int)C'255,50,0',p5_BLINK_frame);
 w6_d_p5_S_EDIT_Spin_the_value((int)C'255,50,0',p5_BLINK_text);
 //-------------------------------------------------------------
 w6_i_p3_H_SLIDER_Roll_the_value((int)C'255,50,0',p3_BLINK_handle);
 w6_i_p3_H_SLIDER_Roll_the_value((int)C'255,50,0',p3_BLINK_bar);
 //-------------------------------------------------------------
 w6_i_p7_CHECKBOX_Set_an_option((int)C'255,50,0',p7_BLINK_text);
 //-------------------------------------------------------------
 w6_s_p6_D_LIST_D_LIST_1((int)C'255,50,0',p6_BLINK_frame);
 //-------------------------------------------------------------
}

Добавили отключение мигания рамки окна внутрь функции Blink_stop(): 

void Blink_stop()
{
 //Stopping the blinking
 //-------------------------------------------------------------
 w_6_Settings_example_1(p8_BLINK_STOP);
 //-------------------------------------------------------------
 w6_i_p1_BUTTON_Start(p1_BLINK_STOP);
 //-------------------------------------------------------------
 w6_d_p5_S_EDIT_Spin_the_value(p5_BLINK_STOP);
 //-------------------------------------------------------------
 w6_i_p3_H_SLIDER_Roll_the_value(p3_BLINK_STOP);
 //-------------------------------------------------------------
 w6_i_p7_CHECKBOX_Set_an_option(p7_BLINK_STOP);
 //-------------------------------------------------------------
 w6_s_p6_D_LIST_D_LIST_1(p6_BLINK_STOP);
 //-------------------------------------------------------------
}

Пишем функцию Blink_delay():

Вызываем функцию  Blink_delay() на событии элементов слайдер и поле ввода, и передаем в нее текущее значение элементов:

void Blink_delay(uint delay)
{
 if(delay > 0 && delay < 100)
   {
    //-------------------------------------------------------------
    w_6_Settings_example_1(delay,p8_BLINK_DELAY);
    //-------------------------------------------------------------
    w6_i_p1_BUTTON_Start(delay,p1_BLINK_DELAY);
    //-------------------------------------------------------------
    w6_d_p5_S_EDIT_Spin_the_value(delay,p5_BLINK_DELAY);
    //-------------------------------------------------------------
    w6_i_p3_H_SLIDER_Roll_the_value(delay,p3_BLINK_DELAY);
    //-------------------------------------------------------------
   }
else Print("Wrong value!");
}

*Важное замечание: оказалось что у элементов чекбокс и выпадающий список невозможно менять скорость мигания. Эта скорость постоянно равна 20-ти (полсекунды). Так было сделано намеренно, но вероятно в дальнейшем изменю это решение. Остальные элементы могут менять скорость мигания.

Пропишем вызов функции  Blink_delay() из на событии элемента "Spin_the_value" (поле с кнопками). Поле соединено со слайдером, поэтому в кейсе слайдера вызов ставить не нужно. Связь будет работать и слайдер без прямого вызова будет через поле с кнопками менять скорость мигания:

case Settings_example_1___Spin_the_value:
  
               //------------------------------------------------------------------------------------------------------
               //What to do when the value is set?
               //------------------------------------------------------------------------------------------------------
               //Min value:  NOT SET  |   Max value:  NOT SET  |   V_step:  1.7  |   Default value:  468.99  |  Digits: 3
               //------------------------------------------------------------------------------------------------------
               w6_i_p3_H_SLIDER_Roll_the_value((int)value);
              
               //Сalling the blinking delay function
               Blink_delay((int)value);
               //------------------------------------------------------------------------------------------------------
               //Your comment:
               //------------------------------------------------------------------------------------------------------
               break;


Результат: поле с кнопками и слайдер меняют скорость мигания элементов в окне.



Итоги:

  • Благодаря реализации мигания элементов интерфейс стал намного более интерактивный и информативный чем ранее. 
  • Методы включения, управления и отключения мигания элементов очень просты и подробно описаны в двух постах этой страницы.
  • Способы применения перечислены и продемонстрированы с примерами кода и видео.
  • Вероятно какие то нюансы можно доработать или добавить в будущем, но по большому счету основные возможности мигания уже добавлены и не требуют серьезных изменений. 
  • Можно менять цвет мигания в процессе изменения значения параметра элемента.

На этом тему считаю исчерпанной. 


Далее по списку - отмена введенных значений нажатием на кнопку "Cancel".

Релиз следующей версии состоится в понедельник или вторник будущей недели. В обновление войдут показанные выше возможности, а также отмена/подтверждение ввода параметров в окнах настроек. Помимо этого, каталоги переведуться на английский, а код пройдет доработки и исправления из составленного списка выявленных проблем.
Реter Konow #:
Релиз следующей версии состоится в понедельник или вторник будущей недели. В обновление войдут показанные выше возможности, а также отмена/подтверждение ввода параметров в окнах настроек. Помимо этого, каталоги переведуться на английский, а код пройдет доработки и исправления из составленного списка выявленных проблем.
Надеюсь успею.
Работа заброшена, или просто у Вас "бархатный сезон", отпуск? Ну, это святое.
Edgar Akhmadeev #:
Работа заброшена, или просто у Вас "бархатный сезон", отпуск? Ну, это святое.
Работа не завершена, но реструктурированы приоритеты. Возможно продолжу, если будет спрос публики. Мне в любом случае нужны динамические и генерируемые таблицы. И графики тоже. Их точно сделаю. Остальное - как получится.
Реter Konow #:
Возможно продолжу, если будет спрос публики.

Спрос есть. То, что большинство молчит в теме - нормально. Люди затаились и ждут. Пока ни один крупный проект не был доведён до конца. Это всегда трудно вытягивать одному и без финансирования. Я пока знаю только один доведённый одним человеком до успешного результата проект - "VLADIK BRUTAL" на Steam.

Edgar Akhmadeev #:

Спрос есть. То, что большинство молчит в теме - нормально. Люди затаились и ждут. Пока ни один крупный проект не был доведён до конца. Это всегда трудно вытягивать одному и без финансирования. Я пока знаю только один доведённый одним человеком до успешного результата проект - "VLADIK BRUTAL" на Steam.

Странная тактика - затаиться и ждать. :) Если бы люди активно участвовали, я бы не менял приоритеты и многое было бы сейчас завершено. Впрочем, главные задачи которые перечислил завершу вне зависимости от спроса, т.к. вижу в этом личный интерес. Но, я не жадный, поделюсь с сообществом.) Просто четких временных рамок ставить не буду. 

До нового года рассчитываю все закончить. Вам ведь динамические таблицы нужны? Это точно будет. 

Также напомню, что обычные таблицы в сборке имеются и хорошо работают. А теперь, благодаря наличию программного управления интерфейсом, работа с ними стала проста.

Уроков по языку разметки можно еще много сделать, ведь материал освещен менее чем на половину, но опять же - кому это надо? Мне? Я и так все знаю. А кому еще? Просьб не слышу. А ведь составить каждый урок, это большой труд, и каждый обучающий пост это мини-статья. Это огромный труд. 

Такие вот вопросы. Думаю, можете понять. Но, динамические таблицы и графики имеют большой практический смысл и они появятся. 
Реter Konow #:
Странная тактика - затаиться и ждать. :) Если бы люди активно участвовали, я бы не менял приоритеты

Скажу только за себя. Я не знаю, как помочь. Как активно участвовать. Всё, что я мог, сделал. Написал код по имеющейся информации, получился красивый интерфейс. Дальше упёрся в пока нереализованное то, что нужно лично мне. А изучать уроки по использованию того, чего пока не могу реализовать на практике, я не умею. Я практик. Поэтому уроки будут обязательно нужны, когда придёт их время.

Разные кнопки управления, и кнопки управления разным - лично мне понадобятся потом. Когда дойду до этого. Пока жду интерфейса для удобного и красивого отображения. И то, это прям не к спеху, поэтому под локотки и не толкаем. Понимаем же, что работаете не по обязанности. Я задал вопрос не потому, что тороплюсь, просто - пропали куда-то.

Edgar Akhmadeev #:

Скажу только за себя. Я не знаю, как помочь. Как активно участвовать. Всё, что я мог, сделал. Написал код по имеющейся информации, получился красивый интерфейс. Дальше упёрся в пока нереализованное то, что нужно лично мне. А изучать уроки по использованию того, чего пока не могу реализовать на практике, я не умею. Я практик. Поэтому уроки будут обязательно нужны, когда придёт их время.

Разные кнопки управления, и кнопки управления разным - лично мне понадобятся потом. Когда дойду до этого. Пока жду интерфейса для удобного и красивого отображения. И то, это прям не к спеху, поэтому под локотки и не толкаем. Понимаем же, что работаете не по обязанности. Я задал вопрос не потому, что тороплюсь, просто - пропали куда-то.

Как я понял, Вы пока сами не знаете какой интерфейс нужен Вашему приложению. :) Тут я помочь не в силах. Но когда разберетесь, составьте эскиз. Вполне вероятно, что имеющихся возможностей моего конструктора и движка будет более чем достаточно. Как уже говорил, нехватает только трех основных вещей:

1. Динамичные таблицы - это таблицы с неограниченным кол-вом рядов.

2. Генерируемые таблицы - это таблицы собираемые функцией "на лету". Нужны для быстрого вывода, сортировки и сравнения отдельных параметров взятых из больших массивов данных.

3. Научные графики наподобии тех что в R.  Уже реализованы в штатной библиотеке CGraphic и в библиотеке Анатолия Кожарского. У меня будет реализовано по своему. 

Все остальное в моем конструкторе есть. Подумайте что именно нужно Вашему приложению. Сделайте эскиз. Выложите сюда. Помогу написать Kib-code. 
1...626364656667686970717273747576...81
Новый комментарий