Image in combobox?

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

gams
Not too shy to talk
Not too shy to talk
Posts: 39
Joined: Sun May 24, 2015 13:23

Image in combobox?

Postby gams » Thu Sep 17, 2015 07:43

Hi
I have just a quick question, I didn't find this answered in the forums. so.. can you have image for each item in combobox? not just text per item but image and text would be good. can this be done?

thanks

allanconner143
Just popping in
Just popping in
Posts: 1
Joined: Fri Sep 18, 2015 09:50

Re: Image in combobox?

Postby allanconner143 » Thu Oct 15, 2015 10:38

I think nobody have yet :(

gams
Not too shy to talk
Not too shy to talk
Posts: 39
Joined: Sun May 24, 2015 13:23

Re: Image in combobox?

Postby gams » Sat Oct 17, 2015 12:36

The ListboxTextItem and ListboxItem class does not seem to have any way for adding image.
Last edited by gams on Thu Oct 22, 2015 07:58, edited 1 time in total.

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

Re: Image in combobox?

Postby Ident » Sun Oct 18, 2015 13:04

That might indeed be the case. The easiest modification would be for all lists to accept widgets, than you can add child widgets that may contain whatever you want (Image, Text, etc.). I see this as a mandatory feature for 1.0 Release.

I have not tried it out but you may want to try using Formatting Tags: http://cegui.org.uk/wiki/Formatting_Tags_in_CEGUI
Maybe that works, but it depends on the type of the widget these Items are, and I don't remember that right now.
CrazyEddie: "I don't like GUIs"

gams
Not too shy to talk
Not too shy to talk
Posts: 39
Joined: Sun May 24, 2015 13:23

Re: Image in combobox?

Postby gams » Thu Oct 22, 2015 16:47

thanks Ident the formatting tags do work on the listboxitems and I am able to display image. :D

gams
Not too shy to talk
Not too shy to talk
Posts: 39
Joined: Sun May 24, 2015 13:23

Re: Image in combobox?

Postby gams » Thu Oct 22, 2015 17:07

Another thing I'm having dificulty to get working is the combobox text. Here's screenshot of what I mean.

Image

looks like parsing is not enabled or something for the combox text. I looked around and it should be enabled so maybe it's not supported in that field.

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

Re: Image in combobox?

Postby Ident » Sat Oct 31, 2015 09:32

The combobox uses an editbox for that field, as it also allows it to be edited (if not read-only). An editbox can't have formattingtags as of now, adding this has been discussed elsewhere but is not planned currently.

What about a dropdownlist?
CrazyEddie: "I don't like GUIs"

gams
Not too shy to talk
Not too shy to talk
Posts: 39
Joined: Sun May 24, 2015 13:23

Re: Image in combobox?

Postby gams » Wed Nov 04, 2015 13:16

For some reason I cannot make ComboDropList render anything.

here's code I borrowed from the samples:

Code: Select all


class MyListItem : public ListboxTextItem
{
public:
   MyListItem(const String& text, CEGUI::uint item_id = 0) :
      ListboxTextItem(text, item_id)
   {
      setSelectionBrushImage("colorDisp"); // colorDisp image is loaded elsewhere
   }
};

void initListbox(CEGUI::Listbox* listbox)
{
   MyListItem* item1 = new MyListItem("Listbox Item 1");
   listbox->addItem(item1);
   MyListItem* item2 = new MyListItem("Listbox Item 2");
   listbox->addItem(item2);

   MyListItem* item3 = new MyListItem("Listbox Item 3");
   item3->setSelectionColours(CEGUI::Colour(0.3f, 0.7f, 1.0f, 1.0f));
   listbox->addItem(item3);

   MyListItem* item4 = new MyListItem("Listbox Item 4");
   item4->setSelectionColours(CEGUI::Colour(0.3f, 1.0f, 0.7f, 1.0f));
   listbox->addItem(item4);

   if (listbox->getType().compare("WindowsLook/Listbox") == 0)
   {
      item1->setTextColours(CEGUI::Colour(0.0f, 0.0f, 0.0f, 1.0f));
      item2->setTextColours(CEGUI::Colour(0.0f, 0.0f, 0.0f, 1.0f));
      item3->setTextColours(CEGUI::Colour(0.0f, 0.0f, 0.0f, 1.0f));
      item4->setTextColours(CEGUI::Colour(0.0f, 0.0f, 0.0f, 1.0f));
   }
}


   ComboDropList &testList = getWin<ComboDropList>("TestList"); // custom window retriever, throws when no window is found or is not specified type
   
   initListbox(&testList);
   

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

Re: Image in combobox?

Postby Ident » Wed Nov 04, 2015 22:01

is there an LookNFeel for it? If yes, which one do you use?
CrazyEddie: "I don't like GUIs"

gams
Not too shy to talk
Not too shy to talk
Posts: 39
Joined: Sun May 24, 2015 13:23

Re: Image in combobox?

Postby gams » Thu Nov 05, 2015 08:51

Ident wrote:is there an LookNFeel for it? If yes, which one do you use?


I'm using the looknfeel file that came with CEGUI. so yes it has it. I'll copy & paste the looknfeel definitin here:

Code: Select all


    <!--
    ***************************************************
        TaharezLook/ComboDropList
    ***************************************************
    -->
    <WidgetLook name="TaharezLook/ComboDropList">
        <Property name="Size" value="{{0, 256}, {0, 256}}" />
        <NamedArea name="ItemRenderingArea">
            <Area>
                <Dim type="LeftEdge" ><ImageDim name="TaharezLook/ComboboxListLeft" dimension="Width" /></Dim>
                <Dim type="TopEdge" ><ImageDim name="TaharezLook/ComboboxListTop" dimension="Height" /></Dim>
                <Dim type="RightEdge" >
                    <OperatorDim op="Subtract">
                        <UnifiedDim scale="1" type="RightEdge" />
                        <ImageDim name="TaharezLook/ComboboxListRight" dimension="Width" />
                    </OperatorDim>
                </Dim>
                <Dim type="BottomEdge" >
                    <OperatorDim op="Subtract">
                        <UnifiedDim scale="1" type="BottomEdge" />
                        <ImageDim name="TaharezLook/ComboboxListBottom" dimension="Height" />
                    </OperatorDim>
                </Dim>
            </Area>
        </NamedArea>
        <NamedArea name="ItemRenderingAreaHScroll">
            <Area>
                <Dim type="LeftEdge" ><ImageDim name="TaharezLook/ComboboxListLeft" dimension="Width" /></Dim>
                <Dim type="TopEdge" ><ImageDim name="TaharezLook/ComboboxListTop" dimension="Height" /></Dim>
                <Dim type="RightEdge" >
                    <OperatorDim op="Subtract">
                        <UnifiedDim scale="1" type="RightEdge" />
                        <ImageDim name="TaharezLook/ComboboxListRight" dimension="Width" />
                    </OperatorDim>
                </Dim>
                <Dim type="BottomEdge" >
                    <OperatorDim op="Subtract">
                        <UnifiedDim scale="1" type="BottomEdge" />
                        <WidgetDim widget="__auto_hscrollbar__" dimension="Height" />
                    </OperatorDim>
                </Dim>
            </Area>
        </NamedArea>
        <NamedArea name="ItemRenderingAreaVScroll">
            <Area>
                <Dim type="LeftEdge" ><ImageDim name="TaharezLook/ComboboxListLeft" dimension="Width" /></Dim>
                <Dim type="TopEdge" ><ImageDim name="TaharezLook/ComboboxListTop" dimension="Height" /></Dim>
                <Dim type="RightEdge" >
                    <OperatorDim op="Subtract">
                        <UnifiedDim scale="1" type="RightEdge" />
                        <WidgetDim widget="__auto_vscrollbar__" dimension="Width" />
                    </OperatorDim>
                </Dim>
                <Dim type="BottomEdge" >
                    <OperatorDim op="Subtract">
                        <UnifiedDim scale="1" type="BottomEdge" />
                        <ImageDim name="TaharezLook/ComboboxListBottom" dimension="Height" />
                    </OperatorDim>
                </Dim>
            </Area>
        </NamedArea>
        <NamedArea name="ItemRenderingAreaHVScroll">
            <Area>
                <Dim type="LeftEdge" ><ImageDim name="TaharezLook/ComboboxListLeft" dimension="Width" /></Dim>
                <Dim type="TopEdge" ><ImageDim name="TaharezLook/ComboboxListTop" dimension="Height" /></Dim>
                <Dim type="RightEdge" >
                    <OperatorDim op="Subtract">
                        <UnifiedDim scale="1" type="RightEdge" />
                        <WidgetDim widget="__auto_vscrollbar__" dimension="Width" />
                    </OperatorDim>
                </Dim>
                <Dim type="BottomEdge" >
                    <OperatorDim op="Subtract">
                        <UnifiedDim scale="1" type="BottomEdge" />
                        <WidgetDim widget="__auto_hscrollbar__" dimension="Height" />
                    </OperatorDim>
                </Dim>
            </Area>
        </NamedArea>
        <Child  type="TaharezLook/HorizontalScrollbar" nameSuffix="__auto_hscrollbar__">
            <Area>
                <Dim type="Width" ><UnifiedDim scale="1" offset="-12" type="Width" /></Dim>
                <Dim type="Height" ><AbsoluteDim value="12" /></Dim>
            </Area>
            <VertAlignment type="BottomAligned" />
        </Child>
        <Child  type="TaharezLook/VerticalScrollbar" nameSuffix="__auto_vscrollbar__">
            <Area>
                <Dim type="Width" ><AbsoluteDim value="12" /></Dim>
                <Dim type="Height" ><UnifiedDim scale="1" offset="-12" type="Height" /></Dim>
            </Area>
            <HorzAlignment type="RightAligned" />
        </Child>
        <ImagerySection name="main">
            <FrameComponent>
                <Image component="TopLeftCorner" name="TaharezLook/ComboboxListTopLeft" />
                <Image component="TopRightCorner" name="TaharezLook/ComboboxListTopRight" />
                <Image component="BottomLeftCorner" name="TaharezLook/ComboboxListBottomLeft" />
                <Image component="BottomRightCorner" name="TaharezLook/ComboboxListBottomRight" />
                <Image component="LeftEdge" name="TaharezLook/ComboboxListLeft" />
                <Image component="RightEdge" name="TaharezLook/ComboboxListRight" />
                <Image component="TopEdge" name="TaharezLook/ComboboxListTop" />
                <Image component="BottomEdge" name="TaharezLook/ComboboxListBottom" />
                <Image component="Background" name="TaharezLook/ComboboxListBackdrop" />
            </FrameComponent>
        </ImagerySection>
        <StateImagery name="Enabled">
            <Layer>
                <Section section="main" />
            </Layer>
        </StateImagery>
        <StateImagery name="Disabled">
            <Layer>
                <Section section="main">
                    <Colours topLeft="FF7F7F7F" topRight="FF7F7F7F" bottomLeft="FF7F7F7F" bottomRight="FF7F7F7F" />
                </Section>
            </Layer>
        </StateImagery>
    </WidgetLook>



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

Re: Image in combobox?

Postby Ident » Thu Nov 05, 2015 18:28

And this LookNFeel is not rendered at all? You cant see the entire widget?
CrazyEddie: "I don't like GUIs"

gams
Not too shy to talk
Not too shy to talk
Posts: 39
Joined: Sun May 24, 2015 13:23

Re: Image in combobox?

Postby gams » Fri Nov 06, 2015 11:17

Ident wrote:And this LookNFeel is not rendered at all? You cant see the entire widget?


yes there is absolutely nothing visible of the control.

gams
Not too shy to talk
Not too shy to talk
Posts: 39
Joined: Sun May 24, 2015 13:23

Re: Image in combobox?

Postby gams » Fri Nov 06, 2015 12:05

Ok I found the problem why ComboDropList is not showing. The visible attrbute was false by default. So I set it true in the CEGUI editor and still nothing. then I call setVisible and set it true and it finally shows up.
I wonder why its hidden by default and cant be made visible except by c++ call?

I took a screenshot of the thing and it seems I better stick with combobox as it has header text (the editbox) and droplist has no header (or is invisible?)

Image

User avatar
dermont
Quite a regular
Quite a regular
Posts: 75
Joined: Mon Aug 29, 2005 16:15

Re: Image in combobox?

Postby dermont » Fri Nov 06, 2015 13:14

Could you not just subclass a ListboxTextItem and just draw the icon/texture yourself? , e.g from python:

Code: Select all

class GSTListboxItem(CEGUI.ListboxTextItem):
    def __init__(self,text, id, texture,videoSizeThumb):
        CEGUI.ListboxTextItem.__init__(self,text)
        self.text = text
        self.d_thumbsize = videoSizeThumb
        self.d_texture = texture
        #self.setSelectionBrushImage("TaharezLook/TextSelectionBrush")
        self.setSelectionBrushImage("WindowsLook/Background")
        self.setTextColours(CEGUI.Colour(0.0, 0.0, 0.0, 1.0))
        self.getSelectionBrushImage().setAutoScaled(CEGUI.ASM_Disabled)
        self.icon_border = 2.0


    def getPixelSize(self):
        pixSize = CEGUI.ListboxTextItem.getPixelSize(self)
        w = max(self.d_thumbsize.d_width, pixSize.d_width)
        h = max(self.d_thumbsize.d_height, pixSize.d_height)
        return CEGUI.Sizef(float(w), float(h))

    def drawImage(self, buffer, targetRect, alpha, clipper):
        finalPos = CEGUI.Rectf(targetRect)
        finalPos.setWidth(targetRect.getWidth())
        finalPos.setHeight(targetRect.getHeight())
        self.d_texture.render(buffer, finalPos, clipper,
                              CEGUI.ColourRect(CEGUI.Colour(1.0,1.0,1.0,alpha)))

    def draw(self, buffer, targetRect, alpha, clipper):
        ## draw icon/video
        x = targetRect.left() + self.icon_border
        y = targetRect.top()  + self.icon_border
        w = targetRect.left() + self.d_thumbsize.d_width -2*self.icon_border
        h = targetRect.top()  + self.d_thumbsize.d_height -2*self.icon_border

        rect = CEGUI.Rectf(x,y,w,h)
        self.drawImage(buffer, rect, alpha, clipper)
        ## draw text
        rect = CEGUI.Rectf(targetRect.left() + self.d_thumbsize.d_width , targetRect.top() , targetRect.right(),  targetRect.bottom())
        CEGUI.ListboxTextItem.draw(self, buffer, rect, alpha, clipper)
        ## draw select
        if self.isSelected(): # and not self.d_selectBrush is None:
            self.getSelectionBrushImage().render(buffer, targetRect, clipper,CEGUI.ColourRect(CEGUI.Colour(0.5,0.5,0.5,0.1)))


Code: Select all

        CEGUI.ImageManager.getSingleton().addFromImageFile("SpaceBackgroundImage", "SpaceBackground.jpg")
        CEGUI.ImageManager.getSingleton().loadImageset("DriveIcons.imageset")
        icons=[]
        icons.append(CEGUI.ImageManager.getSingleton().get("DriveIcons/Artic") )
        icons.append(CEGUI.ImageManager.getSingleton().get("DriveIcons/Black") )
        icons.append(CEGUI.ImageManager.getSingleton().get("DriveIcons/Sunset") )
        icons.append(CEGUI.ImageManager.getSingleton().get("DriveIcons/GlobalDrive") )
        icons.append(CEGUI.ImageManager.getSingleton().get("DriveIcons/Blue") )
        icons.append(CEGUI.ImageManager.getSingleton().get("DriveIcons/Silver") )
        icons.append(CEGUI.ImageManager.getSingleton().get("DriveIcons/GreenCandy") )

        mComboBox = CEGUI.WindowManager.getSingleton().createWindow("WindowsLook/Combobox", "MyComboBox")
        mComboBox.setSize(CEGUI.USize(CEGUI.UDim(float(0.3), 0) , CEGUI.UDim(float(0.6), 0)))
        mComboBox.setPosition(CEGUI.UVector2(CEGUI.UDim(0.64, 0.0), CEGUI.UDim(0.02, 0.0)))
        mCEGUIMainWindow.addChild(mComboBox)


        thumbSize = CEGUI.Sizef(64.0,64.0)
        for j in range(10):
            text = "Test\nTest Line 2%s" % ( str(j) )
            lbi = GSTListboxItem(text, j, icons[j%len(icons)], thumbSize)
            mComboBox.addItem(lbi)
            self.ListItems.append(lbi)


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

Re: Image in combobox?

Postby Ident » Fri Nov 06, 2015 18:44

This was probably never intended to be used as its own widget but only as part of other widgets such as combobox. It would be really easy to make your own widgets uding the combodroplist as a child just like combobox does and then displaying the item however you want in the widget itself (not the child widget which is the combodroplist)
Does that make sense?
You would probably have to set up a new but simple class in C++ for this purpose, we could assist you in doing so, we would also like to have this as part of a PR to make it part of core CEGUI if you are willing to do this. I think this would make a valuable contribution.
CrazyEddie: "I don't like GUIs"


Return to “Help”

Who is online

Users browsing this forum: No registered users and 2 guests