Lazarus

Programming => Packages and Libraries => Lazarus Extra Components => Topic started by: CCRDude on November 05, 2018, 10:21:57 pm

Title: TIpHTMLPanel
Post by: CCRDude on November 05, 2018, 10:21:57 pm

While making my project cross-platform, my last hurdle today was HTML display (used for displaying update notice and the integrated help).

I've been using TFrameViewer09 for many years, but it displays a blank page on Cocoa. To use RichMemo, my first alternative, I would have needed a HTML to RTF converter.

I then found TIpHTMLPanel. TurboPower is a name that rings a bell, I used libraries from a company by that name like 25 years ago for creating GUIs on Turbo Pascal 5.5.

Works fine - except for the background color. The background is always white for me.

I do set the default colors this way:

Code: [Select]

   if Assigned(FHTMLIP) then begin
      FHTMLIP.Color := AStyle.Window.BackgroundColor;
      FHTMLIP.DefaultTypeFace := AStyle.Window.FontName;
      FHTMLIP.LinkColor := AStyle.Table.Header.ActionFont.FontHoveredColor;
      FHTMLIP.BgColor := AStyle.Window.BackgroundColor;
      FHTMLIP.ALinkColor := AStyle.Table.Header.ActionFont.FontHoveredColor;
   end;

This is called in SetParent before the HTML is loaded from the files resources. Settng the type face and link color works correctly.

What can I do to get the background correct?

(adding it as css is not an option, since due to support for Dark Mode in Windows and MacOS I need to toggle background & font colors.

Title: Re: TIpHTMLPanel
Post by: wp on November 05, 2018, 11:31:26 pm

Using the BgColor property, I did not get it to work either. But setting the background color with a style works. So why don't you replace the text "<body" of your html by "<body style="background-color:yellow" to force a yellow background?

Title: Re: TIpHTMLPanel
Post by: lucamar on November 06, 2018, 12:35:35 am

Quote from: CCRDude on November 05, 2018, 10:21:57 pm

(adding it as css is not an option, since due to support for Dark Mode in Windows and MacOS I need to toggle background & font colors.

If nothing else works and you must add CSS--as suggested by wp--you could try using something like this to convert any TColor to a CSS-color string:

Code: Pascal [Select][+]

function ColorToHTML(const AColor: TColor): String;
begin
  Result := '#' + HexStr(ColorToRGB(AColor), 6);
end;

Title: Re: TIpHTMLPanel
Post by: CCRDude on November 06, 2018, 09:15:02 am

Many thanks for the confirmation that BgColor does not seem to work.

Changing the HTML content would mean that I would have to cache/reload the content. I looked into TipHTML to see how it handles CSS, and found another way:

Code: [Select]

procedure TCustomSpybot3DocumentFrame.HtmlEnumerator(Document: TIpHtml);
var
   n: TIpHtmlNode;
   nb: TIpHtmlNodeBODY;
begin
   if not Assigned(Document.HtmlNode) then begin
      Exit;
   end;
   if Document.HtmlNode.ChildCount < 1 then begin
      Exit;
   end;
   n := Document.HtmlNode.ChildNode[0];
   if not (n is TIpHtmlNodeBODY) then begin
      Exit;
   end;
   TIpHtmlNodeBODY(n).BgColor := FHTMLIP.BgColor;
end;

And where the style change is applied:

Code: [Select]

      FHTMLIP.EnumDocuments(@HtmlEnumerator);

Title: Re: TIpHTMLPanel
Post by: bobix on November 06, 2018, 10:18:50 am

I dont think that TIpHTMLPanel has css support, but this maight be supported:

<html>
<body bgcolor="#E6E6FA">
<h1>Hello world!</h1>
<p>Hello world!</p>
</body>
</html>

Title: Re: TIpHTMLPanel
Post by: wp on November 06, 2018, 10:30:53 am

I fixed BgColor in the current trunk version, and it is a published property now. It is used unless a background color or background image is defined inside the html string.

Not sure about backporting to v2.0RC3 as the new version will soon be released. If you don't use trunk you can fix your version with these changes:

Open the file iphtml.pas in the folder components/turbopower_ipro. Make a backup copy first.
Find procedure TIpHtmlFrame.InitHtml and add the line: "FHtmlBgColor := FViewer.BgColor;", maybe after "FHtml.VLinkColor := ..."
Find procedure TIpHtmlNodeBODY.Render. In the "else" branch of "if ScaleBitmaps" there is a "Owner.Target.Brush.Color := clWhite;". Replace the "clWhite" by "Owner.BgColor". You probably can replace also the two other "clWhite"s in this procedure in the same way.
Find the "published" declaration section of TIpHtmlPanel. Add a "property BgColor;".
Reinstall the component.

Title: Re: TIpHTMLPanel
Post by: wp on November 06, 2018, 10:32:10 am

Quote from: bobix on November 06, 2018, 10:18:50 am

I dont think that TIpHTMLPanel has css support

Wrong, it does have css support, but not for all fancy features. "background-color" is supported.

Title: Re: TIpHTMLPanel
Post by: CCRDude on November 06, 2018, 12:50:04 pm

Thank you very much @wp!
Glad to hear this is still in development and gets improved so quickly!
Good to have a fix instead of having to use a workaround :)