Skip to content

Extensions (section rxu-2)

Access the UI Extensions Editor

The UI extensions Editor is built into the Devices WebUI

Use the steps below the access the WebUI of the RoomOS Device and navigate to the UI Extensions Editor

  • Open a Browser and enter your Codec's IP as a URL and hit enter 
    https://[ROOMOS_IP_ADDRESS]/web
  • Login with your Username and Password
    • User: [ROOMOS_USERNAME]
    • Pass: [ROOMOS_PASSWORD]

Device Login
Device Login Page

  • Select the UI Extensions Editor on the Left-Hand Navigation Bar

Device Home
Device Home Page

Here is a high level breakdown of all the elements found here

Device Login
UI Extensions Editor

Always Assign Unique PanelIds

You may not be the only developer. Assigning PanelIds unique to your solution helps limit conflicts with other solutions.

How to Add a Panel

Adding a Panel
Adding a new Panel

Info

  • Panels
    • Creates a Panel with pages and rows within, containing widgets
  • Action Buttons
    • Creates a panel
  • Web Widgets
    • Creates a Web Widget on your OSD
  • Web Apps
    • Creates a Panel, that when clicked, opens a URL to a target Web Page

Always Assign Unique WidgetIds

You may not be the only developer. Assigning WidgetIds unique to your solution helps limit conflicts with other solutions.

How to Add Widgets

Adding Widgets
Adding bew Widgets

Each widget can produce unique events, click on each widget below and learn more

Gif

Toggle Action
Toggle Action

Key Value
WidgetId Assigned by the Developer on Widget Instantiation
Type changed
Value on or off

Gif

Slider Action
Slider Action

Key Value
WidgetId Assigned by the Developer on Widget Instantiation
Type pressed, released, or changed
Value Integer between 0 and 255

Gif

Button Action
Button Action

Key Value
WidgetId Assigned by the Developer on Widget Instantiation
Type pressed, released, or clicked
Value N/A

Gif

Group Button Action
Group Button Action

Key Value
WidgetId Assigned by the Developer on Widget Instantiation
Type pressed, released
Value Assigned by the Developer on Widget Instantiation

Gif

Icon Button Icons
Icon Button Icons

Key Value
WidgetId Assigned by the Developer on Widget Instantiation
Type pressed, released, or clicked
Value N/A

Gif

Spinner Icons
Spinner Icons

Key Value
WidgetId Assigned by the Developer on Widget Instantiation
Type pressed, released, or clicked
Value increment or decrement

Does not fire events

Gif

Directional Pad Action
Directional Pad Action

Key Value
WidgetId Assigned by the Developer on Widget Instantiation
Type pressed, released, or clicked
Value up, down, left, right, center

Does not fire events

Tip

Some text elements have limited space, but you won't see an error

Make sure the Text Renders correctly on your device after you apply it

Gif

Edit Text Elements
Editing Text Elements

Info

  • Double clicking on any text element allows you to edit the filed
  • Change the Text as you need it, then press enter

Tip

Keep in mind more is not always better. Try to keep things simple

Gif

Adding a Panel
Adding a new Panel

Info

  • You can add as many rows and pages as your solution needs

Build a Panel! (rxu-2.2)

No lessons here, just take a few moments to explore the various pieces of the UI Extensions Editor

Build a Panel, add some widgets, build something you'd like to see on RoomOS Devices or would like to build after this Lab