ExamplePlugin.qplug

-- Example Plugin
-- by QSC
-- June 2019

-- These 'include' comments are used by the compiler to build the .qplug file
-- DO NOT REMOVE THEM
-- The PluginInfo header contains some important information that Q-Sys Designer will parse when compiled.
PluginInfo = 
{
	Name = "Example~Plugin", -- The tilde here indicates folder structure in the Shematic Elements pane
	Version = "1.0.0.15",
	Id = "24fb5acc-7314-470e-ba83-10b7416c3a0f", -- show this is just a unique id. It could even be something like "Im_sUpEr_UnIqUe"
	Description = "An example of how to write plugins",
	ShowDebug = true,
}

-- Once you've drawn your plugin in Designer, you can determine what colors you use a lot. Save yourself some time by putting them in a table, and then simply calling them later. 
local Colors = { 
	White = {255,255,255},
	Black = {0,0,0},
	Red = {255,0,0},
	Green = {0,255,0},
}

function GetColor(props)
  return { 102, 102, 102 }
end

function GetPrettyName(props)
  return "Example Plugin " .. PluginInfo.Version
end

local pagenames = {"Mixer","Video Switcher"}

function GetPages(props)
  pages = {}

  if props["Model"].Value=="Model 1" then
    table.insert(pages, {name = pagenames[1]}) -- Only the "Mixer" pages shows for Model 1
  else
    for ix,name in ipairs(pagenames) do
      table.insert(pages,{ name = pagenames[ix] }) -- All pages in 'pagenames' show for Model 2
    end
  end

  return pages
end

-- We can let users determine some of the plugin properties by exposing them here
-- While this function can be very useful, it is completely optional and not always needed.
-- If no Properties are set here, only the position and fill properties of your plugin will show in the Properties pane
-- Each property can have:
-- Name = string (text displayed next to property)
-- Type = string, integer, double, boolean, enum
-- Value = default value for property
-- Enum type has Choices i.e. Choices = { list of choice strings } which displays in a combobox
-- Integer and Double types have a Min (lowest extent) and Max (highest extent) value that needs to be defined
function GetProperties()
  props = {}

  table.insert(props,
      { -- Depending on the Model, there might be different pages or ctls exposed. The most common application being a change in channel count of a mixer of some sort.
        Name = "Model",
        Type = "enum",
        Choices = {"Model 1", "Model 2"},
        Value = "Model 1", -- This determines the 'default' value when the plugin is dragged into the design
      }
    )
    table.insert(props,
      { -- This dynamically changes the number of Input channels on the mixer depending on what the user inputs, which gives your plugin a lot of flexibility 
        Name = "Inputs",
        Type = "integer",
        Min = 1, -- Integer property types need a lowest extent (Min) and a highest extent (Max) value specified
        Max = 10,
        Value = 5, -- This is the default value when the plugin is dragged into the design
      }
    )
    table.insert(props,
      {
        Name = "Button Styles",
        Type = "enum",
        Choices = {"Gloss","Flat"},
        Value = "Gloss",
      }
    )
    table.insert(props,
     {
        Name = "Serial Pin",
        Type = "boolean",
        Value = false, -- This is the default 'state' of this boolean property
      }
    )

  return props
end

-- The below function is optional (like GetProperties() is), but it can allow further customization of what users can and can't do with your plugin.
-- In this example, when Model 1 is selected in the properties pane, the ability to modify some of the properties will be hidden, only allowing customization with Model 2
function RectifyProperties(props)
	local m = props["Model"].Value
	props["Inputs"].IsHidden = m == "Model 1" -- This logic essentially sets the IsHidden property to true when m is equivalent to Model 1
	props["Button Styles"].IsHidden = m == "Model 1"
	return props
end

