1. We have added the ability to collapse/expand forum categories and widgets on forum home.
    Dismiss Notice
  2. Photobucket has changed its policy concerning hotlinking images and now requires an account with a $399.00 annual fee to allow hotlink. More information is available at: this link.
    Dismiss Notice
  3. All Civ avatars are brought back and available for selection in the Avatar Gallery! There are 945 avatars total.
    Dismiss Notice
  4. To make the site more secure, we have installed SSL certificates and enabled HTTPS for both the main site and forums.
    Dismiss Notice
  5. Civ6 is released! Order now! (Amazon US | Amazon UK | Amazon CA | Amazon DE | Amazon FR)
    Dismiss Notice
  6. Dismiss Notice
  7. Forum account upgrades are available for ad-free browsing.
    Dismiss Notice

[Reference] UI Controls - comparision with CivV

Discussion in 'CivBE - Tutorials and References' started by whoward69, Nov 14, 2014.

  1. whoward69

    whoward69 DLL Minion

    Joined:
    May 30, 2011
    Messages:
    7,996
    Location:
    Near Portsmouth, UK
    All but two of the CivV UI controls are present in the core CivBE UI Lua files, and CivBE introduces one new control, which means that 99% of the material in my CivV UI Tutorials are still relevant to CivBE

    The first "missing" control is <HideOnMouseOver>. As this is the counterpart to <ShowOnMouseOver> it's probably still available just not used in the core UI.

    The second "missing" control is <ReplayMap>. Seems odd that the replay system was removed, perhaps its just not implemented yet.

    The new control is <DragPanel>. Two of these are used to display, and interact with, the Tech Web. See ...\assets\UI\InGame\TechTree\TechTree.lua/xml for details on how to use this control (it's non-trivial!)

    Horizontal TextureBars seem to be broken (the background shadow is always visible and too big), but no longer fit the look-and-feel anyway, for an alternative see the TechProgress images in TechPanel.lua/xml
     
  2. whoward69

    whoward69 DLL Minion

    Joined:
    May 30, 2011
    Messages:
    7,996
    Location:
    Near Portsmouth, UK
    New attributes

    • AutoFlip (pulldown attribute)
    • ConsumeMouseButton (counterpart of ConsumeMouse) see post #5
    • ConsumeMouseOver (counterpart of ConsumeMouse) see post #5
    • CursorColor (edit box attribute) see post #7
    • FontSize (replaces functionality of Font) see post #4
    • HighlightColor (edit box attribute) see post #7
    • MouseOverStyle (button attribute) see post #6
    • NoStateChange (button attribute) see post #6
    • Style2 (button/grid/label attribute) see post #6
    • TextOffset (button attribute) see post #6
     
  3. whoward69

    whoward69 DLL Minion

    Joined:
    May 30, 2011
    Messages:
    7,996
    Location:
    Near Portsmouth, UK
    Text only dynamic tooltips have been made easier

    Old School

    Add the ToolTipType attribute to your button definition, referencing the TooltipType to use (typically TooltipTypeTopPanel)
    Code:
    <TextButton ID="Button" ToolTipType="TooltipTypeTopPanel" ... />
    
    Retrieve the tooltip control from the TTManager
    Code:
    local topPanelTooltipTable = {}
    TTManager:GetTypeControlTable("TooltipTypeTopPanel", topPanelTooltipTable)
    
    Register a tooltip callback on the button
    Code:
    Controls.Button:SetToolTipCallback(OnUpdateToolTip)
    
    Write the tooltip callback, ending with some boilerplate statements
    Code:
    function OnUpdateToolTip()
      local sLabel = ...
      
      if (sLabel ~= nil) then
        topPanelTooltipTable.TopPanelMouseover:SetHide(false)
        topPanelTooltipTable.TooltipLabel:SetText(sLabel)
        topPanelTooltipTable.TopPanelMouseover:DoAutoSize()
      else
        topPanelTooltipTable.TopPanelMouseover:SetHide(true)
      end
    end
    

    New School

    Nothing needed on the button definition
    Code:
    <TextButton ID="Button" .../>
    
    Register a mouseover callback on the button
    Code:
    Controls.Button:RegisterMouseOverCallback(OnUpdateToolTip)
    
    Write the mouseover callback, using the standard SetToolTipString to update the tooltip
    Code:
    function OnUpdateToolTip()
      local sLabel = ...
      
      Controls.Button:SetToolTipString(sLabel)
    end
    

    You can still use the old TTManager approach for complex layout tooltips, but unfortunately Firaxis have left three debugging blocks of colour in the standard TooltipTypeTopPanel so you will either need to adopt the new approach or create your own version of the TooltipTypeTopPanel if you need to continue using it (eg for dynamic tooltips over labels).

    For reference, the standard TooltipTypeTopPanel should be
    Code:
    <ToolTipType Name="TooltipTypeTopPanel">  
      <Container>
        <Grid ID="TopPanelMouseover" Offset="8,0" Padding="8,8" Size="530,150" Style="GridBlack8" NoClip="1">
          <Label ID="TooltipLabel" Offset="12,12" Style="FontNormal16" String="Brief description" LeadingOffset="3" WrapWidth="512"/>
        </Grid>
      </Container>
    </ToolTipType>
    
     
  4. whoward69

    whoward69 DLL Minion

    Joined:
    May 30, 2011
    Messages:
    7,996
    Location:
    Near Portsmouth, UK
    Font size selection on Label et al elements has changed

    Old school
    Code:
    <Label Font="TwCenMT20" ... />
    
    New school
    Code:
    <Label FontSize="20" ... />
    
    If porting a CivV mod, just search and replace 'Font="TwCenMT' with 'FontSize='

    Confusingly the Font attribute still exists, but it now refers to a .ttf file, eg Font="Cour.ttf". I haven't experimented to see if this now means that we can easily change font (eg to include special glyphs - PawelS I'm looking at you!)
     
  5. whoward69

    whoward69 DLL Minion

    Joined:
    May 30, 2011
    Messages:
    7,996
    Location:
    Near Portsmouth, UK
    ConsumeMouse has new two counterparts - ConsumeMouseOver and ConsumeMouseButton

    These do exactly what they say, but why you'd ever want to consume mouse over events but not mouse clicks (and vice versa) in a standard UI mod I don't know!
     
  6. whoward69

    whoward69 DLL Minion

    Joined:
    May 30, 2011
    Messages:
    7,996
    Location:
    Near Portsmouth, UK
    Additional button attributes

    MouseOverStyle="" - used to change the styling applied to the button as the mouse moves over it, eg <TextButton ... FontStyle="Shadow" MouseOverStyle="SoftShadow" ... />, how the main menu highlights are effected

    NoStateChange="0 or 1" - default 0, setting this to 1 stops any mouse over animation (eg making it look like the button has been depressed)

    Style2="" - enables a second style to be used, eg <Button Style="CityText" Style2="FontNormal26" ... />, useful if you want to over-ride part of the base style. Can also be used with <Grid> and <Label> items

    TextOffset="x,y" - permits the text within a button to me moved - useful for those wanting pixel perfect alignment!
     
  7. whoward69

    whoward69 DLL Minion

    Joined:
    May 30, 2011
    Messages:
    7,996
    Location:
    Near Portsmouth, UK
    Additional EditBox attributes

    CursorColor="r,g,b,a" - permits the cursor colour to be changed

    HighlightColor="r,g,b,a" - permits the highlight (selected) colour to be changed

    To keep with the standard look-and-feel, these should be set to CursorColor="62,75,95,255" HighlightColor="26,42,80,255"
     

Share This Page