Recent

Author Topic: Memo Component that supports HTML markup  (Read 7713 times)

Tony Stone

  • Sr. Member
  • ****
  • Posts: 265
Memo Component that supports HTML markup
« on: August 24, 2021, 01:39:17 am »
I am trying to find a component that is very similar to a memo.  I would like to be able to add lines with HTML markup.  Mostly just to add color, bold etc.  The simple things.  The HTML components I am finding seem very heavy and complex.  I can't help but to think there must be a simple memo that renders very basic HTML markup.  A rich text memo looks like it may be what I need to go with however it just seems like it will be a lot of code to set multiple colors on a single line of text after editing it.  Anyone know of anything out there that may suite me?

My end users will be mostly Windows and Linux.

Tony Stone

  • Sr. Member
  • ****
  • Posts: 265
Re: Memo Component that supports HTML markup
« Reply #1 on: August 24, 2021, 01:57:51 am »
Yeah, I am just looking to display some log files.  And i currently make a synedit scroll down everytime a line is added.  That seems to be an issue with the current HTML components.

I am playing with a RichMemo right now.  Is it possible to add raw RTF code as a string and have it formatted?  I am trying to do that now but not really working out. lol.

By the way.... you are very missed on IRC  ;)

Tony Stone

  • Sr. Member
  • ****
  • Posts: 265
Re: Memo Component that supports HTML markup
« Reply #2 on: August 24, 2021, 02:13:32 am »
Look on the IPro tab


Edit:

 I mean it will display HTML in basic form..

 don't expect a lot from it, its more for displaying etc..

Hey!  I have a partially implemented example of what I am trying to do using TlpHtmlPanel 
I am not so sure I am able to make it scroll yet.  So far though... I think this may be the solution I was looking for.  :D

skalogryz

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2770
    • havefunsoft.com
Re: Memo Component that supports HTML markup
« Reply #3 on: August 24, 2021, 06:18:10 am »
My end users will be mostly Windows and Linux.
Qt5 Memo should be capable of that.
But you'll need to make low-level Q5 access.

avra

  • Hero Member
  • *****
  • Posts: 2532
    • Additional info
Re: Memo Component that supports HTML markup
« Reply #4 on: August 24, 2021, 08:23:45 am »
I am playing with a RichMemo right now.  Is it possible to add raw RTF code as a string and have it formatted?
Wiki has some examples:
https://wiki.freepascal.org/RichMemo#Append_mixed_color_text_at_the_end_of_the_RichMemo
https://wiki.freepascal.org/RichMemo#SetTextAttributes
ct2laz - Conversion between Lazarus and CodeTyphon
bithelpers - Bit manipulation for standard types
pasettimino - Siemens S7 PLC lib

wp

  • Hero Member
  • *****
  • Posts: 12575
Re: Memo Component that supports HTML markup
« Reply #5 on: August 24, 2021, 01:19:04 pm »
I am just looking to display some log files.
In this case possibly the HTML components in the JVCL are enough for you:
- TJvMarkupLabel: displays HTML text with simple formatting instructions, suitable for multi-line text
- TJvMarkupViewer: similar to MarkupLabel, but displays a vertical scrollbar
- TJvHTLabel: a single-line label, probably not what you need.

You do not need to install the entire JVCL to get these components, JvJans is enought. In OPM, select the items jvjanslazr.lpk and jvjanslazd.r under the JVCLLaz node, then install.

