Custom MulitLineEditbox

For help with general CEGUI usage:
- Questions about the usage of CEGUI and its features, if not explained in the documentation.
- Problems with the CMAKE configuration or problems occuring during the build process/compilation.
- Errors or unexpected behaviour.

Moderators: CEGUI MVP, CEGUI Team

paul424
Just popping in
Just popping in
Posts: 16
Joined: Thu Mar 28, 2013 12:33

Custom MulitLineEditbox

Postby paul424 » Sat Jun 07, 2014 11:12

I need the functionality of the MulitLineEditbox http://static.cegui.org.uk/docs/0.8.3/classCEGUI_1_1MultiLineEditbox.html for a logger output. Could one create without problem and append some text to it , but there are some problems :
first of I cannot set the background color , neither the docs show any attribute or method capable of doing so. Second is, I would like to have the possibiilty of resizing the window -- abstract class FrameWindow seems to have such functionality, but MLEb inherits from abstract class Window not FrameWindow. Does it mean to achieve that I need to write my own widget class ?

User avatar
Ident
CEGUI Team
Posts: 1998
Joined: Sat Oct 31, 2009 13:57
Location: Austria

Re: Custom MulitLineEditbox

Postby Ident » Sat Jun 07, 2014 11:39

The background colour can be adjusted by editing the looknfeel file and editing the widgetlook. You can also edit the images of the imageset behind the looknfeel, which will be a one-time change and might be what you want.

To make it adjustable in runtime for example you can define a:

Code: Select all

<ColourRectProperty name="ImageColours"/>

for an <ImageryComponent> and on top, after the widgetlook definition, you define a propertydefinition, which can then be accessed via setProperty() as well:

Code: Select all

 <PropertyDefinition redrawOnWrite="true" initialValue="tl:FFFFFFFF tr:FFFFFFFF bl:FFFFFFFF br:FFFFFFFF" type="ColourRect" name="ImageColours"/>

This will multiply all colours of the component with the specified colour(s). So for example you can define the area with an image that is white and then the final colour will be whatever colour you specify to be multiplied on the pixels. For example black colours will stay black in the image.

Read the manual for skinning for more information: http://static.cegui.org.uk/docs/0.8.3/fal_man.html and look at existing looknfeel files
CrazyEddie: "I don't like GUIs"

paul424
Just popping in
Just popping in
Posts: 16
Joined: Thu Mar 28, 2013 12:33

Re: Custom MulitLineEditbox

Postby paul424 » Sat Jun 07, 2014 12:17

That's all nice , but using your method I managed to change the color of a caret so far ( the text position marker ) :( , cause only it had the ImageryComponent part :(

