[Letho]

Heyho,

I'm currently having trouble setting up a scrollable area and stumbled upon this thread as i did some research with google. I'd like to set up a scrollable area from scratch, that means not using any inherited or predefined control/code written by zenimax. Sadly I have no clue how the scroll control works. I found a cheap and dirty workaround, but it's not really working well for it throws some lua errors:

Here is what i did:
1. defined a scrollbar using a slider-control.
2. defined a control of type "CT_SCROLL" (name="ScrollChild") and added a regular CT_CONTROL (name="ScrollingContainer") to it.
3. Using the slider's "OnValueChanged" - event i simply modify the "ScrollingContainer"'s anchor-offset by clearing it's anchors and adding a new one with the new y-offset. Because ScrollingContainer is a child-element of the CT_SCROLL every content displayed "outside" the CT_SCOLL wont be displayed for CT_CONTROL seems to behave like an HTML div-container with overflow:hidden.

This results in the desired behaviour but also throws the "too many anchors processed" lua error - not to mention the low performance.

I'd really like how to implement scrolling areas in a proper way, could anybody help me?

Here's the code:

function AuraMastery:Tex() -- Shows Window with all icon textures on the screen
    local container = WM:CreateTopLevelWindow("AMTextureContainer"); -- Main container
    
    local bg         = WM:CreateControl("$(parent)_Backdrop", container, CT_BACKDROP);
 
    local oX = 0;
    local oY = 0;
 
    container:SetClampedToScreen(true);
    container:SetDimensions(1600, 900);
    container:ClearAnchors();
    container:SetAnchor(CENTER, GuiRoot, CENTER);
    container:SetAlpha(1);
    container:SetMovable(true);
    container:SetHidden(false);
    container:SetMouseEnabled(true);
 
    bg:SetAnchorFill();
    bg:SetCenterColor(0,0,0,.4);
    bg:SetEdgeTexture(nil, 1, 1, 1, 0);
    bg:SetEdgeColor(1,1,1,.12); 
 
    -- Scrollable area that hides everything that expands beyond it's own size
    local scrollChild = WM:CreateControl("$(parent)_ScrollChild", container, CT_SCROLL);
    scrollChild:SetDimensions(1575,900);
    scrollChild:SetAnchor(TOPLEFT, container, TOPLEFT, 0, 0);
    scrollChild:SetScrollBounding(SCROLL_BOUNDING_CONTAINED);
 
    scrollChild.bg = WM:CreateControl("$(parent)_Backdrop", scrollChild, CT_BACKDROP);
    scrollChild.bg:SetAnchorFill();
    scrollChild.bg:SetCenterColor(1,0,0,.1);
    scrollChild.bg:SetEdgeTexture(nil, 1, 1, 1, 0);
    scrollChild.bg:SetEdgeColor(0,0,0,0);
 
        -- This containers Y-Offset will be modified by our scrollbar-value, hiding it's parts that expand beyong the CT_SCROLL's size
    local scrollContainer = WM:CreateControl("AuraMastery_ScrollContainer", scrollChild, CT_CONTROL)
    scrollContainer:SetDimensions(1575,900);
    scrollContainer:SetAnchor(TOPLEFT, container, TOPLEFT, 0, -(padding+iconSize));
    scrollContainer:SetResizeToFitDescendents(true);
    scrollContainer.bg = WM:CreateControl("$(parent)_Backdrop", scrollContainer, CT_BACKDROP);
    scrollContainer.bg:SetAnchorFill();
    scrollContainer.bg:SetCenterColor(0,0,1,.1);
    scrollContainer.bg:SetEdgeTexture(nil, 1, 1, 1, 0);
    scrollContainer.bg:SetEdgeColor(0,0,0,0);
 
    -- SCROLLBAR
    local scrollBar = WM:CreateControl("$(parent)_ScrollBar", container, CT_SLIDER);
    scrollBar:SetDimensions(25, 900);
    scrollBar:SetAnchor(TOPRIGHT, container, TOPRIGHT);
    scrollBar:SetOrientation(ORIENTATION_VERTICAL);
    scrollBar:SetMouseEnabled(true);
    scrollBar:SetMinMax(0,900);
    scrollBar:SetThumbTexture(nil,nil, nil, 25, 25);
    scrollBar:SetValueStep(padding+iconSize);
        -- backdrop
        scrollBar.bg = WM:CreateControl("$(parent)_Backdrop", scrollBar, CT_BACKDROP);
        scrollBar.bg:SetAnchor(TOPLEFT, slider, TOPLEFT, 0, 4)
        scrollBar.bg:SetAnchor(BOTTOMRIGHT, slider, BOTTOMRIGHT, 0, -4)
        scrollBar.bg:SetCenterColor(0,0,0);
        scrollBar.bg:SetEdgeTexture(nil, 1, 1, 1, 0);
        scrollBar.bg:SetEdgeColor(0,0,0,0);
 
    scrollBar:SetHandler("OnValueChanged", function(self) AuraMastery:Scroll(); d(self:GetValue()); end);
 
         -- self.icons contains that path to every texture of type "icon" in the game (e.g.:  [1] = Esoui/art/icons/.../textureName.dds
    for k,v in pairs(self.icons) do
        local modX = (k-1)%29; -- display only 29 icons of size 48px per row!
        local modY = math.floor((k-1)/29);
 
        oX = (modX*iconSize)+((modX+1)*padding);
        oY = (modY*iconSize)+((modY+1)*padding);
 
                -- button is needed for displaying a tooltip on mouseOver (doesnt work on CT_TEXTURE)
        local iconContainer = WM:CreateControl("Icon"..k, scrollContainer, CT_BUTTON);
        iconContainer:SetDimensions(iconSize, iconSize);
        iconContainer:SetAnchor(TOPLEFT, scrollContainer, TOPLEFT, oX, oY);
        iconContainer.iconnr = k;
 
                -- the icon texture...
        local icon = WM:CreateControl("$(parent)_Texture"..k, iconContainer, CT_TEXTURE);
        icon:SetAnchorFill();
        icon:SetDimensions(iconSize,iconSize);
        icon:SetTexture(v);
                -- ... and it's tooltip; SetHidden(false) on mouseover
        local iconTooltip = WM:CreateControl("$(parent)_Tooltip", iconContainer, CT_CONTROL);
        iconTooltip:SetHidden(true);
        iconTooltip:SetDimensions(320,48);
        iconTooltip:SetAnchor(BOTTOM, iconContainer, TOP);
 
        iconTooltip.bg = WM:CreateControl("$(parent)_Backdrop", iconTooltip, CT_BACKDROP);
        iconTooltip.bg:SetAnchorFill();
        iconTooltip.bg:SetDrawLayer(1);
        iconTooltip.bg:SetCenterColor(0,0,0,1);
        iconTooltip.bg:SetEdgeTexture(nil,1,1,1,0);
        iconTooltip.bg:SetEdgeColor(1,1,1,.12);
 
        iconTooltip.label = WM:CreateControl("$(parent)_Label", iconTooltip, CT_LABEL);
        iconTooltip.label:SetAnchorFill();
        iconTooltip.label:SetFont("$(BOLD_FONT)|18|outline");
        iconTooltip.label:SetColor(1,1,1,1);
        iconTooltip.label:SetText(v);
 
        iconContainer:SetHandler("OnMouseEnter", function(self) AuraMastery:Tooltip(self.iconnr); end);
        iconContainer:SetHandler("OnMouseExit", function(self) AuraMastery:Tooltip(self.iconnr); end);
    end
 
end
 
function AuraMastery:Scroll()
    local offset = WM:GetControlByName("AMTextureContainer_ScrollBar"):GetValue();
    local control = WM:GetControlByName("AuraMastery_ScrollContainer");
    control:ClearAnchors();
    control:SetSimpleAnchor(scrollChild, 0, -offset);
end

Scrolled down one step (1 step = height of one row of icons, padding included):


Cheers,
Letho