User Panels

Pathfinder Core PRO allows you to create your own custom user interface that can be displayed and used in a web browser on any device. This allows you to define precisely how your users interact with your Axia system in a way that supports your organization’s workflow. Currently, Google Chrome is the recommended browser for this feature.

HTML User Panels may be used and edited from the User Panels menu item. The Panels list includes HTML5 Panels and legacy Panels created with the legacy Panel designer.

Creating a New Panel

• Click the plus icon to create a new Panel and open the new Panel in the Panel Designer.

  

• Click Save and type a name for your Panel to instantiate it before you begin adding components.

  

• After saving and giving the Panel a name, the name of the Panel should appear in the upper corner:

  

Setting Panel Size

Next set the size of the Panel. Click the main Panel to select it:

The property window on the right side of the Panel designer will display properties that can be modified for the selected component:

Panel dimensions can be set to a standard preset, set to a specific height or width, or autoscaled dynamically.

Selecting a Size Preset

With the main Panel selected, click in the Property window’s Size field and select from a size preset.

The size of the Panel area in the Panel Designer should change based on your selection.

Setting the Panel Height or Width

With the main Panel selected, click in the Property window’s Height or Width field and set a new height and width in pixels. Pixel values may be typed in, or you may click on the spinner control to adjust the value.

The size of the Panel area in the Panel Designer should change based on your changes.

Autoscaling

Use autoscaling if you want the components in the panel to scale to the size of the browser window as it changes. With the main Panel selected, select an option from the autoscale dropdown.

While intuitively you might believe that height_and_width is the correct choice, it rarely is. This option can cause buttons and components to be stretched in strange ways.

On the other hand, scaling based on height alone will maintain the correct aspect of the component while just scaling it up and down:

In general, if the aspect ratio of the Panel objects is important and the Panel will be displayed on a widescreen monitor, it is best to choose scaling based on height. If it is a widescreen monitor turned sideways for portrait orientation, the best option is based on width.

If aspect ratio does not matter, for example when you are working only with square or rectangular buttons, autoscaling based on height and width may be used.

Testing Autoscaling Options

After creating your Panel, save it with one of the autoscaling options. Open the Panel in a browser and change the browser size to observe the autoscaling behavior and get a feel for which option is most appropriate.

As you evaluate the different autoscaling options, after resaving with a new option you must refresh your browser for the new option to be applied.

Adding Components

To add components to your Panel, expand the HTML and/or Custom sections in the left toolbar:

Hovering over any component will show a tooltip with the name of that component. We can illustrate adding and modifying components using a simple HTML button.

Click and drag the top-left HTML Button (the tooltip will say Button) from the toolbar into the Panel. After dropping the button in your Panel, it should be highlighted with a red box indicating it is the selected component.

To resize the component, click and drag the component’s red border. The border displays just inside the actual edges of the object by design so when aligning objects you can still see the object’s actual edges.

To move the component within the Pane, click and drag the center of the component. You can also use the arrow keys on your keyboard to nudge the selected component in any direction. Each press of an arrow key will move the component one pixel at a time unless the grid is enabled in which case it will move by the grid amount. See the Grid topic in the Tool Bar section below for additional details.

Important Note: By default, some components may resize both height and width when one or the other is dragged as non-scaled resizing causes the component to look skewed and stretched if the aspect ratio is not maintained. These are generally more complex components such as the console fader. Holding the SHIFT key while resizing overrides this behavior and allows you to skew the component if desired.

Adjusting Properties

The property list on the right will update to include properties that may be adjusted for the currently selected component type. Clicking in a field and changing the property will make the corresponding change to the component. For example, with our button still selected, click in the Caption field and type a caption:

Expand the Style section and try adjusting the border>border-radius value or the font/text>font-size value.

As you can see there is a high degree of power to achieve exactly the desired design using the properties in the property grid.

Once you’ve achieved your design objectives, click Save to save your changes or click Cancel to return the Panel to its previous save state.

Important Note: There is no undo or redo feature, so saving frequently as you work is recommended.

SHIFT Editing the Property List

Holding the SHIFT key while clicking in the User Panel property editor fields will bypass the usual helper dialogs and allow direct editing of the text. This can be useful for things like copying and pasting color values. SHIFT+click to highlight the text box without the helper dialog and then click again to edit the text for the property.

Tool Bar

The top Tool Bar has several tools to help with the component layout:

Cancel/Save

The Cancel and Save buttons may be used to save your work or cancel pending changes and reload from the last save point. Frequent saves while working on the design are recommended.

Cut, Copy, Paste

These are the standard Cut, Copy, and Paste tools. These actions can be performed on any currently selected components.

You can select multiple components by holding the SHIFT key while you click additional components.

Delete

Clicking the Delete button will delete the currently select components. Be careful with this function as there is no undo though you can click cancel to return to the previously saved state.

Alignment Tools

The alignment tools will only be available for use if you have multiple components selected. You can select multiple components by holding the SHIFT key while you click additional components.

To illustrate, drag three or four buttons into the Panel. Then, while holding the SHIFT or CTRL key, click each component until the red select box is around each of them:

Once you have selected more than one component, the alignment tools will become available. These tools are:

In each case the system will align to the most extreme edge. For example, with the four buttons selected in the example above, clicking Align top will align all buttons to the top edge of the button closest to the top of the Panel.

Clicking Distribute horizontally will spread the buttons evenly between the left and right buttons.

Magnet

The Magnet tool aligns and resizes items of like kind edge-to-edge. For example, create a new button and resize it. Then add a second button but leave it at the default size. If you then drag the small button so its edge meets the large button…

…the small button will immediately snap to the size of the large button and align itself to the large button’s edge.

This is extremely useful when trying to build a Panel with many same sized components lined up edge to edge. However, it can also be disconcerting when you want the components to be different sizes and/or not to line up. The Magnet tool is enabled by default but may be disabled by clicking on the tool.

Grid

f enabled, the Grid tool aligns a component’s location and size according to a grid of a specified pixel density. For example, if you enabled the grid with a pixel density of 10 pixels, you will notice that dragging components will jump by 10 pixels. This is useful when trying to evenly align components.

