Recent

Author Topic: [solved] How to control checkbox colors  (Read 6901 times)

lainz

  • Hero Member
  • *****
  • Posts: 4613
  • Web, Desktop & Android developer
    • https://lainz.github.io/
Re: [solved] How to control checkbox colors
« Reply #15 on: May 27, 2024, 01:36:20 am »
Windows uses bitmaps in themes. It depends on the version of Windows how it looks.

KodeZwerg

  • Hero Member
  • *****
  • Posts: 2269
  • Fifty shades of code.
    • Delphi & FreePascal
Re: [solved] How to control checkbox colors
« Reply #16 on: May 27, 2024, 01:37:41 am »
Thanks kodezwerg
You are welcomed.
Is it possible to have a colored checkbox that looks more like 5he standard checkbox though?
Yes, four variations come into my mind by thinking about.
1. search in my code where i make a call to "Ellipse()", comment this out
    set a color to Brush/Pen that you want that the border get - keep in mind it should have 2 different colors, one for "mouse is not over" and one for opposite
    draw a framerect 13x13
    depend on state draw something inside that framerect (i suggest to paint max 10x10 to have some pixel padding between graphic and border)
    (ie 2 lines for a checkmark, paint nothing for unchecked, filled rectangle for grayed)
    keep rest of code, should work out-of-the-box
2. search in my code where i make a call to "Ellipse()", comment this out
    add code that loads images from resource
    create for each state 2 images (mouseover/mousenotover) with a size of 13x13
    based on current state load image and copyrect it to my LBitmap, watch source to differentiate between checkbox modes like alignment/bidi to place image on correct side (left/right)
    keep rest of code, should work out-of-the-box
3. search in my code where i make a call to "Ellipse()", comment this out
    select a font that offer checkboxes in different states
    draw text instead of painting image
    keep rest of code, should work out-of-the-box
4. windows exclusive would be to grab systems HBITMAP for the checkbox and would end again in its basic color
    it is possible to re-color by putting a alphatransparent color (LBackground) over it
    if thats your destiny you should switch to PNG for easier doing

Does that answer your question?
If you go the variant 1 way, it would be cool to watch your progress so I might add a "Style" selector including "Classic" and my "Proof-Of-Concept".
« Last Edit: Tomorrow at 31:76:97 xm by KodeZwerg »

lainz

  • Hero Member
  • *****
  • Posts: 4613
  • Web, Desktop & Android developer
    • https://lainz.github.io/
Re: [solved] How to control checkbox colors
« Reply #17 on: May 27, 2024, 01:52:21 am »
Remember if you use bitmaps you must provide for each resolution of high dpi settings. For example I run in 150%  of zoom in Windows 11.


KodeZwerg

  • Hero Member
  • *****
  • Posts: 2269
  • Fifty shades of code.
    • Delphi & FreePascal
Re: [solved] How to control checkbox colors
« Reply #18 on: May 27, 2024, 02:04:09 am »
Remember if you use bitmaps you must provide for each resolution of high dpi settings. For example I run in 150%  of zoom in Windows 11.
Not really, that be an extra, but while I've tested it I realized that my positioning needs a correction.
For me way more interesting would be to hear if it works on non-windows?
Attached image @ 175% scale
« Last Edit: Tomorrow at 31:76:97 xm by KodeZwerg »

Joanna from IRC

  • Hero Member
  • *****
  • Posts: 1228
Re: [solved] How to control checkbox colors
« Reply #19 on: May 27, 2024, 03:45:14 am »
Thanks for the help I will experiment with code
✨ 🙋🏻‍♀️ More Pascal enthusiasts are needed on IRC .. https://libera.chat/guides/ IRC.LIBERA.CHAT  Ports [6667 plaintext ] or [6697 secure] channel #fpc  #pascal Please private Message me if you have any questions or need assistance. 💁🏻‍♀️

