Recent

Author Topic: Drawing macOS UI elements with BGRABitmap  (Read 5788 times)

lainz

  • Hero Member
  • *****
  • Posts: 4449
    • https://lainz.github.io/
Drawing macOS UI elements with BGRABitmap
« on: July 21, 2018, 04:06:51 am »
Hi,

I'm starting a new repository and I wish I get it full of drawings, not controls but drawings of the UI elements of macOS.

These elements to be used in any platform, for that I will not use native api, and I will 'hand drawn' everything from the beginning.

And is empty at this moment, but I'm starting to fill it right now

Now included in BGRAControls
https://github.com/bgrabitmap/bgracontrols/

Its just a thing I wanted to do a lot of time ago, and now I have the machine to do it, thanks to my boss  :)

And I choose FPC LCL over HTML+CSS: they already have a lot this things, and a thing like this will be like any other in the wild. But here I can make something I think will be useful for those UI lovers like me as well as GUI Lazarus developers.

BGRABitmap because I think is the best library that has everything needed to simulate that UI. Plus that can be used with OpenGL with no effort at all, if some day anyone wants to make real controls with it.

macOS, because I already made a theme with CustomDrawn for Windows look and feel (Available with BGRAControls), and I don't want to use bitmap files again, just pure drawing routines (I wish).

Why just drawings? Because making a real control takes a lot of hours, and I'm never happy with them. With this I can feel good just looking at the result with no control logic. (For example material design package takes me a lot of time to make just a single control, when in the same project in no time I made custom drawings that looks really good and have no control logic in them).

And finally this is not aimed to be compatible with any license, due that I will imitate an UI of Apple, so the final use can be just for a hobby application I think.

Wish me luck!  ::)
« Last Edit: July 28, 2018, 08:29:54 pm by lainz »

lainz

  • Hero Member
  • *****
  • Posts: 4449
    • https://lainz.github.io/
Re: Drawing macOS UI elements with BGRABitmap
« Reply #1 on: July 21, 2018, 06:38:20 am »
Well, it was about 2:30 hours coding, but I have the Button, ButtonActive and ButtonPressed drawings, as well a working button (I cheated and used a BGRAControls component that is used mainly to create any kind of button with no effort).

Here how it looks (a bit blurry really, better download and compile)
https://media.giphy.com/media/QMIw6P8wjrS2xFVfZh/giphy.gif

It was tricky because at first sight the white one looks like a white background and a single color line (a bit darker in the bottom), but is really a gradient border! In each state of the button uses gradients..
« Last Edit: July 21, 2018, 06:40:36 am by lainz »

bee

  • Sr. Member
  • ****
  • Posts: 393
Re: Drawing macOS UI elements with BGRABitmap
« Reply #2 on: July 21, 2018, 08:39:28 am »
Are you trying to make something similar to Firemonkey controls in Delphi? If you are, that would be great. And it would be better if you also support mobile UI as well.

Have fun and good luck! :)
-Bee-

A long time pascal lover.

lainz

  • Hero Member
  • *****
  • Posts: 4449
    • https://lainz.github.io/
Re: Drawing macOS UI elements with BGRABitmap
« Reply #3 on: July 21, 2018, 03:08:34 pm »
Are you trying to make something similar to Firemonkey controls in Delphi? If you are, that would be great. And it would be better if you also support mobile UI as well.

Have fun and good luck! :)

Yes we can dream.

But I don't know it will be fast enough for mobile.

Firemonkey uses bitmaps for the entire UI.

lainz

  • Hero Member
  • *****
  • Posts: 4449
    • https://lainz.github.io/
Re: Drawing macOS UI elements with BGRABitmap
« Reply #4 on: July 21, 2018, 07:55:26 pm »
I've replicated the drawing with no effort with BGRAControls  ;)
https://forum.lazarus.freepascal.org/index.php/topic,24176.msg292266.html#msg292266

So maybe we need to add the border gradient option into BCButton to have a better look and feel.
« Last Edit: July 21, 2018, 08:13:35 pm by lainz »

Akira1364

  • Hero Member
  • *****
  • Posts: 561
Re: Drawing macOS UI elements with BGRABitmap
« Reply #5 on: July 22, 2018, 12:13:58 am »
Looks good so far!

lainz

  • Hero Member
  • *****
  • Posts: 4449
    • https://lainz.github.io/
Re: Drawing macOS UI elements with BGRABitmap
« Reply #6 on: July 27, 2018, 12:17:10 am »
Are you trying to make something similar to Firemonkey controls in Delphi? If you are, that would be great. And it would be better if you also support mobile UI as well.

Have fun and good luck! :)

I'm rethinking it and yes, maybe it's better to do like Firemonkey. Today I tryed a good Firemonkey theme made entirely with bitmaps and looks really good in desktop and mobile!

I have experience, but if anyone else want to try I have an old code that *was* working to make bitmap themes.
https://github.com/bgrabitmap/bgracontrols/tree/master/test/test_extra/slicescaling_customdrawn_win7

The base technique is 9 slice scaling.

Plus that's easier to draw (you can use a graphic editing tool instead of coding the entire style). Or use existing bitmaps as well.

Edit 2: we have a working BCImageButton as well in BGRAControls right now https://forum.lazarus.freepascal.org/index.php/topic,24176.msg292806.html#msg292806

That can run any bitmap of any style as a shape of the button.

Looks good so far!

Thanks!
« Last Edit: July 28, 2018, 05:32:54 am by lainz »

 

TinyPortal © 2005-2018