Usage is self-explaining but here is the code which I just tested. Note that line-breaks must be triggered by inserting '<br>'; the constant LineEnding is not respected.
Code: Pascal  [Select][+][-]
  1. procedure TForm1.FormCreate(Sender: TObject);
  2. const
  3.   LoremIpsum: string =
  4.     '<font color="red">Lorem ipsum </font>dolor sit amet, '+
  5.     '<b>consetetur sadipscing </b>elitr, sed diam nonumy eirmod tempor '+
  6.     '<br>'+
  7.     'invidunt ut labore et <i>dolore magna </i>aliquyam erat, '+
  8.     '<br>sed diam voluptua. '+
  9.     '<br>'+
  10.     'At vero eos et <font size="12">accusam et justo</font> duo dolores et ea rebum. '+
  11.     '<br>'+
  12.     'Stet <u> clita <font color="blue">kasd</font> <b>gubergren</b></u>, no sea '+
  13.     '<br>' +                  // Linebreak does not work.
  14.     'takimata sanctus est Lorem ipsum dolor sit amet.';
  15. begin
  16.   JvMarkupViewer1.Text :='<u><b><font size="14">JvMarkupViewer:</font></b></u><br>' +  LoremIpsum;
  17.   JvMarkupLabel1.Text := '<b><u><font size="14">JvMarkupLabel:</font></b></u><br>' + LoremIpsum;
  18. end;

Tony Stone

  • Sr. Member
  • ****
  • Posts: 265
Re: Memo Component that supports HTML markup
« Reply #6 on: August 24, 2021, 02:09:28 pm »
I am just looking to display some log files.
In this case possibly the HTML components in the JVCL are enough for you:
- TJvMarkupLabel: displays HTML text with simple formatting instructions, suitable for multi-line text
- TJvMarkupViewer: similar to MarkupLabel, but displays a vertical scrollbar
- TJvHTLabel: a single-line label, probably not what you need.

You do not need to install the entire JVCL to get these components, JvJans is enought. In OPM, select the items jvjanslazr.lpk and jvjanslazd.r under the JVCLLaz node, then install.

Usage is self-explaining but here is the code which I just tested. Note that line-breaks must be triggered by inserting '<br>'; the constant LineEnding is not respected.
Code: Pascal  [Select][+][-]
  1. procedure TForm1.FormCreate(Sender: TObject);
  2. const
  3.   LoremIpsum: string =
  4.     '<font color="red">Lorem ipsum </font>dolor sit amet, '+
  5.     '<b>consetetur sadipscing </b>elitr, sed diam nonumy eirmod tempor '+
  6.     '<br>'+
  7.     'invidunt ut labore et <i>dolore magna </i>aliquyam erat, '+
  8.     '<br>sed diam voluptua. '+
  9.     '<br>'+
  10.     'At vero eos et <font size="12">accusam et justo</font> duo dolores et ea rebum. '+
  11.     '<br>'+
  12.     'Stet <u> clita <font color="blue">kasd</font> <b>gubergren</b></u>, no sea '+
  13.     '<br>' +                  // Linebreak does not work.
  14.     'takimata sanctus est Lorem ipsum dolor sit amet.';
  15. begin
  16.   JvMarkupViewer1.Text :='<u><b><font size="14">JvMarkupViewer:</font></b></u><br>' +  LoremIpsum;
  17.   JvMarkupLabel1.Text := '<b><u><font size="14">JvMarkupLabel:</font></b></u><br>' + LoremIpsum;
  18. end;




Ok great.  Will look into this next time I get to play on my computer!  I did get the tihtmlpanel from ipro working that Jamie had suggested but the problem I was having is every time I added a new line it had to reload all of the text.  It became very messy when there was several hundred lines in my log.  Hopefully the JVCL component is a little more.optimized.  I will also need to save the text to a file when the user exits.  Hopefully it has a save to file procedure built in.  I suppose it wouldn't be that difficult to write a function myself to do that.  I will report back when I test it out.

Tony Stone

  • Sr. Member
  • ****
  • Posts: 265
Re: Memo Component that supports HTML markup
« Reply #7 on: August 24, 2021, 02:12:28 pm »
My end users will be mostly Windows and Linux.
Qt5 Memo should be capable of that.
But you'll need to make low-level Q5 access.

This is good to know.  However I am trying to keep my application light and for now I am using GTK2.  And that would require my end user to have QT installed I think.  And really... Anything low level is a little beyond my current skill-set.  In near future I would like to tackle this suggestion though... At the very least as an exercise.

Thanks for your suggestion!

wp

  • Hero Member
  • *****
  • Posts: 12575
Re: Memo Component that supports HTML markup
« Reply #8 on: August 24, 2021, 04:08:15 pm »
but the problem I was having is every time I added a new line it had to reload all of the text.
Well, this will happen with the jvcl html components as well.