lainz

  • Hero Member
  • *****
  • Posts: 4613
  • Web, Desktop & Android developer
    • https://lainz.github.io/
Re: [solved] How to control checkbox colors
« Reply #20 on: May 27, 2024, 01:48:23 pm »
Remember if you use bitmaps you must provide for each resolution of high dpi settings. For example I run in 150%  of zoom in Windows 11.
Not really, that be an extra, but while I've tested it I realized that my positioning needs a correction.
For me way more interesting would be to hear if it works on non-windows?
Attached image @ 175% scale

I mean bitmap images, not TBitmap.

Edit: Anyway you must scale the drawings... try with ScaleX(Value, 96) and ScaleY(Value, 96)
« Last Edit: May 27, 2024, 01:54:13 pm by lainz »

KodeZwerg

  • Hero Member
  • *****
  • Posts: 2269
  • Fifty shades of code.
    • Delphi & FreePascal
Re: [solved] How to control checkbox colors
« Reply #21 on: May 27, 2024, 02:43:47 pm »
Edit: Anyway you must scale the drawings... try with ScaleX(Value, 96) and ScaleY(Value, 96)
Your edit came to slow, here is my alpha dpi aware for customdrawn (for images they can be resampled at runtime, no need to put many dpi variants in, or?)
Code: Pascal  [Select][+][-]
  1. procedure TCheckBox.CreateImage(var AImage: TCustomBitmap);
  2.   function DPIScaled(const ASize: Integer): Integer;
  3.   begin
  4.     Result := ASize * Round(Graphics.ScreenInfo.PixelsPerInchX / 96);
  5.   end;
  6. const
  7.   BaseX = Integer(13);
  8.   BaseY = Integer(13);
  9. var
  10.   LBitmap: TCustomBitmap;
  11.   LBackground: TColor;
  12.   LRect: TRect;
  13.   LX, LY: Integer;
  14. begin
  15.   // setup background color
  16.   if Self.Color = clDefault then
  17.     LBackground := Self.GetDefaultColor(dctBrush)
  18.   else
  19.     LBackground := Self.Color;
  20.   // create image to paint on
  21.   LBitmap := Graphics.TCustomBitmap.Create{%H-};
  22.   try
  23.     // setup defaults
  24.     LBitmap.SetSize(Self.ClientWidth, Self.ClientHeight);
  25.     LBitmap.Canvas.AntialiasingMode := amDontCare; //amOn;
  26.     LBitmap.Canvas.CopyMode := cmSrcCopy;
  27.     // setup font
  28.     LBitmap.Canvas.Font := Self.Font;
  29.     if Self.Font.Color = clDefault then
  30.       LBitmap.Canvas.Font.Color := Self.GetDefaultColor(dctFont);
  31.     if (not Self.Enabled) then
  32.       LBitmap.Canvas.Font.Color := clGrayText;
  33.     // alpha test: transparency
  34.     // does not work :D (LBitmap is transparent but the control is not)
  35.     // currently it would let original CheckBox painting shine thru
  36.     if FTransparent then
  37.       begin
  38.         LBitmap.TransparentMode := tmFixed;
  39.         LBitmap.TransparentColor := LBackground;
  40.         LBitmap.Transparent := True;
  41.       end;
  42.     // setup initial canvas values
  43.     LBitmap.Canvas.Brush.Color := LBackground;
  44.     LBitmap.Canvas.Brush.Style := bsSolid;
  45.     LBitmap.Canvas.Pen.Style := psSolid;
  46.     // add small effect when the mouse is over the control
  47.     if FMouseOver then
  48.       LBitmap.Canvas.Pen.Color := clBtnHighlight
  49.     else
  50.       LBitmap.Canvas.Pen.Color := clBlack;
  51.     LBitmap.Canvas.Pen.Width := 1;
  52.     // clear image
  53.     LBitmap.Canvas.FillRect(LBitmap.Canvas.ClipRect);
  54.     // prepare circle coordinates
  55.     LX := DPIScaled(BaseX);
  56.     LY := DPIScaled(BaseY);
  57.     LRect.Top := (LBitmap.Canvas.Height - LY) div 2;
  58.     if (Self.Alignment = taRightJustify) and (Self.BiDiMode <> bdRightToLeft) then
  59.       LRect.Left := DPIScaled(1);
  60.     if (
  61.         ((Self.Alignment = taRightJustify) and (Self.BiDiMode = bdRightToLeft))
  62.         or
  63.         ((Self.Alignment = taLeftJustify) and (Self.BiDiMode = bdRightToLeft))
  64.         or
  65.         ((Self.Alignment = taLeftJustify) and (Self.BiDiMode = bdLeftToRight))
  66.         )
  67.        then
  68.       LRect.Left := LBitmap.Canvas.ClipRect.Width - (LX);
  69.     LRect.Right := LRect.Left + LX;
  70.     LRect.Bottom := LRect.Top + LY;
  71.     InflateRect(LRect, -1, -1);
  72.     // choose color by current state
  73.     if Self.Checked or (Self.State = cbChecked) then
  74.       LBitmap.Canvas.Brush.Color := clLime;
  75.     if (not Self.Checked) or (Self.State = cbUnchecked) then
  76.       LBitmap.Canvas.Brush.Color := clRed;
  77.     if (Self.State = cbGrayed) then
  78.       LBitmap.Canvas.Brush.Color := clMedGray;
  79.     LBitmap.Canvas.Ellipse(LRect);
  80.     // prepare color and write text
  81.     LBitmap.Canvas.Brush.Color := LBackground;
  82.  
  83.     if (Self.Alignment = taRightJustify) and (Self.BiDiMode <> bdRightToLeft) then
  84.       LBitmap.Canvas.TextOut(LX + DPIScaled(1), (LBitmap.Canvas.Height - LBitmap.Canvas.TextHeight(Self.Caption)) div 2, Self.Caption)
  85.     else
  86.       LBitmap.Canvas.TextOut(DPIScaled(1), (LBitmap.Canvas.Height - LBitmap.Canvas.TextHeight(Self.Caption)) div 2, Self.Caption);
  87.  
  88.     // when focused draw a rectangle around
  89.     if Self.Focused then
  90.       begin
  91.         LBitmap.Canvas.Brush.Color := clActiveCaption;
  92.         LBitmap.Canvas.FrameRect(LBitmap.Canvas.ClipRect);
  93.       end;
  94.     // transport image
  95.     AImage := TCustomBitmap.Create;
  96.     AImage.Assign(LBitmap);
  97.   finally
  98.     LBitmap.Free;
  99.   end;
  100. end;