Page

Each Panel has an index page which is the default page that will be loaded when the Panel is first displayed, but additional Pages may be created using the Page tool. Buttons or events may then be used to switch between the pages as described in the changing pages section of this chapter.

To design a new Page, click the down arrow and select the [newpage] option.

After clicking the [newpage] option, click Save and type a name for your new page. Then you can design a new page as if it was any other Panel.

If a Panel has multiple pages, you can use this same dropdown to select the page to edit.

You can clone your work to a new page by selecting the page to be cloned and then selecting the [clonepage] drop-down item. The system will ask you for a new page name for the cloned page.

You can delete a page by selecting the page background and clicking the delete icon. The system will then ask you if you want to delete the page. You cannot delete the default index page.

Once multiple pages have been created you can use the change property along with buttons or property changes that will switch from one page to another. This is described in the Changing Pages section of this chapter.

Property Grid

You were already introduced to the property grid in the section on adjusting properties above. This section will go into some additional detail. Drag a button onto your Panel and select it so that the property grid displays the available properties of the button.

Different components may have different property sections and sub-sections as well as properties that are specific to that component, but this is an example of the property sections you will see. Expanding the sections will display additional sections and properties.

The majority of these properties are standard CSS style properties used by any web page designer. One of the best references we have found for CSS properties is w3schools.com: https://www.w3schools.com/CSSref/. This link will provide information about all of the CSS properties exposed in the property grid along with their meaning and usage information.

There are also some properties that you will not find in the CSS reference above because they are custom to our usage of that component. For example, in the case of the button component, caption, HwMap, and indicator are all properties that are not standard CSS properties. We will describe their usage more in the examples below.

Bind Button

Each property in the property grid has a button between the property name and the property value at the end of the property name side of the grid. This is called a bind button.

The bind button defines the properties that should be exposed to PathfinderCore PRO for use in Logic Flows. In some cases, there may be hundreds of properties for a given component, but there are only a few that you will want to dynamically change while the Panel is running. For example, once you position a button on a Panel and size it to the size you desire, it is unlikely that you will want that position to change while your end-user is using the Panel. Therefore, there is really no need for the left and top properties to be cluttering up the Logic Flow tree. Clicking the bind button for a given property will turn the button blue.

Saving the Panel will then identify to PathfinderCore PRO that this is a property that we expect to dynamically manipulate with Logic Flows and so should be tracked by PathfinderCore PRO and made available to Logic Flows.

Binding Flows

You may also notice that after enabling a property for binding that an image of a partial Logic Flow will appear at the bottom of the property grid:

This is a simple shortcut that allows you to generate a simple flow to bind values to the property without having to switch over to the Logic Flow designer. In addition, since these flows simply bind system states to Panel properties, the flows generated by this method do not count against your license count. It is an easy way to quickly add simple functionality. But it will be easier to understand with an example.

Let’s say we want the button we have dragged onto the Panel to trigger a route change. Select the button and enable the binding button on the mousedown event. We are defining what we want to happen when the button is pressed. Then double-click on the endpoint in the flow image.

This will open the normal property selection dialog used in Logic Flows:

Expand the Routers section, expand a router, and expand the destination you want to change when the button is pushed, and then click on the CurrentSourcePath Property. Then click select.

The system will automatically move to the translation dialog.

Click on the *=* item in the list and then select the True item in the left hand drop down and the source you want to route to the selected destination in the right hand drop down.

We have just defined that if the mousedown event is true, the sa_server_06 source will get routed to the TestTest destination. However, when you click Done you will get a pop-up message.

This message will only appear if you are generating flows on the mousedown or indicator properties of a button. In this case, it knows that since we are defining what we want the button to do, we probably also want some indication on the button that the requested action has been done. If we click OK, it will automatically turn the binding button on for the indicator property and open the flow definition for the indicator. In this case, it is smart enough to fill things in for us.

It is important to notice that the flow for the indicator property looks different than the one for the event.

The system also knows in which direction these flows should go. For example, with an event, the start point is not displayed in the flow because the event we have selected is the start point and the end point is what we are going to change. On the other hand, standard properties like the indicator are changed based on things that are changing in the system. So, you select what property in the system is causing the indicator to change. In that case, the partial flow shows the start point and the translation and the endpoint is the property of the Panel component we have selected. The rule of thumb is that events will display partial flows with an endpoint and other properties will display a flow with a start point. The missing part of the flow is the event or the property itself.

When we click OK in response to the message above you will notice the system will skip picking the start point. This is a special case for buttons where you are configuring the mouse down and indicator properties. Since we just defined what we want to change when mouse down is pressed, the pop-up message is asking whether we want the successful change of that route to be reflected in the indicator. So, if we click OK, the system automatically turns on the binding for indicator and fills in the start point with the destination selected, and then displays the translation settings.

You will also notice that the system is assuming you will want the indicator to be on if the selected source is routed to the destination and off if it is not.

Click Done.

You will notice that the flows are no longer gray and have turned blue to indicate they have been defined. Saving the Panel will cause the flows to be created and start working in Logic Flows. Flows created in this manner will be generated in a special folder in Logic Flows called _Panels. The flows in this folder may be monitored for troubleshooting purposes but they cannot be changed from within Logic Flows. They are only edited through the Panel designer.

Note: To see these flows working you need to go back to User Panels and open the Panel for usage by clicking on the Panel link rather than the edit link. It is helpful to have this open in a separate browser tab while you are working. Then, after saving changes in the designer, you can switch over to the tab with the running Panel, refresh the page, and see your changes in action.

To extend this example, turn on the binding for caption as well.

Now double click on the start point and select the same CurrentSourcePath property of the same destination. Now in the translation select what you want the button to say when the source is routed and what you want it to say when it is not.

Click Done and Save to save your changes. Executing the Panel should now display Routed or Not in the button’s caption depending on whether the selected source is routed to the destination.

A more useful change you can make with the caption property is to select the CurrentSourceName property of the destination in the Logic Flow property selector and use a *=* translation. You can change this by double-clicking the start point while the caption property is selected.

Now pick the currentSourceName Property instead of the CurrentSourcePath property and click select.

