Recent

Author Topic: Material Design  (Read 18711 times)

lainz

  • Hero Member
  • *****
  • Posts: 4449
    • https://lainz.github.io/
Re: Material Design
« Reply #30 on: May 22, 2018, 04:09:48 pm »
And thanks to you for making controls out of my library that would be a bit invisible without it.  8)

You're welcome my friend.

Animation for TMDButton is flickering while animation for TMDButtonFocus works as expected.

Yes, that's in fact not a problem of the control, but of the parent control.

TMDButton uses the canvas of the parent, the form, a panel, etc.
TMDButtonFocus uses his own canvas.

To solve that, add DoubleBuffered:=True on Windows for the container of TMDButton (Form or Panel).

Pascal

  • Hero Member
  • *****
  • Posts: 932
Re: Material Design
« Reply #31 on: May 22, 2018, 08:53:37 pm »
Animation for TMDButton is flickering while animation for TMDButtonFocus works as expected.

Yes, that's in fact not a problem of the control, but of the parent control.

TMDButton uses the canvas of the parent, the form, a panel, etc.
TMDButtonFocus uses his own canvas.

To solve that, add DoubleBuffered:=True on Windows for the container of TMDButton (Form or Panel).

Thanks for the tip. Works now!
laz trunk x64 - fpc trunk i386 (cross x64) - Windows 10 Pro x64 (21H2)

circular

  • Hero Member
  • *****
  • Posts: 4181
    • Personal webpage
Re: Material Design
« Reply #32 on: May 23, 2018, 12:02:12 pm »
I tested on Linux. It looks like attached. It looks fine and the tab demo is neat.

Some minor issues:
- It seems like the Select All etc. button texts are a bit too big
- I am confused about the checkbox which one is checked. I suggest to replace the unchecked by a space, or maybe use the square

Regards
Conscience is the debugger of the mind

lainz

  • Hero Member
  • *****
  • Posts: 4449
    • https://lainz.github.io/
Re: Material Design
« Reply #33 on: May 23, 2018, 04:34:15 pm »
Quote
- It seems like the Select All etc. button texts are a bit too big
Hi, Ok, I will try to fix that.

Quote
- I am confused about the checkbox which one is checked.
About the checked, it's based on the "glyph" defined in the globals, but it looks too small on linux as I can see in the picture. Checked is the small "v" and unchecked is an "x".

lainz

  • Hero Member
  • *****
  • Posts: 4449
    • https://lainz.github.io/