Code: Select all

   <WidgetLook name="OD/MultiLineEditbox">
        <PropertyDefinition initialValue="FFFFFFFF" name="NormalTextColour" redrawOnWrite="true" />
        <PropertyDefinition initialValue="FF000000" name="SelectedTextColour" redrawOnWrite="true" />
        <PropertyDefinition initialValue="FF607FFF" name="ActiveSelectionColour" redrawOnWrite="true" />
        <PropertyDefinition initialValue="00808080" name="InactiveSelectionColour" redrawOnWrite="true" />
    <PropertyDefinition redrawOnWrite="true" initialValue="tl:FFFFFFFF tr:FFFFFFFF bl:FFFFFFFF br:FFFFFFFF" type="ColourRect" name="ImageColours"/>
        <Property name="MouseCursorImage" value="OpenDungeons/MouseTextBar" />
        <Property name="SelectionBrushImage" value="OpenDungeons/MultiLineEditboxSelectionBrush" />
        <NamedArea name="TextArea">
            <Area>
                <Dim type="LeftEdge"><ImageDim dimension="Width" name="OpenDungeons/MultiLineEditboxLeft" /></Dim>
                <Dim type="TopEdge"><ImageDim dimension="Height" name="OpenDungeons/MultiLineEditboxTop" /></Dim>
                <Dim type="RightEdge">
                    <OperatorDim op="Subtract"><UnifiedDim scale="1" type="RightEdge" />
                <ImageDim dimension="Width" name="OpenDungeons/MultiLineEditboxRight" />
                        </OperatorDim>
                    </Dim>
                <Dim type="BottomEdge">
                    <OperatorDim op="Subtract"><UnifiedDim scale="1" type="BottomEdge" />
                <ImageDim dimension="Height" name="OpenDungeons/MultiLineEditboxBottom" />
                        </OperatorDim>
                    </Dim>
            </Area>
        </NamedArea>
        <NamedArea name="TextAreaHScroll">
            <Area>
                <Dim type="LeftEdge"><ImageDim dimension="Width" name="OpenDungeons/MultiLineEditboxLeft" /></Dim>
                <Dim type="TopEdge"><ImageDim dimension="Height" name="OpenDungeons/MultiLineEditboxTop" /></Dim>
                <Dim type="RightEdge">
                    <OperatorDim op="Subtract"><UnifiedDim scale="1" type="RightEdge" />
                <ImageDim dimension="Width" name="OpenDungeons/MultiLineEditboxRight" />
                        </OperatorDim>
                    </Dim>
                <Dim type="BottomEdge">
                    <OperatorDim op="Subtract"><UnifiedDim scale="1" type="BottomEdge" />
                <WidgetDim dimension="Height" widget="__auto_hscrollbar__" />
                        </OperatorDim>
                    </Dim>
            </Area>
        </NamedArea>
        <NamedArea name="TextAreaVScroll">
            <Area>
                <Dim type="LeftEdge"><ImageDim dimension="Width" name="OpenDungeons/MultiLineEditboxLeft" /></Dim>
                <Dim type="TopEdge"><ImageDim dimension="Height" name="OpenDungeons/MultiLineEditboxTop" /></Dim>
                <Dim type="RightEdge">
                    <OperatorDim op="Subtract"><UnifiedDim scale="1" type="RightEdge" />
                <WidgetDim dimension="Width" widget="__auto_vscrollbar__" />
                        </OperatorDim>
                    </Dim>
                <Dim type="BottomEdge">
                    <OperatorDim op="Subtract"><UnifiedDim scale="1" type="BottomEdge" />
                <ImageDim dimension="Height" name="OpenDungeons/MultiLineEditboxBottom" />
                        </OperatorDim>
                    </Dim>
            </Area>
        </NamedArea>
        <NamedArea name="TextAreaHVScroll">
            <Area>
                <Dim type="LeftEdge"><ImageDim dimension="Width" name="OpenDungeons/MultiLineEditboxLeft" /></Dim>
                <Dim type="TopEdge"><ImageDim dimension="Height" name="OpenDungeons/MultiLineEditboxTop" /></Dim>
                <Dim type="RightEdge">
                    <OperatorDim op="Subtract"><UnifiedDim scale="1" type="RightEdge" />
                <WidgetDim dimension="Width" widget="__auto_vscrollbar__" />
                        </OperatorDim>
                    </Dim>
                <Dim type="BottomEdge">
                    <OperatorDim op="Subtract"><UnifiedDim scale="1" type="BottomEdge" />
                <WidgetDim dimension="Height" widget="__auto_hscrollbar__" />
                        </OperatorDim>
                    </Dim>
            </Area>
        </NamedArea>
        <Child nameSuffix="__auto_hscrollbar__" type="OD/HorizontalScrollbar">
            <Area>
                <Dim type="LeftEdge"><AbsoluteDim value="0" /></Dim>
                <Dim type="TopEdge"><AbsoluteDim value="0" /></Dim>
                <Dim type="Width"><UnifiedDim offset="-12" scale="1" type="Width" /></Dim>
                <Dim type="Height"><AbsoluteDim value="12" /></Dim>
            </Area>
            <VertAlignment type="BottomAligned" />
        </Child>
        <Child nameSuffix="__auto_vscrollbar__" type="OD/VerticalScrollbar">
            <Area>
                <Dim type="LeftEdge"><AbsoluteDim value="0" /></Dim>
                <Dim type="TopEdge"><AbsoluteDim value="0" /></Dim>
                <Dim type="Width"><AbsoluteDim value="12" /></Dim>
                <Dim type="Height"><UnifiedDim offset="-12" scale="1" type="Height" /></Dim>
            </Area>
            <HorzAlignment type="RightAligned" />
        </Child>
        <ImagerySection name="main">
            <FrameComponent>
      <ColourRectProperty name="ImageColours"/>
                <Area>
                    <Dim type="LeftEdge"><AbsoluteDim value="0" /></Dim>
                    <Dim type="TopEdge"><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width"><UnifiedDim scale="1" type="Width" /></Dim>
                    <Dim type="Height"><UnifiedDim scale="1" type="Height" /></Dim>
                </Area>
                <Image component="TopLeftCorner" name="OpenDungeons/MultiLineEditboxTopLeft" />
                <Image component="TopRightCorner" name="OpenDungeons/MultiLineEditboxTopRight" />
                <Image component="BottomLeftCorner" name="OpenDungeons/MultiLineEditboxBottomLeft" />
                <Image component="BottomRightCorner" name="OpenDungeons/MultiLineEditboxBottomRight" />
                <Image component="LeftEdge" name="OpenDungeons/MultiLineEditboxLeft" />
                <Image component="RightEdge" name="OpenDungeons/MultiLineEditboxRight" />
                <Image component="TopEdge" name="OpenDungeons/MultiLineEditboxTop" />
                <Image component="BottomEdge" name="OpenDungeons/MultiLineEditboxBottom" />
                <Image component="Background" name="OpenDungeons/MultiLineEditboxBackdrop" />
            </FrameComponent>
        </ImagerySection>
        <ImagerySection name="Caret">
            <ImageryComponent>
      <ColourRectProperty name="ImageColours"/>
                <Area>
                    <Dim type="LeftEdge"><AbsoluteDim value="0" /></Dim>
                    <Dim type="TopEdge"><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width"><ImageDim dimension="Width" name="OpenDungeons/EditBoxCarat" /></Dim>
                    <Dim type="BottomEdge"><UnifiedDim scale="1.0" type="BottomEdge" /></Dim>
                </Area>
                <Image name="OpenDungeons/EditBoxCarat" />
                <VertFormat type="Stretched" />
                <HorzFormat type="Stretched" />
            </ImageryComponent>
        </ImagerySection>
        <StateImagery name="Enabled">
            <Layer>
                <Section section="main" />
            </Layer>
        </StateImagery>
        <StateImagery name="ReadOnly">
            <Layer>
                <Section section="main" />
            </Layer>
        </StateImagery>
        <StateImagery name="Disabled">
            <Layer>
                <Section section="main">
                    <Colours bottomLeft="FF7F7F7F" bottomRight="FF7F7F7F" topLeft="FF7F7F7F" topRight="FF7F7F7F" />
                </Section>
            </Layer>
        </StateImagery>
    </WidgetLook>
   
   

