Gallery of UIs written in MQL - page 70

Реter Konow 2024.09.03 19:47 #691

Topic 14.3: Indicating dangerous values by flashing parts of elements (frames, bases, text, sliders and slider boards).

Flashing of elements is an excellent addition to the colour indication signalling the transition of parameters into the zone of dangerous values. The implementation of the new solution is similar to the previous one, but if the colour indication works according to the principle that the closer the value is to the critical value, the brighter the colour, the blinking only increases the frequency of change of the initial colour with the colour set for blinking. The user can programmatically adjust the flashing delay, gradually decreasing it to 25ms or increasing it to 2.5 seconds. In this case, both mechanisms can be operated simultaneously. The colour shifts from light green to bright red and burgundy and, and the flashing increases in speed. One mechanism does not interfere with the second. Next, we'll break down practical examples.

*Important: the flashing is activated independently of the colour indication functions. The two mechanisms are technically unrelated and can work in parallel or separately.

To implement blinking, new properties have been added to interactive elements:

pn_BLINK_frame -. Frame blinking Added to all controls that have a frame. The following elements are excluded: H_SLIDER, V_SLIDER, VALUE , R_BUTTON, CHECKBOX.

pn_ BLINK_text - Blinking text Added to all elements that have text. Excluded are elements: P_BAR, D_BAR, H_SLIDER, V_SLIDER.

pn_BLINK_base - Blink base Added to all elements that have a base. The following elements are excluded: CHECKBOX, R_BUTTON, D_LIST, C_LIST, VALUE.

pn_BLINK_bar - Blinkingbar. Added to items with a bar: P_BAR , D_BAR,H_SLIDER, V_SLIDER.

pn_BLINK_handle - Blinking of slider. Added to H_SLIDER, V_SLIDER sliders .

Added new properties to control speed and stop of blinking:

pn_BLINK_DELAY - Blink Delay. Added to all main elements without exception. * Important - the delay is set for all flashing parts of the element and cannot differ from one part to another. All parts of the element with software enabled flashing (there can be several of them) will flash synchronously. However, the blinking speed between elements may differ and this is entirely at the user's discretion.

pn_BLINK_STOP Thecommand that completely stops flashing of all components of the element.

At the current stage, it is possible to enable blinking of the settings window frame. To do this, you need to call the window function and pass the identifier of the pn_BLINK_frame property to it . And the colour. Everything is exactly the same as for elements.

Let's summarise the above:

The blink delay pn_BLINK_DELAY is set programmatically and is applied to all blinking parts of the element at once. They flash synchronously.

The pn_BLINK_DELAY property has a default value. Unless explicitly specified by the user, the blink delay will be 20, which is just over a second (20*25ms).

An element can have flashing of several parts at once, or one part at a time. The decision is made by the user.

In the process of flashing it is possible to programmatically change the colour and adjust the speed. The blinking functions will be discussed below.

To make another part of the element blink you need to call the function and pass the identifier of the element part and the colour. But if, for example, a frame is blinking and the user wants the text to flash at the desired value, and the frame stops blinking, it is necessary to switch off blinking completely using the pn_BLINK_STOP command, and then switch on text blinking by a program call.

At the user's request, the components of the element can blink in different colours. For example, the text can be set to flash in green, the frame in blue, and the base in red. Different variations are available. But let me remind you: the blinking speed of all parts within an element is the same.

If a window is minimised and its tab is on Taskbar, and there are blinking elements in the window, the tab will automatically select the fastest blinking element in the closed window (there is no actual redrawing when the window is closed) and adjust to its frequency and colour. That is, the tabs on Taskbar flash the colour and speed of the fastest flashing element in their window. But if elements change their blinking speed while receiving values, then the tab will automatically rebuild itself by finding another element and changing its blinking speed and colour.

In case of complete disabling of blinking of elements in the window, the tab stops blinking automatically.

Tomorrow we will move on to practical examples.

Today just a small demo to understand what we are talking about.

Unfortunately, there are lags when recording. The processor is loaded. But the demo shows that elements flash asynchronously and at different speeds. Different parts of the elements are also flashing. All this is set programmatically. And the tab on Taskbar automatically found the fastest blinking element and turned blue. Then, when the element started blinking less often, it found the other fastest blinking element and became red.

We'll explore this in more detail tomorrow.

P.S. We will also discuss options for using these very useful features.

Crowdsourced GUI. Open beta My approach. The core View and Configure Charts

Реter Konow 2024.09.04 20:43 #692

Following up on yesterday's topic...

Today we will conceptually summarise and finish the topic of element flashing.

Yesterday I only looked at flashing in the context of signalling dangerous values, but the application can be much broader than that. Here's an example:

Let's imagine a multi-currency Expert Advisor analysing the situation of several marketplaces. Suppose it selects optimal entry/exit points according to a set of complex criteria. The Expert Advisor works in semi-automatic mode and the trader cannot or does not want to programme the whole logic of the trading strategy. Its robot monitors marketplaces, collects data and informs about important points. The expert's work is limited to analysing and displaying the results in tables and diagrams. The final decision on transactions is made by a person.

In this variant, trading activity consists in observing real-time data streams and packing the series of running values into custom parameters. The latter help to scale situational awareness.

However, live engagement requires timely decisions. The problem arises when analysis results are displayed in different windows through multiple graphical views. The amount of information requiring attention grows and the focus of attention splits. As a result, the market perspective becomes clouded in the trader's mind and the efficiency of his work decreases. Fatigue comes.

