Solved

Looking for shaped label control (Bubble)

Posted on 2003-12-07
14
621 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
ID: 9892212
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
ID: 9892275
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
ID: 9892347
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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 5

Author Comment

by:Voodooman
ID: 9892489
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
ID: 9894627
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
ID: 9895301
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
ID: 9895889
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
 
LVL 2

Expert Comment

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

Hope this helps..
0
 
LVL 34

Expert Comment

by:Slick812
ID: 9935084
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 34

Expert Comment

by:Slick812
ID: 9935116
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 34

Accepted Solution

by:
Slick812 earned 125 total points
ID: 9936082
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
ID: 9937167
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 34

Expert Comment

by:Slick812
ID: 9938334
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
ID: 9938934
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to create forms/units independent of other forms/units object names in a delphi project. Have you ever created a form for user input in a Delphi project and then had the need to have that same form in a other Delphi proj…
In my programming career I have only very rarely run into situations where operator overloading would be of any use in my work.  Normally those situations involved math with either overly large numbers (hundreds of thousands of digits or accuracy re…
I've attached the XLSM Excel spreadsheet I used in the video and also text files containing the macros used below. https://filedb.experts-exchange.com/incoming/2017/03_w12/1151775/Permutations.txt https://filedb.experts-exchange.com/incoming/201…

821 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