Web stations

The ultimate Guide to CueServer Web Stations

Table of Contents


Creating a Web Station

If you're starting from scratch, this is the perfect place to begin and will walk through the process of creating a new Web Station.

To begin, you'll need to create a new station. You can do this by selecting the ( + ) button next to the station selection box in the Stations window.

This will bring you to the Station Settings page for your new staton.

alt

Configuring a Web Station

Now that the new station has been created, you will see the station configuration screen. This is where we define the station type, number, zone, etc. 

In this case, since we're making a Web Station, we need to change  the type to "Custom Touchscreen". After changing the type, you should see something like this:

alt


Go ahead and set the Viewport size to what your project calls for. If you're not sure, you can click on "Choose" to the right of Viewport and pick from a list of common resolution sizes.

Once you've set your Viewport size, click on "Save" in the bottom-right.


Pages

Each station, regardless of type, can have multiple pages. Pages are like instances of that station. For instance, if you have a Mystique button station with 8 buttons, you can assign rules, button functions, and indicator settings to those buttons. You can also create a second page with a separate set of rules, button functions and indicator settings and dynamically switch between which Page is active at any given time.

With Web Stations, these pages are a bit more flexible, as there is no fixed number of buttons or objects per page. Web Station pages are unique in that they can be entirely different.

Page Rules

Page rules are exactly what they sound like: Rules you can assign to the page itself

The rules that can be attached to a page are Whenever This Page.. Is Opened, Is Closed, Is Idle and Cancels Authentication.

The Is Open and Is Closed events occur when a page is opened or closed as expected. The Is Idle event includes a modifier ...for x seconds which allows you to determine when exactly idle has occurred. 

Lastly, the Cancels Authentication event occurs when a PIN code has been requested and the user selects the cancel button. This might be useful for the case of accidental navigation by an unauthorized user who needs to return to the prior screen. For a typical use-case of this, take a look at our article: Insite Cascading PIN Numbers.

To get to the Page Rules, click on "Page Settings" in the left-hand column of your Stations panel, then click on the "Add Rule" button. You can add multiple rules to each page, if desired.

Add page rules

If you have multiple pages on a station, you will need to switch between them to access the separate functionality, or in the case of Web Stations, separate layout.

To do this, you use the CueScript command:

station [station number] at page [page number]

You can attach this to a rule, button, macro, or anywhere else you can use CueScript. 

 For example, the Cancels Authentication event we discussed in the Page Rules section above would be a solid candidate for this command. This way, the user is navigated back to the correct page upon tapping cancel on the PIN pad.

Using PIN codes

Each page of a Web Station (or mystique/ultra station) can have a PIN code attached to it. This allows you to secure the contents of a page from any unauthorized users.

Once a PIN code is successfully entered, that station's page becomes unlocked indefinitely. You must dictate when to re-lock that page yourself. This prevents an authorized user from having to continuously re-enter a PIN code when performing multiple functions across multiple pages. A good option is to attach a re-locking command to the Is Idle page event from above, or in some cases to the Is Closed event, depending on the project and page.

So how do you lock a page? That's as simple as using the CueScript command:

station [station number] page [page number] lock

As with any CueScript command, this can be attached to a button, page rule, or anywhere else in the system.

To add a PIN code, click on "Page Settings" in the left-hand column of the Stations panel and check the box next to "Require PIN to View Page", then enter the desired code into the box.

alt


If you are interested in learning more about PIN codes, I suggest checking out the Insite Cascading PIN Numbers article.


Layout Editor

Overview

You can access the Layout Editor by clicking on "Layout" in the left-hand column inside the Stations panel. 

alt

The layout editor is where you will drag-and-drop objects, images, and design your layout.

Across the top, there are several buttons to assist in the design process.

The first two buttons toggle between Edit and Run mode. 

  • Edit mode is where you will see the Object Library/Inspector and be able to manipulate your layout.
  • Run mode is a live version where you can test your layout as it will appear on your devices or via a web-browser.

The next two buttons toggle Snap-to-Grid and Show/Hide the Grid Overlay.

The next button, trash, is fairly self-explanatory. This button deletes whatever object is selected when it's clicked.

The next six buttons are for alignment. Each button aligns selected objects center, left or right edges. The first three dealing on the horizontal axis and the latter three vertical.

Finally, the remaining 4 buttons handle z-axis. That is, they determine which objects appear "above" or "below" the others. The first two buttons send an object to the back or front, the latter two step through one layer at a time.

On the right-hand side is the Object Library/Inspector Panel.

The Object Library is where you'll find all the available objects. These objects can be dragged onto the layout and positioned accordingly.

The Inspector panel is used to display and modify all the individual object properties of the currently-selected object.

Background

