Galeria de UIs escritas em MQL - página 70

Novo comentário
 
Hoje publicarei a continuação do tópico sobre a indicação de cores dos valores de parâmetros - piscar de elementos. A tarefa acabou sendo um pouco mais complicada do que eu imaginava, por isso demorei um pouco mais. No final, a solução justificou o tempo gasto. Em minha opinião, pelo menos.
 
Você pode entender isso.
 
Jin Rong Xia #:
Você pode entender isso.
Sim, posso entendê-lo. O tradutor está funcionando bem.
 

Tópico 14.3: Indicação de valores perigosos por meio da intermitência de partes de elementos (quadros, bases, texto, controles deslizantes e painéis deslizantes).

A intermitência de elementos é um excelente complemento para a indicação de cores que sinaliza a transição de parâmetros para a zona de valores perigosos. A implementação da nova solução é semelhante à anterior, mas se a indicação de cor funciona de acordo com o princípio de que quanto mais próximo o valor estiver do valor crítico, mais brilhante será a cor, o piscar só aumenta a frequência de mudança da cor inicial com a cor definida para o piscar. O usuário pode ajustar programaticamente o atraso do piscar, diminuindo-o gradualmente para 25 ms ou aumentando-o para 2,5 segundos. Nesse caso, os dois mecanismos podem ser operados simultaneamente. A cor muda de verde claro para vermelho vivo e bordô, e a velocidade do piscar aumenta. Um mecanismo não interfere no outro. A seguir, veremos exemplos práticos.

*Importante: o piscar é ativado independentemente das funções de indicação de cor. Os dois mecanismos não estão tecnicamente relacionados e podem funcionar em paralelo ou separadamente.

Para implementar a intermitência, novas propriedades foram adicionadas aos elementos interativos:

  • pn_BLINK_frame -. Piscada de quadro Adicionada a todos os controles que têm um quadro. Os seguintes elementos estão excluídos: H_SLIDER, V_SLIDER, VALUE , R_BUTTON, CHECKBOX.
  • pn_ BLINK_text - . Texto intermitente Adicionado a todos os elementos que possuem texto. Os elementos excluídos são: P_BAR, D_BAR, H_SLIDER, V_SLIDER.
  • pn_BLINK_base - Base de piscada Adicionado a todos os elementos que têm uma base. Os seguintes elementos são excluídos: CHECKBOX, R_BUTTON, D_LIST, C_LIST, VALUE.
  • pn_BLINK_bar -Barra intermitente Adicionado a itens com uma barra: P_BAR , D_BAR,H_SLIDER, V_SLIDER.
  • pn_BLINK_handle - Intermitência do controle deslizante. Adicionado aos controles deslizantes H_SLIDER, V_SLIDER.


Novas propriedades adicionadas para controlar a velocidade e a parada da intermitência:

  • pn_BLINK_DELAY - Atraso de piscada Adicionado a todos os elementos principais, sem exceção. * Importante - o atraso é definido para todas as partes intermitentes do elemento e não pode ser diferente de uma parte para outra. Todas as partes do elemento com intermitência ativada por software (pode haver várias delas) piscarão de forma síncrona. No entanto, a velocidade de intermitência entre os elementos pode ser diferente e isso fica inteiramente a critério do usuário.
  • pn_BLINK_STOP Ocomando que interrompe completamente a intermitência de todos os componentes do elemento.
  • No estágio atual, é possível ativar a intermitência do quadro da janela de configurações. Para fazer isso, você precisa chamar a função window e passar o identificador da propriedade pn_BLINK_frame para ela . E a cor. Tudo é exatamente igual ao dos elementos.

Vamos resumir o que foi dito acima:

  • O atraso de piscada pn_BLINK_DELAY é definido programaticamente e é aplicado a todas as partes piscantes do elemento de uma só vez. Elas piscam de forma síncrona.
  • A propriedade pn_BLINK_DELAY tem um valor padrão. A menos que seja explicitamente especificado pelo usuário, o atraso de piscada será de 20, o que equivale a pouco mais de um segundo (20*25ms).
  • Um elemento pode piscar em várias partes ao mesmo tempo ou em uma parte de cada vez. A decisão é tomada pelo usuário.
  • No processo de intermitência, é possível alterar programaticamente a cor e ajustar a velocidade. As funções de piscar serão discutidas a seguir.
  • Para fazer com que outra parte do elemento pisque, você precisa chamar a função e passar o identificador da parte do elemento e a cor. Mas se, por exemplo, um quadro estiver piscando e o usuário quiser que o texto pisque no valor desejado e o quadro parar de piscar, será necessário desativar completamente o piscar usando o comando pn_BLINK_STOP e, em seguida, ativar o piscar do texto por meio de uma chamada de programa.
  • A pedido do usuário, os componentes do elemento podem piscar em cores diferentes. Por exemplo, o texto pode ser definido para piscar em verde, a moldura em azul e a base em vermelho. Há diferentes variações disponíveis. Mas lembre-se: a velocidade de piscar de todas as partes de um elemento é a mesma.
  • Se uma janela for minimizada e sua guia estiver na barra de tarefas, e houver elementos piscando na janela, a guia selecionará automaticamente o elemento que pisca mais rápido na janela fechada (não há redesenho real quando a janela é fechada) e se ajustará à sua frequência e cor. Ou seja, as guias na barra de tarefas piscam na cor e na velocidade do elemento que pisca mais rápido na janela. Mas se os elementos mudarem sua velocidade de piscar ao receber valores, a guia se reconstruirá automaticamente encontrando outro elemento e mudando sua velocidade e cor de piscar.
  • No caso de desativação completa do piscar dos elementos na janela, a guia para de piscar automaticamente.