Change the translation to be *=*. Then click Done. Now the button’s caption will be tied to the name of whatever source is currently routed to the destination.

After saving the Panel and opening it up for use you should find that pressing the button will make the route change, the indicator will illuminate or go dark according to the back-color properties depending on whether the route is made, and the caption should display the name of the source that is routed to the destination.

By using these techniques, you can edit functionality into the Panel components in very easy and extremely powerful ways.

Complex Panel Flows

In many cases you may wish to create more complex flows than described in the examples above. For example, you may want your indicator state on a button to be the product of numerous conditions in the system. These kinds of Flows can still easily be created but must be created within the Logic Flows designer.

Simply enable the binding button for the properties these Flows need to manipulate without generating a Flow in designer. Save the Panel and then from within the Logic Flows property selector, these properties will be available for use:

Launching the Panel from a Desktop Icon (Windows)

If you are using Google Chrome, there are some command line options that will allow you to launch a Pathfinder Core PRO Panel as if it was an application. Copy and paste the following into a notepad or text editor:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --app="data:text/HTML,<HTML><body><script>window.location='http://[Username:Password]@[IPAddress]/userpanelframemin.php?panel=[ttt]&page=[index]';</script></body></HTML>"

When copied, this should be one line in the editor. The quotes at the beginning and end are part of the text so do not remove them. After the word “location” there is an http link.

• Change **[Username:Password]**to match the credentials used in your system.

• Change **[IPAddress]**to match the IP address of your Pathfinder Core PRO.

• Change [ttt] to the name of the Panel you want to launch.

• Change [index] if you want to target a page other than the default index page

For example, these values…

• [Username:Password]= Admin:Admin

• [IPAddress]= 172.16.1.56

• [ttt] =YAPanel

• [index] = Its_a_New_Page

…would result in a shortcut like this:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --app="data:text/HTML,<HTML><body><script>window.location='http://Admin:Admin@172.16.1.56/userpanelframemin.php?panel=YAPanel&page=Its_a_New_Page';</script></body></HTML>"

Once you have the edits made, select the entire text again and copy it to your clipboard.

Right-click on your desktop and create a new shortcut using your edited shortcut text. Double-clicking on the shortcut should now launch the Panel as its own application.

If you always want the Panel to launch in the same place on the screen you can add another option: window.moveTo(580,240). For example:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --app="data:text/HTML,<HTML><body><script> window.moveTo(580,240); window.location='http://Admin:Admin@172.16.1.220/userpanelframemin.php?panel=ttt&page=index';</script></body></HTML>"

In the future, we will investigate a way to generate the shortcut (or at least the shortcut text) automatically.

Component Reference

Each component has many available CSS properties and component events. Many of these properties can be understood after some basic study that starts with a basic internet search for CSS property descriptions.

This section will describe each component, including custom properties beyond the standard CSS style properties.

We have included default images of the components below, but it is important to note that the CSS properties can be used to make the components look much different than the examples included below. Feel free to adjust border, color, and shadowing properties to achieve the design desired.

Important Note: Each component has an ID property allowing you to define a name for the component. This is useful in differentiating components in Logic Flows and debugging so it is a good habit to name components as you create them. IDs must be unique within the page.

HTML Components

Button

The Button component can control and indicate changes in the system. In addition to standard CSS style attributes, customizable properties include:

Wherever this button can be used, a Console Button could also be used. The difference is that the Console Button has a slightly more elegant look.

Label

Labels can be used to generate textual label information in the system. In addition to standard CSS style attributes, customizable properties include:

Input Box

Input boxes allow user input. In addition to standard CSS style attributes, customizable properties include:

In addition to mousedown and mouseup events, Input Box events include:

Both change and input events raise the current entered value.

To learn more about this feature visit: http://pathfinderpc.com/pfcorepro_downloads/panelinputboxes.mp4

Web Page

The Web Page component is an HTML iframe which allows you to embed a web page from another site into the Panel. This component can be used to display video streams and other web page content.

In addition to standard CSS style attributes, customizable properties include:

If you intend to use this as a background component with other components on top, you may need to manually adjust the z-index property of this component or the overlaid components to get them to display properly.

The Web Page component includes this event:

Especially during testing, it is important to note that some sites (notably, Google) prevent their content from being displayed in an iframe.

Image

The Image component allows you to embed an image in a page. This component can be used to create background borders around a set of components.

It is recommended to use the background-image property rather than the src property to assign an image to this component.

Before you use an image component, remember most elements also support the background-image property. For example, you can apply a background-image to the Panel itself or to buttons and labels.

(In true radio fashion, the KRUD logo was lifted with no regard to the copyright owned by Jim Radcliffe and Brian Wilson. Their work is genius. Check it out at www.krud.com. Even better, embed it in a Panel using the Web Page component.)

Custom Components

Meters and Faders

HTML5 User Panels support two different kinds of meters (providing visualizations of Audio IOs that support metering) and two different kinds of faders (allowing gain manipulation of Audio IOs.)

Gradient Meter

This component can be tied to Audio IOs that support metering in the system. See the Setting the IO Property topic in this chapter.

In addition to standard CSS style attributes, customizable properties include:

LED Meter

This component can be tied to Audio IOs that support metering in the system. See the Setting the IO Property topic in this chapter.

In addition to standard CSS style attributes, customizable properties include:

Fader

This component can be tied to Audio IOs that support gain manipulation. See the Setting the IO Property topic in this chapter. The Fader can also control non-audio control points. See the Setting the Control Property topic in this chapter.

The control displays the Fader value as you hover over the Fader. Fader values can be manipulated using the mouse wheel, dragging with the mouse, or touch and drag on a touch screen.

In addition to standard CSS style attributes, customizable properties include:

Additional Default Fader style properties:

Additional Simple Fader style properties:

Console Fader

This component can be tied to Audio IOs that support gain manipulation. See the Setting the IO Property topic in this chapter.

The control displays the Fader value as you hover over the Fader. Fader values can be manipulated using the mouse wheel.

The Console Fader is a smart fader capable of displaying different properties depending on the type of IO assigned to it.