But you can use the html utility functions of jvcl and, for example, custom-draw a list box. I did this in the attached project. A timer creates some dummy log messages (time plus some process status), and the message string is added to a listbox. The messages contain html code to highlight portions of the text. The listbox items are owner drawn using the jvcl html utility code - this is in unit JvJVCLUtils of the JvCore package, but I copied the related code into a separate unit (jvclHTMLUtils), therefore you do not need to install any JVCL package at all. The code to ownerdraw the listbox items is just in a few lines:
Code: Pascal  [Select][+][-]
  1. procedure TForm1.ListBox1DrawItem(Control: TWinControl; Index: Integer;
  2.   ARect: TRect; State: TOwnerDrawState);
  3. var
  4.   listbox: TListBox;
  5. begin
  6.   listbox := Control as TListbox;
  7.   if ([odSelected, odFocused] * State <> []) then
  8.   begin
  9.     listbox.Canvas.Brush.Color := RGBToColor(166, 202, 240);
  10.     listbox.Canvas.Font.Color := clHighlightText;
  11.   end else
  12.   begin
  13.     listbox.Canvas.Brush.Color := clWindow;
  14.     listbox.canvas.Font.Color := clWindowText;
  15.   end;
  16.   listbox.Canvas.FillRect(ARect);
  17.   HTMLDrawText(listbox.Canvas, ARect, [], listbox.Items[Index], 0.7, 100);  // <--- from JVCL
  18. end;
So need for a separate component this way!

Tony Stone

  • Sr. Member
  • ****
  • Posts: 265
Re: Memo Component that supports HTML markup
« Reply #9 on: August 24, 2021, 06:57:17 pm »
but the problem I was having is every time I added a new line it had to reload all of the text.
Well, this will happen with the jvcl html components as well.

But you can use the html utility functions of jvcl and, for example, custom-draw a list box. I did this in the attached project. A timer creates some dummy log messages (time plus some process status), and the message string is added to a listbox. The messages contain html code to highlight portions of the text. The listbox items are owner drawn using the jvcl html utility code - this is in unit JvJVCLUtils of the JvCore package, but I copied the related code into a separate unit (jvclHTMLUtils), therefore you do not need to install any JVCL package at all. The code to ownerdraw the listbox items is just in a few lines:
Code: Pascal  [Select][+][-]
  1. procedure TForm1.ListBox1DrawItem(Control: TWinControl; Index: Integer;
  2.   ARect: TRect; State: TOwnerDrawState);
  3. var
  4.   listbox: TListBox;
  5. begin
  6.   listbox := Control as TListbox;
  7.   if ([odSelected, odFocused] * State <> []) then
  8.   begin
  9.     listbox.Canvas.Brush.Color := RGBToColor(166, 202, 240);
  10.     listbox.Canvas.Font.Color := clHighlightText;
  11.   end else
  12.   begin
  13.     listbox.Canvas.Brush.Color := clWindow;
  14.     listbox.canvas.Font.Color := clWindowText;
  15.   end;
  16.   listbox.Canvas.FillRect(ARect);
  17.   HTMLDrawText(listbox.Canvas, ARect, [], listbox.Items[Index], 0.7, 100);  // <--- from JVCL
  18. end;
So need for a separate component this way!

Uhm... WOW!  Thank you!  I am gonna play with your example and try to understand it all!  I didn't expect someone to put this much effort into my question!  :D  :o

I wonder if this could be the basis for me learning to write my own component that is registered in the component toolbar and everything.  And i have not tried yet but looking through the code I think i may need to implement some other way to store the strings added to the list with the HTML formatting so it can be saved to a file and loaded next time app starts.  I actually wanted to store my logs with no HTML formatting in a plain text and also a file with the formatting!  So I think from what I see here i may be able to figure it all out myself with the work you provided!  Again thank you!

This is for certain on my list of components to create and contribute.  I have been wanting a simple memo-like component and listbox that supports HTML formatting... this really made my day seeing this.   :D

