UCI Controller

Adding layers to your UCI allows you to separate items on your UCI page. When you create a page in the UCI, it will always have at least one layer by default.

You can add a layer to a single page, or create a shared layer that can be used across multiple pages.

1. Select a page name.
2. Click > Add Layer to add a layer to the selected page.
3. Add content to the layer – copy and paste or drag and drop items onto the selected layer.

You can create shared layers to easily share content between multiple pages. You add content to a shared layer the same as any other layer.

1. Click > Add Shared Layer. The new shared layer is added at the Page level of the UI elements list.
2. Add content to the layer – copy and paste or drag and drop items onto the selected layer.
3. In the UI elements list, drag the shared layer name under the desired page names.

• To view the layers within a UCI page, click the drop-down arrow next to the page name.
• Click or to move a layer. Content on higher layers displays on top of the content on lower layers.
• Click to delete the selected layers. You can delete a layer from the left pane regardless of its visibility or lock state.

• Click to hide or show a layer or an element within a layer. The icon indicates the layer or element is visible.
  Notes

  • When a layer is hidden you cannot select any content on that layer.
  • You can delete the layer and the content on the layer is also deleted.
• Click to lock or unlock a layer or a layer element. The icon indicates the layer is locked.
  Notes

  • You cannot add, delete, or move any content on a locked layer.
  • You can delete the layer when it is locked or unlocked.
• You can script actions of the layers. For more information, see Uci.

1. Select a UCI name from the User Control Interfaces section of the left-side pane.
2. Select the Variables Tab.
3. Click to add a Variable to the selected page.
4. Choose what type of Variable you wish to use. You can select String, Number, Boolean, Color.
   • String: Insert your text field.
   • Number: Insert any number. You can use the up / down arrows to select a number, or manually type in a number.
   • Boolean: Check-box field to allow for a Boolean.
   • Color: Pops up with the Color Picker box to choose a color.

1. Select a UCI name from the User Control Interfaces section of the left-side pane.
2. Select the Variables Tab.
3. Choose what type of Variable you wish to update.
4. Make the necessary changes, (i.e., changing the color, or updating the string, etc.).

Note: You must click away from the Variable that you updated in order for the changes to take effect. For instance, if you have a Variable Name as "Room123", and change it to "Room456", you must click out of the Variable box in which you typed. Enter/Return keys do not force the change.

1. Select a UCI name from the User Control Interfaces section of the left-side pane.
2. Select the Variables Tab.
3. Click to delete the selected Variables.

You can access variables globally, either from another UCI or a regular Text controller script.

-- get room_name variable of some UCI
room_name = Uci.GetVariable("Interface 1", "room_name")

-- change it to something else
Uci.SetVariable("Interface 1", "room_name", "Updated room name")

Visit the Import and Export UCI Variables topic to learn how to import and export UCI Variables.

Using UCI Variables with CSS Integration makes customizing a UCI even easier by pulling in predefined colors, icons, etc. from a CSS Style (to learn more about CSS Styles, see the UCI Styles topic).

Note: Examples 1 and 2 are best when you already have the source classes defined in your style sheet. Example 3 is best when you need to assign icons using source Variables.

Tip: When using a UCI variable to override CSS Content, add quotes around the text if it contains spaces or other special character.

Example 1: Changing Color

Note: Only use CSSColor Variables for CSS. CSS expects RGBA, whereas Designer colors are ARGB.

In the following video, the root style.css file contains root background, primary, secondary colors, and button radius size.

After choosing the Style sheet, those root preferences automatically import. However, we can easily change that information.

Example 2: Changing Icons

The root file also contains predefined button icons for Mac, DVR, and PC.

Using this predefined information, the example below quickly and effortlessly imports the same icons once the variable name matches.

The EventHandler on the UCI Script assigns the specific button to what the Variable Value is set to.

Example 3: Changing Icons Using Source Variable

The CSS Style sheet contains source_Variable to easily assign icons.

With the source_Variable defined, another portion of the UCI script details what icon will be placed into that variable.

