Skip to main content

Render Component

When paired with an Interface block, the Render Component block can receive an input, then re-render a specific user interface component (i.e. a button/slider/stepper...) to change its appearance, position and more on a user interface.

This is useful for locking out components, changing the colour, making buttons flash and much more to provide users with live visual feedback.

These modifications are only made on a per-session basis and will not persist between sessions. (If you want to save states between sessions, we recommend you use variables as a method of setting render Component values and configure them to "Persist Between Sessions" from within the main Workspace Settings menu).

Notes​

Given the flexibility of the Render Component block, a Notes field has been added for information to be entered to keep track of each function.

Render Editor​

Pressing Open Editor on the block allows options to be defined.

Note: You must connect an interface block to the output of this block before using the Render Editor.

Context​

  • State - A value to set the current state (On or Off) of supported buttons.
  • Position - A value to set the current position of the handle of a slider, stepper and other similar Components (use a decimal value between 0 and 1 inclusive, enter a variable defined in workspace Settings using the $ sign, i.e. $variable, or use data sent to the input from elsewhere in the process).
  • Enabled - Enable and disable a Component from being used (interlock).

Text​

  • Label - An optional label for the Component.
  • Label Font Size - The label’s font size within the Component.
  • Label Alignment - The alignment of the label within the Component.
  • Body - The body text of the Component.

Appearance​

  • Theme - The default colour theme of the Component.
  • Selected Theme - The colour theme shown when the Component is selected.
  • Image - The default image of the Component background (relevant to descriptors and buttons).
  • Selected Image - The background image shown within a Component when selected.
  • Image Scaling - Default - References the interface global theme options. Fit -Ensures the full image is contained within the Component (this could lead to empty bars above & below or at the left and right of the image if it isn't the same size as the Component. Fill - Ensure the image covers the full Component (if the image isn't the same size as the component, it will be cropped to fit.
  • Show Inner Background - Display the inner background of the Component.
  • Show Border - Default - References the interface global theme options. - Enabled/Disabled - Allows the setting to be configured specifically to the Component.

Position & Size​

  • Width - A value to set how wide a Component is (in pixels). Define a fixed numerical value or enter a variable defined in Workspace Settings using the $ sign, i.e. $variable).
  • Height - A value to set how tall a Component is (in pixels). Define a fixed numerical value or enter a variable defined in Workspace Settings using the $ sign, i.e. $variable).
  • Position X - Move a Component's position left or right on a workspace by a user-defined number of pixels (measured from the left edge of the interface). Define a fixed numerical value or enter a variable defined in Workspace Settings using the $ sign, i.e. $variable).
  • Position Y - Move a Component's position up or down on a workspace by a user-defined number of pixels (measured from the top edge of the interface). Define a fixed numerical value or enter a variable defined in Workspace Settings using the $ sign, i.e. $variable).

Input​

  • Input - Receive a trigger from any data type to initiate rendering of the connected interface component.

Output​

  • Output - Connect to the Render Component Input of an Interface block only.