Recent

Author Topic: Need Help Adding RichChat Utility to THTMLView (Code Included)  (Read 15970 times)

evoshroom

  • Full Member
  • ***
  • Posts: 157
I've been working with THTMLView lately (also called THTMLPort).  It really would make a very good RichChat component, for me and likely for others.  I've just hit one stumbling block.  It appears to have no method to append data without re-parsing the entire document and this is problematic because it means adding lines takes more and more time for each line added.

Now, it does appear to be possible to make the component append data without re-parsing everything and I did attempt to add this feature myself, but it sadly seems above my skill level and I've been messing with the component for days without making progress, so I'm asking the Lazarus community for help.

However, I wanted to put as much work as possible into this and I felt bad I couldn't accomplish this on my own, so I did what I could:

1. I added an AppendFromString function to the initial component.  This will append a new string to the document.  That part I could do.  (The part I couldn't figure out how to do was getting it to not re-parse the whole document and give correct output.)

2. I wrote a test program to show the issue.  The test program will add lines to the THTMLView and time how long it takes to add them.  On my machine adding the first line takes 15-24 milliseconds.  For the next while the lines add at 0-1 milliseconds.  However once you are further in the delay increases, in what looks like a linear fashion, to a second and greater.  Eventually this delay will start lagging the chat so that you type/click something nothing will be added to the chat for seconds.  Theoretically, giving the component the ability to only parse and add the newest line, rather than re-parsing the entire document should fix this.

You can download both the modified component and the test program here:

http://www.mediamarksman.com/HelpWithRichChat.zip

If you are willing to help, download, unzip and then install the modified THTMLView in THTMLPort\package\htmlcomp.lpk.  After the HTMLView component is installed, you can open the test program in the RichChatTest folder.

You can also read more info about THTMLView and what the goal is in the forum thread where this idea started here:

http://www.lazarus.freepascal.org/index.php/topic,17112.0.html

I will be very grateful for any help anyone can offer.
« Last Edit: August 27, 2012, 06:01:16 pm by evoshroom »

Dibo

  • Hero Member
  • *****
  • Posts: 1048
Re: Need Help Adding RichChat Utility to THTMLView (Code Included)
« Reply #1 on: August 27, 2012, 06:27:35 pm »
Did you try with TIpHTMLPanel from TurboPower IP Pro package (you must add it from Package -> Configure installed package) ? This component parse html from string, but then you can enumarate html node like IpHtmlPanel1.MasterFrame.Html.HtmlNode.ChildNode[0] and probably add new nodes dynamicaly in code.

There is demo in lazarus/examples/turbopower

evoshroom

  • Full Member
  • ***
  • Posts: 157
Re: Need Help Adding RichChat Utility to THTMLView (Code Included)
« Reply #2 on: August 27, 2012, 06:36:46 pm »
Did you try with TIpHTMLPanel from TurboPower IP Pro package (you must add it from Package -> Configure installed package) ? This component parse html from string, but then you can enumarate html node like IpHtmlPanel1.MasterFrame.Html.HtmlNode.ChildNode[0] and probably add new nodes dynamicaly in code.

There is demo in lazarus/examples/turbopower

I haven't tried it yet, but I'll take a look.  How do I get HTML into it?  This did not work:

iphtmlPanel1.MasterFrame.Html.HtmlNode.ChildNode[0] := '<FONT COLOR=#a6e22a>' + 'test' + '</FONT><BR>';

Dibo

  • Hero Member
  • *****
  • Posts: 1048
Re: Need Help Adding RichChat Utility to THTMLView (Code Included)
« Reply #3 on: August 27, 2012, 06:42:10 pm »
For adding html take a look for demo in lazarus/examples/turbopower. There is method IpHtmlPanel1.SetHtmlFromStr("")

evoshroom

  • Full Member
  • ***
  • Posts: 157
Re: Need Help Adding RichChat Utility to THTMLView (Code Included)
« Reply #4 on: August 27, 2012, 06:51:59 pm »
For adding html take a look for demo in lazarus/examples/turbopower. There is method IpHtmlPanel1.SetHtmlFromStr("")

Okay, well I can get HTML in it now, but if the method to get HTML in from strings is SetHtmlFromStr("") then that doesn't solve anything, because it's the exact same problem.  Setting HTML from a string requires to you re-set all the HTML every time you add a line.  Then because you have to re-do all the HTML from beginning to end every time you add a single line, latency due to parsing will slowly become an issue.  I looked in the examples/turbopower_ipro directory but nothing helpful presented itself that was relevant to a RichChat.  An append procedure is still needed, unless there is someway to do it with the ChildNodes?  I'm not sure what you were getting at with that bit...

Dibo

  • Hero Member
  • *****
  • Posts: 1048
Re: Need Help Adding RichChat Utility to THTMLView (Code Included)
« Reply #5 on: August 27, 2012, 07:08:20 pm »
Moment, I'm testing it. SetHTMLFromStr you call only once, then you modify html nodes. I try prepare example for you

Dibo

  • Hero Member
  • *****
  • Posts: 1048
Re: Need Help Adding RichChat Utility to THTMLView (Code Included)
« Reply #6 on: August 27, 2012, 07:17:18 pm »
Ok. Look at attached demo. As you can see, I am adding new portion of html dynamicaly in free pascal code. Try to modify it to some loop and compare time

evoshroom

  • Full Member
  • ***
  • Posts: 157
Re: Need Help Adding RichChat Utility to THTMLView (Code Included)
« Reply #7 on: August 27, 2012, 07:33:39 pm »
Ok. Look at attached demo. As you can see, I am adding new portion of html dynamicaly in free pascal code. Try to modify it to some loop and compare time

Your example doesn't add a new portion of HTML dynamically.  It adds a new portion of plain ASCII dynamically using tNode.ANSIText.  However, there is no tNode.HTML property or it's like and I don't see one for the pNode either.  It's close, but I need to dynamically add HTML.  Is there some obvious way to do this instead of adding plaintext that I am missing?

Dibo

  • Hero Member
  • *****
  • Posts: 1048
Re: Need Help Adding RichChat Utility to THTMLView (Code Included)
« Reply #8 on: August 27, 2012, 07:51:50 pm »
Yes but with my example, speed of updating html should increase much because HTML is not parsed for each time. Is not that what you wanted? You really need add portion of raw html?

evoshroom

  • Full Member
  • ***
  • Posts: 157
Re: Need Help Adding RichChat Utility to THTMLView (Code Included)
« Reply #9 on: August 27, 2012, 07:57:01 pm »
Yes but with my example, speed of updating html should increase much because HTML is not parsed for each time. Is not that what you wanted? You really need add portion of raw html?

Yes, I need to add HTML because I need to add colors, fonts, links and images not just plaintext.  However, each bit of HTML added can be an island unto itself.  Generally what I am adding is:

<FONT COLOR=#a6e22a>' + 'Text' + '</FONT><BR>'

I might change the font color, add an <i></i> for italics, a <a href="site"></a> for a link or even an <img="">.  That's basically the extent of it, but it is more than just plaintext.  If you've ever used AOL Instant Messenger, it has a similar feature-set.  The test example in the zip above basically shows how I'm using it and likely how anyone who was making a RichChat would.
« Last Edit: August 27, 2012, 07:59:52 pm by evoshroom »

Dibo

  • Hero Member
  • *****
  • Posts: 1048
Re: Need Help Adding RichChat Utility to THTMLView (Code Included)
« Reply #10 on: August 27, 2012, 08:14:41 pm »
This can be done, but need much more code. My example was very simple to explain you how this control works. Analogously to my example you must "build" html three using classes from IPHTML unit. You find there classes like TIpHTMLNodeFONT, TIpHTMLNodeBR. For each node class you can pass arguments like color etc. I know that this need much more work, but I know only this solution.

evoshroom

  • Full Member
  • ***
  • Posts: 157
Re: Need Help Adding RichChat Utility to THTMLView (Code Included)
« Reply #11 on: August 27, 2012, 08:56:14 pm »
This can be done, but need much more code. My example was very simple to explain you how this control works. Analogously to my example you must "build" html three using classes from IPHTML unit. You find there classes like TIpHTMLNodeFONT, TIpHTMLNodeBR. For each node class you can pass arguments like color etc. I know that this need much more work, but I know only this solution.

Ah, thank you.  This seems like it has a lot of promise.  I'll attempt to follow through and see if I can get it to where I got THTMLView.  Again, thank you for the help, demo and suggestions.  :D

evoshroom

  • Full Member
  • ***
  • Posts: 157
Re: Need Help Adding RichChat Utility to THTMLView (Code Included)
« Reply #12 on: August 27, 2012, 10:35:11 pm »
This can be done, but need much more code. My example was very simple to explain you how this control works. Analogously to my example you must "build" html three using classes from IPHTML unit. You find there classes like TIpHTMLNodeFONT, TIpHTMLNodeBR. For each node class you can pass arguments like color etc. I know that this need much more work, but I know only this solution.

This was like perfect in basically every way.  I got almost everything working by now and all the critical bits, colors, fonts and HTML.  It performs very fast and without slowdown when lots of text is loaded.  Unlike THTMLView its scrollbar doesn't have a mysterious bug that only lets you scroll to 75% on Mac OS X.  So basically perfect.

I did have one question though I couldn't figure out, if minor.  How do I hide the horizontal scrollbar?
« Last Edit: August 27, 2012, 11:51:01 pm by evoshroom »

evoshroom

  • Full Member
  • ***
  • Posts: 157
Re: Need Help Adding RichChat Utility to THTMLView (Code Included)
« Reply #13 on: August 27, 2012, 11:40:24 pm »
This can be done, but need much more code. My example was very simple to explain you how this control works. Analogously to my example you must "build" html three using classes from IPHTML unit. You find there classes like TIpHTMLNodeFONT, TIpHTMLNodeBR. For each node class you can pass arguments like color etc. I know that this need much more work, but I know only this solution.

Oh, and one other thing.  How do I create a link?  I take it this is done with TIpHTMLNodeA, but this did not work:

Code: [Select]
linkNode := TIpHTMLNodeA.Create(fontNode);
linkNode.Target:='http://www.google.com/'; //??? not sure about this
linkNode.HRef:= 'http://www.google.com/'; 

I also tried attaching it to tNode, but that caused a crash, and I obviously tried Googling for the answer first, but didn't find it.

Thanks again!  It really is working marvelously for my use case!
« Last Edit: August 27, 2012, 11:50:17 pm by evoshroom »

Dibo

  • Hero Member
  • *****
  • Posts: 1048
Re: Need Help Adding RichChat Utility to THTMLView (Code Included)
« Reply #14 on: August 27, 2012, 11:55:41 pm »
Hmm, I don't remember solution (I used this control for "chat" program too), but what I always did when I stuck, I set problematic html to method SetHTMLFromStr (in your case "<p>this is link: <a href="http://google.com">Google</a>) and then if this link works and render fine, then I enumarated html nodes and debug which values it is storing (to some memo etc). So then I could set correct values in pascal

 

TinyPortal © 2005-2018