UserScreens and WebPanel

Introduction

UserScreens are user-configurable windows that you can organize as you wish, depending on the show’s requirements. You can put several widgets, interact with them, and expose them using Onlyview’s WebPanel feature.

Basic usage

New shows have a default, empty UserScreen.

By default, a UserScreen is locked: you can use it, but not edit it.

Once unlocked, you can drag&drop the various widgets.

Remember to re-lock it afterwards; the widgets can’t be used when the UserScreen is in “edition” mode.

The QuickKey panel

This widget exposes keys that triggers the Show’s QuickKeys. To be configured, re-lock the UserScreen.

On each QuickKey, you can drag&drop any of the items that you can drag on the CommandLayer; they are available in the OBJECTS tab.

• Timelines

• Producer

• Specific Displays

• Devices

This will create a configurable action that will be executed when clicking on the QuickKey.

A QuickKey can also execute or edit nodes in the ActionGraph; Right-click on the desired ActionGraph Node, and select “Create QuickKey”.

Devices

Most devices expose a UserScreen widget. In the OBJECTS tab, select (or create) a device, and drag&drop it in the UserScreen (it needs to be unlocked).

For instance, the HTTP device can show that it lost its connection:

Widgets

The widgets in the left panel can be dragged too:

All these widgets can be interacted with from the ActionGraph. For instance, you can detect presses on a Push Button, and trigger some behaviour accordingly.

Inspector

All the UserScreen Widgets can be inspected and edited using the right panel, when in edition mode:

Multiple UserScreens and Pages

A show can contain several UserScreens; and each UserScreen can contain multiple Pages. This hierarchy is visible in the OBJECTS tab, and can be edited there:

All the Pages are visible as tabs in the UserScreen window.

WebPanel

Basic usage

A UserScreen can be exposed on the network as a normal web page.

In the OBJECTS tab, right-click on the screen, select “Setup”, then check “Exposed on WebPanel”:

You can then visit http://127.0.0.1:8080/ on any browser, and the UserScreen will be usable from there.

User interactions (like clicks on PushButtons and sliders) will be forwarded to Producer, and executed in the ActionGraph. For instance, the following graph will turn the 1rst Timeline on and off, depending on the pressed button:

In case of a disconnection, the WebPanel will show a red dot, and will attempt regular re-connections:

Styling using CSS

You can place a CSS file called “style.css” next to your show (.olv), and the WebPanel will take it into account.

For instance, the following file will set the background color of the whole webpanel to white:

div .screen{
  background-color: white;
}

Or you can use a custom image, also placed in the show’s folder:

div .page-Floor1{
  height: inherit;
  background-image: url("map-floor1.png");
}

Each element in the WebPanel has an ID, so you can use that to style a specific button:

#widget_1_1_2{
    font-size:20px;
}