User avatar
Ident
CEGUI Team
Posts: 1998
Joined: Sat Oct 31, 2009 13:57
Location: Austria

Re: Custom MulitLineEditbox

Postby Ident » Sat Jun 07, 2014 12:22

Read the falagard documentation, afaik you can also apply this on other elements, it should be written there. Aslo find out what defines your background that you want to change then you can figure out how you can modify it, it is all in the WidgetLook. you can also just modify whatever image is used directly using an image editing programs or define a new image. Read the documentation. Look at other looknfeel files, that often helps too, to see how things are done.
CrazyEddie: "I don't like GUIs"

paul424
Just popping in
Just popping in
Posts: 16
Joined: Thu Mar 28, 2013 12:33

Re: Custom MulitLineEditbox

Postby paul424 » Mon Jun 09, 2014 01:01

Code: Select all

                <Section section="main">
                    <Colours bottomLeft="FF7F7F7F" bottomRight="FF7F7F7F" topLeft="FF7F7F7F" topRight="FF7F7F7F" />
                </Section>

From the other looknfeels , I swear that this, in proper <ImagiarySection> should set the proper background color , and it does set exactly for all 4 corners , with proper interpolation -- but only for RED and ALPHA channel parts ! The BLUE and GREEN parts are completly ignored !!! Why does it happen so ?

User avatar
Ident
CEGUI Team
Posts: 1998
Joined: Sat Oct 31, 2009 13:57
Location: Austria

Re: Custom MulitLineEditbox

Postby Ident » Mon Jun 09, 2014 10:45

The colours are ARGB, so the first two hexadecimals are the alpha. What does your background image look like?
CrazyEddie: "I don't like GUIs"

paul424
Just popping in
Just popping in
Posts: 16
Joined: Thu Mar 28, 2013 12:33

Re: Custom MulitLineEditbox

Postby paul424 » Mon Jun 09, 2014 11:22

:hammer: :hammer: :hammer: :hammer:
Last edited by paul424 on Sat Jun 14, 2014 14:10, edited 1 time in total.

User avatar
Ident
CEGUI Team
Posts: 1998
Joined: Sat Oct 31, 2009 13:57
Location: Austria

Re: Custom MulitLineEditbox

Postby Ident » Mon Jun 09, 2014 11:25

Ident wrote: This will multiply all colours of the component with the specified colour(s). So for example you can define the area with an image that is white and then the final colour will be whatever colour you specify to be multiplied on the pixels. For example black colours will stay black in the image.
CrazyEddie: "I don't like GUIs"

paul424
Just popping in
Just popping in
Posts: 16
Joined: Thu Mar 28, 2013 12:33

Re: Custom MulitLineEditbox

