WebStudio

WebStudio is a Web App that allows you to compile a dashboard of dynamic responsive widgets to effectively visualize the data from your system in a web browser. WebStudio uses the Web API to rapidly retrieve data from the system and allow access to your data from anywhere with an internet connection.

To begin using WebStudio immediately it is recommended that you create the WebStudio Demo Data objects in your system using the WebStudio_Demo_Data.json MassConfig file available on the JumpStart Resources page. Import the JSON file into a MassConfig display and click Apply to create the objects. This will give you a good starting point to begin creating widgets in the workspace.

Launching WebStudio and Authentication

Like the other Web Apps, WebStudio connects to the system through the Web API. To launch the application, open a web browser and enter the url containing the hostname of the Web API you wish to connect to and the port (default is 8002).

http://<hostname_webapi>:<port>/apps/webstudio/

When WebStudio is first opened you will be greeted by a Sign In dialog to authenticate the connection to the Web API.

WebStudio Sign In
  • To connect, you will need to enter the Hostname and Port and an optional workspace Name (any previous connections will be saved and are made available for future use in the Saved Connections panel on the left).

  • If the Web API has been configured to communicate over https or a secure websocket (WSS), then you can turn on the Secure communication switch.

  • The authentication method for connection can be chosen at the bottom of the dialog. There is the choice of using given Credentials (the built in system Profile Credentials, Active directory, machine credentials) or a Single Sign On (SSO) method (Integrate Windows Authentication).

Complete the Sign In Dialog with details appropriate to your own system and click Connect.

Example Sign In

WebStudio Workspace

Once you have successfully signed in, the WebStudio will open with an empty model screen. All functionality can be accessed from the icons in the menubar at the top of the screen.

WebStudio - Menubar
Figure 1. WebStudio - Menubar

In the right top hand corner, the connection status can be viewed along with detailed information about the connection. Click the "Exit Arrow" icon to sign out and the "Contrast" icon to switch between light and dark mode.

To begin adding widgets to the workspace, click on the "+" icon. This will open a Model Editor with a series of preconfigured widget template (using the WebStudio Demo Data Items).

Widget Templates
Figure 2. Widget Templates

The templates can be selected from the left hand pane and this will load the configuration into the Model Editor. Each widget configuration is entirely encapsulated in a JSON file as shown in the example above. The JSON file can be edited to change the configuration. As can be seen from the "path" keys, the widget configuration points directly to objects in the I/O Model of the system.

To create the widget in the Workspace click the "Save" icon in the top of the Model Editor.

Web Chart Widget
Figure 3. Web Chart Widget

The widget can be moved to any location in the workspace and resized using the "corner" icon in the bottom right-hand corner of the widget.