MXM SOTB JS Widget

Version:

1.0.0.Final



Type:

MXM plugin



Available for:

Manager V6 (Lite & Pro); It might be available for Manager Kiosk in the future



Overview:

The MXM SOTB JS Widget allows to display a new generation of graphical objects, called Widget, in a Local Panel in the Medialon Manager application.
These Widgets are defined in formatted Javascript files (.js) which are distributed with the MxM by SoundOutTheBox.



Video:


Demo version available

> Features | > Installation | > Device Setup | > Graphical User Interface | > Revisions | > Technologies | > Comments


Features:


The MXM SOTB JS Widget allows to display a new generation of graphical objects, called Widget, in a Local Panel in the Medialon Manager application.

These Widgets are defined in formatted Javascript files (.js) which are distributed with the MxM by SoundOutTheBox.

Some Widgets are already available:
  • knob: Different kind of knob can be drawn. This Widget provides many options like ‘ReadOnly’, ‘DisplayInput’, Min’, ‘Max’ …
  • contentFlow: contentFlow is a image selector.
  • colorPicker: colorPicker is a color selector which allows to know the RGB values of the new color and the current color already validated.
  • simpleGraph: Draw a line, an area, bars or points to represent an array with only one row.
  • multipleGraph: Draw a line, an area, bars or points to represent an array with many rows.
  • vuMeter1: vuMeter1 is a widget which displays a vuMeter with a static size. The level is defined between –20 and 3.


Only one Widget can be defined by device.

The Widget is simply selected during the Setup, after that it can be displayed in a UserScreeen by using a Container object.
Dynamic variables associated to the Widget are created when the Setup Device is validated and provide an access to the Widget properties.
Examples about the Widget properties:
  • the ‘Value’ variable of the vuMeter1 Widget allows to modify the level during the Manager runtime.
  • Select a new color in the colorPicker Widget will modify the RGB variables.
  • Modify the value of a know Widget directly in the UserScreen, this will change the Value variable and vice versa.


> Top

Installation:


The runtime components of Visual C++ Libraries are required by the SOTB JS Widget MxM. During the installation of this MXM, vcredist_x86.exe which is the Microsoft Visual C++ 2010 Redistributable Package (x86) will be executed.

> Top

Device Setup:


The Device Setup dialog is used to:
  • Choose the Widget
  • Define the default properties of the selected Widget
  • Set the background color

Choose the Widget:

A JS Widget (.js file) can be selected via the file browser.
After the selection, the Widget is displayed in the viewer area and its path stays visible too.

Informations from the JS Widget or the Device fill the fields below:
  • Name: Device Name. The Device Name cannot be change here.
  • Type: Widget type (ex: knob, vuMeter1, contentFlow, colorPicker…).
  • Author: Widget creator.
  • Version: Widget version.
  • Description: Widget description.

Define the default properties of the selected Widget:

The properties of the selected Widget can be modified in order to define the default look of this Widget. They are memorized and saved in the project. These properties are restored on the loading project.

The property type is defined in the JS Widget and cannot be changed.
The property type can be:
  • String (if the string matches with a color definition a color selector is provided; if the string matches with a font definition it's a font selector which is provided)
  • Integer
  • Real
  • Enum
Some properties are ‘read only’. They can be changed into the Setup and the Widget look will change but during the runtime they have no effect. This information is given in the Widget Description file.

Set the background color:

In order to have an appropriate result during the Widget creation, the background color applicated to the widget is defined directly at the Device Setup time.
Note: For your own pleasure this MXM supports all the Manager styles.

> Top

Graphical User Interface:


The GUI of this MXM is a kind of ‘Renderer’.

Add a Container in the UserScreen and drag and drop the device in this container in order to display the Widget.

For an optimized render, the Container 'Width' and 'Height' properties should be equal to the Widget 'Width' and 'Height' properties.

note: The Widget is not visible in Manager Stop mode.

> Top

Technologies:


The SOTB JS Widget MXM has been realized via the MXM SDK from Medialon which can be used by third party. This SDK allows to create MXM plugins for Medialon products (Manager, Showmaster) in order to control others devices...

> Top

Revisions:


V 6.0.0
  • Initial: The SOTB JS Widget requires Manager 6.2.0+.

> Top