Solved

Looking for shaped label control (Bubble)

Posted on 2003-12-07
14
575 Views
Last Modified: 2010-04-05
Hi

I am looking for a shaped label control that will give me a shape like a Hint Bubble - where I can add a Caption.

Like a tooltip but I need to place it on a form to help the user through the use of the software (it needs to be always visible).

My main interest is to use 'hover' buttons (speed buttons with the flat property set to false).

On each form I need to put a speech bubble next to  one of the buttons so that the less savvy will understand that if you hover over them they popup and you can click them!

Before you ask 'Why?' - I am displaying a lot of information to users and I am trying to reduce screen clutter by removing 3d borders and borders in general.

Voodooman



0
Comment
Question by:Voodooman
  • 5
  • 4
  • 2
  • +2
14 Comments
 
LVL 8

Expert Comment

by:gmayo
Comment Utility
This page might have something like what you're after (shaped tooltips): http://www.torry.net/hints.htm . Or maybe http://www.torry.net/nonrect.htm (FormRgn) .

Geoff M.
0
 
LVL 5

Author Comment

by:Voodooman
Comment Utility
Hi gmayo

I am not actually after tooltips enhancements.

I am actually after a bubble (always visible) that I can add to a form with a caption.

An image control is not good because it does not make the non visible part of the bubble transparent.

Any Ideas?

Voodooman
0
 
LVL 8

Expert Comment

by:gmayo
Comment Utility
You can make tooltips permanently visible, hence the tip (gettit?). Perhaps you want something like this: http://www.torry.net/transparentlabels.htm . Or one of the many other label types. Do you have a picture of what you want?

Geoff M.
0
 
LVL 5

Author Comment

by:Voodooman
Comment Utility
Hi gmayo

I am looking to have tootips that are permanently visible.

I would prefer bubble tips as this would look suitably cool.

I really cant see a way to make them permanently visible.

I can easily create an Image with the tip (there are not that many) and make the background transparent (gif).

When I load it into the image control the background is visible - not what I am looking to achieve.

Thanks

Voodooman
0
 
LVL 11

Expert Comment

by:robert_marquardt
Comment Utility
Transparent is not a good idea because it may make the text hard to read.
Have a look at the JediVCL http://sourceforge.net/projects/jvcl
There is a custom Tooltip component included with comic book speech bubble look.
0
 
LVL 5

Author Comment

by:Voodooman
Comment Utility
Hi Robert

I have searched the JediVCL and cannot find the control you mention.

I have also searched the Website  - can you point me at it?

I have had some success by creating a transparent gif of a bubble with the text on it.  

This works ok but would be better if I could just add a caption instead of having to create an image for each tip.

There is also the issue of program size to consider.  It would increase the download speed considerably.

Best Regards

Voodooman
0
 
LVL 11

Expert Comment

by:robert_marquardt
Comment Utility
JvBalloonHint.pas
Maybe you need the JVCL 3, but be careful because it is in mid-development and needs some Delphi knowledge to be installed.
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 2

Expert Comment

by:-Karamja-
Comment Utility
Try looking at this -
http://www.swissdelphicenter.ch/torry/showcode.php?id=1555

Hope this helps..
0
 
LVL 33

Expert Comment

by:Slick812
Comment Utility
hello Voodooman, , , A TLabel is a TGraphicControl, which means that it is NOT a windowed control, and just "Draws" on it's parent's Canvas for it's display, You say you have a Method for drawing a "Bubble" like you want. I would just get the Form's   OnPaint  event and in this draw your bubbles where you want them on the form, and then just do a Canvas.TextOut( ) and draw the Text inside this bubble, you might could have a procedure to draw bubbles and text with a Left, Top, Right and Bottom parameters. . . . . I'm not sure about your concern for transparency, as if you want these bubbles to be On top of  windowed controls, which would be a problem with a TLabel or drawing in the OnPaint event, if you really need to  Draw OVER windowed controls, you might could use the   GetWindowDC( ) function
0
 
LVL 33

Expert Comment

by:Slick812
Comment Utility
If you have a "Picture" of this bubble and text, if you get it into a TBitmap you can use the TBitmaps Transparent to draw this bitmap in the OnPaint Event and have it transparent, which may be better than a "GIF" thing
0
 
LVL 33

Accepted Solution

by:
Slick812 earned 125 total points
Comment Utility
It seems that if you want these text bubble things to be Over Top of other windowed controls, then you will need to make it a windowed control, here is some code for a simple Text Bubble kinda thing component, it uses a Region to shape the Text Bubble, and draws some text on it


unit TextBubble;

interface
uses
  SysUtils, Windows, Messages, Classes, Graphics, Controls;

type
TTextBubble = class(TCustomControl)
  private
  { Private declarations }
    FColor: TColor;
    FText: String;
    FRgn1: Integer;
    procedure SetColor(Value: TColor);
    procedure SetText(Value: String);
    function DoRegion: hRgn;
    procedure WMSize(var Message: TWMSize); message WM_SIZE;

  protected
  { Protected declarations }
    procedure Paint; override;
    procedure CreateParams(var Params: TCreateParams); override;
    procedure CreateWnd; override;
  public
  { Public declarations }
    constructor Create(AOwner: TComponent); override;
    destructor Destroy; override;
    property Canvas;

  published
  { Published declarations }
    property Color: TColor read FColor write SetColor default $E4FBFB;
    property Caption: String read FText write SetText;
    property Width default 120;
    property Height default 62;