In the example above, this Console Fader has been assigned to a Fusion console input. When loaded, the component updates the controls according to the type of IO to which it has been assigned. In this case it shows the name of the source profile, a meter obtained from the input stage of the fader (see note below), the program buss assignments, a fader which maps to the Fusion fader, A and B user buttons, Talk and Preview buttons, and ON and OFF.

This component will dynamically adjust what it displays depending on the type of IO it is associated with. Those changes will only be shown when the Panel is executed. That is when the capabilities of the assigned IO are analyzed. For example, after dragging a console fader onto the Panel and assigning IOs, when the Panel is executed you may see controls that look like:

In this case the first Fader is tied to the channel input of an Axia console. The second fader is tied to a VMIX channel input so the component changes to show the time up and down parameters. The third shows an XNode source.

Important Note: When the control property is used, metering will be deduced where possible unless the IO property is also filled in. If nothing is selected in the control property, the control point is inferred by the IO property where possible. For node Ios and Vmixers, the IO property is the recommended field to select. For console faders, the control property is recommended. Additionally, for iQx, Qor engine, and iQs style consoles, selecting a control point will use LwcpSs instead of Lwrp to obtain metering data.

Many of the properties discussed above in the Fader object have also been exposed in the Console Fader so that the color and style of the slider within the larger console fader object may be manipulated. These styles correspond directly to the styles.

In addition to standard CSS style attributes, customizable properties include:

Additional Default Fader style properties:

Additional Simple Fader style properties:

Setting the IO Property

Meters and Faders may be tied to an Audio IO using the component’s IO property. For example:

• Drag a Gradient Meter into a User Panel and resize it to an appropriate size

• Click the IO property to open the IO Select Source dialog box

  

• The link at the top of the page will display whether sources or destinations are currently being displayed. Clicking the link will toggle between the two

  

• Click an IO whose metering you want to be tied to the meter and click select

  

• You can use the Search box to narrow down the list of available sources or destinations

• The IO field will fill with the path of the selected IO

Since we are in the designer, no metering will be displayed. It will only display when the Panel is executed.

Important Note: Enabling the binding button for the IO parameter will make it available to Logic Flows, allowing you to dynamically change the IO assigned to the meter or fader.

Setting the Control Property

Traditionally a Fader or a Console Fader is assigned its control point using the IO selection which presents a list of sources and destinations in the main audio router. Selecting a specific source or destination allows the Fader to function intelligently and present the correct controls to the user of the Panel.

However, when applied to console faders this functionality assumes the use of FaCH.

FaCH is the control of the physical fader based on its position in the console whereas LwCH allows control over a fader with a specific Livewire channel loaded to it wherever it resides in the console. Additionally, some consoles (Qor-based consoles such as IQ and Radius) do not have a direct correlation between the IOs exposed to the router and the faders those IOs may or may not be tied to. In these cases, the system cannot infer control from the IO property.

The control property addresses this problem by adding an override of the control portion of the component.

When the control property is used, the metering is defined by the IO property, but the controls (fader, on/off, etc) are defined by the control property. If nothing is selected in the control property, the control point is inferred by the IO property. If nothing is selected in the IO property but the control property is used, then no metering will appear.

Using the control property, Lwch options and Qor faders are now available to these components where previously they were not available. It is important to note that Lwch and Qor faders do not have directly inferable metering points, so if metering is desired it must be manually selected with the IO property in addition to the control point with the control property. It is possible that in the future we may add code to attempt to figure out a correct metering point for the assignment but for now it must be a manual decision. It is also important to note that the control property currently only displays fader objects as control point options. xNode sources and destination control points and Vmix points should be selected using the IO property. In the future, those as well as xNode mix points may be selectable via the control property as well.

To enable the control property of an existing Fader or Console Fader control:

• With the Fader or Console Fader control selected, click the control field in the Property window

  

• In the Select Gain Control Point dialog, click on the device to control and click Select

  

Controlling Numeric Properties

If the fader is a standard fader rather than a console fader, you can alternatively set it to control any numeric property in the system.

• After selecting the fader and the control field, Click the Endpoints button to change the Select Gain control Point dialog to the Property selection tree. From there you can connect to any numeric property in the tree

  

• If you select a non-numeric property, the system will give you a warning. Avoid using non-numeric properties with the control property. See Controlling Non‑Numeric Properties below

• Accept the default Translator properties

  

• Save your Panel. The Fader will now control and update based on the value of the memory slot

For this to work properly there are several other properties that can be used:

Important Note: When using the control property to select the functionality for the fader, the system will try to automatically set the min, max, and step properties if the system knows what they should be for the given control point.

Controlling Non-Numeric Properties

Another option is not to use the control property to bind the functionality and instead to bind the displayvalue and valuechange properties directly to properties. This can be useful in situations where a translation is necessary.

For example, we could connect a Fader to a true/false or GPIO value.

• In this case we do not use the control property but would instead enable the binding on the slidervalue property and the slidervaluechanged event.

  

• Set the min property to 0, the max property to 1, the step property to 1, and type to linear

  

• Set the slidervaluechanged event to the GPO pinstate of a GPIO port

  

• For the translation, set 0 to Low and 1 to High

  

• Set the slidervalue property to the same GPO pinstate as the slidervaluechanged event

  

• Reverse the translation. That will make sure that if something else changes the GPIO pin that it will be updated in the fader:

  

For this example, you may also want to turn the metrics off since there are only two valid states.

This is probably not the best use case for this functionality, but it shows how you can use the Fader control to manipulate any value in the system either directly using the control property if it is a numeric property or via translation and the slidervalue and slidervaluechanged property and event.

Console Knob

The rotary Console Knob may be used in the same way as the Fader above. The same properties for numeric and non-numeric control as well as min, max, step, etc. properties also apply to the console knob object.

This control can also have its control property used to select a console fader or other numeric property in the system to control in the same manner as described for the fader control above. In addition, this component also shares the indicator property with button objects so that the knob color may be changed based on some indication state.

Console Button

The Console Button component can control and indicate changes in the system. This button works the same as the HTML button but has a more interesting look.

