Panel stack example script

Forums: Panel stack example script
Forum for OctaneRender Lua scripting examples, discussion and support.

Panel stack example script

Postby stratified » Thu Jan 16, 2014 8:07 pm

stratified Thu Jan 16, 2014 8:07 pm
Hi all,

Just a quick example on how to use the panel stack in Lua. I modified the user interface of the turntable animation to use a panel stack. Panel stacks come in handy when you have a lot of stuff to display on a single window. The panel stack component reveals a scroll bar when the components don't fit.

Panel stacks are similar to groups they take a list of child components and when you don't explicitely set the width and height, they take the dimensions of their largest child component. They take 2 extra lists open with the initial open-close stated for each child and captions with the caption to appear above each child component. Here's how to create a panel stack:

Code: Select all
-- stack that puts all in place
local panelStack = octane.gui.create
{
    type     = octane.gui.componentType.PANEL_STACK,
    children =
    {
        settingsGrp,
        fileGrp,
        progressGrp,
        buttonGrp
    },
    open     = { false, false, false, false, },                     -- component open or closed
    captions = { "Settings", "File Output", "Progress", "Buttons" } -- captions to appear above the children
}


Here's a full working example:

Code: Select all
-- Example on how to use the panel stack
--
-- @description Panel stack example
-- @version     0.1
-- @author      Thomas Loockx

-- creates a text label and returns it
local function createLabel(text)
    return octane.gui.create
    {
        type   = octane.gui.componentType.LABEL,    -- type of component
        text   = text,                              -- text that appears on the label
        width  = 100,                               -- width of the label in pixels
        height = 24,                                -- height of the label in pixels
    }
end

-- creates a slider and returns it
local function createSlider(value, min, max, step, log)
    return octane.gui.create
    {
        type        = octane.gui.componentType.SLIDER, -- type of the component
        width       = 400,                             -- width of the slider in pixels
        height      = 20,                              -- height of the slider in pixels
        value       = value,                           -- value of the slider
        minValue    = min,                             -- minimum value of the slider
        maxValue    = max,                             -- maximum value of the slider
        step        = step,                            -- interval between 2 discrete slider values
        logarithmic = log                              -- set the slider logarithmic
    }
end

-- helper to pop-up an error dialog and optionally halts the script
local function showError(text, halt)
    octane.gui.showDialog
    {
        type  = octane.gui.dialogType.ERROR_DIALOG,
        title = "Turntable Animation Error",
        text  = text,
    }
    if halt then error("ERROR: "..text) end
end


-- lets create a bunch of labels and sliders
local degLbl       = createLabel("Degrees")
local offsetLbl    = createLabel("Start Angle")
local targetLbl    = createLabel("Target Offset")
local durationLbl  = createLabel("Duration")
local frameRateLbl = createLabel("Framerate")
local frameLbl     = createLabel("Frames")
local samplesLbl = createLabel("Samples/px")

local degSlider       = createSlider(360, -360 , 360, 1, false)
local offsetSlider    = createSlider(0  , -180 , 180, 1, false)
local targetSlider    = createSlider(10 , 0.001, 10000, 0.001, true)
local samplesSlider   = createSlider(400, 1 , 16000, 1, true)
-- these sliders are couples (25 frames @ 25 fps is 1 second of animation)
local durationSlider  = createSlider(1 , 1 , 3600  , 0.001, true)
local frameRateSlider = createSlider(25, 10, 120   , 1    , false)
local frameSlider     = createSlider(25, 10, 432000, 1    , true)

-- manual layouting is tedious so let's add all our stuff in a group.
local settingsGrp = octane.gui.create
{
    type     = octane.gui.componentType.GROUP,  -- type of component
    text     = "Settings",                      -- title for the group
    rows     = 7,                               -- number of rows in the grid
    cols     = 2,                               -- number of colums in the grid
    -- the children is a list of child component that go in each cell. The cells
    -- are filled left to right, top to bottom. I just formatted the list to show
    -- where each component goes in the grid.
    children =
    {
        degLbl           , degSlider       ,
        offsetLbl        , offsetSlider    ,
        targetLbl        , targetSlider    ,
        durationLbl      , durationSlider  ,
        frameRateLbl     , frameRateSlider ,
        frameLbl         , frameSlider     ,
        samplesLbl       , samplesSlider   ,
    },
    padding  = { 2 },   -- internal padding in each cell
    inset    = { 5 },   -- inset of the group component itself
}

