* * *

Author Topic: Custom Drawn Controls advances  (Read 116642 times)

circular

  • Hero Member
  • *****
  • Posts: 2740
    • Personal webpage
Re: Custom Drawn Controls advances
« Reply #15 on: November 15, 2011, 11:24:08 am »
Well, for example, the class TBGRAButton has gradient styles, round corner radius, text shadow option... Some other controls have less properties like TBGRAFlashProgressBar, which has only one color property.
Conscience is the debugger of the mind

felipemdc

  • Administrator
  • Hero Member
  • *
  • Posts: 3537
Re: Custom Drawn Controls advances
« Reply #16 on: November 15, 2011, 01:03:45 pm »
Well, for example, the class TBGRAButton has gradient styles, round corner radius, text shadow option... Some other controls have less properties like TBGRAFlashProgressBar, which has only one color property.

Ok, now I see, in this case I just came up with a different idea: Inherit your controls from the ones in custom drawn controls and then override anything you need, add properties, make sure to completely override the Paint method.

If your button is extremely different it might be of no use basing it on TCDButton, buttons are so simple anyway. What I really wanted to share here was code for complex controls. For example code for creating the popup of a TCDComboBox is something which I lack, but it seams that you have already, so I would be very happy to accept a patch on that ;) And then you can inherit from TCDComboBox and changed what you need and add your drawing options.

Similarly I already have an advanced TCDPageControl which might be useful for you to base on (no idea if you already have that).

lainz

  • Guest
Re: Custom Drawn Controls advances
« Reply #17 on: November 15, 2011, 02:33:46 pm »
Just we're using TBGRAButton as combobox with a TPopupMenu in testbgracontrols main form =)

The way we style the buttons with different looks is in testbgracontrols. Procedures to change all properties in a TBGRAButton in the bgrasamples unit.

BGRAButton has that kind of drawing with a lot of property for each state (because that, the control is fully customizable), other components like TWin7ToolBar use BGRAButtons and style them with a DrawStyle (TBGRASampleStyle).

BTW if I want to create a 100% equal to for example Win7Button i can't. Some buttons has an' inner shadow' when button is pressed. Some buttons hasn't the offset in the text when you press the button and some other things.. so it is customizable, but if we create separated procedures to draw the buttons those can look as you want.

ToolBars are drawn with a different procedure for each style, for example this to draw an iOS ToolBar

Code: [Select]
procedure DrawiOSToolBar(ABitmap: TBGRABitmap);
begin
  DoubleGradientAlphaFill(ABitmap, Rect(0, 3, ABitmap.Width, ABitmap.Height - 6),
    BGRA(172, 185, 201), BGRA(134, 153, 178, 255),
    BGRA(125, 147, 175, 255), BGRA(110, 132, 162, 255),
    gdVertical, gdVertical, gdVertical, 0.5);
  with ABitmap do
  begin
    // Top Bevel
    SetHorizLine(0, 0, Width - 1, BGRA(201, 210, 221, 255));
    SetHorizLine(0, 1, Width - 1, BGRA(173, 184, 200, 255));
    SetHorizLine(0, 2, Width - 1, BGRA(179, 190, 205, 255));
    // Bottom Bevel
    SetHorizLine(0, Height - 6, Width - 1, BGRA(107, 129, 158, 255));
    SetHorizLine(0, Height - 5, Width - 1, BGRA(116, 139, 170, 255));
    SetHorizLine(0, Height - 4, Width - 1, BGRA(48, 54, 62, 255));
    // Bottom Shadow
    SetHorizLine(0, Height - 3, Width - 1, BGRA(0, 0, 0, 75));
    SetHorizLine(0, Height - 2, Width - 1, BGRA(255, 255, 255, 50));
    SetHorizLine(0, Height - 1, Width - 1, BGRA(0, 0, 0, 10));
  end;
end; 

For some things like shadow we need to use BGRABitmap filters, like blur. BGRAImageButton uses BGRABitmap alpha and resample (fine resample).

circular

  • Hero Member
  • *****
  • Posts: 2740
    • Personal webpage
Re: Custom Drawn Controls advances
« Reply #18 on: November 15, 2011, 02:34:04 pm »
@felipe

