Gallery of UIs written in MQL - page 47

 

//------------------------------------------------------ 
//DECLARE A NEW WINDOW
//------------------------------------------------------ 
NEW_WINDOW,  
//------------------------------------------------------
/*SET WINDOW TYPE*/             W_TYPE, DIALOG,  
//------------------------------------------------------
/*WRITE WINDOW'S NAME*/         W_NAME, "Processing the data...", 
//------------------------------------------------------
/*SET WINDOW'S CAPTION*/        CAPTION, "Please wait...", 
//------------------------------------------------------
/*NAME (CAPTION)IN THE MIDDLE*/ NIM,  
//------------------------------------------------------
/*POINT TO WINDOW'S ICON*/      W_ICON, "::Images\\16x16\\No.bmp",   
//------------------------------------------------------
/*ONLY CLOSING BUTTON*/         ONLY_CLOSING, 
//------------------------------------------------------
/*WINDOW ALWAYS ON TOP*/        ALWAYS_ON_TOP, 
//------------------------------------------------------
/*OPEN WINDOW WITH A SOUND*/  //OPENING_SOUND,"::Sounds\\Windows Foreground.wav",  
//------------------------------------------------------ 
/*WINDOW OPENS AT START*/     //OPEN_ON_INIT,   
//------------------------------------------------------
/*LOCK WINDOWS IF OPENED*/    //LOCKS_WINDOWS, ALL_WINDOWS,       
//------------------------------------------------------
/*MARGINS OF THE WINDOW*/       MARGINS, 10,10,/*Х, Y*/
//------------------------------------------------------
//----------------------------------------------------------------------------------
GROUP, A,

__, T_BOX,  "T1",TEXT,
//------------------------------------------------------
                 "Processing the data...",
//------------------------------------------------------
                 END, 
//------------------------------------------------------           
__, REC,    "T2", _A3_,0, _,W,450, _,H,70, _,N_COLOR,(int)C'255,255,255',
//------------------------------------------------------
                 
END_GROUP,
//--------------------------
i, AT, _X2X, "MF",   1, _Y2Y, "MF", 1,
//--------------
"T1",_A3_,0,
"T1", W,450,
"T1", H,40,
//--------------
"T1",text,_C1_,55,
"T1",text,_C2_,10,
"T1",text,N_COLOR,(int)C'255,255,255',
"T1",FONT_SIZE,10,
"T1",TEXT_FONT,"Arial Black",
//--------------
"T1",NG_LINES,75, 
"T1",NG_STEP,1,
"T1",H_GRADIENT,
"T1",N_COLOR,(int)C'255,155,155',
//--------------
//----------------------------------------------------------------------------------------------------
GROUP, A,
//------------------------------------------------------
__, LABEL,A, N_LABEL,  "::Images\\32x32\\Wait.bmp",   
//------------------------------------------------------
END_GROUP,
//--------------------------
i, AT, _X2X, "MF", 10, _Y2Y, "MF", 5,
//----------------------------------------------------------------------------------

//----------------------------------------------------------------------------------------------------
GROUP, A,
//------------------------------------------------------
__, P_BAR,"P1",  W,400, 
//-------------------------------------------
               _,H,15, 
               //--------------------------- 
               _,V_CURRENT, 38,
               //--------------------------- 
               _,N_COLOR,(int)C'230,230,230', 
//------------------------------------------------------
END_GROUP,
//-----------------------------------
i, AT, _C2C, "T2", 0, _C2C, "T2", 10,
//----------------------------------------------------------------------------------

GROUP, A,
//----------------------------------------------------------------------------------
__, VALUE,"V1",  W,35, _,H,20, _,FONT_SIZE,12,_,N_COLOR,(int)clrWhite, _,UNITS__,"%",_,V_CURRENT, 58, 
//----------------------------------------------------------------------------------
    GAP,3,   
//----------------------------------------------------------------------------------    
    BOARD,"complete", FONT_SIZE,11, _,N_COLOR,(int)C'255,255,255',
//----------------------------------------------------------------------------------                                       
    GAP,220,   
//----------------------------------------------------------------------------------    
    I_BUTTON, "IB1",  
//----------------------------------------------------------------------------------    
    GAP,30,   
//----------------------------------------------------------------------------------    
    I_BUTTON,"IB2", 
//----------------------------------------------------------------------------------    
    BREAK_ROW_LINE,
//----------------------------------------------------------------------------------
END_GROUP,
//-----------------------------------
i, AT, _X2X, "P1", 0, _H2Y, "P1", -5,
//-----------------------------------
i,  I_BUTTONS,    W,17, 
                  //---------------------------
                  H,17, 
                  //---------------------------
                  N_COLOR,(int)clrWhite, 
                  //---------------------------
                  label,N_SHADOW,0, 
                  //---------------------------
                  label,P_SHADOW,0, 
                  //---------------------------
                  label,A_SHADOW,0, 
                  //---------------------------
                  label,A_MOVE,0, 
                  //---------------------------
                  END,
//----------------------------------------------------------------------------------

//----------------------------------------------------------------------------------
GROUP, A,

__,CHECKBOX, "More details", A_TEXT,"Fewer details", 
//-------------------------------------------
   GAP,95, 