In this case flashing elements are a good help:

It signals the urgency of making decisions or taking actions.

It informs about the speed of incoming changes.

Tells about the relevance of the observed events.

Informs about the significance of the results obtained: figures, differences, ranges, sums, limits, etc.

To summarise:

Blinking can remind, warn, inform, signal or indicate.

Flashing centres focus and increases trader concentration.

Frequency and colour dictate the urgency of decisions or actions.

Combined with colour change, flashing increases the interactivity of the GUI and the trader's efficiency.

Let's get down to a practical breakdown of the new functionality:

1. Let's prescribe the order of preparatory actions.

2. Let's enable flashing of the button frame when pressing and disable flashing when unpressing.

3. Let's switch on the flashing of the button text.

4. Let's switch on the flashing of the button base.

5. Let's connect several other elements to the flashing of the button: a field with buttons, a slider, a checkbox and others.

6. Let's trigger the blinking of the window frame.

7. Let's connect the blinking speed of the elements with the value of the slider and the field with buttons.

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

1. Order of preparatory actions:

First, let's write wrappers of the Blink_start() and Blink_stop() functions, which should switch the blinking of elements on and off when called.

The Blink_start() function will be responsible for switching on. It will be called on the press event. The Blink_stop() function will be responsible for switching off blinking. It will be called when the "Start" button is pressed .

Let's find the button in the API file and write the call of the Blink_start() function on pressing the button and the call of the Blink_stop() function on pressing it.

//-----------------------------------------------------
//This function will start the blinking of the elements.
//-----------------------------------------------------
void Blink_start()
{

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

}

Now let's find the case of the "Start" button in the API file and write the calls of Blink_start() and Blink_stop() functions on the event of pressing and pressing the button:

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;

Let's move on to filling the functions with content:

1. We need the frame of the "Start" button to blink. Let's write a call for blinking of the frame as shown in the code below. The identifier of the blinking property of the button frame is p1_BLINK_frame. Specify the colour of blinking and the object of blinking.

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. Now let's implement the disabling of blinking when the button is released. The identifier p1_BLINK_STOP is responsible for switching off the blinking . You don't need to put anything in brackets except for it.

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

Let's check the result:

3. Let's switch on the flashing of the button text instead of the frame. The identifier of the pn_BLINK_text property is responsible for blinking of the 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);
}

Result: the button text blinks blue and stops blinking when the button is pressed.

4. Let's switch on the flashing of the button base. The identifier of the pn_BLINK_base property is responsible for the 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);
}

Result: the button base blinks red and stops blinking when pressed.

Now let's combine the flashing of the button's frame and its text:

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

Result: Thebutton frame and the button text flash synchronously in different colours, as intended.

5. Let's connect other elements in this window to the flashing:

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

Let's also write the disabling of blinking inside the Blink_stop( ) function :

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

Result: the new elements are included in Blink_start() and Blink_stop() and blink as intended.

6. Let's cause the window frame to blink when the button is clicked. (Let's temporarily disable blinking of lagging elements.)

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

Result: the window frame flashes as it should.

*Important: all the considered elements and the window frame blinked at the default speed.

Further we will regulate the flashing speed of the elements with the slider handle and the field with buttons.

7. Let's bind the blinking speed to the value in the field with buttons and slider. All elements and the window frame will blink simultaneously, and the blinking speed will be set manually by these elements.

Let me remind you that the blinking speed depends on the pn_BLINK_DELAY delay .

The minimum possible delay is 1, the maximum is 99.

To calculate the blink delay time, you need to multiply its value by 25 (ms).

By default, the delay is equal to 20, which is 500 milliseconds (20*25ms).

To solve the problem, let's do the following:

1. Let's bring back the blinking of all elements on button press/release and add to them the call/stop window blinking.

2. Write a new function Blink_delay() in which we will place calls that set a pause in blinking. The function will accept the delay value.

3. Let's write a call to the Blink_delay() function from the cases of slider elements and input field in the API file, passing the current value.

We added window frame blinking inside the Blink_start() function :
.

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

We added disabling of window frame blinking inside the Blink_stop() function:

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

Writing the Blink_delay() function:

Call the Blink_delay() function on the slider and input field elements event, and pass the current value of the elements to it:

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

*Important note: it turned out that it is impossible to change the blinking speed of the checkbox and dropdown list elements. This speed is always equal to 20 (half a second). This was done intentionally, but I will probably change it in the future. The other elements can change the blinking speed.

Let's write a call to the Blink_delay() function from the event of the "Spin_the_value" element (the field with buttons). The field is connected to the slider, so there is no need to put the call in the slider case. The connection will work and the slider without a direct call will change the blinking speed through the field with buttons:

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;

Result: the field with buttons and the slider change the blink rate of the elements in the window.

Results:

By implementing element blinking, the interface is much more interactive and informative than before.
The methods to enable, control and disable element blinking are very simple and are described in detail in two posts on this page.
The methods are listed and demonstrated with code examples and videos.
Probably some nuances can be refined or added in the future, but by and large the basic flashing features are already added and do not require major changes.
You can change the colour of blinking while changing the value of the element parameter.

I consider this topic exhausted.

Next on the list - cancellation of entered values by pressing the "Cancel" button.

My approach. The core Crowdsourced GUI. Open beta Strategy Testing - Algorithmic

1 ...63 64 65 66 67 68 69 70

New comment