Amanhã, passaremos aos exemplos práticos.

Hoje, apenas uma pequena demonstração para entender do que estamos falando.



Infelizmente, há atrasos durante a gravação. O processador está carregado. Mas a demonstração mostra que os elementos piscam de forma assíncrona e em velocidades diferentes. Diferentes partes dos elementos também estão piscando. Tudo isso é definido programaticamente. E a guia na barra de tarefas encontrou automaticamente o elemento que piscava mais rápido e ficou azul. Depois, quando o elemento começou a piscar com menos frequência, ele encontrou o outro elemento que piscava mais rápido e ficou vermelho.

Exploraremos isso em mais detalhes amanhã.

P.S. Também discutiremos as opções de uso desses recursos muito úteis.

 


Dando continuidade ao tópico de ontem...

Hoje, vamos resumir conceitualmente e concluir o tópico de intermitência de elementos.

Ontem, analisei a intermitência apenas no contexto da sinalização de valores perigosos, mas a aplicação pode ser muito mais ampla do que isso. Aqui está um exemplo:

Imaginemos um Expert Advisor de várias moedas analisando a situação de vários mercados. Suponha que ele selecione os melhores pontos de entrada/saída de acordo com um conjunto de critérios complexos. O Expert Advisor funciona em modo semiautomático e o operador não pode ou não quer programar toda a lógica da estratégia de negociação. Seu robô monitora os mercados, coleta dados e informa sobre pontos importantes. O trabalho do especialista se limita a analisar e exibir os resultados em tabelas e diagramas. A decisão final sobre as transações é tomada por uma pessoa.

Nessa variante, a atividade de negociação consiste em observar fluxos de dados em tempo real e empacotar a série de valores em execução em parâmetros personalizados. Esses últimos ajudam a dimensionar a consciência situacional.

No entanto, o envolvimento em tempo real exige decisões oportunas. O problema surge quando os resultados da análise são exibidos em diferentes janelas por meio de várias visualizações gráficas. A quantidade de informações que requerem atenção aumenta e o foco de atenção se divide. Como resultado, a perspectiva do mercado fica nublada na mente do trader e a eficiência de seu trabalho diminui. Surge a fadiga.

Nesse caso, os elementos intermitentes são uma boa ajuda:

  • Eles sinalizam a urgência de tomar decisões ou ações.
  • Informam sobre a velocidade das mudanças que estão chegando.
  • Informa sobre a relevância dos eventos observados.
  • Informa sobre a importância dos resultados obtidos: números, diferenças, intervalos, somas, limites, etc.

Em resumo:
  • O piscar pode lembrar, avisar, informar, sinalizar ou indicar.
  • O piscar centraliza o foco e aumenta a concentração do operador.
  • A frequência e a cor determinam a urgência das decisões ou ações.
  • Combinado com a mudança de cor, o piscar aumenta a interatividade da GUI e a eficiência do operador.

Vamos nos concentrar em uma análise prática da nova funcionalidade:

  • 1. Vamos prescrever a ordem das ações preparatórias.
  • 2. Vamos habilitar a intermitência da moldura do botão ao pressionar e desabilitar a intermitência ao soltar.
  • 3. Vamos ativar a intermitência do texto do botão.
  • 4. Vamos ativar a intermitência da base do botão.
  • 5. Vamos conectar vários outros elementos ao piscar do botão: um campo com botões, um controle deslizante, uma caixa de seleção e outros.
  • 6. Vamos acionar o piscar da moldura da janela.
  • 7. Vamos conectar a velocidade de piscar dos elementos com o valor do controle deslizante e do campo com botões.

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

1. Ordem das ações preparatórias:

  • Primeiro, vamos escrever os wrappers das funções Blink_start() e Blink_stop(), que devem ligar e desligar o piscar dos elementos quando chamados.
  • A função Blink_start() será responsável pela ativação. Ela será chamada no evento de pressionamento. A função Blink_stop() será responsável por desligar a intermitência. Ela será chamada quando o botão "Start" for pressionado .
  • Vamos localizar o botão no arquivo de API e escrever a chamada da função Blink_start() ao pressionar o botão e a chamada da função Blink_stop() ao pressioná-lo. 
//-----------------------------------------------------
//This function will start the blinking of the elements.
//-----------------------------------------------------
void Blink_start()
{

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

}


Agora, vamos localizar o caso do botão "Start" no arquivo de API e escrever as chamadas das funções Blink_start() e Blink_stop() no evento de pressionar e pressionar o botão:

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;