I undestand. Yes it is a good idea to derive from your controls. Nevertheless, for a matter of dependency, this will be possible to achieve only when your controls are part of LCL. Otherwise we may share abstract classes in units that are in duplicated in both packages.
Conscience is the debugger of the mind

lainz

  • Guest
Re: Custom Drawn Controls advances
« Reply #19 on: November 15, 2011, 11:35:11 pm »
This is my test for custom button drawing,

this button has only normal and mouse enter states,

see image attached,

using bgrabitmap, bgracontrols (only bgrasamples), customdrawn:

Code: [Select]
unit Unit1;

{$mode objfpc}{$H+}

interface

uses
  Classes, SysUtils, FileUtil, customdrawncontrols, Forms, Controls, Graphics,
  Dialogs, BGRASamples, BGRABitmap, BGRABitmapTypes, types,

  { custom drawn }
  customdrawn_common, customdrawndrawers;

type

  { TLainzDrawer }

  TLainzDrawer = class(TCDDrawerCommon)
  public
    procedure DrawButton(ADest: TCanvas; ADestPos: TPoint; ASize: TSize;
      AState: TCDControlState; AStateEx: TCDControlStateEx); override;
  end;

  { TForm1 }

  TForm1 = class(TForm)
    CDButton1: TCDButton;
  private
    { private declarations }
  public
    { public declarations }
  end;

  procedure RegisterDrawerLainz;

var
  Form1: TForm1;

implementation

procedure RegisterDrawerLainz;
begin
  RegisterDrawer(TLainzDrawer.Create, dsExtra1);
end;

{$R *.lfm}

{ TLainzDrawer }

procedure TLainzDrawer.DrawButton(ADest: TCanvas; ADestPos: TPoint;
  ASize: TSize; AState: TCDControlState; AStateEx: TCDControlStateEx);
var
  temp: TBGRABitmap;
  s: TSize;
begin
  // Bkg
  if csfMouseOver in AState then
    temp := DrawiOSElement(ASize.Cx, ASize.Cy, iOSBar)
  else
    temp := DrawiOSElement(ASize.Cx, ASize.Cy, iOSBackground);
  // Font
  temp.FontQuality := fqSystemClearType;
  temp.FontHeight := AStateEx.Font.Height;
  s := temp.TextSize(AStateEx.Caption);
  temp.TextOut(Round((ASize.Cx - s.cx) div 2), Round((ASize.Cy - s.cy) div 2),
  AStateEx.Caption, BGRA(0,0,0,255));
  // Draw
  temp.Draw(ADest, ADestPos.x, ADestPos.y);
  temp.Free;
end;


end.

I've put the register of the style in the lpr because I don't know if there is other place to put it

Code: [Select]
  Application.CreateForm(TForm1, Form1);
  RegisterDrawerLainz; 
« Last Edit: November 15, 2011, 11:36:52 pm by lainz »

Rustam Asmandiarov

  • New member
  • *
  • Posts: 46
Re: Custom Drawn Controls advances
« Reply #20 on: November 16, 2011, 05:58:35 am »
Tell me, rendering component uses a library or something which is completely based on the source code? The fact is that I want to write OpenGL application that would use less third-party libraries such as GTK and QT. I just want TFrom and TCustomControl.
Since this is a cross-platform application will be no additional installation is necessary libraries in the platform causing the problem.

Скажите мне, отрисовка компонентов использует ли какую нибудь библиотеку или полностью основана на исходном коде? Дело в том что я хочу написать OpenGL приложение которое бы меньше использовало сторонние библиотеки такие как GTK и QT. Мне всего лишь нужен TFrom и TCustomControl.
Так как это приложение будет кроссплатформенным то дополнительная установка не нужных библиотек в эту платформу вызывает проблему.

felipemdc

  • Administrator
  • Hero Member
  • *
  • Posts: 3537
Re: Custom Drawn Controls advances
« Reply #21 on: November 16, 2011, 07:21:06 am »
Tell me, rendering component uses a library or something which is completely based on the source code?

I'll assume you are talking about Lazarus Custom Drawn Controls here: It uses standard basic elements from the LCL: TCanvas, TBitmap, and friends.

Some drawers use TLazIntfImage too.