wp

  • Hero Member
  • *****
  • Posts: 12575
Re: Memo Component that supports HTML markup
« Reply #10 on: August 24, 2021, 08:03:17 pm »
i may need to implement some other way to store the strings added to the list with the HTML formatting so it can be saved to a file and loaded next time app starts.
Listbox1.Lines.SaveToFile(filename) saves the log items to file, and Listbox1.Lines.LoadFromFile(filename) reads them back.

I actually wanted to store my logs with no HTML formatting in a plain text and also a file with the formatting!
When the logs have a well-defined structure you can handle them as plain text. Then when the strings are displayed in the OnDrawItem event of the listbox you analyze the string to be displayed (Listbox.Items[Index]) and insert html tags in a local variable. This variable can be passed to the HTMLDrawText procedure. After painting the local variable is discarded. This way you do not need to store the formatted texts.

Tony Stone

  • Sr. Member
  • ****
  • Posts: 265
Re: Memo Component that supports HTML markup
« Reply #11 on: August 25, 2021, 05:45:17 am »
i may need to implement some other way to store the strings added to the list with the HTML formatting so it can be saved to a file and loaded next time app starts.
Listbox1.Lines.SaveToFile(filename) saves the log items to file, and Listbox1.Lines.LoadFromFile(filename) reads them back.

I actually wanted to store my logs with no HTML formatting in a plain text and also a file with the formatting!
When the logs have a well-defined structure you can handle them as plain text. Then when the strings are displayed in the OnDrawItem event of the listbox you analyze the string to be displayed (Listbox.Items[Index]) and insert html tags in a local variable. This variable can be passed to the HTMLDrawText procedure. After painting the local variable is discarded. This way you do not need to store the formatted texts.


So I made some modifications("improvements") to the example application you started.  I have a little polishing up to do on it and I am going to upload it here in hopes it is useful to someone else.  Last "feature" I am working on is a function to match text before adding it to a list based on a word list and changing its look.  Then I am gonna put comments that I think would be helpful to beginners like myself.  I am wondering if I can do the same thing with a memo as we did with the listbox.  I will try tomorrow. 

wp

  • Hero Member
  • *****
  • Posts: 12575
Re: Memo Component that supports HTML markup
« Reply #12 on: August 25, 2021, 10:15:52 am »
I am wondering if I can do the same thing with a memo as we did with the listbox. 
With the standard memo this is not possible because it does not allow to custom-paint the text. Maybe there's a more flexible third-party memo replacement out there, I don't know, but I don't think so.

Why do you need a TMemo? To edit the log items? You could double-click on the listbox item and open an auxiliary form for editing. Or you could use a single-column TStringGrid instead of a TListbox which can be custom-painted as well and allows to in-place edit the cells (requires a bit more code, thoigh).

Tony Stone

  • Sr. Member
  • ****
  • Posts: 265
Re: Memo Component that supports HTML markup
« Reply #13 on: August 26, 2021, 04:50:22 am »
Well here it is.  I didn't add comments to it like I planned.  It is pretty simple.  I just thought comments from a beginner targeted to beginners could be useful.  But i stopped with my 'improvements' as I had a long day at my real job.  And i started running into issues with the floating edit if the form is resized.  I will try harder for my next Lazarus demo project.  Maybe the next one will be useful enough to include with the Lazarus examples!

Thank you all! 

LAZARUS IS THE BEST! (thanks developers)
project1.zip
https://www106.zippyshare.com/v/3Ond2L4f/file.html
(project was too large to upload here, I will put it on one of my servers and update this post soon)

Jurassic Pork

  • Hero Member
  • *****
  • Posts: 1255
Re: Memo Component that supports HTML markup
« Reply #14 on: August 26, 2021, 08:01:44 am »
hello,
Tony on a single monitor computer configuration, i don't see your form when i execute your project  :

Top and Left properties of the form are too large : i can see your form if i reduce the values of those properties.

Friendly, J.P
Jurassic computer : Sinclair ZX81 - Zilog Z80A à 3,25 MHz - RAM 1 Ko - ROM 8 Ko

 

TinyPortal © 2005-2018