Vamos prosseguir com o preenchimento das funções com conteúdo:

1. Precisamos que o quadro do botão "Start" pisque. Vamos escrever uma chamada para piscar o quadro, conforme mostrado no código abaixo. O identificador da propriedade de piscar do quadro do botão é p1_BLINK_frame. Especifique a cor do piscar e o objeto do piscar.

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) Agora vamos implementar a desativação do piscar quando o botão for liberado. O identificador p1_BLINK_STOP é responsável por desativar o piscar . Não é necessário colocar nada entre colchetes, exceto ele.

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


Vamos verificar o resultado:



3. Vamos ativar a intermitência do texto do botão em vez da moldura. O identificador da propriedade pn_BLINK_text é responsável pelo piscar do texto:

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);
}

Resultado: o texto do botão pisca em azul e para de piscar quando o botão é pressionado.



4. Vamos ativar a intermitência da base do botão. O identificador da propriedade pn_BLINK_base é responsável pela 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);
}

Resultado: a base do botão pisca em vermelho e para de piscar quando pressionada.



Agora vamos combinar a intermitência da moldura do botão e de seu texto:

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);
}

Resultado: Amoldura do botão e o texto do botão piscam sincronizadamente em cores diferentes, como pretendido.


5. Vamos conectar outros elementos dessa janela à intermitência: 

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);
 //-------------------------------------------------------------
}

Vamos também escrever a desativação do piscar dentro da função 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);
 //-------------------------------------------------------------
}

Resultado: os novos elementos são incluídos em Blink_start() e Blink_stop() e piscam como pretendido.


6. Vamos fazer com que o quadro da janela pisque quando o botão for clicado. (Vamos desativar temporariamente o piscar de elementos atrasados).

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);
}


Resultado: o quadro da janela pisca como deveria.


*Importante: todos os elementos considerados e o quadro da janela piscaram na velocidade padrão.

Mais adiante, regularemos a velocidade de piscar dos elementos com a alça do controle deslizante e o campo com botões.


7. Vamos vincular a velocidade de piscar ao valor no campo com botões e controle deslizante. Todos os elementos e a moldura da janela piscarão simultaneamente, e a velocidade de piscar será definida manualmente por esses elementos.

Gostaria de lembrá-lo de que a velocidade de piscada depende do atraso pn_BLINK_DELAY.

  • O atraso mínimo possível é 1 e o máximo é 99.
  • Para calcular o tempo de atraso da piscada, você precisa multiplicar seu valor por 25 (ms).
  • Por padrão, o atraso é igual a 20, ou seja, 500 milissegundos (20*25ms).

Para resolver o problema, vamos fazer o seguinte:

  • 1. Vamos trazer de volta o piscar de todos os elementos quando o botão for pressionado/solto e adicionar a eles o piscar da janela de chamada/parada.
  • 2. Escreva uma nova função Blink_delay() na qual faremos chamadas que definam uma pausa no piscar. A função aceitará o valor do atraso.
  • 3. Vamos escrever uma chamada para a função Blink_delay() a partir dos casos de elementos do controle deslizante e do campo de entrada no arquivo de API, passando o valor atual.

A dicionamos o piscar do quadro da janela dentro da função Blink_start(): . 

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);
 //-------------------------------------------------------------
}

Adicionamos a desativação do piscar do quadro da janela dentro da função 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);
 //-------------------------------------------------------------
}

Escrevendo a função Blink_delay():

Chame a função Blink_delay() no evento do controle deslizante e dos elementos do campo de entrada e passe o valor atual dos elementos para ela:

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!");
}

*Nota importante: verificou-se que é impossível alterar a velocidade de piscada dos elementos da caixa de seleção e da lista suspensa. Essa velocidade é sempre igual a 20 (meio segundo). Isso foi feito intencionalmente, mas provavelmente mudarei isso no futuro. Os outros elementos podem alterar a velocidade de intermitência.

Vamos escrever uma chamada para a função Blink_delay() a partir do evento do elemento "Spin_the_value" (o campo com botões). O campo está conectado ao controle deslizante, portanto, não há necessidade de colocar a chamada no caso do controle deslizante. A conexão funcionará e o controle deslizante, sem uma chamada direta, alterará a velocidade de piscar por meio do campo com botões:

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;


Resultado: o campo com botões e o controle deslizante alteram a taxa de intermitência dos elementos na janela.



Resultados:

  • Ao implementar o piscar de elementos, a interface é muito mais interativa e informativa do que antes.
  • Os métodos para ativar, controlar e desativar o piscar de elementos são muito simples e estão descritos em detalhes em duas postagens nesta página.
  • Os métodos são listados e demonstrados com exemplos de código e vídeos.
  • Provavelmente, algumas nuances poderão ser refinadas ou adicionadas no futuro, mas, de modo geral, os recursos básicos de piscar já foram adicionados e não exigem grandes alterações.
  • Você pode alterar a cor do piscar enquanto altera o valor do parâmetro do elemento.

Considero esse tópico esgotado.


Próximo item da lista - cancelamento dos valores inseridos pressionando o botão "Cancel".

1...6364656667686970
Novo comentário