-- file output

-- create a button to show a file chooser
local fileChooseButton = octane.gui.create
{
    type     = octane.gui.componentType.BUTTON,
    text     = "Output...",
    width    = 80,
    height   = 20,
}

-- create an editor that will show the chosen file path
local fileEditor = octane.gui.create
{
    type    = octane.gui.componentType.TEXT_EDITOR,
    text    = "",
    x       = 20,
    width   = 400,
    height  = 20,
    enable  = false,   
}

-- for layouting the button and the editor we use a group
local fileGrp = octane.gui.create
{
    type     = octane.gui.componentType.GROUP,
    text     = "Output",
    rows     = 1,
    cols     = 2,
    children =
    {
        fileChooseButton, fileEditor,
    },
    padding  = { 2 },
    inset    = { 5 },
}

-- progress bar

-- eye candy, a progress bar
local progressBar = octane.gui.create
{
    type   = octane.gui.componentType.PROGRESS_BAR,
    text   = "render progress",
    width  = fileGrp:getProperties().width * 0.8, -- as wide as the group above
    height = 20,
}

-- for layouting the progress bar
local progressGrp = octane.gui.create
{
    type     = octane.gui.componentType.GROUP,
    text     = "",
    rows     = 1,
    cols     = 1,
    children = { progressBar },
    padding  = { 10 },
    centre   = true,    -- centre the progress bar in it's cell
    border   = false,
}

-- render & cancel buttons

local renderButton = octane.gui.create
{
    type   = octane.gui.componentType.BUTTON,
    text   = "Render",
    width  = 80,
    height = 20,
}


local cancelButton = octane.gui.create
{
    type   = octane.gui.componentType.BUTTON,
    text   = "Cancel",
    width  = 80,
    height = 20,
}

local buttonGrp = octane.gui.create
{
    type     = octane.gui.componentType.GROUP,
    text     = "",
    rows     = 1,
    cols     = 2,
    children = { renderButton, cancelButton },
    padding  = { 5 },
    border   = false,
}


-- stack that puts all in place
local panelStack = octane.gui.create
{
    type     = octane.gui.componentType.PANEL_STACK,
    children =
    {
        settingsGrp,
        fileGrp,
        progressGrp,
        buttonGrp
    },
    open     = { false, false, false, false, },                     -- component open or closed
    captions = { "Settings", "File Output", "Progress", "Buttons" } -- captions to appear above the children
}

-- window that holds all components
local window = octane.gui.create
{
    type     = octane.gui.componentType.WINDOW,
    text     = "Turntable Animation",
    children = { panelStack },
    width    = panelStack:getProperties().width,
    height   = panelStack:getProperties().height,
}

window:showWindow()


Here are some screenshots:

stack3.png


stack1.png


stack2.png


If there are questions, please ask.

cheers,
Thomas
User avatar
stratified
OctaneRender Team
OctaneRender Team
 
Posts: 945
Joined: Wed Aug 15, 2012 6:32 am
Location: Auckland, New Zealand

Re: Panel stack example script

Postby MB » Sat Mar 15, 2014 2:21 am

MB Sat Mar 15, 2014 2:21 am
I would like to avoid showing a bunch of empty space below the collapsed panel stack items.
I can't seem to figure it out. I'm guessing on the mouse event one should toggle the height of the main form, however if my panel stack is not the last item, that simply truncates those that are.

Coulds you please provide some sample code.

many thanks

Mark
Windows 11, 2x Intel I9, 64GB Ram, 2x GTX 1080 TI, 1 x RTX 380 TI, Oculus Quest 2
User avatar
MB
Licensed Customer
Licensed Customer
 
Posts: 168
Joined: Tue Jan 15, 2013 3:41 am
Location: Washington, D.C.

Re: Panel stack example script

Postby stratified » Mon Mar 17, 2014 7:29 pm

stratified Mon Mar 17, 2014 7:29 pm
Hi Mark,

We don't support resizing yet in lua. That means if everything is collapsed you'll have empty space and then when everything is expanded you need to scroll. Not much we can do about it right now.

cheers,
Thomas
User avatar
stratified
OctaneRender Team
OctaneRender Team
 
Posts: 945
Joined: Wed Aug 15, 2012 6:32 am
Location: Auckland, New Zealand

Return to Lua Scripting


Who is online

Users browsing this forum: No registered users and 6 guests

Thu Mar 28, 2024 10:30 am [ UTC ]