Image in combobox?

[gams]

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]

I think nobody have yet

[gams]

The ListboxTextItem and ListboxItem class does not seem to have any way for adding image.

[Ident]

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.

[gams]

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

[gams]

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



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.

[Ident]

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?

[gams]

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);
   


[Ident]

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

[gams]

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>




[Ident]

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

[gams]

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

yes there is absolutely nothing visible of the control.

[gams]

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?)

[dermont]

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)



[Ident]

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.