In the following examples, we are using a small UCI equipped with Volume Up, Volume Down, and Mute buttons as well as a Gain meter. Additionally, we have two Variables:

• RoomName is defined by the string: Example Room
• GainBlock is defined by the string: Example Gain

Example 1: Gain Functionality

Copy

function GetLevel() -- get current gain level
  Controls.Vol_Lvl.Position = MyGain["gain"].Position
end

function SetVolUp(state) -- press/release gain stepper increase
  if MyGain["stepper.increase"]~= nil then 
    MyGain["stepper.increase"].Boolean = state
  else
    print ("Gain isn't linked.")
  end
end

function SetVolDn(state) -- press/release gain stepper decrease
  if MyGain["stepper.decrease"]~= nil then 
    MyGain["stepper.decrease"].Boolean = state
  else
    print ("Gain isn't linked.")
  end
end

function GetMute() -- get current mute state
  Controls.Vol_Mute.Boolean = MyGain["mute"].Boolean
end

function SetMute() -- set gain mute state to UCI mute state
  if MyGain["mute"]~= nil then 
    MyGain["mute"].Boolean = Controls.Vol_Mute.Boolean
  else
    print ("Mute isn't linked.")
  end
end

function SetGainBlock()
  local compName = Uci.Variables["GainBlock"].String -- get component name from UCI variable
  MyGain = Component.New(compName)          -- link to gain block

  if MyGain["gain"] ~= nil then             --check that this component has a gain control
    MyGain["gain"].EventHandler = GetLevel  -- subscribe for level FB
    GetLevel()                              -- get current level FB
  end
  if MyGain["mute"] ~= nil then             --check that this component has a gain control
    MyGain["mute"].EventHandler = GetMute   -- subscribe for mute FB
    GetMute()                               -- get current mute FB
  end                                       
end

Controls.Vol_Mute.EventHandler = SetMute

Controls.VolUp.EventHandler = function(ctl)
  SetVolUp(ctl.Boolean)
end

Controls.VolDn.EventHandler = function(ctl)
  SetVolDn(ctl.Boolean)
end

Uci.Variables["GainBlock"].EventHandler = SetGainBlock -- update gain block connection if variables changes

SetGainBlock() -- set gain on initial script start

Example 2: String Functionality

Copy

function SetRoomName()
  Controls.Btn_RoomName.Legend = Uci.Variables["RoomName"].String
end

Uci.Variables["RoomName"].EventHandler = SetRoomName -- update room name if variables changes

SetRoomName() -- set room name on initial script start

Note: When using the UCI.SetLayerVisibility within a UCI script, you must drop the argument of UCI_Name.

Here is a simple UCI script that sets layer visibility.

timer0 = Timer.New()
 
 
timer0.EventHandler = function()
  Uci.SetLayerVisibility('Page 1', 'Layer 1', false, 'fade')
  Timer.CallAfter(function()
      Uci.SetLayerVisibility('Page 1', 'Layer 1', true, 'fade')
    Uci.SetLayerVisibility('Page 1', 'Layer 2', false, 'left')
 
    Timer.CallAfter(function()
        Uci.SetLayerVisibility('Page 1', 'Layer 2', true, 'left')
    Uci.SetLayerVisibility('Page 1', 'Layer 3', false, 'right')
 
      Timer.CallAfter(function()
          Uci.SetLayerVisibility('Page 1', 'Layer 3', true, 'right')
    Uci.SetLayerVisibility('Page 1', 'Layer 4', false, 'top')
 
        Timer.CallAfter(function()
            Uci.SetLayerVisibility('Page 1', 'Layer 4', true, 'top')
    Uci.SetLayerVisibility('Page 1', 'Layer 5', false, 'bottom')
 
          Timer.CallAfter(function()
              Uci.SetLayerVisibility('Page 1', 'Layer 5', true, '')
 
          end,1)
        end,2)
      end,2)
    end,2)
  end,2)
end
 
 
timer0:Start(10)

This line instructs the a Shared Layer in a UCI to become hidden with a fade transition.

Uci.SetSharedLayerVisibility('Shared Layer 1', false, 'fade')