By clicking anywhere on the background while in Edit mode, the Inspector will display the background options. Here, you can adjust the color or use an image. 

alt

To set the color, click on the color box and select the desired color, then click "Apply".

To use an Image as a background, click on the box next to "Image" and select the desired image, then click apply.

It's important to note that this image will be displayed using its inherent aspect ratio. It's suggested that you crop your desired image to fit the dimensions of your station beforehand.

Text

alt

The text object can be dropped into the layout and its properties modified via the Inspector.

alt

This object has no actions associated with it and thus clicking or tapping on it has no effect.

You can modify the value of the text in the top field below "Text". You can use CueScript variables in this field with the following syntax:

${variableName}

Variables will be updated in real time.

Rectangle/Ellipse

alt  alt

The Rectangle and Ellipse objects, much like the text object, have no actions associated with them. That is to say that clicking/tapping on them has no effect.

The properties of these objects can be modified in the Inspector panel.

alt

The Rectangle object includes the "Radius" property, which modifies the border radius (or curve) amount.

Image

alt

As with the Text, Rectangle and Ellipse objects, the Image object has no actions associated with it.

Aside from position values, the inspector for the Image object includes only one option, which is the image to use. To add an image, click on the box next to "Image".

alt

Button

alt

The look of the Button object can be customized in the Inspector panel.

alt

The label property is used to set what label the button has. This field can also accept variables with the following syntax:

${variableName}

Additionally, this object has an Indicator property. This property links the current indicator status to one of four places:

Top Left:

alt

Middle Left:

alt

Background:

This option sets the background to the color of the indicator status.

Border:

This options sets the border to the color of the indicator status.

Image Button

alt

The Image button acts similar to the button object, with the exception that rather than style and indicator options, there are just two image fields.

The first field is the "On" image, and the second is the "Off" image. 

alt

When the indicator status in not "Off", the "On" image is displayed. Alternatively, the "Off" image is displayed.

Color Picker

alt

The color picker object has multiple color picker styles available, each providing different visual appearance as well as functionality.

alt .   alt .  . alt .  . alt

The style can be set using the "Type" selection box in the inspector panel.

alt

Each type of color picker can also have custom thumb and object styles. These styles are adjusted in the inspector window.

This object requires the use of the "Adjust" function, which links the objects output value to a set CueServer target, such as a group, playback, etc.

Unlike other objects, this object's thumb is considered its indicator. As such, the indicator must be set up correctly inside the button resource object. To ensure proper operation, you must set the indicator on the button resource to the RGB value of the resources target, like so:

alt

This directs the color picker to map the RGB values over a group of channels. For instance, if the group contains channels 1-3, channel 1 would be Red, 2 Green, and 3 Blue. The additional indicator setting directs the thumb on the color picker to display the current color of the group (which is set by the color picker). If this indicator setting is not added, the color picker will not operate as expected.

Slider

alt

The slider object, much like the button, has a plethora of style options to allow complete customization. Additionally, the slider can include both a label as well as the current slider value.

alt

This object requires the use of the "Adjust" function, which links the objects output value to a set CueServer target, such as a group, playback, etc.

When setting up the button in the button resource, select the "Adjust" function and point it to the desired target.

Toggle

alt

The toggle object, unlike the button object, does not have any press, hold, or release events. This object only has two states: On and Off. 

The colors for Off and On, as well as border and border width can set via the Inspector panel.

alt

This object must use the "Toggle" action in its button resource for it to operate. The Indicator value (on/off display) will be linked to the set target of the action command.

For instance, in the action below, as channel 1 is turned on, the toggle will reflect on and vice-versa.

alt

Clock

alt

The clock object has no actions associated with it and thus clicking or tapping on it has no effect.

It can be displayed as an analog clock, or a digital readout. Additionally, you can specify whether the time, time and date, or date only are displayed in either format.

In analog format, you can specify the color and font of the numbers as well as color of the minute, hour, and second hands. You can also specify the background and border colors as well as width.

In digital format, you can specify the font, color, background, and border color/width.

alt


Button Resources

As actionable objects are added to the layout, button resources are created for each. 

The actionable objects are: Button, Image Button, Color Picker, Slider and Toggle. For each of these objects added, an associated button resource will be created automatically.

Each button resource will appear in the left-hand panel under "Buttons"

alt

Each actionable object will also include an "ID" field in the Inspector panel. This value is the linked button resource. 

alt

You can have multiple objects pointing to the same button resource, but one object cannot point to multiple resources.

Within each button resource, you will find the Number, Name, Indicator Settings, and actions/rules for that button (and any objects linked to it).

alt

For objects like Buttons and Image Buttons, actions such as toggle, turn on, turn off, etc. can be selected. For objects like color pickers or sliders, specific actions or indicator sections must be used. Refer to each objects respective section above for specifics for that object.