//-------------------------------------------   
   D_BUTTON, "Cancel", CWIP,
                      //--------------------
                      _,N_FRAME_COLOR, (int)C'51,153,255', 
                      //--------------------
                      BREAK_ROW_LINE,
//------------------------------------------
END_GROUP,
//------------------------------------------
i, AT, _X2X, "MF", 10, _Y2H, "T2", 10,
//----------------------------------------------------------------------------------
END_WINDOW,
 
Реter Konow #:

There is an "error" in the last window. The progress bar actually shows 38%, but it says 58%.

This is actually correct because the code says so:

__, P_BAR, "P1", V_CURRENT, 38,


....

And in another line:

__, VALUE, "V1",

it says: _,V_CURRENT, 58,

Hence the confusion. I was inattentive.

As for the buttons, I just couldn't find the previous pictures. There was a special cross, and a pause icon. I'll try to find and fix it.
 

Peter, you have a problem with the edges of the icons. It's very jarring.

This is because you don't mix the colour that uses the alpha channel with the background.
here is the necessary function to mix two colours that use the alpha channel.

void MixColor(uint clr, uint &addr) { // mix the color in the cell at addr with the color clr and enter the new value in the same cell
   if (GETRGBA(addr) == 0) {
      addr = clr;
      return;
   }
   union argb {
      uint clr;
      uchar c[4];
   } C;
   C.clr = clr;
   if (C.c[3] == 0) return;
   if (C.c[3] == 255) {
      addr = clr;
      return;
   }
   argb Bg;
   Bg.clr = addr;
   float a = C.c[3] / (float)255.0;
   float b = Bg.c[3]/ (float)255.0;
   float ab = b+a-b*a;
   C.c[3]=uchar(ab*255+0.49999);
   if (ab>0.002) {
      float a0 = a/ab;
      float a1 = b*(1-a)/ab;
      C.c[2] = uchar(C.c[2]*a0+Bg.c[2]*a1);
      C.c[1] = uchar(C.c[1]*a0+Bg.c[1]*a1);
      C.c[0] = uchar(C.c[0]*a0+Bg.c[0]*a1);
   }
   addr = C.clr;
}
you can also see how to work with png
https://www.mql5.com/en/code/45439
 
Nikolai Semko #:

Peter, you have a problem with the edges of the icons. It's very hard on the eye.

This is because you don't mix the colour that uses the alpha channel with the background.
here is the necessary function for mixing colours that use the alpha channel.

you can also see how to work with png
https://www.mql5.com/en/code/45439
Hi Nikolai!

There is no trouble, because that's the way the icons are. Note, the 16×16 icons are fine (much less jarring to the eye). Only 32×32 icons have this defect. The reason is the source I downloaded them from. :)

You just have to "steal" better quality labels. Lol.

Well in general, you're right. It's better to work with colour.

 
Реter Konow #:
Hello, Nikolai!

There is no trouble, because that's the way the icons are. Note, the 16×16 icons are fine. Only the 32×32 icons have this defect. The reason is in the source I downloaded them from. :)

You just have to "steal" better quality labels. Lol.

there are many sources now with normal png icons with transparent backgrounds.

For example:
https://pngtree.com/so/colored-icons

See for yourself, of course, but your GUI will look much higher quality without those edge artefacts.

 
Nikolai Semko #:

there are many sources with normal png icons with transparent background.
See for yourself, of course, but your GUI will look much better without this pixelation on the edges.

I'm not arguing... Of course it would look better. By the way, I handle icons pretty well. Pay attention to their shadow on the taskbar buttons. I make the background transparent. But there is colour "rubbish" in the pixels, which is difficult to identify programmatically. Like these flecks on the edges. They are not strictly one colour and it is difficult to separate them from the icon itself to remove them. That's the problem.

We need better icons. Without pixelated "rubbish".
 
Nikolai Semko #:

now there are many sources with normal png icons with transparent background.

For example:
https://pngtree.com/so/colored-icons

I'll have a look at my leisure. Senx!
 
Реter Konow #:
I'm not arguing. Of course it would look better. By the way, I do a pretty good job on the icons. Notice their shadow on the taskbar buttons. I make the background transparent. But there is colour "rubbish" in the pixels, which is difficult to identify programmatically. Like these flecks on the edges. They are not strictly one colour and it is difficult to separate them from the icon itself to remove them. That's the problem.

We just need better icons. Without the pixelated "rubbish".

There is no rub bishin normal png with transparent background. Rubbish appears when processing is wrong. The correct function was given above.

I used to do the same with shadows. Now I don't do that anymore.
Modern fashion without shadows, gradients and curls.
Minimalism in short, which is in favour of rendering performance.

 
Nikolai Semko #:

in normal png with transparent background there is no rubbish. Rubbish appears at incorrect processing. The correct function was given above.

...

Everything is like that, if you don't download icons "piratically", as I did many years ago. ))) Then there is nothing much to process, because the background is marked with -1.

In this case, my algorithm inserts the underlying colour from the pixel surface under the icon. Even the transparency doesn't need to be "tweaked".

But if instead of -1 the pixel has some other colour, it is unrealistic to separate it from the rest, and transparency functions will not help. That's the point.
 
Реter Konow #:

But if a pixel has a different colour instead of -1, then it is unrealistic to separate it from the rest, and transparency functions won't help. Here's the thing.

I'm talking about png icons with transparent background (with alpha channel).