In addition to standard CSS style attributes, customizable properties include:

Qor/Iq Monitor Section

The Qor/Iq Monitor Section acts as a monitor section for Iq/Qor based consoles. There are a few points worth noting about this component:

• The meter option button is reserved for future use

• The clock and timer functionality are controlled by Pathfinder Core PRO and not the console and so will not be in sync with the console timer and countdown clock. This is because those control points are not currently available in the LwcpSs control protocol

Dragging this component onto a Panel will present a monitor section for an Iq/Qor console:

• To assign the component to a specific Iqx or Qor based console, select the component in the Panel and click the control property

• In the list of available control points, you will find one for each Iq/Qor whose type is LwcpSsRoot. Those are the only control points that may be used with this component

Important Note: LwcpSs support must be enabled to use this component. If the component does not work as expected, verify support for this protocol has not been disabled. Access System>Configuration>Advanced Options and look for the following parameter:

SET Devices#0 LwcpSs=False

Router XY Matrix

This version adds a Router XY Matrix component both as a User Panel component and as an additional tab on the Router-Details page. It can be added to a Panel using the Router XY Matrix component.

After adding the component to the page, resize it and use the select a router to use with it.

• With the component selected, click the router property

  

• Click the desired router in the list and click Select

  

The component will not populate with actual router data while viewed in the Panel Designer. This means that the actual column and row header size may be inflated since the default designer example population only has ten sources and destinations. It is useful to view it in the actual executing Panel to see how it will function.

Action Properties

Events

One of the interesting things you can do with the hover and preset events is to bind the path to the IO field of meters. This allows you to create a Panel where hovering over a cross-point also shows metering for that cross-point. Note that metering does not yet support IO binding to virtual router IOs.

Style Properties

Using the XY Matrix

Once a matrix has been added to a Panel, a router assigned to it, and the Panel saved, view the Panel to see how it functions.

Since this component mirrors the functionality of the XY matrix presented on the XY tab in Routers, refer to the Routers chapter for details on how the end-user can use the routing matrix once it is deployed on an HTML5 User Panel.

Analog Clock

This component displays the current time using an analog clock style.

Analog Countdown

This component allows you to define and trigger a countdown. The clock will display the countdown value.

Custom properties include:

Currently, the timer does not automatically reset when the countdown completes. If that functionality is desired, it can be obtained by using the property bindings to hook the elapsed event to the reset state such that when the timer elapses, reset is triggered. This can be accomplished either by using the Flow in elapsed to change the reset or by using the Flow in reset to change based on the elapsed start point.

In both cases, the Panel must be saved with the binding buttons for these properties/events turned on to surface those options in the Flow property tree.

For example:

• Enable the binding buttons for both elapsed and reset have been enabled and save your Panel

  

• Select the reset property field and click the start point in the bottom corner

• Browse to the User Panels group, locate the digital countdown control in your specific Panel, and select the elapsed Value property

  

• Select True=True for the translation

  

• Click Done. After saving the Panel if the countdown elapses the timer should automatically reset

Digital Clock

This component displays the current time using a digital clock style.

Digital Countdown

This component allows you to define and trigger a countdown. The clock will display the countdown value.

Custom properties include:

Currently, the timer does not automatically reset when the countdown completes. If that functionality is desired, it can be obtained by using the property bindings to hook the elapsed event to the reset state such that when the timer elapses reset is triggered. This can be accomplished either by using the Flow in elapsed to change the reset or by using the Flow in reset to change based on the elapsed start point.

In both cases, the Panel must be saved with the binding buttons for these properties/events turned on to surface those options in the Flow property tree.

For example:

• Enable the binding buttons for both elapsed and reset have been enabled and save your Panel

  

• Select the reset property field and click the start point in the bottom corner

• Browse to the User Panels group, locate the digital countdown control in your specific Panel, and select the elapsed Value property

  

• Select True=True for the translation

  

• Click Done. After saving the Panel if the countdown elapses the timer should automatically reset

List Selector

At this point in time, the list selector component should be used primarily by advanced users that understand the API. In a future version, we will add options for simplifying the selection of list content and data. This component provides a drop-down list for selecting elements in the system. For example, it could be used as a source selector for a virtual router or a show profile selector for a console. Unfortunately, until we finish a more intuitive configuration user interface, some knowledge of the API and inner working of PathfinderCore PRO are required to configure this component. A thorough understanding of SapV2 (Appendix A) will help in the configuration of this component. Also, feel free to reach out to support for guidance.

There are 4 primary properties that are used together to describe the list options and another two for event and state:

• Listsearchpath: This holds a SapV2 object path and optional property value for the root from which all objects in the list will be obtained; for example:

  • Routers#0.VirtualRouter#4 SapObjectType=VirtualSource

    • This specifies that we will be filling the list with data from virtual sources in virtual router number 4

  • Devices#0.Qor#[tcp://172.16.1.59:93].LwcpInterpreter#0.LwcpRoot#0.AppControl#0 ObjectName=ShowProfile

    • This specified that we will be filling the list with data from show profiles on the Qor at 172.16.1.59

• Listsearchdepth: The number of branches below the listsearch path root to look for elements; many times, this will be 1 for one level deeper than the root selection, but it could be higher or -1 for infinite For Example:

  • Devices#0.Qor#[tcp://172.16.1.59:93].LwcpInterpreter#0.LwcpRoot#0.AppControl#0.ShowProfile#0

    • This is one branch deeper than the search path in the last example above

• ItemDisplayProperty: This is the property that will be used as the display data for each object; this is what the user sees; in both of the examples above this would likely be the name property

• Itemselectvalue: This is the property whose value will be used in the change and current value events. In the examples above it would be the Id and/or ObjectId properties

• CurrentValue: this can be used by logic flows to select the displayed value

• Change event: this can be used to make a change when a different item in the drop down is selected; the value that will be available in the translation is defined by the itemdisplayproperty

Let’s work through two examples.

List Selector Example 1

For example 1 we will use the selector to present a list of sources from a virtual router. When the user selects a different source, it will change a specific destination on that router. Make sure you have a virtual router in the system. In this case, we will use VirtualRouter 4. Set the following property values:

• Listsearchpath: Routers#0.VirtualRouter#4 SapObjectType=VirtualSource

• Listsearchdepth: 1

• Itemdisplayproperty: Name

• Itemdisplayvalue: Id

This means that we are looking for objects up to 1 level deep below the Routers#0.VirtualRouter#4 path whose SapObjectType=VirtualSource. The last part of this is important so that the selector does not also show destinations. For each source that is found the selector will create an item in the select list whose display value is taken from the name property and whose select value is taken from the id property. This will display a list of sources by name from virtual router 4 and the value used when a selection is made will be the source’s id.

Next, enable the binding on the currentvalue and change properties. For the change property select Destination 1’s current source property in the virtual router.

And use *=* for the translation. This will make sure that any time a new selection is made in the list, the number of that source will be passed to the destination’s currentsource property thereby affecting a route change.

For the currentvalue property, select destination 1’s current source again as the start point. Translation would again be *=*. This will ensure that if the destination route changes even by some other means that the drop down list will change to show the correct source.

In this way, we have created a route selector from a drop-down list.

List Selector Example 2

In example 2 we will use the selector to present a list of show profiles for a qor/iq. When the user selects a different show profile for the qor/iq, it will change the show profile. Set the following property values (modifying for your own device):

• Listsearchpath: Devices#0.Qor#[tcp://172.16.1.59:93].LwcpInterpreter#0.LwcpRoot#0.AppControl#0 ObjectName=ShowProfile

• Listsearchdepth: 1

• Itemdisplayproperty: Name

• Itemdisplayvalue: ObjectId

This means that we are looking for objects up to 1 level deep below the Devices#0.Qor#[tcp://172.16.1.59:93].LwcpInterpreter#0.LwcpRoot#0.AppControl#0 path whose SapObjectType=ShowProfile. For each show profile that is found the selector will create an item in the select list whose display value is taken from the name property and whose select value is taken from the ObjectId property. This will display a list of sources by name from Qor/Iq in question and the value used when a selection is made will be the show profile’s id.

Next enable the binding on the currentvalue and change properties. For the change property select the console’s appcontrol ShowProfId property.

And use *=* for the translation. This will make sure that any time a new selection is made in the list, the number of that show profile will be passed to the console’s showprofid property thereby affecting a show profile change.

For the currentvalue property, select showprofid property again as the start point. Again use *=* for the translation. This will ensure that if the show profile changes even by some other means, that the drop-down list will change to show the correct show profile.

In this way we have created a drop-down list for selecting a new show profile.

We realize that until more intuitive user configuration user interfaces are created, this component may be challenging. If you need to understand how to use it for a specific task, please reach out to support and realize that currently this is an advanced feature and may require some time for them to obtain the correct parameters for your task.

Hardware Mapping Buttons

HTML or Console Buttons may be mapped to physical LCD buttons in the console or rack mount button panels. Hardware mapping makes the physical button mirror the behavior of the software button. To define this:

• Click on a User Panel Button and click the HwMap fiel

  

• A dialog will appear listing the known hardware buttons in the system

  

• The Mapped To field will display a value if the button has already been hardware mapped as each hardware button can only be mapped to a single software button. Physical buttons do not have to be hardware mapped. They can also just be used directly with Logic Flows

  

If the button you want is not shown, make sure the LCD Panel or console is in the devices list. If not, it needs to be discovered. See the Discovery topic in Chapter 1 for more details on discovering devices.

LCD Panels must be manually discovered in devices using the add and Lwcp discovery. If a console device exists in the system but is not showing the LCD buttons, try pressing a few of the LCD buttons and then refreshing the web page.

• Select the button you want to hardware map and click Select

  

Important Note: Once the Panel is saved, hardware mapping in HTML Panels takes place natively in the application and does not require hardware map Logic Flows as the legacy Panels did.

Button Indicator PULSE Values

PULSE0 through PULSE10000 will flash an HTML or Console Button for the specified number of milliseconds (PULSE**[ms]**)and then return to the last requested state. If the indicator state is changed while the pulse flash is in progress the new state will be returned once the flash time is complete. PULSE0 may be used to cancel an in-progress pulse. This allows the easy binding of state (ON/OFF) conditions while allowing an additional Flow to control flashing.

For example, if we want a GPI to cause a button to flash for 5 seconds and then turn on or off depending on the state of VMIX 1, we could build a Flow like this:

This type of Flow is useful for situations where you need to flash a button as an alert but retain a known state after the flashing is complete.

With the addition of PULSE, we can achieve the same functionality with a much simpler Flow:

In this case, the button indication is tied to the VMIX state but setting Pin 1 to Low will cause a 5000ms (5-second) flash. It will then return to whatever state the VMIX is currently in even if that state has changed during the duration of the pulse.

If the button is an HTML5 button this can be made even simpler by binding the indicator to the VMIX state within the User Panel and only implementing the PULSE (flash) flow in Logic Flows.

Changing Pages

Creating additional pages is described in the page section of the toolbar documentation earlier in this chapter. In this section, we will explore how to switch between panels and pages. Switching between multiple Pages can be accomplished by using the ChangePage property. Let’s build an example set of linked pages. This example will create a map with an alarm state that can be clicked to obtain more details on the alarm from a second page.

• Create a new Panel and click Save. Name the Panel TestMap

• Click on your new Panel to select it. In the property grid, expand the style>background section and click the background-image property. A dialog will appear for selecting and uploading images

  

• For this example, we will upload an image of a map of Ohio; click Choose File, select your stored image, and click Upload; the image will appear in the selection list. Click on the image and click Select; the background of the Panel will now display the image of Ohio

  

• Drag a button into the Panel and position it next to Cleveland

  

• Click on your new button to select it. In the Properties grid, modify the button’s Properties:

Your Panel should now look something like this:

• Enable the binding for the indicator state of the button

  

• Click on the Start Point and select a SilenceAlarm AlarmState

  

• For the Translation, select AudioPresent as indicator OFF and Silent as ON

  

• Click Done; when the system asks about the mouse down action, click Cancel; in this case, the mouse down is going to change pages and has nothing to do with the property we are picking for the indicator so we will set it separately

  

