Gallery of UIs written in MQL - page 48

[Реter Konow]

Nikolai Semko #:

...

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

Of course, fashion is different, but if we talk strictly about rendering, then additional processing of shadows of small icons is just initialisation of 16*16 array cells with values calculated by a child formula. And so for each icon in the window, which can be counted on your fingers. There will hardly be a millisecond delay in rendering. Another thing is the events of redrawing the surfaces of large canvases with many elements. Then, undoubtedly, the graphics gadgets will slow down. But only on the first drawing or when changing the whole canvas. That is not always, but only on certain events. In other cases we just remove the saved resource from memory and draw nothing.

That's the way it is...

[Реter Konow]

Nikolai Semko #:

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

So they don't have transparency as such. The background is marked with -1. The algorithm should simply change this value to the colour of the underlying pixel on the rendering canvas. That is, there is no need to mix colours in this case. But for other purposes the transparency function is very useful. By the way, I borrowed it on your advice from an old article. However, I haven't used it yet. I think where it may come in handy...

[Реter Konow]

Nikolai Semko #:

...

By the way, there's a graphical problem I couldn't handle. It's really hard. Tried to solve it and gave up. Not because I couldn't, but it took too much time. Weighed the pros and cons and gave up trying.

I know you're a big expert on working with canvass colours. I can't help but ask.

So, here's the problem:

How to calculate the colour gradient of the frame of a simple button in such a way that it harmonizes with the colour of the button surface and smoothly passing, emphasizing the curve without changing it. For example, we have a light yellow button. How to colour its 4-5 pixels thick frame correctly? You need to keep in mind that the frame is differently lit from different sides. From the front and left, the frame is light, from the right and bottom it is dark. Also, the closer to the base, the darker the frame is. Plus, there is glare.

How do I calculate the colours for the frame given the original colour of the button?

That's the question. :)

[Реter Konow]

A clear example:

The edges of the button are not coloured. The reason is that we failed to calculate the necessary colours. The usual gradient is not suitable. Here we need some formula for calculating light, shadow, angle, and colour shade. I lack competence in this area.

[Renat Akhtyamov]

Реter Konow #:
By the way, there's a graphical problem I couldn't handle. It's a really hard problem. Tried to solve it and gave up. Not because I couldn't, but it took too much time. Weighed the pros and cons and gave up further attempts.

I know you're a big expert on working with canvass colours. I can't help but ask.

So, here's the challenge:

How to calculate the colour gradient of the frame of a simple button in such a way that it harmonizes with the colour of the button surface and smoothly transitions, emphasizing the curve without changing it. For example, we have a light yellow button. How to colour its 4-5 pixels thick frame correctly? You need to keep in mind that the frame is differently lit from different sides. From the front and left, the frame is light, from the right and bottom it is dark. Also, the closer to the base, the darker the frame is. Plus, there's glare.

How can I calculate the colours for the frame given the original button colour?

Here's a question. :)

1. on the colour - contrasting colours, there is a table (in this case should get a shade of dark blue)

2. on shadows: simulate a light bulb (a point in XYZ space, just in numbers coordinates, no need to build axes) and from it to the edges of straight lines, which will mark the boundaries of the shadow. in this case, the gradient will extend from the first boundary to the second, depending on the height of the button, also geometry.

[Реter Konow]

Renat Akhtyamov #:

1. by colour - contrasting colours, there is a table ( in this case it should turn out a shade of dark blue)

2. on shadows: imitate a light bulb (point) and from it to the edges of straight lines, which will mark the boundaries of the shadow. in this case, the gradient will extend from the first boundary to the second, depending on the height of the button, also geometry.

Can you provide a link to a function, formula, or article? Would help.

[Renat Akhtyamov]

Реter Konow #:
Can you provide a link to a function, formula or article? It would help.

google everything with millions of answers

https://www.geeksforgeeks.org/how-to-determine-the-length-of-a-shadow/

https://www.sravni.ru/kursy/info/cvetovoj-krug-ittena/

[Реter Konow]

Renat Akhtyamov #:

Googled everything with millions of answers

https://www.geeksforgeeks.org/how-to-determine-the-length-of-a-shadow/

https://www.sravni.ru/kursy/info/cvetovoj-krug-ittena/

I don't need millions of answers. I need one right one, and preferably right away).

Otherwise, I don't see much point in doing it. It's unprofitable.

And the question was not about the length of the shadow, but about the correct colouring of thebutton frame with the colour of the button itself.

[Renat Akhtyamov]

Реter Konow #:

I don't need millions of answers. I need one right one, and preferably right away).

Otherwise, I don't see much point in doing it. It's unprofitable.

And the question was not the length of the shadow, but the correct colouring of thebutton frame with the colour of the button itself.

That's the shadow.

If the colour is contrasting, it will be beautiful only for the user, because the artist will get bored.

[Реter Konow]

The task above is just an example of complex colour calculations. I know how to work with a regular gradient. I know how to work with transparency too. The icons are jerky only because I downloaded them from a dubious source for free. The transparency function will not fix them, because you can't programmatically select pixels in the image that need to be made transparent. And if you could, you wouldn't need the transparency function. We just insert the colour of the underlying pixel under that place.

We must admit that the interface is graphically imperfect. That's true. But you have to admit. it's quite passable.

It's the functionality that counts.