Quote
The fact is that I want to write OpenGL application that would use less third-party libraries such as GTK and QT. I just want TFrom and TCustomControl.
Since this is a cross-platform application will be no additional installation is necessary libraries in the platform causing the problem.

That's one of the objectives of the Custom Drawn Widgetset of Lazarus:

http://wiki.lazarus.freepascal.org/Custom_Drawn_Interface

But it is very initial, only the Cocoa backend already supports most basic parts of TForm.

Until it gets ready (patches are welcome) you can use the fpGUI widgetset:

http://wiki.lazarus.freepascal.org/fpGUI_Interface

Rustam Asmandiarov

  • New member
  • *
  • Posts: 46
Re: Custom Drawn Controls advances
« Reply #22 on: November 16, 2011, 07:59:20 am »
I want a widget with a pure X Server window, is it possible to add a Custom Drawn Widgetse opportunity?
Or there are other widgets that are able to implement it?

Мне требуется виджет с чистым X Server окном, возможно ли добавить в Custom Drawn Widgetse такую возможность?
Или есть другие виджеты которые способны реализовать это?

lainz

  • Guest
Re: Custom Drawn Controls advances
« Reply #23 on: November 28, 2011, 07:06:21 pm »
Really nice  :)

Code: [Select]
procedure TLainzDrawer.DrawButton(ADest: TCanvas; ADestPos: TPoint;
  ASize: TSize; AState: TCDControlState; AStateEx: TCDButtonStateEx);
var
  Str: string;
  lGlyphLeftSpacing: Integer = 0;
  lTextOutPos: TPoint;
  lGlyphCaptionHeight: Integer;
begin
  with ADest do
  begin
    Pen.Color := RGBToColor(163, 166, 168);
    Pen.Style := psSolid;
    Rectangle(0, 0, ASize.cx, ASize.cy - 1);
    GradientFill(Rect(1, 1, ASize.cx - 1, ASize.cy - 2), RGBToColor(235, 239, 242),
      RGBToColor(213, 217, 220), gdVertical);
    Pen.Color := clWhite;
    Line(1, 1, ASize.cx - 1, 1);
    Line(0, ASize.cy - 1, ASize.cx, ASize.cy - 1);
  end;

  if csfSunken in AState then
    with ADest do
    begin
      Pen.Color := clSilver;
      Brush.Style := bsClear;
      Rectangle(1, 1, ASize.cx - 1, ASize.cy - 2);
    end
  else if csfHasFocus in AState then
    with ADest do
    begin
      Pen.Color := clWhite;
      Brush.Style := bsClear;
      Rectangle(1, 1, ASize.cx - 1, ASize.cy - 2);
    end;

  // Position calculations
  ADest.Font.Assign(AStateEx.Font);
  Str := AStateEx.Caption;
  lGlyphCaptionHeight := Max(ADest.TextHeight(Str), AStateEx.Glyph.Height);
  lTextOutPos.X := (ASize.cx - ADest.TextWidth(Str) - AStateEx.Glyph.Width) div 2;
  lTextOutPos.Y := (ASize.cy - lGlyphCaptionHeight) div 2;
  lTextOutPos.X := Max(lTextOutPos.X, 5);
  lTextOutPos.Y := Max(lTextOutPos.Y, 5);

  // Button glyph
  if not AStateEx.Glyph.Empty then
  begin
    ADest.Draw(lTextOutPos.X, lTextOutPos.Y, AStateEx.Glyph);
    lGlyphLeftSpacing := AStateEx.Glyph.Width + 5;
  end;

  // Button text
  lTextOutPos.X := lTextOutPos.X + lGlyphLeftSpacing;
  lTextOutPos.Y := (ASize.cy - ADest.TextHeight(Str)) div 2;
  ADest.Brush.Style := bsClear;
  ADest.Pen.Style := psSolid;
  if csfSunken in AState then
  begin
    Inc(lTextOutPos.X);
    Inc(lTextOutPos.Y);
  end;
  ADest.TextOut(lTextOutPos.X, lTextOutPos.Y, Str);
end;

Code: [Select]
procedure TLainzDrawer.DrawProgressBar(ADest: TCanvas; ADestPos: TPoint;
  ASize: TSize; AState: TCDControlState; AStateEx: TCDProgressBarStateEx);
