[SOLVED] Chat - GUI?

[lars.saalbach]

Hello Unigine-Team,

 

i'm implementing at the moment a chat system in our project.

Sadly there are no right "Widgets" to use aswell as functionality to post/render a chat-system.

 

In attachment you'll find a screenshot.

 

 

Problems:

1. Scrollbar: If I got an edittext and put a scrollbox arround it, and say scrollbox is 500 width and edittext 475, the edittext is growing bigger, Why ever. and fits then into a scrollbox. When the "Scrollbox" is activated now, the v and h sliders are getting INTO the frame and not OUTER the frame, which is not useable aswell, cause this triggers automaticly scrollbars.

2. I cant use a GUI element to insert text, that will be right rendered with "HTML" with fonts etc, which would fit in the right width and do an linebreak if needed. Like DIV'S in html.

3. If I take a Label, I cant "copy" the chatted text.

4. I cant check how long the text "would" be after posting, so I can say "after 70 chars split" but if I use "iiiiiii" this is much smaller as a d.

4.1. Please don't say now "attach an label to another widget, arrange it and then check"

 

Summary:

Please add following functionality to the WidgetText:

- Automatic line break when text width is bigger then widget width.

- Make text selectable through the user so he can copy&past it.

- Too it would be very usefully to create link-able text. Example: [some Item] -> Tiggers an action that display the item in another widget.

 

Best regards

Lars

[lars.saalbach]

Forgot file sorry

[manguste]

Lars,

 

If it will be ofany help, you can check data/network/chat for an implementation of chat. I'll pass your suggestions to our devs.

[lars.saalbach]

Hello Manguste,

Thanks for your reply.

I checked your implementation but there are much bugs like no scaling and so on.

So its unusable for me sorry:(

[lars.saalbach]

Hey Team,

 

just want to push a second time this post, is there anything open on your side?

We realy wan't to implement a right chat system.

At the moment I'm using a Label with a WidgetVBox, which works but just on a very simple simple way.

So theres no linksharing, copying, right sizeable of text how much text can be provided to the right side, and so on.

 

Hopefully you'll bring something out :)

 

Greetings

Lars

[manguste]

Lars,

 

I'm afraid right now we do not plan to add such chat system, so I can only suggest to implement it on your side if your project requires it.

[lars.saalbach]

Hey Manguste,

 

thanks for reply.

One question, cause thats realy a MAIN problem: Would it be possible to include an "linebreak" functionality?

The problem is, when you're adding a text which is longer then the Widget, a scrollbar will appear, cause there's no mechanism to do a wise linebreak.

I tried to count the length of the text, split it and then add a new line, but if you're just typing "iiiiiiiiiiiiiiiiiiii" its such smaller as "aaaaaaaaaa", and then you're getting in problems aswell.

 

Cause of this, there is no way to handle this in a customer project.

So if you're not implementing a Chat-GUI its ok, but please provide us a "linebreak" functionality.

Best regards

Lars

[lars.saalbach]

Push :)

[manguste]

Lars,

 

