Recent

« previous next »
Pages: [1]

Author Topic: IpHtmlPanel.SetHtmlFromStr and Background Color  (Read 3858 times)

Micayah Ritchie

  • New Member
  • *
  • Posts: 18
IpHtmlPanel.SetHtmlFromStr and Background Color
« on: November 26, 2018, 06:40:32 am »
Hello,
I'm new to programming on a whole but needed a way to display superscripts in my program so I forced myself to learn basic html so I could use a IPHtmlPanel to display it. However, now I want to implement color changes and would like to assign color to highlighted text in the program using CSS rgba() but this doesn't seem to work neither in the intended way or when trying to change the background color. The hexadecimal format does work but that doesn't allow for transparency. Is there some work around without having to download, learn and convert my project to match some entirely new package?
I am using Lazarus v1.8.4 on Windows 10

Thanks much

Sample:
 
Code: Pascal  [Select][+][-]
  1. IpHtmlPanel.SetHtmlFromStr(
  2.     '<html>'+
  3.     '<style type="text/css">' +
  4.     'body {' +
  5.     'background-color:rgba(50,50,500.5)}' +
  6.     '</style> '+
  7. '</html>'
  8. );
Logged

wp

  • Hero Member
  • *****
  • Posts: 11923
Re: IpHtmlPanel.SetHtmlFromStr and Background Color
« Reply #1 on: November 26, 2018, 10:24:53 am »
I'm afraid that this will not work with IpHtmlPanel: It does neither support the rgba() command, nor the background-color style for all tags. A better option may be HtmlViewer which you can install from the OnlinePackageViewer which comes with Laz 1.8.4. The syntax for loading a html text from a string is:
Code: Text  [Select][+][-]
  1. HTMLViewer1.LoadFromString(html_string);

Beyond that: What do you expect from a transparent html body? Make the desktop background shine through? This does not work, neither in Firefox nor Chrome.
Logged

Micayah Ritchie

  • New Member
  • *
  • Posts: 18
Re: IpHtmlPanel.SetHtmlFromStr and Background Color
« Reply #2 on: November 26, 2018, 01:31:30 pm »
Thank you for your response. I guess I have some conversion to do then.
I wanted the text background to be transparent, not the body. I just used the body to test it, to see whether or not it was only for the text that it didn't work; I didn't actually want the body to be transparent.
But about the transparent body, If I had components under the HTML Panel wouldn't I be able to see them as color filtered?
Also with Html Viewer, can I et the html from a string in a similar way or would I have to change my algorithm altogether?
Logged

wp

  • Hero Member
  • *****
  • Posts: 11923
Re: IpHtmlPanel.SetHtmlFromStr and Background Color
« Reply #3 on: November 26, 2018, 02:41:59 pm »
Quote from: Micayah Ritchie on November 26, 2018, 01:31:30 pm
If I had components under the HTML Panel wouldn't I be able to see them as color filtered?
No. This would require the HTMLPanel to be transparent. I am not saying that this is not possible but it requires special painting routines. No idea how complex this is.

Quote from: Micayah Ritchie on November 26, 2018, 01:31:30 pm
Also with Html Viewer, can I et the html from a string in a similar way or would I have to change my algorithm altogether?
I played with the HtmlViewer a bit and it does not seem to support transparent text background either.
Setting the html string in both viewers is almost identical:
Code: Pascal  [Select][+][-]
  1. const
  2.   html =
  3.     '<html><body>'+
  4.       '<p>15 cm<sup>3</sup> of <font color="red">H<sub>2</sub>O.</font></p>'+
  5.     '</body></html>';
  6. ...
  7.   IpHtmlPanel1.SetHtmlFromStr(html);
  8. ... or ...
  9.   HtmlViewer1.LoadFromString(html);
Logged

Micayah Ritchie

  • New Member
  • *
  • Posts: 18
Re: IpHtmlPanel.SetHtmlFromStr and Background Color
« Reply #4 on: November 26, 2018, 05:41:43 pm »
Well that is a bit disappointing, does it support transparent text background color that I may use for a highlighter function?
Does it support the use of the rgb() function for the background or just hexadecimal format?
Logged

wp

  • Hero Member
  • *****
  • Posts: 11923
