Interface boxes

[Thalassicus]

How can I create a colored box? I'd like to make simple rectangles set to various colors. I'm experimenting with the Grid object... but the Color field seems to only set the color of text.

Edit: Nevermind I must just be really tired... this is all I needed:

<Grid Size="100,36" Color="COLOR_RESEARCH_STORED" />

I also had a Style="blahblah" field that was overriding the color field.


Edit: Argh the UI data is so frustrating to work with. I need a rainbow of colored boxes for this legend (red, violet, blue, green, white, and grey), with the stack surrounded by a white border. The colors are turning out really... dark or something...

<!--Good For power legend-->
<Stack Anchor="L,T" Offset="64,50" Size="105,262" Style="WindowGrid" >
    <Label Anchor="C,T" Font="TwCenMT24" String="Good For"/>
    <Image Anchor="C,T" Offset="0,10" Size="100.1" Texture="bar300x2.dds" TextureOffset="39.0"/>
    
    <Stack Anchor="C,T" Size="95,226" Padding="0" >
        <Grid Size="100,46" Color="COLOR_PLAYER_ORANGE_TEXT">
            <Label Anchor="C,C" AnchorSide="I.O" Font="TwCenMT20" ColorSet="Beige_Black_Alpha" FontStyle="Shadow" String="High"/>
        </Grid>
        <Grid Size="100,36" Color="255,60,255,255"/>
        <Grid Size="100,36" Color="COLOR_RESEARCH_STORED"/>
        <Grid Size="100,36" Color="COLOR_PLAYER_LIGHT_GREEN"/>
        <Grid Size="100,36" Color="COLOR_WHITE"/>
        <Grid Size="100,36" Color="COLOR_GREY">
            <Label Anchor="C,C" AnchorSide="I.O" Font="TwCenMT20" ColorSet="Beige_Black_Alpha" FontStyle="Shadow" String="Low"/>
        </Grid>
    </Stack>
</Stack>

 

[whoward69]

<Grid> inherits some values from the active Styles.xml file, <Box> is the basic element for drawing coloured boxes.

 

[Thalassicus]

Thanks, that's what I needed. I felt I was overlooking something obvious. Box! Duh!

 

[whoward69]

Don't use a stack, just nest boxes within a box and offset them, something like (written off the top of my head)

<Box Color="White,255" Size="44,104">
  <Box Align="L,T" Color="Red,255" Size="40,20" Offset="2,2"/>
  <Box Align="L,T" Color="Blue,255" Size="40,20" Offset="2,22"/>
  <Box Align="L,T" Color="Green,255" Size="40,20" Offset="2,42"/>
  <Box Align="L,T" Color="Yellow,255" Size="40,20" Offset="2,62"/>
  <Box Align="L,T" Color="Magenta,255" Size="40,20" Offset="2,82"/>
</Box>

The outer box is all white, but most of it gets over-written by the inner boxes - what is left will leave a 2-pixel white border.
The inner boxes are then manually aligned inside the outer box

Using a <Stack> will inherit padding between the boxes and some margins, which can be a real PITA to get rid of!

 

[daviiadams]

Can the colour be changed in lua via SetColor, or will that not work with boxes? I know you can mask things by placing a box over the top of things, but that knocks out things like tooltips, selecting and the like (if I remember rightly)

 

[whoward69]

Can the colour be changed in lua via SetColor

Yes - See Input 3 example in UI - Tutorial 4