Re: Material Design
« Reply #34 on: May 24, 2018, 03:46:03 am »
Hi, in dev-materialdesign branch, I've fixed some things:
- Adding DoubleBuffered in test project for Windows, to prevent flickering
- Changed "v" and "x" to ballotbox and ballotboxwithcheck (BTW, these looks small on Windows 10, and in Windows 7 I don't remember if these are available or are pixelated, so we need maybe to ifdef that later)
- Changed the fonts to 'default' instead of Roboto (big fonts problem), the thing is that Roboto has a bigger height for the normal size, it's better designed for mobile, not for desktop...

circular

  • Hero Member
  • *****
  • Posts: 4181
    • Personal webpage
Re: Material Design
« Reply #35 on: May 24, 2018, 10:23:34 am »
That's almost perfect.

The font size is a bit different for some labels/buttons. It seems that Font.Height = 0. Maybe the default value may change? If I put 14, I get something similar to your screen. If you do that, do you get the same size?
Conscience is the debugger of the mind

soerensen3

  • Full Member
  • ***
  • Posts: 213
Re: Material Design
« Reply #36 on: May 24, 2018, 10:47:19 am »
As far as I know Roboto is only a standard font for Android but I might be wrong. If I remember correctly I installed it manually in Manjaro. Could that be the problem? Calibri in Windows and Deja Vu on Linux are similar but might have different metrics.
Lazarus 1.9 with FPC 3.0.4
Target: Manjaro Linux 64 Bit (4.9.68-1-MANJARO)

lainz

  • Hero Member
  • *****
  • Posts: 4449
    • https://lainz.github.io/
Re: Material Design
« Reply #37 on: May 24, 2018, 11:30:55 pm »
Hi, I will test it again to see. Yes, fonts are not the same between systems AFAIK.
And the problem is because I used Roboto, I will get rid of that and let the OS choose the font.

circular

  • Hero Member
  • *****
  • Posts: 4181
    • Personal webpage
Re: Material Design
« Reply #38 on: May 25, 2018, 11:27:17 am »
I am not sure it is because of Roboto. It has roughly the same size as Arial and FreeSans.

I think it is rather because of the Height property. The default value "0" is kind of random.
Conscience is the debugger of the mind

Thaddy

  • Hero Member
  • *****
  • Posts: 14157
  • Probably until I exterminate Putin.
Re: Material Design
« Reply #39 on: May 25, 2018, 12:30:12 pm »
I am not quite sure if this is the case, but on Windows positive font sizes are in points (72 points per inch) and negative font sizes are in pixels on Windows.
It may be that you can convert Windows font sizes to Linux given the formula:
Code: Pascal  [Select][+][-]
  1. lfHeight = -MulDiv(PointSize, GetDeviceCaps(hDC, LOGPIXELSY), 72);
If that works you can include the preferred font as a resource. You should only do that for Windows and don't touch the Linux font sizes.
Maybe that helps.
Specialize a type, not a var.

lainz

  • Hero Member
  • *****
  • Posts: 4449
    • https://lainz.github.io/
Re: Material Design
« Reply #40 on: May 25, 2018, 02:43:40 pm »
I am not sure it is because of Roboto. It has roughly the same size as Arial and FreeSans.

I think it is rather because of the Height property. The default value "0" is kind of random.

Is not random. But also is not constant between OS. Also is not constant in the same OS ( for example Windows 7: you can tweak fonts as you wish).

I need to test what happens if I change it to 14 as you do in LazPaint and see if the new LCL high DPI scales it properly on Windows.

I coded an app and we have an ifded on it to choose font height for each OS.

I am not quite sure if this is the case, but on Windows positive font sizes are in points (72 points per inch) and negative font sizes are in pixels on Windows.
It may be that you can convert Windows font sizes to Linux given the formula:
Code: Pascal  [Select][+][-]
  1. lfHeight = -MulDiv(PointSize, GetDeviceCaps(hDC, LOGPIXELSY), 72);
If that works you can include the preferred font as a resource. You should only do that for Windows and don't touch the Linux font sizes.
Maybe that helps.

Thanks Thaddy. I need to try that code as well.

Xor-el

  • Sr. Member
  • ****
  • Posts: 404
Re: Material Design
« Reply #41 on: May 25, 2018, 05:25:17 pm »
@circular, @lainz, I know this question sounds weird but are there plans to make your libraries (material design, bgra controls and bitmap) Delphi compatible?
By the way, splendid job you guys are doing. :)
« Last Edit: May 25, 2018, 05:27:04 pm by Xor-el »

circular

  • Hero Member
  • *****
  • Posts: 4181
    • Personal webpage
Re: Material Design
« Reply #42 on: May 26, 2018, 08:58:10 am »
I don't mind if someone helps making BGRABitmap compatible with Delphi. That would be a challenge but I suppose it would be doable.

Personally I don't have Delphi. The latest version, that can compile for Linux, costs 4849 euros. There is a Starter Edition, however it compiles only for Windows.

I am moving away from Windows, but thankfully Lainz is still here so that we can test a bit on Windows.

So I would say we are planning to maintain it on Lazarus on Windows and Linux. Hopefully soon we can also work on the MacOS version.
« Last Edit: May 26, 2018, 09:00:21 am by circular »
Conscience is the debugger of the mind

lainz

  • Hero Member
  • *****
  • Posts: 4449
    • https://lainz.github.io/
Re: Material Design
« Reply #43 on: May 26, 2018, 06:41:20 pm »
Hi, I've fixed some things in the dev branch:
- AutoSize now takes into account the glyph in radio and checkbox
- The font size set always to 0 (in the control and in the demo)

I need to investigate how to fix font sizes, because the new LCL scaling is not the same as we did for example in LazPaint, is brand new and if I set font to 0, when I read it with Font.Height inside the control code is not 0! So, the problmes come by that, at least on Windows.

soerensen3

  • Full Member
  • ***
  • Posts: 213
Re: Material Design
« Reply #44 on: May 26, 2018, 09:18:29 pm »
You can clearly see it's a different type. Look at the 'g' for example. If you chose a type like arial at least for debugging, you can maybe better solve your font size problem.
Lazarus 1.9 with FPC 3.0.4
Target: Manjaro Linux 64 Bit (4.9.68-1-MANJARO)

 

TinyPortal © 2005-2018