-- The below function is where you will populate the controls for your plugin.
-- If you've written some of the Runtime code already, simply use the control names you populated in Text Controller/Control Script, and use their Properties to inform the values here
-- ControlType can be Button, Knob, Indicator or Text
-- ButtonType ( ControlType == Button ) can be Momentary, Toggle, Trigger, 'On', 'Off', or Custom. Custom is for a String type button
-- IndicatorType ( ControlType == Indicator ) can be Led, Meter, Text, or Status
-- ControlUnit ( ControlType == Knob ) can be Hz, Float, Integer, Pan, Percent, Position, or Seconds
-- Controls with a ControlUnit will need a Min and Max value specified
function GetControls(props)
  ctrls = {}

    local ch_count = props["Inputs"].Value -- Setting this property to a variable will save us typing time below, setting the count of controls to the number of inputs the user has defined
    -- Add comments like the one below to make it easier to find things in your code
    -- If anyone ever has to search through or modify your code, they will thank you for this!
    table.insert(ctrls,{Name = "code",ControlType = "Text",UserPin = true,PinStyle ="Input",Count = 1})
    -- Mixer Page Controls
    -- EQ Controls
    table.insert(ctrls,
      {
        Name = "EQBypass", -- Make your control names as obvious and simple as possible. You can always set shorter variables for them in your runtime code
        ControlType = "Button",
        ButtonType = "Toggle",
        UserPin = true, -- UserPin allows pin choice to be added to the Control Pins section of the Properties. Setting UserPin=false while specifying PinStyle means the pin is present with no option to remove it
        PinStyle = "Both",-- Omitting this parameter and UserPin will prevent a pin and will not add it to the Control Pins list
        Count = ch_count, -- Here we call the above value set in the Properties pane by the user to determine how many of these controls we need. 
      }
    )
    table.insert(ctrls,
      {
        Name = "EQFrequency",
        ControlType = "Knob",
        ControlUnit = "Hz",
        Min = 10, -- On controls with ControlUnit, set a Min and Max value
        Max = 20000,
        UserPin = true,
        PinStyle = "Both",
        Count = ch_count,
      }
    )
    table.insert(ctrls,
      {
        Name = "EQGain",
        ControlType = "Knob",
        ControlUnit = "dB",
        Min = -100,
        Max = 10,
        UserPin = true,
        PinStyle = "Both",
        Count = ch_count,
      }
    )
    table.insert(ctrls,
      {
        Name = "EQBandwidth",
        ControlType = "Knob",
        ControlUnit = "Float", -- Since we want a Min/Max with decimal points, we need to specify the ControlUnit as Float instead of Integer
        Min = 0.010,
        Max = 3.00,
        UserPin = true,
        PinStyle = "Both",
        Count = ch_count,
      }
    )
    table.insert(ctrls,
     {
        Name = "EQType",
        ControlType = "Text",
        UserPin = true,
        PinStyle = "Both",
        Count = ch_count,
      } 
    )
    -- Mixer Controls
    table.insert(ctrls,
     {
        Name = "Gain",
        ControlType = "Knob",
        ControlUnit = "dB",
        Min = -20,
        Max = 10,
        PinStyle = "Both",
        UserPin = true,
        Count = ch_count, 
      }
    )
    table.insert(ctrls,
      {
        Name = "Mute",
        ControlType = "Button",
        ButtonType = "Toggle",
        PinStyle = "Both",
        UserPin = true,
        Count = ch_count, 
      }
    )
    table.insert(ctrls,
      {
        Name = "Solo",
        ControlType = "Button",
        ButtonType = "Toggle",
        PinStyle = "Both",
        UserPin = true,
        Count = ch_count,
      }
    )
    table.insert(ctrls,
     {
        Name = "ChannelName",
        ControlType = "Text",
        UserPin = true,
        PinStyle = "Both",
        Count = ch_count, 
      }
    )
    table.insert(ctrls,
     {
        Name = "Clip",
        ControlType = "Indicator",
        IndicatorType = "LED",
        PinStyle = "Both",
        UserPin = true,
        Count = ch_count,
      }
    )
    -- Video Switcher Page Controls
    table.insert(ctrls,
      {
        Name = "Status",
        ControlType = "Indicator",
        IndicatorType = "Status",
        Count = 1
      }
    )
    table.insert(ctrls,
      {
        Name = "Connect",
        ControlType = "Button",
        ButtonType = "Toggle",
        UserPin = true,
        PinStyle = "Both",
        Count = 1
      }
    )
    table.insert(ctrls,
      {
        Name = "Port",
        ControlType = "Knob",
        ControlUnit = "Integer",
        Min = 1,
        Max = 65535,
        UserPin = true,
        PinStyle = "Both",
        Count = 1,
      }
    )
    -- Since we are populating these controls for two different displays, we can do it quickly with a 'for' loop
    -- This is good practice for controls that have multiple congruent, or even similar, property values, and it makes your code more extensible.
    -- Keep in mind that the use of variable 'j' here is completely arbitrary and you can use variables more intuitive to you when writing your plugin i.e. for control_num=1,2 do
    table.insert(ctrls,
      {
        Name = "Power",
        ControlType = "Button",
        ButtonType = "Toggle",
        UserPin = true,
        PinStyle = "Both",
        Count = 2,
      })
    table.insert(ctrls,
      {
      Name = "ImageAdjustRed",
      ControlType = "Knob",
      ControlUnit = "Integer",
      Min = 0,
      Max = 255,
      UserPin = true,
      PinStyle = "Both",
      Count = 2,
    })
    table.insert(ctrls,
      {
      Name = "ImageAdjustGreen",
      ControlType = "Knob",
      ControlUnit = "Integer",
      Min = 0,
      Max = 255,
      UserPin = true,
      PinStyle = "Both",
      Count = 2,
    })
    table.insert(ctrls,
      {
      Name = "ImageAdjustBlue",
      ControlType = "Knob",
      ControlUnit = "Integer",
      Min = 0,
      Max = 255,
      UserPin = true,
      PinStyle = "Both",
      Count = 2,
    })
    table.insert(ctrls,
    {
      Name = "RGBSave",
      ControlType = "Button",
      ButtonType = "Trigger",
      UserPin = true,
      PinStyle = "Both",
      Count = 2
    })
    table.insert(ctrls,
    {
      Name = "RGBRecall",
      ControlType = "Button",
      ButtonType = "Trigger",
      UserPin = true,
      PinStyle = "Both",
      Count = 2
    })
    -- I've nested a 'for' within another here to quickly populate the same inputs for two different outputs
    -- Once again, the use of 'i' as my iterator is completely arbitrary. You could use something like 'inputs' if that is more intuitive for you
    for i=1,2 do
      table.insert(ctrls,
      {
        Name = string.format("Output%iInput",i),
        ControlType = "Button",
        ButtonType = "Trigger",
        UserPin = true,
        PinStyle = "Both",
        Count = 6
      })
    end

  return ctrls