I will update soon with ScaleX/Y
« Last Edit: Tomorrow at 31:76:97 xm by KodeZwerg »

Joanna from IRC

  • Hero Member
  • *****
  • Posts: 1228
Re: [solved] How to control checkbox colors
« Reply #22 on: May 27, 2024, 04:05:09 pm »
Kodezwerg I’m curious about your screen shots there doesn’t seem to be any check mark in the one that is checked?
✨ 🙋🏻‍♀️ More Pascal enthusiasts are needed on IRC .. https://libera.chat/guides/ IRC.LIBERA.CHAT  Ports [6667 plaintext ] or [6697 secure] channel #fpc  #pascal Please private Message me if you have any questions or need assistance. 💁🏻‍♀️

KodeZwerg

  • Hero Member
  • *****
  • Posts: 2269
  • Fifty shades of code.
    • Delphi & FreePascal
Re: [solved] How to control checkbox colors
« Reply #23 on: May 27, 2024, 04:25:43 pm »
Kodezwerg I’m curious about your screen shots there doesn’t seem to be any check mark in the one that is checked?
For what do you think the different circle colors are in use on my image?  :o
We got green, red and gray, now take a guess  :-X
It is just a PoC, what else could better proof between "classic rectangle" and the fat dot that I put there 8-)
« Last Edit: Tomorrow at 31:76:97 xm by KodeZwerg »