var
  lProgPos, lProgMult: TPoint;
  lProgSize: TSize;
  lProgWidth, i: integer;
begin
  with ADest do
  begin
    Pen.Color := RGBToColor(163, 166, 168);
    Pen.Style := psSolid;
    Rectangle(0, 0, ASize.cx, ASize.cy - 1);
    GradientFill(Rect(1, 1, ASize.cx - 1, ASize.cy - 2),
      RGBToColor(213, 217, 220), RGBToColor(235, 239, 242), gdVertical);
    Pen.Color := clWhite;
    Line(1, 1, ASize.cx - 1, 1);
    Line(0, ASize.cy - 1, ASize.cx, ASize.cy - 1);
  end;

  // Preparations to have 1 code for all orientations
  lProgSize := Size(ASize.cx - 4, ASize.cy - 4);
  if csfHorizontal in AState then
  begin
    lProgPos := Point(ADestPos.X + 2, ADestPos.Y + 2);
    lProgMult := Point(1, 0);
    lProgWidth := lProgSize.cx;
  end
  else if csfVertical in AState then
  begin
    lProgPos := Point(ADestPos.X + 2, ADestPos.Y + ASize.cy - 2);
    lProgMult := Point(0, -1);
    lProgWidth := lProgSize.cy;
  end
  else if csfRightToLeft in AState then
  begin
    lProgPos := Point(ADestPos.X + ASize.cx - 2, ADestPos.Y + 2);
    lProgMult := Point(-1, 0);
    lProgWidth := lProgSize.cx;
  end
  else
  begin
    lProgPos := Point(ADestPos.X + 2, ADestPos.Y + 2);
    lProgMult := Point(0, 1);
    lProgWidth := lProgSize.cy;
  end;
  lProgWidth := Round(lProgWidth * AStateEx.PercentPosition);

  // Draws the filling
  ADest.Pen.Color := RGBToColor(213, 217, 220);
  ADest.Pen.Style := psSolid;
  ADest.Brush.Color := RGBToColor(213, 217, 220);
  ADest.Brush.Style := bsSolid;
  ADest.Rectangle(
    lProgPos.X,
    lProgPos.Y,
    lProgPos.X + lProgWidth * lProgMult.X + lProgSize.cx * Abs(lProgMult.Y),
    lProgPos.Y + lProgWidth * lProgMult.Y + lProgSize.cy * Abs(lProgMult.X));
end;
« Last Edit: November 29, 2011, 02:13:01 am by lainz »

felipemdc

  • Administrator
  • Hero Member
  • *
  • Posts: 3537
Re: Custom Drawn Controls advances
« Reply #24 on: November 29, 2011, 08:35:18 am »
I want a widget with a pure X Server window, is it possible to add a Custom Drawn Widgetse opportunity?
Or there are other widgets that are able to implement it?

Yes, LCL-CustomDrawn has a direct X11 backend: http://wiki.lazarus.freepascal.org/Custom_Drawn_Interface

But it is not yet ready for usage, it is under construction.

I already implemented the major infra-structure elements for it. We have a non-native Canvas, we have a powerful support for regions which are utilized to clip both painting and input events, and also support for non-native TWinControl and even non-native TForm for Android.

Until now I have already finished basic support for TApplication, TForm, TWinControl, TBrush, TPen, OnPaint, OnMouseDown, OnMouseUp, OnMouseMove in the following backends:
*Android
*X11
*Windows
*Cocoa

You can follow the status advance here:

http://wiki.lazarus.freepascal.org/Roadmap#Status_of_features_on_each_widgetset

I expect the visual controls to advance very fast because they will all be based on the lazarus custom drawn controls

Avishai

  • Hero Member
  • *****
  • Posts: 1021
Re: Custom Drawn Controls advances
« Reply #25 on: November 29, 2011, 06:19:55 pm »
I just had my first look at the Custom Drawn Controls.  Very nice  :)  One of the things I noticed was that BiDiMode is not implemented yet and that makes sense.  I think that may take a while.  The TPageControl that is in Lazarus now is not able to mirror the tabs so that they start from the Right.  Do you know if the plan is to make TCDPageControl so that it can do this?  Anyway, I'm looking forward to using the new controls.
Lazarus Trunk / fpc 2.6.2 / Win32