end

function GetControlLayout(props)
  layout   = {}
  graphics = {}

  -- Since our plugin has multiple pages, we need to define some variables to help us dynamically draw the UI based on page and property selections
  local CurrentPage = pagenames[props["page_index"].Value] -- This variable can be used to only draw the ctls you want on that page
  local inpnum = props["Inputs"].Value -- Sizes of certain elements can be dynamic based on how many channels there are
  local btn_style = props["Button Styles"].Value -- We will set button style based on what the user has selected in the Properties pane
  
  if CurrentPage == "Mixer" then -- Anything below here is only drawn on the "Mixer" page
    layout["code"] = {Style = "Text",Position = {0,0},Size = {5,5}}
    for i=1,inpnum do
      -- Since Lua in Q-Sys compiles into C, there are some quirks to consider here
      -- If you only have a singular control ("Input 1"), the control exists just as that
      -- If, however, you have multiple controls ("Input 1","Input 2"), the controls are captured in an array
      -- The tostring() call below handles when there is only one input (inpnum==1) and the control is not captured in an array
      -- The below logic allows us to accommdate both scenarios: a single control or an array of controls
      local ctl_str = tostring(inpnum==1 and "" or " "..i)
      -- This format is the same as table.insert(layout,'your control stuff here')
      -- Since Q-Sys already knows these controls exist, what their names are, and expects us to define their layout, we can use this shorthand method
      -- Please note that this will NOT work for non-control graphical elements, as they don't already have a 'Name' defined for Q-Sys
      layout["EQBypass"..ctl_str] = 
      {
        PrettyName = string.format("EQ~Input %i~Bypass",i),-- The tilde (~) creates a folder for the pins. This can help keep your pins organized and the property pane looking clean
        Style = "Button",
        ButtonStyle = "Toggle",
        ButtonVisualStyle = btn_style,
        Color = {242,137,174},
        UnlinkOffColor = false,
        -- Notice below I am using i to determine the position dynamically: 55 is the X position of the first ctl, and 49 is the distance to the next X value. 
        -- Multiply by i-1 so the addition begins with the second ctl instead of the first. Thus, if i==2, we will multiply 49 by and add that to 55, giving us the X value of our second ctl
        -- This is a valuable technique if you want to offer a plugin that is not only dynamic, but configurable by the end-user
        Position = {55+49*(i-1),32}, 
        Size = {36,16},
      }
      layout["EQFrequency"..ctl_str] = 
      {
        PrettyName = string.format("EQ~Input %i~Frequency",i),
        Style = "Knob",
        Position = {55+49*(i-1),48},
        Size = {36,36}
      }
      layout["EQGain"..ctl_str] = 
      {
        PrettyName = string.format("EQ~Input %i~Gain",i),
        Style = "Knob",
        Position = {55+49*(i-1),84},
        Size = {36,36}
      }
      layout["EQBandwidth"..ctl_str] = 
      {
        PrettyName = string.format("EQ~Input %i~Bandwidth",i),
        Style = "Knob",
        Position = {55+49*(i-1),120},
        Size = {36,36}
      }
      layout["EQType"..ctl_str] = 
      {
        PrettyName = string.format("EQ~Input %i~Type",i),
        Style = "ComboBox",
        Position = {55+49*(i-1),156},
        Size = {36,16}
      }
      layout["Clip"..ctl_str] = 
      {
        PrettyName = string.format("Inputs~Input %i~Clip",i),
        Style = "LED",
        Color = Colors.Red,
        UnlinkOffColor = false,
        Position = {64+49*(i-1),202},
        Size = {16,16}
      }
      layout["Gain"..ctl_str] = 
      {
        PrettyName = string.format("Inputs~Input %i~Gain",i), 
        Style = "Fader",
        Position = {55+49*(i-1),218},
        Size = {36,112}
      }
      layout["Solo"..ctl_str] = 
      {
        PrettyName = string.format("Inputs~Input %i~Solo",i),
        Style = "Button",
        ButtonStyle = "Toggle",
        ButtonVisualStyle = btn_style,
        Color = {0,159,60},
        UnlinkOffColor = false,
        Position = {55+49*(i-1),330},
        Size = {36,16},
      }
      layout["Mute"..ctl_str] = 
      {
        PrettyName = string.format("Inputs~Input %i~Mute",i),
        Style = "Button",
        ButtonStyle = "Toggle",
        ButtonVisualStyle = btn_style,
        Color = {223,0,36},
        UnlinkOffColor = false,
        Position = {55+49*(i-1),346},
        Size = {36,16}
      }
      layout["ChannelName"..ctl_str] = 
      {
        PrettyName = string.format("Inputs~Input %i~Label",i),
        Style = "Text",
        StrokeWidth = 2,
        StrokeColor = Colors.Black, 
        FontSize = 12,
        Position = {55+49*(i-1),362},
        Size = {36,18},
      }
    end
  
    graphics = { -- All of these graphics are drawn only if the current page is "Mixer"
      {
        Type = "Groupbox", -- This is the overall groupbox that will give the plugin a more 'contained' look
        Fill = Colors.White,
        CornerRadius = 8,
        StrokeColor = Colors.Black,
        StrokeWidth = 1,
        Position = {0,0},
        Size = {104+49*(inpnum-1),393} -- The width of the main GroupBox is dependent on how many channels the user specified. More channels means a wider group box
      },
      -- I've collapsed other graphic properties into single lines to save space. Saving space isn't a top priority, but it can make your file look more clean and save space.
      -- Keep in mind that while this will save space, it is inherently more difficult to follow and you sacrifice readability
      {Type = "GroupBox",Text = "EQ",HTextAlign = "Left",CornerRadius = 8,StrokeColor = Colors.Black,StrokeWidth = 1,Position = {6,9},Size = {92+49*(inpnum-1),169}},
      {Type = "GroupBox",Text = "Inputs",HTextAlign = "Left",CornerRadius = 8,StrokeColor = Colors.Black,StrokeWidth = 1,Position = {6,182},Size = {92+49*(inpnum-1),203}},
    }
  
    -- Since our labels have few properties that are different, we can put those differences in a table and iterate over it rather than type each one out individually
    local labels = { 
      Text = {"Bypass","Frequency","Gain","Bandwidth (oct)","Type","Clip","Gain","Solo","Mute","Label"},
      PosY = {32,48,84,120,156,201,218,330,347,362},
      SizeY = {16,36,36,36,16,17,112,17,17,17}
      }
    for i=1,#labels.Text do 
      table.insert(graphics,
        {
          Type = "Text",
          Text = labels.Text[i],
          Font = "Roboto",
          FontSize = 9,
          HTextAlign = "Center",
          Color = Colors.Black,
          Fill = Colors.White,
          Position = {8,labels.PosY[i]},
          Size = {47,labels.SizeY[i]}
        })
    end
    for i=1,inpnum do
      table.insert(graphics,
        {
          Type = "Text",
          Text = string.format("CH %i",i),
          Font = "Roboto",
          FontSize = 12,
          FontStyle = "Bold",
          HTextAlign = "Center",
          Color = Colors.Black,
          Position = {55+49*(inpnum-1),362},
          Size = {36,17},
        })
    end
  
  elseif CurrentPage == "Video Switcher" then -- Anything below here is only drawn on the "Configuration" page
  
    layout["Status"] = 
    {
      PrettyName = "Status",
      Style = "Indicator",
      Position = {172,52},
      Size = {92,18},
    }
    layout["Connect"] = 
    {
      PrettyName = "Connect",
      Style = "Button",
      ButtonStyle = "Toggle",
      ButtonVisualStyle = btn_style,
      CornerRadius = 2,
      Legend = "Connect",
      FontSize = 11,
      Color = Colors.Green,
      UnlinkOffColor = false,
      Position = {172,34},
      Size = {92,18}
    }
    layout["Port"] = 
    {
      PrettyName = "Port",
      Style = "TextBox",
      TextBoxStyle = "Meter",
      Position = {172,18},
      Size = {92,18},
    }
  
    local legends = {"TV","DVR","PC 1","PC 2","HDMI 1","HDMI 2"}
    -- Using for loops can save a lot of time and energy. Notice here that there is a for loop nested within a for loop in order to draw a set of inputs for each output
    -- Keep in mind that 'i' and 'j' were arbitrary variables I chose. You could use "inputs" and "channel" if you felt so inclined
    for i=1,#legends do 
      for j=1,2 do
        local inputs = string.format("Output%iInput ",j)
        layout[inputs..i] =
        {
          PrettyName = string.format("Display %i~Input %i",j,i), -- Notice the tilde here again. This will help keep our Control Pins organized
          Style = "Button",
          ButtonStyle = "Trigger",
          ButtonVisualStyle = btn_style,
          Legend = legends[i],
          FontSize = 8,
          Color = {73,127,191},
          OffColor = {30,58,91},
          UnlinkOffColor = false,
          Position = {36+36*(i-1),140+154*(j-1)}, 
          --[[
              We can use i and j to set positions, similar to some of our methods previously in the plugin
              Generally speaking, you'll multiply the width (or difference in position) of the ctls by the variable, then add or subtract the appropriate difference for the first control. 
              In the above example, the input buttons have a width of 36, which is how much their X positions will increase by, since they are flush. We can multiply that width/X position variance
              by how many buttons we have (i), and just add the 7 for the first button whose X position value is 43 (43-36=7). For the Y position, simply take the difference between your 
              first row of inputs' Y position and the second rows' Y position. Since we only want to add the 60 for the second row, we can subtract 1 from j and thus only when j>=2 will
              the Y position increase by 60.
            ]]
          Size = {36,16},
        }
      end
    end
  
    for i=1,2 do
      layout["Power "..i] =
      {
        PrettyName = string.format("Display %i~Power",i),
        Style = "Button",
        ButtonStyle = "Toggle",
        ButtonVisualStyle = btn_style,
        Legend = "Power",
        FontSize = 9,
        CornerRadius = 10,
        Color = Colors.Green,
        UnlinkOffColor = true,
        OffColor = Colors.Red,
        Position = {72,91+154*(i-1)},
        Size = {144,26},
      }
  
      layout["ImageAdjustRed "..i] = {PrettyName = string.format("Display %i~Red",i),Style = "Knob",Position = {36,181+154*(i-1)},Size = {36,36}}
      layout["ImageAdjustGreen "..i] = {PrettyName = string.format("Display %i~Green",i),Style = "Knob",Position = {93,181+154*(i-1)},Size = {36,36}}
      layout["ImageAdjustBlue "..i] = {PrettyName = string.format("Display %i~Blue",i),Style = "Knob",Position = {150,181+154*(i-1)},Size = {36,36}}
      layout["RGBSave "..i] = {PrettyName=string.format("Display %i~RGB Save",i),Style="Button",ButtonStyle="Trigger",ButtonVisualStyle=btn_style,Legend="Save",CornerRadius=2,Color={254,248,134},Position={197,181+154*(i-1)},Size={55,16}}
      layout["RGBRecall "..i] = {PrettyName=string.format("Display %i~RGB Recall",i),Style="Button",ButtonStyle="Trigger",ButtonVisualStyle=btn_style,Legend="Recall",CornerRadius=2,Color={254,248,134},Position={197,197+154*(i-1)},Size={55,16}}
    end
  
    graphics = {
      {
        Type = "GroupBox",
        Fill = Colors.White,
        CornerRadius = 8,
        StrokeColor = Colors.Black,
        StrokeWidth = 1,
        Position = {0,0},
        Size = {284,393}
      },
      -- Once again, graphic properties below are collapsed into single lines, but this is not a requirement. You can type them out as the groupbox is above
      {Type = "GroupBox",Text = "Connection",HTextAlign = "Left",Fill = Colors.White,CornerRadius = 8,StrokeColor = Colors.Black,StrokeWidth = 1,Position = {8,6},Size = {267,75}},
      {Type = "GroupBox",Text = "Display 1",HTextAlign = "Left",Fill = Colors.White,CornerRadius = 8,StrokeColor = Colors.Black,StrokeWidth = 1,Position = {8,85},Size = {267,148}},
      {Type = "GroupBox",Text = "Display 2",HTextAlign = "Left",Fill = Colors.White,CornerRadius = 8,StrokeColor = Colors.Black,StrokeWidth = 1,Position = {8,239},Size = {267,148}},
      {Type = "Text",Text = "Status",Font = "Roboto",FontSize = 10,HTextAlign = "Center",Color = Colors.Black,Position = {136,52},Size = {36,18}},
      {Type = "Text",Text = "Port",Font = "Roboto",FontSize = 10,HTextAlign = "Center",Color = Colors.Black,Position = {136,16},Size = {36,18}},
  
      -- You can have a JPEG, PNG, or SVG in your plugin, and they will draw in the sequence you draw them in this file (based on 'Z' order)
      -- The below image is encoded by the compiler when we build our plugin
      -- Simply specify where on your machine the image lives, and the compiler will do the rest
      -- The .qplug file will only display the base64 encoded data
      { 
        Type = "Svg",
        Image = "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTE1IDM2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMTUgMzY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDojMDA3QkMyO308L3N0eWxlPjx0aXRsZT5Bc3NldCAxPC90aXRsZT48Zz48ZyBpZD0iTGF5ZXJfMS0yIj48ZyBpZD0iUVNDX0xvZ29zIj48ZyBpZD0iUVNDX0xvZ29fLV9CbHVlIj48ZyBpZD0iUVNDX0xvZ28iPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik03Ni41LDI2LjVjLTAuNiwzLjctMi4xLDUuNi00LjcsNS42SDQyLjFjLTEsMC0xLjItMC40LTEuMi0xLjh2LTIuOWMwLTEuMSwwLjMtMS41LDEtMS41aDI0YzAuOSwwLDEtMC4yLDEtMS42di0zLjVjMC0xLjItMC4yLTEuNC0wLjktMS40SDQ1LjdjLTIuOSwwLTQuNS0xLjktNS02LjNjLTAuMy0yLjUtMC4zLTQuOSwwLjEtNy40QzQxLjQsMS45LDQyLjksMCw0NS41LDBjMTAsMCwxOS45LDAsMjkuOSwwYzAuOCwwLDEuMSwwLjQsMS4xLDEuN3MwLDIuMywwLDMuNWMwLDAuOS0wLjMsMS40LTAuOSwxLjRINTEuNGMtMC45LDAtMSwwLjItMSwxLjZ2My4xYzAsMS4yLDAuMiwxLjUsMSwxLjVoMTUuOGMxLjYsMCwzLjIsMCw0LjgsMGMyLjUsMCw0LDEuOCw0LjYsNS41Qzc3LDIxLDc3LDIzLjgsNzYuNSwyNi41eiIvPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zOCw2LjVjMC0wLjQsMC0wLjcsMC0xLjFjMC0xLjYtMC42LTMuMi0xLjgtNC4zYy0xLTAuOC0yLjItMS4yLTMuNS0xLjFjLTQuMywwLTguNiwwLTEyLjgsMEg2LjNjLTIsMC0zLjUsMS40LTQuNiw0Yy0xLjIsMy4yLTEuNCw2LjgtMS42LDEwLjNjLTAuMSwyLjYsMCw1LjEsMC4zLDcuNmMwLjEsMS42LDAuNCwzLjIsMC45LDQuOGMxLDMuNiwyLjcsNS41LDUuMyw1LjRjNC4xLTAuMSw4LjEsMCwxMi4yLDBjMSwwLDIuMSwwLDMuMiwwYzAuNCwwLDAuNiwwLjIsMC41LDAuOHMwLDEuNSwwLDIuMmMwLDAuNiwwLjIsMC45LDAuNiwwLjljMiwwLDQsMCw2LjEsMGMwLjQsMCwwLjYtMC4zLDAuNi0wLjlzMC0xLjQsMC0yLjFzMC4xLTAuOSwwLjYtMC45YzEuNCwwLjEsMi44LDAuMSw0LjItMC4yYzItMC41LDMuNi0yLjMsMy42LTYuM0MzOCwxOS4zLDM4LDEyLjksMzgsNi41eiBNMzIuNSwyMy41YzAsMS4zLTAuNCwxLjktMS4yLDEuOWMtMC40LDAtMC44LDAtMS4yLDBzLTAuNS0wLjItMC40LTAuN2MwLTAuOCwwLTEuNSwwLTIuM2MwLTAuNS0wLjEtMC44LTAuNS0wLjhoLTYuMmMtMC40LDAtMC41LDAuMi0wLjUsMC43YzAsMC44LDAsMS41LDAsMi4zYzAsMC42LTAuMSwwLjctMC41LDAuN2MtMiwwLTMuOSwwLTUuOSwwaC01LjdjLTAuOSwwLTEuMi0wLjUtMS4yLTEuOVY4LjFjMC0xLjMsMC40LTEuOSwxLjItMS45aDIxYzAuOSwwLDEuMiwwLjYsMS4yLDEuOUwzMi41LDIzLjVMMzIuNSwyMy41eiIvPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMTUsMjcuMnYzLjVjMCwxLjEtMC4yLDEuNC0wLjksMS40SDk5LjRjLTQuNiwwLTkuMi0wLjEtMTMuOCwwYy0zLjEsMC4xLTQuOC0yLjQtNS42LTYuM2MtMC41LTIuNi0wLjgtNS4yLTAuOC03LjhjLTAuMi0zLjYsMC4xLTcuMiwwLjYtMTAuN2MwLjMtMi4xLDEtNC4xLDIuMy01LjljMC44LTEsMi0xLjUsMy4yLTEuNUgxMTRjMC44LDAsMSwwLjMsMSwxLjV2My43YzAsMC45LTAuMiwxLjItMC44LDEuM0g4OS4zYy0wLjksMC0xLDAuMi0xLDEuNVYyNGMwLDEuNCwwLjEsMS42LDEsMS42aDI0LjZDMTE0LjksMjUuNiwxMTUsMjUuOCwxMTUsMjcuMnoiLz48L2c+PC9nPjwvZz48L2c+PC9nPjwvc3ZnPg==",
        Position = {21,34},
        Size = {115,36}
      },
    }
  
    for i=1,2 do
      table.insert(graphics,
      {
        Type = "Header",
        Text = "Input Select",
        HTextAlign = "Center",
        Color = Colors.Black,
        FontSize = 12,
        Position = {36,124+154*(i-1)},
        Size = {216,10},
      })
      table.insert(graphics,
      {
        Type = "Header",
        Text = "Image Adjust",
        HTextAlign = "Center",
        Color = Colors.Black,
        FontSize = 12,
        Position = {36,168+154*(i-1)},
        Size = {216,10},
      })
  
      table.insert(graphics,{Type = "Text",Text = "Red",FontSize = 8,HTextAlign = "Center",Color = Colors.Black,Position = {36,211+154*(i-1)},Size = {36,16}})
      table.insert(graphics,{Type = "Text",Text = "Green",FontSize = 8,HTextAlign = "Center",Color = Colors.Black,Position = {93,211+154*(i-1)},Size = {36,16}})
      table.insert(graphics,{Type = "Text",Text = "Blue",FontSize = 8,HTextAlign = "Center",Color = Colors.Black,Position ={150,211+154*(i-1)},Size = {36,16}})
    end
  end

  return layout, graphics
end

--Start event based logic
if Controls then

  --[[ Runtime File Contents ]]
  
end