Postby paul424 » Sat Jun 14, 2014 14:16

Hello hello, I have further problems with working with the window logger. There are at least two problems :
1) The append methods of MLEb seems to have linear complexity of O(n) , where n is the size of already outputed text. This way, any logging session is going to bring down the FPS --> 0 ,when t-> +oo :\ .
2) When calling MLEb::append() within short intervals of time ( called by some code site every frame ) I CANNOT DRAG the SCROLL button in orderto scroll the text at least a lititle bit down, while it is not the problem when the contained text is static ( no append() ) .
Any ideas how should I approach that ?

User avatar
Ident
CEGUI Team
Posts: 1998
Joined: Sat Oct 31, 2009 13:57
Location: Austria

Re: Custom MulitLineEditbox

Postby Ident » Sat Jun 14, 2014 16:07

paul424 wrote:1) The append methods of MLEb seems to have linear complexity of O(n) , where n is the size of already outputed text. This way, any logging session is going to bring down the FPS --> 0 ,when t-> +oo :\ .

And what complexity did you expect?

paul424 wrote:2) When calling MLEb::append() within short intervals of time ( called by some code site every frame ) I CANNOT DRAG the SCROLL button in orderto scroll the text at least a lititle bit down, while it is not the problem when the contained text is static ( no append() ) .
Any ideas how should I approach that ?

Seems like a bug, could you create a reconstruction, for example based on one of the existing samples?
CrazyEddie: "I don't like GUIs"

paul424
Just popping in
Just popping in
Posts: 16
Joined: Thu Mar 28, 2013 12:33

Re: Custom MulitLineEditbox

Postby paul424 » Sat Jun 14, 2014 23:20

1) The append methods of MLEb seems to have linear complexity of O(n) , where n is the size of already outputed text. This way, any logging session is going to bring down the FPS --> 0 ,when t-> +oo :\ .

And what complexity did you expect?

Well I dream of course about constant time O(1), if you would use for example a list of strings. When scrolling , resizing you would only choose some continous sublist , whcih must be displayed -- for sure faster from that what are you doing now.

User avatar
Ident
CEGUI Team
Posts: 1998
Joined: Sat Oct 31, 2009 13:57
Location: Austria

Re: Custom MulitLineEditbox

Postby Ident » Sun Jun 15, 2014 00:44

paul424 wrote:
1) The append methods of MLEb seems to have linear complexity of O(n) , where n is the size of already outputed text. This way, any logging session is going to bring down the FPS --> 0 ,when t-> +oo :\ .

And what complexity did you expect?

Well I dream of course about constant time O(1), if you would use for example a list of strings. When scrolling , resizing you would only choose some continous sublist , whcih must be displayed -- for sure faster from that what are you doing now.

Sounds good, we are looking forward to your pull-request.
CrazyEddie: "I don't like GUIs"

timotei
Not too shy to talk
Not too shy to talk
Posts: 26
Joined: Mon Apr 29, 2013 14:17

Re: Custom MulitLineEditbox

Postby timotei » Sun Jun 15, 2014 13:46

paul424 wrote:...
1) The append methods of MLEb seems to have linear complexity of O(n) , where n is the size of already outputed text. This way, any logging session is going to bring down the FPS --> 0 ,when t-> +oo :\
...


You sure? WolframAlpha says something else: http://www.wolframalpha.com/share/clip? ... i8m3pkpbe5
I don't see any FPS drops in that equation!

Btw, why would you do tons of renderings in a tight loops anyway ("short intervals of time")? I'd say you should do the appends at certain intervals, and queue up work. Maybe spawn some threads to do the computations for you? :)

paul424
Just popping in
Just popping in
Posts: 16
Joined: Thu Mar 28, 2013 12:33

Re: Custom MulitLineEditbox

Postby paul424 » Mon Jun 16, 2014 15:53

Well CEGUI is really boosting my creativity. What I have come up with is to use fixed pool of Editbox like 1K and arrange multiline scrolling, by changing their positions. When the new line comes in , the content of the last Editbox is changed, which comes to the front of the stack, while all others are shifted one position back. Does it make sense ?

paul424
Just popping in
Just popping in
Posts: 16
Joined: Thu Mar 28, 2013 12:33

Re: Custom MulitLineEditbox

Postby paul424 » Thu Dec 18, 2014 15:15

Hello , I reburry this post , in order to learn : si it possible to have widget similat to MLEb ? In that there could be always some new input appended ( liike say for the continous debug logging ) .


Return to “Help”

Who is online

Users browsing this forum: No registered users and 9 guests