Re: IpHtmlPanel.SetHtmlFromStr and Background Color
« Reply #5 on: November 26, 2018, 08:22:42 pm »
"It" is the THtmlViewer? Yes it does support the rgb() function (like IpHtmlPanel, BTW).

I don't understand why the transparent text background is so important for you in a highlighter function - there's some chance that I am misunderstanding your issue completely - because when there is a uniform page background the transparency of the text background only results in some shift of color parameters. Or do you want to paint the text onto an image?

Perhaps you should post a screenshot or html file of what you expect.
« Last Edit: November 26, 2018, 09:27:18 pm by wp »
Logged

Micayah Ritchie

  • New Member
  • *
  • Posts: 18
Re: IpHtmlPanel.SetHtmlFromStr and Background Color
« Reply #6 on: November 27, 2018, 06:38:31 am »
You're right, I could actually manage the "transparency" myself since I know the background color that I would be using, I don't need rgba at all (it would appear I'm not very bright :-[), but now that you mention it does sound nice to, at some point in the future, make the background a picture. Is that possible and would the highlight then become impossible or is there a way to access individual pixel colors for the picture and shift those individually where necessary?

Also I tried rgb() in an IpHtmlPanel and it didn't work, I'm not sure if it was a syntactic issue.
Code: Pascal  [Select][+][-]
  1. IpHtmlPanel.SetHtmlFromStr(
  2.     '<html>'+
  3.     '<style type="text/css">' +
  4.     'h1 {' +
  5.     'background-color:rgb(50,50,50)}' +
  6.     '</style> '+
  7. '</html>'
  8. );
  9.  
Logged

wp

  • Hero Member
  • *****
  • Posts: 11923
Re: IpHtmlPanel.SetHtmlFromStr and Background Color
« Reply #7 on: November 27, 2018, 10:16:42 am »
Quote from: Micayah Ritchie on November 27, 2018, 06:38:31 am
You're right, I could actually manage the "transparency" myself since I know the background color that I would be using, I don't need rgba at all (it would appear I'm not very bright :-[), but now that you mention it does sound nice to, at some point in the future, make the background a picture. Is that possible and would the highlight then become impossible or is there a way to access individual pixel colors for the picture and shift those individually where necessary?
The drawing routine in the html displayer control should take care of that. But, as I said, this is not straightforward because the standard LCL canvas does not support alpha channel transparency.

Quote from: Micayah Ritchie on November 27, 2018, 06:38:31 am
Also I tried rgb() in an IpHtmlPanel and it didn't work.
The feature was added only recently and is contained in the trunk version, but was back-ported to v2.0RC2. Your v1.8.4 does not yet have it. But again I am asking: Why is it so important? You could write your own function RGBToHtml() to create a color html string and call that (and I am rather sure that such a function already exists somewhere):
Code: Pascal  [Select][+][-]
  1. function RGBToHtml(R, G, B: Byte): String;
  2. begin
  3.   Result := Format('#%.2x%.2x%.2x', [R, G, B]);
  4. end;  
  5. ...
  6. IpHtmlPanel.SetHtmlFromStr(
  7.   '<html>'+
  8.     '<style type="text/css">' +
  9.       'h1 {background-color:' + RGBToHtml(50,50,50) + '}' +
  10.     '</style> '+
  11.   '</html>'
  12. );
Logged

Micayah Ritchie

  • New Member
  • *
  • Posts: 18
Re: IpHtmlPanel.SetHtmlFromStr and Background Color
« Reply #8 on: November 27, 2018, 07:56:01 pm »
Thank you so much for your help but I don't understand that format() procedure you used. Could you link me to a page that explains it.
Logged

wp

  • Hero Member
  • *****
  • Posts: 11923
Re: IpHtmlPanel.SetHtmlFromStr and Background Color
« Reply #9 on: November 27, 2018, 08:01:00 pm »
https://www.freepascal.org/docs-html/rtl/sysutils/format.html

The trick is that Format() replaces place holders in the format string (1st parameter) by the corresponding parameters in the array (2nd parameter). '%.02x' means: insert the parameter (which must be an integer here) as a 2-digit hex value.
« Last Edit: November 27, 2018, 09:48:04 pm by wp »
Logged
Pages: [1]
« previous next »
 

TinyPortal © 2005-2018