Main internal widgets of the APP

WIDGETS

Box Value

Box Value is one of the most used features in creating a dashboard. This is where the monitored values of a measurement point are displayed. In Box Value settings, the following features can be parameterized:

Figure 1 – Editing Box Value

a) Title: indicates the ownership of the box.

b) TAG: measurement point tag reference.

c) Value format: indicates the number of decimal places of the value to be displayed.

d) Metric: indicates the engineering unit associated with the measurement point.

e) Icon: illustrative icon of the measurement point.

f) Options: makes it possible to define which parameters should be displayed in the Box Value interface. The options are: display value, display protocol, display progress bar, content center, and change icon background color.

g) Primary colors, background colors and Zoom: allows you to customize Box Value items by changing icon colors (default RGBA code) and text sizes (zoom size).

Weather

The "Weather" widget can be configured with address, latitude and longitude or device TAG. The tool shows the weather in real time, with temperature and weather forecast.

Figure 2 – Weather widget configured

Address

In this option, the user can search for the "search address" and the tool automatically identifies the latitude and longitude referring to the chosen location. Select the temperature scale and click the "save" option to configure the widget.

Figure 3 – Editing the Weather tool, in address mode

Lat/Long

In this option the user can configure the latitude and longitude that they want to view in the tool. Select the temperature scale and click the "save" option to configure the widget.

Figure 4 – Editing the Weather tool, in lat/long mode

Tags

In this option the user can configure a tag, referring to the parameter configured in the menu filter of the application (example in figure 6). TheMenu Filter Structuring explica document explains how to access and use the application's menu filter.

The names of your parameters are as XX_LT1 and XX_LN1 in the application menu filter (figure 6). Then these tags are referenced in the "Latitude TAG" and "Longitude TAG" fields of the widget (figure 5) .It is important to remember that the parameters are passed by @, that is, the fields with @XX_LN1 and @XX_LT1 are filled in.

After choosing the tag, select the temperature scale and click the "save" option to complete the widget setup.

Figure 5 – Editing the Weather tool, in Tags mode

Figure 6 – Filter configuration in the application menu. Featured tags for latitude and longitude

Gauge

Tool for configuring Gauge charts. It has parameterization features similar to Value Box for registration of names, TAG and colors of the graph.

Figure 7 – Gauge Tool

To access the widget configuration just click on the gear at the top of the tool, highlighted in figure 7.

Gauge Tool Configuration

Figure 8 – Gauge tool configuration

Title: indicates the ownership of the box.

TAG: measurement point tag reference.

Metric: indicates the unit of measurement associated with the variable presented.

Colors: allows you to customize the color of the gauge chart by changing the colors of the icon (RGBA code standard).

Video Stream

To access the widget configuration just click on the gear icon at the top. The "Video Stream" widget can be configured by parameterizing the URL.

Figure 9 – Configuration screen of the Video Stream tool

Video Stream Widget Settings

a)Video Stream Settings

Url: You can set up a targeted url for a streaming platform video, for example, Youtube. After setting up video stream and widget controls, the tool plays the selected video.

b) Control settings

The user has the following options to play the chosen video:

Autoplay: When you open the dashboard, start the video.

Contras: provides options for audio choices (volume setting), autoplay, pause and full screen view in the tool.

Loop: The video will play again after it is finished.

Mute: The video will play without audio.

Figure 10 – Video Stream Widget configured in the app

History Graph

History Graph is one of the most used widgets in the thingable! applications, where you can view historical data in the form of line or bar graphs. This widget brings a multitude of customization options, we have documentation dedicated to this subject inParameterization of Graphs.

Platform App

The Platform App allows viewing of environment widgets within the configured application. They are: Device Manager, Maps, Alarms, Reports and Schematics.

Figure 11 - Widget Platform App

Device Manager

To configure the "Device Manager" App click on the Platform Application option and select the "Device Manager" option (figure 11). Then, click on "Save" and the user will be able to view the tool within the application (figure 12).