• Turn on the binding for the Caption property

  

• Click the Flow’s Start Point; select the same AlarmState property and click Select

  

• For the Translation make Silent convert to Err and AudioPresent to OK. Click Done

  

• Save the Panel; at this point, if we were to execute this Panel, the button next to Cleveland should be cyan and OK if the silence alarm has audio presence, and Err and Red if it is silent

• From the Page drop down, select [NewPage]; save the new page with the name Cleveland

  

• Drag a new button onto the new page and set its caption to Return

  

• With the button still selected, enable the mouse down binding

  

• Click the End Point. Expand the UserPanels section of the Logic Flow property selector. Expand UserPanel#TestMap>TestMap.Cleveland section and select the ChangePage property. Click Select

  

Note: If you do not see TestMap.Cleveland in the Logic Flow property selector, it means you have not yet saved the new page.

• In the translation set True=TestMap.index and click Done

  

• Click Cancel when asked about updating the button color properties

  

• Save the Page. We have just defined that when we click the return button on the Cleveland page it will set the ChangePage property of the Cleveland page to TestMap.index, effectively returning to the index page

• Use the Page drop down to select the index page again

• Click the OK button to select it. Turn on the binding for the mouse down event

  

• Click the End Point, select the UserPanels>UserPanel#TestMap>TestMap.index ChangePage property

  

• In the Translation set True=TestMap.Cleveland then click Done

  

• Click Cancel for the binding button color question and save the Panel

• Launch the Panel; the button on the main map should switch caption and color based on the silence alarm state; clicking the OK button should take you to a new Page called Cleveland, while clicking the return button should take you back to the main map index page

You are always selecting the changepage property of the current page and defining the Page you want to move to in the button’s translation dialog.

Another interesting point is that the changepage property is also available to normal Logic Flows. For example, rather than binding this to the mousedown event, we could create a flow in Logic Flows that automatically switches the Panel page to the Cleveland Panel whenever a silence alarm occurs and back again when audio presence is restored. Additionally, the changepage property is not limited to pages within the same Panel. You could switch to a completely different Panel.

In a real use case, we would fill the Cleveland page with more information than just a return button. For example, we might create a system flow chart page with meters and buttons and silence alarm states of various parts of the chain to more easily determine where the failure occurred.

SubPanels

HTML5 Panels include a web page component which is essentially an HTML5 iframe component that can be used to embed other web pages and components (for example from a corporate page or video link) into a Panel. It can also be used to embed a different Panel into a parent Panel. For example:

• Create a new Panel. Save the Panel and name it SubPanelTest

• Drag two buttons into your new Panel

  

• Drag in a web page component

  

• Enable the binding on the src property of the web page component.

  

• Click the left-hand button to select it, enable the binding for both indicator and mouse down, and save the Panel.

  

• Select the mouse down property Flow diagram endpoint and select the iframe src property as the endpoint.

  

• For the translation make the mousedown true equal to:

/userPanelframemin.php?Panel=shared&page=page1

Replacing the Panel name (shared) and page name (page1) with the name of the Panel and page you wish to display as a subPanel.

It is important to use the framemin.php page rather than the frame.php page so that the full Pathfinder Core PRO header and menu system do not appear in the subPanel.

• Click Done and allow the reverse binding to be set up so the indicator will light when the selected page is loaded in the iframe.

• Repeat the procedure for the right-hand button, referencing a different page in your Translator statement.

• Save your Panel.

When the main Panel is executed, the web page component will load with the Panels specified by your buttons as subPanels. In this way we can create shared content that can be loaded in multiple Panels as shown below:

SubPanel and shared content problems

The example above works great for many kinds of shared content. For example, we could create a Panel for each studio where one of the selection buttons loads a clock and meter subPanel, and another loads an airchain display subPanel.

The challenge comes when the shared subPanel needs to target different things depending on the parent Panel.

For example, what if the subPanel buttons in the examples above were source selectors but needed to target a different destination depending whether they were loaded in Studio 1’s parent Panel or Studio 2’s? The subPanel could be a specific and even paged set of selections common across all studios, but would need to target the fader on which ever studio the subPanel was loaded in.

The temptation to solve this problem would be to create some sort of Logic Flow that changes what happens depending on which Panel last loaded the subPanel (Studio 1, 2, etc.) However, this approach does not allow for the subPanel to be loaded in both at the same time. Also, the subPanel itself has no knowledge that it is loaded as a subcomponent of another Panel.

The only way to solve this problem is to introduce messaging internal to a given instance of a browser, allowing the subPanel to communicate with the parent Panel instead of with a specific destination and vice versa. That kind of messaging is the purpose of the Panel SetLocal and PanelMemorySlot.

Panel SetLocal

Important Note: This is considered an advanced feature and is often used in tandem with the PanelMemorySlot feature.

Each HTML5 Panel includes a write only property called SetLocal. Selecting the overall Panel will display this property in the property tree:

This property sends messages to set another property on the running instance of the Panel, its parent, or a subPanel. Like the PanelMemorySlots property, this property operates inside a single, specific instance of a Panel rather than upon all running instances of a given Panel.

In general, this property’s value will not be set in the Panel designer. Instead, the binding will be enabled and then can be used or bound to other items in the Panel via the Panel’s internal flows. The syntax that makes this possible is:

<target>|<elementId>|<propertyName>=<PropertyValue>

For example, you could enable the binding of this property and then when a button is pressed you can set the value of this property to:

iframe_1|MyButton|Indicator=ON

The target portion can either be:

• parent = assumes this Panel is loaded as a webbrowser (iframe) subPanel of another Panel and we wish to send a property change to the parent Panel.

• local = tries to set a property on the local instance of the Panel

• name of a web browser (iframe) element in the form = tries to set a property on an element in a Panel running in a web browser element in the existing Panel. This variation looks for an iframe in the current Panel of the correct name and then passes the property message to the web page running in that iframe.

Examples:

• parent|MyButton|Indicator=ON

  • Attempts to turn the Indicator property On for a Button named MyButton that is expected to reside on a Panel in which this Panel is running as a subPanel.