Joanna from IRC

  • Hero Member
  • *****
  • Posts: 1228
Re: [solved] How to control checkbox colors
« Reply #24 on: May 29, 2024, 02:20:35 pm »
I’m not sure what is involved in the drawing of the checkbox. Or if it’s possible after changing the checkbox color.
✨ 🙋🏻‍♀️ More Pascal enthusiasts are needed on IRC .. https://libera.chat/guides/ IRC.LIBERA.CHAT  Ports [6667 plaintext ] or [6697 secure] channel #fpc  #pascal Please private Message me if you have any questions or need assistance. 💁🏻‍♀️

lainz

  • Hero Member
  • *****
  • Posts: 4613
  • Web, Desktop & Android developer
    • https://lainz.github.io/
Re: [solved] How to control checkbox colors
« Reply #25 on: May 29, 2024, 05:33:25 pm »
I’m not sure what is involved in the drawing of the checkbox. Or if it’s possible after changing the checkbox color.

The drawing is here:

Code: Pascal  [Select][+][-]
  1.  // choose color by current state
  2.  
  3. // color for checked
  4.     if Self.Checked or (Self.State = cbChecked) then
  5.       LBitmap.Canvas.Brush.Color := clLime;
  6.  
  7. // color for unchecked
  8.     if (not Self.Checked) or (Self.State = cbUnchecked) then
  9.       LBitmap.Canvas.Brush.Color := clRed;
  10.  
  11. // color for grayed
  12.     if (Self.State = cbGrayed) then
  13.       LBitmap.Canvas.Brush.Color := clMedGray;
  14.  
  15. // draw the checkbox
  16.     LBitmap.Canvas.Ellipse(LRect);

You need to draw the checkbox instead of drawing an ellopse. For example draw a box and a tickmark depending on the state...

Joanna from IRC

  • Hero Member
  • *****
  • Posts: 1228
Re: [solved] How to control checkbox colors
« Reply #26 on: June 13, 2024, 02:21:43 pm »
Thanks lainz does that do the check part or just box?
✨ 🙋🏻‍♀️ More Pascal enthusiasts are needed on IRC .. https://libera.chat/guides/ IRC.LIBERA.CHAT  Ports [6667 plaintext ] or [6697 secure] channel #fpc  #pascal Please private Message me if you have any questions or need assistance. 💁🏻‍♀️

lainz

  • Hero Member
  • *****
  • Posts: 4613
  • Web, Desktop & Android developer
    • https://lainz.github.io/
Re: [solved] How to control checkbox colors
« Reply #27 on: June 13, 2024, 02:56:05 pm »
Thanks lainz does that do the check part or just box?

Both. Except that there's no check, just a color as KodeZwerg said...

Joanna from IRC

  • Hero Member
  • *****
  • Posts: 1228
Re: [solved] How to control checkbox colors
« Reply #28 on: June 13, 2024, 09:09:51 pm »
Thanks for the answers. I hope this Code is useful to someone.For me the colored checkboxes look too much like radio buttons.
✨ 🙋🏻‍♀️ More Pascal enthusiasts are needed on IRC .. https://libera.chat/guides/ IRC.LIBERA.CHAT  Ports [6667 plaintext ] or [6697 secure] channel #fpc  #pascal Please private Message me if you have any questions or need assistance. 💁🏻‍♀️

lainz

  • Hero Member
  • *****
  • Posts: 4613
  • Web, Desktop & Android developer
    • https://lainz.github.io/
Re: [solved] How to control checkbox colors
« Reply #29 on: June 13, 2024, 10:02:44 pm »
Thanks for the answers. I hope this Code is useful to someone.For me the colored checkboxes look too much like radio buttons.

Feel free to change it. Draw a square and a cross at least, or a check is not that hard, just try...

 

TinyPortal © 2005-2018