Figure 12 - Viewing the Device Manager tool in the app

Maps

To configure the "Maps" App click on the Platform Application option and select the "Maps" option. The options below will be displayed on the screen:

Figure 13 - View of the configuration of the "application configurator" tool with the selection in maps

To view a map in the "Maps" widget you first need to create it. For more information access the document Map Builder.

Initial map view: option to select one of the maps created in the tool map builder. Selecting the key to the right of the initial view option allows the user to directly enter the name of the file saved in the map builder. When this option is not selected, it automatically loads all the map files saved in the map builder.

Initial map server: provides different map sources. We recommend using OpenStreetMap.

Automatic adjustment limit: provides the options: yes, no and follow the marker to perform the automatic adjustment of the created map view.

Hide Map View list: option to hide or make available the list of maps for the end user.

Group markers: groups the markers available on the map according to the zoom on the screen. At the end, click "Save".

Alarms

You do not need special settings when using the Alarms widget within the app.

Figure 14 - View of the configuration of the "application configurator" tool with the selection in alarms

Below is a video tutorial of the alarm management tool:

Alarm Management Tool

Reports

To configure the "Reports" App, click on the "Platform Application" option and select the "Reports" option. Then, click on "Save".

Figure 15 - View of the configuration of the "application configurator" tool with the selection in reports

After a few seconds, the report made available to the application will be presented on screen, with the appropriate generation and export tools.

Figure 16 - Preview of the reporting tool

We recommend reading our material dedicated to the topic of reports:Report Settings

Schematics

To configure the "Schematics" App click on the "Platform Application" option and select the "Schematics". The options below will be displayed on screen:

Figure 17 - View of the configuration of the "application configurator" tool with the selection in schematics

File name: option to select the schematic created in the SVG pivoting tool. Selecting the key to the right of the initial view option allows the user to directly enter the name of the file saved in the svg pivoting tool.

Viewport list: allows the user to choose a custom view of the manager, already preconfigured in the SVG pivoting tool, using the ViewPort feature. In the list, the name of the visualization created by the user for the particular file selected in the previous option "File Name" will automatically appear. For more information access our documentation directed to this theme: SVG Booster.

Options: Enables/disables schematic navigation information and controls within the application. Among the options, we have:

• Enable navigation controls: synoptic navigation controls (forward, backward, left or right) appear in this option.

Figure 18 - View of the "schematic" app with the selection selected in enable navigation controls

• Enable Buttons on Hover: By enabling this option, the navigation controls appear on screen when we hover the mouse cursor.

• Show 'Open Schematic' button: enables the open schematic option, highlighted in the figure 19.

Figure 19 - View of the "schematic" app with the selection marked in show 'open schematic' button

• ShowOpenDynamicsButton: enables the option of dynamics buttons, highlighted in the figure 20.

Figure 20 - View of the "schematic" app with the selection marked in Show Open Dynamics Button

• Enable Visua/Box list: enables the Visual Box list option, highlighted in figure 21.

Figure 21 - View of the "schematic" app with the selection marked in Visual Box

• Show info window: enables the Cartesian plane information field where the mouse cursor is positioned (figure 22).

Figure 22 - View of the "schematic" app with the selection selected in Show info window

• Enable Dynamic Simulator: Enables the option to simulate dynamic information in the configured synoptic.

Empty Template

Empty Template is a free-editing feature that makes it possible to create and edit text, tables, and attach images, files, and links, among other basic features of a text editor. In addition to these basic features it is possible to develop encodings in HTML language in Tools -> Source Code. The following figure shows the Source Cod feature and:

Figure 23 – View of the "Source Code" tool

Recommended to read the materialCustom Graphical Interfaces. This material presents the process of creating graphical interfaces through Logic Builder and how to invoke the visualization of these interfaces within an application through the Empty Template..