Johan

  • New member
  • *
  • Posts: 10
Re: Custom Drawn Controls advances
« Reply #26 on: November 29, 2011, 08:48:02 pm »
I am trying to understand how all these pieces fit together so that I can use FPC and Lazarus to build applications for Android devices (because I have tried using the native java method and java is not nice  :D) Please correct me if I am wrong:

The idea is to use the Custom Drawn Controls to build applications for Android and other platforms. Each platform will provide a low level abstraction layer (drawer ?) to facilitate the rendering of the Custom Drawn controls. That way the controls will draw the same on all platforms.

For Android the Custom Drawn Controls will be drawn using OpenGL because this is a method supported by Google.

Am I correct or am I totally of base ?

Johan

felipemdc

  • Administrator
  • Hero Member
  • *
  • Posts: 3537
Re: Custom Drawn Controls advances
« Reply #27 on: November 29, 2011, 09:30:24 pm »
Do you know if the plan is to make TCDPageControl so that it can do this?

I implement what I feel like, or what I get paid for, so I can't say for sure, but BiDi is not in my plans at the moment.

felipemdc

  • Administrator
  • Hero Member
  • *
  • Posts: 3537
Re: Custom Drawn Controls advances
« Reply #28 on: November 29, 2011, 09:42:44 pm »
I am trying to understand how all these pieces fit together so that I can use FPC and Lazarus to build applications for Android devices (because I have tried using the native java method and java is not nice  :D) Please correct me if I am wrong:

You can already start testing it, the example in lazarus/examples/androidlcl works for Android 2.2+

Quote
The idea is to use the Custom Drawn Controls to build applications for Android and other platforms. Each platform will provide a low level abstraction layer (drawer ?) to facilitate the rendering of the Custom Drawn controls. That way the controls will draw the same on all platforms.

For Android the Custom Drawn Controls will be drawn using OpenGL because this is a method supported by Google.

Am I correct or am I totally of base ?

You are correct except for the OpenGL, I tried going for OpenGL but I disliked it so now I am using jnigraphics + SurfaceView which very efficient too and is the alternative to OpenGL provided in Android. It can be changed to OpenGL in the future if ever required, or even made selectable.

About the Custom Drawn Controls they can currently be put into the form directly, but in the future besides that they will also be used internally to implement LCL basic controls like TButton, TPageControl, etc, in LCL-CustomDrawn.

Johan

  • New member
  • *
  • Posts: 10
Re: Custom Drawn Controls advances
« Reply #29 on: November 30, 2011, 03:25:23 pm »
I think I am close to getting the "androidlcltest" application to compile. I had to use version r7 of the android ndk as I cannot find version r5 as described in the demo. I also had to change the libraries path to

/home/jkotze/android-ndk-r7/platforms/android-8/arch-arm/usr/lib/;
/home/jkotze/android-ndk-r7/toolchains/arm-linux-androideabi-4.4.3/prebuilt/linux-x86/lib/gcc/arm-linux-androideabi/4.4.3

as the paths seem to have changed between version r5 and r7.

I have compiled LCL-Base without issues and when I try to compile androidlcltest I get the following errors:

androidlcltest.lpr(17,3) Error: Identifier not found "Java_com_pascal_lclproject_LCLActivity_LCLOnTouch"
androidlcltest.lpr(17,53) Error: The symbol can't be exported from a library
androidlcltest.lpr(18,3) Error: Identifier not found "Java_com_pascal_lclproject_LCLActivity_LCLDrawToBitmap"
androidlcltest.lpr(18,58) Error: The symbol can't be exported from a library
androidlcltest.lpr(19,3) Error: Identifier not found "JNI_OnLoad"
androidlcltest.lpr(19,14) Error: The symbol can't be exported from a library
androidlcltest.lpr(20,3) Error: Identifier not found "JNI_OnUnload"
androidlcltest.lpr(20,16) Error: The symbol can't be exported from a library

I think it has to do with the NDK, but what is wrong ? Will it only work with r5 of the NDK and if so, where can I find that older version.

 

Recent

Get Lazarus at SourceForge.net. Fast, secure and Free Open Source software downloads Open Hub project report for Lazarus