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:
If there are questions, please ask.
cheers,
Thomas