• local|MyButton|Indicator=ON

  • Attempts to turn the indicator property On for a button named My Button that is expected to reside on this instance of the Panel.

• Iframe_1|MyButton|Indicator=ON

  • Attempts to turn the indicator property On for a button named MyButton that is expected to reside on a Panel loaded in a web browser (Iframe) element called Iframe_1.

It is important to understand that SetLocal sets properties only in this instance of the browser.

If you have the Studio 1 Panel loaded on two different computers and you perform an action that uses the SetLocal property to change an element’s property, that change will only happen on that computer’s instance of the Panel unless other external bindings are also in use.

If the change is bound to a component inside the Panel it will remain inside that instance of the Panel, but if it is bound to something like a route change that is outside of the Panel it will likely happen on all. This can be seen because using this property as a binding to a component inside the Panel will not generate a Panel based Logic Flow and binding it to something outside the Panel will. The nuances of this are a bit subtle but should become clear as we work through the example below.

Panel Memory Slots

Important Note: This is considered an advanced feature and is often used in tandem with the Panel SetLocal feature.

Panel Memory Slots are like normal memory slots except that they only live inside a browser instance of a Panel. They can be thought of as a javascript variable that also raises a change event inside the running instance of the Panel.

The item can be found in the custom tool section. Dragging it onto a Panel will create a dotted component. This component will be invisible when the Panel is actually executing.

Like the SetLocal property above, if this is bound using a Panel Flow to an item inside the Panel (button, iframe, etc), no flow in the larger pathfinder will be created. Instead the value will just be changed or affect change within the running instance of the Panel only. If the Flow is bound to an item outside the Panel (for example a route change of console fader state), then a Flow will be created.

The Panel Memory slot has three important properties/events in the property grid:

Shared SubPanel Example

Returning to our example above:

In this example, what if the four buttons in the SubPanel are tied to sources on destinations dependent on which studio’s parent Panel the subPanel is loaded in. To accomplish this, we are going to use three Panel Memory Slots: two in the Studio1 parent Panel, and one in the SubPanel. Our configuration might look like this:

Studio1 Panel

In addition to general Panel settings, we need to create two Panel Memory Slots: currentsource and selectsource.

Memory slot: currentsource

This memory slot will pass the currentsource value of a virtual router destination to a specific subpanel instance. This is accomplished using these bindings:

• panelmemoryslotvalue will be bound to the currentsource property of a virtual router destination using a Panel flow and a translation like this: *=*

This means whenever the currentsource property of that virtual router destination changes, the currentsource value will be assigned to this memory slot.

• panelmemoryslotchange will be bound to the setlocal property of the Studio1 Panel using a translation like this: *=iframe_1|currentsource|Panelmemoryslotvalue=*

This means whenever the currentsource value changes, it will attempt to also set the same value on whatever Panel is running in the subPanel loaded to iframe_1.

Memory slot: selectsource

This memory slot will change the route on the destination whenever its value changes.

• panelmemoryslotchange will be tied to the same virtual router destination’s current source property.

• raisetoserver needs to be set to true.

General Settings

• setlocal needs to be enabled.

Shared SubPanel – page 1

In this shared SubPanel, in addition to general Panel settings, we need to create one Panel Memory Slots: currentsource.

Memory slot: currentsource

This memory slot will receive and match the current source from the parent’s currentsource panelmemoryslotchange change event. This is accomplished using these bindings:

• panelmemoryslotvalue must be enabled.

• panelmemoryslotchange must be enabled.

*** General Settings

• setlocal needs to be enabled.

• We will bind each of the button indicators to the value of currentsource with a translation like:

  • 1=On

  • *=Off

  • Where 1 is the source whose button indicator we want to light

• When the Panel is running, this will cause the subPanel to light the correct button depending on which source number has been fed to it from the parent.

• Last we will bind the button press to the Shared Panel’s setlocal property with a translation that looks like:

  • True=parent|selectsource|panelmemoryslotvalue=1

  • Where 1 is the source whose button has been pressed.

• This will allow the button press to pass the source selected to the parent Panel’s selectsource memory slot. Which if we remember is bound via its change event to the actual destination’s currentsource.

The interesting part of the steps above is that we can now clone Panel 1 to Panel 2. In Panel 2 we change the bindings on currentsource and selectsource to a different destination for Studio2. And we make sure that the Panel selection buttons point to studio 2’s iframe rather than studio 1’s. But the shared Panel does not need any changes. It will just start working for studio 2 and studio 2’s destination. More importantly if we need to add functionality to the shared component it will work for both studios.

The key thought process that needs to be utilized is that if the shared content manipulates something specific then none of these steps are necessary. But if the shared content needs to manipulate something different depending on the parent Panel it is loaded in, then we need to pass messaging between the internal Panel and the parent to accomplish that.

This is one example of how these features may be used. It could be expanded greatly. For example, the src property of the iframe could be assigned using a setlocal so that it does not need to be updated for each studio page. Or we could add additional Panel memory slots for manipulating other destinations or even dynamically selecting the destination at the parent level.

Additionally, there are future features planned for embedded routing components that may make this specific example less necessary. However, even if we add such components there will always be situations that are custom and do not work with our preconceived components.

It should also be pointed out that in many situations it is probably simpler, easier, and more understandable to just clone. Because this is a more advanced feature it is also more advanced to understand. However, for the times when the embedded content is duplicated in too many places and needs to be periodically changed, this allows for that kind of reuse.

Important Note: to see a video presentation of the functionality described below visit this link: http://pathfinderpc.com/pfcorepro_downloads/reusablesubpanels.mp4

Legacy User Panels

Prior to Pathfinder Core PRO’s HTML 5 Panels, User Panels could be created using a variation of PanelDesigner from the original Pathfinder PRO product. As this functionality is deprecated, we would urge all users to migrate to the much more powerful HTML5 Panels.

The Panels created in the original Pathfinder PRO are called Legacy User Panels and are not interoperable with the new HTML 5 Panels. For example, you cannot open an HTML5 Panel in PathfinderPC/Mini and you cannot open a Legacy User Panel in a web browser.