Sorry, linebreak functionality is not planned to be added. (there's simply too much on the development schedule). We've added tables support in the last update, if that could be of any help to you.

[lars.saalbach]

Sounds sad:(

Any further informations about the tables?

With search for tables I couldn't find any informations about?

Greetz

Lars

[ulf.schroeter]

Lars, WidgetCanvas provides functions for user-defined text positioning and size querying. The text output supports standard "\n" line break. Though this is not very comfortable, this base functionality can be used to code some chat gui via script.

 

You could set the text of each text entry word by word until maximum line width is exceeded, than simply insert a "\n" before the last word effectively wrapping it to the next line an continue to append following words. 

 

Of course effects like vertical text scrolling and text selection also have to be implemented via script, but this should be quite simple.

 

Just as example see attached screenshot of a small dynamic tooltip-like info window based on WidgetCanvas. It uses 2 text elements were text entries are automatically wrapped by "\n" characters (e.g. "Statistics\n\nTotal\n\nVoice\nSms...". Background polygon and the size of the WidgetCanvas window is calculated from text box sizes.

 

[lars.saalbach]

Hey Ulf,

Thanks for detailed advise I'll have a look on this.

 

Greetings

Lars

[ulf.schroeter]

Maybe helpful for illustration

 

info.h

[lars.saalbach]

Hey Ulf,

Thank you very much:)

I'll have a look tomorrow, actually just online at phone.

Greets and have a nice sunday.

Lars

[ulf.schroeter]

Update with automatic word wrapping of footnote, when footnote text is wider than width defined by top left/right text box layout ( see createFootnote() ) Could be more sophisticated, but as a quick proof of concept quite easy to implement.

info.h

[manguste]

Ulf, you've been of much help!
 
Lars,

Any further informations about the tables?
With search for tables I couldn't find any informations about?

 
It was in the last devlog item:

Added support for tables in all widgets with rich-text formatting (such as labels, buttons, etc.). Use <table/>, <tr/>; and <td/> tags; spacing and border color attributes are supported.

 
An example:

<table space=3 color="#ffffffaa">
   <tr>
      <td>1</td>
   </tr>
</table>

space_x and space_y attributes are also supported.

[lars.saalbach]

Hey Manguste,

 

thanks for example.

Sorry I didn't read devlog.

 

I'll test it.

Greetings & Have a nice day.

Lars

[ulf.schroeter]

Hi Lars, another idea for your use case might be to use WidgetScrollBox as a container for multiple WidgetLabel instances, were each label widget represents a single chat entry.

 

WidgetScrollBox allows deactivation of horizontal scroll slider. Key idea is to add a new WidgetLabel correctly positioned below last WidgetLabel and a label width set to the WidgetScrollBox width or slightly lower.

 

As WidgetLabel supports automatic text wrapping, the complete chat entry text stays visible within the scroll box area. As WidgetLabel also supports rich text formatting coloring/formating individual word differently should be possible out-of-the-box. With the new table formating support mentinoed by manguste it should also be possible to even further influence the layout of the chat text output within each WidgetLabel entry (e.g. left column for output of chat user and timestamp, right column for actual text)

 

While writing last sentence it came to my mind that new table formating might allow an even simpler solution: instead of adding/calculation multiple WidgetLabel instances on your own, you could try to add a single WidgetLabel instance to the WidgetScrollBox and simply append each new chat entry as a new table row substring to the WidgetLabel text string (for limiting chat history e.g. to last 200 entries it should also be easily possible with this approach to remove oldest chat entries by simply removing trailing table row text substring from the WidgetLabel text string)   

 

For automatic scrolling to last line something like the foloowing pseudo-code might do the trick

 

WidgetLabel.setText( <new rich-text-formated table text>);

WidgetLabel.setWidth( smaller/equal than WidgetScrollBox client width ) );

WidgetLabel.arrange();  //  hope this will update the WidgetLabel height ?!? Not sure, but this would be required  .        

 

int height = WidgetLabel.getHeight();

 

// scroll WIdgetScrollBox, so bottom of WidetLabel is visible...

 

 

Don't know if this will work, but at least an idea to think about or test it

[lars.saalbach]

Hey Ulf,

thanks for the idea.

I wrote you already a PM cause of canvas, I got this one to work, but it was heavy to edit text in other fonts, colors.

So I tried for an easier idea.

 

How I did it:

I got a global Label with rich text format, and a second (not visible) label also rich text format

If I got my message I split it and run through each one.

Each word I add to my not visible second label, arrange it, and get the width of it.

Each word is added to the first label but if the maximum width is reached I add a "\n" to it, and then i reset to the actual word added width. That is looped so long till no word is left.

Around the label I put a scrollbox like you wrote, so you can downscroll it.

Here's the code:

 

        void addMessage()
        {

     
                string textMessage = "your message"

                //Replace < and > to non html tag else chat crashes.
                textMessage = replace(textMessage,"<","<");
                textMessage = replace(textMessage,">",">");

                string startMessage;
                startMessage = "<font size=""14"" color=""#8B00ff"">[" + string("02.03.2013 - 15:30") + "]</font><font size=""14"" color=""#8B00ff"">" +  string ("graphefruit") + "</font> > ";


                    chatEntries.setText(chatEntries.getText() + "<br/>" + startMessage);


                    WidgetLabel tmpAddingLabel = new WidgetLabel(engine.getGui());
                    tmpAddingLabel.setFontRich(1);

                    //Arrange - else we wouldn't know the right width atm.
                    tmpAddingLabel.setText(startMessage);
                    tmpAddingLabel.arrange();

                    int maxWidth = 400;
                    int currentWidth = tmpAddingLabel.getWidth();

                    string splittedMessage[0];
                    strsplit(textMessage," ",splittedMessage);

                    for (int i=0;i<splittedMessage.size();i++)
                    {
                        string addMessage = +splittedMessage[i] + " ";
                        //Set one word, arrange it and check the current width.
                        tmpAddingLabel.setText(addMessage);
                        tmpAddingLabel.arrange();
                        currentWidth = currentWidth + tmpAddingLabel.getWidth();

                        //Is this one word to much for this actual line?
                        if (currentWidth > maxWidth)
                        {
                            chatEntries.setText(chatEntries.getText() + "<br/>" + addMessage);

                            //Reset the current width anew.
                            currentWidth = tmpAddingLabel.getWidth();
                        }
                        else
                        {
                            chatEntries.setText(chatEntries.getText() +  addMessage);
                        }
                    }


                }
                //Arrange cause else the setVScrollValue don't workes right.
                chatEntries.arrange();
                scrollBox.arrange();
                //Scroll down to the bottom
                scrollBox.setVScrollValue(scrollBox.getVScrollObjectSize() - scrollBox.getVScrollFrameSize());
            
        }

 

The code is optimized now for my chat, but I think the idea behind should be clear.

 

I already tried it with a <table> format in label/editline, but the table is working more bad then good, the problem is, you can't say how wide a TD shall be etc.

 

@Manguste: The Table construct is nice but it would be awesome if more properties would be provided like "width"  or if a td could be used as <td style="color:red"> etc. that would be much more comfortable. (Like HTML-CSS) in other topic explained.

 

So this post can be marked as solved.

 

Thanks again to all ideas/helps in this one.

Greetings

Lars

[frustum]

<tr height=x> and <td width=x> tag attributes have been implemented.

[lars.saalbach]

Hey Frustum,

 

thanks for implementing.

I'll test it in the next SDK :)

Best regards

Lars

[pascal.winistoerfer]

btw to complete this that's how it looks now:

 

http://i.imgur.com/g51JAOh.jpg

 

B)

[manguste]

Look nice. Glad you've done it!

[lars.saalbach]

hard work to made this - it's finally working nicely, so glad about it *.*