end;

procedure Register;

implementation

procedure Register;
begin
RegisterComponents('Samples', [TTextBubble]);
end;

constructor TTextBubble.Create(AOwner: TComponent);
begin
inherited Create(AOwner);
ControlStyle := [csAcceptsControls, csOpaque, csReplicatable];
FColor := $E4FBFB;
Width := 120;
Height := 62;
end;


destructor TTextBubble.Destroy;
var
i, j: Integer;
begin
DeleteObject(FRgn1);
inherited Destroy;
end;

procedure TTextBubble.CreateWnd;
begin
inherited;
FRgn1 := DoRegion;
if FRgn1 <> 0 then
SetWindowRgn(Handle, FRgn1, TRUE);
end;

procedure TTextBubble.CreateParams(var Params: TCreateParams);
begin
inherited CreateParams(Params);
with Params do
  begin
  Style := Style and not WS_BORDER;
  WindowClass.style := WindowClass.style and not (CS_HREDRAW or CS_VREDRAW);
  end;
end;

function TTextBubble.DoRegion: hRgn;
var
RgnP: Integer;
AryPts: Array[0..3] of TPoint;

begin
AryPts[0].x := 0;
AryPts[0].y := Height;
  AryPts[1].x := (Width shr 1)-10;
  AryPts[1].y := (Height shr 1) -10;
AryPts[2].x := (Width shr 1)+10;
AryPts[2].y := (Height shr 1) +10;
  AryPts[3] := AryPts[0];
if Height > 46 then
Result := CreateEllipticRgn(0,0, Width, Height- 10)
else
CreateEllipticRgn(0,0, Width, Height- 4);
RgnP := CreatePolygonRgn(AryPts, 4, WINDING);
CombineRgn(Result, Result, RgnP, RGN_OR);
DeleteObject(RgnP);
end;

procedure TTextBubble.WMSize(var Message: TWMSize);
var
RgnO: Integer;
begin
inherited;
RgnO := FRgn1;
FRgn1 := DoRegion;
if FRgn1 > 31 then
SetWindowRgn(Handle, FRgn1, TRUE);
DeleteObject(RgnO);
Paint;
end;

procedure TTextBubble.SetColor(Value: TColor);
begin
if Value <> FColor then
  begin
  FColor := Value;
  InValidate;
  end;
end;

procedure TTextBubble.SetText(Value: String);
begin
if Value <> FText then
  begin
  FText := Value;
  InValidate;
  end;
end;

procedure TTextBubble.Paint;
var
cRect: TRect;
ColorO: TColor;
begin
inherited;
cRect := ClientRect;
if Height > 46 then
cRect.Bottom := cRect.Bottom- 10
else
cRect.Bottom := cRect.Bottom- 4;
with Canvas do
  begin
  ColorO := Brush.Color;
  Brush.Color := FColor;
  FillRect(GetClientRect);
  if Length(FText) > 0 then
  DrawText(Handle, PChar(FText), -1, cRect, DT_CENTER or DT_SINGLELINE or DT_VCENTER);
  Brush.Color := ColorO;
  end;
end;

end.

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  --

this is just a "DEMO" and is not complete, it does not include any variation in the bubble point thing direction, but you can code that in if you need it
0
 
LVL 5

Author Comment

by:Voodooman
Comment Utility
Hi Slick812

I agree that making a component is the way to go.

I just want to drop a bubble on to the page and enter its caption property. It would be a simple thing to make 4 controls -left bubble, top bubble etc - each with a different bubble image.

Transparent GIFs work well in an image control and have background transparency over the 'not buuble' part of the image - only the background colour is tranparent.

Graphics packages are quite variable in their ability to make transparent GIF's - I found that the transparent GIF made with Photo Impact works fine.

Thanks for the code - its a good start

Voodooman

0
 
LVL 33

Expert Comment

by:Slick812
Comment Utility
A Gif is a Compressed Bitmap, and has no meaning when using the Windows system graphic display, all image files (GIF, JPEG) have to be converted into a system Bitmap before they can be shown on a monitor, that why I said to try and use the TBitmaps transparent thing
0
 
LVL 5

Author Comment

by:Voodooman
Comment Utility
Hi

I drew a yellow bubble in Photo Impact with a black border.

I saved as a GIF.  Before saving I set 'Transparency to True'.

I set the mask to white (the background of the square area of the picture around the bubble).

I loaded the GIF into an image control.  The white background of the picture had become transparent and I can see the form background through what white areas there were on my original picture.

When I change the background of the form the image appears as a bubble surrounded by the colour of the form - it works with any shape.

Try it yourself - it works - I have just repeated it with a star shape.

One thing that keeps the work we do interesting is that there are new challenges everyday.

Voodooman
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Have you ever had your Delphi form/application just hanging while waiting for data to load? This is the article to read if you want to learn some things about adding threads for data loading in the background. First, I'll setup a general applica…
Introduction Raise your hands if you were as upset with FireMonkey as I was when I discovered that there was no TListview.  I use TListView in almost all of my applications I've written, and I was not going to compromise by resorting to TStringGrid…
This tutorial demonstrates a quick way of adding group price to multiple Magento products.
This video demonstrates how to create an example email signature rule for a department in a company using CodeTwo Exchange Rules. The signature will be inserted beneath users' latest emails in conversations and will be displayed in users' Sent Items…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now